webgl-fluid - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

		{
		"name": "webgl-fluid",
		"version": "0.2.0",
		"description": "ES module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation",
		"pascalCasedName": "WebGLFluid",
		"version": "0.3.0",
		"private": false,
		"description": "ES Module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.",
		"license": "MIT",
		"repository": "https://github.com/cloydlau/webgl-fluid",
		"exports": {
		".": {
		"require": "./dist/webgl-fluid.umd.js",
		"import": "./dist/webgl-fluid.mjs"
		},
		"./": "./"
		},
		"main": "./dist/webgl-fluid.umd.js",
		@@ -13,24 +21,31 @@ "module": "./dist/webgl-fluid.mjs",
		"files": [
		"dist"
		"dist",
		"docs"
		],
		"exports": {
		".": {
		"require": "./dist/webgl-fluid.umd.js",
		"import": "./dist/webgl-fluid.mjs",
		"browser": "./dist/webgl-fluid.mjs"
		},
		"./": "./"
		},
		"scripts": {
		"dev": "vite --open",
		"build": "vite build",
		"serve": "vite preview"
		"serve": "vite preview",
		"doc": "vitepress dev --open /README",
		"release": "npx case-police --fix && npx lint-staged && pnpm build && cl release"
		},
		"devDependencies": {
		"@antfu/eslint-config": "latest",
		"@cloydlau/scripts": "latest",
		"@commitlint/cli": "latest",
		"@commitlint/config-conventional": "latest",
		"case-police": "latest",
		"eslint": "latest",
		"husky": "latest",
		"vite": "latest"
		"lint-staged": "latest",
		"vite": "latest",
		"vitepress": "latest"
		},
		"lint-staged": {
		"!(demo/*/)*.{js,ts,tsx,vue,md}": [
		"eslint --fix"
		]
		},
		"publishConfig": {
		"registry": "https://registry.npmjs.org/"
		}
		}

103

README.md

		@@ -1,5 +0,18 @@
		# webgl-fluid
		# WebGL Fluid <sup>[![Version Badge][npm-version-svg]][package-url]</sup>

		ES Module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation
		[npm-version-svg]: https://versionbadg.es/cloydlau/webgl-fluid.svg
		[package-url]: https://npmjs.com/package/webgl-fluid

		<p align="left">
		<a href="https://www.npmjs.com/package/webgl-fluid?activeTab=dependencies"><img alt="zero dependencies" src="https://img.shields.io/badge/dependencies-0-green.svg"></a>
		<a href="https://bundlephobia.com/package/webgl-fluid"><img alt="minzipped size" src="https://img.shields.io/bundlephobia/minzip/webgl-fluid"></a>
		<a href="https://npmcharts.com/compare/webgl-fluid"><img alt="downloads" src="https://img.shields.io/npm/dt/webgl-fluid"></a>
		<a href="https://eslint.org"><img alt="code style" src="https://img.shields.io/badge/code_style-ESLint-4B32C3.svg?logo=eslint"></a>
		<a href="https://conventionalcommits.org"><img alt="conventional commits" src="https://img.shields.io/badge/commits-Conventional-FE5196.svg?logo=conventionalcommits&logoColor=white"></a>
		</p>

		> ES Module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.

		🕹 [Online Playground](https://cloydlau.github.io/demo/webgl-fluid.html)

		<br>
		@@ -9,7 +22,4 @@

		- ESM & UMD
		- Configurable
		- 0 dependency, 21kb gziped
		- Hover to activate by default, can also be Click
		- Support background image
		- Background image
		- Control whether to trigger multiple random splats initially
		@@ -19,10 +29,6 @@

		## Installation
		## Install

		![NPM](https://nodei.co/npm/webgl-fluid.png)
		### NPM

		<br>

		NPM

		```ts
		@@ -38,4 +44,8 @@ import WebGLFluid from 'webgl-fluid'

		Without bundler / CDN
		<a name="CDN"></a>

		### CDN

		#### Using the ESM Build

		```html
		@@ -45,6 +55,14 @@ <!DOCTYPE html>
		<body>
		<canvas style="width: 100vw; height: 100vh;"/>
		<script src="https://unpkg.com/webgl-fluid@0.2"></script>
		<script>
		window['webgl-fluid'](document.querySelector('canvas'), {
		<canvas style="width: 100vw; height: 100vh;" />
		<script type="importmap">
		{
		"imports": {
		"webgl-fluid": "https://unpkg.com/webgl-fluid@0.3/dist/webgl-fluid.mjs"
		}
		}
		</script>
		<script type="module">
		import WebGLFluid from 'webgl-fluid'

		WebGLFluid(document.querySelector('canvas'), {
		// options
		@@ -57,6 +75,4 @@ })

		<br>
		#### Using the Global Build

		Module Script

		```html
		@@ -66,7 +82,6 @@ <!DOCTYPE html>
		<body>
		<canvas style="width: 100vw; height: 100vh;"/>
		<script type="module">
		import WebglFluid from 'https://unpkg.com/webgl-fluid@0.2'

		WebglFluid(document.querySelector('canvas'), {
		<canvas style="width: 100vw; height: 100vh;" />
		<script src="https://unpkg.com/webgl-fluid@0.3"></script>
		<script>
		WebGLFluid(document.querySelector('canvas'), {
		// options
		@@ -91,7 +106,7 @@ })
		DENSITY_DISSIPATION: 1,
		VELOCITY_DISSIPATION: 0.2,
		VELOCITY_DISSIPATION: 0.3,
		PRESSURE: 0.8,
		PRESSURE_ITERATIONS: 20,
		CURL: 30,
		SPLAT_RADIUS: 0.25,
		SPLAT_RADIUS: 0.35,
		SPLAT_FORCE: 6000,
		@@ -118,5 +133,5 @@ SHADING: true,

		## Background image
		## Background Image

		css
		CSS

		@@ -132,3 +147,3 @@ ```css

		js
		JS

		@@ -143,8 +158,15 @@ ```ts

		## Example for Vue 3
		## Example

		### Vanilla

		See [CDN](#CDN).

		<br>

		### Vue 3

		```vue

		<template>
		<canvas ref="canvas"/>
		<canvas ref="canvas" />
		</template>
		@@ -173,8 +195,7 @@

		## Example for Vue 2
		### Vue 2

		```vue

		<template>
		<canvas ref="canvas"/>
		<canvas ref="canvas" />
		</template>
		@@ -186,3 +207,3 @@
		export default {
		mounted () {
		mounted() {
		WebGLFluid(this.$refs.canvas)
		@@ -200,1 +221,9 @@ }
		```

		<br>

		## Changelog

		Detailed changes for each release are documented in the [release notes](https://github.com/cloydlau/webgl-fluid/releases).

		<br>

dist/webgl-fluid.umd.js

Sorry, the diff of this file is too big to display

webgl-fluid - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics