@postact/jsx 0.0.1

package/README.md

@@ -0,0 +1,15 @@
+# @postact/jsx
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.5. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/jsx-dev-runtime.ts

@@ -0,0 +1 @@
+export { type JSX, jsx as jsxDEV, Fragment } from ".//jsx-runtime";

package/jsx-runtime.ts

@@ -0,0 +1,131 @@
+import {
+  createVf,
+  PostactIdentifier,
+  transformArgToVirtualItem,
+  type Ref,
+  type Subscribable,
+  type VirtualElement,
+  type VirtualFragment,
+  type VirtualItem,
+} from "@postact/core";
+
+export declare namespace JSX {
+  type Element = VirtualItem;
+  type AnyChildren =
+    | Element
+    | string
+    | boolean
+    | number
+    | bigint
+    | null
+    | undefined
+    | Subscribable<AnyChildren>;
+
+  interface IntrinsicElementsProps {
+    /**
+     * Takes a `Ref` object so that you can interact with its
+     * native APIs whenever this element is rendered.
+     *
+     * The `Ref` object is a subscribable, subscribable via `.subscribe()`.
+     */
+    ref?: Ref<any>;
+    children?: AnyChildren | AnyChildren[];
+  }
+
+  type EventHandlers<T> = {
+    [K in keyof GlobalEventHandlersEventMap as `on${K}`]?: (
+      this: T,
+      event: GlobalEventHandlersEventMap[K],
+    ) => any;
+  };
+
+  type ElementAttributes<T> = {
+    [K in keyof T]?: T[K];
+  };
+  type ReadonlyDOMProps =
+    | "offsetWidth"
+    | "offsetHeight"
+    | "offsetTop"
+    | "offsetLeft"
+    | "clientWidth"
+    | "clientHeight"
+    | "clientTop"
+    | "clientLeft"
+    | "scrollWidth"
+    | "scrollHeight"
+    | "nodeName"
+    | "nodeType"
+    | "nodeValue"
+    | "parentNode"
+    | "childNodes"
+    | "firstChild"
+    | "lastChild"
+    | "previousSibling"
+    | "nextSibling"
+    | "attributes"
+    | "ownerDocument"
+    | "namespaceURI"
+    | "tagName"
+    | "innerHTML"
+    | "outerHTML"
+    | "textContent";
+
+  type ExcludedHTMLProps = "children" | "style" | ReadonlyDOMProps | keyof EventHandlers<any>;
+
+  type ExtractProps<T> = {
+    [K in keyof T]: T[K] extends Function ? never : K;
+  }[keyof T];
+
+  type ElementProps<T extends HTMLElement> = Partial<
+    Omit<Pick<T, ExtractProps<T>>, ExcludedHTMLProps>
+  >;
+
+  type HTMLAttributes<T extends HTMLElement> = ElementProps<T> &
+    EventHandlers<T> &
+    IntrinsicElementsProps & { ref?: Ref<T> };
+
+  type IntrinsicElementsBase = {
+    [K in keyof HTMLElementTagNameMap]: HTMLAttributes<HTMLElementTagNameMap[K]>;
+  };
+
+  interface IntrinsicElements extends IntrinsicElementsBase {
+    [elemName: string]: IntrinsicElementsProps;
+  }
+}
+
+const Fragment = Symbol();
+
+function mapChildren(items: any[]) {
+  return items.map((item) => transformArgToVirtualItem(item));
+}
+
+function jsx(type: Symbol | Function | string, props: any): JSX.Element {
+  const hasChildren = typeof props.children !== "undefined" && props.children !== null;
+  const children = !hasChildren
+    ? []
+    : Array.isArray(props.children)
+      ? props.children
+      : [props.children];
+
+  if (type === Fragment) {
+    return createVf(mapChildren(children));
+  } else if (typeof type === "string") {
+    if (hasChildren) {
+      delete props["children"];
+    }
+
+    return {
+      __p: PostactIdentifier.VirtualElement,
+      tag: type,
+      attributes: props,
+      children: mapChildren(children),
+      listeners: [],
+    } satisfies VirtualElement;
+  } else if (typeof type === "function") {
+    return type(props);
+  } else {
+    throw new TypeError("unknown type");
+  }
+}
+
+export { jsx, jsx as jsxs, Fragment };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@postact/jsx",
+  "version": "0.0.1",
+  "description": "JSX support for Postact.",
+  "author": {
+    "name": "AWeirdDev",
+    "email": "awdjared@gmail.com",
+    "url": "https://github.com/AWeirdDev"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.mjs",
+      "require": "./dist/jsx-runtime.cjs",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.mjs",
+      "require": "./dist/jsx-runtime.cjs",
+      "default": "./dist/jsx-runtime.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc && rolldown -m -c",
+    "fmt": "oxfmt jsx-runtime.ts jsx-dev-runtime.ts test.tsx"
+  },
+  "dependencies": {
+    "@postact/core": "0.0.8"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "oxfmt": "^0.24.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "private": false
+}

package/rolldown.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "rolldown";
+
+export default defineConfig({
+  input: ["./jsx-runtime.ts", "./jsx-dev-runtime.ts"],
+  output: [
+    {
+      dir: "./dist",
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  external: [],
+});

package/test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@postact/core");
+function Counter() {
+  var $count = (0, core_1.state)(0);
+  return <button>asdf</button>;
+}

package/test.prod.js

@@ -0,0 +1 @@
+var l=class extends Error{constructor(q){super(q)}};function g(){if(typeof window>"u")throw new l("expected the runtime context to be in the browser (window is undefined)")}var X=function(q){return q[q.Dependent=0]="Dependent",q[q.State=1]="State",q[q.VirtualElement=2]="VirtualElement",q[q.VirtualFragment=3]="VirtualFragment",q[q.VirtualTextNode=4]="VirtualTextNode",q[q.CSSPaper=5]="CSSPaper",q[q.ComponentPointer=6]="ComponentPointer",q[q.ComponentInstance=7]="ComponentInstance",q[q.Ref=8]="Ref",q}({});function H(q){return q===null?!1:!!(typeof q=="object"&&Object.hasOwn(q,"__p"))}function N(q,z){return z===null?!1:!!((typeof z=="object"||typeof z=="function")&&Object.hasOwn(z,"__p")&&z.__p==q)}function B(q=6){return Array.from({length:q},()=>Math.floor(Math.random()*16).toString(16)).join("")}function h(q){return N(X.VirtualElement,q)}function x(q){return N(X.VirtualFragment,q)}function P(q,z){return{__p:X.VirtualFragment,children:q,subscribable:z}}function d(q){return N(X.VirtualTextNode,q)}function Q(q,z){return{__p:X.VirtualTextNode,data:q,subscribable:z}}var u=class{value;#q;constructor(q){this.value=q,this.#q=new Map}subscribe(q){this.#q.set(q,q)}unsubscribe(q){this.#q.delete(q)}emit(){let q=this.value;this.#q.forEach((z)=>z(q))}};function T(q){return N(X.Dependent,q)||N(X.State,q)||N(X.Ref,q)}var t=class{__p=X.Ref;value;#q;constructor(){this.value=null,this.#q=new Map}subscribe(q){this.#q.set(q,q)}unsubscribe(q){this.#q.delete(q)}emit(){let q=this.value;if(q===null)throw Error("ref is currently null");this.#q.forEach((z)=>z(q))}};function o(q){return N(X.Ref,q)}function C(q,z){let G=window.document.createDocumentFragment();if(q==null)return G;if(typeof q=="string")return G.appendChild(window.document.createTextNode(q)),G;if(d(q)){let K=q,J=window.document.createTextNode(K.data);if(K.subscribable){let O=z.debug?B():"",Y=window.document.createComment(z.debug?`${O}`:""),M=window.document.createComment(z.debug?`/${O}`:""),U=new E(Y,M,G);K.subscribable.subscribe((Z)=>{J.parentNode&&U.setParent(J.parentNode);let m=_(Z,z);U.spreadAndReplace(m)}),G.append(Y,J,M)}else G.appendChild(J);return G}if(h(q)){let K=window.document.createElement(q.tag);return q.attributes.entries().forEach(([J,O])=>{if(O!=null){if(o(O)&&(O.value=K,O.emit()),T(O))return O.subscribe((Y)=>{L(K,J,Y)}),L(K,J,O.value);K.setAttribute(J,O.toString())}}),q.listeners.forEach(([J,O])=>K.addEventListener(J,O)),q.subscribable&&q.subscribable.subscribe((J)=>{let O=_(J,z);K.replaceChildren(O)}),K.append(...q.children.map((J)=>C(J,z))),G.appendChild(K),G}if(x(q)){let K=q.children.reduce((J,O)=>(J.append(C(O,z)),J),window.document.createDocumentFragment());if(q.subscribable){let J=z.debug?B():"",O=window.document.createComment(z.debug?`${J}`:""),Y=window.document.createComment(z.debug?`/${J}`:""),M=new E(O,Y,G);q.subscribable.subscribe((U)=>{O.parentNode&&M.setParent(O.parentNode);let Z=_(U,z);M.spreadAndReplace(Z)}),G.append(O,K,Y)}else G.appendChild(K);return G}else throw Error("unknown virtual item")}function _(q,z){if(q==null)return window.document.createDocumentFragment();if(F(q)){let G=window.document.createDocumentFragment();return G.appendChild(window.document.createTextNode(q.toString())),G}else return C(q,z)}var E=class{#q;#z;#G;constructor(q,z,G){this.#q=q,this.#z=z,this.#G=G}setParent(q){this.#G=q}spreadAndReplace(q){let z=this.#q.nextSibling;for(;z&&!this.#z.isEqualNode(z);){let G=z.nextSibling;this.#G.removeChild(z),z=G}this.#G.insertBefore(q,this.#z)}};function L(q,z,G){G==null?q.removeAttribute(z):q.setAttribute(z,G.toString())}var I={debug:!1};function b(q,z=I){return g(),C(q,z)}function c(q,z){q.replaceChildren(b(z))}function f(q){let z=window.document.querySelector(q);if(!z)throw ReferenceError(`could not find any element matching query: ${q}`);return z.render=(G)=>{c(z,G)},z}var p=Object.freeze({"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'"}),k=/&(?:amp|lt|gt|quot|#39);/g;function A(q){return q&&k.test(q)?q.replace(k,(z)=>p[z]):q}function F(q){return["string","number","bigint","boolean"].includes(typeof q)}function D(q,z){return typeof z=="function"?z(q):z}var R=class{value;__p=X.State;#q;#z;constructor(q){this.value=q,this.#q=new Map,this.#z=[]}update(q){let z=D(this.value,q);for(let G of this.#z)if(!G(this.value,z))return;this.value=z,this.emit()}set(q){this.value=D(this.value,q)}subscribe(q){this.#q.set(q,q)}unsubscribe(q){this.#q.delete(q)}emit(){let q=this.value;this.#q.forEach((z,G)=>G(q))}withChecker(q){return this.#z.push(q),this}withCheckers(q){return this.#z.push(...q),this}};function j(q){return new R(q)}var e=class{__p=X.Dependent;#q;#z;#G;constructor(q,z,G){this.#z=G||z(Array.isArray(q)?q.map((K)=>K.value):q.value),this.#q=z,this.#G=new Map,Array.isArray(q)?q.forEach((K)=>{K.subscribe(()=>{let J=this.#q(q.map((O)=>O.value));this.#z=J,this.#G.forEach((O,Y)=>Y(J))})}):q.subscribe(()=>{let K=this.#q(q.value);this.#z=K,this.#G.forEach((J,O)=>O(K))})}get value(){return this.#z}subscribe(q){this.#G.set(q,q)}unsubscribe(q){this.#G.delete(q)}};var q0=class extends R{#q;#z;ok;constructor(q){super(null),this.#q=q,this.ok=!1,this.#z=()=>{},this.#q.then((z)=>this.update(z)).catch((z)=>this.#z&&this.#z(z))}catch(q){return this.#z=q,this}};var $=function(q){return q[q.Empty=0]="Empty",q[q.Text=1]="Text",q[q.Subscribable=2]="Subscribable",q[q.VirtualItem=3]="VirtualItem",q[q.Function=4]="Function",q}({});function v(q){return q==null?$.Empty:typeof q=="function"?$.Function:F(q)?$.Text:T(q)?$.Subscribable:$.VirtualItem}function S(q){switch(v(q)){case $.Empty:return null;case $.Text:return Q(q.toString());case $.Subscribable:let z=q,G=z.value;return G==null?Q("",z):F(G)?Q(G.toString(),z):P([G],z);case $.VirtualItem:return q;case $.Function:let K=q();if(K==null)return null;if(F(K))return Q(K.toString());if(!H(K))throw Error(`unresolvable value in children after function calling. value: ${K}`);return K}}function w(q){return N(X.ComponentPointer,q)}function a(q){return N(X.ComponentInstance,q)}var W=class q extends Error{constructor(z){super(z)}static noInsertInTagNames(){return new q("`${...}` is not allowed in tag names")}static noInsertInAttrNames(){return new q("`${...}` is not allowed in attribute names")}static invalidCharacterInTagName(z){return new q(`${z} is not a valid html tag character`)}static invalidCharacterInAttributeName(z){return new q(`${z} is not a valid html attribute character`)}static expectedQuote(){return new q('expected double quote (")')}static expectedAttrName(){return new q("expected attribute name, got empty")}static expectedAttrEqual(){return new q("expected equal sign (=) right after attribute name")}static expectedTagClosing(){return new q("expected tag to be closing (with a slash: /)")}static expectedTagOpening(){return new q("expected an opening tag")}static tagMismatch(z,G){return new q(`the starting and closing tags do not match: \`${z}\` and \`${G}\``)}static noBackslashBeforeInsert(){return new q("there should be no backslash (\\) before ${...}")}static typeCheckComponentProps(){return new q("**do not** add attributes like how you would in JSX.this may lead to runtime type inconsistencies. instead, run components (e.g., `Page`) with attributes like this: \n  html`<${Page({ hello: 'world' })} />`\nthis ensures runtime type safety.")}},z0=class{#q;#z;#G;#J;constructor(q,z){this.#q=q,this.#z=z,this.#G=0,this.#J=0}next(){if(this.#G>=this.#q.length)return null;if(this.#q[this.#G].length==0)return this.#J=0,this.#G+=1,[!0,""];if(this.#J>=this.#q[this.#G].length)return null;let q=this.#q[this.#G],z=q[this.#J];return this.#J=(this.#J+1)%q.length,this.#G+=this.#J==0?1:0,[this.#J==0,z]}seek(){return this.#q[this.#G][this.#J]||null}getInsertion(){return this.#z[this.#G-1]??null}consume(){let q=[];for(;;){let z=this.next();if(!z)break;let[G,K]=z;if(K=="<"){if(G){let J=this.getInsertion();if(w(J)||a(J)){q.push(this.processComponent(J));continue}else throw W.noInsertInTagNames()}q.push(this.processElement())}else if(G){let J=S(this.getInsertion());J!==null&&q.push(J)}else if(!/\s/.test(K))throw W.expectedTagOpening()}return{__p:X.VirtualFragment,children:q}}processElement(){let[q,z,G,K]=this.consumeTag(),[J,O]=n(z);if(G)return{__p:X.VirtualElement,tag:q,attributes:O,children:[],listeners:J};let Y=this.consumeChildren(K),M=this.consumeEndTag();if(q!==M)throw W.tagMismatch(q,typeof M=="string"?M:"[component]");return{__p:X.VirtualElement,tag:q,attributes:O,children:Y,listeners:J}}processComponent(q){let[z,G,K]=this.consumeAttributes();if(z.size>0)throw W.typeCheckComponentProps();if(G)return q.ptr(w(q)?{}:q.props);let J=this.consumeChildren(K),O=this.consumeEndTag();if(typeof O!="function")throw W.tagMismatch("[component]",O);if(!w(O))throw TypeError("expected component pointer for end tag, got other functions instead");if(O.ptr!==q.ptr)throw W.tagMismatch("[component A]","[component B]");return q.ptr({children:P(J),...w(q)?{}:q.props})}consumeTag(){let q="";for(;;){let[z,G]=this.next();if(/\s/.test(G)){let[K,J,O]=this.consumeAttributes();return[q,K,J,O]}if(G==">")return[q,new Map,!1,z];if(z)throw W.noInsertInTagNames();if(!/[a-zA-Z0-9-]/.test(G))throw W.invalidCharacterInTagName(G);q+=G}}consumeAttributes(){let q=new Map,z="",G=0;for(;;){let[K,J]=this.next();if(J==">")return z&&q.set(z,"true"),[q,!1,K];if(J=="/"){let[Y,M]=this.consumeWhitespace();if(M!==">")throw W.expectedTagClosing();return z&&q.set(z,"true"),[q,!0,K]}if(G===0){if(!z&&(/\s/.test(J)||!J))continue;if(/\s|=/.test(J)){if(!z)throw W.expectedAttrName();G=1}else{if(K)throw W.noInsertInAttrNames();if(!/[a-zA-Z0-9-]/.test(J))throw W.invalidCharacterInAttributeName(J);z+=J;continue}}if(J===" "){q.set(z,"true"),z="",G=0;continue}if(J!=="=")throw W.expectedAttrEqual();let O=K?i(this.getInsertion()):this.consumeStringQuote();O!==null&&q.set(z,O),z="",G=0}}consumeEndTag(){let[q,z]=this.consumeWhitespace();if(z!=="/")throw W.expectedTagClosing();if(q){let J=this.getInsertion();if(typeof J=="function")return J;throw W.noInsertInTagNames()}let G="",K=0;for(;;){let[J,O]=this.next();if(O===">")return typeof G=="function"?G:G.trimEnd();if(J){let Y=this.getInsertion();if(typeof Y=="function"&&typeof G!="function")G=Y;else throw W.noInsertInTagNames()}else{if(typeof G=="function"||(/\s/.test(O)&&(K=1),K==0&&!/[a-zA-Z0-9-]/.test(O)))throw W.invalidCharacterInTagName(O);G+=O}}}consumeWhitespace(){let[q,z]=this.next();return/\s/.test(z)?this.consumeWhitespace():[q,z]}consumeStringQuote(){let q="",[z,G]=this.consumeWhitespace();if(G!=='"')throw W.expectedQuote();for(q+='"',z&&(q+=this.getInsertion().toString());;){let[K,J]=this.next();if(J=="\\"){let[O,Y]=this.next();if(O)throw W.noBackslashBeforeInsert();q+="\\"+Y;continue}if(J=='"')break;q+=J,K&&(q+=this.getInsertion().toString())}return JSON.parse(q+'"')}consumeChildren(q){let z="",G=[];for(q&&G.push(S(this.getInsertion()));;){let[K,J]=this.next();if(J==="<"){if(this.seek()==="/")break;z.trim()&&G.push(Q(A(z))),z="",G.push(this.processElement());continue}if(z+=J,K){z.trim()&&G.push(Q(A(z))),z="";let O=this.getInsertion();G.push(S(O))}}return z.trim()&&G.push(Q(A(z))),G}};function i(q){switch(v(q)){case $.Empty:return null;case $.Text:return q.toString();case $.Subscribable:return q;case $.VirtualItem:return null;case $.Function:return q}}function n(q){let z=[];for(let[G,K]of Object.entries(q))G.startsWith("on")&&typeof K=="function"&&(q.delete(G),z.push([G.slice(2),K]));return[z,q]}var G0=new u({pathname:"",hash:" "});var s=Symbol();function y(q){return q.map((z)=>S(z))}function V(q,z){let G=typeof z.children<"u"&&z.children!==null,K=!G?[]:Array.isArray(z.children)?z.children:[z.children];if(q===s)return P(y(K));else if(typeof q==="string"){if(G)delete z.children;return{__p:X.VirtualElement,tag:q,attributes:z,children:y(K),listeners:[]}}else if(typeof q==="function")return q(z)}function r(){let q=j(0);return V("button",{onclick:()=>q.update((z)=>z+1),children:["Current: ",q]})}f("#app").render(V(r,{}));

package/test.tsx

@@ -0,0 +1,8 @@
+import { state, select } from "@postact/core";
+
+function Counter() {
+  const $count = state(0);
+  return <button onclick={() => $count.update((v) => v + 1)}>Current: {$count}</button>;
+}
+
+select("#app").render(<Counter />);

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "allowJs": true,
+
+    "jsx": "react-jsx",
+    "jsxImportSource": "./",
+
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "composite": true,
+
+    "outDir": "./dist",
+
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "noEmit": false,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+  },
+  "exclude": ["./dist/**", "rolldown.config.ts"]
+}