@tsparticles/ember 4.0.0-beta.12

package/.eslintrc.js

@@ -0,0 +1,53 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true,
+    },
+  },
+  plugins: ['ember'],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended',
+    'plugin:prettier/recommended',
+  ],
+  env: {
+    browser: true,
+  },
+  rules: {},
+  overrides: [
+    // node files
+    {
+      files: [
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './index.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './tests/dummy/config/**/*.js',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      plugins: ['node'],
+      extends: ['plugin:node/recommended'],
+    },
+    {
+      // test files
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
+  ],
+};

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+
+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.12](https://github.com/tsparticles/tsparticles/compare/v4.0.0-beta.11...v4.0.0-beta.12) (2026-04-15)
+
+### Features
+
+- improving other wrappers to make them similar to React, Vue and Angular ones ([4dccf8e](https://github.com/tsparticles/tsparticles/commit/4dccf8eb0fe4ac29f8240673c77e0701cdbd15b1))
+- improving other wrappers to make them similar to React, Vue and Angular ones ([e0c9230](https://github.com/tsparticles/tsparticles/commit/e0c9230b751d3a86b8f4eccf10b3660a0a7ddb91))
+- improving other wrappers to make them similar to React, Vue and Angular ones ([981e896](https://github.com/tsparticles/tsparticles/commit/981e896329951c6cdebfeba2406a68278c373996))

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2022
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# @tsparticles/ember
+
+[![npm](https://img.shields.io/npm/v/@tsparticles/ember)](https://www.npmjs.com/package/@tsparticles/ember) [![npm](https://img.shields.io/npm/dm/@tsparticles/ember)](https://www.npmjs.com/package/@tsparticles/ember) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+Official Ember component for [tsParticles](https://github.com/tsparticles/tsparticles).
+
+## Compatibility
+
+- Ember.js v3.28+
+- Ember CLI v3.28+
+- Node.js v14+
+
+## Installation
+
+```bash
+npm install @tsparticles/ember
+# or
+yarn add @tsparticles/ember
+# or
+pnpm add @tsparticles/ember
+# or
+ember install @tsparticles/ember
+```
+
+If you want the full bundle loader in examples below:
+
+```bash
+npm install tsparticles
+```
+
+## Usage
+
+Initialize the engine once in your app lifecycle, then render `<Particles />` where needed.
+
+```ts
+import Controller from '@ember/controller';
+import type { Engine } from '@tsparticles/engine';
+import { loadFull } from 'tsparticles';
+import { initParticlesEngine } from '@tsparticles/ember/utils/init-particles-engine';
+
+export default class ApplicationController extends Controller {
+  public constructor(...args: unknown[]) {
+    super(...args);
+
+    void initParticlesEngine(async (engine: Engine) => {
+      await loadFull(engine);
+    });
+  }
+}
+```
+
+```hbs
+<Particles @options={{this.options}} @particlesLoaded={{this.loadedCallback}} />
+```
+
+The component accepts these named args:
+
+- `@options`: particles options object
+- `@url`: remote JSON config URL
+- `@particlesLoaded`: callback invoked with the loaded container
+
+### Template import syntax (`.gjs`)
+
+```js
+import type { Engine } from "@tsparticles/engine";
+import { loadFull } from "tsparticles";
+import Particles from "@tsparticles/ember/components/particles";
+import { initParticlesEngine } from "@tsparticles/ember/utils/init-particles-engine";
+
+void initParticlesEngine(async (engine: Engine) => {
+  await loadFull(engine);
+});
+
+const options = {
+  particles: {
+    links: {
+      enable: true,
+    },
+    move: {
+      enable: true,
+    },
+  },
+};
+
+<template>
+  <Particles @options={{options}} />
+</template>;
+```
+
+### Using presets
+
+```bash
+npm install @tsparticles/preset-confetti
+```
+
+```ts
+import type { Engine } from '@tsparticles/engine';
+import { initParticlesEngine } from '@tsparticles/ember/utils/init-particles-engine';
+import { loadConfettiPreset } from '@tsparticles/preset-confetti';
+
+void initParticlesEngine(async (engine: Engine) => {
+  await loadConfettiPreset(engine);
+});
+```
+
+```hbs
+<Particles @options={{hash preset='confetti'}} />
+```

package/addon/components/particles.hbs

@@ -0,0 +1,11 @@
+{{!-- template-lint-disable no-implicit-this --}}
+<div
+  id='particles-{{unique-id-polyfill}}'
+  data-test-id='particles'
+  ...attributes
+  {{particles
+    options=@options
+    url=@url
+    particlesLoaded=@particlesLoaded
+  }}
+></div>

package/addon/helpers/unique-id-polyfill.ts

@@ -0,0 +1,14 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(uniqueIdPolyfill);
+
+// Copy-pasted from the ember-source implementation:
+// https://github.com/emberjs/ember.js/blob/master/packages/@ember/-internals/glimmer/lib/helpers/unique-id.ts
+function uniqueIdPolyfill() {
+  // @ts-expect-error this one-liner abuses weird JavaScript semantics that
+  // TypeScript (legitimately) doesn't like, but they're nonetheless valid and
+  // specced.
+  return ([3e7] + -1e3 + -4e3 + -2e3 + -1e11).replace(/[0-3]/g, (a) =>
+    ((a * 4) ^ ((Math.random() * 16) >> (a & 2))).toString(16)
+  );
+}

package/addon/modifiers/particles.ts

@@ -0,0 +1,55 @@
+import Modifier, { NamedArgs, PositionalArgs } from 'ember-modifier';
+import type { Container, Options } from '@tsparticles/engine';
+import { tsParticles } from '@tsparticles/engine';
+import {
+  isParticlesEngineInitialized,
+  waitForParticlesEngineInitialization,
+} from '../utils/init-particles-engine';
+
+import { registerDestructor } from '@ember/destroyable';
+
+interface ParticlesModifierSignature {
+  Args: {
+    Positional: [];
+    Named: {
+      options: Options;
+      url: string;
+      particlesLoaded: (container: Container) => void;
+    };
+  };
+}
+
+export default class ParticlesModifier extends Modifier<ParticlesModifierSignature> {
+  async modify(
+    element: Element,
+    _: PositionalArgs<ParticlesModifierSignature>,
+    { options, url, particlesLoaded }: NamedArgs<ParticlesModifierSignature>,
+  ) {
+    if (!element.id) {
+      throw new Error('The specified element must have an id attribute.');
+    }
+
+    await waitForParticlesEngineInitialization();
+
+    if (!isParticlesEngineInitialized()) {
+      throw new Error(
+        'initParticlesEngine(...) must be called once before rendering <Particles /> components.',
+      );
+    }
+
+    let container = await tsParticles.load({
+      id: element.id,
+      options: options ?? {},
+      url,
+    });
+
+    if (particlesLoaded && container) {
+      particlesLoaded(container);
+    }
+
+    registerDestructor(this, () => {
+      container?.destroy();
+      container = undefined;
+    });
+  }
+}

package/addon/utils/init-particles-engine.ts

@@ -0,0 +1,55 @@
+import type { Engine } from '@tsparticles/engine';
+import { tsParticles } from '@tsparticles/engine';
+
+export type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;
+
+let initialized = false;
+let initPromise: Promise<void> | undefined;
+let initCallback: ParticlesPluginRegistrar | undefined;
+
+export async function initParticlesEngine(
+  init?: ParticlesPluginRegistrar,
+): Promise<void> {
+  if (initialized) {
+    return;
+  }
+
+  if (initPromise) {
+    if (initCallback !== init) {
+      throw new Error(
+        'initParticlesEngine callback must be stable across the app lifecycle.',
+      );
+    }
+
+    await initPromise;
+
+    return;
+  }
+
+  initCallback = init;
+  initPromise = (async () => {
+    if (init) {
+      await init(tsParticles);
+    }
+
+    await tsParticles.init();
+
+    initialized = true;
+  })().catch((error: unknown) => {
+    initPromise = undefined;
+    initCallback = undefined;
+    initialized = false;
+
+    throw error;
+  });
+
+  await initPromise;
+}
+
+export function isParticlesEngineInitialized(): boolean {
+  return initialized;
+}
+
+export async function waitForParticlesEngineInitialization(): Promise<void> {
+  await (initPromise ?? Promise.resolve());
+}

package/app/components/particles.js

@@ -0,0 +1 @@
+export { default } from '@tsparticles/ember/components/particles';

package/app/helpers/unique-id-polyfill.js

@@ -0,0 +1 @@
+export { default } from '@tsparticles/ember/helpers/unique-id-polyfill';

package/app/modifiers/particles.js

@@ -0,0 +1 @@
+export { default } from '@tsparticles/ember/modifiers/particles';

package/app/utils/init-particles-engine.js

@@ -0,0 +1,5 @@
+export {
+  initParticlesEngine,
+  isParticlesEngineInitialized,
+  waitForParticlesEngineInitialization,
+} from '@tsparticles/ember/utils/init-particles-engine';

package/config/environment.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function (/* environment, appConfig */) {
+  return {};
+};

package/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  name: require('./package').name,
+};

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@tsparticles/ember",
+  "version": "4.0.0-beta.12",
+  "description": "Ember.js component for using tsParticles",
+  "keywords": [
+    "ember-addon"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tsparticles/tsparticles.git",
+    "directory": "wrappers/ember"
+  },
+  "license": "MIT",
+  "author": "Ignace Maes (https://ignacemaes.com/)",
+  "directories": {
+    "doc": "doc",
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "echo build",
+    "lint": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
+    "lint:hbs": "ember-template-lint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
+    "start": "ember serve",
+    "test": "npm-run-all --print-name \"lint\" \"test:*\"",
+    "test:ember": "echo test",
+    "test:ember-compatibility": "echo ember try:each",
+    "prepack": "ember ts:precompile",
+    "postpack": "ember ts:clean"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^4.0.0-beta.12",
+    "ember-auto-import": "^2.13.1",
+    "ember-cli-babel": "^8.3.1",
+    "ember-cli-htmlbars": "^7.0.1",
+    "ember-cli-typescript": "^5.3.0",
+    "ember-modifier": "^4.3.0",
+    "ember-test-selectors": "^7.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.0",
+    "@ember/optional-features": "^3.0.0",
+    "@ember/test-helpers": "^5.4.1",
+    "@embroider/test-setup": "^4.0.0",
+    "@glimmer/component": "^2.1.1",
+    "@glimmer/tracking": "^1.1.2",
+    "@tsconfig/ember": "^3.0.12",
+    "@tsparticles/preset-snow": "^4.0.0-beta.12",
+    "@types/ember": "^4.0.11",
+    "@types/ember-qunit": "^6.1.3",
+    "@types/ember-resolver": "^9.0.2",
+    "@types/ember__application": "^4.0.11",
+    "@types/ember__array": "^4.0.10",
+    "@types/ember__component": "^4.0.22",
+    "@types/ember__controller": "^4.0.12",
+    "@types/ember__debug": "^4.0.8",
+    "@types/ember__destroyable": "^4.0.5",
+    "@types/ember__engine": "^4.0.11",
+    "@types/ember__error": "^4.0.6",
+    "@types/ember__object": "^4.0.12",
+    "@types/ember__polyfills": "^4.0.6",
+    "@types/ember__routing": "^4.0.23",
+    "@types/ember__runloop": "^4.0.10",
+    "@types/ember__service": "^4.0.9",
+    "@types/ember__string": "^3.0.15",
+    "@types/ember__template": "^4.0.7",
+    "@types/ember__test": "^4.0.6",
+    "@types/ember__test-helpers": "^2.9.3",
+    "@types/ember__utils": "^4.0.7",
+    "@types/qunit": "^2.19.13",
+    "@types/rsvp": "^4.0.9",
+    "@types/sinon": "^21.0.1",
+    "babel-eslint": "^10.1.0",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-cli": "~6.12.0",
+    "ember-cli-dependency-checker": "^3.3.3",
+    "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sri": "^2.1.1",
+    "ember-cli-terser": "^4.0.2",
+    "ember-disable-prototype-extensions": "^1.1.3",
+    "ember-load-initializers": "^3.0.1",
+    "ember-page-title": "^9.0.3",
+    "ember-qunit": "^9.0.4",
+    "ember-resolver": "^13.2.0",
+    "ember-sinon-qunit": "^7.5.0",
+    "ember-source": "~6.12.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^7.9.3",
+    "ember-try": "^4.0.0",
+    "eslint": "^10.2.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ember": "^12.7.5",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-qunit": "^8.2.6",
+    "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.8.2",
+    "qunit": "^2.25.0",
+    "qunit-dom": "^3.5.0",
+    "tsparticles": "^4.0.0-beta.12",
+    "typescript": "^6.0.2",
+    "webpack": "^5.106.1"
+  },
+  "engines": {
+    "node": "14.* || 16.* || >= 18"
+  },
+  "ember": {
+    "edition": "octane"
+  },
+  "ember-addon": {
+    "configPath": "tests/dummy/config"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "ebd73f94ae2391c9068de098f2856e1efb26254c"
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "compilerOptions": {
+
+    // The combination of `baseUrl` with `paths` allows Ember's classic package
+    // layout, which is not resolvable with the Node resolution algorithm, to
+    // work with TypeScript.
+    "baseUrl": ".",
+    "paths": {
+      "dummy/tests/*": [
+        "tests/*"
+      ],
+      "dummy/*": [
+        "tests/dummy/app/*",
+        "app/*"
+      ],
+      "@tsparticles/ember": [
+        "addon"
+      ],
+      "@tsparticles/ember/*": [
+        "addon/*"
+      ],
+      "@tsparticles/ember/test-support": [
+        "addon-test-support"
+      ],
+      "@tsparticles/ember/test-support/*": [
+        "addon-test-support/*"
+      ],
+      "*": [
+        "types/*"
+      ]
+    }
+  },
+  "include": [
+    "app/**/*",
+    "addon/**/*",
+    "tests/**/*",
+    "types/**/*",
+    "test-support/**/*",
+    "addon-test-support/**/*"
+  ]
+}

package/typedoc.json

@@ -0,0 +1,15 @@
+{
+  "includes": "./markdown",
+  "entryPoints": [
+    "./src/"
+  ],
+  "entryPointStrategy": "expand",
+  "name": "tsParticles Angular Component",
+  "includeVersion": true,
+  "hideGenerator": true,
+  "out": "./docs",
+  "validation": {
+    "invalidLink": true,
+    "notDocumented": true
+  }
+}

package/types/dummy/index.d.ts

@@ -0,0 +1 @@
+

package/types/global.d.ts

@@ -0,0 +1,7 @@
+// Types for compiled templates
+declare module '@tsparticles/ember/templates/*' {
+  import { TemplateFactory } from 'ember-cli-htmlbars';
+
+  const tmpl: TemplateFactory;
+  export default tmpl;
+}