Skip to content

Commit 32b99a4

Browse files
matteobrunimatteobruni
authored
Merge pull request #16 from tsparticles/dev
3.0.0
2 parents e3822ac + 5433658 commit 32b99a4

19 files changed

+2319
-2037
lines changed

‎CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [3.0.0](https://github.com/tsparticles/preact/compare/v2.12.1...v3.0.0) (2023-12-30)
7+
8+
9+
### Features
10+
11+
* migrated to v3 ([4ea00d8](https://github.com/tsparticles/preact/commit/4ea00d85fae4df8c1ae124071f017c8b455a8c98))
12+
13+
14+
15+
16+
617
## [2.12.1](https://github.com/tsparticles/preact/compare/v2.12.0...v2.12.1) (2023-08-11)
718

819

‎README.md

Lines changed: 56 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
22

3-
# preact-particles
3+
# @tsparticles/preact
44

5-
[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5+
[![npm](https://img.shields.io/npm/v/@tsparticles/preact)](https://www.npmjs.com/package/@tsparticles/preact) [![npm](https://img.shields.io/npm/dm/@tsparticles/preact)](https://www.npmjs.com/package/@tsparticles/preact) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
66

77
Official [tsParticles](https://github.com/matteobruni/tsparticles) Preact component
88

@@ -13,13 +13,13 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) Preact compon
1313
## Installation
1414

1515
```shell
16-
npm install preact-particles
16+
npm install @tsparticles/preact
1717
```
1818

1919
or
2020

2121
```shell
22-
yarn add preact-particles
22+
yarn add @tsparticles/preact
2323
```
2424

2525
## How to use
@@ -31,38 +31,42 @@ Examples:
3131
_Remote url_
3232

3333
```javascript
34-
import Particles from "preact-particles";
34+
import Particles, { initParticlesEngine } from "@tsparticles/preact";
3535
import { loadFull } from "tsparticles";
3636

3737
class App extends Component {
38+
state = {
39+
particlesInitialized: false,
40+
};
41+
3842
constructor(props) {
3943
super(props);
4044

41-
this.particlesInit = this.particlesInit.bind(this);
4245
this.particlesLoaded = this.particlesLoaded.bind(this);
43-
}
44-
45-
particlesInit(main) {
46-
console.log(main);
4746

48-
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
49-
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
50-
// starting from v2 you can add only the features you need reducing the bundle size
51-
loadFull(main);
47+
initParticlesEngine(async engine => {
48+
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
49+
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
50+
// starting from v2 you can add only the features you need reducing the bundle size
51+
await loadFull(engine);
52+
}).then(() => {
53+
this.setState({
54+
particlesInitialized: true,
55+
});
56+
});
5257
}
5358

5459
particlesLoaded(container) {
5560
console.log(container);
5661
}
5762

5863
render() {
64+
if (!this.state.particlesInitialized) {
65+
return null;
66+
}
67+
5968
return (
60-
<Particles
61-
id="tsparticles"
62-
url="http://foo.bar/particles.json"
63-
init={this.particlesInit}
64-
loaded={this.particlesLoaded}
65-
/>
69+
<Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={this.particlesLoaded} />
6670
);
6771
}
6872
}
@@ -71,36 +75,44 @@ class App extends Component {
7175
_Options object_
7276

7377
```javascript
74-
import Particles from "preact-particles";
78+
import Particles from "@tsparticles/preact";
7579
import { loadFull } from "tsparticles";
7680

7781
class App extends Component {
82+
state = {
83+
particlesInitialized: false,
84+
};
85+
7886
constructor(props) {
7987
super(props);
8088

81-
this.particlesInit = this.particlesInit.bind(this);
8289
this.particlesLoaded = this.particlesLoaded.bind(this);
83-
}
8490

85-
particlesInit(main) {
86-
console.log(main);
87-
88-
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
89-
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
90-
// starting from v2 you can add only the features you need reducing the bundle size
91-
loadFull(main);
91+
initParticlesEngine(async engine => {
92+
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
93+
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
94+
// starting from v2 you can add only the features you need reducing the bundle size
95+
await loadFull(engine);
96+
}).then(() => {
97+
this.setState({
98+
particlesInitialized: true,
99+
});
100+
});
92101
}
93102

94103
particlesLoaded(container) {
95104
console.log(container);
96105
}
97106

98107
render() {
108+
if (!this.state.particlesInitialized) {
109+
return null;
110+
}
111+
99112
return (
100113
<Particles
101114
id="tsparticles"
102-
init={this.particlesInit}
103-
loaded={this.particlesLoaded}
115+
particlesLoaded={this.particlesLoaded}
104116
options={{
105117
background: {
106118
color: {
@@ -178,19 +190,18 @@ class App extends Component {
178190

179191
### Props
180192

181-
| Prop | Type | Definition |
182-
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
183-
| id | string | The id of the element. |
184-
| width | string | The width of the canvas. |
185-
| height | string | The height of the canvas. |
186-
| options | object | The options of the particles instance. |
187-
| url | string | The remote options url, called using an AJAX request |
188-
| style | object | The style of the canvas element. |
189-
| className | string | The class name of the canvas wrapper. |
190-
| canvasClassName | string | the class name of the canvas. |
191-
| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) |
192-
| init | function | This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here |
193-
| loaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
193+
| Prop | Type | Definition |
194+
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
195+
| id | string | The id of the element. |
196+
| width | string | The width of the canvas. |
197+
| height | string | The height of the canvas. |
198+
| options | object | The options of the particles instance. |
199+
| url | string | The remote options url, called using an AJAX request |
200+
| style | object | The style of the canvas element. |
201+
| className | string | The class name of the canvas wrapper. |
202+
| canvasClassName | string | the class name of the canvas. |
203+
| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) |
204+
| particlesLoaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
194205

195206
Find your parameters configuration [here](https://particles.js.org).
196207

‎apps/preact/CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [3.0.0](https://github.com/tsparticles/preact/compare/v2.12.1...v3.0.0) (2023-12-30)
7+
8+
9+
### Features
10+
11+
* migrated to v3 ([4ea00d8](https://github.com/tsparticles/preact/commit/4ea00d85fae4df8c1ae124071f017c8b455a8c98))
12+
13+
14+
15+
16+
617
## [2.12.1](https://github.com/tsparticles/preact/compare/v2.12.0...v2.12.1) (2023-08-11)
718

819

‎apps/preact/package.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "preact-particles-demo",
2+
"name": "@tsparticles/preact-demo",
33
"private": true,
4-
"version": "2.12.1",
4+
"version": "3.0.0",
55
"type": "module",
66
"description": "> TODO: description",
77
"author": "Matteo Bruni <[email protected]>",
@@ -28,28 +28,28 @@
2828
"url": "https://github.com/tsparticles/preact/issues"
2929
},
3030
"devDependencies": {
31-
"@typescript-eslint/eslint-plugin": "^6.2.1",
32-
"@typescript-eslint/parser": "^6.2.1",
31+
"@typescript-eslint/eslint-plugin": "^6.16.0",
32+
"@typescript-eslint/parser": "^6.16.0",
3333
"copyfiles": "^2.4.1",
3434
"enzyme": "^3.11.0",
3535
"enzyme-adapter-preact-pure": "^4.1.0",
36-
"eslint": "^8.46.0",
36+
"eslint": "^8.56.0",
3737
"eslint-config-preact": "^1.3.0",
38-
"eslint-config-prettier": "^9.0.0",
38+
"eslint-config-prettier": "^9.1.0",
3939
"eslint-plugin-react-hooks": "^4.6.0",
4040
"identity-obj-proxy": "^3.0.0",
4141
"preact-cli": "^3.5.0",
42-
"prettier": "^3.0.1",
42+
"prettier": "^3.1.1",
4343
"sirv-cli": "^2.0.2",
44-
"typescript": "^5.1.6"
44+
"typescript": "^5.3.3"
4545
},
4646
"dependencies": {
47-
"preact": "^10.16.0",
48-
"preact-particles": "^2.12.1",
49-
"preact-render-to-string": "^6.2.0",
47+
"@tsparticles/configs": "^3.0.3",
48+
"@tsparticles/engine": "^3.0.3",
49+
"@tsparticles/preact": "workspace:^",
50+
"preact": "^10.19.3",
51+
"preact-render-to-string": "^6.3.1",
5052
"preact-router": "^4.1.2",
51-
"tsparticles": "^2.12.0",
52-
"tsparticles-demo-configs": "^2.12.0",
53-
"tsparticles-engine": "^2.12.0"
53+
"tsparticles": "^3.0.3"
5454
}
5555
}

‎apps/preact/src/components/app.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Component } from "preact";
22
import { Router } from "preact-router";
3-
import Particles from "preact-particles";
3+
import Particles, { initParticlesEngine } from "@tsparticles/preact";
44
import Header from "./header";
55
import Home from "../routes/home";
66
import Profile from "../routes/profile";
77
import { loadFull } from "tsparticles";
8-
import configs from "tsparticles-demo-configs";
8+
import configs from "@tsparticles/configs";
99

1010
export default class App extends Component {
1111
key = "basic";
@@ -16,33 +16,39 @@ export default class App extends Component {
1616

1717
state = {
1818
key: this.key,
19+
particlesInitialized: false
1920
};
2021

2122
handleRoute = e => {
2223
this.currentUrl = e.url;
2324
};
2425

2526
switchFrame = (key) => {
26-
console.log("switch frame", key);
27-
2827
this.setState({
2928
...this.state,
3029
key,
3130
}, () => {
32-
console.log("hash", `#${key}`);
33-
3431
document.location.hash = `#${key}`;
3532
});
3633
};
3734

38-
async particlesInit(main) {
39-
await loadFull(main);
35+
constructor() {
36+
super();
37+
38+
void initParticlesEngine(async (engine) => {
39+
await loadFull(engine);
40+
}).then(() => {
41+
this.setState({
42+
...this.state,
43+
particlesInitialized: true
44+
});
45+
});
4046
}
4147

4248
render() {
4349
return (
4450
<div id="app">
45-
<Header />
51+
<Header/>
4652
<div style="position: absolute; top: 50%; right: 10px; z-index: 3000;">
4753
<div>
4854
<button onClick={() => {
@@ -57,12 +63,12 @@ export default class App extends Component {
5763
</button>
5864
</div>
5965
</div>
60-
<Particles id="tsparticles" options={this.options[this.state.key]}
61-
init={this.particlesInit.bind(this)} />
66+
{this.state.particlesInitialized &&
67+
<Particles id="tsparticles" options={this.options[this.state.key]}/>}
6268
<Router onChange={this.handleRoute}>
63-
<Home path="/" />
64-
<Profile path="/profile/" user="me" />
65-
<Profile path="/profile/:user" />
69+
<Home path="/"/>
70+
<Profile path="/profile/" user="me"/>
71+
<Profile path="/profile/:user"/>
6672
</Router>
6773
</div>
6874
);

‎components/preact/CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [3.0.0](https://github.com/tsparticles/preact/compare/v2.12.1...v3.0.0) (2023-12-30)
7+
8+
9+
### Features
10+
11+
* migrated to v3 ([4ea00d8](https://github.com/tsparticles/preact/commit/4ea00d85fae4df8c1ae124071f017c8b455a8c98))
12+
13+
14+
15+
16+
617
## [2.12.1](https://github.com/tsparticles/preact/compare/v2.12.0...v2.12.1) (2023-08-11)
718

819

0 commit comments

Comments
 (0)