@tsparticles/svelte 3.1.0 → 4.0.0-beta.12
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/dist/Particles.svelte +86 -60
- package/dist/Particles.svelte.d.ts +33 -35
- package/dist/index.d.ts +3 -3
- package/dist/index.js +2 -8
- package/dist/utils.d.ts +5 -3
- package/dist/utils.js +35 -3
- package/package.json +23 -23
package/dist/Particles.svelte
CHANGED
|
@@ -1,64 +1,90 @@
|
|
|
1
1
|
<svelte:options accessors={true} />
|
|
2
2
|
|
|
3
|
-
<script
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
let
|
|
10
|
-
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
let
|
|
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
|
-
|
|
3
|
+
<script lang="ts">
|
|
4
|
+
import { afterUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte';
|
|
5
|
+
import type { Container, ISourceOptions } from '@tsparticles/engine';
|
|
6
|
+
import { tsParticles } from '@tsparticles/engine';
|
|
7
|
+
import * as particlesEngineInitialization from './utils.js';
|
|
8
|
+
|
|
9
|
+
let cssClass = '';
|
|
10
|
+
export { cssClass as class };
|
|
11
|
+
let mounted = false;
|
|
12
|
+
|
|
13
|
+
let style = '';
|
|
14
|
+
export { style };
|
|
15
|
+
export let options: ISourceOptions = {};
|
|
16
|
+
export let url = '';
|
|
17
|
+
export let id = 'tsparticles';
|
|
18
|
+
|
|
19
|
+
const dispatch = createEventDispatcher<{
|
|
20
|
+
particlesLoaded: { particles?: Container };
|
|
21
|
+
}>(),
|
|
22
|
+
particlesLoadedEvent = 'particlesLoaded';
|
|
23
|
+
|
|
24
|
+
let oldId = id;
|
|
25
|
+
let currentContainer: Container | undefined;
|
|
26
|
+
|
|
27
|
+
function destroyOldContainer() {
|
|
28
|
+
currentContainer?.destroy();
|
|
29
|
+
currentContainer = undefined;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
onDestroy(() => {
|
|
33
|
+
destroyOldContainer();
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
onMount(() => {
|
|
37
|
+
mounted = true;
|
|
38
|
+
void loadParticles();
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
async function loadParticles(): Promise<void> {
|
|
42
|
+
destroyOldContainer();
|
|
43
|
+
|
|
44
|
+
if (!mounted) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
await particlesEngineInitialization.waitForParticlesEngineInitialization();
|
|
49
|
+
|
|
50
|
+
if (!particlesEngineInitialization.isParticlesEngineInitialized()) {
|
|
51
|
+
throw new Error(
|
|
52
|
+
'initParticlesEngine(...) must be called once before rendering <Particles /> components.'
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (!mounted) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (id) {
|
|
61
|
+
const cb = (container?: Container) => {
|
|
62
|
+
dispatch(particlesLoadedEvent, {
|
|
63
|
+
particles: container
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
oldId = id;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const container = await tsParticles.load({
|
|
70
|
+
id,
|
|
71
|
+
options,
|
|
72
|
+
url
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
currentContainer = container;
|
|
76
|
+
|
|
77
|
+
cb(container);
|
|
78
|
+
} else {
|
|
79
|
+
dispatch(particlesLoadedEvent, {
|
|
80
|
+
particles: undefined
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
afterUpdate(async () => {
|
|
86
|
+
await loadParticles();
|
|
87
|
+
});
|
|
62
88
|
</script>
|
|
63
89
|
|
|
64
|
-
<div {id} class={cssClass} {style}
|
|
90
|
+
<div {id} class={cssClass} {style}></div>
|
|
@@ -1,37 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import type { Container, ISourceOptions } from '@tsparticles/engine';
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: Props & {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
9
12
|
};
|
|
10
|
-
|
|
11
|
-
particlesLoaded: CustomEvent<any>;
|
|
12
|
-
} & {
|
|
13
|
-
[evt: string]: CustomEvent<any>;
|
|
14
|
-
};
|
|
15
|
-
slots: {};
|
|
16
|
-
};
|
|
17
|
-
export type ParticlesProps = typeof __propDef.props;
|
|
18
|
-
export type ParticlesEvents = typeof __propDef.events;
|
|
19
|
-
export type ParticlesSlots = typeof __propDef.slots;
|
|
20
|
-
export default class Particles extends SvelteComponent<ParticlesProps, ParticlesEvents, ParticlesSlots> {
|
|
21
|
-
get class(): string | undefined;
|
|
22
|
-
/**accessor*/
|
|
23
|
-
set class(_: string | undefined);
|
|
24
|
-
get undefined(): any;
|
|
25
|
-
/**accessor*/
|
|
26
|
-
set undefined(_: any);
|
|
27
|
-
get options(): import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined;
|
|
28
|
-
/**accessor*/
|
|
29
|
-
set options(_: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined);
|
|
30
|
-
get url(): string | undefined;
|
|
31
|
-
/**accessor*/
|
|
32
|
-
set url(_: string | undefined);
|
|
33
|
-
get id(): string | undefined;
|
|
34
|
-
/**accessor*/
|
|
35
|
-
set id(_: string | undefined);
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
36
14
|
}
|
|
37
|
-
|
|
15
|
+
declare const Particles: $$__sveltets_2_IsomorphicComponent<{
|
|
16
|
+
class?: string;
|
|
17
|
+
style?: string;
|
|
18
|
+
options?: ISourceOptions;
|
|
19
|
+
url?: string;
|
|
20
|
+
id?: string;
|
|
21
|
+
}, {
|
|
22
|
+
particlesLoaded: CustomEvent<{
|
|
23
|
+
particles?: Container;
|
|
24
|
+
}>;
|
|
25
|
+
} & {
|
|
26
|
+
[evt: string]: CustomEvent<any>;
|
|
27
|
+
}, {}, {
|
|
28
|
+
class: string;
|
|
29
|
+
style: string;
|
|
30
|
+
options: ISourceOptions;
|
|
31
|
+
url: string;
|
|
32
|
+
id: string;
|
|
33
|
+
}, string>;
|
|
34
|
+
type Particles = InstanceType<typeof Particles>;
|
|
35
|
+
export default Particles;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type Engine } from '@tsparticles/engine';
|
|
2
1
|
import Particles from './Particles.svelte';
|
|
3
|
-
|
|
4
|
-
export {
|
|
2
|
+
import { initParticlesEngine, type ParticlesPluginRegistrar } from './utils.js';
|
|
3
|
+
export type { ParticlesPluginRegistrar };
|
|
4
|
+
export { Particles as default, initParticlesEngine, initParticlesEngine as particlesInit };
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
import { tsParticles } from '@tsparticles/engine';
|
|
2
1
|
import Particles from './Particles.svelte';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
tsParticles.init();
|
|
6
|
-
await init(tsParticles);
|
|
7
|
-
initialized.set(true);
|
|
8
|
-
}
|
|
9
|
-
export { Particles as default, particlesInit };
|
|
2
|
+
import { initParticlesEngine } from './utils.js';
|
|
3
|
+
export { Particles as default, initParticlesEngine, initParticlesEngine as particlesInit };
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
1
|
+
import type { Engine } from '@tsparticles/engine';
|
|
2
|
+
export type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;
|
|
3
|
+
export declare function initParticlesEngine(init?: ParticlesPluginRegistrar): Promise<void>;
|
|
4
|
+
export declare function isParticlesEngineInitialized(): boolean;
|
|
5
|
+
export declare function waitForParticlesEngineInitialization(): Promise<void>;
|
package/dist/utils.js
CHANGED
|
@@ -1,3 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { tsParticles } from '@tsparticles/engine';
|
|
2
|
+
let isInitialized = false;
|
|
3
|
+
let initPromise;
|
|
4
|
+
let initCallback;
|
|
5
|
+
export async function initParticlesEngine(init) {
|
|
6
|
+
if (isInitialized) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
if (initPromise) {
|
|
10
|
+
if (initCallback !== init) {
|
|
11
|
+
throw new Error('initParticlesEngine callback must be stable across the app lifecycle.');
|
|
12
|
+
}
|
|
13
|
+
await initPromise;
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
initCallback = init;
|
|
17
|
+
initPromise = (async () => {
|
|
18
|
+
if (init) {
|
|
19
|
+
await init(tsParticles);
|
|
20
|
+
}
|
|
21
|
+
isInitialized = true;
|
|
22
|
+
})().catch((error) => {
|
|
23
|
+
initPromise = undefined;
|
|
24
|
+
initCallback = undefined;
|
|
25
|
+
isInitialized = false;
|
|
26
|
+
throw error;
|
|
27
|
+
});
|
|
28
|
+
await initPromise;
|
|
29
|
+
}
|
|
30
|
+
export function isParticlesEngineInitialized() {
|
|
31
|
+
return isInitialized;
|
|
32
|
+
}
|
|
33
|
+
export async function waitForParticlesEngineInitialization() {
|
|
34
|
+
await (initPromise ?? Promise.resolve());
|
|
35
|
+
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/svelte",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-beta.12",
|
|
4
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
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
|
-
"url": "git+https://github.com/tsparticles/
|
|
8
|
-
"directory": "
|
|
7
|
+
"url": "git+https://github.com/tsparticles/tsparticles.git",
|
|
8
|
+
"directory": "wrappers/svelte"
|
|
9
9
|
},
|
|
10
10
|
"author": "Matteo Bruni <matteo.bruni@me.com>",
|
|
11
11
|
"license": "MIT",
|
|
@@ -92,30 +92,30 @@
|
|
|
92
92
|
"svelte": "^4.2.17"
|
|
93
93
|
},
|
|
94
94
|
"dependencies": {
|
|
95
|
-
"@tsparticles/engine": "^
|
|
95
|
+
"@tsparticles/engine": "^4.0.0-beta.12"
|
|
96
96
|
},
|
|
97
97
|
"devDependencies": {
|
|
98
|
-
"@sveltejs/adapter-auto": "^
|
|
99
|
-
"@sveltejs/kit": "^2.
|
|
100
|
-
"@sveltejs/package": "^2.
|
|
101
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
102
|
-
"@types/eslint": "^
|
|
103
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
104
|
-
"@typescript-eslint/parser": "^
|
|
105
|
-
"eslint": "^
|
|
106
|
-
"eslint-config-prettier": "^
|
|
107
|
-
"eslint-plugin-svelte": "^
|
|
108
|
-
"prettier": "^3.2
|
|
109
|
-
"prettier-plugin-svelte": "^3.
|
|
110
|
-
"publint": "^0.
|
|
111
|
-
"svelte": "^
|
|
112
|
-
"svelte-check": "^
|
|
113
|
-
"tslib": "^2.
|
|
114
|
-
"typescript": "^
|
|
115
|
-
"vite": "^
|
|
98
|
+
"@sveltejs/adapter-auto": "^7.0.1",
|
|
99
|
+
"@sveltejs/kit": "^2.57.1",
|
|
100
|
+
"@sveltejs/package": "^2.5.7",
|
|
101
|
+
"@sveltejs/vite-plugin-svelte": "^7.0.0",
|
|
102
|
+
"@types/eslint": "^9.6.1",
|
|
103
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
104
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
105
|
+
"eslint": "^10.2.0",
|
|
106
|
+
"eslint-config-prettier": "^10.1.8",
|
|
107
|
+
"eslint-plugin-svelte": "^3.17.0",
|
|
108
|
+
"prettier": "^3.8.2",
|
|
109
|
+
"prettier-plugin-svelte": "^3.5.1",
|
|
110
|
+
"publint": "^0.3.18",
|
|
111
|
+
"svelte": "^5.55.3",
|
|
112
|
+
"svelte-check": "^4.4.6",
|
|
113
|
+
"tslib": "^2.8.1",
|
|
114
|
+
"typescript": "^6.0.2",
|
|
115
|
+
"vite": "^8.0.8"
|
|
116
116
|
},
|
|
117
117
|
"svelte": "./dist/index.js",
|
|
118
118
|
"types": "./dist/index.d.ts",
|
|
119
119
|
"type": "module",
|
|
120
|
-
"gitHead": "
|
|
120
|
+
"gitHead": "bdbc95716ce44665fbecfaca8757445e248b562d"
|
|
121
121
|
}
|