Merge pull request #18 from tsparticles/dev

v2.0.0

Author: matteobruni

.github/workflows/node.js-ci.yml

@@ -43,8 +43,8 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
       - run: pnpm install --no-frozen-lockfile
-      - run: npx pnpm run build:ci
-      - run: npx pnpm test
+      - run: pnpm run build:ci
+      - run: pnpm test
   pr:
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'pull_request' }}
@@ -81,5 +81,5 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
       - run: pnpm install --no-frozen-lockfile
-      - run: npx pnpm run build:ci
-      - run: npx pnpm test
+      - run: pnpm run build:ci
+      - run: pnpm test

files/create-plugin/README.md

@@ -54,7 +54,7 @@ $ yarn add tsparticles-plugin-template
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
+const { tsParticles } = require("@tsparticles/engine");
 const { loadTemplatePlugin } = require("tsparticles-plugin-template");
 
 (async () => {
@@ -65,7 +65,7 @@ const { loadTemplatePlugin } = require("tsparticles-plugin-template");
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
+import { tsParticles } from "@tsparticles/engine";
 import { loadTemplatePlugin } from "tsparticles-plugin-template";
 
 (async () => {

files/create-plugin/src/PluginInstance.ts

@@ -1,4 +1,4 @@
-import { type Container, type Engine, type IContainerPlugin } from "tsparticles-engine";
+import { type Container, type Engine, type IContainerPlugin } from "@tsparticles/engine";
 
 export class PluginInstance implements IContainerPlugin {
     private readonly _container;
@@ -10,6 +10,7 @@ export class PluginInstance implements IContainerPlugin {
     }
 
     async init(): Promise<void> {
-        // add your plugin initialization here
+        // add your plugin initialization here, replace the empty promise
+        return await Promise.resolve();
     }
 }

files/create-plugin/src/index.ts

@@ -1,4 +1,4 @@
-import type { Container, Engine, IPlugin, ISourceOptions, Options } from "tsparticles-engine";
+import type { Container, Engine, IPlugin, ISourceOptions, Options } from "@tsparticles/engine";
 import { PluginInstance } from "./PluginInstance";
 
 /**
@@ -20,14 +20,16 @@ class Plugin implements IPlugin {
 
     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
+        return true; // add your condition here, replace true with condition if needed
     }
 }
 

files/create-preset/README.md

@@ -21,7 +21,7 @@ Once installed you need one more script to be included in your page (or you can
 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/engine@2/tsparticles.engine.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-template/tsparticles.preset.template.min.js"></script>
 ```
 
@@ -75,7 +75,7 @@ This sample uses the class component syntax, but you can use hooks as well (if t
 
 ```javascript
 import Particles from "react-particles";
-import { Engine } from "tsparticles-engine";
+import { Engine } from "@tsparticles/engine";
 import { loadTemplatePreset } from "tsparticles-preset-template";
 
 export class ParticlesContainer extends React.PureComponent<IProps> {

files/create-preset/src/bundle.ts

@@ -1,6 +1,6 @@
-import { loadTemplatePreset } from ".";
-import { tsParticles } from "tsparticles-engine";
+import { loadTemplatePreset } from "./index.js";
+import { tsParticles } from "@tsparticles/engine";
 
-loadTemplatePreset(tsParticles);
+void loadTemplatePreset(tsParticles);
 
 export { loadTemplatePreset, tsParticles };

files/create-preset/src/index.ts

@@ -1,13 +1,13 @@
-import type { Engine } from "tsparticles-engine";
+import type { Engine } from "@tsparticles/engine";
 import { options } from "./options";
 
 /**
  *
  * @param engine - the engine instance to load the preset into
  */
-export function loadTemplatePreset(engine: Engine): void {
+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
-    engine.addPreset("#template#", options);
+    await engine.addPreset("#template#", options);
 }

files/create-preset/src/options.ts

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

files/create-shape/README.md

@@ -55,7 +55,7 @@ $ yarn add tsparticles-shape-template
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
+const { tsParticles } = require("@tsparticles/engine");
 const { loadTemplateShape } = require("tsparticles-shape-template");
 
 (async () => {
@@ -66,7 +66,7 @@ const { loadTemplateShape } = require("tsparticles-shape-template");
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
+import { tsParticles } from "@tsparticles/engine";
 import { loadTemplateShape } from "tsparticles-shape-template";
 
 (async () => {

files/create-shape/src/ShapeDrawer.ts

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