Skip to content

Commit

Permalink
feat: async presets
Browse files Browse the repository at this point in the history 
fix: fixed various README.md files
feat: all components uses a property for init instead of events
  • Loading branch information
@matteobruni
matteobruni committed Dec 5, 2021
1 parent 8a6f4a6 commit 86f3038
Show file tree
Hide file tree
Showing 28 changed files with 234 additions and 202 deletions.
3 changes: 2 additions & 1 deletion components/solid/.babelrc
View file
Expand Up @@ -30,6 +30,7 @@
{
"loose": true
}
]
],
"@babel/transform-runtime"
]
}
1 change: 1 addition & 0 deletions components/solid/package.json
View file
Expand Up @@ -77,6 +77,7 @@
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.15.0",
"@babel/preset-typescript": "^7.15.0",
"@typescript-eslint/eslint-plugin": "^5.0.0",
Expand Down
2 changes: 1 addition & 1 deletion components/solid/src/IParticlesProps.ts
View file
Expand Up @@ -12,6 +12,6 @@ export interface IParticlesProps {
className?: string;
canvasClassName?: string;
container?: { current: Container };
init?: (tsParticles: Main) => void;
init?: (tsParticles: Main) => Promise<void>;
loaded?: (container: Container) => void;
}
40 changes: 31 additions & 9 deletions components/solid/src/Particles.tsx
View file
Expand Up @@ -5,6 +5,7 @@ import {
createMemo,
createSignal,
onCleanup,
onMount,
JSX,
} from "solid-js";

Expand All @@ -16,13 +17,10 @@ interface MutableRefObject<T> {
* @param (props:IParticlesProps) Particles component properties
*/
const Particles = (props: IParticlesProps): JSX.Element => {
const [init, setInit] = createSignal(false);

try {
const id = props.id ?? "tsparticles";

if (props.init) {
props.init(tsParticles);
}

const options = createMemo(() => props.params ?? props.options ?? {});

const refContainer = props.container as MutableRefObject<
Expand All @@ -45,16 +43,38 @@ const Particles = (props: IParticlesProps): JSX.Element => {
}
};

createEffect(() => {
const container = tsParticles.dom().find((t) => t.id === containerId());
onMount(() => {
if (props.init) {
console.log("props.init present");

props.init(tsParticles).then(() => {
console.log("then init");

setInit(true);
});
} else {
setInit(true);
}
});

createEffect(async () => {
if (!init()) {
console.log("not initialized");

return;
}

let container = tsParticles.dom().find((t) => t.id === containerId());

container?.destroy();

if (url) {
tsParticles.loadJSON(id, url).then(cb);
container = await tsParticles.loadJSON(id, url);
} else {
tsParticles.load(id, options()).then(cb);
container = await tsParticles.load(id, options());
}

cb(container);
});

onCleanup(() => {
Expand All @@ -78,6 +98,8 @@ const Particles = (props: IParticlesProps): JSX.Element => {
</div>
);
} catch (e) {
console.log(e);

return <div></div>;
}
};
Expand Down
12 changes: 12 additions & 0 deletions components/solid/yarn.lock
View file
Expand Up @@ -847,6 +847,18 @@
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"

"@babel/plugin-transform-runtime@^7.16.4":
version "7.16.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.4.tgz#f9ba3c7034d429c581e1bd41b4952f3db3c2c7e8"
integrity sha512-pru6+yHANMTukMtEZGC4fs7XPwg35v8sj5CIEmE+gEkFljFiVJxEWxx/7ZDkTK+iZRYo1bFXBtfIN95+K3cJ5A==
dependencies:
"@babel/helper-module-imports" "^7.16.0"
"@babel/helper-plugin-utils" "^7.14.5"
babel-plugin-polyfill-corejs2 "^0.3.0"
babel-plugin-polyfill-corejs3 "^0.4.0"
babel-plugin-polyfill-regenerator "^0.3.0"
semver "^6.3.0"

"@babel/plugin-transform-shorthand-properties@^7.16.0":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz#090372e3141f7cc324ed70b3daf5379df2fa384d"
Expand Down
16 changes: 8 additions & 8 deletions components/svelte/README.md
View file
Expand Up @@ -49,19 +49,19 @@ yarn add svelte-particles svelte
// (from the core library) methods like play, pause, refresh, start, stop
};
let onParticlesInit = (main) => {
let particlesInit = async (main) => {
// you can use main to customize the tsParticles instance adding presets or custom shapes
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
loadFull(main);
await loadFull(main);
};
</script>

<Particles
id="tsparticles"
options="{particlesConfig}"
on:particlesLoaded="{onParticlesLoaded}"
on:particlesInit="{onParticlesInit}"
particlesInit="{particlesInit}"
/>

<!-- or -->
Expand All @@ -70,7 +70,7 @@ yarn add svelte-particles svelte
id="tsparticles"
url="{particlesUrl}"
on:particlesLoaded="{onParticlesLoaded}"
on:particlesInit="{onParticlesInit}"
particlesInit="{particlesInit}"
/>
```

Expand Down Expand Up @@ -118,11 +118,11 @@ You can see a sample below:
// (from the core library) methods like play, pause, refresh, start, stop
};
let onParticlesInit = (main) => {
let particlesInit = async (main) => {
// you can use main to customize the tsParticles instance adding presets or custom shapes
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
loadFull(main);
await loadFull(main);
};
</script>

Expand All @@ -131,7 +131,7 @@ You can see a sample below:
id="tsparticles"
options="{particlesConfig}"
on:particlesLoaded="{onParticlesLoaded}"
on:particlesInit="{onParticlesInit}"
particlesInit="{particlesInit}"
/>

<!-- or -->
Expand All @@ -141,7 +141,7 @@ You can see a sample below:
id="tsparticles"
url="{particlesUrl}"
on:particlesLoaded="{onParticlesLoaded}"
on:particlesInit="{onParticlesInit}"
particlesInit="{particlesInit}"
/>
```

Expand Down
109 changes: 59 additions & 50 deletions components/svelte/src/Particles.svelte
View file
@@ -1,54 +1,63 @@
<script lang="ts">
import { afterUpdate, createEventDispatcher } from "svelte";
import { Container, tsParticles } from "tsparticles-engine";
export let options = {};
export let url = "";
export let id = "tsparticles";
const dispatch = createEventDispatcher();
const particlesInitEvent = "particlesInit";
const particlesLoadedEvent = "particlesLoaded";
let oldId = id;
afterUpdate(() => {
tsParticles.init();
dispatch(particlesInitEvent, tsParticles);
if (oldId) {
const oldContainer = tsParticles.dom().find((c) => c.id === oldId);
if (oldContainer) {
oldContainer.destroy();
}
}
if (id) {
const cb = (container) => {
dispatch(particlesLoadedEvent, {
particles: container,
});
oldId = id;
};
if (url) {
tsParticles.loadJSON(id, url).then(cb);
} else if (options) {
tsParticles.load(id, options).then(cb);
} else {
console.error("You must specify options or url to load tsParticles");
}
} else {
dispatch(particlesLoadedEvent, {
particles: undefined,
});
}
});
import { afterUpdate, createEventDispatcher } from "svelte";
import { tsParticles } from "tsparticles-engine";
export let options = {};
export let url = "";
export let id = "tsparticles";
export let particlesInit;
const dispatch = createEventDispatcher();
const particlesLoadedEvent = "particlesLoaded";
let oldId = id;
afterUpdate(async () => {
tsParticles.init();
if (particlesInit) {
await particlesInit(tsParticles);
}
if (oldId) {
const oldContainer = tsParticles.dom().find((c) => c.id === oldId);
if (oldContainer) {
oldContainer.destroy();
}
}
if (id) {
const cb = (container) => {
dispatch(particlesLoadedEvent, {
particles: container,
});
oldId = id;
};
let container;
if (url) {
container = await tsParticles.loadJSON(id, url);
} else if (options) {
container = await tsParticles.load(id, options);
} else {
console.error("You must specify options or url to load tsParticles");
return;
}
cb(container);
} else {
dispatch(particlesLoadedEvent, {
particles: undefined,
});
}
});
</script>

<svelte:options accessors={true} />
<svelte:options accessors={true}/>

<div {id} />
<div {id}/>
14 changes: 6 additions & 8 deletions components/vue/src/Particles/Particles.vue
View file
Expand Up @@ -17,17 +17,17 @@ export default class Particles extends Vue {
@Prop() private options?: IParticlesProps;
@Prop() private url?: string;
@Prop() private particlesLoaded?: (container: Container) => void;
@Prop() private particlesInit?: (tsParticles: Main) => void;
@Prop() private particlesInit?: (tsParticles: Main) => Promise<void>;
private container?: Container;
private mounted(): void {
this.$nextTick(() => {
this.$nextTick(async () => {
if (!this.id) {
throw new Error("Prop 'id' is required!")
}
if (this.particlesInit) {
this.particlesInit(tsParticles);
await this.particlesInit(tsParticles);
}
const cb = (container?: Container) => {
Expand All @@ -38,11 +38,9 @@ export default class Particles extends Vue {
}
};
if (this.url) {
tsParticles.loadJSON(this.id, this.url).then(cb);
} else {
tsParticles.load(this.id, this.options ?? {}).then(cb);
}
const container = await (this.url ? tsParticles.loadJSON(this.id, this.url) : tsParticles.load(this.id, this.options ?? {}));
cb(container);
});
}
Expand Down
18 changes: 6 additions & 12 deletions components/vue3/src/Particles/Particles.vue
View file
Expand Up @@ -36,19 +36,19 @@ export default class Particles extends Vue {
private options?: IParticlesProps;
private url?: string;
private particlesLoaded?: (container: Container) => void;
private particlesInit?: (tsParticles: Main) => void;
private particlesInit?: (tsParticles: Main) => Promise<void>;
private container?: Container;
public mounted(): void {
nextTick(() => {
nextTick(async () => {
if (!this.id) {
throw new Error("Prop 'id' is required!");
}
tsParticles.init();
if (this.particlesInit) {
this.particlesInit(tsParticles);
await this.particlesInit(tsParticles);
}
const cb = (container?: Container) => {
Expand All @@ -59,15 +59,9 @@ export default class Particles extends Vue {
}
};
if (this.url) {
tsParticles
.loadJSON(this.id, this.url)
.then(cb);
} else {
tsParticles
.load(this.id, this.options ?? {})
.then(cb);
}
const container = await (this.url ? tsParticles.loadJSON(this.id, this.url) : tsParticles.load(this.id, this.options ?? {}));
cb(container);
});
}
Expand Down
6 changes: 3 additions & 3 deletions demo/riot/src/components/global/my-component/my-component.riot
View file
Expand Up @@ -20,14 +20,14 @@

<script>
import RiotParticles from "riot-particles";
import {loadFull} from "tsparticles";
import { loadFull } from "tsparticles";
export default {
components: {
RiotParticles
},
particlesInit: (main) => {
loadFull(main);
particlesInit: async (main) => {
await loadFull(main);
}
}
</script>
Expand Down

0 comments on commit 86f3038

Please sign in to comment.