Merge pull request #18 from tsparticles/dev

v2.0.0

.github/workflows/node.js-ci.yml

@@ -43,8 +43,8 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
       - run: pnpm install --no-frozen-lockfile
-      - run: npx pnpm run build:ci
-      - run: npx pnpm test
+      - run: pnpm run build:ci
+      - run: pnpm test
   pr:
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'pull_request' }}
@@ -81,5 +81,5 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
       - run: pnpm install --no-frozen-lockfile
-      - run: npx pnpm run build:ci
-      - run: npx pnpm test
+      - run: pnpm run build:ci
+      - run: pnpm test

files/create-plugin/README.md

@@ -54,7 +54,7 @@ $ yarn add tsparticles-plugin-template
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
+const { tsParticles } = require("@tsparticles/engine");
 const { loadTemplatePlugin } = require("tsparticles-plugin-template");
 
 (async () => {
@@ -65,7 +65,7 @@ const { loadTemplatePlugin } = require("tsparticles-plugin-template");
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
+import { tsParticles } from "@tsparticles/engine";
 import { loadTemplatePlugin } from "tsparticles-plugin-template";
 
 (async () => {

files/create-plugin/src/PluginInstance.ts

@@ -1,4 +1,4 @@
-import { type Container, type Engine, type IContainerPlugin } from "tsparticles-engine";
+import { type Container, type Engine, type IContainerPlugin } from "@tsparticles/engine";
 
 export class PluginInstance implements IContainerPlugin {
     private readonly _container;
@@ -10,6 +10,7 @@ export class PluginInstance implements IContainerPlugin {
     }
 
     async init(): Promise<void> {
-        // add your plugin initialization here
+        // add your plugin initialization here, replace the empty promise
+        return await Promise.resolve();
     }
 }

files/create-plugin/src/index.ts

@@ -1,4 +1,4 @@
-import type { Container, Engine, IPlugin, ISourceOptions, Options } from "tsparticles-engine";
+import type { Container, Engine, IPlugin, ISourceOptions, Options } from "@tsparticles/engine";
 import { PluginInstance } from "./PluginInstance";
 
 /**
@@ -20,14 +20,16 @@ class Plugin implements IPlugin {
 
     loadOptions(_options: Options, _source?: ISourceOptions): void {
         if (!this.needsPlugin()) {
+            // ignore plugin options when not needed
+
             return;
         }
 
         // Load your options here
     }
 
     needsPlugin(_options?: ISourceOptions): boolean {
-        return true; // add your condition here
+        return true; // add your condition here, replace true with condition if needed
     }
 }
 

files/create-preset/README.md

@@ -21,7 +21,7 @@ Once installed you need one more script to be included in your page (or you can
 from [jsDelivr](https://www.jsdelivr.com/package/npm/tsparticles-preset-template):
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/tsparticles-engine@2/tsparticles.engine.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/engine@2/tsparticles.engine.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-template/tsparticles.preset.template.min.js"></script>
 ```
 
@@ -75,7 +75,7 @@ This sample uses the class component syntax, but you can use hooks as well (if t
 
 ```javascript
 import Particles from "react-particles";
-import { Engine } from "tsparticles-engine";
+import { Engine } from "@tsparticles/engine";
 import { loadTemplatePreset } from "tsparticles-preset-template";
 
 export class ParticlesContainer extends React.PureComponent<IProps> {

files/create-preset/src/bundle.ts

@@ -1,6 +1,6 @@
-import { loadTemplatePreset } from ".";
-import { tsParticles } from "tsparticles-engine";
+import { loadTemplatePreset } from "./index.js";
+import { tsParticles } from "@tsparticles/engine";
 
-loadTemplatePreset(tsParticles);
+void loadTemplatePreset(tsParticles);
 
 export { loadTemplatePreset, tsParticles };

files/create-preset/src/index.ts

@@ -1,13 +1,13 @@
-import type { Engine } from "tsparticles-engine";
+import type { Engine } from "@tsparticles/engine";
 import { options } from "./options";
 
 /**
  *
  * @param engine - the engine instance to load the preset into
  */
-export function loadTemplatePreset(engine: Engine): void {
+export async function loadTemplatePreset(engine: Engine): Promise<void> {
     // TODO: additional modules must be loaded here
 
     // Adds the preset to the engine, with the given options
-    engine.addPreset("#template#", options);
+    await engine.addPreset("#template#", options);
 }

files/create-preset/src/options.ts

@@ -1,4 +1,4 @@
-import type { ISourceOptions } from "tsparticles-engine";
+import type { ISourceOptions } from "@tsparticles/engine";
 
 // The options used by the preset
 export const options: ISourceOptions = {

files/create-shape/README.md

@@ -55,7 +55,7 @@ $ yarn add tsparticles-shape-template
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
+const { tsParticles } = require("@tsparticles/engine");
 const { loadTemplateShape } = require("tsparticles-shape-template");
 
 (async () => {
@@ -66,7 +66,7 @@ const { loadTemplateShape } = require("tsparticles-shape-template");
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
+import { tsParticles } from "@tsparticles/engine";
 import { loadTemplateShape } from "tsparticles-shape-template";
 
 (async () => {

files/create-shape/src/ShapeDrawer.ts

@@ -1,15 +1,10 @@
-import type { IDelta, IShapeDrawer, Particle } from "tsparticles-engine";
+import type { IShapeDrawData, IShapeDrawer } from "@tsparticles/engine";
 
 export class ShapeDrawer implements IShapeDrawer {
-    draw(_context: CanvasRenderingContext2D,
-         _particle: Particle,
-         _radius: number,
-         _opacity: number,
-         _delta: IDelta,
-         _pixelRatio: number): void {
+    draw(_data: IShapeDrawData): void {
         // draw the particle using the context
         // which is already centered in the particle position
-        // colors are already handles, just draw the shape
+        // colors are already handled, just draw the shape
         // the bounds are -radius to radius
         // delta is the frame time difference between the last frame and this one, in ms, use it for animated shapes
         // pixelRatio is the canvas ratio used by the tsParticles instance, you may need it for density-independent shapes

files/create-shape/src/index.ts

@@ -1,4 +1,4 @@
-import type { Engine } from "tsparticles-engine";
+import type { Engine } from "@tsparticles/engine";
 import { ShapeDrawer } from "./ShapeDrawer";
 
 /**

files/empty-project/package.dist.json

@@ -72,6 +72,6 @@
   "module": "index.js",
   "types": "index.d.ts",
   "dependencies": {
-    "tsparticles-engine": "^2.12.0"
+    "@tsparticles/engine": "^3.0.3"
   }
 }

files/empty-project/package.json

@@ -82,29 +82,29 @@
   "types": "dist/types/index.d.ts",
   "prettier": "@tsparticles/prettier-config",
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@tsparticles/cli": "^2.0.0",
-    "@tsparticles/eslint-config": "^2.0.0",
-    "@tsparticles/prettier-config": "^2.0.0",
-    "@tsparticles/tsconfig": "^2.0.0",
-    "@tsparticles/webpack-plugin": "^2.0.0",
-    "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@babel/core": "^7.23.7",
+    "@tsparticles/cli": "^2.0.4",
+    "@tsparticles/eslint-config": "^2.0.4",
+    "@tsparticles/prettier-config": "^2.0.1",
+    "@tsparticles/tsconfig": "^2.0.1",
+    "@tsparticles/webpack-plugin": "^2.0.4",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "babel-loader": "^9.1.3",
-    "browserslist": "^4.21.10",
+    "browserslist": "^4.22.2",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
-    "prettier": "^3.0.1",
-    "rimraf": "^5.0.1",
-    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^5.1.6",
-    "webpack": "^5.88.2",
-    "webpack-bundle-analyzer": "^4.9.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.1.1",
+    "rimraf": "^5.0.5",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "tsparticles-engine": "^2.12.0"
+    "@tsparticles/engine": "^3.0.3"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/cli",
-  "version": "1.13.0",
+  "version": "2.0.4",
   "license": "MIT",
   "bin": {
     "tsparticles-cli": "dist/cli.js"
@@ -28,38 +28,40 @@
     "version": "node scripts/postversion.js && git add files/empty-project/package.json"
   },
   "dependencies": {
-    "@tsparticles/eslint-config": "^2.0.0",
-    "@tsparticles/prettier-config": "^2.0.0",
-    "@tsparticles/tsconfig": "^2.0.0",
-    "@tsparticles/webpack-plugin": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "commander": "^11.0.0",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jsdoc": "^48.0.0",
+    "@tsparticles/eslint-config": "^2.0.4",
+    "@tsparticles/prettier-config": "^2.0.1",
+    "@tsparticles/tsconfig": "^2.0.1",
+    "@tsparticles/webpack-plugin": "^2.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "commander": "^11.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsdoc": "^48.0.2",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
     "klaw": "^4.1.0",
+    "lookpath": "^1.2.2",
     "path-scurry": "^1.10.1",
-    "prettier": "^3.0.1",
+    "prettier": "^3.1.1",
+    "prettier-plugin-multiline-arrays": "^3.0.1",
     "prompts": "^2.4.2",
-    "rimraf": "^5.0.1",
-    "typescript": "^5.1.6",
-    "webpack": "^5.88.2"
+    "rimraf": "^5.0.5",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.5",
-    "@types/fs-extra": "^11.0.1",
-    "@types/klaw": "^3.0.3",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^20.4.8",
-    "@types/prompts": "^2.4.4",
-    "chai": "^4.3.7",
+    "@types/chai": "^4.3.11",
+    "@types/fs-extra": "^11.0.4",
+    "@types/klaw": "^3.0.6",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^20.11.0",
+    "@types/prompts": "^2.4.9",
+    "chai": "^4.4.0",
     "cross-env": "^7.0.3",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.2"
   },
   "description": "tsParticles CLI",
   "main": ".eslintrc.js",