@tsparticles/riot 4.0.0-beta.12 → 4.0.0-beta.16

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.16](https://github.com/tsparticles/tsparticles/compare/v4.0.0-beta.15...v4.0.0-beta.16) (2026-05-09)
+
+**Note:** Version bump only for package @tsparticles/riot
+
+# [4.0.0-beta.15](https://github.com/tsparticles/tsparticles/compare/v4.0.0-beta.14...v4.0.0-beta.15) (2026-05-09)
+
+**Note:** Version bump only for package @tsparticles/riot
+
 # [4.0.0-beta.12](https://github.com/tsparticles/tsparticles/compare/v4.0.0-beta.11...v4.0.0-beta.12) (2026-04-15)
 
 ### Features

package/dist/riot-particles.js

@@ -0,0 +1,127 @@
+(function (exports, engine) {
+    'use strict';
+
+    let oldId;
+    let initialized = false;
+    let initPromise;
+    let initCallback;
+
+    async function initParticlesEngine(
+        cb,
+    ) {
+        if (initialized) {
+            return;
+        }
+
+        if (initPromise) {
+            if (initCallback !== cb) {
+                throw new Error("initParticlesEngine callback must be stable across the app lifecycle.");
+            }
+
+            await initPromise;
+
+            return;
+        }
+
+        initCallback = cb;
+        initPromise = (async () => {
+            if (cb) {
+                await cb(engine.tsParticles);
+            }
+
+            await engine.tsParticles.init();
+            initialized = true;
+        })().catch((error) => {
+            initPromise = undefined;
+            initCallback = undefined;
+            initialized = false;
+
+            throw error;
+        });
+
+        await initPromise;
+    }
+
+    function isParticlesEngineInitialized() {
+        return initialized;
+    }
+
+    async function waitForParticlesEngineInitialization() {
+        await (initPromise ?? Promise.resolve());
+    }
+
+    var riotParticles = {
+      css: null,
+
+      exports: {
+        async onMounted(props) {
+            await waitForParticlesEngineInitialization();
+
+            if (!isParticlesEngineInitialized()) {
+                throw new Error("initParticlesEngine(...) must be called once before mounting <riot-particles /> components.");
+            }
+
+            if (oldId) {
+                const oldContainer = engine.tsParticles.dom().find((c) => c.id === oldId);
+
+                if (oldContainer) {
+                    oldContainer.destroy();
+                }
+            }
+
+            if (props.id) {
+                const cb = (container) => {
+                    if (props.particlesLoaded) {
+                        props.particlesLoaded(container);
+                    }
+
+                    oldId = props.id;
+                };
+
+                engine.tsParticles.load({ id: props.id, options: props.options, url: props.url }).then(cb);
+            } else {
+                if (props.particlesLoaded) {
+                    props.particlesLoaded(undefined);
+                }
+            }
+        }
+      },
+
+      template: (
+        template,
+        expressionTypes,
+        bindingTypes,
+        getComponent
+      ) => template(
+        '<div expr0="expr0"></div>',
+        [
+          {
+            redundantAttribute: 'expr0',
+            selector: '[expr0]',
+
+            expressions: [
+              {
+                type: expressionTypes.ATTRIBUTE,
+                isBoolean: false,
+                name: 'id',
+                evaluate: _scope => _scope.props.id
+              }
+            ]
+          }
+        ]
+      ),
+
+      name: 'riot-particles'
+    };
+
+    exports.default = riotParticles;
+    exports.initParticlesEngine = initParticlesEngine;
+    exports.isParticlesEngineInitialized = isParticlesEngineInitialized;
+    exports.waitForParticlesEngineInitialization = waitForParticlesEngineInitialization;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+})({}, window);
+//# sourceMappingURL=riot-particles.js.map

package/dist/riot-particles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"riot-particles.js","sources":["../src/riot-particles.riot"],"sourcesContent":["<riot-particles>\n    <script>\n        import { tsParticles } from \"@tsparticles/engine\";\n\n        let oldId;\n        let initialized = false;\n        let initPromise;\n        let initCallback;\n\n        export async function initParticlesEngine(\n            cb,\n        ) {\n            if (initialized) {\n                return;\n            }\n\n            if (initPromise) {\n                if (initCallback !== cb) {\n                    throw new Error(\"initParticlesEngine callback must be stable across the app lifecycle.\");\n                }\n\n                await initPromise;\n\n                return;\n            }\n\n            initCallback = cb;\n            initPromise = (async () => {\n                if (cb) {\n                    await cb(tsParticles);\n                }\n\n                await tsParticles.init();\n                initialized = true;\n            })().catch((error) => {\n                initPromise = undefined;\n                initCallback = undefined;\n                initialized = false;\n\n                throw error;\n            });\n\n            await initPromise;\n        }\n\n        export function isParticlesEngineInitialized() {\n            return initialized;\n        }\n\n        export async function waitForParticlesEngineInitialization() {\n            await (initPromise ?? Promise.resolve());\n        }\n\n        export default {\n            async onMounted(props) {\n                await waitForParticlesEngineInitialization();\n\n                if (!isParticlesEngineInitialized()) {\n                    throw new Error(\"initParticlesEngine(...) must be called once before mounting <riot-particles /> components.\");\n                }\n\n                if (oldId) {\n                    const oldContainer = tsParticles.dom().find((c) => c.id === oldId);\n\n                    if (oldContainer) {\n                        oldContainer.destroy();\n                    }\n                }\n\n                if (props.id) {\n                    const cb = (container) => {\n                        if (props.particlesLoaded) {\n                            props.particlesLoaded(container);\n                        }\n\n                        oldId = props.id;\n                    };\n\n                    tsParticles.load({ id: props.id, options: props.options, url: props.url }).then(cb);\n                } else {\n                    if (props.particlesLoaded) {\n                        props.particlesLoaded(undefined);\n                    }\n                }\n            }\n        }\n    </script>\n    <div id=\"{props.id}\"></div>\n\n</riot-particles>\n"],"names":["tsParticles"],"mappings":";;;IAIQ,IAAI,KAAK;IACT,IAAI,WAAU,GAAI,KAAK;IACvB,IAAI,WAAW;IACf,IAAI,YAAY;;IAET,eAAe,mBAAmB;IACrC,IAAA,EAAE;IACN,EAAE;IACE,IAAA,IAAI,WAAW,EAAE;IACb,QAAA;IACJ,IAAA;;IAEA,IAAA,IAAI,WAAW,EAAE;IACb,QAAA,IAAI,YAAW,KAAM,EAAE,EAAE;IACrB,YAAA,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC;IAC5F,QAAA;;IAEA,QAAA,MAAM,WAAW;;IAEjB,QAAA;IACJ,IAAA;;IAEA,IAAA,YAAW,GAAI,EAAE;QACjB,WAAU,GAAI,CAAC,YAAY;IACvB,QAAA,IAAI,EAAE,EAAE;IACJ,YAAA,MAAM,EAAE,CAACA,kBAAW,CAAC;IACzB,QAAA;;YAEA,MAAMA,kBAAW,CAAC,IAAI,EAAE;IACxB,QAAA,WAAU,GAAI,IAAI;IACtB,IAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK;IAClB,QAAA,cAAc,SAAS;YACvB,eAAe,SAAS;IACxB,QAAA,cAAc,KAAK;;YAEnB,MAAM,KAAK;IACf,IAAA,CAAC,CAAC;;IAEF,IAAA,MAAM,WAAW;IACrB;;IAEO,SAAS,4BAA4B,GAAG;IAC3C,IAAA,OAAO,WAAW;IACtB;;IAEO,eAAe,oCAAoC,GAAG;IACzD,IAAA,OAAO,WAAU,IAAK,OAAO,CAAC,OAAO,EAAE,CAAC;IAC5C;;;;;;IAGI,IAAA,MAAM,SAAS,CAAC,KAAK,EAAE;IACnB,QAAA,MAAM,oCAAoC,EAAE;;IAE5C,QAAA,IAAI,CAAC,4BAA4B,EAAE,EAAE;gBACjC,MAAM,IAAI,KAAK,CAAC,6FAA6F,CAAC;IAClH,QAAA;;IAEA,QAAA,IAAI,KAAK,EAAE;gBACP,MAAM,YAAW,GAAIA,kBAAW,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAC,KAAM,KAAK,CAAC;;IAElE,YAAA,IAAI,YAAY,EAAE;oBACd,YAAY,CAAC,OAAO,EAAE;IAC1B,YAAA;IACJ,QAAA;;YAEA,IAAI,KAAK,CAAC,EAAE,EAAE;IACV,YAAA,MAAM,EAAC,GAAI,CAAC,SAAS,KAAK;oBACtB,IAAI,KAAK,CAAC,eAAe,EAAE;IACvB,oBAAA,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC;IACpC,gBAAA;;IAEA,gBAAA,KAAI,GAAI,KAAK,CAAC,EAAE;gBACpB,CAAC;;IAED,YAAAA,kBAAW,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YACvF,CAAA,MAAO;gBACH,IAAI,KAAK,CAAC,eAAe,EAAE;IACvB,gBAAA,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC;IACpC,YAAA;IACJ,QAAA;IACJ,IAAA;;;;;;;;;;;;;;;;;;;;IAGE,YAAA,QAAA,EAAA,MAAA,IAAA,MAAA,CAAA,KAAI,CAAE;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@tsparticles/riot",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0-beta.16",
   "description": "Official tsParticles Riot Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.",
   "main": "dist/riot-particles.js",
   "scripts": {
-    "build": "echo build",
-    "build:ci": "echo build",
     "prettify:ci:src": "prettier --check ./src/*",
     "prettify:ci:readme": "prettier --check ./README.md",
     "prettify:src": "prettier --write ./src/*",
     "prettify:readme": "prettier --write ./README.md",
+    "build": "pnpm run prettify:src && rollup -c",
+    "build:ci": "pnpm run prettify:ci:src && rollup -c",
     "prepack": "pnpm run build"
   },
   "repository": {
@@ -94,14 +94,15 @@
     "riot": "^9.1.2"
   },
   "dependencies": {
-    "@tsparticles/engine": "^4.0.0-beta.12"
+    "@tsparticles/engine": "^4.0.0-beta.16"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
     "@riotjs/cli": "^10.0.0",
     "@riotjs/compiler": "^10.0.1",
-    "@tsparticles/prettier-config": "^3.4.6",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@tsparticles/prettier-config": "^4.0.0-beta.16",
     "chai": "^6.2.2",
     "esm": "^3.2.25",
     "jsdom": "^29.0.2",
@@ -109,10 +110,12 @@
     "mocha": "^11.7.5",
     "nyc": "^18.0.0",
     "prettier": "^3.8.2",
-    "riot": "^10.1.3"
+    "riot": "^10.1.3",
+    "rollup": "^4.60.1",
+    "rollup-plugin-riot": "^10.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ebd73f94ae2391c9068de098f2856e1efb26254c"
+  "gitHead": "8ac678c4da53ea2b6a9a33aaa40f5141e2a7d513"
 }

package/rollup.config.cjs

@@ -0,0 +1,26 @@
+const riot = require('rollup-plugin-riot');
+const babel = require('@rollup/plugin-babel').babel || require('@rollup/plugin-babel');
+
+module.exports = {
+    input: 'src/riot-particles.riot',
+    output: {
+        file: 'dist/riot-particles.js',
+        format: 'iife',
+        sourcemap: true,
+        globals: {
+            riot: 'riot',
+            '@tsparticles/engine': 'window'
+        }
+    },
+    external: [
+        'riot',
+        '@tsparticles/engine'
+    ],
+    plugins: [
+        riot(),
+        babel({
+            exclude: 'node_modules/**',
+            inputSourceMap: true,
+        }),
+    ]
+};