Skip to content

Commit bee139b

Browse files
matteobrunimatteobruni
committed
feat: migrated to v3, used new init structure
1 parent 404d847 commit bee139b

31 files changed

+740
-1058
lines changed

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

Lines changed: 76 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,99 @@
1-
<script>
2-
import Counter from './Counter.svelte';
3-
import welcome from '$lib/images/svelte-welcome.webp';
4-
import welcome_fallback from '$lib/images/svelte-welcome.png';
5-
import Particles from "@tsparticles/svelte";
6-
import { loadFull } from "tsparticles";
1+
<script lang="ts">
2+
import Counter from './Counter.svelte';
3+
import welcome from '$lib/images/svelte-welcome.webp';
4+
import welcome_fallback from '$lib/images/svelte-welcome.png';
5+
import { particlesInit } from "@tsparticles/svelte";
6+
import { loadFull } from "tsparticles";
7+
import { type Engine } from "@tsparticles/engine";
8+
import { browser } from '$app/environment';
79
8-
let particlesConfig = {
9-
particles: {
10-
color: {
11-
value: "#000",
12-
},
13-
links: {
14-
enable: true,
15-
color: "#000",
16-
},
17-
number: {
18-
value: 80
19-
},
20-
move: {
21-
enable: true,
22-
},
23-
},
24-
};
10+
let particlesConfig = {
11+
particles: {
12+
color: {
13+
value: "#000",
14+
},
15+
links: {
16+
enable: true,
17+
color: "#000",
18+
},
19+
number: {
20+
value: 80
21+
},
22+
move: {
23+
enable: true,
24+
},
25+
},
26+
};
2527
26-
let particlesInit = async engine => {
27-
// you can use main to customize the tsParticles instance adding presets or custom shapes
28-
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
29-
// starting from v2 you can add only the features you need reducing the bundle size
30-
await loadFull(engine);
31-
};
28+
void particlesInit(async (engine: Engine) => {
29+
await loadFull(engine);
30+
});
31+
32+
const ParticlesConstructor = browser ?
33+
import('@tsparticles/svelte').then((module) => module.default) :
34+
new Promise(() => {
35+
});
3236
</script>
3337

3438
<svelte:head>
35-
<title>Home</title>
36-
<meta name="description" content="Svelte demo app" />
39+
<title>Home</title>
40+
<meta name="description" content="Svelte demo app"/>
3741
</svelte:head>
3842

3943
<section>
40-
<h1>
44+
<h1>
4145
<span class="welcome">
4246
<picture>
43-
<source srcset={welcome} type="image/webp" />
44-
<img src={welcome_fallback} alt="Welcome" />
47+
<source srcset={welcome} type="image/webp"/>
48+
<img src={welcome_fallback} alt="Welcome"/>
4549
</picture>
4650
</span>
4751

48-
to your new<br />SvelteKit app
49-
</h1>
52+
to your new<br/>SvelteKit app
53+
</h1>
5054

51-
<h2>
52-
try editing <strong>src/routes/+page.svelte</strong>
53-
</h2>
55+
<h2>
56+
try editing <strong>src/routes/+page.svelte</strong>
57+
</h2>
5458

55-
<Counter />
59+
<Counter/>
5660

57-
<Particles
58-
id="tsparticles"
59-
class="foo bar"
60-
style=""
61-
options="{particlesConfig}"
62-
particlesInit="{particlesInit}"
63-
/>
61+
{#await ParticlesConstructor}
62+
<p>Loading...</p>
63+
{:then component}
64+
<svelte:component this={component} id="tsparticles"
65+
options="{particlesConfig}"/>
66+
{:catch error}
67+
<p>Something went wrong: {error.message}</p>
68+
{/await}
6469
</section>
6570

6671
<style>
67-
section {
68-
display: flex;
69-
flex-direction: column;
70-
justify-content: center;
71-
align-items: center;
72-
flex: 0.6;
73-
}
72+
section {
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: center;
76+
align-items: center;
77+
flex: 0.6;
78+
}
7479
75-
h1 {
76-
width: 100%;
77-
}
80+
h1 {
81+
width: 100%;
82+
}
7883
79-
.welcome {
80-
display: block;
81-
position: relative;
82-
width: 100%;
83-
height: 0;
84-
padding: 0 0 calc(100% * 495 / 2048) 0;
85-
}
84+
.welcome {
85+
display: block;
86+
position: relative;
87+
width: 100%;
88+
height: 0;
89+
padding: 0 0 calc(100% * 495 / 2048) 0;
90+
}
8691
87-
.welcome img {
88-
position: absolute;
89-
width: 100%;
90-
height: 100%;
91-
top: 0;
92-
display: block;
93-
}
92+
.welcome img {
93+
position: absolute;
94+
width: 100%;
95+
height: 100%;
96+
top: 0;
97+
display: block;
98+
}
9499
</style>

‎apps/svelte/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"dependencies": {
3030
"sirv-cli": "^2.0.2",
3131
"@tsparticles/svelte": "workspace:^",
32+
"@tsparticles/engine": "^3.0.2",
3233
"tsparticles": "^3.0.2",
3334
"@tsparticles/configs": "^3.0.2"
3435
}

‎apps/svelte/src/App.svelte‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
<script lang="ts">
2-
import Particles from "@tsparticles/svelte";
3-
import { loadFull } from "tsparticles";
42
import configs from "@tsparticles/configs";
3+
import type { Engine } from "@tsparticles/engine";
4+
import Particles, { particlesInit } from "@tsparticles/svelte";
5+
import { loadFull } from "tsparticles";
6+
import type { EventHandler } from "svelte/elements";
7+
8+
void particlesInit(async (engine: Engine) => {
9+
await loadFull(engine);
10+
});
511
612
export let name: string;
713
814
let particlesConfig = configs.basic;
915
1016
let ref = {};
1117
12-
let handleParticlesLoaded = (e) => {
18+
let handleParticlesLoaded = (e: EventHandler<Container | undefined>) => {
1319
const container = e.detail.particles;
1420
1521
console.log(container);
1622
1723
// use container to call its methods
1824
};
19-
20-
let particlesInit = async (main) => {
21-
await loadFull(main);
22-
};
2325
</script>
2426

2527
<main>
2628
<h1>Hello {name}!</h1>
2729
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
28-
<Particles id="tsparticles" class="my-class" options={particlesConfig} on:particlesLoaded={handleParticlesLoaded}
29-
particlesInit={particlesInit} />
30+
<Particles id="tsparticles" class="my-class" options={particlesConfig} on:particlesLoaded={handleParticlesLoaded}/>
3031
</main>
3132

3233
<style>

‎apps/svelte/src/main.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import App from './App.svelte';
22

33
const app = new App({
4-
target: document.body,
5-
props: {
6-
name: 'world'
7-
}
4+
target: document.body,
5+
props: {
6+
name: 'world'
7+
}
88
});
99

10-
export default app;
10+
export default app;

‎components/svelte/.eslintignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎components/svelte/.eslintrc.cjs‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/** @type { import("eslint").Linter.Config } */
2+
module.exports = {
3+
root: true,
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:svelte/recommended',
8+
'prettier'
9+
],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['@typescript-eslint'],
12+
parserOptions: {
13+
sourceType: 'module',
14+
ecmaVersion: 2020,
15+
extraFileExtensions: ['.svelte']
16+
},
17+
env: {
18+
browser: true,
19+
es2017: true,
20+
node: true
21+
},
22+
overrides: [
23+
{
24+
files: ['*.svelte'],
25+
parser: 'svelte-eslint-parser',
26+
parserOptions: {
27+
parser: '@typescript-eslint/parser'
28+
}
29+
}
30+
]
31+
};

‎components/svelte/.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/dist
5+
/.svelte-kit
6+
/package
7+
.env
8+
.env.*
9+
!.env.example
10+
vite.config.js.timestamp-*
11+
vite.config.ts.timestamp-*

‎components/svelte/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎components/svelte/.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Ignore files for PNPM, NPM and YARN
2+
pnpm-lock.yaml
3+
package-lock.json
4+
yarn.lock

‎components/svelte/.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
8+
}

0 commit comments

Comments
 (0)