@tsparticles/svelte 4.0.5 → 4.1.0

package/package.json

@@ -1,121 +1,80 @@
 {
-	"name": "@tsparticles/svelte",
-	"version": "4.0.5",
-	"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/tsparticles.git",
-		"directory": "wrappers/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",
-		"build:ci": "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.2.17"
-	},
-	"dependencies": {
-		"@tsparticles/engine": "^4.0.5"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.57.1",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@types/eslint": "^9.6.1",
-		"@typescript-eslint/eslint-plugin": "^8.58.2",
-		"@typescript-eslint/parser": "^8.58.2",
-		"eslint": "^10.2.0",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.17.0",
-		"prettier": "^3.8.2",
-		"prettier-plugin-svelte": "^3.5.1",
-		"publint": "^0.3.18",
-		"svelte": "^5.55.3",
-		"svelte-check": "^4.4.6",
-		"tslib": "^2.8.1",
-		"typescript": "^6.0.2",
-		"vite": "^8.0.8"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"gitHead": "4d8b281f8097386714300e39b0004b903f9df87b"
+  "name": "@tsparticles/svelte",
+  "version": "4.1.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/tsparticles.git",
+    "directory": "wrappers/svelte"
+  },
+  "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"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "type": "module",
+  "types": "/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.2.17",
+    "@tsparticles/engine": "4.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/README.md

@@ -1,206 +0,0 @@
-[![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}"
-/>
-
-<!-- or -->
-
-<Particles
-	id="tsparticles"
-	class="put your classes here"
-	style=""
-	url="{particlesUrl}"
-	on:particlesLoaded="{onParticlesLoaded}"
-/>
-```
-
-### 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}"
-/>
-
-<!-- or -->
-
-<svelte:component
-	this="{ParticlesComponent}"
-	id="tsparticles"
-	class="put your classes here"
-	style=""
-	url="{particlesUrl}"
-	on:particlesLoaded="{onParticlesLoaded}"
-/>
-```
-
-### 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>