@reckona/mreact-compiler 0.0.87 → 0.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-compiler",
-  "version": "0.0.87",
+  "version": "0.0.88",
   "description": "Compiler passes and OXC-backed JSX analysis for mreact.",
   "keywords": [
     "compiler",
@@ -50,6 +50,6 @@
   "dependencies": {
     "oxc-parser": "0.129.0",
     "oxc-transform": "0.129.0",
-    "@reckona/mreact-shared": "0.0.87"
+    "@reckona/mreact-shared": "0.0.88"
   }
 }

package/src/emit-server-stream.ts

@@ -74,7 +74,7 @@ export function emitServerStream(
   );
   const compatRenderToStringHelperName = allocateHelperName(ir, "_renderCompatToString");
   const streamNodeHelperName = allocateHelperName(ir, "_renderStreamNode");
-  const clientBoundaryHelperName = usesClientBoundary(ir)
+  const clientBoundaryHelperName = usesClientBoundary(ir, options.serverHydration === true)
     ? allocateHelperName(ir, "_renderClientBoundary")
     : undefined;
   const spreadAttributesHelperName = allocateHelperName(ir, "_renderSpreadAttributes");
@@ -258,8 +258,8 @@ function hasRawJsxDynamicRender(ir: ModuleIr): boolean {
   return ir.components.some((component) => containsRawJsxDynamicRender(component.root));
 }
 
-function usesClientBoundary(ir: ModuleIr): boolean {
-  return ir.components.some((component) => containsClientBoundary(component.root));
+function usesClientBoundary(ir: ModuleIr, serverHydration: boolean): boolean {
+  return ir.components.some((component) => containsClientBoundary(component.root, serverHydration));
 }
 
 function emitClientBoundaryHelper(name: string): string {
@@ -1374,7 +1374,7 @@ function collectHtmlParts(
       ];
     }
 
-    if (isClientBoundaryPlaceholder(node)) {
+    if (isClientBoundaryPlaceholder(node, state.hydration)) {
       const helperName = currentClientBoundaryHelperName;
       if (helperName !== undefined) {
         return [
@@ -2272,30 +2272,34 @@ function containsCompatComponent(node: JsxNodeIr): boolean {
   return false;
 }
 
-function containsClientBoundary(node: JsxNodeIr): boolean {
-  if (node.kind === "component" && isClientBoundaryPlaceholder(node)) {
+function containsClientBoundary(node: JsxNodeIr, serverHydration: boolean): boolean {
+  if (node.kind === "component" && isClientBoundaryPlaceholder(node, serverHydration)) {
     return true;
   }
 
   if (node.kind === "component") {
     return (
-      node.children.some(containsClientBoundary) ||
+      node.children.some((child) => containsClientBoundary(child, serverHydration)) ||
       node.props.some(
-        (prop) => prop.kind === "render-prop" && prop.children.some(containsClientBoundary),
+        (prop) =>
+          prop.kind === "render-prop" &&
+          prop.children.some((child) => containsClientBoundary(child, serverHydration)),
       )
     );
   }
 
   if (node.kind === "conditional") {
-    return [...node.whenTrue, ...node.whenFalse].some(containsClientBoundary);
+    return [...node.whenTrue, ...node.whenFalse].some((child) =>
+      containsClientBoundary(child, serverHydration),
+    );
   }
 
   if (node.kind === "list") {
-    return node.children.some(containsClientBoundary);
+    return node.children.some((child) => containsClientBoundary(child, serverHydration));
   }
 
   if (node.kind === "element" || node.kind === "fragment") {
-    return node.children.some(containsClientBoundary);
+    return node.children.some((child) => containsClientBoundary(child, serverHydration));
   }
 
   if (node.kind === "async-boundary") {
@@ -2303,7 +2307,7 @@ function containsClientBoundary(node: JsxNodeIr): boolean {
       ...node.children,
       ...(node.placeholderChildren ?? []),
       ...(node.catchChildren ?? []),
-    ].some(containsClientBoundary);
+    ].some((child) => containsClientBoundary(child, serverHydration));
   }
 
   return false;
@@ -2420,8 +2424,11 @@ function emitPropName(name: string): string {
   return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name);
 }
 
-function isClientBoundaryPlaceholder(node: Extract<JsxNodeIr, { kind: "component" }>): boolean {
-  return node.clientReference !== undefined && !isCompatClientReference(node);
+function isClientBoundaryPlaceholder(
+  node: Extract<JsxNodeIr, { kind: "component" }>,
+  serverHydration = true,
+): boolean {
+  return node.clientReference !== undefined && (!serverHydration || !isCompatClientReference(node));
 }
 
 function isCompatClientReference(node: Extract<JsxNodeIr, { kind: "component" }>): boolean {

package/src/emit-server.ts

@@ -1416,11 +1416,7 @@ function emitComponentCallExpression(
 }
 
 function isClientBoundaryPlaceholder(node: Extract<JsxNodeIr, { kind: "component" }>): boolean {
-  return node.clientReference !== undefined && !isCompatClientReference(node);
-}
-
-function isCompatClientReference(node: Extract<JsxNodeIr, { kind: "component" }>): boolean {
-  return node.clientReference !== undefined && /\.(?:compat)\.[cm]?[jt]sx?$/.test(node.clientReference.moduleId);
+  return node.clientReference !== undefined;
 }
 
 function clientBoundaryPlaceholder(node: Extract<JsxNodeIr, { kind: "component" }>): string {

package/src/oxc-component-references.ts

@@ -120,6 +120,19 @@ export function collectOxcCompatRuntimeImportComponents(
   return names;
 }
 
+export function collectOxcCompatReactNodeComponentReferences(
+  program: unknown,
+): Map<string, ClientReferenceIr> {
+  const names = new Map<string, ClientReferenceIr>();
+
+  for (const statement of readArray(readObject(program).body)) {
+    collectOxcCompatReactNodeImportReferences(statement, names);
+    collectOxcCompatReactNodeClassReferences(statement, names);
+  }
+
+  return names;
+}
+
 export function markOxcAsyncComponentReferences(
   node: JsxNodeIr,
   asyncComponentNames: Set<string>,
@@ -166,6 +179,21 @@ export function markOxcCompatRuntimeReferences(
   });
 }
 
+export function markOxcCompatReactNodeReferences(
+  node: JsxNodeIr,
+  references: ReadonlyMap<string, ClientReferenceIr>,
+): void {
+  visitOxcNode(node, (child) => {
+    if (child.kind !== "component") {
+      return;
+    }
+
+    if (findOxcCompatReactNodeReference(child.name, references) !== undefined) {
+      child.runtime = "compat";
+    }
+  });
+}
+
 function isOxcClientBoundaryImport(
   statement: Record<string, unknown>,
   inferredBoundaryImports: ReadonlySet<string>,
@@ -197,6 +225,99 @@ function findOxcClientReference(
   };
 }
 
+function collectOxcCompatReactNodeImportReferences(
+  statement: unknown,
+  names: Map<string, ClientReferenceIr>,
+): void {
+  const object = readObject(statement);
+
+  if (object.type !== "ImportDeclaration" || object.importKind === "type") {
+    return;
+  }
+
+  const moduleId = String(readObject(object.source).value ?? "");
+
+  for (const specifier of readArray(object.specifiers)) {
+    const specifierObject = readObject(specifier);
+
+    if (specifierObject.importKind === "type") {
+      continue;
+    }
+
+    const local = readObject(specifierObject.local);
+    const localName = typeof local.name === "string" ? local.name : undefined;
+
+    if (localName === undefined || !/^[A-Z]/.test(localName)) {
+      continue;
+    }
+
+    if (specifierObject.type === "ImportDefaultSpecifier") {
+      names.set(localName, { moduleId, exportName: "default" });
+      continue;
+    }
+
+    if (specifierObject.type === "ImportNamespaceSpecifier") {
+      names.set(localName, { moduleId, exportName: "*" });
+      continue;
+    }
+
+    if (specifierObject.type === "ImportSpecifier") {
+      const imported = readObject(specifierObject.imported);
+      names.set(localName, {
+        moduleId,
+        exportName: String(imported.name ?? localName),
+      });
+    }
+  }
+}
+
+function collectOxcCompatReactNodeClassReferences(
+  statement: unknown,
+  names: Map<string, ClientReferenceIr>,
+): void {
+  const object = readObject(statement);
+  const declaration =
+    object.type === "ExportNamedDeclaration" || object.type === "ExportDefaultDeclaration"
+      ? readOptionalObject(object.declaration)
+      : object;
+  const className = readOxcClassComponentName(declaration);
+
+  if (className !== undefined) {
+    names.set(className, { moduleId: "", exportName: className });
+  }
+}
+
+function readOxcClassComponentName(
+  node: Record<string, unknown> | undefined,
+): string | undefined {
+  if (node?.type === "ClassDeclaration" || node?.type === "ClassExpression") {
+    const id = readOptionalObject(node.id);
+    const name = typeof id?.name === "string" ? id.name : undefined;
+    return name !== undefined && /^[A-Z]/.test(name) ? name : undefined;
+  }
+
+  if (node?.type !== "VariableDeclaration") {
+    return undefined;
+  }
+
+  for (const declarationValue of readArray(node.declarations)) {
+    const declaration = readOptionalObject(declarationValue);
+    const id = readOptionalObject(declaration?.id);
+    const init = readOptionalObject(declaration?.init);
+    const name = typeof id?.name === "string" ? id.name : undefined;
+
+    if (
+      name !== undefined &&
+      /^[A-Z]/.test(name) &&
+      (init?.type === "ClassExpression" || init?.type === "ClassDeclaration")
+    ) {
+      return name;
+    }
+  }
+
+  return undefined;
+}
+
 function collectOxcClientReferenceAliases(
   node: unknown,
   references: Map<string, ClientReferenceIr>,
@@ -547,6 +668,29 @@ function findOxcCompatRuntimeReference(
     : undefined;
 }
 
+function findOxcCompatReactNodeReference(
+  name: string,
+  references: ReadonlyMap<string, ClientReferenceIr>,
+): ClientReferenceIr | undefined {
+  const direct = references.get(name);
+
+  if (direct !== undefined) {
+    return direct;
+  }
+
+  const [rootName, ...memberNames] = name.split(".");
+  const rootReference = rootName === undefined ? undefined : references.get(rootName);
+
+  if (rootReference === undefined || rootReference.exportName !== "*" || memberNames.length === 0) {
+    return undefined;
+  }
+
+  return {
+    moduleId: rootReference.moduleId,
+    exportName: memberNames.join("."),
+  };
+}
+
 function compatRuntimeExports(moduleId: string): ReadonlySet<string> | undefined {
   if (moduleId === "@reckona/mreact-router") {
     return routerEntryCompatRuntimeExports;

package/src/oxc.ts

@@ -57,9 +57,11 @@ import {
 } from "./oxc-component-detection.js";
 import {
   collectOxcClientBoundaryImportComponents,
+  collectOxcCompatReactNodeComponentReferences,
   collectOxcCompatRuntimeImportComponents,
   markOxcAsyncComponentReferences,
   markOxcClientReferences,
+  markOxcCompatReactNodeReferences,
   markOxcCompatRuntimeReferences,
 } from "./oxc-component-references.js";
 import { normalizeOxcExpressionCode, stripOxcGeneratedImports } from "./oxc-code-utils.js";
@@ -236,6 +238,10 @@ function analyzeOxcToIr(
     new Set(options?.clientBoundaryImports ?? []),
   );
   const compatRuntimeImports = collectOxcCompatRuntimeImportComponents(program);
+  const compatReactNodeReferences =
+    options?.compatReactNodeReturnRenderMode === "react-node"
+      ? collectOxcCompatReactNodeComponentReferences(program)
+      : undefined;
   const bodyLowerers = createOxcBodyLowerers(compatRuntimeImports);
   const moduleRenderValueBindings = collectOxcBodyJsxBindingNames(body);
   const reactiveDerivedFunctionNames = collectOxcReactiveDerivedFunctionNames(body);
@@ -334,6 +340,9 @@ function analyzeOxcToIr(
     markOxcAsyncComponentReferences(component.root, asyncComponentNames);
     markOxcClientReferences(component.root, clientBoundaryImports);
     markOxcCompatRuntimeReferences(component.root, compatRuntimeImports);
+    if (compatReactNodeReferences !== undefined) {
+      markOxcCompatReactNodeReferences(component.root, compatReactNodeReferences);
+    }
     validateOxcNestedAwait(component.root, diagnostics);
     validateOxcAwaitCompatComponents(component.root, diagnostics, {
       allowCompatComponents: options?.awaitCompatComponents === "lower",