You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+18-14Lines changed: 18 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,8 @@ yarn add svelte-particles
27
27
```html
28
28
<script>
29
29
importParticlesfrom"svelte-particles";
30
-
import { loadFull } from"tsparticles";
30
+
//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
32
32
33
let particlesUrl ="http://foo.bar/particles.json"; // placeholder, replace it with a real url
33
34
@@ -44,8 +45,8 @@ yarn add svelte-particles
44
45
enable:true,
45
46
},
46
47
number: {
47
-
value:100
48
-
}
48
+
value:100,
49
+
},
49
50
},
50
51
};
51
52
@@ -60,7 +61,8 @@ yarn add svelte-particles
60
61
// you can use main to customize the tsParticles instance adding presets or custom shapes
61
62
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
62
63
// starting from v2 you can add only the features you need reducing the bundle size
63
-
awaitloadFull(engine);
64
+
//await loadFull(engine);
65
+
awaitloadSlim(engine);
64
66
};
65
67
</script>
66
68
@@ -95,7 +97,8 @@ You can see a sample below:
95
97
```html
96
98
<script>
97
99
import { onMount } from"svelte";
98
-
import { loadFull } from"tsparticles";
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.
99
102
100
103
let ParticlesComponent;
101
104
@@ -132,11 +135,12 @@ You can see a sample below:
132
135
// (from the core library) methods like play, pause, refresh, start, stop
133
136
};
134
137
135
-
let particlesInit =asyncmain=> {
138
+
let particlesInit =asyncengine=> {
136
139
// you can use main to customize the tsParticles instance adding presets or custom shapes
137
140
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
138
141
// starting from v2 you can add only the features you need reducing the bundle size
139
-
awaitloadFull(main);
142
+
//await loadFull(main);
143
+
awaitloadSlim(engine);
140
144
};
141
145
</script>
142
146
@@ -178,17 +182,17 @@ After that, everything should work as expected.
178
182
179
183
### SvelteKit
180
184
181
-
If you have issues with SvelteKit, like you *Cannot use import statement outside a module*, change your `vite.config.ts` file like this:
185
+
If you have issues with SvelteKit, like you _Cannot use import statement outside a module_, change your `vite.config.ts` file like this:
182
186
183
187
```ts
184
-
import { sveltekit } from'@sveltejs/kit/vite';
185
-
import { defineConfig } from'vite';
188
+
import { sveltekit } from"@sveltejs/kit/vite";
189
+
import { defineConfig } from"vite";
186
190
187
191
exportdefaultdefineConfig({
188
-
plugins: [sveltekit()],
189
-
ssr: {
190
-
noExternal: ['tsparticles', 'tsparticles-engine', 'svelte-particles']// add all tsparticles libraries here, they're not made for SSR, they're client only
191
-
}
192
+
plugins: [sveltekit()],
193
+
ssr: {
194
+
noExternal: ["tsparticles", "tsparticles-slim", "tsparticles-engine", "svelte-particles"],// add all tsparticles libraries here, they're not made for SSR, they're client only
Copy file name to clipboardExpand all lines: components/svelte/README.md
+10-6Lines changed: 10 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,8 @@ yarn add svelte-particles
27
27
```html
28
28
<script>
29
29
importParticlesfrom"svelte-particles";
30
-
import { loadFull } from"tsparticles";
30
+
//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
32
32
33
let particlesUrl ="http://foo.bar/particles.json"; // placeholder, replace it with a real url
33
34
@@ -60,7 +61,8 @@ yarn add svelte-particles
60
61
// you can use main to customize the tsParticles instance adding presets or custom shapes
61
62
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
62
63
// starting from v2 you can add only the features you need reducing the bundle size
63
-
awaitloadFull(engine);
64
+
//await loadFull(engine);
65
+
awaitloadSlim(engine);
64
66
};
65
67
</script>
66
68
@@ -95,7 +97,8 @@ You can see a sample below:
95
97
```html
96
98
<script>
97
99
import { onMount } from"svelte";
98
-
import { loadFull } from"tsparticles";
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.
99
102
100
103
let ParticlesComponent;
101
104
@@ -132,11 +135,12 @@ You can see a sample below:
132
135
// (from the core library) methods like play, pause, refresh, start, stop
133
136
};
134
137
135
-
let particlesInit =asyncmain=> {
138
+
let particlesInit =asyncengine=> {
136
139
// you can use main to customize the tsParticles instance adding presets or custom shapes
137
140
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
138
141
// starting from v2 you can add only the features you need reducing the bundle size
139
-
awaitloadFull(main);
142
+
//await loadFull(main);
143
+
awaitloadSlim(engine);
140
144
};
141
145
</script>
142
146
@@ -187,7 +191,7 @@ import { defineConfig } from "vite";
187
191
exportdefaultdefineConfig({
188
192
plugins: [sveltekit()],
189
193
ssr: {
190
-
noExternal: ["tsparticles", "tsparticles-engine", "svelte-particles"], // add all tsparticles libraries here, they're not made for SSR, they're client only
194
+
noExternal: ["tsparticles", "tsparticles-slim", "tsparticles-engine", "svelte-particles"], // add all tsparticles libraries here, they're not made for SSR, they're client only
0 commit comments