React bindings sketch #72
Conversation
| "[email protected]": "patches/[email protected]" | ||
| } | ||
| }, | ||
| "dependencies": { |
There was a problem hiding this comment.
Should these all be dev dependencies instead?
There was a problem hiding this comment.
actually -- should all of these move to the react sub-project? and not in the main utils package?
(I just saw that the main package has no changes)
| @@ -9,6 +9,7 @@ | |||
| "moduleResolution": "bundler", | |||
| "declaration": true, | |||
| "emitDeclarationOnly": true, | |||
| "jsx": "react-jsx", | |||
There was a problem hiding this comment.
might be better to set this in the react folder, so we don't force an interpretation of JSX to go a certain way
| @@ -20,6 +21,10 @@ for (let entry of entryFiles) { | |||
| export default defineConfig({ | |||
| // esbuild in vite does not support decorators | |||
| // https://github.com/evanw/esbuild/issues/104 | |||
| test: { | |||
| // 👋 add the line below to add jsdom to vite | |||
| environment: 'jsdom', | |||
There was a problem hiding this comment.
this library's tests run in node, firefox, and chrome -- so we may want to conditionally set this for node only
|
The next step here will be to iterate on the underlying signals API, e.g., in the form of proposal-signals/signal-polyfill#22 or another variant that accomplishes the same thing. |
|
|
||
| expect(screen.getByText("count: 0")).toBeInTheDocument(); | ||
|
|
||
| // it does not re-render when the signal is updated |
There was a problem hiding this comment.
| // it does not re-render when the signal is updated | |
| // it does re-render when the signal is updated |
Hi pals 👋🏼 This PR is a proof of concept to add React bindings for the signal-polyfill package, based on tldraw's internal fork of signia's react bindings.
Implementing sound react bindings required a couple of features that the spec doesn't have yet:
Computed.isPending– to allow us to check whether a computed's source values have changed since it was last updated. This is needed because, much like the signal graph algorithm decides whether to recalculate a computed value based on whether its sources have changed, we need to decide whether to tell react to rerender based on whether the render function's reactive sources have changed without actually invoking the render function itself (since it might use react hooks, which throw when invoked outside of a react render cycle)Computed.get(forceRecalculate)– a version ofComputed.getwhich ignores the cache. This is needed because you cannot memoize the result of a react render and simply return that result on future renders. The render may use hooks and React will throw errors if you don't invoke the same set of hooks on every render.These features were added in a pnpm patch file. Unfortunately I had to patch the minified code but they're still quite readable changes.