From d2fb790eed0d23d28c8d9fb7349831c7a74d3b83 Mon Sep 17 00:00:00 2001 From: daishi Date: Tue, 21 May 2024 14:18:44 +0900 Subject: [PATCH] examples: migrate to vite --- README.md | 38 +++++++++------------ examples/01_counter/index.html | 9 +++++ examples/01_counter/package.json | 19 +++++------ examples/01_counter/public/index.html | 8 ----- examples/01_counter/src/index.tsx | 13 -------- examples/01_counter/src/main.tsx | 10 ++++++ examples/01_counter/tsconfig.json | 14 ++++++++ examples/02_person/index.html | 9 +++++ examples/02_person/package.json | 19 +++++------ examples/02_person/public/index.html | 8 ----- examples/02_person/src/index.tsx | 13 -------- examples/02_person/src/main.tsx | 10 ++++++ examples/02_person/tsconfig.json | 14 ++++++++ examples/03_usestate/index.html | 9 +++++ examples/03_usestate/package.json | 19 +++++------ examples/03_usestate/public/index.html | 8 ----- examples/03_usestate/src/index.tsx | 13 -------- examples/03_usestate/src/main.tsx | 10 ++++++ examples/03_usestate/tsconfig.json | 14 ++++++++ examples/04_selector/index.html | 9 +++++ examples/04_selector/package.json | 19 +++++------ examples/04_selector/public/index.html | 8 ----- examples/04_selector/src/index.tsx | 13 -------- examples/04_selector/src/main.tsx | 10 ++++++ examples/04_selector/tsconfig.json | 14 ++++++++ examples/05_container/index.html | 9 +++++ examples/05_container/package.json | 19 +++++------ examples/05_container/public/index.html | 8 ----- examples/05_container/src/index.tsx | 13 -------- examples/05_container/src/main.tsx | 10 ++++++ examples/05_container/tsconfig.json | 14 ++++++++ examples/06_customhook/index.html | 9 +++++ examples/06_customhook/package.json | 19 +++++------ examples/06_customhook/public/index.html | 8 ----- examples/06_customhook/src/index.tsx | 13 -------- examples/06_customhook/src/main.tsx | 10 ++++++ examples/06_customhook/tsconfig.json | 14 ++++++++ examples/07_todolist/index.html | 9 +++++ examples/07_todolist/package.json | 20 +++++------ examples/07_todolist/public/index.html | 8 ----- examples/07_todolist/src/index.tsx | 13 -------- examples/07_todolist/src/main.tsx | 10 ++++++ examples/07_todolist/tsconfig.json | 14 ++++++++ examples/08_comparison/index.html | 9 +++++ examples/08_comparison/package.json | 19 +++++------ examples/08_comparison/public/index.html | 8 ----- examples/08_comparison/src/index.tsx | 13 -------- examples/08_comparison/src/main.tsx | 10 ++++++ examples/08_comparison/tsconfig.json | 14 ++++++++ examples/09_reactmemo/index.html | 9 +++++ examples/09_reactmemo/package.json | 19 +++++------ examples/09_reactmemo/public/index.html | 8 ----- examples/09_reactmemo/src/index.tsx | 13 -------- examples/09_reactmemo/src/main.tsx | 10 ++++++ examples/09_reactmemo/tsconfig.json | 14 ++++++++ examples/10_untracked/index.html | 9 +++++ examples/10_untracked/package.json | 19 +++++------ examples/10_untracked/public/index.html | 8 ----- examples/10_untracked/src/index.tsx | 13 -------- examples/10_untracked/src/main.tsx | 10 ++++++ examples/10_untracked/tsconfig.json | 14 ++++++++ examples/11_form/index.html | 9 +++++ examples/11_form/package.json | 19 +++++------ examples/11_form/public/index.html | 8 ----- examples/11_form/src/index.tsx | 13 -------- examples/11_form/src/main.tsx | 10 ++++++ examples/11_form/tsconfig.json | 14 ++++++++ examples/12_async/index.html | 9 +++++ examples/12_async/package.json | 17 +++++----- examples/12_async/public/index.html | 8 ----- examples/12_async/src/index.tsx | 13 -------- examples/12_async/tsconfig.json | 14 ++++++++ examples/13_saga/index.html | 9 +++++ examples/13_saga/package.json | 17 +++++----- examples/13_saga/public/index.html | 8 ----- examples/13_saga/src/app.tsx | 4 +-- examples/13_saga/src/index.tsx | 13 -------- examples/13_saga/src/main.tsx | 33 +++++------------- examples/13_saga/src/root.tsx | 27 +++++++++++++++ examples/13_saga/tsconfig.json | 14 ++++++++ examples/14_dynamic/index.html | 9 +++++ examples/14_dynamic/package.json | 19 +++++------ examples/14_dynamic/public/index.html | 8 ----- examples/14_dynamic/src/index.tsx | 13 -------- examples/14_dynamic/src/main.tsx | 10 ++++++ examples/14_dynamic/tsconfig.json | 14 ++++++++ examples/15_reactmemoref/index.html | 9 +++++ examples/15_reactmemoref/package.json | 19 +++++------ examples/15_reactmemoref/public/index.html | 8 ----- examples/15_reactmemoref/src/index.tsx | 13 -------- examples/15_reactmemoref/src/main.tsx | 10 ++++++ examples/15_reactmemoref/tsconfig.json | 14 ++++++++ package.json | 1 + pnpm-lock.yaml | 3 ++ tsconfig.json | 1 - vite.config.ts | 39 ---------------------- 96 files changed, 665 insertions(+), 553 deletions(-) create mode 100644 examples/01_counter/index.html delete mode 100644 examples/01_counter/public/index.html delete mode 100644 examples/01_counter/src/index.tsx create mode 100644 examples/01_counter/src/main.tsx create mode 100644 examples/01_counter/tsconfig.json create mode 100644 examples/02_person/index.html delete mode 100644 examples/02_person/public/index.html delete mode 100644 examples/02_person/src/index.tsx create mode 100644 examples/02_person/src/main.tsx create mode 100644 examples/02_person/tsconfig.json create mode 100644 examples/03_usestate/index.html delete mode 100644 examples/03_usestate/public/index.html delete mode 100644 examples/03_usestate/src/index.tsx create mode 100644 examples/03_usestate/src/main.tsx create mode 100644 examples/03_usestate/tsconfig.json create mode 100644 examples/04_selector/index.html delete mode 100644 examples/04_selector/public/index.html delete mode 100644 examples/04_selector/src/index.tsx create mode 100644 examples/04_selector/src/main.tsx create mode 100644 examples/04_selector/tsconfig.json create mode 100644 examples/05_container/index.html delete mode 100644 examples/05_container/public/index.html delete mode 100644 examples/05_container/src/index.tsx create mode 100644 examples/05_container/src/main.tsx create mode 100644 examples/05_container/tsconfig.json create mode 100644 examples/06_customhook/index.html delete mode 100644 examples/06_customhook/public/index.html delete mode 100644 examples/06_customhook/src/index.tsx create mode 100644 examples/06_customhook/src/main.tsx create mode 100644 examples/06_customhook/tsconfig.json create mode 100644 examples/07_todolist/index.html delete mode 100644 examples/07_todolist/public/index.html delete mode 100644 examples/07_todolist/src/index.tsx create mode 100644 examples/07_todolist/src/main.tsx create mode 100644 examples/07_todolist/tsconfig.json create mode 100644 examples/08_comparison/index.html delete mode 100644 examples/08_comparison/public/index.html delete mode 100644 examples/08_comparison/src/index.tsx create mode 100644 examples/08_comparison/src/main.tsx create mode 100644 examples/08_comparison/tsconfig.json create mode 100644 examples/09_reactmemo/index.html delete mode 100644 examples/09_reactmemo/public/index.html delete mode 100644 examples/09_reactmemo/src/index.tsx create mode 100644 examples/09_reactmemo/src/main.tsx create mode 100644 examples/09_reactmemo/tsconfig.json create mode 100644 examples/10_untracked/index.html delete mode 100644 examples/10_untracked/public/index.html delete mode 100644 examples/10_untracked/src/index.tsx create mode 100644 examples/10_untracked/src/main.tsx create mode 100644 examples/10_untracked/tsconfig.json create mode 100644 examples/11_form/index.html delete mode 100644 examples/11_form/public/index.html delete mode 100644 examples/11_form/src/index.tsx create mode 100644 examples/11_form/src/main.tsx create mode 100644 examples/11_form/tsconfig.json create mode 100644 examples/12_async/index.html delete mode 100644 examples/12_async/public/index.html delete mode 100644 examples/12_async/src/index.tsx create mode 100644 examples/12_async/tsconfig.json create mode 100644 examples/13_saga/index.html delete mode 100644 examples/13_saga/public/index.html delete mode 100644 examples/13_saga/src/index.tsx create mode 100644 examples/13_saga/src/root.tsx create mode 100644 examples/13_saga/tsconfig.json create mode 100644 examples/14_dynamic/index.html delete mode 100644 examples/14_dynamic/public/index.html delete mode 100644 examples/14_dynamic/src/index.tsx create mode 100644 examples/14_dynamic/src/main.tsx create mode 100644 examples/14_dynamic/tsconfig.json create mode 100644 examples/15_reactmemoref/index.html delete mode 100644 examples/15_reactmemoref/public/index.html delete mode 100644 examples/15_reactmemoref/src/index.tsx create mode 100644 examples/15_reactmemoref/src/main.tsx create mode 100644 examples/15_reactmemoref/tsconfig.json diff --git a/README.md b/README.md index 986e6bdf..23b7877e 100644 --- a/README.md +++ b/README.md @@ -48,13 +48,7 @@ that provide useSelector-like hooks. This package requires some peer dependencies, which you need to install by yourself. ```bash -yarn add react-tracked react scheduler react-dom -``` - -For React Native users: - -```bash -yarn add react-tracked react scheduler react-native +npm add react-tracked react scheduler ``` ## Usage @@ -231,25 +225,25 @@ The [examples](examples) folder contains working examples. You can run one of them with ```bash -PORT=8080 yarn run examples:01_minimal +PORT=8080 pnpm run examples:01_minimal ``` and open in your web browser. -You can also try them in codesandbox.io: -[01](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/01_minimal) -[02](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/02_typescript) -[03](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/03_usestate) -[04](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/04_selector) -[05](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/05_container) -[06](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/06_customhook) -[07](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/07_todolist) -[08](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/08_comparison) -[09](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/09_reactmemo) -[10](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/10_untracked) -[11](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/11_form) -[12](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/12_async) -[13](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/13_saga) +You can also try them directly: +[01](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/01_minimal) +[02](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/02_typescript) +[03](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/03_usestate) +[04](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/04_selector) +[05](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/05_container) +[06](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/06_customhook) +[07](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/07_todolist) +[08](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/08_comparison) +[09](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/09_reactmemo) +[10](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/10_untracked) +[11](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/11_form) +[12](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/12_async) +[13](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/13_saga) ## Benchmarks diff --git a/examples/01_counter/index.html b/examples/01_counter/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/01_counter/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/01_counter/package.json b/examples/01_counter/package.json index bba01aef..021bbef4 100644 --- a/examples/01_counter/package.json +++ b/examples/01_counter/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/01_counter/public/index.html b/examples/01_counter/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/01_counter/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/01_counter/src/index.tsx b/examples/01_counter/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/01_counter/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/01_counter/src/main.tsx b/examples/01_counter/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/01_counter/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/01_counter/tsconfig.json b/examples/01_counter/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/01_counter/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/02_person/index.html b/examples/02_person/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/02_person/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/02_person/package.json b/examples/02_person/package.json index bba01aef..021bbef4 100644 --- a/examples/02_person/package.json +++ b/examples/02_person/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/02_person/public/index.html b/examples/02_person/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/02_person/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/02_person/src/index.tsx b/examples/02_person/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/02_person/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/02_person/src/main.tsx b/examples/02_person/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/02_person/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/02_person/tsconfig.json b/examples/02_person/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/02_person/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/03_usestate/index.html b/examples/03_usestate/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/03_usestate/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/03_usestate/package.json b/examples/03_usestate/package.json index bba01aef..021bbef4 100644 --- a/examples/03_usestate/package.json +++ b/examples/03_usestate/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/03_usestate/public/index.html b/examples/03_usestate/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/03_usestate/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/03_usestate/src/index.tsx b/examples/03_usestate/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/03_usestate/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/03_usestate/src/main.tsx b/examples/03_usestate/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/03_usestate/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/03_usestate/tsconfig.json b/examples/03_usestate/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/03_usestate/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/04_selector/index.html b/examples/04_selector/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/04_selector/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/04_selector/package.json b/examples/04_selector/package.json index bba01aef..021bbef4 100644 --- a/examples/04_selector/package.json +++ b/examples/04_selector/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/04_selector/public/index.html b/examples/04_selector/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/04_selector/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/04_selector/src/index.tsx b/examples/04_selector/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/04_selector/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/04_selector/src/main.tsx b/examples/04_selector/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/04_selector/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/04_selector/tsconfig.json b/examples/04_selector/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/04_selector/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/05_container/index.html b/examples/05_container/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/05_container/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/05_container/package.json b/examples/05_container/package.json index bba01aef..021bbef4 100644 --- a/examples/05_container/package.json +++ b/examples/05_container/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/05_container/public/index.html b/examples/05_container/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/05_container/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/05_container/src/index.tsx b/examples/05_container/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/05_container/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/05_container/src/main.tsx b/examples/05_container/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/05_container/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/05_container/tsconfig.json b/examples/05_container/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/05_container/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/06_customhook/index.html b/examples/06_customhook/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/06_customhook/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/06_customhook/package.json b/examples/06_customhook/package.json index bba01aef..021bbef4 100644 --- a/examples/06_customhook/package.json +++ b/examples/06_customhook/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/06_customhook/public/index.html b/examples/06_customhook/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/06_customhook/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/06_customhook/src/index.tsx b/examples/06_customhook/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/06_customhook/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/06_customhook/src/main.tsx b/examples/06_customhook/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/06_customhook/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/06_customhook/tsconfig.json b/examples/06_customhook/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/06_customhook/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/07_todolist/index.html b/examples/07_todolist/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/07_todolist/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/07_todolist/package.json b/examples/07_todolist/package.json index 95a0efd0..021bbef4 100644 --- a/examples/07_todolist/package.json +++ b/examples/07_todolist/package.json @@ -2,21 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", - "immer": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/07_todolist/public/index.html b/examples/07_todolist/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/07_todolist/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/07_todolist/src/index.tsx b/examples/07_todolist/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/07_todolist/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/07_todolist/src/main.tsx b/examples/07_todolist/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/07_todolist/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/07_todolist/tsconfig.json b/examples/07_todolist/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/07_todolist/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/08_comparison/index.html b/examples/08_comparison/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/08_comparison/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/08_comparison/package.json b/examples/08_comparison/package.json index bba01aef..021bbef4 100644 --- a/examples/08_comparison/package.json +++ b/examples/08_comparison/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/08_comparison/public/index.html b/examples/08_comparison/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/08_comparison/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/08_comparison/src/index.tsx b/examples/08_comparison/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/08_comparison/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/08_comparison/src/main.tsx b/examples/08_comparison/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/08_comparison/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/08_comparison/tsconfig.json b/examples/08_comparison/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/08_comparison/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/09_reactmemo/index.html b/examples/09_reactmemo/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/09_reactmemo/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/09_reactmemo/package.json b/examples/09_reactmemo/package.json index bba01aef..021bbef4 100644 --- a/examples/09_reactmemo/package.json +++ b/examples/09_reactmemo/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/09_reactmemo/public/index.html b/examples/09_reactmemo/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/09_reactmemo/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/09_reactmemo/src/index.tsx b/examples/09_reactmemo/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/09_reactmemo/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/09_reactmemo/src/main.tsx b/examples/09_reactmemo/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/09_reactmemo/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/09_reactmemo/tsconfig.json b/examples/09_reactmemo/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/09_reactmemo/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/10_untracked/index.html b/examples/10_untracked/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/10_untracked/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/10_untracked/package.json b/examples/10_untracked/package.json index bba01aef..021bbef4 100644 --- a/examples/10_untracked/package.json +++ b/examples/10_untracked/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/10_untracked/public/index.html b/examples/10_untracked/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/10_untracked/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/10_untracked/src/index.tsx b/examples/10_untracked/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/10_untracked/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/10_untracked/src/main.tsx b/examples/10_untracked/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/10_untracked/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/10_untracked/tsconfig.json b/examples/10_untracked/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/10_untracked/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/11_form/index.html b/examples/11_form/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/11_form/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/11_form/package.json b/examples/11_form/package.json index bba01aef..021bbef4 100644 --- a/examples/11_form/package.json +++ b/examples/11_form/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/11_form/public/index.html b/examples/11_form/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/11_form/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/11_form/src/index.tsx b/examples/11_form/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/11_form/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/11_form/src/main.tsx b/examples/11_form/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/11_form/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/11_form/tsconfig.json b/examples/11_form/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/11_form/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/12_async/index.html b/examples/12_async/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/12_async/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/12_async/package.json b/examples/12_async/package.json index aaa7635b..a4c6b09a 100644 --- a/examples/12_async/package.json +++ b/examples/12_async/package.json @@ -2,21 +2,20 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", "react-tracked": "latest", - "typescript": "latest", "use-reducer-async": "latest" }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" + }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/12_async/public/index.html b/examples/12_async/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/12_async/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/12_async/src/index.tsx b/examples/12_async/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/12_async/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/12_async/tsconfig.json b/examples/12_async/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/12_async/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/13_saga/index.html b/examples/13_saga/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/13_saga/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/13_saga/package.json b/examples/13_saga/package.json index 05e52f39..7aa1881e 100644 --- a/examples/13_saga/package.json +++ b/examples/13_saga/package.json @@ -2,22 +2,21 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", "react-tracked": "latest", "redux-saga": "latest", - "typescript": "latest", "use-saga-reducer": "latest" }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" + }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/13_saga/public/index.html b/examples/13_saga/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/13_saga/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/13_saga/src/app.tsx b/examples/13_saga/src/app.tsx index 305afd67..40e044b5 100644 --- a/examples/13_saga/src/app.tsx +++ b/examples/13_saga/src/app.tsx @@ -1,9 +1,9 @@ import { Provider } from './store'; -import Main from './main'; +import Root from './root'; const App = () => ( -
+ ); diff --git a/examples/13_saga/src/index.tsx b/examples/13_saga/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/13_saga/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/13_saga/src/main.tsx b/examples/13_saga/src/main.tsx index 7f5eb621..1a72c017 100644 --- a/examples/13_saga/src/main.tsx +++ b/examples/13_saga/src/main.tsx @@ -1,27 +1,10 @@ -import { useState } from 'react'; +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; -import { useTrackedState } from './store'; -import Person from './person'; -import Counter from './counter'; +import App from './app'; -const Main = () => { - const state = useTrackedState(); - const [id, setId] = useState('3'); - return ( -
-

Person

-
- User ID: - setId(e.target.value)} /> -
- {state.loadingState !== 'idle' ? ( - {state.loadingState}... - ) : ( - - )} - -
- ); -}; - -export default Main; +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/13_saga/src/root.tsx b/examples/13_saga/src/root.tsx new file mode 100644 index 00000000..608064ab --- /dev/null +++ b/examples/13_saga/src/root.tsx @@ -0,0 +1,27 @@ +import { useState } from 'react'; + +import { useTrackedState } from './store'; +import Person from './person'; +import Counter from './counter'; + +const Root = () => { + const state = useTrackedState(); + const [id, setId] = useState('3'); + return ( +
+

Person

+
+ User ID: + setId(e.target.value)} /> +
+ {state.loadingState !== 'idle' ? ( + {state.loadingState}... + ) : ( + + )} + +
+ ); +}; + +export default Root; diff --git a/examples/13_saga/tsconfig.json b/examples/13_saga/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/13_saga/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/14_dynamic/index.html b/examples/14_dynamic/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/14_dynamic/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/14_dynamic/package.json b/examples/14_dynamic/package.json index bba01aef..021bbef4 100644 --- a/examples/14_dynamic/package.json +++ b/examples/14_dynamic/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/14_dynamic/public/index.html b/examples/14_dynamic/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/14_dynamic/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/14_dynamic/src/index.tsx b/examples/14_dynamic/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/14_dynamic/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/14_dynamic/src/main.tsx b/examples/14_dynamic/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/14_dynamic/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/14_dynamic/tsconfig.json b/examples/14_dynamic/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/14_dynamic/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/15_reactmemoref/index.html b/examples/15_reactmemoref/index.html new file mode 100644 index 00000000..ec005a3c --- /dev/null +++ b/examples/15_reactmemoref/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/15_reactmemoref/package.json b/examples/15_reactmemoref/package.json index bba01aef..021bbef4 100644 --- a/examples/15_reactmemoref/package.json +++ b/examples/15_reactmemoref/package.json @@ -2,20 +2,19 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { - "@types/react": "latest", - "@types/react-dom": "latest", "react": "latest", "react-dom": "latest", - "react-scripts": "latest", - "react-tracked": "latest", - "typescript": "latest" + "react-tracked": "latest" + }, + "devDependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite" } } diff --git a/examples/15_reactmemoref/public/index.html b/examples/15_reactmemoref/public/index.html deleted file mode 100644 index ad4c7826..00000000 --- a/examples/15_reactmemoref/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/15_reactmemoref/src/index.tsx b/examples/15_reactmemoref/src/index.tsx deleted file mode 100644 index 10774d1c..00000000 --- a/examples/15_reactmemoref/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/15_reactmemoref/src/main.tsx b/examples/15_reactmemoref/src/main.tsx new file mode 100644 index 00000000..1a72c017 --- /dev/null +++ b/examples/15_reactmemoref/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './app'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/15_reactmemoref/tsconfig.json b/examples/15_reactmemoref/tsconfig.json new file mode 100644 index 00000000..f9e0a7e2 --- /dev/null +++ b/examples/15_reactmemoref/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/package.json b/package.json index 2341b910..8aefa2d0 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,7 @@ "puppeteer": "^22.8.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-tracked": "link:.", "redux-saga": "^1.3.0", "start-server-and-test": "^2.0.3", "ts-expect": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e078f552..e47a5070 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -82,6 +82,9 @@ devDependencies: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-tracked: + specifier: link:. + version: 'link:' redux-saga: specifier: ^1.3.0 version: 1.3.0 diff --git a/tsconfig.json b/tsconfig.json index f53340da..ba300e68 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,6 @@ "compilerOptions": { "strict": true, "target": "es2018", - "downlevelIteration": true, "esModuleInterop": true, "module": "nodenext", "skipLibCheck": true, diff --git a/vite.config.ts b/vite.config.ts index cd2345a1..ee0afaca 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,9 +1,7 @@ /// import { resolve } from 'node:path'; -import { readFileSync } from 'node:fs'; import { defineConfig } from 'vite'; -import type { Plugin } from 'vite'; const { DIR, PORT = '8080' } = process.env; @@ -24,42 +22,5 @@ export default defineConfig(({ mode }) => { root: resolve('examples', DIR), server: { port: Number(PORT) }, resolve: { alias: { 'react-tracked': resolve('src') } }, - plugins: [indexHtml(resolve('examples', DIR, 'public', 'index.html'))], }; }); - -function indexHtml(file: string): Plugin { - const html = readFileSync(file, 'utf8'); - return { - name: 'index-html-plugin', - configureServer(server) { - return () => { - server.middlewares.use((req, res) => { - server - .transformIndexHtml(req.url || '', html) - .then((content) => { - res.statusCode = 200; - res.setHeader('content-type', 'text/html; charset=utf-8'); - res.end(content); - }) - .catch((err) => { - console.error('Error transforming index.html', err); - res.statusCode = 500; - res.end('Internal Server Error'); - }); - }); - }; - }, - config() { - return { optimizeDeps: { entries: ['src/index'] } }; - }, - transformIndexHtml() { - return [ - { - tag: 'script', - attrs: { type: 'module', src: '/src/index' }, - }, - ]; - }, - }; -}