@reckona/mreact-compiler 0.0.66 → 0.0.67

package/src/oxc-dom-lowering.ts

@@ -0,0 +1,127 @@
+import { readArray, readObject, readSource, unwrapOxcParentheses } from "./oxc-node-utils.js";
+import { readOxcJsxTagName } from "./oxc-jsx-attributes.js";
+import { normalizeOxcJsxText } from "./oxc-jsx-text.js";
+
+export function lowerOxcDomNodeExpression(
+  code: string,
+  node: Record<string, unknown>,
+): string | undefined {
+  const unwrapped = unwrapOxcParentheses(node);
+
+  if (unwrapped.type === "ConditionalExpression") {
+    const whenTrue = lowerOxcDomNodeExpression(code, readObject(unwrapped.consequent));
+    const whenFalse = lowerOxcDomNodeExpression(code, readObject(unwrapped.alternate));
+
+    if (whenTrue !== undefined && whenFalse !== undefined) {
+      return `((${readSource(code, readObject(unwrapped.test))}) ? ${whenTrue} : ${whenFalse})`;
+    }
+  }
+
+  if (unwrapped.type === "Literal" && (unwrapped.value === null || unwrapped.value === false)) {
+    return 'document.createTextNode("")';
+  }
+
+  node = unwrapped;
+
+  if (node.type !== "JSXElement") {
+    return undefined;
+  }
+
+  const openingElement = readObject(node.openingElement);
+  const tagName = readOxcJsxTagName(readObject(openingElement.name));
+
+  if (!/^[a-z]/.test(tagName)) {
+    return undefined;
+  }
+
+  return [
+    "(() => {",
+    `  const _node = document.createElement(${JSON.stringify(tagName)});`,
+    ...lowerOxcDomAttributes(code, readArray(openingElement.attributes)),
+    ...lowerOxcDomChildren(code, readArray(node.children)),
+    "  return _node;",
+    "})()",
+  ].join("\n");
+}
+
+function lowerOxcDomAttributes(code: string, attributes: readonly unknown[]): string[] {
+  return attributes.flatMap((attribute): string[] => {
+    const object = readObject(attribute);
+
+    if (object.type !== "JSXAttribute") {
+      return [];
+    }
+
+    const name = String(readObject(object.name).name);
+    const domName = htmlAttributeAliases[name] ?? name;
+    const value = readObject(object.value);
+
+    if (Object.keys(value).length === 0) {
+      return [`  _node.setAttribute(${JSON.stringify(domName)}, "");`];
+    }
+
+    if (value.type === "Literal") {
+      return [`  _node.setAttribute(${JSON.stringify(domName)}, ${JSON.stringify(value.value)});`];
+    }
+
+    if (value.type === "JSXExpressionContainer") {
+      return [
+        `  _node.setAttribute(${JSON.stringify(domName)}, String(${readSource(code, readObject(value.expression))}));`,
+      ];
+    }
+
+    return [];
+  });
+}
+
+const htmlAttributeAliases: Record<string, string> = {
+  acceptCharset: "accept-charset",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  charSet: "charset",
+  className: "class",
+  colSpan: "colspan",
+  contentEditable: "contenteditable",
+  crossOrigin: "crossorigin",
+  encType: "enctype",
+  formAction: "formaction",
+  frameBorder: "frameborder",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  noValidate: "novalidate",
+  playsInline: "playsinline",
+  readOnly: "readonly",
+  rowSpan: "rowspan",
+  spellCheck: "spellcheck",
+  srcDoc: "srcdoc",
+  srcSet: "srcset",
+  tabIndex: "tabindex",
+  useMap: "usemap",
+};
+
+function lowerOxcDomChildren(code: string, children: readonly unknown[]): string[] {
+  return children.flatMap((child, index): string[] => {
+    const object = readObject(child);
+
+    if (object.type === "JSXText") {
+      const value =
+        typeof object.value === "string"
+          ? normalizeOxcJsxText(object.value, children, index)
+          : "";
+      return value === "" ? [] : [`  _node.append(${JSON.stringify(value)});`];
+    }
+
+    if (object.type === "JSXExpressionContainer") {
+      return [`  _node.append(String(${readSource(code, readObject(object.expression))}));`];
+    }
+
+    if (object.type === "JSXElement") {
+      const lowered = lowerOxcDomNodeExpression(code, object);
+      return lowered === undefined ? [] : [`  _node.append(${lowered});`];
+    }
+
+    return [];
+  });
+}

package/src/oxc-expression-utils.ts

@@ -0,0 +1,42 @@
+import type { JsxNodeIr } from "./ir.js";
+import { readArray, readObject, unwrapOxcParentheses } from "./oxc-node-utils.js";
+
+export function readOxcReturnExpressionFromStatement(
+  statement: unknown,
+): Record<string, unknown> | undefined {
+  const object = readObject(statement);
+
+  if (object.type === "ReturnStatement") {
+    return unwrapOxcParentheses(readObject(object.argument));
+  }
+
+  if (object.type === "BlockStatement") {
+    const returnStatement = readArray(object.body)
+      .map(readObject)
+      .find((child) => child.type === "ReturnStatement");
+    return returnStatement === undefined
+      ? undefined
+      : unwrapOxcParentheses(readObject(returnStatement.argument));
+  }
+
+  return undefined;
+}
+
+export function isOxcJsxBranch(expression: Record<string, unknown>): boolean {
+  const unwrappedExpression = unwrapOxcParentheses(expression);
+  return unwrappedExpression.type === "JSXElement" || unwrappedExpression.type === "JSXFragment";
+}
+
+export function findOxcKeyCodeInChildren(children: readonly JsxNodeIr[]): string | undefined {
+  if (children.length !== 1) {
+    return undefined;
+  }
+
+  const child = children[0];
+
+  if (child?.kind === "element" || child?.kind === "component") {
+    return child.keyCode;
+  }
+
+  return undefined;
+}

package/src/oxc-jsx-attributes.ts

@@ -0,0 +1,110 @@
+import type { AttributeIr } from "./ir.js";
+import { unsupportedRefAttributeDiagnostic } from "./diagnostics.js";
+import { getOxcLocation, readObject, readSource, unwrapOxcParentheses } from "./oxc-node-utils.js";
+import type { CompileTarget, Diagnostic } from "./types.js";
+
+export function readOxcJsxTagName(node: Record<string, unknown>): string {
+  if (typeof node.name === "string") {
+    return node.name;
+  }
+
+  if (node.type === "JSXMemberExpression") {
+    const objectName = readOxcJsxTagName(readObject(node.object));
+    const propertyName = readOxcJsxTagName(readObject(node.property));
+    return `${objectName}.${propertyName}`;
+  }
+
+  return "";
+}
+
+export function analyzeOxcAttribute(
+  code: string,
+  attr: unknown,
+  target: CompileTarget,
+  diagnostics: Pick<Diagnostic, "level" | "code" | "message" | "loc">[],
+  options: {
+    allowRef?: boolean;
+    resolveExpressionCode?: (expression: Record<string, unknown>) => string;
+  } = {},
+): AttributeIr[] {
+  const object = readObject(attr);
+
+  if (object.type === "JSXSpreadAttribute") {
+    return [{ kind: "spread-attr", code: readSource(code, readObject(object.argument)) }];
+  }
+
+  if (object.type !== "JSXAttribute") {
+    return [];
+  }
+
+  const name = String(readObject(object.name).name);
+  const value = readObject(object.value);
+
+  if (name === "ref" && options.allowRef !== true) {
+    diagnostics.push(unsupportedRefAttributeDiagnostic(getOxcLocation(code, object.name)));
+  }
+
+  if (value.type === "Literal") {
+    return [{ kind: "static-attr", name, value: String(value.value) }];
+  }
+
+  if (value.type === "JSXExpressionContainer") {
+    const expression = readObject(value.expression);
+    const expressionCode = options.resolveExpressionCode?.(expression) ?? readSource(code, expression);
+
+    if (/^on[A-Z]/.test(name)) {
+      if (target === "server") {
+        const loc = getOxcLocation(code, object.name);
+        diagnostics.push({
+          level: "error",
+          code: "MR_UNSUPPORTED_SERVER_EVENT_HANDLER",
+          message: `Server target does not support event handler '${name}'.`,
+          ...(loc === undefined ? {} : { loc }),
+        });
+      }
+
+      return [
+        {
+          kind: "event",
+          name,
+          eventName: name.slice(2).toLowerCase(),
+          code: expressionCode,
+        },
+      ];
+    }
+
+    return [{ kind: "dynamic-attr", name, code: expressionCode }];
+  }
+
+  return [{ kind: "static-attr", name, value: "" }];
+}
+
+export function findOxcJsxAttributeCode(
+  code: string,
+  attributes: readonly unknown[],
+  name: string,
+): string | undefined {
+  for (const attr of attributes) {
+    const object = readObject(attr);
+
+    if (object.type !== "JSXAttribute" || String(readObject(object.name).name) !== name) {
+      continue;
+    }
+
+    const value = readObject(object.value);
+
+    if (Object.keys(value).length === 0) {
+      return "true";
+    }
+
+    if (value.type === "Literal") {
+      return JSON.stringify(value.value);
+    }
+
+    if (value.type === "JSXExpressionContainer") {
+      return readSource(code, unwrapOxcParentheses(readObject(value.expression)));
+    }
+  }
+
+  return undefined;
+}

package/src/oxc-jsx-text.ts

@@ -0,0 +1,84 @@
+export function normalizeOxcJsxText(
+  rawValue: string,
+  siblings: readonly unknown[],
+  index: number,
+): string {
+  const value = rawValue.replace(/\s+/g, " ");
+
+  if (value.trim() === "") {
+    const isSameLineSeparator = !/[\r\n]/.test(rawValue);
+    return isSameLineSeparator &&
+      siblings[index - 1] !== undefined &&
+      siblings[index + 1] !== undefined
+      ? " "
+      : "";
+  }
+
+  const previousSibling = siblings[index - 1];
+  const nextSibling = siblings[index + 1];
+  const leadingWhitespace = rawValue.match(/^\s*/)?.[0] ?? "";
+  const trailingWhitespace = rawValue.match(/\s*$/)?.[0] ?? "";
+  const preserveLeadingSpace = previousSibling !== undefined && !/[\r\n]/.test(leadingWhitespace);
+  const preserveTrailingSpace = nextSibling !== undefined && !/[\r\n]/.test(trailingWhitespace);
+
+  return value
+    .replace(/^\s+/, preserveLeadingSpace ? " " : "")
+    .replace(/\s+$/, preserveTrailingSpace ? " " : "")
+    .replace(htmlEntityPattern, decodeHtmlEntity);
+}
+
+const htmlEntityPattern = /&(#\d+|#x[\da-fA-F]+|[A-Za-z][A-Za-z\d]+);/g;
+
+const namedHtmlEntities: Record<string, string> = {
+  amp: "&",
+  apos: "'",
+  bull: "\u2022",
+  cent: "\u00a2",
+  copy: "\u00a9",
+  deg: "\u00b0",
+  divide: "\u00f7",
+  euro: "\u20ac",
+  gt: ">",
+  hellip: "\u2026",
+  laquo: "\u00ab",
+  ldquo: "\u201c",
+  lsaquo: "\u2039",
+  lsquo: "\u2018",
+  lt: "<",
+  mdash: "\u2014",
+  middot: "\u00b7",
+  nbsp: "\u00a0",
+  ndash: "\u2013",
+  pound: "\u00a3",
+  quot: "\"",
+  raquo: "\u00bb",
+  rdquo: "\u201d",
+  reg: "\u00ae",
+  rsaquo: "\u203a",
+  rsquo: "\u2019",
+  times: "\u00d7",
+  trade: "\u2122",
+  yen: "\u00a5",
+};
+
+function decodeHtmlEntity(entity: string, body: string): string {
+  if (body.startsWith("#x") || body.startsWith("#X")) {
+    return decodeNumericHtmlEntity(entity, body.slice(2), 16);
+  }
+
+  if (body.startsWith("#")) {
+    return decodeNumericHtmlEntity(entity, body.slice(1), 10);
+  }
+
+  return namedHtmlEntities[body] ?? entity;
+}
+
+function decodeNumericHtmlEntity(entity: string, value: string, radix: number): string {
+  const codePoint = Number.parseInt(value, radix);
+
+  if (!Number.isFinite(codePoint) || codePoint < 0 || codePoint > 0x10ffff) {
+    return entity;
+  }
+
+  return String.fromCodePoint(codePoint);
+}

package/src/oxc-nested-lowering.ts

@@ -0,0 +1,319 @@
+import type { OxcBodyStatementJsxMode } from "./oxc-analysis-types.js";
+import { type OxcBodyLowerers } from "./oxc-body-lowering.js";
+import {
+  analyzeOxcExpressionChild,
+  type OxcChildAnalysisContext,
+} from "./oxc-child-analysis.js";
+import { markOxcCompatRuntimeReferences } from "./oxc-component-references.js";
+import { lowerOxcDomNodeExpression } from "./oxc-dom-lowering.js";
+import { readOxcJsxTagName } from "./oxc-jsx-attributes.js";
+import { normalizeOxcJsxText } from "./oxc-jsx-text.js";
+import { readArray, readObject, readSource, unwrapOxcParentheses } from "./oxc-node-utils.js";
+import {
+  emitOxcCompatObjectChildren,
+  emitOxcServerStringChildren,
+} from "./oxc-runtime-emit.js";
+import type { ClientReferenceIr } from "./ir.js";
+import type { CompileTarget, Diagnostic } from "./types.js";
+
+const oxcNestedBodyLowerers: OxcBodyLowerers = {
+  lowerDomNodeExpression: lowerOxcDomNodeExpression,
+  lowerCompatObjectExpression: lowerOxcCompatObjectExpression,
+  lowerServerStringExpression: lowerOxcServerStringExpression,
+};
+
+export function lowerOxcCompatObjectExpression(
+  code: string,
+  expression: Record<string, unknown>,
+  componentNames: Set<string>,
+  target: CompileTarget,
+  diagnostics: Diagnostic[],
+): string | undefined {
+  const children = analyzeOxcExpressionChild(
+    code,
+    expression,
+    createOxcNestedChildAnalysisContext(componentNames, target, diagnostics, "compat-object"),
+    "compat-object",
+  );
+
+  if (children.length === 0) {
+    return "null";
+  }
+
+  return emitOxcCompatObjectChildren(children);
+}
+
+export function lowerOxcCompatReactNodeExpression(
+  code: string,
+  expression: Record<string, unknown>,
+  componentNames: Set<string>,
+  target: CompileTarget,
+  diagnostics: Diagnostic[],
+): string | undefined {
+  const unwrapped = unwrapOxcParentheses(expression);
+
+  if (unwrapped.type === "JSXElement" || unwrapped.type === "JSXFragment") {
+    return lowerOxcCompatObjectExpression(code, unwrapped, componentNames, target, diagnostics);
+  }
+
+  if (unwrapped.type === "ArrayExpression") {
+    return `[${readArray(unwrapped.elements)
+      .map((element) => {
+        const elementObject = unwrapOxcParentheses(readObject(element));
+        return (
+          lowerOxcCompatReactNodeExpression(
+            code,
+            elementObject,
+            componentNames,
+            target,
+            diagnostics,
+          ) ?? readSource(code, elementObject)
+        );
+      })
+      .join(", ")}]`;
+  }
+
+  return undefined;
+}
+
+export function lowerOxcNestedJsxExpression(
+  code: string,
+  expression: Record<string, unknown>,
+  componentNames: Set<string>,
+  target: CompileTarget,
+  diagnostics: Diagnostic[],
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): string | undefined {
+  const source = readSource(code, expression);
+  const expressionStart = typeof expression.start === "number" ? expression.start : 0;
+  const replacements: Array<{ start: number; end: number; value: string }> = [];
+
+  visitOxcExpressionJsxRoots(expression, (node) => {
+    const start = typeof node.start === "number" ? node.start : undefined;
+    const end = typeof node.end === "number" ? node.end : undefined;
+
+    if (start === undefined || end === undefined) {
+      return;
+    }
+
+    const lowered =
+      bodyStatementJsx === "compat-object"
+        ? lowerOxcCompatReactNodeExpression(code, node, componentNames, target, diagnostics)
+        : bodyStatementJsx === "server-string"
+          ? lowerOxcServerStringExpression(code, node, componentNames, target, diagnostics)
+          : lowerOxcReactiveValueExpression(code, node, componentNames);
+
+    if (lowered !== undefined) {
+      replacements.push({ start, end, value: lowered });
+    }
+  });
+
+  if (replacements.length === 0) {
+    return undefined;
+  }
+
+  let lowered = source;
+
+  for (const replacement of replacements.sort((left, right) => right.start - left.start)) {
+    const start = replacement.start - expressionStart;
+    const end = replacement.end - expressionStart;
+    lowered = `${lowered.slice(0, start)}${replacement.value}${lowered.slice(end)}`;
+  }
+
+  return lowered;
+}
+
+function visitOxcExpressionJsxRoots(
+  node: Record<string, unknown>,
+  visit: (node: Record<string, unknown>) => void,
+): void {
+  const unwrapped = unwrapOxcParentheses(node);
+
+  if (unwrapped.type === "JSXElement" || unwrapped.type === "JSXFragment") {
+    visit(unwrapped);
+    return;
+  }
+
+  for (const value of Object.values(unwrapped)) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        const object = readObject(item);
+        if (Object.keys(object).length > 0) {
+          visitOxcExpressionJsxRoots(object, visit);
+        }
+      }
+      continue;
+    }
+
+    if (typeof value === "object" && value !== null) {
+      const object = readObject(value);
+      if (Object.keys(object).length > 0) {
+        visitOxcExpressionJsxRoots(object, visit);
+      }
+    }
+  }
+}
+
+export function lowerOxcReactiveValueExpression(
+  code: string,
+  expression: Record<string, unknown>,
+  componentNames: Set<string>,
+): string | undefined {
+  const unwrapped = unwrapOxcParentheses(expression);
+
+  if (unwrapped.type === "JSXFragment") {
+    const children = readArray(unwrapped.children)
+      .map((child, index, siblings) =>
+        lowerOxcReactiveChildValue(code, readObject(child), componentNames, siblings, index),
+      )
+      .filter((child): child is string => child !== undefined);
+
+    return [
+      "(() => {",
+      "  const _fragment = document.createDocumentFragment();",
+      ...children.map((child) => `  _fragment.append(${child});`),
+      "  return _fragment;",
+      "})()",
+    ].join("\n");
+  }
+
+  if (unwrapped.type !== "JSXElement") {
+    return undefined;
+  }
+
+  const openingElement = readObject(unwrapped.openingElement);
+  const tagName = readOxcJsxTagName(readObject(openingElement.name));
+
+  if (/^[a-z]/.test(tagName)) {
+    return lowerOxcDomNodeExpression(code, unwrapped);
+  }
+
+  if (!componentNames.has(tagName)) {
+    return undefined;
+  }
+
+  return `${tagName}(${lowerOxcReactiveComponentProps(code, unwrapped, componentNames)})`;
+}
+
+function lowerOxcReactiveComponentProps(
+  code: string,
+  node: Record<string, unknown>,
+  componentNames: Set<string>,
+): string {
+  const openingElement = readObject(node.openingElement);
+  const entries = readArray(openingElement.attributes).flatMap((attribute): string[] => {
+    const object = readObject(attribute);
+
+    if (object.type === "JSXSpreadAttribute") {
+      return [`...(${readSource(code, readObject(object.argument))})`];
+    }
+
+    if (object.type !== "JSXAttribute") {
+      return [];
+    }
+
+    const name = String(readObject(object.name).name);
+    const value = readObject(object.value);
+
+    if (Object.keys(value).length === 0) {
+      return [`${JSON.stringify(name)}: true`];
+    }
+
+    if (value.type === "Literal") {
+      return [`${JSON.stringify(name)}: ${JSON.stringify(value.value)}`];
+    }
+
+    if (value.type === "JSXExpressionContainer") {
+      const expression = readObject(value.expression);
+      return [
+        `${JSON.stringify(name)}: ${
+          lowerOxcNestedJsxExpression(code, expression, componentNames, "client", [], "dom-node") ??
+          readSource(code, expression)
+        }`,
+      ];
+    }
+
+    return [];
+  });
+  const children = readArray(node.children)
+    .map((child, index, siblings) =>
+      lowerOxcReactiveChildValue(code, readObject(child), componentNames, siblings, index),
+    )
+    .filter((child): child is string => child !== undefined);
+
+  if (children.length === 1) {
+    entries.push(`"children": ${children[0]}`);
+  } else if (children.length > 1) {
+    entries.push(`"children": [${children.join(", ")}]`);
+  }
+
+  return entries.length === 0 ? "{}" : `{ ${entries.join(", ")} }`;
+}
+
+function lowerOxcReactiveChildValue(
+  code: string,
+  child: Record<string, unknown>,
+  componentNames: Set<string>,
+  siblings: readonly unknown[],
+  index: number,
+): string | undefined {
+  if (child.type === "JSXText") {
+    const value =
+      typeof child.value === "string" ? normalizeOxcJsxText(child.value, siblings, index) : "";
+    return value === "" ? undefined : JSON.stringify(value);
+  }
+
+  if (child.type === "JSXExpressionContainer") {
+    const expression = readObject(child.expression);
+    return (
+      lowerOxcNestedJsxExpression(code, expression, componentNames, "client", [], "dom-node") ??
+      readSource(code, expression)
+    );
+  }
+
+  return lowerOxcReactiveValueExpression(code, child, componentNames);
+}
+
+export function lowerOxcServerStringExpression(
+  code: string,
+  expression: Record<string, unknown>,
+  componentNames: Set<string>,
+  target: CompileTarget,
+  diagnostics: Diagnostic[],
+  compatRuntimeReferences: ReadonlyMap<string, ClientReferenceIr> = new Map(),
+): string | undefined {
+  const children = analyzeOxcExpressionChild(
+    code,
+    expression,
+    createOxcNestedChildAnalysisContext(componentNames, target, diagnostics, "server-string"),
+    "server-string",
+  );
+
+  if (children.length === 0) {
+    return '""';
+  }
+
+  if (compatRuntimeReferences.size > 0) {
+    for (const child of children) {
+      markOxcCompatRuntimeReferences(child, compatRuntimeReferences);
+    }
+  }
+
+  return emitOxcServerStringChildren(children);
+}
+
+function createOxcNestedChildAnalysisContext(
+  componentNames: Set<string>,
+  target: CompileTarget,
+  diagnostics: Diagnostic[],
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): OxcChildAnalysisContext {
+  return {
+    componentNames,
+    target,
+    diagnostics,
+    bodyStatementJsx,
+    bodyLowerers: oxcNestedBodyLowerers,
+    lowerNestedJsxExpression: lowerOxcNestedJsxExpression,
+  };
+}