Skip to content

yellowsink/solid-reactor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Reactor

SWC EmitKit


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)