@tsparticles/cli 1.6.5 → 1.8.0

package/dist/build/build-eslint.js

@@ -8,7 +8,7 @@ const eslint_1 = require("eslint");
  */
 async function lint(ci) {
     console.log("ESLint - started on src");
-    let res = false;
+    let res;
     try {
         const eslint = new eslint_1.ESLint({
             baseConfig: {

package/dist/build/build-prettier.js

@@ -16,7 +16,7 @@ const prettier_1 = __importDefault(require("prettier"));
  */
 async function prettifySrc(basePath, srcPath, ci) {
     console.log("Prettier - started on src");
-    let res = false;
+    let res;
     try {
         for await (const file of (0, klaw_1.default)(srcPath)) {
             if (file.stats.isDirectory()) {
@@ -28,12 +28,12 @@ async function prettifySrc(basePath, srcPath, ci) {
             options.parser = "typescript";
             options.tabWidth = 4;
             if (ci) {
-                if (!prettier_1.default.check(contents, options)) {
+                if (!(await prettier_1.default.check(contents, options))) {
                     throw new Error(`${file.path} is not formatted correctly`);
                 }
             }
             else {
-                const formatted = prettier_1.default.format(contents, options);
+                const formatted = await prettier_1.default.format(contents, options);
                 await fs_extra_1.default.writeFile(file.path, formatted, "utf8");
             }
         }
@@ -54,19 +54,19 @@ exports.prettifySrc = prettifySrc;
  */
 async function prettifyReadme(basePath, ci) {
     console.log("Prettier - started on README.md");
-    let res = false;
+    let res;
     try {
         const contents = await fs_extra_1.default.readFile("README.md", "utf8"), options = (await prettier_1.default.resolveConfig(basePath)) ?? {};
         options.printWidth = 120;
         options.endOfLine = "lf";
         options.parser = "markdown";
         if (ci) {
-            if (!prettier_1.default.check(contents, options)) {
+            if (!(await prettier_1.default.check(contents, options))) {
                 throw new Error(`README.md is not formatted correctly`);
             }
         }
         else {
-            const formatted = prettier_1.default.format(contents, options);
+            const formatted = await prettier_1.default.format(contents, options);
             await fs_extra_1.default.writeFile("README.md", formatted, "utf8");
         }
         res = (await prettifyTraductions(basePath, ci)) && (await prettifyMarkdownTypeDocFiles(basePath, ci));
@@ -102,12 +102,12 @@ async function prettifyTraductions(basePath, ci) {
                 options.endOfLine = "lf";
                 options.parser = "markdown";
                 if (ci) {
-                    if (!prettier_1.default.check(contents, options)) {
+                    if (!(await prettier_1.default.check(contents, options))) {
                         throw new Error(`${file.path} is not formatted correctly`);
                     }
                 }
                 else {
-                    const formatted = prettier_1.default.format(contents, options);
+                    const formatted = await prettier_1.default.format(contents, options);
                     await fs_extra_1.default.writeFile(file.path, formatted, "utf8");
                 }
             }
@@ -144,12 +144,12 @@ async function prettifyMarkdownTypeDocFiles(basePath, ci) {
                 options.endOfLine = "lf";
                 options.parser = "markdown";
                 if (ci) {
-                    if (!prettier_1.default.check(contents, options)) {
+                    if (!(await prettier_1.default.check(contents, options))) {
                         throw new Error(`${file.path} is not formatted correctly`);
                     }
                 }
                 else {
-                    const formatted = prettier_1.default.format(contents, options);
+                    const formatted = await prettier_1.default.format(contents, options);
                     await fs_extra_1.default.writeFile(file.path, formatted, "utf8");
                 }
             }

package/dist/create/create.js

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCommand = void 0;
 const commander_1 = require("commander");
+const plugin_1 = require("./plugin/plugin");
 const preset_1 = require("./preset/preset");
+const shape_1 = require("./shape/shape");
 const createCommand = new commander_1.Command("create");
 exports.createCommand = createCommand;
 createCommand.description("Create a new tsParticles project");
+createCommand.addCommand(plugin_1.pluginCommand);
 createCommand.addCommand(preset_1.presetCommand);
+createCommand.addCommand(shape_1.shapeCommand);

package/dist/create/plugin/create-plugin.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPluginTemplate = void 0;
+const string_utils_1 = require("../../utils/string-utils");
+const template_utils_1 = require("../../utils/template-utils");
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+/**
+ * Updates the index file with the correct function name
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ */
+async function updateIndexFile(destPath, name) {
+    const indexPath = path_1.default.resolve(destPath, "src", "index.ts"), index = await fs_extra_1.default.readFile(indexPath, "utf-8"), capitalizedName = (0, string_utils_1.capitalize)((0, string_utils_1.capitalize)(name, "-"), " "), camelizedName = (0, string_utils_1.camelize)(capitalizedName), indexFunctionRegex = /loadTemplatePlugin/g, replacedFuncText = index.replace(indexFunctionRegex, `load${capitalizedName}Plugin`), indexNameRegex = /"#template#"/g, replacedNameText = replacedFuncText.replace(indexNameRegex, `"${camelizedName}"`);
+    await fs_extra_1.default.writeFile(indexPath, replacedNameText);
+}
+/**
+ * Updates the plugin package file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ */
+async function updatePluginPackageFile(destPath, name, description, repoUrl) {
+    const camelizedName = (0, string_utils_1.camelize)((0, string_utils_1.camelize)(name, "-"), " "), dashedName = (0, string_utils_1.dash)(camelizedName);
+    (0, template_utils_1.updatePackageFile)(destPath, `"tsparticles-plugin-${dashedName}"`, description, `"tsparticles.plugin.${camelizedName}.min.js"`, repoUrl);
+}
+/**
+ * Updates the plugin package dist file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ */
+async function updatePluginPackageDistFile(destPath, name, description, repoUrl) {
+    const camelizedName = (0, string_utils_1.camelize)((0, string_utils_1.camelize)(name, "-"), " "), dashedName = (0, string_utils_1.dash)(camelizedName);
+    (0, template_utils_1.updatePackageDistFile)(destPath, `"tsparticles-plugin-${dashedName}"`, description, `"tsparticles.plugin.${camelizedName}.min.js"`, repoUrl);
+}
+/**
+ * Updates the plugin readme file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ */
+async function updateReadmeFile(destPath, name, description, repoUrl) {
+    const readmePath = path_1.default.resolve(destPath, "README.md"), readme = await fs_extra_1.default.readFile(readmePath, "utf-8"), capitalizedName = (0, string_utils_1.capitalize)((0, string_utils_1.capitalize)(name, "-"), " "), camelizedName = (0, string_utils_1.camelize)(capitalizedName), dashedName = (0, string_utils_1.dash)(camelizedName), readmeDescriptionRegex = /tsParticles Template Plugin/g, replacedDescriptionText = readme.replace(readmeDescriptionRegex, `tsParticles ${description} Plugin`), readmePackageNameRegex = /tsparticles-plugin-template/g, replacedPackageNameText = replacedDescriptionText.replace(readmePackageNameRegex, `tsparticles-plugin-${dashedName}`), readmeFileNameRegex = /tsparticles\.plugin\.template(\.bundle)?\.min\.js/g, replacedFileNameText = replacedPackageNameText.replace(readmeFileNameRegex, `tsparticles.plugin.${camelizedName}$1.min.js`), readmeFunctionNameRegex = /loadTemplatePlugin/g, replacedFunctionNameText = replacedFileNameText.replace(readmeFunctionNameRegex, `load${capitalizedName}Plugin`), readmeMiniDescriptionRegex = /\[tsParticles]\(https:\/\/github.com\/matteobruni\/tsparticles\) additional template plugin\./g, replacedMiniDescriptionText = replacedFunctionNameText.replace(readmeMiniDescriptionRegex, `[tsParticles](https://github.com/matteobruni/tsparticles) additional ${name} plugin.`), readmeUsageRegex = /plugin\.type: "template"/g, replacedUsageText = replacedMiniDescriptionText.replace(readmeUsageRegex, `plugin.type: "${camelizedName}`), sampleImageRegex = /!\[demo]\(https:\/\/raw.githubusercontent.com\/tsparticles\/plugin-template\/main\/images\/sample.png\)/g, repoPath = repoUrl.includes("github.com")
+        ? repoUrl.substring(repoUrl.indexOf("github.com/") + 11, repoUrl.indexOf(".git"))
+        : "tsparticles/plugin-template", replacedText = replacedUsageText.replace(sampleImageRegex, `![demo](https://raw.githubusercontent.com/${repoPath}/main/images/sample.png)`);
+    await fs_extra_1.default.writeFile(readmePath, replacedText);
+}
+/**
+ * Updates the plugin webpack file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ */
+async function updatePluginWebpackFile(destPath, name, description) {
+    await (0, template_utils_1.updateWebpackFile)(destPath, (0, string_utils_1.camelize)((0, string_utils_1.capitalize)((0, string_utils_1.capitalize)(name, "-"), " ")), `tsParticles ${description} Plugin`, "loadParticlesPlugin");
+}
+/**
+ * Creates the plugin project
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ * @param destPath - The path where the project is located
+ */
+async function createPluginTemplate(name, description, repoUrl, destPath) {
+    const sourcePath = path_1.default.resolve(__dirname, "..", "..", "..", "files", "create-plugin");
+    await (0, template_utils_1.copyEmptyTemplateFiles)(destPath);
+    await fs_extra_1.default.copy(sourcePath, destPath, {
+        overwrite: true,
+        filter: template_utils_1.copyFilter,
+    });
+    await updateIndexFile(destPath, name);
+    await updatePluginPackageFile(destPath, name, description, repoUrl);
+    await updatePluginPackageDistFile(destPath, name, description, repoUrl);
+    await updateReadmeFile(destPath, name, description, repoUrl);
+    await updatePluginWebpackFile(destPath, name, description);
+    (0, template_utils_1.runInstall)(destPath);
+    (0, template_utils_1.runBuild)(destPath);
+}
+exports.createPluginTemplate = createPluginTemplate;

package/dist/create/plugin/plugin.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginCommand = void 0;
+const prompts_1 = __importDefault(require("prompts"));
+const commander_1 = require("commander");
+const string_utils_1 = require("../../utils/string-utils");
+const create_plugin_1 = require("./create-plugin");
+const child_process_1 = require("child_process");
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const pluginCommand = new commander_1.Command("plugin");
+exports.pluginCommand = pluginCommand;
+pluginCommand.description("Create a new tsParticles plugin");
+pluginCommand.argument("<destination>", "Destination folder");
+pluginCommand.action(async (destination) => {
+    let repoUrl;
+    const destPath = path_1.default.resolve(path_1.default.join(process.cwd(), destination)), destExists = await fs_extra_1.default.pathExists(destPath);
+    if (destExists) {
+        const destContents = await fs_extra_1.default.readdir(destPath), destContentsNoGit = destContents.filter(t => t !== ".git" && t !== ".gitignore");
+        if (destContentsNoGit.length) {
+            throw new Error("Destination folder already exists and is not empty");
+        }
+    }
+    await fs_extra_1.default.ensureDir(destPath);
+    try {
+        repoUrl = (0, child_process_1.execSync)("git config --get remote.origin.url").toString();
+    }
+    catch {
+        repoUrl = "";
+    }
+    const initialName = destPath.split(path_1.default.sep).pop(), questions = [
+        {
+            type: "text",
+            name: "name",
+            message: "What is the name of the plugin?",
+            validate: (value) => (value ? true : "The name can't be empty"),
+            initial: initialName,
+        },
+        {
+            type: "text",
+            name: "description",
+            message: "What is the description of the plugin?",
+            validate: (value) => (value ? true : "The description can't be empty"),
+            initial: (0, string_utils_1.capitalize)(initialName || ""),
+        },
+        {
+            type: "text",
+            name: "repositoryUrl",
+            message: "What is the repository URL? (optional)",
+            initial: repoUrl.trim(),
+        },
+    ];
+    const { name, description, repositoryUrl } = await (0, prompts_1.default)(questions);
+    (0, create_plugin_1.createPluginTemplate)(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
+});

package/dist/create/shape/create-shape.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createShapeTemplate = void 0;
+const string_utils_1 = require("../../utils/string-utils");
+const template_utils_1 = require("../../utils/template-utils");
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+/**
+ * Updates the index file with the correct function name
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ */
+async function updateIndexFile(destPath, name) {
+    const indexPath = path_1.default.resolve(destPath, "src", "index.ts"), index = await fs_extra_1.default.readFile(indexPath, "utf-8"), capitalizedName = (0, string_utils_1.capitalize)((0, string_utils_1.capitalize)(name, "-"), " "), camelizedName = (0, string_utils_1.camelize)(capitalizedName), indexFunctionRegex = /loadTemplateShape/g, replacedFuncText = index.replace(indexFunctionRegex, `load${capitalizedName}Shape`), indexNameRegex = /"#template#"/g, replacedNameText = replacedFuncText.replace(indexNameRegex, `"${camelizedName}"`);
+    await fs_extra_1.default.writeFile(indexPath, replacedNameText);
+}
+/**
+ * Updates the shape package file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ */
+async function updateShapePackageFile(destPath, name, description, repoUrl) {
+    const camelizedName = (0, string_utils_1.camelize)((0, string_utils_1.camelize)(name, "-"), " "), dashedName = (0, string_utils_1.dash)(camelizedName);
+    (0, template_utils_1.updatePackageFile)(destPath, `"tsparticles-shape-${dashedName}"`, description, `"tsparticles.shape.${camelizedName}.min.js"`, repoUrl);
+}
+/**
+ * Updates the shape package dist file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ */
+async function updateShapePackageDistFile(destPath, name, description, repoUrl) {
+    const camelizedName = (0, string_utils_1.camelize)((0, string_utils_1.camelize)(name, "-"), " "), dashedName = (0, string_utils_1.dash)(camelizedName);
+    (0, template_utils_1.updatePackageDistFile)(destPath, `"tsparticles-shape-${dashedName}"`, description, `"tsparticles.shape.${camelizedName}.min.js"`, repoUrl);
+}
+/**
+ * Updates the shape readme file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ */
+async function updateReadmeFile(destPath, name, description, repoUrl) {
+    const readmePath = path_1.default.resolve(destPath, "README.md"), readme = await fs_extra_1.default.readFile(readmePath, "utf-8"), capitalizedName = (0, string_utils_1.capitalize)((0, string_utils_1.capitalize)(name, "-"), " "), camelizedName = (0, string_utils_1.camelize)(capitalizedName), dashedName = (0, string_utils_1.dash)(camelizedName), readmeDescriptionRegex = /tsParticles Template Shape/g, replacedDescriptionText = readme.replace(readmeDescriptionRegex, `tsParticles ${description} Shape`), readmePackageNameRegex = /tsparticles-shape-template/g, replacedPackageNameText = replacedDescriptionText.replace(readmePackageNameRegex, `tsparticles-shape-${dashedName}`), readmeFileNameRegex = /tsparticles\.shape\.template(\.bundle)?\.min\.js/g, replacedFileNameText = replacedPackageNameText.replace(readmeFileNameRegex, `tsparticles.shape.${camelizedName}$1.min.js`), readmeFunctionNameRegex = /loadTemplateShape/g, replacedFunctionNameText = replacedFileNameText.replace(readmeFunctionNameRegex, `load${capitalizedName}Shape`), readmeMiniDescriptionRegex = /\[tsParticles]\(https:\/\/github.com\/matteobruni\/tsparticles\) additional template shape\./g, replacedMiniDescriptionText = replacedFunctionNameText.replace(readmeMiniDescriptionRegex, `[tsParticles](https://github.com/matteobruni/tsparticles) additional ${name} shape.`), readmeUsageRegex = /shape\.type: "template"/g, replacedUsageText = replacedMiniDescriptionText.replace(readmeUsageRegex, `shape.type: "${camelizedName}`), sampleImageRegex = /!\[demo]\(https:\/\/raw.githubusercontent.com\/tsparticles\/shape-template\/main\/images\/sample.png\)/g, repoPath = repoUrl.includes("github.com")
+        ? repoUrl.substring(repoUrl.indexOf("github.com/") + 11, repoUrl.indexOf(".git"))
+        : "tsparticles/shape-template", replacedText = replacedUsageText.replace(sampleImageRegex, `![demo](https://raw.githubusercontent.com/${repoPath}/main/images/sample.png)`);
+    await fs_extra_1.default.writeFile(readmePath, replacedText);
+}
+/**
+ * Updates the shape webpack file
+ * @param destPath - The path where the project is located
+ * @param name - The name of the project
+ * @param description - The description of the project
+ */
+async function updateShapeWebpackFile(destPath, name, description) {
+    await (0, template_utils_1.updateWebpackFile)(destPath, (0, string_utils_1.camelize)((0, string_utils_1.capitalize)((0, string_utils_1.capitalize)(name, "-"), " ")), `tsParticles ${description} Shape`, "loadParticlesShape");
+}
+/**
+ * Creates the shape project
+ * @param name - The name of the project
+ * @param description - The description of the project
+ * @param repoUrl - The repository url
+ * @param destPath - The path where the project is located
+ */
+async function createShapeTemplate(name, description, repoUrl, destPath) {
+    const sourcePath = path_1.default.resolve(__dirname, "..", "..", "..", "files", "create-shape");
+    await (0, template_utils_1.copyEmptyTemplateFiles)(destPath);
+    await fs_extra_1.default.copy(sourcePath, destPath, {
+        overwrite: true,
+        filter: template_utils_1.copyFilter,
+    });
+    await updateIndexFile(destPath, name);
+    await updateShapePackageFile(destPath, name, description, repoUrl);
+    await updateShapePackageDistFile(destPath, name, description, repoUrl);
+    await updateReadmeFile(destPath, name, description, repoUrl);
+    await updateShapeWebpackFile(destPath, name, description);
+    (0, template_utils_1.runInstall)(destPath);
+    (0, template_utils_1.runBuild)(destPath);
+}
+exports.createShapeTemplate = createShapeTemplate;

package/dist/create/shape/shape.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shapeCommand = void 0;
+const prompts_1 = __importDefault(require("prompts"));
+const commander_1 = require("commander");
+const string_utils_1 = require("../../utils/string-utils");
+const create_shape_1 = require("./create-shape");
+const child_process_1 = require("child_process");
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const shapeCommand = new commander_1.Command("shape");
+exports.shapeCommand = shapeCommand;
+shapeCommand.description("Create a new tsParticles shape");
+shapeCommand.argument("<destination>", "Destination folder");
+shapeCommand.action(async (destination) => {
+    let repoUrl;
+    const destPath = path_1.default.resolve(path_1.default.join(process.cwd(), destination)), destExists = await fs_extra_1.default.pathExists(destPath);
+    if (destExists) {
+        const destContents = await fs_extra_1.default.readdir(destPath), destContentsNoGit = destContents.filter(t => t !== ".git" && t !== ".gitignore");
+        if (destContentsNoGit.length) {
+            throw new Error("Destination folder already exists and is not empty");
+        }
+    }
+    await fs_extra_1.default.ensureDir(destPath);
+    try {
+        repoUrl = (0, child_process_1.execSync)("git config --get remote.origin.url").toString();
+    }
+    catch {
+        repoUrl = "";
+    }
+    const initialName = destPath.split(path_1.default.sep).pop(), questions = [
+        {
+            type: "text",
+            name: "name",
+            message: "What is the name of the shape?",
+            validate: (value) => (value ? true : "The name can't be empty"),
+            initial: initialName,
+        },
+        {
+            type: "text",
+            name: "description",
+            message: "What is the description of the shape?",
+            validate: (value) => (value ? true : "The description can't be empty"),
+            initial: (0, string_utils_1.capitalize)(initialName || ""),
+        },
+        {
+            type: "text",
+            name: "repositoryUrl",
+            message: "What is the repository URL? (optional)",
+            initial: repoUrl.trim(),
+        },
+    ];
+    const { name, description, repositoryUrl } = await (0, prompts_1.default)(questions);
+    (0, create_shape_1.createShapeTemplate)(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
+});

package/dist/utils/template-utils.js

@@ -63,10 +63,7 @@ exports.copyEmptyTemplateFiles = copyEmptyTemplateFiles;
  * @returns true if the file should be copied
  */
 function copyFilter(src) {
-    if (src.endsWith("node_modules") || src.endsWith("dist")) {
-        return false;
-    }
-    return true;
+    return !(src.endsWith("node_modules") || src.endsWith("dist"));
 }
 exports.copyFilter = copyFilter;
 /**

package/files/create-plugin/README.md

@@ -0,0 +1,74 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Template Plugin
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-template/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-template)
+[![npmjs](https://badge.fury.io/js/tsparticles-plugin-template.svg)](https://www.npmjs.com/package/tsparticles-plugin-template)
+[![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-template)](https://www.npmjs.com/package/tsparticles-plugin-template) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles template.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.plugin.template.min.js` file will export the function to load the plugin:
+
+```javascript
+loadTemplatePlugin;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the plugin like this:
+
+```javascript
+(async () => {
+  await loadTemplatePlugin(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install tsparticles-plugin-template
+```
+
+or
+
+```shell
+$ yarn add tsparticles-plugin-template
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("tsparticles-engine");
+const { loadTemplatePlugin } = require("tsparticles-plugin-template");
+
+(async () => {
+  await loadTemplatePlugin(tsParticles);
+})();
+```
+
+or
+
+```javascript
+import { tsParticles } from "tsparticles-engine";
+import { loadTemplatePlugin } from "tsparticles-plugin-template";
+
+(async () => {
+  await loadTemplatePlugin(tsParticles);
+})();
+```

package/files/create-plugin/src/PluginInstance.ts

@@ -0,0 +1,15 @@
+import { type Container, type Engine, type IContainerPlugin } from "tsparticles-engine";
+
+export class PluginInstance implements IContainerPlugin {
+    private readonly _container;
+    private readonly _engine;
+
+    constructor(container: Container, engine: Engine) {
+        this._container = container;
+        this._engine = engine;
+    }
+
+    async init(): Promise<void> {
+        // add your plugin initialization here
+    }
+}

package/files/create-plugin/src/index.ts

@@ -0,0 +1,39 @@
+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()) {
+            return;
+        }
+
+        // Load your options here
+    }
+
+    needsPlugin(_options?: ISourceOptions): boolean {
+        return true; // add your condition here
+    }
+}
+
+/**
+ * @param engine - The engine instance
+ */
+export async function loadTemplatePlugin(engine: Engine): Promise<void> {
+    await engine.addPlugin(new Plugin(engine));
+}

package/files/create-preset/README.md

@@ -40,9 +40,11 @@ A bundled script can also be used, this will include every needed plugin needed
 Once the scripts are loaded you can set up `tsParticles` like this:
 
 ```javascript
-tsParticles.load("tsparticles", {
-  preset: "template",
-});
+(async () => {
+    await tsParticles.load("tsparticles", {
+        preset: "template",
+    });
+})();
 ```
 
 #### Customization
@@ -51,14 +53,16 @@ tsParticles.load("tsparticles", {
 You can override all the options defining the properties like in any standard `tsParticles` installation.
 
 ```javascript
-tsParticles.load("tsparticles", {
-  particles: {
-    shape: {
-      type: "square",
-    },
-  },
-  preset: "template",
-});
+(async () => {
+    await tsParticles.load("tsparticles", {
+        particles: {
+            shape: {
+                type: "square"
+            }
+        },
+        preset: "template"
+    });
+})();
 ```
 
 Like in the sample above, the circles will be replaced by squares.
@@ -71,19 +75,19 @@ This sample uses the class component syntax, but you can use hooks as well (if t
 
 ```javascript
 import Particles from "react-particles";
-import { Main } from "tsparticles";
+import { Engine } from "tsparticles-engine";
 import { loadTemplatePreset } from "tsparticles-preset-template";
 
 export class ParticlesContainer extends React.PureComponent<IProps> {
   // this customizes the component tsParticles installation
-  customInit(main: Main) {
+  async customInit(engine: Engine) {
     // this adds the preset to tsParticles, you can safely use the
-    loadTemplatePreset(main);
+    await loadTemplatePreset(engine);
   }
 
   render() {
     const options = {
-      preset: "template", // also "template" is accepted
+      preset: "template",
     };
 
     return <Particles options={options} init={this.customInit} />;
@@ -100,25 +104,25 @@ _The syntax for `Vue.js 2.x` and `3.x` is the same_
 ```
 
 ```js
-function particlesInit(main: Main) {
-  loadTemplatePreset(main);
+async function particlesInit(engine: Engine) {
+    await loadTemplatePreset(main);
 }
 ```
 
 ### Angular
 
 ```html
+
 <ng-particles
-  [id]="id"
-  [options]="particlesOptions"
-  (particlesLoaded)="particlesLoaded($event)"
-  (particlesInit)="particlesInit($event)"
+    [id]="id"
+    [options]="particlesOptions"
+    [particlesInit]="particlesInit"
 ></ng-particles>
 ```
 
 ```ts
-function particlesInit(main: Main): void {
-  loadTemplatePreset(main);
+async function particlesInit(engine: Engine): Promise<void> {
+    loadTemplatePreset(engine);
 }
 ```
 
@@ -129,12 +133,12 @@ function particlesInit(main: Main): void {
 <Particles
         id="tsparticles"
         url="{particlesUrl}"
-        on:particlesInit="{onParticlesInit}"
+        particlesInit="{particlesInit}"
 />
 ```
 
 ```js
-let onParticlesInit = (main) => {
-  loadTemplatePreset(main);
+let particlesInit = async (engine) => {
+    await loadTemplatePreset(engine);
 };
 ```