@tsparticles/svelte 3.0.0

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,210 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# @tsparticles/svelte
+
+[![npm](https://img.shields.io/npm/v/@tsparticles/svelte)](https://www.npmjs.com/package/@tsparticles/svelte) [![npm downloads](https://img.shields.io/npm/dm/@tsparticles/svelte)](https://www.npmjs.com/package/@tsparticles/svelte) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+Official [tsParticles](https://github.com/matteobruni/tsparticles) SvelteJS component
+
+[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
+
+[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
+
+## Installation
+
+```shell
+npm install @tsparticles/svelte
+```
+
+or
+
+```shell
+yarn add @tsparticles/svelte
+```
+
+## Usage
+
+```html
+<script>
+	import Particles, { particlesInit } from '@tsparticles/svelte';
+	//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
+	import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
+
+	let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url
+
+	let particlesConfig = {
+		particles: {
+			color: {
+				value: '#000'
+			},
+			links: {
+				enable: true,
+				color: '#000'
+			},
+			move: {
+				enable: true
+			},
+			number: {
+				value: 100
+			}
+		}
+	};
+
+	let onParticlesLoaded = (event) => {
+		const particlesContainer = event.detail.particles;
+
+		// you can use particlesContainer to call all the Container class
+		// (from the core library) methods like play, pause, refresh, start, stop
+	};
+
+	void particlesInit(async (engine) => {
+		// call this once per app
+		// you can use main to customize the tsParticles instance adding presets or custom shapes
+		// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+		// starting from v2 you can add only the features you need reducing the bundle size
+		//await loadFull(engine);
+		await loadSlim(engine);
+	});
+</script>
+
+<Particles
+	id="tsparticles"
+	class="put your classes here"
+	style=""
+	options="{particlesConfig}"
+	on:particlesLoaded="{onParticlesLoaded}"
+	particlesInit="{particlesInit}"
+/>
+
+<!-- or -->
+
+<Particles
+	id="tsparticles"
+	class="put your classes here"
+	style=""
+	url="{particlesUrl}"
+	on:particlesLoaded="{onParticlesLoaded}"
+	particlesInit="{particlesInit}"
+/>
+```
+
+### SSR
+
+The particles component isn't built for SSR, so you have to force the component to be called client side
+with `async import`.
+
+You can see a sample below:
+
+```html
+<script>
+	import { particlesInit } from '@tsparticles/svelte';
+	import { onMount } from 'svelte';
+	//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
+	import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
+
+	let ParticlesComponent;
+
+	onMount(async () => {
+		const module = await import('@tsparticles/svelte');
+
+		ParticlesComponent = module.default;
+	});
+
+	let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url
+
+	let particlesConfig = {
+		particles: {
+			color: {
+				value: '#000'
+			},
+			links: {
+				enable: true,
+				color: '#000'
+			},
+			move: {
+				enable: true
+			},
+			number: {
+				value: 100
+			}
+		}
+	};
+
+	let onParticlesLoaded = (event) => {
+		const particlesContainer = event.detail.particles;
+
+		// you can use particlesContainer to call all the Container class
+		// (from the core library) methods like play, pause, refresh, start, stop
+	};
+
+	void particlesInit(async (engine) => {
+		// call this once per app
+		// you can use main to customize the tsParticles instance adding presets or custom shapes
+		// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+		// starting from v2 you can add only the features you need reducing the bundle size
+		//await loadFull(main);
+		await loadSlim(engine);
+	});
+</script>
+
+<svelte:component
+	this="{ParticlesComponent}"
+	id="tsparticles"
+	class="put your classes here"
+	style=""
+	options="{particlesConfig}"
+	on:particlesLoaded="{onParticlesLoaded}"
+	particlesInit="{particlesInit}"
+/>
+
+<!-- or -->
+
+<svelte:component
+	this="{ParticlesComponent}"
+	id="tsparticles"
+	class="put your classes here"
+	style=""
+	url="{particlesUrl}"
+	on:particlesLoaded="{onParticlesLoaded}"
+	particlesInit="{particlesInit}"
+/>
+```
+
+### TypeScript errors
+
+A user reported me a TypeScript error (#3963), and that's because this Svelte component is built using TypeScript.
+
+If someone is experiencing the same error, please follow these steps:
+
+- install these packages: `typescript`, `svelte-preprocess`.
+- add a `tsconfig.json` file to your project, following this sample: <https://github.com/ivanhofer/sveltekit-typescript-showcase#configure-typescript> (see this for example: <https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/tsconfig.json>)
+- import `svelte-preprocess` in your svelte configuration file, like this: `import preprocess from 'svelte-preprocess'` (see this for example: <https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L2>)
+- use the `preprocess` function in your svelte configuration file, like this: `preprocess: preprocess(),` (see this for example: <https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L9>)
+
+After that, everything should work as expected.
+
+### SvelteKit
+
+If you have issues with SvelteKit, like you _Cannot use import statement outside a module_, change your `vite.config.ts` file like this:
+
+```ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	ssr: {
+		noExternal: ['tsparticles', '@tsparticles/slim', '@tsparticles/engine', '@tsparticles/svelte'] // add all tsparticles libraries here, they're not made for SSR, they're client only
+	}
+});
+```
+
+## Demos
+
+The demo website is [here](https://particles.js.org)
+
+<https://particles.js.org>
+
+There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
+
+<https://codepen.io/collection/DPOage>

package/dist/Particles.svelte

@@ -0,0 +1,64 @@
+<svelte:options accessors={true} />
+
+<script>import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
+import { tsParticles } from "@tsparticles/engine";
+import { initialized } from "./utils.js";
+let cssClass = "";
+export { cssClass as class };
+let canStart = false;
+let style = "";
+export { style };
+export let options = {};
+export let url = "";
+export let id = "tsparticles";
+const dispatch = createEventDispatcher(), particlesLoadedEvent = "particlesLoaded";
+let oldId = id;
+function destroyOldContainer() {
+  if (oldId) {
+    const oldContainer = tsParticles.dom().find((c) => c.id.toString() === oldId);
+    if (oldContainer) {
+      oldContainer.destroy();
+    }
+  }
+}
+const unsub = initialized.subscribe((value) => {
+  canStart = value;
+  loadParticles();
+});
+onDestroy(() => {
+  unsub();
+  destroyOldContainer();
+});
+onMount(() => {
+  void loadParticles();
+});
+async function loadParticles() {
+  destroyOldContainer();
+  if (!canStart) {
+    return;
+  }
+  if (id) {
+    const cb = (container2) => {
+      dispatch(particlesLoadedEvent, {
+        particles: container2
+      });
+      oldId = id;
+    };
+    const container = await tsParticles.load({
+      id,
+      options,
+      url
+    });
+    cb(container);
+  } else {
+    dispatch(particlesLoadedEvent, {
+      particles: void 0
+    });
+  }
+}
+afterUpdate(async () => {
+  await loadParticles();
+});
+</script>
+
+<div {id} class={cssClass} {style} />

package/dist/Particles.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        style?: string | undefined;
+        options?: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined;
+        url?: string | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        particlesLoaded: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ParticlesProps = typeof __propDef.props;
+export type ParticlesEvents = typeof __propDef.events;
+export type ParticlesSlots = typeof __propDef.slots;
+export default class Particles extends SvelteComponent<ParticlesProps, ParticlesEvents, ParticlesSlots> {
+    get class(): string | undefined;
+    /**accessor*/
+    set class(_: string | undefined);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+    get options(): import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined;
+    /**accessor*/
+    set options(_: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined);
+    get url(): string | undefined;
+    /**accessor*/
+    set url(_: string | undefined);
+    get id(): string | undefined;
+    /**accessor*/
+    set id(_: string | undefined);
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { type Engine } from '@tsparticles/engine';
+import Particles from './Particles.svelte';
+declare function particlesInit(init: (engine: Engine) => Promise<void>): Promise<void>;
+export { Particles as default, particlesInit };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { tsParticles } from '@tsparticles/engine';
+import Particles from './Particles.svelte';
+import { initialized } from './utils.js';
+async function particlesInit(init) {
+    tsParticles.init();
+    await init(tsParticles);
+    initialized.set(true);
+}
+export { Particles as default, particlesInit };

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="svelte" />
+declare const initialized: import("svelte/store").Writable<boolean>;
+export { initialized };

package/dist/utils.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+const initialized = writable(false);
+export { initialized };

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@tsparticles/svelte",
+  "version": "3.0.0",
+  "description": "Official tsParticles Svelte 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, jQuery, Preact, Riot.js, Solid.js, Inferno.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/svelte.git",
+    "directory": "components/svelte"
+  },
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "pnpm run format && vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.2"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.1",
+    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/package": "^2.2.4",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@types/eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.2.7",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "gitHead": "8d902bd74e28a7f9f63e841000995774586560d6"
+}