Bundle JSX stop-gap impls.

Author: thesoftwarephilosopher

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@imlib/core",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "main": "out/index.js",
   "bin": {
     "imlib": "out/cli.js"

package.json

@@ -1,6 +1,7 @@
 export { startDevServer } from './dev-server.js';
 export { generateFiles } from './file-generator.js';
 export { File } from './file.js';
+export { jsxToString } from './jsx-strings.js';
 export { Module } from './module.js';
 export { Runtime } from './runtime.js';
 export * from './ssp.js';

src/index.ts

@@ -0,0 +1,80 @@
+const jsx = Symbol.for('jsx');
+
+export const $ = jsxToDOM;
+
+export function jsxToDOM<T extends Node>({ [jsx]: tag, ...attrs }: JSX.Element): T {
+  if (typeof tag === 'function') {
+    const result = tag(attrs);
+    if (result && typeof result === 'object' && jsx in result) {
+      return jsxToDOM(result);
+    }
+    return result;
+  }
+
+  let children = attrs.children;
+  delete attrs.children;
+  if (!Array.isArray(children)) children = [children];
+
+  if (tag === '') {
+    const goodChildren = getGoodChildren(children);
+    if (goodChildren.length === 1) {
+      return goodChildren[0];
+    }
+    const el = document.createDocumentFragment();
+    pushChildren(el, goodChildren);
+    return el as unknown as T;
+  }
+
+  const isSvg = svgs.has(tag);
+  const el = (isSvg
+    ? document.createElementNS('http://www.w3.org/2000/svg', tag)
+    : document.createElement(tag));
+
+  pushChildren(el, getGoodChildren(children));
+
+  for (const [key, val] of Object.entries(attrs)) {
+    if (key.startsWith('data-')) {
+      el.dataset[key.slice(5)] = val;
+    }
+    else if (isSvg) {
+      const jsKey = key.replace(/-\w/, (s) => `${s.toUpperCase()}`);
+      el.setAttribute(jsKey, val);
+    }
+    else {
+      const jsKey = replacements[key] ?? key.replace(/-\w/, (s) => `${s.toUpperCase()}`);
+      if (isSvg || attributes.has(jsKey)) {
+        el.setAttribute(jsKey, val);
+      }
+      else {
+        (el as any)[jsKey] = val;
+      }
+    }
+  }
+  return el;
+}
+
+function getGoodChildren(children: any) {
+  return [children].flat(Infinity).filter(child => child !== null && child !== undefined && child !== false);
+}
+
+function pushChildren(el: DocumentFragment | HTMLElement | SVGElement, children: any[]) {
+  for (let child of children) {
+    if (typeof child === 'object' && jsx in child) {
+      child = jsxToDOM(child);
+    }
+
+    if (child instanceof HTMLLinkElement || child instanceof HTMLStyleElement) {
+      document.head.append(child);
+    }
+    else {
+      el.append(child);
+    }
+  }
+}
+
+const replacements: Record<string, string> = {
+  "class": 'className',
+};
+
+const attributes = new Set(['d', 'viewBox']);
+const svgs = new Set(['svg', 'path', 'use']);

src/jsx-dom.ts

@@ -0,0 +1,59 @@
+const UNARY = new Set(["img", "br", "hr", "input", "meta", "link"]);
+
+const jsx = Symbol.for('jsx');
+
+export function jsxToString({ [jsx]: tag, ...attrs }: JSX.Element): string {
+  if (typeof tag === 'function') {
+    const result = tag(attrs);
+    if (result && typeof result === 'object' && jsx in result) {
+      return jsxToString(result);
+    }
+    return result;
+  }
+
+  let children = attrs.children;
+  delete attrs.children;
+  if (!Array.isArray(children)) children = [children];
+
+  const parts: string[] = [];
+
+  if (tag === '') {
+    pushChildren(children, parts);
+    return parts.join('');
+  }
+
+  parts.push('<', tag);
+  for (const k in attrs) {
+    const v = attrs[k];
+    if (v === true)
+      parts.push(' ', k);
+    else if (v)
+      parts.push(' ', k, '="', v, '"');
+  }
+  parts.push('>');
+
+  if (!UNARY.has(tag)) {
+    pushChildren(children, parts);
+    parts.push('</', tag, '>');
+  }
+
+  return parts.join('');
+}
+
+function pushChildren(children: any[], parts: string[]) {
+  for (const child of children) {
+    if (child !== null && child !== undefined && child !== false) {
+      if (Array.isArray(child)) {
+        pushChildren(child, parts);
+      }
+      else {
+        if (typeof child === 'object' && jsx in child) {
+          parts.push(jsxToString(child));
+        }
+        else {
+          parts.push(child);
+        }
+      }
+    }
+  }
+}