Usage

npm install ranc

import { render, useState } from "ranc"
// If the jsx-runtime is not config, it needs to be imported
// import { Fragment, jsx } from 'ranc'

function App() {
  const [state, setState] = useState(false)
  const output = () => {
    console.log(state)
  }
  return <>
    <button onClick={() => setState(!state)}>button</button>
    <button onClick={output}>console</button>
    <h1 onClick={() => setState(!state)}>
      <p>12454432</p>
    </h1>
    <Child />
    {state ? <h2>0</h2> : <a>none</a>}
  </>
}

const Child = () => {
  const [state, setState] = useState(0)
  const change = () => {
    setState(state + 1)
  }
  return <h3 onClick={change}>child:{state}</h3>
}

render(<App />, document.getElementById("app"))

jsx-runtime

• tsconfig.json

 "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment",
    "jsxImportSource":"ranc",
  }

• babel:

// .babelrc / babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "ranc"
      }
    ]
  ]
}

• esbuild

 esbuild: {
    jsxFactory: 'jsx',
    jsxFragment: 'Fragment',
    jsxInject: 'import { jsx, Fragment } from "ranc"',
  },

Hooks API

// TODO

useState

function App() {
  const [state, setState] = useState(false)
  return <>
    <button onClick={() => setState(!state)}>button</button>
    {state ? <h2>0</h2> : <a>none</a>}
  </>
}

render(<App />, document.getElementById("app"))