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} to ref={myRef.current}.

• 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)