From a795dbe9d30274d97233eec3be4edb08c4bb9eae Mon Sep 17 00:00:00 2001 From: Jakub Borowski Date: Tue, 17 Dec 2024 11:26:09 -0700 Subject: [PATCH 1/2] chore(kitchen-sink): update dependencies and fix a key issue in the todo list --- packages/kitchen-sink/package.json | 11 ++- packages/kitchen-sink/src/index.jsx | 5 +- packages/kitchen-sink/vite.config.mjs | 6 +- pnpm-lock.yaml | 114 +++++++++++++++++++++++--- 4 files changed, 111 insertions(+), 25 deletions(-) diff --git a/packages/kitchen-sink/package.json b/packages/kitchen-sink/package.json index eb5b28e5..b6fcec76 100644 --- a/packages/kitchen-sink/package.json +++ b/packages/kitchen-sink/package.json @@ -9,15 +9,14 @@ }, "dependencies": { "@vercel/analytics": "^1.4.0", - "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110", - "react": "19.0.0-rc.1", - "react-dom": "19.0.0-rc.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-scan": "^0.0.34", - "sugar-high": "^0.7.5", - "vite-plugin-inspect": "^0.8.7" + "sugar-high": "^0.7.5" }, "devDependencies": { "@vitejs/plugin-react": "^4.3.1", - "vite": "^5.4.3" + "vite": "^5.4.3", + "vite-plugin-inspect": "^0.8.7" } } diff --git a/packages/kitchen-sink/src/index.jsx b/packages/kitchen-sink/src/index.jsx index f3774ca6..5800502d 100644 --- a/packages/kitchen-sink/src/index.jsx +++ b/packages/kitchen-sink/src/index.jsx @@ -59,8 +59,8 @@ export const App = () => { export const TaskList = ({ tasks, onDelete }) => { return ( ); @@ -123,6 +123,7 @@ export const Input = ({ onChange, onEnter, value }) => { onChange={(e) => onChange(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { + if (e.target.value.length === 0) return; onEnter(e.target.value); } }} diff --git a/packages/kitchen-sink/vite.config.mjs b/packages/kitchen-sink/vite.config.mjs index cb79386e..9a94619a 100644 --- a/packages/kitchen-sink/vite.config.mjs +++ b/packages/kitchen-sink/vite.config.mjs @@ -5,11 +5,7 @@ import Inspect from 'vite-plugin-inspect'; export default defineConfig({ plugins: [ - react({ - // babel: { - // plugins: [['babel-plugin-react-compiler', {}]], - // }, - }), + react({}), Inspect(), ], resolve: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3e645f8..23b321d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: dependencies: '@vercel/speed-insights': specifier: ^1.1.0 - version: 1.1.0(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106) + version: 1.1.0(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0) devDependencies: '@biomejs/biome': specifier: ^1.9.4 @@ -127,25 +127,19 @@ importers: dependencies: '@vercel/analytics': specifier: ^1.4.0 - version: 1.4.1(@remix-run/react@2.15.0(react-dom@19.0.0-rc.1(react@19.0.0-rc.1))(react@19.0.0-rc.1)(typescript@5.6.3))(next@15.0.3(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc.1(react@19.0.0-rc.1))(react@19.0.0-rc.1))(react@19.0.0-rc.1) - babel-plugin-react-compiler: - specifier: 19.0.0-beta-a7bf2bd-20241110 - version: 19.0.0-beta-a7bf2bd-20241110 + version: 1.4.1(@remix-run/react@2.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.6.3))(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0) react: - specifier: 19.0.0-rc.1 - version: 19.0.0-rc.1 + specifier: 19.0.0 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc.1 - version: 19.0.0-rc.1(react@19.0.0-rc.1) + specifier: 19.0.0 + version: 19.0.0(react@19.0.0) react-scan: specifier: ^0.0.34 version: 0.0.34 sugar-high: specifier: ^0.7.5 version: 0.7.5 - vite-plugin-inspect: - specifier: ^0.8.7 - version: 0.8.7(rollup@4.28.0)(vite@5.4.3(@types/node@22.10.2)(terser@5.36.0)) devDependencies: '@vitejs/plugin-react': specifier: ^4.3.1 @@ -153,6 +147,9 @@ importers: vite: specifier: ^5.4.3 version: 5.4.3(@types/node@22.10.2)(terser@5.36.0) + vite-plugin-inspect: + specifier: ^0.8.7 + version: 0.8.7(rollup@4.28.0)(vite@5.4.3(@types/node@22.10.2)(terser@5.36.0)) packages/scan: dependencies: @@ -4030,6 +4027,11 @@ packages: peerDependencies: react: ^18.2.0 + react-dom@19.0.0: + resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==} + peerDependencies: + react: ^19.0.0 + react-dom@19.0.0-rc-66855b96-20241106: resolution: {integrity: sha512-D25vdaytZ1wFIRiwNU98NPQ/upS2P8Co4/oNoa02PzHbh8deWdepjm5qwZM/46OdSiGv4WSWwxP55RO9obqJEQ==} peerDependencies: @@ -4102,6 +4104,10 @@ packages: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} + react@19.0.0: + resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==} + engines: {node: '>=0.10.0'} + react@19.0.0-rc-66855b96-20241106: resolution: {integrity: sha512-klH7xkT71SxRCx4hb1hly5FJB21Hz0ACyxbXYAECEqssUjtJeFUAaI2U1DgJAzkGEnvEm3DkxuBchMC/9K4ipg==} engines: {node: '>=0.10.0'} @@ -4256,6 +4262,9 @@ packages: scheduler@0.23.2: resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + scheduler@0.25.0: + resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==} + scheduler@0.25.0-rc-66855b96-20241106: resolution: {integrity: sha512-HQXp/Mnp/MMRSXMQF7urNFla+gmtXW/Gr1KliuR0iboTit4KvZRY8KYaq5ccCTAOJiUqQh2rE2F3wgUekmgdlA==} @@ -5738,6 +5747,19 @@ snapshots: optionalDependencies: typescript: 5.6.3 + '@remix-run/react@2.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.6.3)': + dependencies: + '@remix-run/router': 1.21.0 + '@remix-run/server-runtime': 2.15.0(typescript@5.6.3) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + react-router: 6.28.0(react@19.0.0) + react-router-dom: 6.28.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + turbo-stream: 2.4.0 + optionalDependencies: + typescript: 5.6.3 + optional: true + '@remix-run/react@2.15.0(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)(typescript@5.6.3)': dependencies: '@remix-run/router': 1.21.0 @@ -6326,6 +6348,12 @@ snapshots: '@ungap/structured-clone@1.2.0': {} + '@vercel/analytics@1.4.1(@remix-run/react@2.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.6.3))(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)': + optionalDependencies: + '@remix-run/react': 2.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.6.3) + next: 15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + react: 19.0.0 + '@vercel/analytics@1.4.1(@remix-run/react@2.15.0(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)(typescript@5.6.3))(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)': optionalDependencies: '@remix-run/react': 2.15.0(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)(typescript@5.6.3) @@ -6338,6 +6366,11 @@ snapshots: next: 15.0.3(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc.1(react@19.0.0-rc.1))(react@19.0.0-rc.1) react: 19.0.0-rc.1 + '@vercel/speed-insights@1.1.0(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)': + optionalDependencies: + next: 15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + react: 19.0.0 + '@vercel/speed-insights@1.1.0(next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)': optionalDependencies: next: 15.0.3(@babel/core@7.26.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106) @@ -8687,6 +8720,32 @@ snapshots: - '@babel/core' - babel-plugin-macros + next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0): + dependencies: + '@next/env': 15.0.3 + '@swc/counter': 0.1.3 + '@swc/helpers': 0.5.13 + busboy: 1.6.0 + caniuse-lite: 1.0.30001684 + postcss: 8.4.31 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + styled-jsx: 5.1.6(@babel/core@7.26.0)(react@19.0.0) + optionalDependencies: + '@next/swc-darwin-arm64': 15.0.3 + '@next/swc-darwin-x64': 15.0.3 + '@next/swc-linux-arm64-gnu': 15.0.3 + '@next/swc-linux-arm64-musl': 15.0.3 + '@next/swc-linux-x64-gnu': 15.0.3 + '@next/swc-linux-x64-musl': 15.0.3 + '@next/swc-win32-arm64-msvc': 15.0.3 + '@next/swc-win32-x64-msvc': 15.0.3 + sharp: 0.33.5 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + optional: true + next@15.0.3(@babel/core@7.26.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106): dependencies: '@next/env': 15.0.3 @@ -9085,6 +9144,11 @@ snapshots: react: 18.2.0 scheduler: 0.23.2 + react-dom@19.0.0(react@19.0.0): + dependencies: + react: 19.0.0 + scheduler: 0.25.0 + react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106): dependencies: react: 19.0.0-rc-66855b96-20241106 @@ -9114,6 +9178,14 @@ snapshots: react-dom: 18.2.0(react@18.2.0) react-router: 6.28.0(react@18.2.0) + react-router-dom@6.28.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0): + dependencies: + '@remix-run/router': 1.21.0 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + react-router: 6.28.0(react@19.0.0) + optional: true + react-router-dom@6.28.0(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106): dependencies: '@remix-run/router': 1.21.0 @@ -9148,6 +9220,12 @@ snapshots: '@remix-run/router': 1.21.0 react: 18.2.0 + react-router@6.28.0(react@19.0.0): + dependencies: + '@remix-run/router': 1.21.0 + react: 19.0.0 + optional: true + react-router@6.28.0(react@19.0.0-rc-66855b96-20241106): dependencies: '@remix-run/router': 1.21.0 @@ -9202,6 +9280,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + react@19.0.0: {} + react@19.0.0-rc-66855b96-20241106: {} react@19.0.0-rc.1: {} @@ -9390,6 +9470,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + scheduler@0.25.0: {} + scheduler@0.25.0-rc-66855b96-20241106: {} scheduler@0.25.0-rc.1: {} @@ -9670,6 +9752,14 @@ snapshots: optionalDependencies: '@babel/core': 7.26.0 + styled-jsx@5.1.6(@babel/core@7.26.0)(react@19.0.0): + dependencies: + client-only: 0.0.1 + react: 19.0.0 + optionalDependencies: + '@babel/core': 7.26.0 + optional: true + styled-jsx@5.1.6(@babel/core@7.26.0)(react@19.0.0-rc-66855b96-20241106): dependencies: client-only: 0.0.1 From 174c4b28383ffe0d2ea473f2610952b681e583a8 Mon Sep 17 00:00:00 2001 From: Jakub Borowski Date: Tue, 17 Dec 2024 20:06:09 -0700 Subject: [PATCH 2/2] move to using a object containing an id and text for each task, this improves key tracking and deletions --- packages/kitchen-sink/src/index.jsx | 40 ++++++++++++++++------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/kitchen-sink/src/index.jsx b/packages/kitchen-sink/src/index.jsx index 5800502d..64e34312 100644 --- a/packages/kitchen-sink/src/index.jsx +++ b/packages/kitchen-sink/src/index.jsx @@ -38,16 +38,16 @@ export const App = () => {
{ - if (!value) return; - setTasks([...tasks, value]); + onCreate={(task) => { + if (!task) return; + setTasks([...tasks, task]); }} /> - setTasks(tasks.filter((task) => task !== value)) - } + onDelete={(task) => { + setTasks(tasks.filter((t) => t.id !== task.id)); + }} />
@@ -59,8 +59,8 @@ export const App = () => { export const TaskList = ({ tasks, onDelete }) => { return ( ); @@ -70,7 +70,7 @@ export const TaskItem = ({ task, onDelete }) => { const { tooltip } = React.useContext(TooltipContext); return (
  • - {task} + {task.text}
    • ); @@ -82,7 +82,7 @@ export const Text = ({ children }) => { export const Button = ({ onClick, children }) => { return ( - ); @@ -91,21 +91,26 @@ export const Button = ({ onClick, children }) => { export const AddTaskBar = ({ onCreate }) => { const [value, setValue] = useState(''); const [id, setId] = useState(0); + + const handleCreate = () => { + if (value.length === 0) return; + onCreate({ id, text: `${value} (${id})` }); + setValue(''); + setId(id + 1); + }; + return (
    setValue(value)} - onEnter={(value) => { - onCreate(`${value} (${id})`); - setValue(''); - setId(id + 1); + onEnter={() => { + handleCreate(); }} value={value} />