@reckona/mreact-compiler 0.0.66 → 0.0.68

package/src/oxc-runtime-emit.ts

@@ -0,0 +1,212 @@
+import type { AttributeIr, ComponentPropIr, JsxNodeIr } from "./ir.js";
+import { escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
+
+export const oxcServerStringReactNodeRenderHelperPlaceholder =
+  "__mreactRenderReactNodeToString";
+
+export function emitOxcServerStringChildren(children: readonly JsxNodeIr[]): string {
+  if (children.length === 0) {
+    return '""';
+  }
+
+  return children.map(emitOxcServerStringNode).join(" + ");
+}
+
+function emitOxcServerStringNode(node: JsxNodeIr): string {
+  if (node.kind === "text") {
+    return JSON.stringify(node.value);
+  }
+
+  if (node.kind === "expr") {
+    return `_escapeHtml(${node.code})`;
+  }
+
+  if (node.kind === "conditional") {
+    return `((${node.conditionCode}) ? ${emitOxcServerStringChildren(node.whenTrue)} : ${emitOxcServerStringChildren(node.whenFalse)})`;
+  }
+
+  if (node.kind === "list") {
+    const parameters =
+      node.indexName === undefined ? node.itemName : `${node.itemName}, ${node.indexName}`;
+    return `(${node.itemsCode}).map((${parameters}) => ${emitOxcServerStringChildren(node.children)}).join("")`;
+  }
+
+  if (node.kind === "fragment") {
+    return emitOxcServerStringChildren(node.children);
+  }
+
+  if (node.kind === "component") {
+    const props = emitOxcServerComponentProps(node.props, node.children);
+    if (node.runtime === "compat") {
+      return `${oxcServerStringReactNodeRenderHelperPlaceholder}(${node.name}, ${props})`;
+    }
+    return `${node.name}(${props})`;
+  }
+
+  if (node.kind === "async-boundary") {
+    return '""';
+  }
+
+  const attrs = node.attributes.map(emitOxcServerAttribute).join(" + ");
+  const open =
+    attrs === ""
+      ? JSON.stringify(`<${node.tagName}>`)
+      : `${JSON.stringify(`<${node.tagName}`)} + ${attrs} + ">"`;
+  return `${open} + ${emitOxcServerStringChildren(node.children)} + ${JSON.stringify(`</${node.tagName}>`)}`;
+}
+
+function emitOxcServerComponentProps(
+  props: readonly ComponentPropIr[],
+  children: readonly JsxNodeIr[],
+): string {
+  const entries = props.map((prop) => {
+    if (prop.kind === "spread-prop") {
+      return `...(${prop.code})`;
+    }
+
+    if (prop.kind === "render-prop") {
+      return `${emitOxcCompatObjectPropName(prop.name)}: ${emitOxcServerStringChildren(prop.children)}`;
+    }
+
+    return `${emitOxcCompatObjectPropName(prop.name)}: (${prop.code})`;
+  });
+
+  if (children.length > 0) {
+    entries.push(`children: ${emitOxcServerStringChildren(children)}`);
+  }
+
+  return `{ ${entries.join(", ")} }`;
+}
+
+function emitOxcServerAttribute(attr: AttributeIr): string {
+  if (attr.kind === "static-attr") {
+    return JSON.stringify(` ${attr.name}="${escapeHtmlAttribute(attr.value)}"`);
+  }
+
+  if (attr.kind === "dynamic-attr") {
+    return `${JSON.stringify(` ${attr.name}="`)} + _escapeHtml(${attr.code}) + ${JSON.stringify('"')}`;
+  }
+
+  return '""';
+}
+
+function emitOxcCompatObjectNode(node: JsxNodeIr): string {
+  if (node.kind === "text") {
+    return JSON.stringify(node.value);
+  }
+
+  if (node.kind === "expr") {
+    return `(${node.code})`;
+  }
+
+  if (node.kind === "conditional") {
+    return `(${node.conditionCode}) ? ${emitOxcCompatObjectChildren(node.whenTrue)} : ${emitOxcCompatObjectChildren(node.whenFalse)}`;
+  }
+
+  if (node.kind === "list") {
+    const parameters =
+      node.indexName === undefined ? node.itemName : `${node.itemName}, ${node.indexName}`;
+    return `(${node.itemsCode}).map((${parameters}) => ${emitOxcCompatObjectChildren(node.children)})`;
+  }
+
+  if (node.kind === "fragment") {
+    return emitOxcCompatObjectElement('Symbol.for("modular.react.fragment")', [], node.children);
+  }
+
+  if (node.kind === "component") {
+    return emitOxcCompatObjectElement(
+      node.name,
+      node.props.map(emitOxcCompatObjectComponentProp),
+      node.children,
+      node.keyCode,
+    );
+  }
+
+  if (node.kind === "async-boundary") {
+    return "null";
+  }
+
+  return emitOxcCompatObjectElement(
+    JSON.stringify(node.tagName),
+    node.attributes.map(emitOxcCompatObjectAttribute),
+    node.children,
+    node.keyCode,
+  );
+}
+
+export function emitOxcCompatObjectChildren(children: readonly JsxNodeIr[]): string {
+  if (children.length === 0) {
+    return "null";
+  }
+
+  if (children.length === 1) {
+    return emitOxcCompatObjectNode(children[0] as JsxNodeIr);
+  }
+
+  return `[${children.map(emitOxcCompatObjectNode).join(", ")}]`;
+}
+
+function emitOxcCompatObjectElement(
+  typeCode: string,
+  propEntries: readonly string[],
+  children: readonly JsxNodeIr[],
+  explicitKeyCode?: string,
+): string {
+  const entries = [...propEntries];
+
+  if (children.length > 0) {
+    entries.push(`children: ${emitOxcCompatObjectChildren(children)}`);
+  }
+
+  const keyExpression =
+    explicitKeyCode === undefined
+      ? "_props.key === undefined ? null : String(_props.key)"
+      : `String(${explicitKeyCode})`;
+
+  return [
+    "(() => {",
+    `  const _props = { ${entries.join(", ")} };`,
+    `  const _key = ${keyExpression};`,
+    "  const _ref = _props.ref ?? null;",
+    "  delete _props.key;",
+    "  delete _props.ref;",
+    '  return { $$typeof: Symbol.for("modular.react.element"),',
+    `    type: ${typeCode},`,
+    "    key: _key,",
+    "    ref: _ref,",
+    "    props: _props };",
+    "})()",
+  ].join("\n");
+}
+
+function emitOxcCompatObjectAttribute(attr: AttributeIr): string {
+  if (attr.kind === "spread-attr") {
+    return `...(${attr.code})`;
+  }
+
+  if (attr.kind === "static-attr") {
+    return `${emitOxcCompatObjectPropName(attr.name)}: ${JSON.stringify(attr.value)}`;
+  }
+
+  if (attr.kind === "dynamic-attr") {
+    return `${emitOxcCompatObjectPropName(attr.name)}: (${attr.code})`;
+  }
+
+  return `${emitOxcCompatObjectPropName(attr.name)}: ${attr.code}`;
+}
+
+function emitOxcCompatObjectComponentProp(prop: ComponentPropIr): string {
+  if (prop.kind === "spread-prop") {
+    return `...(${prop.code})`;
+  }
+
+  if (prop.kind === "render-prop") {
+    return `${emitOxcCompatObjectPropName(prop.name)}: ${emitOxcCompatObjectChildren(prop.children)}`;
+  }
+
+  return `${emitOxcCompatObjectPropName(prop.name)}: (${prop.code})`;
+}
+
+function emitOxcCompatObjectPropName(name: string): string {
+  return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name);
+}

package/src/oxc-transform.ts

@@ -0,0 +1,77 @@
+import { transformSync } from "oxc-transform";
+
+export function stripTypeScriptWithOxc(source: string): string {
+  if (!needsTypeScriptStripping(source)) {
+    return source.trimEnd();
+  }
+
+  const result = transformSync("snippet.tsx", source, {
+    lang: "tsx",
+    sourceType: "module",
+    target: "es2022",
+    jsx: "preserve",
+    typescript: {
+      onlyRemoveTypeImports: true,
+    },
+  });
+
+  if (result.errors.length > 0) {
+    return source.trimEnd();
+  }
+
+  return result.code.trimEnd();
+}
+
+function needsTypeScriptStripping(source: string): boolean {
+  return (
+    /\bimport\s+type\b/.test(source) ||
+    /\btype\s+[A-Za-z_$][\w$]*\b/.test(source) ||
+    /\binterface\s+[A-Za-z_$][\w$]*\b/.test(source) ||
+    /\b[A-Za-z_$][\w$.]*\s*<[^>\n]+>\s*\(/.test(source) ||
+    /\bas\s+(?:const|[A-Za-z_$][\w$]*)\b/.test(source) ||
+    /:\s*[A-Za-z_$][\w$<>,\s|&.[\]?]*(?=[,)=;{])/.test(source)
+  );
+}
+
+export function transformJsxWithOxc(source: string): string {
+  const result = transformSync("snippet.tsx", source, {
+    lang: "tsx",
+    sourceType: "module",
+    target: "es2022",
+    jsx: {
+      runtime: "automatic",
+      importSource: "@reckona/mreact-compat",
+    },
+    typescript: {
+      onlyRemoveTypeImports: true,
+    },
+  });
+
+  if (result.errors.length > 0 && result.code === "") {
+    return stripTypeScriptWithOxc(source);
+  }
+
+  return result.code.trimEnd();
+}
+
+export function transformJsxToCreateElementWithOxc(source: string): string {
+  const result = transformSync("snippet.tsx", source, {
+    lang: "tsx",
+    sourceType: "module",
+    target: "es2022",
+    jsx: {
+      runtime: "classic",
+      pragma: "createElement",
+      pragmaFrag: "Fragment",
+    },
+    typescript: {
+      onlyRemoveTypeImports: true,
+    },
+  });
+
+  if (result.errors.length > 0 && result.code === "") {
+    return stripTypeScriptWithOxc(source);
+  }
+
+  return result.code.trimEnd();
+}