atom.io/solid

[jeremybanka]

User description

• 🎁 solidjs integration
• 🔧 add debug configuration for running built code
• 🚚 naming convention for alternative jsx consumers
• 🔨 fix built solid files
• 🧹 don't import all of react
• 🔧 only apply solid plugin where appropriate
• 🐛 use context
• 🧹 remove meaningless jsx pragma
• ✨ useTL
• 🔧 finish build script
• ♻️ update to new atom.io apis
• ♻️ use hyperscript

---

PR Type

Enhancement, Tests, Configuration changes

---

Description

• Integrated SolidJS into the project with new context providers and hooks.
• Added comprehensive tests for SolidJS hooks using the SolidJS testing library.
• Refactored React hooks to improve context usage and state management.
• Updated build and configuration scripts to support SolidJS.
• Added new utility functions for parsing state overloads and syncing external stores.

---

Changes walkthrough 📝

	Relevant files
Enhancement	13 files finish-solid-build.node.ts Add script for replacing phrases in build files                    packages/atom.io/scripts/finish-solid-build.node.ts Added a script to replace phrases in files. Utilizes fs and path modules for file operations. Logs success or error messages during the process. +29/-0    parse-state-overloads.ts Add utility functions for parsing state overloads                packages/atom.io/internal/src/parse-state-overloads.ts Added utility functions for parsing state overloads. Handles both readable and writable tokens. Includes error handling for token retrieval. +44/-1    store-context.tsx Refactor StoreContext and StoreProvider in React                  packages/atom.io/react/src/store-context.tsx Refactored to use createContext from React. Updated StoreProvider to a function component. +10/-9    use-i.ts Refactor useI hook with direct React hooks usage                  packages/atom.io/react/src/use-i.ts Refactored to use hooks from React directly. Integrated parseStateOverloads for token parsing. +5/-5      use-json.ts Refactor useJSON hook for improved context usage                  packages/atom.io/react/src/use-json.ts Refactored to use useContext from React. Improved token handling with findInStore. +2/-2      use-o.ts Refactor useO hook with updated React hooks                            packages/atom.io/react/src/use-o.ts Refactored to use useContext, useId, and useSyncExternalStore. Integrated parseStateOverloads for token parsing. +9/-6      use-tl.ts Refactor useTL hook for timeline management                            packages/atom.io/react/src/use-tl.ts Refactored to use useContext, useId, and useSyncExternalStore. Improved timeline subscription and retrieval. +6/-6      index.ts Add exports for SolidJS context and hooks                                packages/atom.io/solid/src/index.ts Added exports for SolidJS context provider and hooks. +4/-0      store-context-provider.solid.tsx Add SolidJS store context provider                                              packages/atom.io/solid/src/store-context-provider.solid.tsx Created SolidJS store context provider. Utilizes SolidJS createContext and hyperscript. +19/-0    use-i.solid.ts Implement useI hook for SolidJS                                                    packages/atom.io/solid/src/use-i.solid.ts Implemented useI hook for SolidJS. Utilizes context and state overload parsing. +25/-0    use-o.solid.ts Implement useO hook for SolidJS                                                    packages/atom.io/solid/src/use-o.solid.ts Implemented useO hook for SolidJS. Uses external store synchronization. +31/-0    use-sync-external-store.solid.ts Add utility for syncing external store in SolidJS                packages/atom.io/solid/src/use-sync-external-store.solid.ts Added utility for syncing external store in SolidJS. Utilizes SolidJS signals and effects. +21/-0    use-tl.solid.ts Implement useTL hook for SolidJS                                                  packages/atom.io/solid/src/use-tl.solid.ts Implemented useTL hook for SolidJS. Manages timeline state and subscriptions. +53/-0
Tests	1 files hooks.solid.test.tsx Add tests for SolidJS hooks and state management                  packages/atom.io/tests/public/hooks.solid.test.tsx Added tests for SolidJS hooks. Utilizes SolidJS testing library for rendering components. Tests state management and timeline features. +279/-0
Configuration changes	2 files tsup.config.ts Add tsup configuration for SolidJS package                              packages/atom.io/solid/tsup.config.ts Added tsup configuration for SolidJS package. +5/-0      package.json Update package.json for SolidJS integration                            packages/atom.io/package.json Updated build scripts to include SolidJS. Added @solidjs/testing-library as a dev dependency. +16/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[changeset-bot]

⚠️ No Changeset found

Latest commit: bf9e4e7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
atom-io-fyi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 7, 2024 8:09am
wayfarer-quest	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 7, 2024 8:09am

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Key issues to review Error Handling The function replacePhraseInFile uses a try-catch block for error handling, but it might be beneficial to rethrow the error or handle it in a way that doesn't potentially silence other operational errors. Consider improving the error handling strategy to ensure that errors are properly managed or logged. Error Propagation The function parseStateOverloads throws a NotFoundError which might not be caught or handled by the calling function. This could lead to unhandled exceptions in runtime. Ensure that errors are handled appropriately in the calling context or consider returning error codes. React Import The file seems to have switched from using React to using direct imports from react for hooks and other features. Ensure that this change is consistent across all files and that there are no residual React namespace imports that could cause confusion or errors. SolidJS Convention The use of createSignal and createEffect follows SolidJS conventions, but ensure that the usage of these APIs is optimized for reactivity and performance. Review the dependency tracking and reactivity system to ensure it aligns with SolidJS best practices.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Performance	Replace synchronous file operations with asynchronous ones to improve performance Consider using asynchronous file operations to avoid blocking the event loop, especially for I/O-heavy operations. This will improve the performance of your script when dealing with file systems. packages/atom.io/scripts/finish-solid-build.node.ts [12-16] -const data = fs.readFileSync(filePath, `utf8`) +const data = await fs.promises.readFile(filePath, `utf8`) const result = data.replace(new RegExp(oldPhrase, `g`), newPhrase) -fs.writeFileSync(filePath, result, `utf8`) +await fs.promises.writeFile(filePath, result, `utf8`) Suggestion importance[1-10]: 9 Why: The suggestion to use asynchronous file operations is highly relevant for improving the performance of the script, especially in I/O-heavy operations. This change can prevent blocking the event loop, which is crucial for maintaining responsiveness in Node.js applications.	9
Possible issue	Validate and escape oldPhrase to ensure it is treated correctly as a regular expression To avoid potential issues with global regular expressions and the replace method, consider checking if oldPhrase is a valid regex. If not, escape it before using. packages/atom.io/scripts/finish-solid-build.node.ts [14] -const result = data.replace(new RegExp(oldPhrase, `g`), newPhrase) +const safeOldPhrase = RegExp.escape(oldPhrase); +const result = data.replace(new RegExp(safeOldPhrase, `g`), newPhrase) Suggestion importance[1-10]: 7 Why: The suggestion addresses a potential issue with using global regular expressions in the replace method. Escaping oldPhrase ensures that it is safely used as a regular expression, which can prevent runtime errors.	7
Enhancement	Use a more robust logging framework for better log management Replace the console.log and console.error with a more robust logging framework that supports different levels and outputs, which can be configured based on the environment. packages/atom.io/scripts/finish-solid-build.node.ts [18-22] -console.log(`Replaced all instances of "${oldPhrase}" with "${newPhrase}" in file "${filePath}"`) -console.error(`Error processing file "${filePath}":`, error) +logger.info(`Replaced all instances of "${oldPhrase}" with "${newPhrase}" in file "${filePath}"`) +logger.error(`Error processing file "${filePath}":`, error) Suggestion importance[1-10]: 6 Why: While replacing console.log and console.error with a logging framework can enhance log management, it is not critical for the functionality of the script. This suggestion is more about improving maintainability and scalability.	6