@tsparticles/cli 1.6.4 → 1.7.0

package/dist/build/build-distfiles.js

@@ -76,14 +76,16 @@ async function buildDistFiles(basePath) {
             const contents = await fs_extra_1.default.readFile(file.path, "utf8");
             await fs_extra_1.default.writeFile(file.path, contents.replaceAll("__VERSION__", `"${pkgInfo.version}"`), "utf8");
         }
-        for await (const file of (0, klaw_1.default)(path_1.default.join(distPath, "cjs"))) {
-            await fs_extra_1.default.rename(file.path, file.path.replace(/\.js$/, ".cjs"));
+        /*for await (const file of klaw(path.join(distPath, "cjs"))) {
+            await fs.rename(file.path, file.path.replace(/\.js$/, ".cjs"));
         }
-        for await (const file of (0, klaw_1.default)(path_1.default.join(distPath, "esm"))) {
-            await fs_extra_1.default.rename(file.path, file.path.replace(/\.js$/, ".mjs"));
+
+        for await (const file of klaw(path.join(distPath, "esm"))) {
+            await fs.rename(file.path, file.path.replace(/\.js$/, ".mjs"));
         }
-        await fs_extra_1.default.writeFile(path_1.default.join(distPath, "cjs", "package.json"), `{ "type": "commonjs" }`);
-        await fs_extra_1.default.writeFile(path_1.default.join(distPath, "esm", "package.json"), `{ "type": "module" }`);
+
+        await fs.writeFile(path.join(distPath, "cjs", "package.json"), `{ "type": "commonjs" }`);
+        await fs.writeFile(path.join(distPath, "esm", "package.json"), `{ "type": "module" }`);*/
         res = true;
     }
     catch (e) {

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/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);
 };
 ```

package/files/create-shape/README.md

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

package/files/create-shape/src/ShapeDrawer.ts

@@ -0,0 +1,19 @@
+import type { IDelta, IShapeDrawer, Particle } from "tsparticles-engine";
+
+export class ShapeDrawer implements IShapeDrawer {
+    draw(_context: CanvasRenderingContext2D,
+         _particle: Particle,
+         _radius: number,
+         _opacity: number,
+         _delta: IDelta,
+         _pixelRatio: number): void {
+        // draw the particle using the context
+        // which is already centered in the particle position
+        // colors are already handles, 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
+        // 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
+    }
+}

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

@@ -0,0 +1,9 @@
+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> {
+    await engine.addShape("#template#", new ShapeDrawer());
+}

package/files/empty-project/package.json

@@ -83,7 +83,7 @@
   "prettier": "@tsparticles/prettier-config",
   "devDependencies": {
     "@babel/core": "^7.22.5",
-    "@tsparticles/cli": "1.6.4",
+    "@tsparticles/cli": "1.7.0",
     "@tsparticles/eslint-config": "^1.13.0",
     "@tsparticles/prettier-config": "^1.10.0",
     "@tsparticles/tsconfig": "^1.13.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/cli",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "license": "MIT",
   "bin": {
     "tsparticles-cli": "dist/cli.js"
@@ -10,31 +10,31 @@
   },
   "prettier": "@tsparticles/prettier-config",
   "dependencies": {
-    "@tsparticles/eslint-config": "^1.13.3",
+    "@tsparticles/eslint-config": "^1.14.0",
     "@tsparticles/prettier-config": "^1.10.0",
-    "@tsparticles/tsconfig": "^1.13.0",
-    "@tsparticles/webpack-plugin": "^1.15.5",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@tsparticles/tsconfig": "^1.14.0",
+    "@tsparticles/webpack-plugin": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "commander": "^11.0.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jsdoc": "^46.2.6",
+    "eslint-plugin-jsdoc": "^46.4.2",
     "eslint-plugin-tsdoc": "^0.2.17",
     "fs-extra": "^11.1.1",
     "klaw": "^4.1.0",
-    "path-scurry": "^1.9.2",
+    "path-scurry": "^1.10.0",
     "prettier": "^2.8.8",
     "prompts": "^2.4.2",
     "rimraf": "^5.0.1",
-    "typescript": "^5.1.3",
-    "webpack": "^5.87.0"
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.1"
   },
   "devDependencies": {
     "@types/eslint": "^8.40.2",
     "@types/fs-extra": "^11.0.1",
     "@types/klaw": "^3.0.3",
-    "@types/node": "^20.3.1",
+    "@types/node": "^20.3.2",
     "@types/prettier": "^2.7.3",
     "@types/prompts": "^2.4.4"
   },

package/src/build/build-distfiles.ts

@@ -71,7 +71,7 @@ export async function buildDistFiles(basePath: string): Promise<boolean> {
             await fs.writeFile(file.path, contents.replaceAll("__VERSION__", `"${pkgInfo.version}"`), "utf8");
         }
 
-        for await (const file of klaw(path.join(distPath, "cjs"))) {
+        /*for await (const file of klaw(path.join(distPath, "cjs"))) {
             await fs.rename(file.path, file.path.replace(/\.js$/, ".cjs"));
         }
 
@@ -80,7 +80,7 @@ export async function buildDistFiles(basePath: string): Promise<boolean> {
         }
 
         await fs.writeFile(path.join(distPath, "cjs", "package.json"), `{ "type": "commonjs" }`);
-        await fs.writeFile(path.join(distPath, "esm", "package.json"), `{ "type": "module" }`);
+        await fs.writeFile(path.join(distPath, "esm", "package.json"), `{ "type": "module" }`);*/
 
         res = true;
     } catch (e) {

package/src/create/create.ts

@@ -1,9 +1,14 @@
 import { Command } from "commander";
+import { pluginCommand } from "./plugin/plugin";
 import { presetCommand } from "./preset/preset";
+import { shapeCommand } from "./shape/shape";
 
 const createCommand = new Command("create");
 
 createCommand.description("Create a new tsParticles project");
+
+createCommand.addCommand(pluginCommand);
 createCommand.addCommand(presetCommand);
+createCommand.addCommand(shapeCommand);
 
 export { createCommand };

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

@@ -0,0 +1,178 @@
+import { camelize, capitalize, dash } from "../../utils/string-utils";
+import {
+    copyEmptyTemplateFiles,
+    copyFilter,
+    runBuild,
+    runInstall,
+    updatePackageDistFile,
+    updatePackageFile,
+    updateWebpackFile,
+} from "../../utils/template-utils";
+import fs from "fs-extra";
+import path from "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: string, name: string): Promise<void> {
+    const indexPath = path.resolve(destPath, "src", "index.ts"),
+        index = await fs.readFile(indexPath, "utf-8"),
+        capitalizedName = capitalize(capitalize(name, "-"), " "),
+        camelizedName = camelize(capitalizedName),
+        indexFunctionRegex = /loadTemplatePlugin/g,
+        replacedFuncText = index.replace(indexFunctionRegex, `load${capitalizedName}Plugin`),
+        indexNameRegex = /"#template#"/g,
+        replacedNameText = replacedFuncText.replace(indexNameRegex, `"${camelizedName}"`);
+
+    await fs.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: string,
+    name: string,
+    description: string,
+    repoUrl: string
+): Promise<void> {
+    const camelizedName = camelize(camelize(name, "-"), " "),
+        dashedName = dash(camelizedName);
+
+    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: string,
+    name: string,
+    description: string,
+    repoUrl: string
+): Promise<void> {
+    const camelizedName = camelize(camelize(name, "-"), " "),
+        dashedName = dash(camelizedName);
+
+    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: string, name: string, description: string, repoUrl: string): Promise<void> {
+    const readmePath = path.resolve(destPath, "README.md"),
+        readme = await fs.readFile(readmePath, "utf-8"),
+        capitalizedName = capitalize(capitalize(name, "-"), " "),
+        camelizedName = camelize(capitalizedName),
+        dashedName = 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.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: string, name: string, description: string): Promise<void> {
+    await updateWebpackFile(
+        destPath,
+        camelize(capitalize(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
+ */
+export async function createPluginTemplate(
+    name: string,
+    description: string,
+    repoUrl: string,
+    destPath: string
+): Promise<void> {
+    const sourcePath = path.resolve(__dirname, "..", "..", "..", "files", "create-plugin");
+
+    await copyEmptyTemplateFiles(destPath);
+
+    await fs.copy(sourcePath, destPath, {
+        overwrite: true,
+        filter: 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);
+
+    runInstall(destPath);
+    runBuild(destPath);
+}

package/src/create/plugin/plugin.ts

@@ -0,0 +1,65 @@
+import prompts, { type PromptObject } from "prompts";
+import { Command } from "commander";
+import { capitalize } from "../../utils/string-utils";
+import { createPluginTemplate } from "./create-plugin";
+import { execSync } from "child_process";
+import fs from "fs-extra";
+import path from "path";
+
+const pluginCommand = new Command("plugin");
+
+pluginCommand.description("Create a new tsParticles plugin");
+pluginCommand.argument("<destination>", "Destination folder");
+pluginCommand.action(async (destination: string) => {
+    let repoUrl: string;
+
+    const destPath = path.resolve(path.join(process.cwd(), destination)),
+        destExists = await fs.pathExists(destPath);
+
+    if (destExists) {
+        const destContents = await fs.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.ensureDir(destPath);
+
+    try {
+        repoUrl = execSync("git config --get remote.origin.url").toString();
+    } catch {
+        repoUrl = "";
+    }
+
+    const initialName = destPath.split(path.sep).pop(),
+        questions: PromptObject[] = [
+            {
+                type: "text",
+                name: "name",
+                message: "What is the name of the plugin?",
+                validate: (value: string) => (value ? true : "The name can't be empty"),
+                initial: initialName,
+            },
+            {
+                type: "text",
+                name: "description",
+                message: "What is the description of the plugin?",
+                validate: (value: string) => (value ? true : "The description can't be empty"),
+                initial: capitalize(initialName || ""),
+            },
+            {
+                type: "text",
+                name: "repositoryUrl",
+                message: "What is the repository URL? (optional)",
+                initial: repoUrl.trim(),
+            },
+        ];
+
+    const { name, description, repositoryUrl } = await prompts(questions);
+
+    createPluginTemplate(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
+});
+
+export { pluginCommand };

package/src/create/shape/create-shape.ts

@@ -0,0 +1,175 @@
+import { camelize, capitalize, dash } from "../../utils/string-utils";
+import {
+    copyEmptyTemplateFiles,
+    copyFilter,
+    runBuild,
+    runInstall,
+    updatePackageDistFile,
+    updatePackageFile,
+    updateWebpackFile,
+} from "../../utils/template-utils";
+import fs from "fs-extra";
+import path from "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: string, name: string): Promise<void> {
+    const indexPath = path.resolve(destPath, "src", "index.ts"),
+        index = await fs.readFile(indexPath, "utf-8"),
+        capitalizedName = capitalize(capitalize(name, "-"), " "),
+        camelizedName = camelize(capitalizedName),
+        indexFunctionRegex = /loadTemplateShape/g,
+        replacedFuncText = index.replace(indexFunctionRegex, `load${capitalizedName}Shape`),
+        indexNameRegex = /"#template#"/g,
+        replacedNameText = replacedFuncText.replace(indexNameRegex, `"${camelizedName}"`);
+
+    await fs.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: string,
+    name: string,
+    description: string,
+    repoUrl: string
+): Promise<void> {
+    const camelizedName = camelize(camelize(name, "-"), " "),
+        dashedName = dash(camelizedName);
+
+    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: string,
+    name: string,
+    description: string,
+    repoUrl: string
+): Promise<void> {
+    const camelizedName = camelize(camelize(name, "-"), " "),
+        dashedName = dash(camelizedName);
+
+    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: string, name: string, description: string, repoUrl: string): Promise<void> {
+    const readmePath = path.resolve(destPath, "README.md"),
+        readme = await fs.readFile(readmePath, "utf-8"),
+        capitalizedName = capitalize(capitalize(name, "-"), " "),
+        camelizedName = camelize(capitalizedName),
+        dashedName = 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.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: string, name: string, description: string): Promise<void> {
+    await updateWebpackFile(
+        destPath,
+        camelize(capitalize(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
+ */
+export async function createShapeTemplate(
+    name: string,
+    description: string,
+    repoUrl: string,
+    destPath: string
+): Promise<void> {
+    const sourcePath = path.resolve(__dirname, "..", "..", "..", "files", "create-shape");
+
+    await copyEmptyTemplateFiles(destPath);
+
+    await fs.copy(sourcePath, destPath, {
+        overwrite: true,
+        filter: 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);
+
+    runInstall(destPath);
+    runBuild(destPath);
+}

package/src/create/shape/shape.ts

@@ -0,0 +1,65 @@
+import prompts, { type PromptObject } from "prompts";
+import { Command } from "commander";
+import { capitalize } from "../../utils/string-utils";
+import { createShapeTemplate } from "./create-shape";
+import { execSync } from "child_process";
+import fs from "fs-extra";
+import path from "path";
+
+const shapeCommand = new Command("shape");
+
+shapeCommand.description("Create a new tsParticles shape");
+shapeCommand.argument("<destination>", "Destination folder");
+shapeCommand.action(async (destination: string) => {
+    let repoUrl: string;
+
+    const destPath = path.resolve(path.join(process.cwd(), destination)),
+        destExists = await fs.pathExists(destPath);
+
+    if (destExists) {
+        const destContents = await fs.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.ensureDir(destPath);
+
+    try {
+        repoUrl = execSync("git config --get remote.origin.url").toString();
+    } catch {
+        repoUrl = "";
+    }
+
+    const initialName = destPath.split(path.sep).pop(),
+        questions: PromptObject[] = [
+            {
+                type: "text",
+                name: "name",
+                message: "What is the name of the shape?",
+                validate: (value: string) => (value ? true : "The name can't be empty"),
+                initial: initialName,
+            },
+            {
+                type: "text",
+                name: "description",
+                message: "What is the description of the shape?",
+                validate: (value: string) => (value ? true : "The description can't be empty"),
+                initial: capitalize(initialName || ""),
+            },
+            {
+                type: "text",
+                name: "repositoryUrl",
+                message: "What is the repository URL? (optional)",
+                initial: repoUrl.trim(),
+            },
+        ];
+
+    const { name, description, repositoryUrl } = await prompts(questions);
+
+    createShapeTemplate(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
+});
+
+export { shapeCommand };