Snout

Snout is a React-like JSX-supportive framework written in typescript under 400 lines of code.

Why

• Because if I can't create it, that means I don't understand it (Richard Feynman, probably, idk)
• I never seem to use idle callback system for managing tasks, it was fun
• This project completes a trio of backend, data and frontend packages to create web applicaitons from scratch

How

1. JSX bindings are in jsx-runtime.ts - jsx, jsxs and jsxDEV functions are in essence createElement functions
2. jsx-runtime.ts also provides JSX.* declarations and a type Element for basic operations, but I recommend using SnoutNode (ReactNode lookalike)
3. Element's are built until a function component is encountered
4. When calling render (also available on jsx-runtime.ts) vdom tree is parsed fully into fiber tree that handles what element to process next (chooses parent, child, sibling) by putting it into nextUnitOfWork variable.
5. There is a running task completion service workLoop using idle callback system
6. It takes nextUnitOfWork to performUnitOfWork, where magic happens
7. In essence, DOM is created via createDOM and children are reconsiled in reconsileChildren
8. Inside that function fiber tree is altered and commitWork is called when it's time to end task in performUnitOfWork
9. useState hook is provided as a simple way to alter component state to see PoC rendering

Usage

1. In tsconfig.json alter following properties

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "snout"
    }
}

2. Use just as React framework

import { render, useState } from "snout";

const App = () => {
    const [count, setCount] = useState<number>(0);

    return <h1 onClick={() => setCount(c => c + 1)}>{`You have clicked me, ${count} times!`}</h1>;
};

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

Limitations

1. Multiple text children are failing, use {\`}` to mitigate this problem
2. Fragments are untested
3. useState is the only hook provided
4. When using this framework, ...no interface 'JSX.IntrinsicAttributes' exists errors are possible (they are static-check only and do not forbid compliation and working)