solid-reactor
solid-reactor copied to clipboard
A compiler to ease the move from React to SolidJS.
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: <value> }
+ a variable- convert (useRef-returned only) refs in
ref={myRef}
toref={myRef.current}
.
- convert (useRef-returned only) refs in
-
-
Converts camel case (
marginRight
) style names to skewer case (margin-right
)
Example
export default () => {
const [state, setState] = React.useState(0);
let [, rerender] = useReducer((a) => ~a, 0);
Reactor.useEffect(() => console.log(state));
const myRef = useRef();
return (
<>
<button onClick={() => setState(state * 2)} style={`color: red`} />
{state}
<div style={{ marginRight: "5rem" }}>
<span ref={myRef} />
</div>
</>
);
};
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 (
<>
<button onClick={() => setState(state() * 2)} style={`color: red`} />
{state()}
<div style={{ "margin-right": "5rem" }}>
<span ref={myRef.current} />
</div>
</>
);
};
(output hand-prettified, but youre likely to either be using this as a build step, or have a codebase with a formatter setup)