Skip to content

Conversation

@dwk601
Copy link

@dwk601 dwk601 commented Jun 22, 2025

This pull request migrates the project from React to SolidJS, introducing significant changes to dependencies, components, and state management. The migration improves performance and simplifies reactivity by leveraging SolidJS's fine-grained reactivity model. Below is a summary of the most important changes grouped by theme.

Dependency Updates:

  • Replaced React-related dependencies (react, react-dom, @types/react, @types/react-dom, @testing-library/react, @vitejs/plugin-react) with SolidJS equivalents (solid-js, @solidjs/testing-library, vite-plugin-solid). ([[1]](https://github.com/commaai/flash/pull/158/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L19-R31), [[2]](https://github.com/commaai/flash/pull/158/files#diff-58e6f63d87181b1c6a8cb6e5f1691df04aa32854456efcd52ca71c8541375d26L2-R6))

Component Migration:

  • Updated src/app/App.test.jsx to use SolidJS's Suspense and testing library, replacing React's JSX syntax with SolidJS's function-based syntax. ([src/app/App.test.jsxL1-R8](https://github.com/commaai/flash/pull/158/files#diff-18b239fda5f974720b36f7ddf26ad0c959231930566b5304afecde9cc066790cL1-R8))
  • Migrated src/app/index.jsx and src/main.jsx to SolidJS, replacing React's ReactDOM.createRoot with SolidJS's render function and adding a development environment check for the root element. ([[1]](https://github.com/commaai/flash/pull/158/files#diff-5f8d22049fec5561962e53e43d834657f76af599fac66de962b2bfa10d251d4cL1-R1), [[2]](https://github.com/commaai/flash/pull/158/files#diff-752aae33033979082689dba3e7f51955013615f0535c21ac94265e067da311edL1-R18))

State Management:

  • Refactored state in src/app/Flash.jsx from React's useState and useRef to SolidJS's createSignal, onMount, and onCleanup, ensuring state updates are reactive and scoped. ([[1]](https://github.com/commaai/flash/pull/158/files#diff-2f137e0d23b8115a30a10a4f9d67a736b048c2eb5b9029787834afa10888642bL1-R1), [[2]](https://github.com/commaai/flash/pull/158/files#diff-2f137e0d23b8115a30a10a4f9d67a736b048c2eb5b9029787834afa10888642bL175-R192), [[3]](https://github.com/commaai/flash/pull/158/files#diff-2f137e0d23b8115a30a10a4f9d67a736b048c2eb5b9029787834afa10888642bL202-R286))
  • Adjusted conditional rendering and event listeners in Flash.jsx to align with SolidJS's reactive primitives. ([src/app/Flash.jsxL202-R286](https://github.com/commaai/flash/pull/158/files#diff-2f137e0d23b8115a30a10a4f9d67a736b048c2eb5b9029787834afa10888642bL202-R286))

Utility Updates:

  • Updated src/utils/image.js to replace React's useEffect and useRef with SolidJS's onMount and a plain object for managing the ImageManager reference. ([[1]](https://github.com/commaai/flash/pull/158/files#diff-c81787bf9bb6cd057667d950d2dc18cf721a556a19a51d19d0011ae1502c3553L1-R1), [[2]](https://github.com/commaai/flash/pull/158/files#diff-c81787bf9bb6cd057667d950d2dc18cf721a556a19a51d19d0011ae1502c3553L86-R93))

Build Tool Configuration:

  • Replaced the Vite plugin for React with the SolidJS plugin in vite.config.js. ([vite.config.jsL2-R6](https://github.com/commaai/flash/pull/158/files#diff-58e6f63d87181b1c6a8cb6e5f1691df04aa32854456efcd52ca71c8541375d26L2-R6))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant