Merge pull request #42 from tsparticles/dev

3.0.0

Author: matteobruni

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/tsparticles/svelte/compare/v2.12.0...v3.0.0) (2023-12-24)
+
+
+### Features
+
+* migrated to v3, used new init structure ([bee139b](https://github.com/tsparticles/svelte/commit/bee139bd3466725681212a5d662060cd2f1b3dc2))
+* updated to v3, needs new initialization function to replace particlesInit ([404d847](https://github.com/tsparticles/svelte/commit/404d847673d7d6d830b8ecf9433e4bd468a475fd))
+
+
+
+
+
 # [2.12.0](https://github.com/tsparticles/svelte/compare/v2.11.0...v2.12.0) (2023-08-04)
 
 **Note:** Version bump only for package svelte-particles-workspace

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/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/tsparticles/svelte/compare/v2.12.0...v3.0.0) (2023-12-24)
+
+
+### Features
+
+* migrated to v3, used new init structure ([bee139b](https://github.com/tsparticles/svelte/commit/bee139bd3466725681212a5d662060cd2f1b3dc2))
+* updated to v3, needs new initialization function to replace particlesInit ([404d847](https://github.com/tsparticles/svelte/commit/404d847673d7d6d830b8ecf9433e4bd468a475fd))
+
+
+
+
+
 # [2.12.0](https://github.com/tsparticles/svelte/compare/v2.11.0...v2.12.0) (2023-08-04)
 
 **Note:** Version bump only for package svelte-kit-demo

apps/svelte-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-kit-demo",
-  "version": "2.12.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -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",
+    "@tsparticles/engine": "^3.0.2",
+    "@tsparticles/svelte": "workspace:^",
+    "@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",
+    "svelte-preprocess": "^5.1.3",
+    "tslib": "^2.6.2",
+    "tsparticles": "^3.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   },
   "type": "module"
 }

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

@@ -1,94 +1,99 @@
-<script>
-	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 { loadFull } from "tsparticles";
+<script lang="ts">
+    import Counter from './Counter.svelte';
+    import welcome from '$lib/images/svelte-welcome.webp';
+    import welcome_fallback from '$lib/images/svelte-welcome.png';
+    import { particlesInit } from "@tsparticles/svelte";
+    import { loadFull } from "tsparticles";
+    import { type Engine } from "@tsparticles/engine";
+    import { browser } from '$app/environment';
 
-	let particlesConfig = {
-		particles: {
-			color: {
-				value: "#000",
-			},
-			links: {
-				enable: true,
-				color: "#000",
-			},
-			number: {
-				value: 80
-			},
-			move: {
-				enable: true,
-			},
-		},
-	};
+    let particlesConfig = {
+        particles: {
+            color: {
+                value: "#000",
+            },
+            links: {
+                enable: true,
+                color: "#000",
+            },
+            number: {
+                value: 80
+            },
+            move: {
+                enable: true,
+            },
+        },
+    };
 
-	let particlesInit = async engine => {
-		// 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);
-	};
+    void particlesInit(async (engine: Engine) => {
+        await loadFull(engine);
+    });
+
+    const ParticlesConstructor = browser ?
+        import('@tsparticles/svelte').then((module) => module.default) :
+        new Promise(() => {
+        });
 </script>
 
 <svelte:head>
-	<title>Home</title>
-	<meta name="description" content="Svelte demo app" />
+    <title>Home</title>
+    <meta name="description" content="Svelte demo app"/>
 </svelte:head>
 
 <section>
-	<h1>
+    <h1>
 		<span class="welcome">
 			<picture>
-				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
+				<source srcset={welcome} type="image/webp"/>
+				<img src={welcome_fallback} alt="Welcome"/>
 			</picture>
 		</span>
 
-		to your new<br />SvelteKit app
-	</h1>
+        to your new<br/>SvelteKit app
+    </h1>
 
-	<h2>
-		try editing <strong>src/routes/+page.svelte</strong>
-	</h2>
+    <h2>
+        try editing <strong>src/routes/+page.svelte</strong>
+    </h2>
 
-	<Counter />
+    <Counter/>
 
-	<Particles
-		id="tsparticles"
-		class="foo bar"
-		style=""
-		options="{particlesConfig}"
-		particlesInit="{particlesInit}"
-	/>
+    {#await ParticlesConstructor}
+        <p>Loading...</p>
+    {:then component}
+        <svelte:component this={component} id="tsparticles"
+                          options="{particlesConfig}"/>
+    {:catch error}
+        <p>Something went wrong: {error.message}</p>
+    {/await}
 </section>
 
 <style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 0.6;
-	}
+    section {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 0.6;
+    }
 
-	h1 {
-		width: 100%;
-	}
+    h1 {
+        width: 100%;
+    }
 
-	.welcome {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
+    .welcome {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding: 0 0 calc(100% * 495 / 2048) 0;
+    }
 
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
+    .welcome img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        display: block;
+    }
 </style>

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>