solid-reactor
v1.2.2TypeScript
A compiler from react to solid
0/weekUpdated 3 years agoBSD-3-ClauseUnpacked: 23.3 KB
Published by Yellowsink
Reactor
---
CLICK HERE FOR SOLIDHACK SUBMISSION DEMO VIDEO
A compiler to ease the move from React to SolidJS.
Features
- Converts the following hooks to Solid equivalents:
* useState -> createSignal
* useEffect -> createEffect
- attempting to recreate the "run on every rerender" behaviour
* useReducer -> createSignal + a function
* useRef -> { current: + a variable
- convert (useRef-returned only) refs in ref={myRef} to ref={myRef.current}.
- Converts camel case (marginRight) style names to skewer case (margin-right)
Example
``
js
export default () => {
const [state, setState] = React.useState(0); let [, rerender] = useReducer((a) => ~a, 0);
Reactor.useEffect(() => console.log(state));
const myRef = useRef();
return (
<>
color: red} /> {state}
);
};
`js
export default () => {
const [state, setState] = createSignal(0); let [$$__REACTOR_UNIQUE_VAR_1, $$__REACTOR_UNIQUE_VAR_0] = createSignal(0);
const rerender = () =>
$$__REACTOR_UNIQUE_VAR_0(((a) => ~a)($$__REACTOR_UNIQUE_VAR_1()));
createEffect(() => console.log(state()));
const myRef = {};
return (
<>
color: red} /> {state()}
);
};``(output hand-prettified,
but youre likely to either be using this as a build step,
or have a codebase with a formatter setup)