build: updated deps and template generation

Author: matteobruni

files/create-plugin/src/index.ts

@@ -1,41 +1,10 @@
-import type { Container, Engine, IPlugin, ISourceOptions, Options } from "@tsparticles/engine";
-import { PluginInstance } from "./PluginInstance";
-
-/**
- */
-class Plugin implements IPlugin {
-    readonly id;
-
-    private readonly _engine;
-
-    constructor(engine: Engine) {
-        this.id = "#template#";
-
-        this._engine = engine;
-    }
-
-    getPlugin(container: Container): PluginInstance {
-        return new PluginInstance(container, this._engine);
-    }
-
-    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, replace true with condition if needed
-    }
-}
+import type { Engine } from "@tsparticles/engine";
 
 /**
  * @param engine - The engine instance
  */
 export async function loadTemplatePlugin(engine: Engine): Promise<void> {
+    const { Plugin } = await import("./plugin.js");
+
     await engine.addPlugin(new Plugin(engine));
 }

files/create-plugin/src/plugin.ts

@@ -0,0 +1,36 @@
+import { type Container, type Engine, type IPlugin, type ISourceOptions, type Options } from "@tsparticles/engine";
+import type { PluginInstance } from "./PluginInstance.js";
+
+/**
+ */
+export class Plugin implements IPlugin {
+    readonly id;
+
+    private readonly _engine;
+
+    constructor(engine: Engine) {
+        this.id = "#template#";
+
+        this._engine = engine;
+    }
+
+    async getPlugin(container: Container): Promise<PluginInstance> {
+        const { PluginInstance } = await import("./PluginInstance.js");
+
+        return new PluginInstance(container, this._engine);
+    }
+
+    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, replace true with condition if needed
+    }
+}

files/create-preset/src/index.ts

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

files/create-shape/src/ShapeDrawer.ts

@@ -1,7 +1,7 @@
 import type { IShapeDrawData, IShapeDrawer } from "@tsparticles/engine";
 
 export class ShapeDrawer implements IShapeDrawer {
-    draw(_data: IShapeDrawData): void {
+    async draw(_data: IShapeDrawData): Promise<void> {
         // draw the particle using the context
         // which is already centered in the particle position
         // colors are already handled, just draw the shape
@@ -10,5 +10,8 @@ export class ShapeDrawer implements IShapeDrawer {
         // pixelRatio is the canvas ratio used by the tsParticles instance, you may need it for density-independent shapes
         // the parameters have an underscore prefix because they're not used in this example
         // the underscore prefix can be removed for used parameters, the unused ones can be removed too
+
+        // remove this if there's already an await call
+        await Promise.resolve();
     }
 }

files/create-shape/src/index.ts

@@ -1,9 +1,10 @@
 import type { Engine } from "@tsparticles/engine";
-import { ShapeDrawer } from "./ShapeDrawer";
 
 /**
  * @param engine - the engine instance to load the shape into
  */
 export async function loadTemplateShape(engine: Engine): Promise<void> {
+    const { ShapeDrawer } = await import("./ShapeDrawer");
+
     await engine.addShape("#template#", new ShapeDrawer());
 }

files/empty-project/package.json

@@ -84,13 +84,13 @@
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@tsparticles/cli": "^2.0.5",
-    "@tsparticles/eslint-config": "^2.1.0",
+    "@tsparticles/eslint-config": "^2.1.4",
     "@tsparticles/prettier-config": "^2.1.0",
     "@tsparticles/tsconfig": "^2.0.1",
-    "@tsparticles/webpack-plugin": "^2.1.0",
+    "@tsparticles/webpack-plugin": "^2.1.4",
     "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "babel-loader": "^9.1.3",
     "browserslist": "^4.22.3",
     "copyfiles": "^2.4.1",
@@ -105,6 +105,6 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3"
+    "@tsparticles/engine": "^3.2.0"
   }
 }

package.json

@@ -28,12 +28,12 @@
     "version": "node scripts/postversion.js && git add files/empty-project/package.json"
   },
   "dependencies": {
-    "@tsparticles/eslint-config": "^2.1.0",
+    "@tsparticles/eslint-config": "^2.1.4",
     "@tsparticles/prettier-config": "^2.1.0",
     "@tsparticles/tsconfig": "^2.0.1",
-    "@tsparticles/webpack-plugin": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@tsparticles/webpack-plugin": "^2.1.4",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "commander": "^11.1.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -55,7 +55,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/klaw": "^3.0.6",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^20.11.9",
+    "@types/node": "^20.11.13",
     "@types/prompts": "^2.4.9",
     "chai": "^4.4.0",
     "cross-env": "^7.0.3",