@reckona/mreact-compiler 0.0.66 → 0.0.68

package/src/oxc-code-utils.ts

@@ -0,0 +1,19 @@
+export function stripOxcGeneratedImports(code: string): string {
+  return code
+    .split("\n")
+    .filter(
+      (line) =>
+        !/^\s*import\s+\{.*\}\s+from\s+["@']@reckona\/mreact-compat\/jsx-runtime/.test(line),
+    )
+    .join("\n");
+}
+
+export function normalizeOxcExpressionCode(code: string): string {
+  return code
+    .trim()
+    .replace(/;$/, "")
+    .replace(/\/\* @__PURE__ \*\/\s*/g, "")
+    .replace(/children: \(\(([^()]+)\) =>/g, "children: ($1) =>")
+    .replace(/\(\(([^()]+)\) =>/g, "($1) =>")
+    .replace(/children: ([A-Za-z_$][\w$.]*)/g, "children: ($1)");
+}

package/src/oxc-component-detection.ts

@@ -0,0 +1,459 @@
+import { readArray, readObject, unwrapOxcParentheses } from "./oxc-node-utils.js";
+import type { AnalyzeModuleOptions } from "./types.js";
+
+export function collectOxcExportedFunctionNames(program: unknown): string[] {
+  return readArray(readObject(program).body).flatMap((statement) => {
+    const object = readObject(statement);
+
+    if (object.type === "ExportDefaultDeclaration") {
+      const declaration = unwrapOxcComponentFunctionLikeInitializer(readObject(object.declaration));
+      const id = readObject(declaration?.id);
+      return [typeof id.name === "string" ? id.name : "DefaultExport"];
+    }
+
+    if (object.type !== "ExportNamedDeclaration") {
+      return [];
+    }
+
+    const declaration = readObject(object.declaration);
+
+    if (declaration.type === "FunctionDeclaration") {
+      const id = readObject(declaration.id);
+      return typeof id.name === "string" ? [id.name] : [];
+    }
+
+    const variableComponent = readOxcVariableComponentDeclaration(declaration);
+    return variableComponent === undefined ? [] : [variableComponent.name];
+  });
+}
+
+export function collectOxcPlainComponentNames(program: unknown): string[] {
+  return readArray(readObject(program).body).flatMap((statement) => {
+    const component = readOxcPlainComponent(statement);
+    return component === undefined ? [] : [component.name];
+  });
+}
+
+export function collectOxcExportedComponents(program: unknown): string[] {
+  const body = readArray(readObject(program).body);
+  const components: string[] = [];
+
+  for (const statement of body) {
+    const object = readObject(statement);
+
+    if (object.type === "ExportDefaultDeclaration") {
+      const declaration = unwrapOxcComponentFunctionLikeInitializer(readObject(object.declaration));
+
+      if (declaration !== undefined && hasOxcFunctionLikeComponentReturn(declaration)) {
+        components.push("default");
+      }
+      continue;
+    }
+
+    if (object.type !== "ExportNamedDeclaration") {
+      continue;
+    }
+
+    const declaration = readObject(object.declaration);
+
+    if (declaration.type === "FunctionDeclaration" && hasComponentReturn(declaration.body)) {
+      const id = readObject(declaration.id);
+
+      if (typeof id.name === "string") {
+        components.push(id.name);
+      }
+      continue;
+    }
+
+    const variableComponent = readOxcVariableComponentDeclaration(declaration);
+
+    if (variableComponent !== undefined) {
+      components.push(variableComponent.name);
+    }
+  }
+
+  return components;
+}
+
+export function collectOxcAsyncComponentNames(program: unknown): Set<string> {
+  const names = new Set<string>();
+  const body = readArray(readObject(program).body);
+
+  for (const statement of body) {
+    const object = readObject(statement);
+    const declaration =
+      object.type === "ExportDefaultDeclaration" || object.type === "ExportNamedDeclaration"
+        ? readObject(object.declaration)
+        : object;
+    const functionLike =
+      declaration.type === "VariableDeclaration"
+        ? readOxcVariableComponentDeclaration(declaration)?.initializer
+        : unwrapOxcComponentFunctionLikeInitializer(declaration);
+
+    if (
+      functionLike === undefined ||
+      functionLike.async !== true ||
+      !hasOxcFunctionLikeComponentReturn(functionLike)
+    ) {
+      continue;
+    }
+
+    if (object.type === "ExportDefaultDeclaration") {
+      const id = readObject(functionLike.id);
+      names.add(typeof id.name === "string" ? id.name : "DefaultExport");
+      continue;
+    }
+
+    const id = readObject(functionLike.id);
+
+    if (typeof id.name === "string") {
+      names.add(id.name);
+    }
+  }
+
+  return names;
+}
+
+export function isOxcExportedJsxComponent(statement: unknown): boolean {
+  const object = readObject(statement);
+
+  if (object.type === "ExportDefaultDeclaration") {
+    const declaration = unwrapOxcComponentFunctionLikeInitializer(readObject(object.declaration));
+    return declaration !== undefined && hasOxcFunctionLikeComponentReturn(declaration);
+  }
+
+  if (object.type !== "ExportNamedDeclaration") {
+    return false;
+  }
+
+  const declaration = readObject(object.declaration);
+  return (
+    (declaration.type === "FunctionDeclaration" && hasComponentReturn(declaration.body)) ||
+    readOxcVariableComponentDeclaration(declaration) !== undefined
+  );
+}
+
+export function isOxcJsxComponentStatement(statement: unknown): boolean {
+  return isOxcExportedJsxComponent(statement) || readOxcPlainComponent(statement) !== undefined;
+}
+
+export function isOxcExportedFunctionLike(statement: unknown): boolean {
+  const object = readObject(statement);
+
+  if (object.type === "ExportDefaultDeclaration") {
+    return unwrapOxcComponentFunctionLikeInitializer(readObject(object.declaration)) !== undefined;
+  }
+
+  if (object.type !== "ExportNamedDeclaration") {
+    return false;
+  }
+
+  const declaration = readObject(object.declaration);
+
+  return (
+    declaration.type === "FunctionDeclaration" ||
+    unwrapOxcComponentFunctionLikeInitializer(declaration) !== undefined
+  );
+}
+
+export function isOxcUnsupportedExportedFunction(
+  statement: unknown,
+  options?: AnalyzeModuleOptions,
+): boolean {
+  if (options?.compatReactNodeReturn === true) {
+    return false;
+  }
+
+  const object = readObject(statement);
+
+  if (object.type !== "ExportNamedDeclaration") {
+    return false;
+  }
+
+  const declaration = readObject(object.declaration);
+  const id = readObject(declaration.id);
+
+  return (
+    declaration.type === "FunctionDeclaration" &&
+    typeof id.name === "string" &&
+    /^[A-Z]/.test(id.name) &&
+    !hasComponentReturn(declaration.body) &&
+    !hasOnlyNullReturns(declaration.body)
+  );
+}
+
+export function readOxcVariableComponentDeclaration(
+  declaration: Record<string, unknown>,
+): { name: string; initializer: Record<string, unknown> } | undefined {
+  if (declaration.type !== "VariableDeclaration") {
+    return undefined;
+  }
+
+  for (const declarator of readArray(declaration.declarations)) {
+    const object = readObject(declarator);
+    const id = readObject(object.id);
+
+    if (typeof id.name !== "string" || !/^[A-Z]/.test(id.name)) {
+      continue;
+    }
+
+    const initializer = unwrapOxcComponentFunctionLikeInitializer(readObject(object.init));
+
+    if (initializer !== undefined && hasOxcFunctionLikeComponentReturn(initializer)) {
+      return { name: id.name, initializer };
+    }
+  }
+
+  return undefined;
+}
+
+export function readOxcPlainComponent(
+  statement: unknown,
+): { name: string; initializer: Record<string, unknown> } | undefined {
+  const object = readObject(statement);
+
+  if (object.type === "FunctionDeclaration" && hasComponentReturn(object.body)) {
+    const id = readObject(object.id);
+    return typeof id.name === "string" ? { name: id.name, initializer: object } : undefined;
+  }
+
+  return readOxcVariableComponentDeclaration(object);
+}
+
+export function unwrapOxcComponentFunctionLikeInitializer(
+  expression: Record<string, unknown>,
+): Record<string, unknown> | undefined {
+  const unwrapped = unwrapOxcParentheses(expression);
+
+  if (
+    unwrapped.type === "ArrowFunctionExpression" ||
+    unwrapped.type === "FunctionExpression" ||
+    unwrapped.type === "FunctionDeclaration"
+  ) {
+    return unwrapped;
+  }
+
+  if (unwrapped.type !== "CallExpression") {
+    return undefined;
+  }
+
+  const callee = readObject(unwrapped.callee);
+
+  if (callee.type !== "Identifier" || (callee.name !== "memo" && callee.name !== "forwardRef")) {
+    return undefined;
+  }
+
+  const firstArg = readObject(readArray(unwrapped.arguments)[0]);
+
+  return unwrapOxcComponentFunctionLikeInitializer(firstArg);
+}
+
+export function hasOxcFunctionLikeJsxReturn(functionLike: Record<string, unknown>): boolean {
+  const body = unwrapOxcParentheses(readObject(functionLike.body));
+
+  if (isOxcJsxReturnExpression(body)) {
+    return true;
+  }
+
+  return hasJsxReturn(body);
+}
+
+export function hasOxcFunctionLikeComponentReturn(functionLike: Record<string, unknown>): boolean {
+  const body = unwrapOxcParentheses(readObject(functionLike.body));
+
+  if (hasOxcFunctionLikeJsxReturn(functionLike)) {
+    return true;
+  }
+
+  if (isOxcComponentCallExpression(body)) {
+    return true;
+  }
+
+  return hasComponentCallReturn(body);
+}
+
+export function hasJsxReturn(body: unknown): boolean {
+  return readArray(readObject(body).body).some((statement) => {
+    const object = readObject(statement);
+
+    if (object.type === "ReturnStatement") {
+      return isOxcJsxReturnExpression(readObject(object.argument));
+    }
+
+    return hasNestedJsxReturn(object);
+  });
+}
+
+export function hasComponentReturn(body: unknown): boolean {
+  return hasJsxReturn(body) || hasComponentCallReturn(body);
+}
+
+export function hasOnlyNullReturns(body: unknown): boolean {
+  const returns = collectReturnArguments(readObject(body));
+  return returns.length > 0 && returns.every(isNullReturnArgument);
+}
+
+export function hasComponentCallReturn(body: unknown): boolean {
+  return readArray(readObject(body).body).some((statement) => {
+    const object = readObject(statement);
+
+    if (object.type === "ReturnStatement") {
+      return isOxcComponentCallExpression(unwrapOxcParentheses(readObject(object.argument)));
+    }
+
+    return hasNestedComponentCallReturn(object);
+  });
+}
+
+function hasNestedJsxReturn(statement: Record<string, unknown>): boolean {
+  if (statement.type === "SwitchStatement") {
+    return readArray(statement.cases).some((switchCase) =>
+      readArray(readObject(switchCase).consequent).some((child) => {
+        const object = readObject(child);
+        return (
+          object.type === "ReturnStatement" &&
+          isOxcJsxReturnExpression(readObject(object.argument))
+        );
+      }),
+    );
+  }
+
+  if (statement.type === "IfStatement") {
+    return (
+      hasJsxReturn({ body: [statement.consequent] }) ||
+      hasJsxReturn({ body: [statement.alternate] })
+    );
+  }
+
+  if (statement.type === "BlockStatement") {
+    return hasJsxReturn(statement);
+  }
+
+  return false;
+}
+
+function hasNestedComponentCallReturn(statement: Record<string, unknown>): boolean {
+  if (statement.type === "SwitchStatement") {
+    return readArray(statement.cases).some((switchCase) =>
+      readArray(readObject(switchCase).consequent).some((child) => {
+        const object = readObject(child);
+        return (
+          object.type === "ReturnStatement" &&
+          isOxcComponentCallExpression(unwrapOxcParentheses(readObject(object.argument)))
+        );
+      }),
+    );
+  }
+
+  if (statement.type === "IfStatement") {
+    return (
+      hasComponentCallReturn({ body: [statement.consequent] }) ||
+      hasComponentCallReturn({ body: [statement.alternate] })
+    );
+  }
+
+  if (statement.type === "BlockStatement") {
+    return hasComponentCallReturn(statement);
+  }
+
+  return false;
+}
+
+function collectReturnArguments(statement: Record<string, unknown>): Record<string, unknown>[] {
+  if (statement.type === "ReturnStatement") {
+    return [readObject(statement.argument)];
+  }
+
+  if (statement.type === "BlockStatement") {
+    return readArray(statement.body).flatMap((child) => collectReturnArguments(readObject(child)));
+  }
+
+  if (statement.type === "IfStatement") {
+    return [
+      ...collectReturnArguments(readObject(statement.consequent)),
+      ...collectReturnArguments(readObject(statement.alternate)),
+    ];
+  }
+
+  if (statement.type === "SwitchStatement") {
+    return readArray(statement.cases).flatMap((switchCase) =>
+      readArray(readObject(switchCase).consequent).flatMap((child) =>
+        collectReturnArguments(readObject(child)),
+      ),
+    );
+  }
+
+  return [];
+}
+
+function isNullReturnArgument(argument: Record<string, unknown>): boolean {
+  return (
+    argument.type === "NullLiteral" ||
+    (argument.type === "Literal" && argument.value === null)
+  );
+}
+
+export function isOxcComponentCallExpression(expression: Record<string, unknown>): boolean {
+  if (expression.type !== "CallExpression") {
+    return false;
+  }
+
+  const callee = unwrapOxcParentheses(readObject(expression.callee));
+
+  if (callee.type === "Identifier") {
+    return typeof callee.name === "string" && /^[A-Z]/.test(callee.name);
+  }
+
+  if (callee.type === "MemberExpression") {
+    const object = readObject(callee.object);
+    const property = readObject(callee.property);
+    return (
+      object.type === "Identifier" &&
+      typeof object.name === "string" &&
+      /^[A-Z]/.test(object.name) &&
+      property.type === "Identifier" &&
+      typeof property.name === "string" &&
+      /^[A-Z]/.test(property.name)
+    );
+  }
+
+  return false;
+}
+
+export function isJsxRoot(type: unknown): boolean {
+  return type === "JSXElement" || type === "JSXFragment" || type === "JSXSelfClosingElement";
+}
+
+function isOxcJsxReturnExpression(expression: Record<string, unknown>): boolean {
+  const unwrapped = unwrapOxcParentheses(expression);
+
+  if (isJsxRoot(unwrapped.type)) {
+    return true;
+  }
+
+  if (unwrapped.type === "LogicalExpression") {
+    return (
+      unwrapped.operator === "&&" &&
+      isOxcJsxReturnBranch(readObject(unwrapped.right))
+    );
+  }
+
+  if (unwrapped.type === "ConditionalExpression") {
+    return (
+      isOxcJsxReturnBranch(readObject(unwrapped.consequent)) &&
+      isOxcJsxReturnBranch(readObject(unwrapped.alternate))
+    );
+  }
+
+  return false;
+}
+
+function isOxcJsxReturnBranch(expression: Record<string, unknown>): boolean {
+  const unwrapped = unwrapOxcParentheses(expression);
+
+  if (unwrapped.type === "Literal" && (unwrapped.value === null || unwrapped.value === false)) {
+    return true;
+  }
+
+  return isOxcJsxReturnExpression(unwrapped);
+}

package/src/oxc-component-props.ts

@@ -0,0 +1,170 @@
+import { unsupportedRefAttributeDiagnostic } from "./diagnostics.js";
+import type { ComponentPropIr, JsxNodeIr } from "./ir.js";
+import type { OxcBodyStatementJsxMode } from "./oxc-analysis-types.js";
+import { stripOxcGeneratedImports } from "./oxc-code-utils.js";
+import {
+  getOxcLocation,
+  readArray,
+  readObject,
+  readSource,
+  unwrapOxcParentheses,
+} from "./oxc-node-utils.js";
+import { containsOxcJsxSyntax } from "./oxc-render-values.js";
+import { transformJsxWithOxc } from "./oxc-transform.js";
+import type { Diagnostic } from "./types.js";
+
+export type AnalyzeOxcJsxNodeCallback = (
+  node: Record<string, unknown>,
+  bodyStatementJsx?: OxcBodyStatementJsxMode,
+) => JsxNodeIr;
+
+export function analyzeOxcComponentProp(
+  code: string,
+  attr: unknown,
+  analyzeJsxNode: AnalyzeOxcJsxNodeCallback,
+  diagnostics: Pick<Diagnostic, "level" | "code" | "message" | "loc">[] = [],
+  options: {
+    allowRef?: boolean;
+    resolveExpressionCode?: (expression: Record<string, unknown>) => string;
+  } = {},
+): ComponentPropIr[] {
+  const object = readObject(attr);
+
+  if (object.type === "JSXSpreadAttribute") {
+    return [{ kind: "spread-prop", 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: "prop", name, code: JSON.stringify(value.value) }];
+  }
+
+  if (value.type === "JSXExpressionContainer") {
+    const expression = unwrapOxcParentheses(readObject(value.expression));
+
+    if (expression.type === "JSXElement" || expression.type === "JSXFragment") {
+      return [
+        {
+          kind: "render-prop",
+          name,
+          children: [analyzeJsxNode(expression)],
+        },
+      ];
+    }
+
+    return [
+      {
+        kind: "prop",
+        name,
+        code:
+          expression.type === "ArrowFunctionExpression" && containsOxcJsxSyntax(expression)
+            ? stripOxcGeneratedImports(transformJsxWithOxc(readSource(code, expression)))
+            : (options.resolveExpressionCode?.(expression) ?? readSource(code, expression)),
+      },
+    ];
+  }
+
+  return [{ kind: "prop", name, code: "true" }];
+}
+
+export function readOxcConsumerRenderProp(
+  code: string,
+  children: readonly unknown[],
+  analyzeJsxNode: AnalyzeOxcJsxNodeCallback,
+  bodyStatementJsx?: OxcBodyStatementJsxMode,
+): ComponentPropIr | undefined {
+  for (const child of children) {
+    const object = readObject(child);
+
+    if (object.type !== "JSXExpressionContainer") {
+      continue;
+    }
+
+    const expression = unwrapOxcParentheses(readObject(object.expression));
+
+    if (expression.type !== "ArrowFunctionExpression") {
+      continue;
+    }
+
+    const renderer = analyzeOxcArrowJsxRenderer(
+      code,
+      expression,
+      analyzeJsxNode,
+      bodyStatementJsx,
+    );
+
+    return {
+      kind: "render-prop",
+      name: "children",
+      valueName: renderer.valueName,
+      children: renderer.children,
+    };
+  }
+
+  return undefined;
+}
+
+export function analyzeOxcSingleArrowJsxChild(
+  code: string,
+  children: readonly unknown[],
+  analyzeJsxNode: AnalyzeOxcJsxNodeCallback,
+  bodyStatementJsx?: OxcBodyStatementJsxMode,
+): {
+  valueName: string;
+  children: JsxNodeIr[];
+} {
+  for (const child of children) {
+    const object = readObject(child);
+
+    if (object.type !== "JSXExpressionContainer") {
+      continue;
+    }
+
+    const expression = unwrapOxcParentheses(readObject(object.expression));
+
+    if (expression.type === "ArrowFunctionExpression") {
+      return analyzeOxcArrowJsxRenderer(code, expression, analyzeJsxNode, bodyStatementJsx);
+    }
+  }
+
+  return {
+    valueName: "_value",
+    children: [],
+  };
+}
+
+export function analyzeOxcArrowJsxRenderer(
+  code: string,
+  arrow: Record<string, unknown>,
+  analyzeJsxNode: AnalyzeOxcJsxNodeCallback,
+  bodyStatementJsx?: OxcBodyStatementJsxMode,
+): {
+  valueName: string;
+  children: JsxNodeIr[];
+} {
+  const firstParameter = readObject(readArray(arrow.params)[0]);
+  const valueName = typeof firstParameter.name === "string" ? firstParameter.name : "_value";
+  const body = unwrapOxcParentheses(readObject(arrow.body));
+
+  if (body.type === "JSXElement" || body.type === "JSXFragment") {
+    return {
+      valueName,
+      children: [analyzeJsxNode(body, bodyStatementJsx)],
+    };
+  }
+
+  return {
+    valueName,
+    children: [{ kind: "expr", code: readSource(code, body) }],
+  };
+}