@tsparticles/cli-command-create 4.0.0-beta.12

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,18 @@
+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, replace the empty promise
+        return await Promise.resolve();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { loadTemplatePlugin } from "./index.js";
+
+const globalObject = globalThis as typeof globalThis & {
+  __tsParticlesInternals?: Record<string, unknown>;
+  loadTemplatePlugin?: typeof loadTemplatePlugin;
+};
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadTemplatePlugin = loadTemplatePlugin;
+
+export * from "./index.js";

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

@@ -0,0 +1,10 @@
+import type { Engine } from "@tsparticles/engine";
+
+/**
+ * @param engine - The engine instance
+ */
+export async function loadTemplatePlugin(engine: Engine): Promise<void> {
+    const { Plugin } = await import("./plugin.js");
+
+    await engine.addPlugin(new Plugin(/*engine*/));
+}

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

@@ -0,0 +1,9 @@
+import type { Engine } from "@tsparticles/engine";
+import { Plugin } from "./plugin.js";
+
+/**
+ * @param engine - The engine instance
+ */
+export async function loadTemplatePlugin(engine: Engine): Promise<void> {
+    await engine.addPlugin(new Plugin(/*engine*/));
+}

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

@@ -0,0 +1,36 @@
+import { /*type Container, type Engine,*/ type IPlugin, type ISourceOptions, type Options } from "@tsparticles/engine";
+import type { PluginInstance } from "./PluginInstance.js";
+
+/**
+ */
+export class Plugin implements IPlugin {
+    readonly id;
+
+    //private readonly _engine;
+
+    constructor(/*engine: Engine*/) {
+        this.id = "#template#";
+
+        //this._engine = engine;
+    }
+
+    async getPlugin(/*container: Container*/): Promise<PluginInstance> {
+        const { PluginInstance } = await import("./PluginInstance.js");
+
+        return new PluginInstance(/*container, this._engine*/);
+    }
+
+    loadOptions(_options: Options, _source?: ISourceOptions): void {
+        if (!this.needsPlugin()) {
+            // ignore plugin options when not needed
+
+            return;
+        }
+
+        // Load your options here
+    }
+
+    needsPlugin(_options?: ISourceOptions): boolean {
+        return true; // add your condition here, replace true with condition if needed
+    }
+}

package/files/create-preset/README.md

@@ -0,0 +1,144 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Template Preset
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-template/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-template) [![npmjs](https://badge.fury.io/js/tsparticles-preset-template.svg)](https://www.npmjs.com/package/tsparticles-preset-template) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-template)](https://www.npmjs.com/package/tsparticles-preset-template)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) preset template.
+
+## Sample
+
+![demo](https://raw.githubusercontent.com/tsparticles/preset-template/main/images/sample.png)
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The first step is installing [tsParticles](https://github.com/matteobruni/tsparticles) following the instructions for
+vanilla javascript in the main project [here](https://github.com/matteobruni/tsparticles)
+
+Once installed you need one more script to be included in your page (or you can download that
+from [jsDelivr](https://www.jsdelivr.com/package/npm/tsparticles-preset-template):
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/engine@2/tsparticles.engine.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-template/tsparticles.preset.template.min.js"></script>
+```
+
+This script **MUST** be placed after the `tsParticles` one.
+
+#### Bundle
+
+A bundled script can also be used, this will include every needed plugin needed by the preset.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-template/tsparticles.preset.template.bundle.min.js"></script>
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` like this:
+
+```javascript
+(async () => {
+    await tsParticles.load("tsparticles", {
+        preset: "template",
+    });
+})();
+```
+
+#### Customization
+
+**Important**
+You can override all the options defining the properties like in any standard `tsParticles` installation.
+
+```javascript
+(async () => {
+    await tsParticles.load("tsparticles", {
+        particles: {
+            shape: {
+                type: "square"
+            }
+        },
+        preset: "template"
+    });
+})();
+```
+
+Like in the sample above, the circles will be replaced by squares.
+
+### React.js / Preact / Inferno
+
+_The syntax for `React.js`, `Preact` and `Inferno` is the same_.
+
+This sample uses the class component syntax, but you can use hooks as well (if the library supports it).
+
+```javascript
+import Particles from "react-particles";
+import { Engine } from "@tsparticles/engine";
+import { loadTemplatePreset } from "tsparticles-preset-template";
+
+export class ParticlesContainer extends React.PureComponent<IProps> {
+  // this customizes the component tsParticles installation
+  async customInit(engine: Engine) {
+    // this adds the preset to tsParticles, you can safely use the
+    await loadTemplatePreset(engine);
+  }
+
+  render() {
+    const options = {
+      preset: "template",
+    };
+
+    return <Particles options={options} init={this.customInit} />;
+  }
+}
+```
+
+### Vue (2.x and 3.x)
+
+_The syntax for `Vue.js 2.x` and `3.x` is the same_
+
+```vue
+<Particles id="tsparticles" :particlesInit="particlesInit" url="http://foo.bar/particles.json" />
+```
+
+```js
+async function particlesInit(engine: Engine) {
+    await loadTemplatePreset(main);
+}
+```
+
+### Angular
+
+```html
+
+<ng-particles
+    [id]="id"
+    [options]="particlesOptions"
+    [particlesInit]="particlesInit"
+></ng-particles>
+```
+
+```ts
+async function particlesInit(engine: Engine): Promise<void> {
+    loadTemplatePreset(engine);
+}
+```
+
+### Svelte
+
+```sveltehtml
+
+<Particles
+        id="tsparticles"
+        url="{particlesUrl}"
+        particlesInit="{particlesInit}"
+/>
+```
+
+```js
+let particlesInit = async (engine) => {
+    await loadTemplatePreset(engine);
+};
+```

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

@@ -0,0 +1,10 @@
+import { loadTemplatePreset } from "./index.js";
+
+const globalObject = globalThis as typeof globalThis & {
+  __tsParticlesInternals?: Record<string, unknown>;
+  loadTemplatePreset?: typeof loadTemplatePreset;
+};
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadTemplatePreset = loadTemplatePreset;
+
+export * from "./index.js";

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

@@ -0,0 +1,17 @@
+import { loadTemplatePreset } from "./index.js";
+
+
+import { loadTemplatePreset } from "./index.js";
+import { tsParticles } from "@tsparticles/engine";
+
+void loadTemplatePreset(tsParticles);
+
+export { loadTemplatePreset, tsParticles };
+
+const globalObject = globalThis as typeof globalThis & {
+  __tsParticlesInternals?: Record<string, unknown>;
+  loadTemplatePreset?: typeof loadTemplatePreset;
+};
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+
+globalObject.loadTemplatePreset = loadTemplatePreset;

package/files/create-preset/src/index.lazy.ts

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

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

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

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

@@ -0,0 +1,6 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+
+// The options used by the preset
+export const options: ISourceOptions = {
+    // TODO: options here
+};

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,16 @@
+import type { IShapeDrawData, IShapeDrawer } from "@tsparticles/engine";
+
+export class ShapeDrawer implements IShapeDrawer {
+    readonly validTypes = ["#template#"] as const;
+
+    draw(_data: IShapeDrawData): void {
+        // draw the particle using the context
+        // which is already centered in the particle position
+        // colors are already handled, 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/browser.ts

@@ -0,0 +1,10 @@
+import { loadTemplateShape } from "./index.js";
+
+const globalObject = globalThis as typeof globalThis & {
+  __tsParticlesInternals?: Record<string, unknown>;
+  loadTemplateShape?: typeof loadTemplateShape;
+};
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadTemplateShape = loadTemplateShape;
+
+export * from "./index.js";

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

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

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

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

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@tsparticles/cli-command-create",
+  "version": "4.0.0-beta.12",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "tagVersionPrefix": "v"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "cli/commands/create"
+  },
+  "prettier": "@tsparticles/prettier-config",
+  "peerDependencies": {
+    "commander": "^14"
+  },
+  "dependencies": {
+    "@swc/core": "^1.15.32",
+    "eslint": "^10.3.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsdoc": "^62.9.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-tsdoc": "^0.5.2",
+    "klaw": "^4.1.0",
+    "lookpath": "^1.2.3",
+    "dependency-cruiser": "^17.3.10",
+    "path-scurry": "^2.0.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-multiline-arrays": "^4.1.7",
+    "prompts": "^2.4.2",
+    "rimraf": "^6.1.3",
+    "swc-loader": "^0.2.7",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.1",
+    "webpack": "^5.106.2",
+    "@tsparticles/cli-create-utils": "^4.0.0-beta.12",
+    "@tsparticles/depcruise-config": "^4.0.0-beta.12",
+    "@tsparticles/prettier-config": "^4.0.0-beta.12",
+    "@tsparticles/eslint-config": "^4.0.0-beta.12",
+    "@tsparticles/tsconfig": "^4.0.0-beta.12",
+    "@tsparticles/webpack-plugin": "^4.0.0-beta.12"
+  },
+  "devDependencies": {
+    "@types/estree": "^1.0.8",
+    "@types/klaw": "^3.0.7",
+    "@types/node": "^25.6.0",
+    "@types/prompts": "^2.4.9",
+    "@types/webpack-env": "^1.18.8",
+    "browserslist": "^4.28.2",
+    "commander": "^14.0.3",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^10.1.0",
+    "terser-webpack-plugin": "^5.5.0",
+    "ts-node": "^10.9.2",
+    "vitest": "^4.1.5",
+    "webpack-bundle-analyzer": "^5.3.0",
+    "webpack-cli": "^7.0.2"
+  },
+  "description": "tsParticles CLI",
+  "main": "dist/create.js",
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "scripts": {
+    "prettify:ci:src": "prettier --check ./src/*",
+    "prettify:ci:readme": "prettier --check ./README.md",
+    "prettify:src": "prettier --write ./src/*",
+    "prettify:readme": "prettier --write ./README.md",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --cache --cache-location .cache/eslint/.eslintcache --cache-strategy metadata --fix",
+    "lint:ci": "eslint src --ext .js,.jsx,.ts,.tsx --cache --cache-location .cache/eslint/.eslintcache --cache-strategy metadata",
+    "circular-deps": "depcruise src --include-only '^src' --validate --output-type err-long",
+    "compile": "pnpm run build:ts",
+    "compile:ci": "pnpm run build:ts",
+    "build:ts": "pnpm run build:ts:cjs",
+    "build:ts:cjs": "tsc -p src",
+    "test": "vitest run",
+    "build": "pnpm run clear:dist && pnpm run prettify:src && pnpm run lint && pnpm run compile && pnpm run circular-deps && pnpm run prettify:readme",
+    "build:ci": "pnpm run clear:dist && pnpm run prettify:ci:src && pnpm run lint:ci && pnpm run compile:ci && pnpm run prettify:ci:readme",
+    "clear:dist": "rimraf ./dist"
+  }
+}

package/renovate.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "baseBranches": [
+    "dev"
+  ],
+  "extends": [
+    "config:base"
+  ]
+}

package/src/create.ts

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