@tsparticles/cli 1.11.0 → 1.13.0

package/src/create/preset/create-preset.ts

@@ -10,6 +10,7 @@ import {
 } from "../../utils/template-utils";
 import fs from "fs-extra";
 import path from "path";
+import { replaceTokensInFile } from "../../utils/file-utils";
 
 /**
  * Updates the bundle file with the correct function name
@@ -17,13 +18,17 @@ import path from "path";
  * @param name - The name of the project
  */
 async function updateBundleFile(destPath: string, name: string): Promise<void> {
-    const bundlePath = path.resolve(destPath, "src", "bundle.ts"),
-        bundle = await fs.readFile(bundlePath, "utf-8"),
-        capitalizedName = capitalize(capitalize(name, "-"), " "),
-        bundleRegex = /loadTemplatePreset/g,
-        replacedText = bundle.replace(bundleRegex, `load${capitalizedName}Preset`);
-
-    await fs.writeFile(bundlePath, replacedText);
+    const capitalizedName = capitalize(name, "-", " ");
+
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "src", "bundle.ts"),
+        tokens: [
+            {
+                from: /loadTemplatePreset/g,
+                to: `load${capitalizedName}Preset`,
+            },
+        ],
+    });
 }
 
 /**
@@ -32,16 +37,22 @@ async function updateBundleFile(destPath: string, name: string): Promise<void> {
  * @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 = /loadTemplatePreset/g,
-        replacedFuncText = index.replace(indexFunctionRegex, `load${capitalizedName}Preset`),
-        indexNameRegex = /"#template#"/g,
-        replacedNameText = replacedFuncText.replace(indexNameRegex, `"${camelizedName}"`);
-
-    await fs.writeFile(indexPath, replacedNameText);
+    const capitalizedName = capitalize(name, "-", " "),
+        camelizedName = camelize(capitalizedName);
+
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "src", "index.ts"),
+        tokens: [
+            {
+                from: /loadTemplatePreset/g,
+                to: `load${capitalizedName}Preset`,
+            },
+            {
+                from: /"#template#"/g,
+                to: `"${camelizedName}"`,
+            },
+        ],
+    });
 }
 
 /**
@@ -57,14 +68,14 @@ async function updatePresetPackageFile(
     description: string,
     repoUrl: string,
 ): Promise<void> {
-    const camelizedName = camelize(camelize(name, "-"), " "),
+    const camelizedName = camelize(name, "-", " "),
         dashedName = dash(camelizedName);
 
-    updatePackageFile(
+    await updatePackageFile(
         destPath,
-        `"tsparticles-preset-${dashedName}"`,
+        `tsparticles-preset-${dashedName}`,
         description,
-        `"tsparticles.preset.${camelizedName}.min.js"`,
+        `tsparticles.preset.${camelizedName}.min.js`,
         repoUrl,
     );
 }
@@ -82,14 +93,14 @@ async function updatePresetPackageDistFile(
     description: string,
     repoUrl: string,
 ): Promise<void> {
-    const camelizedName = camelize(camelize(name, "-"), " "),
+    const camelizedName = camelize(name, "-", " "),
         dashedName = dash(camelizedName);
 
-    updatePackageDistFile(
+    await updatePackageDistFile(
         destPath,
-        `"tsparticles-preset-${dashedName}"`,
+        `tsparticles-preset-${dashedName}`,
         description,
-        `"tsparticles.preset.${camelizedName}.min.js"`,
+        `tsparticles.preset.${camelizedName}.min.js`,
         repoUrl,
     );
 }
@@ -102,47 +113,46 @@ async function updatePresetPackageDistFile(
  * @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, "-"), " "),
+    const capitalizedName = capitalize(name, "-", " "),
         camelizedName = camelize(capitalizedName),
         dashedName = dash(camelizedName),
-        readmeDescriptionRegex = /tsParticles Template Preset/g,
-        replacedDescriptionText = readme.replace(readmeDescriptionRegex, `tsParticles ${description} Preset`),
-        readmePackageNameRegex = /tsparticles-preset-template/g,
-        replacedPackageNameText = replacedDescriptionText.replace(
-            readmePackageNameRegex,
-            `tsparticles-preset-${dashedName}`,
-        ),
-        readmeFileNameRegex = /tsparticles\.preset\.template(\.bundle)?\.min\.js/g,
-        replacedFileNameText = replacedPackageNameText.replace(
-            readmeFileNameRegex,
-            `tsparticles.preset.${camelizedName}$1.min.js`,
-        ),
-        readmeFunctionNameRegex = /loadTemplatePreset/g,
-        replacedFunctionNameText = replacedFileNameText.replace(
-            readmeFunctionNameRegex,
-            `load${capitalizedName}Preset`,
-        ),
-        readmeMiniDescriptionRegex =
-            /\[tsParticles]\(https:\/\/github.com\/matteobruni\/tsparticles\) preset template\./g,
-        replacedMiniDescriptionText = replacedFunctionNameText.replace(
-            readmeMiniDescriptionRegex,
-            `[tsParticles](https://github.com/matteobruni/tsparticles) preset ${name}.`,
-        ),
-        readmeUsageRegex = /preset: "template"/g,
-        replacedUsageText = replacedMiniDescriptionText.replace(readmeUsageRegex, `preset: "${camelizedName}`),
-        sampleImageRegex =
-            /!\[demo]\(https:\/\/raw.githubusercontent.com\/tsparticles\/preset-template\/main\/images\/sample.png\)/g,
         repoPath = repoUrl.includes("github.com")
             ? repoUrl.substring(repoUrl.indexOf("github.com/") + 11, repoUrl.indexOf(".git"))
-            : "tsparticles/preset-template",
-        replacedText = replacedUsageText.replace(
-            sampleImageRegex,
-            `![demo](https://raw.githubusercontent.com/${repoPath}/main/images/sample.png)`,
-        );
-
-    await fs.writeFile(readmePath, replacedText);
+            : "tsparticles/preset-template";
+
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "README.md"),
+        tokens: [
+            {
+                from: /tsParticles Template Preset/g,
+                to: `tsParticles ${description} Preset`,
+            },
+            {
+                from: /tsparticles-preset-template/g,
+                to: `tsparticles-preset-${dashedName}`,
+            },
+            {
+                from: /tsparticles\.preset\.template(\.bundle)?\.min\.js/g,
+                to: `tsparticles.preset.${camelizedName}$1.min.js`,
+            },
+            {
+                from: /loadTemplatePreset/g,
+                to: `load${capitalizedName}Preset`,
+            },
+            {
+                from: /\[tsParticles]\(https:\/\/github.com\/matteobruni\/tsparticles\) preset template\./g,
+                to: `[tsParticles](https://github.com/matteobruni/tsparticles) preset ${name}.`,
+            },
+            {
+                from: /preset: "template"/g,
+                to: `preset: "${camelizedName}`,
+            },
+            {
+                from: /!\[demo]\(https:\/\/raw.githubusercontent.com\/tsparticles\/preset-template\/main\/images\/sample.png\)/g,
+                to: `![demo](https://raw.githubusercontent.com/${repoPath}/main/images/sample.png)`,
+            },
+        ],
+    });
 }
 
 /**
@@ -152,12 +162,7 @@ async function updateReadmeFile(destPath: string, name: string, description: str
  * @param description - The description of the project
  */
 async function updatePresetWebpackFile(destPath: string, name: string, description: string): Promise<void> {
-    await updateWebpackFile(
-        destPath,
-        camelize(capitalize(capitalize(name, "-"), " ")),
-        `tsParticles ${description} Preset`,
-        "loadParticlesPreset",
-    );
+    await updateWebpackFile(destPath, camelize(capitalize(name, "-", " ")), description, "loadParticlesPreset");
 }
 
 /**

package/src/create/preset/preset.ts

@@ -1,9 +1,8 @@
+import { getDestinationDir, getRepositoryUrl } from "../../utils/file-utils";
 import prompts, { type PromptObject } from "prompts";
 import { Command } from "commander";
 import { capitalize } from "../../utils/string-utils";
 import { createPresetTemplate } from "./create-preset";
-import { execSync } from "child_process";
-import fs from "fs-extra";
 import path from "path";
 
 const presetCommand = new Command("preset");
@@ -11,27 +10,8 @@ const presetCommand = new Command("preset");
 presetCommand.description("Create a new tsParticles preset");
 presetCommand.argument("<destination>", "Destination folder");
 presetCommand.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 destPath = await getDestinationDir(destination),
+        repoUrl = getRepositoryUrl();
 
     const initialName = destPath.split(path.sep).pop(),
         questions: PromptObject[] = [
@@ -59,7 +39,7 @@ presetCommand.action(async (destination: string) => {
 
     const { name, description, repositoryUrl } = await prompts(questions);
 
-    createPresetTemplate(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
+    await createPresetTemplate(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
 });
 
 export { presetCommand };

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

@@ -10,6 +10,7 @@ import {
 } from "../../utils/template-utils";
 import fs from "fs-extra";
 import path from "path";
+import { replaceTokensInFile } from "../../utils/file-utils";
 
 /**
  * Updates the index file with the correct function name
@@ -17,16 +18,22 @@ import path from "path";
  * @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}"`);
+    const capitalizedName = capitalize(name, "-", " "),
+        camelizedName = camelize(capitalizedName);
 
-    await fs.writeFile(indexPath, replacedNameText);
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "src", "index.ts"),
+        tokens: [
+            {
+                from: /loadTemplateShape/g,
+                to: `load${capitalizedName}Shape`,
+            },
+            {
+                from: /"#template#"/g,
+                to: `"${camelizedName}"`,
+            },
+        ],
+    });
 }
 
 /**
@@ -45,11 +52,11 @@ async function updateShapePackageFile(
     const camelizedName = camelize(camelize(name, "-"), " "),
         dashedName = dash(camelizedName);
 
-    updatePackageFile(
+    await updatePackageFile(
         destPath,
-        `"tsparticles-shape-${dashedName}"`,
+        `tsparticles-shape-${dashedName}`,
         description,
-        `"tsparticles.shape.${camelizedName}.min.js"`,
+        `tsparticles.shape.${camelizedName}.min.js`,
         repoUrl,
     );
 }
@@ -70,11 +77,11 @@ async function updateShapePackageDistFile(
     const camelizedName = camelize(camelize(name, "-"), " "),
         dashedName = dash(camelizedName);
 
-    updatePackageDistFile(
+    await updatePackageDistFile(
         destPath,
-        `"tsparticles-shape-${dashedName}"`,
+        `tsparticles-shape-${dashedName}`,
         description,
-        `"tsparticles.shape.${camelizedName}.min.js"`,
+        `tsparticles.shape.${camelizedName}.min.js`,
         repoUrl,
     );
 }
@@ -87,44 +94,46 @@ async function updateShapePackageDistFile(
  * @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, "-"), " "),
+    const capitalizedName = 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)`,
-        );
+            : "tsparticles/shape-template";
 
-    await fs.writeFile(readmePath, replacedText);
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "README.md"),
+        tokens: [
+            {
+                from: /tsParticles Template Shape/g,
+                to: `tsParticles ${description} Shape`,
+            },
+            {
+                from: /tsparticles-shape-template/g,
+                to: `tsparticles-shape-${dashedName}`,
+            },
+            {
+                from: /tsparticles\.shape\.template(\.bundle)?\.min\.js/g,
+                to: `tsparticles.shape.${camelizedName}$1.min.js`,
+            },
+            {
+                from: /loadTemplateShape/g,
+                to: `load${capitalizedName}Shape`,
+            },
+            {
+                from: /\[tsParticles]\(https:\/\/github.com\/matteobruni\/tsparticles\) additional template shape\./g,
+                to: `[tsParticles](https://github.com/matteobruni/tsparticles) additional ${name} shape.`,
+            },
+            {
+                from: /shape\.type: "template"/g,
+                to: `shape.type: "${camelizedName}`,
+            },
+            {
+                from: /!\[demo]\(https:\/\/raw.githubusercontent.com\/tsparticles\/shape-template\/main\/images\/sample.png\)/g,
+                to: `![demo](https://raw.githubusercontent.com/${repoPath}/main/images/sample.png)`,
+            },
+        ],
+    });
 }
 
 /**
@@ -134,12 +143,7 @@ async function updateReadmeFile(destPath: string, name: string, description: str
  * @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",
-    );
+    await updateWebpackFile(destPath, camelize(capitalize(name, "-", " ")), description, "loadParticlesShape");
 }
 
 /**

package/src/create/shape/shape.ts

@@ -1,9 +1,8 @@
+import { getDestinationDir, getRepositoryUrl } from "../../utils/file-utils";
 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");
@@ -11,27 +10,8 @@ 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 destPath = await getDestinationDir(destination),
+        repoUrl = getRepositoryUrl();
 
     const initialName = destPath.split(path.sep).pop(),
         questions: PromptObject[] = [
@@ -59,7 +39,7 @@ shapeCommand.action(async (destination: string) => {
 
     const { name, description, repositoryUrl } = await prompts(questions);
 
-    createShapeTemplate(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
+    await createShapeTemplate(name.trim(), description.trim(), repositoryUrl.trim(), destPath);
 });
 
 export { shapeCommand };

package/src/utils/file-utils.ts

@@ -0,0 +1,75 @@
+import { execSync } from "child_process";
+import fs from "fs-extra";
+import path from "path";
+
+export type ReplaceTokensOptions = {
+    path: string;
+    tokens: ReplaceTokensData[];
+};
+
+export type ReplaceTokensData = {
+    from: string | RegExp;
+    to: string;
+};
+
+/**
+ *
+ * @param options -
+ */
+export async function replaceTokensInFiles(options: ReplaceTokensOptions[]): Promise<void> {
+    for (const item of options) {
+        const filePath = path.resolve(item.path);
+
+        let data = await fs.readFile(filePath, "utf-8");
+
+        for (const token of item.tokens) {
+            const regex = new RegExp(token.from, "g");
+
+            data = data.replace(regex, token.to);
+        }
+
+        await fs.writeFile(filePath, data);
+    }
+}
+
+/**
+ *
+ * @param options -
+ */
+export async function replaceTokensInFile(options: ReplaceTokensOptions): Promise<void> {
+    await replaceTokensInFiles([options]);
+}
+
+/**
+ *
+ * @param destination -
+ * @returns the destination directory path
+ */
+export async function getDestinationDir(destination: string): Promise<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);
+
+    return destPath;
+}
+
+/**
+ * @returns the repository URL
+ */
+export function getRepositoryUrl(): string {
+    try {
+        return execSync("git config --get remote.origin.url").toString();
+    } catch {
+        return "";
+    }
+}

package/src/utils/string-utils.ts

@@ -1,23 +1,30 @@
 /**
  * This function is used to capitalize a string.
  * @param str - the string to capitalize (e.g. "my-string" -\> "MyString")
- * @param split - the character used to split the string, if not provided the string will be considered a single word
+ * @param splits - the characters used to split the string, if not provided the string will be considered a single word
  * @returns the capitalized string
  */
-export function capitalize(str: string, split?: string): string {
-    const words = split ? str.split(split) : [str];
+export function capitalize(str: string, ...splits: string[]): string {
+    let res = str.replace(/./, c => c.toUpperCase());
 
-    return words.map(w => w.replace(/./, c => c.toUpperCase())).join("");
+    for (const split of splits) {
+        res = res
+            .split(split)
+            .map(w => w.replace(/./, c => c.toUpperCase()))
+            .join("");
+    }
+
+    return res;
 }
 
 /**
  * This function is used to camelcase a string.
  * @param str - the string to camelcase (e.g. "my-string" -\> "myString")
- * @param split - the character used to split the string, if not provided the string will be considered a single word
+ * @param splits - the characters used to split the string, if not provided the string will be considered a single word
  * @returns the camelized string
  */
-export function camelize(str: string, split?: string): string {
-    return capitalize(str, split).replace(/./, c => c.toLowerCase());
+export function camelize(str: string, ...splits: string[]): string {
+    return capitalize(str, ...splits).replace(/./, c => c.toLowerCase());
 }
 
 /**