├── .gitignore ├── .gtihub └── workflows │ └── main-ci.yml ├── .prettierrc ├── LICENSE ├── README.md ├── babel.config.cjs ├── jest.config.cjs ├── package-lock.json ├── package.json ├── resolver.cjs ├── src └── index.ts ├── test └── react-solid-state.spec.tsx └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /.gtihub/workflows/main-ci.yml: -------------------------------------------------------------------------------- 1 | name: 'React Solid State CI' 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - '*' 7 | push: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | job: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - uses: actions/setup-node@v2 17 | with: 18 | node-version: 14 19 | 20 | - name: Installing deps 21 | run: npm install 22 | 23 | - name: Building lib 24 | run: npm run build 25 | 26 | - name: Testing & Coverage 27 | run: | 28 | npm run test 29 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": false, 6 | "arrowParens": "avoid", 7 | "printWidth": 100 8 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-2021 Ryan Carniato 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Solid State 2 | 3 | [![Build Status](https://github.com/solidjs/react-solid-states/workflows/React%20Solid%20State%20CI/badge.svg)](https://github.com/solidjs/react-solid-state/actions/workflows/main-ci.yml) 4 | [![NPM Version](https://img.shields.io/npm/v/react-solid-state.svg?style=flat)](https://www.npmjs.com/package/react-solid-state) 5 | ![](https://img.shields.io/librariesio/release/npm/react-solid-state) 6 | 7 | This is a local state swap for React using [SolidJS](https://github.com/solidjs/solid). Instead of worrying about when your components should update you can use declarative data. This makes use of the new React Hooks API. However it differs in a few really key ways: 8 | - Dependencies are automatically tracked. While there is an option to set explicit dependencies it is isn't necessary. 9 | - Nested hooks are allowed. Effects that produce sub nested effects are fair game. 10 | 11 | The goal here is to give as close as possible to Solid's easy state management and fine-grained dependency detection while still being able to use React. All of [Solid's API methods](https://www.solidjs.com/docs/latest/api) have been ported. Note: this uses React Hooks so it only works with Function Components which is consistent with how Components work in Solid. 12 | 13 | There are a few differences in the Solid API from some React Hooks of the same name. Solid `Store`s are objects much like traditional React State. There is a `useCleanup` method that lets you register release code at both the component unmount level and in each Hook. `useEffect` doesn't expect a cleanup/dispose method returned for that reason. `useMemo` (and `useSignal`) return getters rather than the the pure value. This is because the context where data gets accessed is the key to automatic dependency tracking. For all the information of how Solid works, look at the [website](https://solidjs.com). 14 | 15 | To get started, simply wrap your components in `withSolid` as a HOC, and have your Component return a Function with your JSX. From there use your hooks. 16 | 17 | This package exports both direct Solid API named functions like `createEffect`, and `use`-prefixed ones. Solid isn't subject to the Hook rules, so it makes sense to use `create` prefixes, but if you want to use `use` you can. 18 | 19 | ```jsx 20 | import { withSolid, createSignal } from 'react-solid-state' 21 | import React from 'react' 22 | 23 | const WelcomeComponent = withSolid(props => { 24 | const [recipient, setRecipient] = createSignal('John'); 25 | return () => (
setRecipient('Jake')}> 26 | Hello { recipient() } 27 |
); 28 | }) 29 | ``` 30 | 31 | Alternatively you can use the `useObserver` Hook instead: 32 | 33 | ```jsx 34 | import { useObserver, createSignal, createEffect, onCleanup } from 'react-solid-state' 35 | import React from 'react' 36 | 37 | const CounterComponent = props => { 38 | const [count, setCount] = createSignal(0); 39 | createEffect(() => { 40 | const timer = setInterval(() => setCount(c => c + 1), 1000); 41 | onCleanup(() => clearInterval(timer)); 42 | }) 43 | return useObserver(() =>
{count()}
); 44 | }) 45 | ``` 46 | -------------------------------------------------------------------------------- /babel.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', {targets: {'node': 'current'}}], 4 | '@babel/preset-react', 5 | '@babel/preset-typescript', 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /jest.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "resolver": "./resolver.cjs" 3 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-solid-state", 3 | "description": "Auto tracking state management for modern React", 4 | "version": "0.27.3", 5 | "author": "Ryan Carniato", 6 | "license": "MIT", 7 | "homepage": "https://github.com/solidjs/react-solid-state#readme", 8 | "type": "module", 9 | "main": "dist/index.js", 10 | "types": "dist/index.d.ts", 11 | "files": [ 12 | "dist" 13 | ], 14 | "scripts": { 15 | "prebuild": "npm run clean", 16 | "clean": "rimraf dist/ coverage/", 17 | "build": "tsc", 18 | "test": "jest" 19 | }, 20 | "dependencies": { 21 | "solid-js": "^1.3.3" 22 | }, 23 | "peerDependencies": { 24 | "react": "*", 25 | "react-dom": "*" 26 | }, 27 | "devDependencies": { 28 | "@babel/preset-env": "7.13.8", 29 | "@babel/preset-react": "^7.8.0", 30 | "@babel/preset-typescript": "7.13.0", 31 | "@types/jest": "^26.0.23", 32 | "@types/react": "^17.0.0", 33 | "jest": "^26.6.3", 34 | "react": "^16.11.0", 35 | "react-dom": "^16.11.0", 36 | "react-testing-library": "^7.0.1", 37 | "rimraf": "^3.0.2", 38 | "typescript": "^4.2.4" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /resolver.cjs: -------------------------------------------------------------------------------- 1 | module.exports = (request, options) => { 2 | return options.defaultResolver(request, { 3 | ...options, 4 | packageFilter: pkg => { 5 | if(!pkg.name.startsWith("solid-js")) return pkg; 6 | return { 7 | ...pkg, 8 | main: pkg.browser ? pkg.browser[pkg.main] : pkg.main, 9 | }; 10 | }, 11 | }); 12 | }; -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | memo, 3 | PropsWithChildren, 4 | useCallback as rCallback, 5 | useEffect as rEffect, 6 | useMemo as rMemo, 7 | useRef as rRef, 8 | useState as rState 9 | } from "react"; 10 | import { 11 | createComputed as sComputed, 12 | createEffect as sEffect, 13 | createMemo as sMemo, 14 | createRoot, 15 | createSignal as sSignal, 16 | onCleanup as sCleanup, 17 | createReaction 18 | } from "solid-js"; 19 | import { createMutable, createStore, Store } from "solid-js/store"; 20 | export { batch, untrack } from "solid-js"; 21 | export { reconcile, produce } from "solid-js/store"; 22 | 23 | interface CreateComputed { 24 | (fn: (v?: T) => T, value: T): void; 25 | value?: undefined; 26 | options?: { equals?: false | ((prev: T, next: T) => boolean) }; 27 | } 28 | 29 | interface CreateEffect { 30 | (fn: (v?: T) => T, value: T): void; 31 | value?: undefined; 32 | options?: { equals?: false | ((prev: T, next: T) => boolean) }; 33 | } 34 | 35 | interface CreateMemo { 36 | ( 37 | fn: (v?: T) => T, 38 | value?: undefined, 39 | options?: { equals?: false | ((prev: T, next: T) => boolean) } 40 | ): () => T; 41 | } 42 | 43 | let inSolidEffect = false; 44 | function trackNesting(args: T): T { 45 | const fn = args[0] as (...args: any[]) => void; 46 | return [ 47 | function (...args: any[]) { 48 | const outside = inSolidEffect; 49 | inSolidEffect = true; 50 | const ret = fn(...args); 51 | inSolidEffect = outside; 52 | return ret; 53 | }, 54 | ...args.slice(1) 55 | ] as T; 56 | } 57 | 58 | function useForceUpdate() { 59 | const [, setTick] = rState(0); 60 | return rCallback(() => setTick(t => t + 1), []); 61 | } 62 | 63 | export function useObserver(fn: () => T) { 64 | const forceUpdate = useForceUpdate(), 65 | reaction = rRef<{ dispose: () => void; track: (fn: () => void) => void }>(); 66 | if (!reaction.current) { 67 | reaction.current = createRoot(dispose => ({ 68 | dispose, 69 | track: createReaction(forceUpdate) 70 | })); 71 | } 72 | rEffect(() => reaction.current!.dispose, []); 73 | 74 | let rendering!: T; 75 | reaction.current.track(() => (rendering = fn())); 76 | return rendering; 77 | } 78 | 79 | export function withSolid

( 80 | ComponentType: (props: PropsWithChildren

, r: any) => () => JSX.Element 81 | ) { 82 | return memo

((p, r) => { 83 | const component = ComponentType(p, r); 84 | return (component && useObserver(component)) || null; 85 | }); 86 | } 87 | 88 | export function useStore(state: T | Store, options?: { name?: string }) { 89 | if (inSolidEffect) return createStore(state, options); 90 | return rMemo(() => createStore(state, options), []); 91 | } 92 | 93 | export function useMutable(state: T, options?: { name?: string }) { 94 | if (inSolidEffect) return createMutable(state, options); 95 | return rMemo(() => createMutable(state, options), []); 96 | } 97 | 98 | export function useSignal( 99 | value: T, 100 | options?: { equals?: false | ((prev: T, next: T) => boolean); name?: string } 101 | ) { 102 | if (inSolidEffect) return sSignal(value, options); 103 | return rMemo(() => sSignal(value, options), []); 104 | } 105 | 106 | export function useEffect(...args: Parameters>) { 107 | if (inSolidEffect) return sEffect(...args); 108 | const dispose = rRef<() => void>(); 109 | rEffect(() => dispose.current, []); 110 | if (!dispose.current) { 111 | createRoot(disposer => { 112 | dispose.current = disposer; 113 | sEffect(...trackNesting(args)); 114 | }); 115 | } 116 | } 117 | 118 | export function useComputed(...args: Parameters>) { 119 | if (inSolidEffect) return sComputed(...args); 120 | const dispose = rRef<() => void>(); 121 | rEffect(() => dispose.current, []); 122 | if (!dispose.current) { 123 | createRoot(disposer => { 124 | dispose.current = disposer; 125 | sComputed(...trackNesting(args)); 126 | }); 127 | } 128 | } 129 | 130 | export function useMemo(...args: Parameters>) { 131 | if (inSolidEffect) return sMemo(...args); 132 | let dispose: () => void; 133 | rEffect(() => dispose, []); 134 | return rMemo( 135 | () => 136 | createRoot(disposer => { 137 | dispose = disposer; 138 | return sMemo(...trackNesting(args)); 139 | }), 140 | [] 141 | ); 142 | } 143 | 144 | export function useCleanup(fn: Parameters[0]) { 145 | inSolidEffect ? sCleanup(fn) : rEffect(() => fn, []); 146 | } 147 | 148 | // solid naming convention for easy swap 149 | export { 150 | useSignal as createSignal, 151 | useMemo as createMemo, 152 | useCleanup as onCleanup, 153 | useEffect as createEffect, 154 | useComputed as createComputed, 155 | useStore as createStore, 156 | useMutable as createMutable 157 | }; 158 | -------------------------------------------------------------------------------- /test/react-solid-state.spec.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useCallback } from "react"; 2 | import { render, cleanup, act } from "react-testing-library"; 3 | 4 | import { 5 | withSolid, 6 | useObserver, 7 | createStore, 8 | createMutable, 9 | createEffect, 10 | createComputed, 11 | createMemo, 12 | createSignal, 13 | onCleanup, 14 | untrack 15 | } from "../src/index"; 16 | 17 | interface OnCleanupProp { 18 | handleCleanup?: () => void; 19 | } 20 | 21 | const Counter = withSolid(({ handleCleanup }) => { 22 | const [state, setState] = createStore<{ count: number; tick: number }>({ count: 0, tick: 0 }), 23 | [count, setCount] = createSignal(10), 24 | getCounterText = createMemo(() => `Counter ${state.count} ${count()}`); 25 | createComputed(() => { 26 | if (state.tick > 0) { 27 | setState("count", c => c + 1); 28 | setCount(untrack(count) + 1); 29 | } 30 | }, undefined); 31 | onCleanup(() => handleCleanup()); 32 | return () => ( 33 |

{ 35 | setState("tick", t => t + 1); 36 | }} 37 | > 38 | {getCounterText()} 39 |
40 | ); 41 | }); 42 | 43 | const CounterMutable = withSolid(({ handleCleanup }) => { 44 | const state = createMutable({ count: 0, tick: 0 }), 45 | [count, setCount] = createSignal(10), 46 | getCounterText = createMemo(() => `Counter ${state.count} ${count()}`); 47 | createComputed(() => { 48 | if (state.tick > 0) { 49 | untrack(() => { 50 | state.count++; 51 | setCount(count() + 1); 52 | }); 53 | } 54 | }, undefined); 55 | onCleanup(() => handleCleanup()); 56 | return () =>
state.tick++}>{getCounterText()}
; 57 | }); 58 | 59 | const Nested = () => { 60 | const [a, setA] = createSignal(0), 61 | [result, setResult] = createSignal(0), 62 | refB = useRef(null), 63 | incrementA = useCallback(() => setA(a() + 1), []), 64 | incrementB = useCallback(() => refB.current.set(refB.current.value() + 1), []); 65 | createEffect(() => { 66 | const [b, setB] = createSignal(a()); 67 | refB.current = { value: b, set: setB }; 68 | createEffect(() => setResult(b()), undefined); 69 | onCleanup(() => (refB.current = undefined)); 70 | }, undefined); 71 | return useObserver(() => ( 72 | <> 73 |
74 |
75 |
{result()}
76 | 77 | )); 78 | }; 79 | 80 | describe("Simple Counter", () => { 81 | let ref, disposed; 82 | function handleCleanup() { 83 | disposed = true; 84 | } 85 | test("Create Component", () => { 86 | const { container } = render(); 87 | expect(container.firstElementChild.innerHTML).toBe("Counter 0 10"); 88 | ref = container.firstChild; 89 | }); 90 | test("Triggering Computed", async () => { 91 | act(() => ref.click()); 92 | expect(ref.innerHTML).toBe("Counter 1 11"); 93 | act(() => ref.click()); 94 | expect(ref.innerHTML).toBe("Counter 2 12"); 95 | }); 96 | test("Cleanup", () => { 97 | expect(disposed).toBeUndefined(); 98 | cleanup(); 99 | expect(disposed).toBe(true); 100 | }); 101 | }); 102 | 103 | describe("Simple Mutable Counter", () => { 104 | let ref, disposed; 105 | function handleCleanup() { 106 | disposed = true; 107 | } 108 | test("Create Component", () => { 109 | const { container } = render(); 110 | expect(container.firstElementChild.innerHTML).toBe("Counter 0 10"); 111 | ref = container.firstChild; 112 | }); 113 | test("Triggering Computed", async () => { 114 | act(() => ref.click()); 115 | expect(ref.innerHTML).toBe("Counter 1 11"); 116 | act(() => ref.click()); 117 | expect(ref.innerHTML).toBe("Counter 2 12"); 118 | }); 119 | test("Cleanup", () => { 120 | expect(disposed).toBeUndefined(); 121 | cleanup(); 122 | expect(disposed).toBe(true); 123 | }); 124 | }); 125 | 126 | describe("Nested Effect", () => { 127 | let ref; 128 | test("Create Component", () => { 129 | const { container } = render(); 130 | expect(container.children[2].innerHTML).toBe("0"); 131 | ref = container.childNodes; 132 | }); 133 | test("Triggering Effect", async () => { 134 | act(() => ref[0].click()); 135 | expect(ref[2].innerHTML).toBe("1"); 136 | act(() => ref[1].click()); 137 | expect(ref[2].innerHTML).toBe("2"); 138 | act(() => ref[1].click()); 139 | expect(ref[2].innerHTML).toBe("3"); 140 | act(() => ref[0].click()); 141 | expect(ref[2].innerHTML).toBe("2"); 142 | }); 143 | test("Cleanup", () => { 144 | cleanup(); 145 | }); 146 | }); 147 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src"], 3 | "compilerOptions": { 4 | "declaration": true, 5 | "target": "esnext", 6 | "newLine": "LF", 7 | "moduleResolution": "node", 8 | "strict": true, 9 | "outDir": "./dist", 10 | "jsx": "preserve" 11 | } 12 | } 13 | --------------------------------------------------------------------------------