Skip to content

Commit 7cd7d92

Browse files
JoseRFelixJoseRFelix
committed
feat: migrate to pnpm and improve DarkModeSwitch compatibility
Moves the repo and CI from Yarn to pnpm with updated tooling and lockfiles, and adds a React 16–19 compatibility matrix. Refactors DarkModeSwitch for safer animation config handling, better accessibility semantics, and stronger tests, while modernizing the example app setup.
1 parent 91b30e5 commit 7cd7d92

14 files changed

Lines changed: 4953 additions & 11597 deletions

File tree

‎.github/workflows/main.yml‎

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,75 @@ jobs:
66

77
steps:
88
- name: Begin CI...
9-
uses: actions/checkout@v2
9+
uses: actions/checkout@v4
1010

11-
- name: Use Node 12
12-
uses: actions/setup-node@v1
11+
- name: Setup pnpm
12+
uses: pnpm/action-setup@v4
1313
with:
14-
node-version: 12.x
14+
version: 10
1515

16-
- name: Use cached node_modules
17-
uses: actions/cache@v1
16+
- name: Use Node 20
17+
uses: actions/setup-node@v4
1818
with:
19-
path: node_modules
20-
key: nodeModules-${{ hashFiles('**/yarn.lock') }}
21-
restore-keys: |
22-
nodeModules-
19+
node-version: 20.x
20+
cache: pnpm
2321

2422
- name: Install dependencies
25-
run: yarn install --frozen-lockfile
23+
run: pnpm install --frozen-lockfile
2624
env:
2725
CI: true
2826

2927
- name: Lint
30-
run: yarn lint
28+
run: pnpm lint
3129
env:
3230
CI: true
3331

3432
- name: Test
35-
run: yarn test --ci --coverage --maxWorkers=2
33+
run: pnpm test
3634
env:
3735
CI: true
3836

3937
- name: Build
40-
run: yarn build
38+
run: pnpm build
39+
env:
40+
CI: true
41+
42+
react-compatibility:
43+
runs-on: ubuntu-latest
44+
strategy:
45+
fail-fast: false
46+
matrix:
47+
react-version: [16.14.0, 17.0.2, 18.3.1, 19.0.0]
48+
49+
steps:
50+
- name: Begin compatibility checks...
51+
uses: actions/checkout@v4
52+
53+
- name: Setup pnpm
54+
uses: pnpm/action-setup@v4
55+
with:
56+
version: 10
57+
58+
- name: Use Node 20
59+
uses: actions/setup-node@v4
60+
with:
61+
node-version: 20.x
62+
cache: pnpm
63+
64+
- name: Install dependencies
65+
run: pnpm install --frozen-lockfile
66+
env:
67+
CI: true
68+
69+
- name: Test React ${{ matrix.react-version }} compatibility
70+
run: pnpm add -Dw react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }} --ignore-scripts
71+
72+
- name: Run tests
73+
run: pnpm test
74+
env:
75+
CI: true
76+
77+
- name: Build with matrix React version
78+
run: pnpm build
4179
env:
4280
CI: true

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
*.log
22
.DS_Store
33
node_modules
4+
.pnpm-store
45
.cache
56
dist
7+
.parcel-cache

‎.husky/pre-commit‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
pnpm lint

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@
2929
npm i react-toggle-dark-mode
3030
```
3131

32-
or with Yarn:
32+
or with pnpm:
3333

3434
```shell
35-
yarn add react-toggle-dark-mode
35+
pnpm add react-toggle-dark-mode
3636
```
3737

3838
## Usage

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99

1010
<body style="margin: 0 ;">
1111
<div id="root"></div>
12-
<script src="./index.tsx"></script>
12+
<script type="module" src="./index.tsx"></script>
1313
</body>
1414
</html>

‎example/index.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import 'react-app-polyfill/ie11';
21
import * as React from 'react';
3-
import * as ReactDOM from 'react-dom';
4-
import { DarkModeSwitch } from '../.';
2+
import { createRoot } from 'react-dom/client';
3+
import { DarkModeSwitch } from '../src';
54

65
function arrayN(size: number) {
76
return new Array(size).fill(undefined);
@@ -16,7 +15,7 @@ const App = () => {
1615
};
1716

1817
const addToggle = () => {
19-
setToggleAmount(prevValue => prevValue + 1);
18+
setToggleAmount((prevValue) => prevValue + 1);
2019
};
2120

2221
return (
@@ -50,17 +49,24 @@ const App = () => {
5049
moonColor="red"
5150
size={30}
5251
/>
53-
{arrayN(toggleAmount).map(() => (
52+
{arrayN(toggleAmount).map((_, index) => (
5453
<DarkModeSwitch
54+
key={index}
5555
style={{ marginBottom: '2rem' }}
5656
checked={isDarkMode}
5757
onChange={toggleDarkMode}
58-
size={Math.floor(Math.random() * 60) + 1}
58+
size={Math.floor(Math.random() * 20) + 20}
5959
/>
6060
))}
6161
<button onClick={addToggle}>Add toggle</button>
6262
</div>
6363
);
6464
};
6565

66-
ReactDOM.render(<App />, document.getElementById('root'));
66+
const rootElement = document.getElementById('root');
67+
68+
if (!rootElement) {
69+
throw new Error('Unable to find root element');
70+
}
71+
72+
createRoot(rootElement).render(<App />);

‎example/package.json‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
{
22
"name": "example",
33
"version": "1.0.0",
4-
"main": "index.js",
54
"license": "MIT",
65
"scripts": {
76
"start": "parcel index.html",
87
"build": "parcel build index.html"
98
},
109
"dependencies": {
11-
"react-app-polyfill": "^1.0.0"
12-
},
13-
"alias": {
14-
"react": "../node_modules/react",
15-
"react-dom": "../node_modules/react-dom/profiling",
16-
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
10+
"react": "19.0.0",
11+
"react-dom": "19.0.0"
1712
},
1813
"devDependencies": {
19-
"@types/react": "^16.9.11",
20-
"@types/react-dom": "^16.8.4",
21-
"parcel": "^1.12.3",
14+
"@types/react": "^19.2.14",
15+
"@types/react-dom": "^19.2.3",
16+
"parcel": "^2.16.4",
2217
"typescript": "^3.4.5"
2318
}
2419
}

0 commit comments

Comments
 (0)