@tsparticles/svelte 3.0.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -4
- package/dist/Particles.svelte +3 -1
- package/dist/Particles.svelte.d.ts +4 -1
- package/package.json +119 -118
package/README.md
CHANGED
|
@@ -73,7 +73,6 @@ yarn add @tsparticles/svelte
|
|
|
73
73
|
style=""
|
|
74
74
|
options="{particlesConfig}"
|
|
75
75
|
on:particlesLoaded="{onParticlesLoaded}"
|
|
76
|
-
particlesInit="{particlesInit}"
|
|
77
76
|
/>
|
|
78
77
|
|
|
79
78
|
<!-- or -->
|
|
@@ -84,7 +83,6 @@ yarn add @tsparticles/svelte
|
|
|
84
83
|
style=""
|
|
85
84
|
url="{particlesUrl}"
|
|
86
85
|
on:particlesLoaded="{onParticlesLoaded}"
|
|
87
|
-
particlesInit="{particlesInit}"
|
|
88
86
|
/>
|
|
89
87
|
```
|
|
90
88
|
|
|
@@ -154,7 +152,6 @@ You can see a sample below:
|
|
|
154
152
|
style=""
|
|
155
153
|
options="{particlesConfig}"
|
|
156
154
|
on:particlesLoaded="{onParticlesLoaded}"
|
|
157
|
-
particlesInit="{particlesInit}"
|
|
158
155
|
/>
|
|
159
156
|
|
|
160
157
|
<!-- or -->
|
|
@@ -166,7 +163,6 @@ You can see a sample below:
|
|
|
166
163
|
style=""
|
|
167
164
|
url="{particlesUrl}"
|
|
168
165
|
on:particlesLoaded="{onParticlesLoaded}"
|
|
169
|
-
particlesInit="{particlesInit}"
|
|
170
166
|
/>
|
|
171
167
|
```
|
|
172
168
|
|
package/dist/Particles.svelte
CHANGED
|
@@ -6,6 +6,7 @@ import { initialized } from "./utils.js";
|
|
|
6
6
|
let cssClass = "";
|
|
7
7
|
export { cssClass as class };
|
|
8
8
|
let canStart = false;
|
|
9
|
+
let mounted = false;
|
|
9
10
|
let style = "";
|
|
10
11
|
export { style };
|
|
11
12
|
export let options = {};
|
|
@@ -30,11 +31,12 @@ onDestroy(() => {
|
|
|
30
31
|
destroyOldContainer();
|
|
31
32
|
});
|
|
32
33
|
onMount(() => {
|
|
34
|
+
mounted = true;
|
|
33
35
|
void loadParticles();
|
|
34
36
|
});
|
|
35
37
|
async function loadParticles() {
|
|
36
38
|
destroyOldContainer();
|
|
37
|
-
if (!canStart) {
|
|
39
|
+
if (!canStart || !mounted) {
|
|
38
40
|
return;
|
|
39
41
|
}
|
|
40
42
|
if (id) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { Container } from '@tsparticles/engine';
|
|
2
3
|
declare const __propDef: {
|
|
3
4
|
props: {
|
|
4
5
|
class?: string | undefined;
|
|
@@ -8,7 +9,9 @@ declare const __propDef: {
|
|
|
8
9
|
id?: string | undefined;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
|
-
particlesLoaded: CustomEvent<
|
|
12
|
+
particlesLoaded: CustomEvent<{
|
|
13
|
+
container: Container;
|
|
14
|
+
}>;
|
|
12
15
|
} & {
|
|
13
16
|
[evt: string]: CustomEvent<any>;
|
|
14
17
|
};
|
package/package.json
CHANGED
|
@@ -1,120 +1,121 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
2
|
+
"name": "@tsparticles/svelte",
|
|
3
|
+
"version": "3.1.1",
|
|
4
|
+
"description": "Official tsParticles Svelte Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, jQuery, Preact, Riot.js, Solid.js, Inferno.",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/tsparticles/svelte.git",
|
|
8
|
+
"directory": "components/svelte"
|
|
9
|
+
},
|
|
10
|
+
"author": "Matteo Bruni <matteo.bruni@me.com>",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"front-end",
|
|
14
|
+
"frontend",
|
|
15
|
+
"tsparticles",
|
|
16
|
+
"particles.js",
|
|
17
|
+
"particlesjs",
|
|
18
|
+
"particles",
|
|
19
|
+
"particle",
|
|
20
|
+
"canvas",
|
|
21
|
+
"jsparticles",
|
|
22
|
+
"xparticles",
|
|
23
|
+
"particles-js",
|
|
24
|
+
"particles-bg",
|
|
25
|
+
"particles-bg-vue",
|
|
26
|
+
"particles-ts",
|
|
27
|
+
"particles.ts",
|
|
28
|
+
"react-particles-js",
|
|
29
|
+
"react-particles.js",
|
|
30
|
+
"react-particles",
|
|
31
|
+
"react",
|
|
32
|
+
"reactjs",
|
|
33
|
+
"vue-particles",
|
|
34
|
+
"ngx-particles",
|
|
35
|
+
"angular-particles",
|
|
36
|
+
"particleground",
|
|
37
|
+
"vue",
|
|
38
|
+
"vuejs",
|
|
39
|
+
"preact",
|
|
40
|
+
"preactjs",
|
|
41
|
+
"jquery",
|
|
42
|
+
"angularjs",
|
|
43
|
+
"angular",
|
|
44
|
+
"typescript",
|
|
45
|
+
"javascript",
|
|
46
|
+
"animation",
|
|
47
|
+
"web",
|
|
48
|
+
"html5",
|
|
49
|
+
"web-design",
|
|
50
|
+
"webdesign",
|
|
51
|
+
"css",
|
|
52
|
+
"html",
|
|
53
|
+
"css3",
|
|
54
|
+
"animated",
|
|
55
|
+
"background",
|
|
56
|
+
"confetti",
|
|
57
|
+
"canvas",
|
|
58
|
+
"fireworks",
|
|
59
|
+
"fireworks-js",
|
|
60
|
+
"confetti-js",
|
|
61
|
+
"confettijs",
|
|
62
|
+
"fireworksjs",
|
|
63
|
+
"canvas-confetti"
|
|
64
|
+
],
|
|
65
|
+
"scripts": {
|
|
66
|
+
"dev": "vite dev",
|
|
67
|
+
"build": "pnpm run format && vite build && npm run package",
|
|
68
|
+
"build:ci": "vite build && npm run package",
|
|
69
|
+
"preview": "vite preview",
|
|
70
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
71
|
+
"prepublishOnly": "npm run package",
|
|
72
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
73
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
74
|
+
"lint": "prettier --check . && eslint .",
|
|
75
|
+
"format": "prettier --write ."
|
|
76
|
+
},
|
|
77
|
+
"exports": {
|
|
78
|
+
".": {
|
|
79
|
+
"types": "./dist/index.d.ts",
|
|
80
|
+
"svelte": "./dist/index.js"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"files": [
|
|
84
|
+
"dist",
|
|
85
|
+
"!dist/**/*.test.*",
|
|
86
|
+
"!dist/**/*.spec.*"
|
|
87
|
+
],
|
|
88
|
+
"publishConfig": {
|
|
89
|
+
"access": "public"
|
|
90
|
+
},
|
|
91
|
+
"peerDependencies": {
|
|
92
|
+
"svelte": "^4.2.17"
|
|
93
|
+
},
|
|
94
|
+
"dependencies": {
|
|
95
|
+
"@tsparticles/engine": "^3.4.0"
|
|
96
|
+
},
|
|
97
|
+
"devDependencies": {
|
|
98
|
+
"@sveltejs/adapter-auto": "^3.2.1",
|
|
99
|
+
"@sveltejs/kit": "^2.5.10",
|
|
100
|
+
"@sveltejs/package": "^2.3.1",
|
|
101
|
+
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
|
102
|
+
"@types/eslint": "^8.56.10",
|
|
103
|
+
"@typescript-eslint/eslint-plugin": "^7.10.0",
|
|
104
|
+
"@typescript-eslint/parser": "^7.10.0",
|
|
105
|
+
"eslint": "^8.57.0",
|
|
106
|
+
"eslint-config-prettier": "^9.1.0",
|
|
107
|
+
"eslint-plugin-svelte": "^2.39.0",
|
|
108
|
+
"prettier": "^3.2.5",
|
|
109
|
+
"prettier-plugin-svelte": "^3.2.3",
|
|
110
|
+
"publint": "^0.2.8",
|
|
111
|
+
"svelte": "^4.2.17",
|
|
112
|
+
"svelte-check": "^3.7.1",
|
|
113
|
+
"tslib": "^2.6.2",
|
|
114
|
+
"typescript": "^5.4.5",
|
|
115
|
+
"vite": "^5.2.11"
|
|
116
|
+
},
|
|
117
|
+
"svelte": "./dist/index.js",
|
|
118
|
+
"types": "./dist/index.d.ts",
|
|
119
|
+
"type": "module",
|
|
120
|
+
"gitHead": "ea10ac19a6c8c160e5e4f90d470db04729821196"
|
|
120
121
|
}
|