lunet 0.0.0

package/README.md

@@ -0,0 +1,46 @@
+# lunet
+より柔軟なWebフロントエンドライブラリ。
+
+## 使い方のサンプル
+```jsx
+import { createComponent, render, setBatch } from "lunet";
+import { signal, effect, startBatch, endBatch } from "alien-signals";
+
+setBatch(cb => {
+    startBatch();
+    cb();
+    endBatch();
+});
+
+const App = createComponent((render, init) => {
+    const msg = signal(init.msg);
+    const count = signal(0);
+
+    effect(() => {
+        render(<div class="app">
+            <button $click={()=>count(count()+1)}>{msg()} {count().toString()}</button>
+        </div>)
+    });
+
+    return {
+        set msg(value){ msg(value) }
+    }
+})
+
+render(document.getElementById("root"), <App msg="Count:" />);
+
+```
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run src/index.ts
+```
+
+This project was created using `bun init` in bun v1.2.19. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "lunet",
+  "version": "0.0.0",
+  "author": "TNTSuperMan",
+  "license": "MIT",
+  "description": "より柔軟なWebフロントエンドライブラリ。",
+  "module": "src/index.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
+    "@types/bun": "latest",
+    "@types/node": "^24.3.0",
+    "@types/rollup": "^0.54.0",
+    "alien-signals": "^2.0.6",
+    "bunup": "^0.9.3"
+  },
+  "peerDependencies": {
+    "typescript": "^5.9.2"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js",
+      "browser": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./transpiler": {
+      "types": "./dist/transpiler/index.d.ts",
+      "default": "./dist/transpiler/index.js",
+      "require": "./dist/transpiler/index.cjs",
+      "import": "./dist/transpiler/index.js",
+      "node": "./dist/transpiler/index.cjs"
+    }
+  },
+  "bunup": [{
+    "name": "lunet",
+    "entry": ["src/index.ts"],
+    "format": ["esm"],
+    "target": "browser",
+    "sourcemap": "linked",
+    "minify": true,
+    "outDir": "dist"
+  }, {
+    "name": "lunet-transpiler",
+    "entry": ["transpiler/index.ts"],
+    "external": ["@babel/generator", "@babel/parser", "@babel/traverse", "@babel/types"],
+    "format": ["esm", "cjs"],
+    "target": "node",
+    "minify": true,
+    "outDir": "dist/transpiler"
+  }],
+  "dependencies": {
+    "@babel/generator": "^7.28.3",
+    "@babel/parser": "^7.28.3",
+    "@babel/traverse": "^7.28.3",
+    "@babel/types": "^7.28.2"
+  }
+}

package/src/batch.ts

@@ -0,0 +1,3 @@
+export let batch: ((cb: () => void) => void) = cb => cb();
+
+export const setBatch = (fn: typeof batch) => batch = fn;

package/src/index.ts

@@ -0,0 +1,5 @@
+import "./jsx/type/jsx";
+
+export * from "./jsx";
+export * from "./mount";
+export { setBatch } from "./batch";

package/src/jsx/component.ts

@@ -0,0 +1,7 @@
+import type { JSXComponent, JSXNode } from ".";
+
+export type ComponentFunction<T extends object> = (render: (jsx: JSXNode) => void, initProps: T) => T;
+export type Component<T extends object> = (props: T) => JSXComponent;
+
+export const createComponent = <T extends object>(component: ComponentFunction<T>): Component<T> =>
+    (props: T): JSXComponent => [component, props];

package/src/jsx/fragment.ts

@@ -0,0 +1,4 @@
+import type { JSXFragment, JSXNode } from ".";
+
+export const fragment = (...children: JSXNode[]): JSXFragment =>
+    [null, {}, ...children];

package/src/jsx/index.ts

@@ -0,0 +1,12 @@
+import type { ComponentFunction } from "./component";
+
+export type Key = { key?: unknown };
+
+export type JSXNode = JSXElement | JSXComponent | JSXFragment | string;
+export type JSXElement<T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = [T, JSX.IntrinsicElements[T], ...JSXNode[]];
+export type JSXComponent = [ComponentFunction<any>, object & Key, ...JSXNode[]];
+export type JSXFragment = [null, Key, ...JSXNode[]];
+
+export { type Component, createComponent } from "./component";
+export { fragment } from "./fragment";
+export { h } from "./likereact";

package/src/jsx/likereact.ts

@@ -0,0 +1,16 @@
+import type { JSXNode } from ".";
+import type { Component } from "./component";
+import { fragment } from "./fragment";
+
+type JSXFactoryFunction = <T extends keyof HTMLElementTagNameMap | Component<any> | typeof fragment>(
+    type: T,
+    props: null | ( T extends Component<infer P> ? P : { [key: string]: unknown } ),
+    ...children: JSXNode[]
+) => JSXNode;
+
+export const h: JSXFactoryFunction = (type, props, ...children) =>
+    typeof type === "string"
+        ? [type, props ?? {}, ...children]
+        : type === fragment
+            ? [null, props ?? {}, ...children]
+            : type(props);

package/src/jsx/type/attributes.ts

@@ -0,0 +1,36 @@
+import type { Key } from "../index";
+import type { HTMLElAttrEvMap } from "./eventmap";
+
+export type Attributes<N extends keyof HTMLElementTagNameMap, T extends object = {}> = Partial<
+    HTMLAttributes & T & Key & {    
+        [key in keyof HTMLElAttrEvMap]:
+            (this: HTMLElement, ev: HTMLElAttrEvMap[key]) => unknown;
+    } & {
+        $beforeMount: () => unknown;
+        $mount: (this: HTMLElement, ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown;
+        $beforeUpdate: (this: HTMLElement, ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown;
+        $update: (this: HTMLElement, ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown;
+        $beforeUnmount: (this: HTMLElement, ev: CustomEvent<HTMLElementTagNameMap[N]>) => unknown;
+        $unmount: () => unknown;
+    }
+>;
+
+type HTMLAttributes = {
+    accesskey: string;
+    autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
+    class: string;
+    contenteditable: boolean | "" | "plaintext-only";
+    dir: "ltr" | "rtl";
+    draggable: boolean;
+    hidden: "" | "hidden" | "until-found";
+    id: string;
+    itemprop: string;
+    lang: string;
+    role: string;
+    slot: string;
+    spellcheck: boolean;
+    style: string;
+    tabindex: number;
+    title: string;
+    translate: "yes" | "no";
+}

package/src/jsx/type/eventmap.ts

@@ -0,0 +1,107 @@
+export interface HTMLElAttrEvMap{
+    "$fullscreenchange": Event;
+    "$fullscreenerror": Event;
+    "$abort": UIEvent;
+    "$animationcancel": AnimationEvent;
+    "$animationend": AnimationEvent;
+    "$animationiteration": AnimationEvent;
+    "$animationstart": AnimationEvent;
+    "$auxclick": PointerEvent;
+    "$beforeinput": InputEvent;
+    "$beforetoggle": ToggleEvent;
+    "$blur": FocusEvent;
+    "$cancel": Event;
+    "$canplay": Event;
+    "$canplaythrough": Event;
+    "$change": Event;
+    "$click": MouseEvent;
+    "$close": Event;
+    "$compositionend": CompositionEvent;
+    "$compositionstart": CompositionEvent;
+    "$compositionupdate": CompositionEvent;
+    "$contextlost": Event;
+    "$contextmenu": PointerEvent;
+    "$contextrestored": Event;
+    "$copy": ClipboardEvent;
+    "$cuechange": Event;
+    "$cut": ClipboardEvent;
+    "$dblclick": MouseEvent;
+    "$drag": DragEvent;
+    "$dragend": DragEvent;
+    "$dragenter": DragEvent;
+    "$dragleave": DragEvent;
+    "$dragover": DragEvent;
+    "$dragstart": DragEvent;
+    "$drop": DragEvent;
+    "$durationchange": Event;
+    "$emptied": Event;
+    "$ended": Event;
+    "$error": ErrorEvent;
+    "$focus": FocusEvent;
+    "$focusin": FocusEvent;
+    "$focusout": FocusEvent;
+    "$formdata": FormDataEvent;
+    "$gotpointercapture": PointerEvent;
+    "$input": Event;
+    "$invalid": Event;
+    "$keydown": KeyboardEvent;
+    "$keypress": KeyboardEvent;
+    "$keyup": KeyboardEvent;
+    "$load": Event;
+    "$loadeddata": Event;
+    "$loadedmetadata": Event;
+    "$loadstart": Event;
+    "$lostpointercapture": PointerEvent;
+    "$mousedown": MouseEvent;
+    "$mouseenter": MouseEvent;
+    "$mouseleave": MouseEvent;
+    "$mousemove": MouseEvent;
+    "$mouseout": MouseEvent;
+    "$mouseover": MouseEvent;
+    "$mouseup": MouseEvent;
+    "$paste": ClipboardEvent;
+    "$pause": Event;
+    "$play": Event;
+    "$playing": Event;
+    "$pointercancel": PointerEvent;
+    "$pointerdown": PointerEvent;
+    "$pointerenter": PointerEvent;
+    "$pointerleave": PointerEvent;
+    "$pointermove": PointerEvent;
+    "$pointerout": PointerEvent;
+    "$pointerover": PointerEvent;
+    "$pointerup": PointerEvent;
+    "$progress": ProgressEvent;
+    "$ratechange": Event;
+    "$reset": Event;
+    "$resize": UIEvent;
+    "$scroll": Event;
+    "$scrollend": Event;
+    "$securitypolicyviolation": SecurityPolicyViolationEvent;
+    "$seeked": Event;
+    "$seeking": Event;
+    "$select": Event;
+    "$selectionchange": Event;
+    "$selectstart": Event;
+    "$slotchange": Event;
+    "$stalled": Event;
+    "$submit": SubmitEvent;
+    "$suspend": Event;
+    "$timeupdate": Event;
+    "$toggle": ToggleEvent;
+    "$touchcancel": TouchEvent;
+    "$touchend": TouchEvent;
+    "$touchmove": TouchEvent;
+    "$touchstart": TouchEvent;
+    "$transitioncancel": TransitionEvent;
+    "$transitionend": TransitionEvent;
+    "$transitionrun": TransitionEvent;
+    "$transitionstart": TransitionEvent;
+    "$volumechange": Event;
+    "$waiting": Event;
+    "$webkitanimationend": Event;
+    "$webkitanimationiteration": Event;
+    "$webkitanimationstart": Event;
+    "$webkittransitionend": Event;
+    "$wheel": WheelEvent;
+}

package/src/jsx/type/jsx.ts

@@ -0,0 +1,62 @@
+import type { Attributes } from "./attributes";
+import type { JSXNode } from "../index";
+
+type Target = "_self" | "_blank" | "_parent" | "_top";
+
+declare global {
+    namespace JSX {
+        type Element = JSXNode;
+        type IntrinsicElements = {
+            [key in keyof HTMLElementTagNameMap]: Attributes<key>;
+        } & {
+            div: Attributes<"div">;
+            ul: Attributes<"ul">;
+            ol: Attributes<"ol">;
+            li: Attributes<"li">;
+            br: Attributes<"br">;
+            button: Attributes<"button">;
+            a: Attributes<"a", {
+                href: string;
+                download: string;
+                target: Target;
+                hreflang: string;
+                media: string;
+                ping: string;
+                referrerpolicy: string;
+                rel: string;
+                shape: string;
+            }>;
+            input: Attributes<"input", {
+                accept: string;
+                alt: string;
+                autocomplete: "off" | "on" | string;
+                checked: boolean;
+                disabled: boolean;
+                formonvalidate: boolean;
+                formtarget: Target;
+                type: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+                value: string;
+            }>;
+            form: Attributes<"form", {
+                "accept-charset": "UTF-8";
+                autocomplete: "off" | "on";
+                name: string;
+                enctype: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+                method: "post" | "get" | "dalog";
+                target: Target | "_unfencedTop";
+            }>;
+            iframe: Attributes<"iframe", {
+                allow: string;
+                allowfullscreen: boolean;
+                width: number;
+                height: number;
+                loading: "eager" | "lazy";
+                name: string;
+                referrerpolicy: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-orgin" | "usafe-url";
+                sandbox: string;
+                src: string;
+                srcdoc: string;
+            }>;
+        }
+    }    
+}

package/src/mount/diff.ts

@@ -0,0 +1,38 @@
+import type { JSXNode } from "../jsx";
+
+export const isCompatibleNode = (before: JSXNode, after: JSXNode): boolean =>
+    typeof before === "string" || typeof after === "string"
+        ? typeof before === typeof after
+        : before[0] === after[0] && before[1].key === after[1].key;
+
+export type Patch =
+    | [0, number, JSXNode] // 更新
+    | [1, number, JSXNode] // 挿入
+    | [2, number, JSXNode] // 削除
+
+export const diff = (
+    before_nodes: JSXNode[],
+    after_nodes: JSXNode[],
+): Patch[] => {
+    const patches: Patch[] = [];
+    const max = Math.max(before_nodes.length, after_nodes.length);
+
+    for(let i = 0;i < max;i++){
+        const before = before_nodes[i];
+        const after = after_nodes[i];
+        
+        if(!before && after)
+            patches.push([1, i, after]);
+        else if(before && !after)
+            patches.push([2, i, after]);
+        else if(before && after)
+            if(isCompatibleNode(before, after))
+                patches.push([0, i, after]);
+            else{
+                patches.push([2, i, after]);
+                patches.push([1, i, after]);
+            }
+    }
+
+    return patches;
+}

package/src/mount/dom/component.ts

@@ -0,0 +1,47 @@
+import { type RenderedDOM } from ".";
+import { batch } from "../../batch";
+import type { JSXComponent, JSXFragment, JSXNode } from "../../jsx";
+import { renderFragment } from "./fragment";
+
+export const renderComponent = (jsx: JSXComponent): RenderedDOM<JSXComponent> => {
+    let currentJSX = jsx;
+
+    let rendered_dom = null as RenderedDOM<JSXFragment> | null;
+
+    let props: { [key: string]: unknown } | null;
+
+    const render = (jsx: JSXNode) => {
+        if(rendered_dom) rendered_dom.update([null, {}, jsx]);
+        else rendered_dom = renderFragment([null, {}, jsx]);
+    }
+
+    return {
+        type: 3,
+        flat: () => rendered_dom?.flat() ?? [],
+        update(jsx){
+            const [, afterProps/*, ...children*/] = currentJSX = jsx;
+
+            batch(() => {
+                for (const [key, value] of Object.entries(afterProps))
+                    if (props![key] !== value)
+                        props![key] = value;
+            });
+        },
+        render(){
+            rendered_dom?.revoke();
+            rendered_dom = null;
+
+            const [component, init_props/*, ...children*/] = currentJSX;
+
+            props = component(render, { ...init_props });
+
+            if(!rendered_dom) {
+                console.error("never rendered Initial render.");
+                rendered_dom = renderFragment([null, {}]);
+            }
+
+            return rendered_dom.render();
+        },
+        revoke(){ rendered_dom?.revoke() },
+    }
+}

package/src/mount/dom/element.ts

@@ -0,0 +1,142 @@
+import { renderNode, type RenderedDOM, type UnknownRenderedDOM } from ".";
+import type { JSXElement, JSXNode } from "../../jsx";
+import { revokerMap } from "../revokerMap";
+import { diff } from "../diff";
+
+const elementEvents: WeakMap<HTMLElement, Record<string, Function>> = new WeakMap;
+
+function handleEvent(this: HTMLElement, ev: Event){
+    return elementEvents.get(this)?.[ev.type]?.();
+}
+
+const setAttribute = (el: HTMLElement, name: string, value: unknown) => {
+    if(el instanceof HTMLInputElement) {
+        switch(name){
+            case "checked":
+                if(typeof value === "boolean"){
+                    el.checked = value;
+                    return;
+                }
+                break;
+            case "value":
+                if(typeof value === "string"){
+                    el.value = value;
+                    return;
+                }
+                break;
+        }
+    }
+    switch(typeof value){
+        case "string":
+            el.setAttribute(name, value);
+            break;
+        case "function":
+            if(name.startsWith("$")){
+                if(!["$beforeMount", "$mount", "$beforeUnmount", "$unmount"].includes(name)){
+                    const ev_name = name.substring(1);
+                    const events = elementEvents.get(el)!;
+                    if(!(ev_name in events))
+                        el.addEventListener(ev_name, handleEvent);
+                    events[ev_name] = value;
+                }
+            }else
+                console.error("function values cannot mount on attributes.");
+            break;
+        case "object":
+            if(value === null)
+                el.removeAttribute(name);
+            else
+                console.error(`${typeof value} values cannot mount on attributes.`);
+            break;
+        default:
+            if(value === undefined)
+                el.removeAttribute(name);
+            else
+                el.setAttribute(name, String(value));
+            break;
+    }
+}
+
+export const renderElement = (jsx: JSXElement): RenderedDOM<JSXElement> => {
+    let currentJSX = jsx;
+
+    let rendered_children: UnknownRenderedDOM[] = [];
+    let element: HTMLElement | void;
+
+    const render = () => {
+        const [tag, props, ...children] = currentJSX;
+
+        props.$beforeMount?.();
+        const el = document.createElement(tag);
+        elementEvents.set(el, {});
+        props.$mount?.call(el, new CustomEvent("mount", { detail: el as any }));
+
+        for (const [name, value] of Object.entries(props))
+            setAttribute(el, name, value);
+
+        rendered_children = children.map(renderNode);
+        el.append(...rendered_children.map(e=>e.render()));
+
+        revokerMap.set(el, () => {
+            props.$beforeUnmount?.call(el, new CustomEvent("beforeunmount", { detail: el as any }));
+
+            for (const child of rendered_children)
+                child.revoke();
+            revokerMap.delete(el);
+            elementEvents.delete(el);
+            el.remove();
+            
+            props.$unmount?.();
+        });
+
+        return element = el;
+    }
+
+    return {
+        type: 1,
+        flat: () => [currentJSX],
+        update(jsx){
+            const [,, ...old_children] = currentJSX;
+            const [, props, ...new_children] = jsx;
+
+            for (const [name, value] of Object.entries(props))
+                if((currentJSX[1] as any)[name] !== value)
+                    setAttribute(element!, name, value);
+
+            const patches = diff(old_children, new_children);
+            let removes = 0;
+            for (const [type, idx_, jsx] of patches) {
+                const idx = idx_ - removes;
+                switch(type){
+                    case 0:
+                        rendered_children[idx].update(jsx as any);
+                        break;
+                    case 1:
+                        const rendered = renderNode(jsx);
+                        rendered_children.splice(idx, 0, rendered);
+
+                        const dom_index = rendered_children.reduce((p,c)=>p+c.flat().length, 0);
+                        const el = rendered.render();
+
+                        if(dom_index >= element!.childNodes.length)
+                            element!.append(el);
+                        else
+                            element!.childNodes[dom_index]!.before(el);
+
+                        break;
+                    case 2:
+                        removes++;
+                        rendered_children.splice(idx, 1)[0].revoke();
+                        break;
+                }
+            }
+
+            currentJSX = jsx;
+        },
+        render(){
+            element && revokerMap.get(element)?.();
+            return render();
+        },
+        revoke(){ element && revokerMap.get(element)?.() },
+    }
+}

package/src/mount/dom/fragment.ts

@@ -0,0 +1,76 @@
+import { renderNode, type RenderedDOM, type UnknownRenderedDOM } from ".";
+import type { JSXFragment } from "../../jsx";
+import { diff } from "../diff";
+
+export const renderFragment = (jsx: JSXFragment): RenderedDOM<JSXFragment> => {
+    let currentJSX = jsx;
+
+    let rendered_children: UnknownRenderedDOM[] = [];
+    let mark: Comment | void;
+
+    return {
+        type: 2,
+        flat: () => rendered_children.flatMap(e=>e.flat()),
+        update(jsx){
+            const [,, ...old_children] = currentJSX;
+            const [,, ...new_children] = jsx;
+
+            const patches = diff(old_children, new_children);
+            let removes = 0;
+
+            for (const [type, idx_, jsx] of patches) {
+                const idx = idx_ - removes;
+                switch(type){
+                    case 0:
+                        rendered_children[idx].update(jsx as any);
+                        break;
+                    case 1:
+                        const rendered = renderNode(jsx);
+                        rendered_children.splice(idx, 0, rendered);
+                        const dom = rendered.render();
+                        let refNode: ChildNode | null = null; // TODO: ここら辺を最適化する
+                        if (mark && mark.parentNode) {
+                            let node: ChildNode | null = mark.nextSibling;
+                            let count = 0;
+                            while (node) {
+                                if (count === idx) {
+                                    refNode = node;
+                                    break;
+                                }
+                                node = node.nextSibling;
+                                count++;
+                            }
+                            if (refNode) {
+                                mark.parentNode.insertBefore(dom, refNode);
+                            } else {
+                                mark.parentNode.appendChild(dom);
+                            }
+                        }
+                        break;
+                    case 2:
+                        removes++;
+                        const [removed] = rendered_children.splice(idx, 1);
+                        removed.revoke();
+                        break;
+                }
+            }
+            
+            currentJSX = jsx;
+        },
+        render(){
+            const [,, ...children] = currentJSX;
+
+            const el = document.createDocumentFragment();
+            mark = document.createComment("");
+
+            rendered_children = children.map(renderNode);
+            el.append(mark, ...rendered_children.map(e=>e.render()));
+
+            return el;
+        },
+        revoke(){
+            for (const child of rendered_children)
+                child.revoke();
+        },
+    }
+}

package/src/mount/dom/index.ts

@@ -0,0 +1,27 @@
+import type { JSXComponent, JSXElement, JSXFragment, JSXNode } from "../../jsx";
+import { renderComponent } from "./component";
+import { renderElement } from "./element";
+import { renderFragment } from "./fragment";
+import { renderText } from "./text";
+
+export type RenderedDOM<T extends JSXNode> = {
+    type: T extends string ? 0 : T extends JSXElement ? 1 : T extends JSXFragment ? 2 : T extends JSXComponent ? 3 : never, // 0 種類
+    flat(): (JSXElement | string)[], // 1 差分比較用のフラットJSX出力関数
+    update(jsx: T): void,              // 2 差分更新関数
+    render(): Node,                    // 3 初回・トラブル時にフル描画をする関数
+    revoke(): void,                    // 4 破棄関数
+}
+
+export type UnknownRenderedDOM = RenderedDOM<string> | RenderedDOM<JSXElement> | RenderedDOM<JSXFragment> | RenderedDOM<JSXComponent>;
+
+export const renderNode = (jsx: JSXNode): UnknownRenderedDOM => {
+    if(typeof jsx === "string"){
+        return renderText(jsx);
+    }else if(typeof jsx[0] === "string"){
+        return renderElement(jsx);
+    }else if(jsx[0] === null){
+        return renderFragment(jsx);
+    }else{
+        return renderComponent(jsx);
+    }
+}

package/src/mount/dom/text.ts

@@ -0,0 +1,14 @@
+import type { RenderedDOM } from ".";
+
+export const renderText = (jsx: string): RenderedDOM<string> => {
+    let currentText = jsx;
+    const node = new Text(currentText);
+
+    return {
+        type: 0,
+        flat: () => [currentText],
+        update(jsx){ currentText !== jsx && (node.textContent = currentText = jsx) },
+        render: () => node,
+        revoke(){ node.remove() },
+    }
+}

package/src/mount/index.ts

@@ -0,0 +1,14 @@
+import type { JSXNode } from "../jsx";
+import { renderNode } from "./dom";
+import { revokerMap } from "./revokerMap";
+
+type RenderFunction = (el: HTMLElement, jsx: JSXNode) => void;
+
+export const render: RenderFunction = (el, jsx) => {
+    el.childNodes.forEach(e=>{
+        revokerMap.get(e)?.();
+        e.remove();
+    });
+
+    el.append(renderNode(jsx).render());
+}

package/src/mount/revokerMap.ts

@@ -0,0 +1 @@
+export const revokerMap = new WeakMap<Node, () => void>();

package/transpiler/index.ts

@@ -0,0 +1,50 @@
+import { readFile as NodeReadFile } from "fs/promises";
+import { readFileSync } from "fs";
+import { transpile } from "./transpile";
+
+import type { BunPlugin } from "bun";
+import type { Plugin as RollupPlugin } from "rollup";
+
+const readFile: (path: string) => Promise<string> =
+    process.isBun
+        ? path => Bun.file(path).text()
+        : path => NodeReadFile(path).then(e=>e.toString());
+
+export const bun_lunet = (): BunPlugin => ({
+    name: "bun-lunet",
+    setup(build) {
+        build.onLoad({ filter: /\.jsx$/ }, async args => {
+            const code = await readFile(args.path);
+            return ({
+                contents: transpile(code, false),
+                loader: "jsx"
+            });
+        });
+        build.onLoad({ filter: /\.tsx$/ }, async args => {
+            const code = await readFile(args.path);
+            return ({
+                contents: transpile(code, true),
+                loader: "tsx"
+            });
+        });
+    },
+})
+
+export const rollup_lunet = (): RollupPlugin => ({
+    name: "rollup-lunet",
+    load(id){
+        if(id.endsWith(".jsx")){
+            const code = readFileSync(id).toString();
+            return {
+                code: transpile(code, false)
+            };
+        }else if(id.endsWith(".tsx")){
+            const code = readFileSync(id).toString();
+            return {
+                code: transpile(code, true)
+            };
+        }
+    }
+})
+
+export { transpile };

package/transpiler/transpile.ts

@@ -0,0 +1,122 @@
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+
+const jsxAttr2Object = (
+    ast: (t.JSXAttribute | t.JSXSpreadAttribute)[],
+): t.ObjectExpression => t.objectExpression(ast.map(e=>
+    e.type === "JSXAttribute"
+        ? t.objectProperty(
+            t.identifier(
+                e.name.type === "JSXIdentifier"
+                    ? e.name.name
+                    : e.name.name.name),
+            e.value
+                ? e.value.type === "StringLiteral"
+                    ? e.value
+                    : jsx2Expression(e.value, true)
+                : t.booleanLiteral(true))
+        : t.spreadElement(e.argument)
+));
+
+const jsxMemberToMemberExpression = (ast: t.JSXMemberExpression | t.JSXIdentifier): t.MemberExpression | t.Identifier =>
+    ast.type === "JSXIdentifier"
+        ? t.identifier(ast.name)
+        : t.memberExpression(jsxMemberToMemberExpression(ast.object), jsxMemberToMemberExpression(ast.property));
+
+const filterEmptyString = (ast: t.Expression | t.SpreadElement) => !(ast.type === "StringLiteral" && !ast.value);
+
+const jsx2Elements = (
+    ast: ReturnType<typeof t.jsxFragment>["children"] extends (infer P)[] ? P : never,
+    dontTrim?: boolean
+): t.Expression | t.SpreadElement => {
+    if(ast.type === "JSXSpreadChild")
+        return t.spreadElement(ast.expression);
+    else
+        return jsx2Expression(ast, dontTrim);
+}
+
+const jsx2Expression = (
+    ast: ReturnType<typeof t.jsxFragment>["children"] extends (infer P)[] ? P : never,
+    dontTrim?: boolean
+): t.Expression => {
+    switch(ast.type){
+        case "JSXText": return t.stringLiteral(dontTrim ? ast.value : ast.value.trim());
+        case "JSXFragment": return t.arrayExpression([
+                t.nullLiteral(),
+                t.objectExpression([]),
+                ...ast.children.map(child=>jsx2Elements(child)).filter(filterEmptyString)
+            ]);
+        case "JSXElement":
+            const tag = ast.openingElement.name;
+            if(tag.type === "JSXIdentifier" && /^[a-z]/.test(tag.name)){
+                return t.arrayExpression([
+                    t.stringLiteral(tag.name),
+                    t.objectExpression(ast.openingElement.attributes.map(attr => {
+                        if (attr.type === "JSXAttribute") {
+                            if (attr.name.type === "JSXNamespacedName")
+                                console.warn("Warning: JSXNamespacedName is not supported");
+                            const { name } = attr.name;
+                            return t.objectProperty(
+                                t.identifier(typeof name === "string" ? name : name.name),
+                                attr.value
+                                    ? attr.value.type === "StringLiteral"
+                                        ? attr.value
+                                        : jsx2Expression(attr.value)
+                                    : t.booleanLiteral(true)
+                            );
+                        } else {
+                            return t.spreadElement(attr.argument);
+                        }
+                    })),
+                    ...ast.children.map(child => jsx2Elements(child)).filter(filterEmptyString)
+                ])
+            }else switch(tag.type){
+                case "JSXIdentifier":
+                    return t.callExpression(t.identifier(tag.name), [
+                        jsxAttr2Object(ast.openingElement.attributes)
+                    ]);
+                case "JSXMemberExpression":
+                    return t.callExpression(jsxMemberToMemberExpression(tag), [
+                        jsxAttr2Object(ast.openingElement.attributes)
+                    ]);
+                case "JSXNamespacedName":
+                    console.warn("Warning: JSXNamespacedName is not supported");
+                    return t.callExpression(t.identifier(tag.name.name), [
+                        jsxAttr2Object(ast.openingElement.attributes)
+                    ]);
+            }
+        case "JSXExpressionContainer": switch(ast.expression.type){
+                case "JSXEmptyExpression":
+                    return t.booleanLiteral(true);
+                case "JSXElement": case "JSXFragment":
+                    return jsx2Expression(ast.expression);
+                default:
+                    return ast.expression;
+            }
+        case "JSXSpreadChild": return t.arrayExpression([
+            t.nullLiteral(),
+            t.objectExpression([]),
+            t.spreadElement(ast.expression)
+        ]);
+    }
+}
+
+export const transpile = (code: string, isTypeScript: boolean): string => {
+    const ast = parse(code, {
+        sourceType: "module",
+        plugins: isTypeScript ? ["typescript", "jsx"] : ["jsx"]
+    });
+
+    traverse(ast, {
+        JSXElement(ast){
+            ast.replaceWith(jsx2Expression(ast.node));
+        },
+        JSXFragment(ast){
+            ast.replaceWith(jsx2Expression(ast.node));
+        }
+    });
+    
+    return generate(ast).code;
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "fragment",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+  "exclude": ["dist"]
+}