@tsparticles/cli 1.12.0 → 1.13.0

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,
     );
 }
@@ -72,9 +79,9 @@ async function updateShapePackageDistFile(
 
     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, "-"), " ")),
-        description,
-        "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());
 }
 
 /**

package/src/utils/template-utils.ts

@@ -1,6 +1,7 @@
 import { execSync } from "child_process";
 import fs from "fs-extra";
 import path from "path";
+import { replaceTokensInFile } from "./file-utils";
 
 /**
  * Updates the package.json file
@@ -17,22 +18,35 @@ export async function updatePackageFile(
     fileName: string,
     repoUrl: string,
 ): Promise<void> {
-    const packagePath = path.resolve(destPath, "package.json"),
-        packageContents = await fs.readFile(packagePath, "utf-8"),
-        descriptionRegex = /"tsParticles empty template"/g,
-        replacedDescriptionText = packageContents.replace(descriptionRegex, `"${description}"`),
-        fileRegex = /"tsparticles.empty.template.min.js"/g,
-        replacedFileText = replacedDescriptionText.replace(fileRegex, fileName),
-        privateRegex = /\s{4}"private": true,\r?\n?/g,
-        replacedPrivateText = replacedFileText.replace(privateRegex, ""),
-        nameRegex = /"@tsparticles\/empty-template"/g,
-        nameReplacedText = replacedPrivateText.replace(nameRegex, packageName),
-        repoUrlRegex = /"url": "git\+https:\/\/github\.com\/tsparticles\/empty-template\.git"/g,
-        repoUrlReplacedText = nameReplacedText.replace(repoUrlRegex, `"url": "git+${repoUrl}"`),
-        issuesUrlRegex = /"url": "https:\/\/github\.com\/tsparticles\/empty-template\/issues"/g,
-        replacedText = repoUrlReplacedText.replace(issuesUrlRegex, `"url": "${repoUrl.replace(".git", "/issues")}"`);
-
-    await fs.writeFile(packagePath, replacedText);
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "package.json"),
+        tokens: [
+            {
+                from: /"tsParticles empty template"/g,
+                to: `"${description}"`,
+            },
+            {
+                from: /"tsparticles.empty.template.min.js"/g,
+                to: `"${fileName}"`,
+            },
+            {
+                from: /\s{4}"private": true,\r?\n?/g,
+                to: "",
+            },
+            {
+                from: /"@tsparticles\/empty-template"/g,
+                to: `"${packageName}"`,
+            },
+            {
+                from: /"url": "git\+https:\/\/github\.com\/tsparticles\/empty-template\.git"/g,
+                to: `"url": "git+${repoUrl}"`,
+            },
+            {
+                from: /"url": "https:\/\/github\.com\/tsparticles\/empty-template\/issues"/g,
+                to: `"url": "${repoUrl.replace(".git", "/issues")}"`,
+            },
+        ],
+    });
 }
 
 /**
@@ -50,22 +64,35 @@ export async function updatePackageDistFile(
     fileName: string,
     repoUrl: string,
 ): Promise<void> {
-    const packagePath = path.resolve(destPath, "package.dist.json"),
-        packageContents = await fs.readFile(packagePath, "utf-8"),
-        descriptionRegex = /"tsParticles empty template"/g,
-        replacedDescriptionText = packageContents.replace(descriptionRegex, `"${description}"`),
-        fileRegex = /"tsparticles.empty.template.min.js"/g,
-        replacedFileText = replacedDescriptionText.replace(fileRegex, fileName),
-        privateRegex = /\s{4}"private": true,\r?\n?/g,
-        replacedPrivateText = replacedFileText.replace(privateRegex, ""),
-        nameRegex = /"@tsparticles\/empty-template"/g,
-        nameReplacedText = replacedPrivateText.replace(nameRegex, packageName),
-        repoUrlRegex = /"url": "git\+https:\/\/github\.com\/tsparticles\/empty-template\.git"/g,
-        repoUrlReplacedText = nameReplacedText.replace(repoUrlRegex, `"url": "git+${repoUrl}"`),
-        issuesUrlRegex = /"url": "https:\/\/github\.com\/tsparticles\/empty-template\/issues"/g,
-        replacedText = repoUrlReplacedText.replace(issuesUrlRegex, `"url": "${repoUrl.replace(".git", "/issues")}"`);
-
-    await fs.writeFile(packagePath, replacedText);
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "package.dist.json"),
+        tokens: [
+            {
+                from: /"tsParticles empty template"/g,
+                to: `"${description}"`,
+            },
+            {
+                from: /"tsparticles.empty.template.min.js"/g,
+                to: `"${fileName}"`,
+            },
+            {
+                from: /\s{4}"private": true,\r?\n?/g,
+                to: "",
+            },
+            {
+                from: /"@tsparticles\/empty-template"/g,
+                to: `"${packageName}"`,
+            },
+            {
+                from: /"url": "git\+https:\/\/github\.com\/tsparticles\/empty-template\.git"/g,
+                to: `"url": "git+${repoUrl}"`,
+            },
+            {
+                from: /"url": "https:\/\/github\.com\/tsparticles\/empty-template\/issues"/g,
+                to: `"url": "${repoUrl.replace(".git", "/issues")}"`,
+            },
+        ],
+    });
 }
 
 /**
@@ -81,16 +108,23 @@ export async function updateWebpackFile(
     description: string,
     fnName: string,
 ): Promise<void> {
-    const webpackPath = path.resolve(destPath, "webpack.config.js"),
-        webpack = await fs.readFile(webpackPath, "utf-8"),
-        webpackDescriptionRegex = /"Empty"/g,
-        replacedDescriptionText = webpack.replace(webpackDescriptionRegex, `"${description}"`),
-        webpackEntryRegex = /"empty"/g,
-        replacedNameText = replacedDescriptionText.replace(webpackEntryRegex, `"${name}"`),
-        webpackFunctionNameRegex = /loadParticlesTemplate/g,
-        replacedFunctionNameText = replacedNameText.replace(webpackFunctionNameRegex, fnName);
-
-    await fs.writeFile(webpackPath, replacedFunctionNameText);
+    await replaceTokensInFile({
+        path: path.resolve(destPath, "webpack.config.js"),
+        tokens: [
+            {
+                from: /"Empty"/g,
+                to: `"${description}"`,
+            },
+            {
+                from: /"empty"/g,
+                to: `"${name}"`,
+            },
+            {
+                from: /loadParticlesTemplate/g,
+                to: fnName,
+            },
+        ],
+    });
 }
 
 /**
@@ -98,9 +132,7 @@ export async function updateWebpackFile(
  * @param destPath - The path where the project will be created
  */
 export async function copyEmptyTemplateFiles(destPath: string): Promise<void> {
-    const emptyPath = path.resolve(__dirname, "..", "..", "files", "empty-project");
-
-    await fs.copy(emptyPath, destPath, {
+    await fs.copy(path.resolve(__dirname, "..", "..", "files", "empty-project"), destPath, {
         overwrite: true,
         filter: copyFilter,
     });

package/tests/create-plugin.test.ts

@@ -0,0 +1,31 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { createPluginTemplate } from "../src/create/plugin/create-plugin";
+import path from "path";
+import fs from "fs-extra";
+
+describe("create-plugin", async () => {
+    it("should have created the plugin project", async () => {
+        const destDir = path.resolve(path.join(__dirname, "tmp-files", "foo-plugin"));
+
+        await createPluginTemplate("foo", "Foo", "", destDir);
+
+        const pkgInfo = await fs.readJSON(path.join(destDir, "package.json"));
+
+        expect(pkgInfo.name).to.be.equal("tsparticles-plugin-foo");
+
+        await fs.remove(destDir);
+    });
+
+    it("should have created the plugin project, w/ repo", async () => {
+        const destDir = path.resolve(path.join(__dirname, "tmp-files", "bar-plugin"));
+
+        await createPluginTemplate("bar", "Bar", "https://github.com/matteobruni/tsparticles", destDir);
+
+        const pkgInfo = await fs.readJSON(path.join(destDir, "package.json"));
+
+        expect(pkgInfo.name).to.be.equal("tsparticles-plugin-bar");
+
+        await fs.remove(destDir);
+    });
+});

package/tests/create-preset.test.ts

@@ -0,0 +1,31 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { createPresetTemplate } from "../src/create/preset/create-preset";
+import path from "path";
+import fs from "fs-extra";
+
+describe("create-plugin", async () => {
+    it("should have created the preset project", async () => {
+        const destDir = path.resolve(path.join(__dirname, "tmp-files", "foo-preset"));
+
+        await createPresetTemplate("foo", "Foo", "", destDir);
+
+        const pkgInfo = await fs.readJSON(path.join(destDir, "package.json"));
+
+        expect(pkgInfo.name).to.be.equal("tsparticles-preset-foo");
+
+        await fs.remove(destDir);
+    });
+
+    it("should have created the preset project, w/ repo", async () => {
+        const destDir = path.resolve(path.join(__dirname, "tmp-files", "bar-preset"));
+
+        await createPresetTemplate("bar", "Bar", "https://github.com/matteobruni/tsparticles", destDir);
+
+        const pkgInfo = await fs.readJSON(path.join(destDir, "package.json"));
+
+        expect(pkgInfo.name).to.be.equal("tsparticles-preset-bar");
+
+        await fs.remove(destDir);
+    });
+});

package/tests/create-shape.test.ts

@@ -0,0 +1,31 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { createShapeTemplate } from "../src/create/shape/create-shape";
+import path from "path";
+import fs from "fs-extra";
+
+describe("create-shape", async () => {
+    it("should have created the shape project", async () => {
+        const destDir = path.resolve(path.join(__dirname, "tmp-files", "foo-shape"));
+
+        await createShapeTemplate("foo", "Foo", "", destDir);
+
+        const pkgInfo = await fs.readJSON(path.join(destDir, "package.json"));
+
+        expect(pkgInfo.name).to.be.equal("tsparticles-shape-foo");
+
+        await fs.remove(destDir);
+    });
+
+    it("should have created the shape project, w/ repo", async () => {
+        const destDir = path.resolve(path.join(__dirname, "tmp-files", "bar-shape"));
+
+        await createShapeTemplate("bar", "Bar", "https://github.com/matteobruni/tsparticles", destDir);
+
+        const pkgInfo = await fs.readJSON(path.join(destDir, "package.json"));
+
+        expect(pkgInfo.name).to.be.equal("tsparticles-shape-bar");
+
+        await fs.remove(destDir);
+    });
+});