https://github.com/yellowsink/solid-reactor

A compiler to ease the move from React to SolidJS.
https://github.com/yellowsink/solid-reactor

compiler javascript js-framework migration react solid solid-js swc

Last synced: 2 months ago
JSON representation

A compiler to ease the move from React to SolidJS.

• Host: GitHub
• URL: https://github.com/yellowsink/solid-reactor
• Owner: yellowsink
• License: other
• Created: 2022-04-08T22:30:11.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-10-19T08:40:01.000Z (over 2 years ago)
• Last Synced: 2024-09-17T20:29:53.416Z (4 months ago)
• Topics: compiler, javascript, js-framework, migration, react, solid, solid-js, swc
• Language: TypeScript
• Homepage:
• Size: 104 KB
• Stars: 30
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  

  Reactor



[![SWC](https://img.shields.io/badge/transforms%20by-SWC-orange)](https://swc.rs)

[![EmitKit](https://img.shields.io/badge/enhanced%20with-EmitKit-blueviolet)](https://github.com/yellowsink/emitkit)

---

[CLICK HERE FOR SOLIDHACK SUBMISSION DEMO VIDEO](https://youtu.be/Yt-_b3h0SjE)

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 (

    <>

       setState(state * 2)} style={`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 (

    <>

       setState(state() * 2)} style={`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)