Skip to content

Commit 7e720e6

Browse files
matteobrunimatteobruni
committed
chore(component): rewriting component using hooks and vite library
1 parent 4a9eaa0 commit 7e720e6

36 files changed

+2942
-1339
lines changed

‎apps/nextjs-beta/app/page.tsx‎

Lines changed: 94 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,102 @@
1-
import Image from 'next/image'
2-
import { Inter } from '@next/font/google'
3-
import styles from './page.module.css'
4-
import Particles from './particles'
1+
"use client";
52

6-
const inter = Inter({ subsets: [ 'latin' ] })
3+
import Image from "next/image";
4+
import { Inter } from "@next/font/google";
5+
import styles from "./page.module.css";
6+
import Particles from "./particles";
7+
import { useParticlesPlugins } from "@tsparticles/react";
8+
import { loadFull } from "tsparticles";
9+
import { Engine } from "@tsparticles/engine";
10+
11+
const inter = Inter({ subsets: ["latin"] });
712

813
export default function Home() {
9-
return (
10-
<main className={styles.main}>
11-
<Particles id="tsparticles" />
12-
<div className={styles.description}>
13-
<p>
14-
Get started by editing&nbsp;
15-
<code className={styles.code}>app/page.tsx</code>
16-
</p>
17-
<div>
18-
<a
19-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
20-
target="_blank"
21-
rel="noopener noreferrer"
22-
>
23-
By{' '}
24-
<Image
25-
src="/vercel.svg"
26-
alt="Vercel Logo"
27-
className={styles.vercelLogo}
28-
width={100}
29-
height={24}
30-
priority
31-
/>
32-
</a>
33-
</div>
34-
</div>
14+
const { done } = useParticlesPlugins(async (engine: Engine) => {
15+
await loadFull(engine);
16+
});
17+
18+
return (
19+
<main className={styles.main}>
20+
<Particles id="tsparticles" done={done} />
21+
<div className={styles.description}>
22+
<p>
23+
Get started by editing&nbsp;
24+
<code className={styles.code}>app/page.tsx</code>
25+
</p>
26+
<div>
27+
<a
28+
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
>
32+
By{" "}
33+
<Image
34+
src="/vercel.svg"
35+
alt="Vercel Logo"
36+
className={styles.vercelLogo}
37+
width={100}
38+
height={24}
39+
priority
40+
/>
41+
</a>
42+
</div>
43+
</div>
3544

36-
<div className={styles.center}>
37-
<Image
38-
className={styles.logo}
39-
src="/next.svg"
40-
alt="Next.js Logo"
41-
width={180}
42-
height={37}
43-
priority
44-
/>
45-
<div className={styles.thirteen}>
46-
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority/>
47-
</div>
48-
</div>
45+
<div className={styles.center}>
46+
<Image
47+
className={styles.logo}
48+
src="/next.svg"
49+
alt="Next.js Logo"
50+
width={180}
51+
height={37}
52+
priority
53+
/>
54+
<div className={styles.thirteen}>
55+
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
56+
</div>
57+
</div>
4958

50-
<div className={styles.grid}>
51-
<a
52-
href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
53-
className={styles.card}
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
>
57-
<h2 className={inter.className}>
58-
Docs <span>-&gt;</span>
59-
</h2>
60-
<p className={inter.className}>
61-
Find in-depth information about Next.js features and API.
62-
</p>
63-
</a>
59+
<div className={styles.grid}>
60+
<a
61+
href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
62+
className={styles.card}
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
>
66+
<h2 className={inter.className}>
67+
Docs <span>-&gt;</span>
68+
</h2>
69+
<p className={inter.className}>
70+
Find in-depth information about Next.js features and API.
71+
</p>
72+
</a>
6473

65-
<a
66-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
67-
className={styles.card}
68-
target="_blank"
69-
rel="noopener noreferrer"
70-
>
71-
<h2 className={inter.className}>
72-
Templates <span>-&gt;</span>
73-
</h2>
74-
<p className={inter.className}>Explore the Next.js 13 playground.</p>
75-
</a>
74+
<a
75+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
76+
className={styles.card}
77+
target="_blank"
78+
rel="noopener noreferrer"
79+
>
80+
<h2 className={inter.className}>
81+
Templates <span>-&gt;</span>
82+
</h2>
83+
<p className={inter.className}>Explore the Next.js 13 playground.</p>
84+
</a>
7685

77-
<a
78-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
79-
className={styles.card}
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className={inter.className}>
84-
Deploy <span>-&gt;</span>
85-
</h2>
86-
<p className={inter.className}>
87-
Instantly deploy your Next.js site to a shareable URL with Vercel.
88-
</p>
89-
</a>
90-
</div>
91-
</main>
92-
)
86+
<a
87+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
88+
className={styles.card}
89+
target="_blank"
90+
rel="noopener noreferrer"
91+
>
92+
<h2 className={inter.className}>
93+
Deploy <span>-&gt;</span>
94+
</h2>
95+
<p className={inter.className}>
96+
Instantly deploy your Next.js site to a shareable URL with Vercel.
97+
</p>
98+
</a>
99+
</div>
100+
</main>
101+
);
93102
}

‎apps/nextjs-beta/app/particles.tsx‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
"use client";
22

3-
import Particles, { useParticlesPlugins } from "@tsparticles/react";
3+
import Particles from "@tsparticles/react";
44
import configs from "@tsparticles/configs";
5-
import { useState, useEffect } from "react";
6-
import { loadFull } from "tsparticles";
7-
import { isSsr } from "@tsparticles/engine";
85

9-
export default function ParticlesComponent(props: { id: string }) {
10-
const [init, setInit] = useState(false);
6+
export default function ParticlesComponent(props: {
7+
id: string;
8+
done: boolean;
9+
}) {
10+
console.log(props.done);
1111

12-
const { done, error } = useParticlesPlugins(async (engine) => {
13-
await loadFull(engine);
14-
});
15-
16-
if (isSsr() || error || !done) {
17-
return <></>;
18-
}
19-
20-
if (!init) {
21-
setInit(done);
22-
}
23-
24-
return init && <Particles id={props.id} options={configs.basic} />;
12+
return props.done && <Particles id={props.id} options={configs.basic} />;
2513
}

‎apps/nextjs-beta/package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@next/font": "^13.4.12",
13-
"@types/node": "^20.4.7",
14-
"@types/react": "^18.2.18",
12+
"@next/font": "^13.4.19",
13+
"@tsparticles/configs": "^3.0.0-beta.2",
14+
"@tsparticles/engine": "^3.0.0-beta.2",
15+
"@tsparticles/react": "workspace:^",
16+
"@types/node": "^20.6.0",
17+
"@types/react": "^18.2.21",
1518
"@types/react-dom": "^18.2.7",
16-
"eslint": "^8.46.0",
17-
"eslint-config-next": "^13.4.12",
18-
"next": "^13.4.12",
19+
"eslint": "^8.49.0",
20+
"eslint-config-next": "^13.4.19",
21+
"next": "^13.4.19",
1922
"react": "^18.2.0",
2023
"react-dom": "^18.2.0",
21-
"@tsparticles/react": "^3.0.0-beta.1",
22-
"tsparticles": "^3.0.0-beta.1",
23-
"@tsparticles/configs": "^3.0.0-beta.1",
24-
"@tsparticles/engine": "^3.0.0-beta.1",
25-
"typescript": "^5.1.6"
24+
"tsparticles": "^3.0.0-beta.2",
25+
"typescript": "^5.2.2"
2626
}
2727
}

‎apps/nextjs/package.json‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,16 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13-
"next": "^13.4.12",
13+
"@tsparticles/engine": "^3.0.0-beta.2",
14+
"@tsparticles/react": "workspace:^",
15+
"@tsparticles/preset-big-circles": "^3.0.0-beta.1",
16+
"next": "^13.4.19",
1417
"react": "^18.2.0",
1518
"react-dom": "^18.2.0",
16-
"@tsparticles/engine": "^3.0.0-beta.1",
17-
"@tsparticles/react": "^3.0.0-beta.1",
18-
"@tsparticles/engine": "^3.0.0-beta.1",
19-
"@tsparticles/preset-big-circles": "^3.0.0-beta.1",
20-
"typescript": "^5.1.6"
19+
"typescript": "^5.2.2"
2120
},
2221
"devDependencies": {
23-
"eslint": "^8.46.0",
24-
"eslint-config-next": "^13.4.12"
22+
"eslint": "^8.49.0",
23+
"eslint-config-next": "^13.4.19"
2524
}
2625
}

‎apps/nextjs/pages/index.js‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,40 @@ import Image from "next/image";
33
import Particles, { useParticlesPlugins } from "@tsparticles/react";
44
import { loadBigCirclesPreset } from "@tsparticles/preset-big-circles";
55
import styles from "../styles/Home.module.css";
6-
import { useCallback, useState } from "react";
7-
import { isSsr } from "@tsparticles/engine";
6+
import { useCallback, useEffect, useMemo, useState } from "react";
87

98
export default function Home() {
109
const particlesInitCb = useCallback(async (engine) => {
10+
console.log("callback");
11+
1112
await loadBigCirclesPreset(engine);
1213
}, []);
1314

14-
const [init, setInit] = useState(false);
15-
const { done, error } = useParticlesPlugins(particlesInitCb);
15+
const particlesLoaded = useCallback((container) => {
16+
console.log("loaded", container);
17+
}, []);
18+
19+
const [done, setDone] = useState(false);
1620

17-
if (isSsr() || error || !done) {
18-
return <></>;
19-
}
21+
const pRes = useParticlesPlugins(particlesInitCb);
2022

21-
if (!init) {
22-
setInit(done);
23-
}
23+
useEffect(() => {
24+
if (done) {
25+
return;
26+
}
27+
28+
setDone(pRes.done);
29+
}, [done, pRes.done]);
30+
31+
const options = useMemo(
32+
() => ({
33+
preset: "bigCircles",
34+
fullScreen: {
35+
zIndex: -1,
36+
},
37+
}),
38+
[]
39+
);
2440

2541
return (
2642
<div className={styles.container}>
@@ -83,15 +99,11 @@ export default function Home() {
8399
</span>
84100
</a>
85101
</footer>
86-
{init && (
102+
{done && (
87103
<Particles
88104
id="tsparticles"
89-
options={{
90-
preset: "bigCircles",
91-
fullScreen: {
92-
zIndex: -1,
93-
},
94-
}}
105+
options={options}
106+
particlesLoaded={particlesLoaded}
95107
/>
96108
)}
97109
</div>

‎apps/react/package.json‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,12 @@
33
"version": "3.0.0-beta.1",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^6.0.0",
7-
"@testing-library/react": "^14.0.0",
8-
"@testing-library/user-event": "^14.4.3",
6+
"@tsparticles/engine": "^3.0.0-beta.2",
7+
"@tsparticles/react": "workspace:*",
98
"react": "^18.2.0",
109
"react-dom": "^18.2.0",
11-
"@tsparticles/react": "^3.0.0-beta.1",
1210
"react-scripts": "^5.0.1",
13-
"tsparticles": "^3.0.0-beta.1",
14-
"@tsparticles/engine": "^3.0.0-beta.1",
11+
"tsparticles": "^3.0.0-beta.2",
1512
"web-vitals": "^3.4.0"
1613
},
1714
"scripts": {

‎components/react-new/.eslintrc.cjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

0 commit comments

Comments
 (0)