feat: updated to v3, needs new initialization function to replace particlesInit

Author: matteobruni

README.md

@@ -1,8 +1,8 @@
 [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 
-# svelte-particles
+# @tsparticles/svelte
 
-[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![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
 
@@ -13,22 +13,22 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) SvelteJS comp
 ## Installation
 
 ```shell
-npm install svelte-particles
+npm install @tsparticles/svelte
 ```
 
 or
 
 ```shell
-yarn add svelte-particles
+yarn add @tsparticles/svelte
 ```
 
 ## Usage
 
 ```html
 <script>
-    import Particles from "svelte-particles";
+    import Particles 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.
+    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
 
@@ -98,12 +98,12 @@ You can see a sample below:
 <script>
     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.
+    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("svelte-particles");
+        const module = await import("@tsparticles/svelte");
 
         ParticlesComponent = module.default;
     });
@@ -191,7 +191,7 @@ import { defineConfig } from "vite";
 export default defineConfig({
     plugins: [sveltekit()],
     ssr: {
-        noExternal: ["tsparticles", "tsparticles-slim", "tsparticles-engine", "svelte-particles"], // add all tsparticles libraries here, they're not made for SSR, they're client only
+        noExternal: ["tsparticles", "@tsparticles/slim", "@tsparticles/engine", "@tsparticles/svelte"], // add all tsparticles libraries here, they're not made for SSR, they're client only
     },
 });
 ```

apps/svelte-kit/package.json

@@ -12,27 +12,27 @@
     "format": "prettier --plugin=\"prettier-plugin-svelte\" --write ."
   },
   "devDependencies": {
-    "@fontsource/fira-mono": "^5.0.7",
-    "@neoconfetti/svelte": "^1.0.0",
-    "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.4",
-    "@types/cookie": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte": "^2.32.4",
-    "prettier": "^3.0.1",
-    "prettier-plugin-svelte": "^3.0.3",
-    "svelte": "^4.1.2",
-    "svelte-check": "^3.4.6",
-    "svelte-particles": "^2.12.0",
-    "svelte-preprocess": "^5.0.4",
-    "tslib": "^2.6.1",
-    "tsparticles": "^2.12.0",
-    "tsparticles-engine": "^2.12.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8"
+    "@fontsource/fira-mono": "^5.0.8",
+    "@sveltejs/adapter-auto": "^3.0.1",
+    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@types/cookie": "^0.6.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",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "@tsparticles/svelte": "workspace:^",
+    "svelte-preprocess": "^5.1.3",
+    "tslib": "^2.6.2",
+    "tsparticles": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   },
   "type": "module"
 }

apps/svelte-kit/src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import Counter from './Counter.svelte';
 	import welcome from '$lib/images/svelte-welcome.webp';
 	import welcome_fallback from '$lib/images/svelte-welcome.png';
-	import Particles from "svelte-particles";
+	import Particles from "@tsparticles/svelte";
 	import { loadFull } from "tsparticles";
 
 	let particlesConfig = {

apps/svelte-kit/src/routes/Header.svelte

@@ -22,9 +22,6 @@
 			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 				<a href="/about">About</a>
 			</li>
-			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
-				<a href="/sverdle">Sverdle</a>
-			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />

apps/svelte-kit/src/routes/about/+page.svelte

@@ -18,9 +18,4 @@
 		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
 		the devtools network panel and reloading.
 	</p>
-
-	<p>
-		The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
-		using it with JavaScript disabled!
-	</p>
 </div>