a minimalist jsx rendering library
// tsconfig.json
{
"compilerOptions": {
"jsx": "preserve"
}
}// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
esbuild: {
jsx: "transform",
jsxFactory: "__jsx",
jsxFragment: "__Fragment",
jsxInject: "import { jsx as __jsx, Fragment as __Fragment } from 'jinx';",
},
});nothing really here now other than:
- exports:
useState(initialValue)useReducer(reducer, initialState)useEffect(fn, deps)jsxandFragmentaka<></>- you'd most likely setup Vite or Typescript to auto-import these type definitions for working with HTML elements and function components in JSX
- renders JSX/TSX syntax
function MyApp() {
const [toggle, setToggle] = useState(true);
const onClick = () => {
setToggle(!toggle);
};
useEffect(() => {
console.log("run!");
return () => {
console.log("cleanup!");
};
}, []);
return (
<>
<button onClick={onClick}>Switch!</button>
{toggle ? <div>1</div> : <div style={{ textAlign: "right" }}>2</div>}
<hr />
{toggle && <small>up</small>}
{!toggle && <em>down</em>}
</>
);
}git clone https://github.com/orsi/jinx.git
cd jinx
npm i
npm run test