@tsparticles/qwik 4.0.0-beta.12

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+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,94 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# @tsparticles/qwik
+
+[![npm](https://img.shields.io/npm/v/@tsparticles/qwik)](https://www.npmjs.com/package/@tsparticles/qwik)
+[![npm](https://img.shields.io/npm/dm/@tsparticles/qwik)](https://www.npmjs.com/package/@tsparticles/qwik)
+
+Official Qwik component wrapper for [tsParticles](https://github.com/matteobruni/tsparticles).
+
+## Installation
+
+```bash
+pnpm add @tsparticles/qwik @tsparticles/engine
+```
+
+or
+
+```bash
+npm install @tsparticles/qwik @tsparticles/engine
+```
+
+or
+
+```bash
+yarn add @tsparticles/qwik @tsparticles/engine
+```
+
+## Usage
+
+Initialize tsParticles once in your app bootstrap, then use `<Particles />` wherever needed.
+
+```tsx
+import { component$, useSignal } from "@builder.io/qwik";
+import { Particles, initParticlesEngine } from "@tsparticles/qwik";
+import type { Engine } from "@tsparticles/engine";
+
+void initParticlesEngine(async (engine: Engine) => {
+  const [{ loadSlim }] = await Promise.all([import("@tsparticles/slim")]);
+
+  await loadSlim(engine);
+});
+
+export default component$(() => {
+  const loaded = useSignal(false);
+
+  return (
+    <Particles
+      id="tsparticles"
+      options={{
+        fullScreen: {
+          zIndex: -1,
+        },
+        particles: {
+          number: { value: 80 },
+          links: { enable: true },
+          move: { enable: true },
+        },
+      }}
+      loaded={async () => {
+        loaded.value = true;
+      }}
+    />
+  );
+});
+```
+
+## How init works
+
+- `initParticlesEngine` should be called once per app lifecycle.
+- All `<Particles />` instances wait for init completion before loading.
+- You can choose what to load inside init (`@tsparticles/slim`, `tsparticles`, or custom plugins).
+
+## Props
+
+| Prop            | Type     | Definition                                                                                                                                  |
+| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| id              | string   | The id of the element.                                                                                                                      |
+| width           | string   | The width of the canvas.                                                                                                                    |
+| height          | string   | The height of the canvas.                                                                                                                   |
+| options         | object   | The options of the particles instance.                                                                                                      |
+| url             | string   | The remote options url, called using an AJAX request                                                                                        |
+| style           | object   | The style of the canvas element.                                                                                                            |
+| class           | string   | The class name of the canvas wrapper.                                                                                                       |
+| canvasClassName | string   | The class name of the canvas.                                                                                                               |
+| container       | object   | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html)                                        |
+| loaded          | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
+
+Find your parameters configuration [here](https://particles.js.org).
+
+## Demos
+
+The demo website is [here](https://particles.js.org).
+
+There is also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage).

package/lib-types/components/particles/IParticlesProps.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ClassList, NoSerialize, QRL, Signal } from "@builder.io/qwik";
+import type { Container, Engine, ISourceOptions } from "@tsparticles/engine";
+export interface IParticlesProps {
+    id?: string;
+    width?: number | string;
+    height?: number | string;
+    options?: ISourceOptions;
+    url?: string;
+    params?: ISourceOptions;
+    style?: CSSProperties;
+    class?: ClassList | Signal<ClassList>;
+    canvasClassName?: ClassList | Signal<ClassList>;
+    container?: Signal<NoSerialize<Container | undefined>>;
+    init?: QRL<(engine: Engine) => Promise<void>>;
+    loaded?: QRL<(container?: Container) => Promise<void>>;
+}

package/lib-types/components/particles/index.d.ts

@@ -0,0 +1,6 @@
+import type { IParticlesProps } from "./IParticlesProps";
+import Particles from "./particles";
+export type { IParticlesProps };
+export type ParticlesProps = IParticlesProps;
+export default Particles;
+export { Particles };

package/lib-types/components/particles/particles.d.ts

@@ -0,0 +1,6 @@
+import type { IParticlesProps } from "./IParticlesProps";
+/**
+ * @param (props:IParticlesProps) Particles component properties
+ */
+declare const Particles: import("@builder.io/qwik").Component<IParticlesProps>;
+export default Particles;

package/lib-types/entry.dev.d.ts

@@ -0,0 +1,2 @@
+import { type RenderOptions } from "@builder.io/qwik";
+export default function (opts: RenderOptions): Promise<import("@builder.io/qwik").RenderResult>;

package/lib-types/entry.ssr.d.ts

@@ -0,0 +1,14 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { type RenderToStreamOptions } from "@builder.io/qwik/server";
+export default function (opts: RenderToStreamOptions): Promise<import("@builder.io/qwik/server").RenderToStreamResult>;

package/lib-types/index.d.ts

@@ -0,0 +1 @@
+export { Particles } from "./components/particles";

package/lib-types/root.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@builder.io/qwik/jsx-runtime").JSX.Element;
+export default _default;

package/lib-types/src/components/particles/IParticlesProps.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ClassList, NoSerialize, QRL, Signal } from "@builder.io/qwik";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+export interface IParticlesProps {
+    id?: string;
+    width?: number | string;
+    height?: number | string;
+    options?: ISourceOptions;
+    url?: string;
+    params?: ISourceOptions;
+    style?: CSSProperties;
+    class?: ClassList | Signal<ClassList>;
+    canvasClassName?: ClassList | Signal<ClassList>;
+    container?: Signal<NoSerialize<Container | undefined>>;
+    loaded?: QRL<(container?: Container) => Promise<void>>;
+}

package/lib-types/src/components/particles/index.d.ts

@@ -0,0 +1,8 @@
+import type { IParticlesProps } from "./IParticlesProps";
+import { initParticlesEngine, type ParticlesPluginRegistrar } from "./initParticlesEngine";
+import Particles from "./particles";
+export type { IParticlesProps };
+export type ParticlesProps = IParticlesProps;
+export type { ParticlesPluginRegistrar };
+export default Particles;
+export { Particles, initParticlesEngine };

package/lib-types/src/components/particles/initParticlesEngine.d.ts

@@ -0,0 +1,5 @@
+import type { Engine } from "@tsparticles/engine";
+export type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;
+export declare function initParticlesEngine(init?: ParticlesPluginRegistrar): Promise<void>;
+export declare function isParticlesEngineInitialized(): boolean;
+export declare function waitForParticlesEngineInitialization(): Promise<void>;

package/lib-types/src/components/particles/particles.d.ts

@@ -0,0 +1,6 @@
+import type { IParticlesProps } from "./IParticlesProps";
+/**
+ * @param (props:IParticlesProps) Particles component properties
+ */
+declare const Particles: import("@builder.io/qwik").Component<IParticlesProps>;
+export default Particles;

package/lib-types/src/entry.dev.d.ts

@@ -0,0 +1,2 @@
+import { type RenderOptions } from "@builder.io/qwik";
+export default function (opts: RenderOptions): Promise<import("@builder.io/qwik").RenderResult>;

package/lib-types/src/entry.ssr.d.ts

@@ -0,0 +1,14 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { type RenderToStreamOptions } from "@builder.io/qwik/server";
+export default function (opts: RenderToStreamOptions): Promise<import("@builder.io/qwik/server").RenderToStreamResult>;

package/lib-types/src/index.d.ts

@@ -0,0 +1 @@
+export { Particles, initParticlesEngine, type IParticlesProps, type ParticlesPluginRegistrar, } from "./components/particles";

package/lib-types/src/root.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@builder.io/qwik").JSXOutput;
+export default _default;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@tsparticles/qwik",
+  "version": "4.0.0-beta.12",
+  "description": "Official tsParticles Qwik 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, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, React, Riot.js, Solid.js, Inferno.",
+  "main": "./lib/index.qwik.mjs",
+  "qwik": "./lib/index.qwik.mjs",
+  "types": "./lib-types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.qwik.mjs",
+      "require": "./lib/index.qwik.cjs",
+      "types": "./lib-types/index.d.ts"
+    }
+  },
+  "files": [
+    "lib",
+    "lib-types"
+  ],
+  "engines": {
+    "node": ">=15.0.0"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "echo build",
+    "build.lib": "vite build --mode lib",
+    "build.types": "tsc --emitDeclarationOnly",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "np",
+    "start": "vite --open --mode ssr",
+    "qwik": "qwik"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^4.0.0-beta.12"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "1.19.2",
+    "@types/eslint": "9.6.1",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "8.58.2",
+    "@typescript-eslint/parser": "8.58.2",
+    "eslint": "10.2.0",
+    "eslint-plugin-qwik": "latest",
+    "np": "11.0.3",
+    "prettier": "3.8.2",
+    "tsparticles": "^4.0.0-beta.12",
+    "typescript": "6.0.2",
+    "undici": "8.1.0",
+    "vite": "8.0.8",
+    "vite-tsconfig-paths": "6.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "ebd73f94ae2391c9068de098f2856e1efb26254c"
+}