Skip to content

Commit a371199

Browse files
matteobrunimatteobruni
committed
build: updated readme
1 parent 5c98e58 commit a371199

File tree

4 files changed

+211
-217
lines changed

4 files changed

+211
-217
lines changed

‎README.md‎

Lines changed: 91 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -26,64 +26,63 @@ yarn add @tsparticles/svelte
2626

2727
```html
2828
<script>
29-
import Particles from "@tsparticles/svelte";
29+
import Particles, { particlesInit } from '@tsparticles/svelte';
3030
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
31-
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
31+
import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
3232
33-
let particlesUrl = "http://foo.bar/particles.json"; // placeholder, replace it with a real url
33+
let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url
3434
3535
let particlesConfig = {
3636
particles: {
3737
color: {
38-
value: "#000",
38+
value: '#000'
3939
},
4040
links: {
4141
enable: true,
42-
color: "#000",
42+
color: '#000'
4343
},
4444
move: {
45-
enable: true,
45+
enable: true
4646
},
4747
number: {
48-
value: 100,
49-
},
50-
},
48+
value: 100
49+
}
50+
}
5151
};
5252
53-
let onParticlesLoaded = event => {
53+
let onParticlesLoaded = (event) => {
5454
const particlesContainer = event.detail.particles;
5555
5656
// you can use particlesContainer to call all the Container class
5757
// (from the core library) methods like play, pause, refresh, start, stop
5858
};
5959
60-
let particlesInit = async engine => {
60+
void particlesInit(async (engine) => {
61+
// call this once per app
6162
// you can use main to customize the tsParticles instance adding presets or custom shapes
6263
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
6364
// starting from v2 you can add only the features you need reducing the bundle size
6465
//await loadFull(engine);
6566
await loadSlim(engine);
66-
};
67+
});
6768
</script>
6869

6970
<Particles
70-
id="tsparticles"
71-
class="foo bar"
72-
style=""
73-
options="{particlesConfig}"
74-
on:particlesLoaded="{onParticlesLoaded}"
75-
particlesInit="{particlesInit}"
71+
id="tsparticles"
72+
class="put your classes here"
73+
style=""
74+
options="{particlesConfig}"
75+
on:particlesLoaded="{onParticlesLoaded}"
7676
/>
7777

7878
<!-- or -->
7979

8080
<Particles
81-
id="tsparticles"
82-
class="foo bar"
83-
style=""
84-
url="{particlesUrl}"
85-
on:particlesLoaded="{onParticlesLoaded}"
86-
particlesInit="{particlesInit}"
81+
id="tsparticles"
82+
class="put your classes here"
83+
style=""
84+
url="{particlesUrl}"
85+
on:particlesLoaded="{onParticlesLoaded}"
8786
/>
8887
```
8988

@@ -96,74 +95,74 @@ You can see a sample below:
9695

9796
```html
9897
<script>
99-
import { onMount } from "svelte";
100-
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
101-
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
102-
103-
let ParticlesComponent;
104-
105-
onMount(async () => {
106-
const module = await import("@tsparticles/svelte");
107-
108-
ParticlesComponent = module.default;
109-
});
110-
111-
let particlesUrl = "http://foo.bar/particles.json"; // placeholder, replace it with a real url
112-
113-
let particlesConfig = {
114-
particles: {
115-
color: {
116-
value: "#000",
117-
},
118-
links: {
119-
enable: true,
120-
color: "#000",
121-
},
122-
move: {
123-
enable: true,
124-
},
125-
number: {
126-
value: 100,
127-
},
128-
},
129-
};
130-
131-
let onParticlesLoaded = event => {
132-
const particlesContainer = event.detail.particles;
133-
134-
// you can use particlesContainer to call all the Container class
135-
// (from the core library) methods like play, pause, refresh, start, stop
136-
};
137-
138-
let particlesInit = async engine => {
139-
// you can use main to customize the tsParticles instance adding presets or custom shapes
140-
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
141-
// starting from v2 you can add only the features you need reducing the bundle size
142-
//await loadFull(main);
143-
await loadSlim(engine);
144-
};
98+
import { particlesInit } from '@tsparticles/svelte';
99+
import { onMount } from 'svelte';
100+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
101+
import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
102+
103+
let ParticlesComponent;
104+
105+
onMount(async () => {
106+
const module = await import('@tsparticles/svelte');
107+
108+
ParticlesComponent = module.default;
109+
});
110+
111+
let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url
112+
113+
let particlesConfig = {
114+
particles: {
115+
color: {
116+
value: '#000'
117+
},
118+
links: {
119+
enable: true,
120+
color: '#000'
121+
},
122+
move: {
123+
enable: true
124+
},
125+
number: {
126+
value: 100
127+
}
128+
}
129+
};
130+
131+
let onParticlesLoaded = (event) => {
132+
const particlesContainer = event.detail.particles;
133+
134+
// you can use particlesContainer to call all the Container class
135+
// (from the core library) methods like play, pause, refresh, start, stop
136+
};
137+
138+
void particlesInit(async (engine) => {
139+
// call this once per app
140+
// you can use main to customize the tsParticles instance adding presets or custom shapes
141+
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
142+
// starting from v2 you can add only the features you need reducing the bundle size
143+
//await loadFull(main);
144+
await loadSlim(engine);
145+
});
145146
</script>
146147

147148
<svelte:component
148-
this="{ParticlesComponent}"
149-
id="tsparticles"
150-
class="foo bar"
151-
style=""
152-
options="{particlesConfig}"
153-
on:particlesLoaded="{onParticlesLoaded}"
154-
particlesInit="{particlesInit}"
149+
this="{ParticlesComponent}"
150+
id="tsparticles"
151+
class="put your classes here"
152+
style=""
153+
options="{particlesConfig}"
154+
on:particlesLoaded="{onParticlesLoaded}"
155155
/>
156156

157157
<!-- or -->
158158

159159
<svelte:component
160-
this="{ParticlesComponent}"
161-
id="tsparticles"
162-
class="foo bar"
163-
style=""
164-
url="{particlesUrl}"
165-
on:particlesLoaded="{onParticlesLoaded}"
166-
particlesInit="{particlesInit}"
160+
this="{ParticlesComponent}"
161+
id="tsparticles"
162+
class="put your classes here"
163+
style=""
164+
url="{particlesUrl}"
165+
on:particlesLoaded="{onParticlesLoaded}"
167166
/>
168167
```
169168

@@ -173,10 +172,10 @@ A user reported me a TypeScript error (#3963), and that's because this Svelte co
173172

174173
If someone is experiencing the same error, please follow these steps:
175174

176-
- install these packages: `typescript`, `svelte-preprocess`.
177-
- 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>)
178-
- 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>)
179-
- 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>)
175+
- install these packages: `typescript`, `svelte-preprocess`.
176+
- 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>)
177+
- 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>)
178+
- 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>)
180179

181180
After that, everything should work as expected.
182181

@@ -185,14 +184,14 @@ After that, everything should work as expected.
185184
If you have issues with SvelteKit, like you _Cannot use import statement outside a module_, change your `vite.config.ts` file like this:
186185

187186
```ts
188-
import { sveltekit } from "@sveltejs/kit/vite";
189-
import { defineConfig } from "vite";
187+
import { sveltekit } from '@sveltejs/kit/vite';
188+
import { defineConfig } from 'vite';
190189

191190
export default defineConfig({
192191
plugins: [sveltekit()],
193192
ssr: {
194-
noExternal: ["tsparticles", "@tsparticles/slim", "@tsparticles/engine", "@tsparticles/svelte"], // add all tsparticles libraries here, they're not made for SSR, they're client only
195-
},
193+
noExternal: ['tsparticles', '@tsparticles/slim', '@tsparticles/engine', '@tsparticles/svelte'] // add all tsparticles libraries here, they're not made for SSR, they're client only
194+
}
196195
});
197196
```
198197

‎components/svelte/CHANGELOG.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
55

66
# [3.0.0](https://github.com/tsparticles/svelte/compare/v2.12.0...v3.0.0) (2023-12-24)
77

8-
98
### Features
109

11-
* migrated to v3, used new init structure ([bee139b](https://github.com/tsparticles/svelte/commit/bee139bd3466725681212a5d662060cd2f1b3dc2))
12-
* updated to v3, needs new initialization function to replace particlesInit ([404d847](https://github.com/tsparticles/svelte/commit/404d847673d7d6d830b8ecf9433e4bd468a475fd))
10+
- migrated to v3, used new init structure ([bee139b](https://github.com/tsparticles/svelte/commit/bee139bd3466725681212a5d662060cd2f1b3dc2))
11+
- updated to v3, needs new initialization function to replace particlesInit ([404d847](https://github.com/tsparticles/svelte/commit/404d847673d7d6d830b8ecf9433e4bd468a475fd))

‎components/svelte/README.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ yarn add @tsparticles/svelte
7373
style=""
7474
options="{particlesConfig}"
7575
on:particlesLoaded="{onParticlesLoaded}"
76-
particlesInit="{particlesInit}"
7776
/>
7877

7978
<!-- or -->
@@ -84,7 +83,6 @@ yarn add @tsparticles/svelte
8483
style=""
8584
url="{particlesUrl}"
8685
on:particlesLoaded="{onParticlesLoaded}"
87-
particlesInit="{particlesInit}"
8886
/>
8987
```
9088

@@ -154,7 +152,6 @@ You can see a sample below:
154152
style=""
155153
options="{particlesConfig}"
156154
on:particlesLoaded="{onParticlesLoaded}"
157-
particlesInit="{particlesInit}"
158155
/>
159156

160157
<!-- or -->
@@ -166,7 +163,6 @@ You can see a sample below:
166163
style=""
167164
url="{particlesUrl}"
168165
on:particlesLoaded="{onParticlesLoaded}"
169-
particlesInit="{particlesInit}"
170166
/>
171167
```
172168

0 commit comments

Comments
 (0)