@reckona/mreact-compiler 0.0.144 → 0.0.146

package/src/emit-compat.ts

@@ -69,6 +69,10 @@ function collectComponentImportSpecifiers(ir: ModuleIr, dev: boolean): string[]
   const specifiers = new Set<string>();
 
   for (const component of ir.components) {
+    if (collectDirectTextBindings(component).length > 0) {
+      specifiers.add("REACTIVE_TEXT_BINDING_META");
+    }
+
     visit(component.root, (node) => {
       if (node.kind === "fragment") {
         specifiers.add("Fragment");
@@ -89,11 +93,18 @@ function collectComponentImportSpecifiers(ir: ModuleIr, dev: boolean): string[]
 
 interface CompatHelperNames {
   Fragment?: string;
+  REACTIVE_TEXT_BINDING_META?: string;
   jsx?: string;
   jsxDEV?: string;
   jsxs?: string;
 }
 
+interface DirectTextBinding {
+  stateName: string;
+  tupleName: string;
+  bindingName: string;
+}
+
 function allocateHelperNames(
   ir: ModuleIr,
   specifiers: readonly string[],
@@ -107,6 +118,11 @@ function allocateHelperNames(
       continue;
     }
 
+    if (specifier === "REACTIVE_TEXT_BINDING_META") {
+      helperNames.REACTIVE_TEXT_BINDING_META = allocator("_REACTIVE_TEXT_BINDING_META");
+      continue;
+    }
+
     if (specifier === "jsx") {
       helperNames.jsx = allocator("_jsx");
       continue;
@@ -206,7 +222,7 @@ function parseCompatRuntimeImportLine(
   return specifierText.split(",").flatMap((rawSpecifier): CompatRuntimeImportSpecifier[] => {
     const specifier = rawSpecifier.trim();
     const aliasMatch = specifier.match(
-      /^(?<importedName>Fragment|jsx|jsxDEV|jsxs)\s+as\s+(?<localName>[A-Za-z_$][\w$]*)$/,
+      /^(?<importedName>Fragment|REACTIVE_TEXT_BINDING_META|jsx|jsxDEV|jsxs)\s+as\s+(?<localName>[A-Za-z_$][\w$]*)$/,
     );
 
     if (aliasMatch?.groups !== undefined) {
@@ -223,7 +239,7 @@ function parseCompatRuntimeImportLine(
       }];
     }
 
-    return /^(Fragment|jsx|jsxDEV|jsxs)$/.test(specifier)
+    return /^(Fragment|REACTIVE_TEXT_BINDING_META|jsx|jsxDEV|jsxs)$/.test(specifier)
       ? [{ importedName: specifier, localName: specifier, source }]
       : [];
   });
@@ -253,6 +269,12 @@ function createImportGroups(
       continue;
     }
 
+    if (specifier === "REACTIVE_TEXT_BINDING_META") {
+      const localName = helperNames.REACTIVE_TEXT_BINDING_META ?? "_REACTIVE_TEXT_BINDING_META";
+      addImportSpecifier(groups, componentImportSource, "REACTIVE_TEXT_BINDING_META", localName);
+      continue;
+    }
+
     const localName = helperNames[specifier as "jsx" | "jsxDEV" | "jsxs"] ?? `_${specifier}`;
     addImportSpecifier(groups, componentImportSource, specifier, localName);
   }
@@ -300,13 +322,19 @@ function emitComponent(
   helperNames: CompatHelperNames,
   dev: boolean,
 ): string {
-  const body = component.bodyStatements.map((statement) => `  ${statement}`);
+  const directTextBindings = collectDirectTextBindings(component, helperNames);
+  const body = component.bodyStatements.map((statement) =>
+    `  ${rewriteDirectTextBindingStatement(statement, directTextBindings, helperNames)}`
+  );
   const parameters = component.parameters.join(", ");
+  const functionKeyword = `${component.exportDefault === true ? "export default " : component.exported === false ? "" : "export "}${
+    component.async === true ? "async " : ""
+  }function`;
 
   return [
-    `${component.exportDefault === true ? "export default " : component.exported === false ? "" : "export "}function ${component.name}(${parameters}) {`,
+    `${functionKeyword} ${component.name}(${parameters}) {`,
     ...body,
-    `  return ${emitJsxNode(component.root, helperNames, dev)};`,
+    `  return ${emitJsxNode(component.root, helperNames, dev, directTextBindings)};`,
     `}`,
   ].join("\n");
 }
@@ -315,6 +343,7 @@ function emitJsxNode(
   node: JsxNodeIr,
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string {
   if (node.kind === "text") {
     return JSON.stringify(node.value);
@@ -325,8 +354,8 @@ function emitJsxNode(
   }
 
   if (node.kind === "conditional") {
-    const whenTrue = emitCompatChildren(node.whenTrue, helperNames, dev);
-    const whenFalse = emitCompatChildren(node.whenFalse, helperNames, dev);
+    const whenTrue = emitCompatChildren(node.whenTrue, helperNames, dev, directTextBindings);
+    const whenFalse = emitCompatChildren(node.whenFalse, helperNames, dev, directTextBindings);
 
     return node.conditionValueName === undefined
       ? `(${node.conditionCode}) ? ${whenTrue} : ${whenFalse}`
@@ -335,7 +364,7 @@ function emitJsxNode(
 
   if (node.kind === "list") {
     const parameters = emitListParameters(node);
-    return `(${node.itemsCode}).map(${emitListRenderer(node, parameters, helperNames, dev)})`;
+    return `(${node.itemsCode}).map(${emitListRenderer(node, parameters, helperNames, dev, directTextBindings)})`;
   }
 
   if (node.kind === "fragment") {
@@ -345,7 +374,7 @@ function emitJsxNode(
   if (node.kind === "component") {
     const keyArgument =
       node.keyCode === undefined ? undefined : `(${node.keyCode})`;
-    const props = emitComponentProps(node.props, node.children, helperNames, dev);
+    const props = emitComponentProps(node.props, node.children, helperNames, dev, directTextBindings);
     return dev
       ? emitJsxDevCall(helperNames.jsxDEV ?? "_jsxDEV", node.name, props, keyArgument, node.children.length > 1)
       : `${helperNames.jsx ?? "_jsx"}(${node.name}, ${props}${keyArgument === undefined ? "" : `, ${keyArgument}`})`;
@@ -355,23 +384,24 @@ function emitJsxNode(
     return "null";
   }
 
-  return emitJsxCall(JSON.stringify(node.tagName), node, helperNames, dev);
+  return emitJsxCall(JSON.stringify(node.tagName), node, helperNames, dev, directTextBindings);
 }
 
 function emitCompatChildren(
   children: JsxNodeIr[],
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string {
   if (children.length === 0) {
     return "null";
   }
 
   if (children.length === 1) {
-    return emitJsxNode(children[0] as JsxNodeIr, helperNames, dev);
+    return emitJsxNode(children[0] as JsxNodeIr, helperNames, dev, directTextBindings);
   }
 
-  return `[${children.map((child) => emitJsxNode(child, helperNames, dev)).join(", ")}]`;
+  return `[${children.map((child) => emitJsxNode(child, helperNames, dev, directTextBindings)).join(", ")}]`;
 }
 
 function emitListRenderer(
@@ -379,8 +409,9 @@ function emitListRenderer(
   parameters: string,
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string {
-  const valueExpression = emitCompatChildren(node.children, helperNames, dev);
+  const valueExpression = emitCompatChildren(node.children, helperNames, dev, directTextBindings);
 
   if (node.bodyStatements === undefined || node.bodyStatements.length === 0) {
     return `(${parameters}) => ${valueExpression}`;
@@ -400,6 +431,7 @@ function emitJsxCall(
   node: JsxElementIr | JsxFragmentIr,
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string {
   if (dev) {
     const keyArgument =
@@ -409,7 +441,7 @@ function emitJsxCall(
     return emitJsxDevCall(
       helperNames.jsxDEV ?? "_jsxDEV",
       typeExpression,
-      emitProps(node, helperNames, dev),
+      emitProps(node, helperNames, dev, directTextBindings),
       keyArgument,
       node.children.length > 1,
     );
@@ -424,7 +456,7 @@ function emitJsxCall(
       ? `, (${node.keyCode})`
       : "";
 
-  return `${callee}(${typeExpression}, ${emitProps(node, helperNames, dev)}${keyArgument})`;
+  return `${callee}(${typeExpression}, ${emitProps(node, helperNames, dev, directTextBindings)}${keyArgument})`;
 }
 
 function emitJsxDevCall(
@@ -441,15 +473,25 @@ function emitProps(
   node: JsxElementIr | JsxFragmentIr,
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string {
   const entries =
     node.kind === "element" ? node.attributes.map(emitAttribute) : [];
-  const children = emitChildren(node.children, helperNames, dev);
+  const children = emitChildren(node.children, helperNames, dev, directTextBindings);
+  const directTextBinding = node.kind === "element"
+    ? findDirectTextBindingForChildren(node.children, directTextBindings)
+    : undefined;
 
   if (children !== undefined) {
     entries.push(`children: ${children}`);
   }
 
+  if (directTextBinding !== undefined) {
+    entries.push(
+      `[${helperNames.REACTIVE_TEXT_BINDING_META ?? "_REACTIVE_TEXT_BINDING_META"}]: ${directTextBinding.bindingName}`,
+    );
+  }
+
   return `{ ${entries.join(", ")} }`;
 }
 
@@ -457,16 +499,17 @@ function emitChildren(
   children: JsxNodeIr[],
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string | undefined {
   if (children.length === 0) {
     return undefined;
   }
 
   if (children.length === 1) {
-    return emitJsxNode(children[0] as JsxNodeIr, helperNames, dev);
+    return emitJsxNode(children[0] as JsxNodeIr, helperNames, dev, directTextBindings);
   }
 
-  return `[${children.map((child) => emitJsxNode(child, helperNames, dev)).join(", ")}]`;
+  return `[${children.map((child) => emitJsxNode(child, helperNames, dev, directTextBindings)).join(", ")}]`;
 }
 
 function emitAttribute(attr: AttributeIr): string {
@@ -490,6 +533,7 @@ function emitComponentProps(
   children: JsxNodeIr[],
   helperNames: CompatHelperNames,
   dev: boolean,
+  directTextBindings: readonly DirectTextBinding[] = [],
 ): string {
   const entries = props
     .map((prop) => {
@@ -498,7 +542,8 @@ function emitComponentProps(
       }
 
       if (prop.kind === "render-prop") {
-        const renderedChildren = emitChildren(prop.children, helperNames, dev) ?? "null";
+        const renderedChildren =
+          emitChildren(prop.children, helperNames, dev, directTextBindings) ?? "null";
         return prop.valueName === undefined
           ? `${emitPropName(prop.name)}: ${renderedChildren}`
           : `${emitPropName(prop.name)}: (${prop.valueName}) => ${renderedChildren}`;
@@ -509,12 +554,216 @@ function emitComponentProps(
     .filter(Boolean);
 
   if (children.length > 0) {
-    entries.push(`children: ${emitChildren(children, helperNames, dev) ?? "null"}`);
+    entries.push(`children: ${emitChildren(children, helperNames, dev, directTextBindings) ?? "null"}`);
   }
 
   return `{ ${entries.join(", ")} }`;
 }
 
+function collectDirectTextBindings(
+  component: ComponentIr,
+  helperNames?: CompatHelperNames,
+): DirectTextBinding[] {
+  const candidates: DirectTextBinding[] = [];
+  const allocator = createNameAllocator(collectReservedComponentLocalNames(component, helperNames));
+
+  for (const statement of component.bodyStatements) {
+    const match = statement.match(
+      /^\s*const\s+\[\s*(?<stateName>[A-Za-z_$][\w$]*)\s*,\s*[A-Za-z_$][\w$]*\s*\]\s*=\s*useState\(.+\);\s*$/,
+    );
+    const stateName = match?.groups?.stateName;
+
+    if (stateName === undefined) {
+      continue;
+    }
+
+    candidates.push({
+      stateName,
+      tupleName: allocator(`_${stateName}StateTuple`),
+      bindingName: allocator(`_${stateName}TextBinding`),
+    });
+  }
+
+  return candidates.filter((candidate) => directTextBindingIsSafe(component, candidate));
+}
+
+function collectReservedComponentLocalNames(
+  component: ComponentIr,
+  helperNames?: CompatHelperNames,
+): string[] {
+  return [
+    component.name,
+    component.exportName,
+    ...component.parameters,
+    ...component.bindingNames,
+    ...Object.values(helperNames ?? {}).filter((name): name is string => name !== undefined),
+  ];
+}
+
+function directTextBindingIsSafe(
+  component: ComponentIr,
+  candidate: DirectTextBinding,
+): boolean {
+  let directTextUses = 0;
+  let unsafe = false;
+
+  visit(component.root, (node) => {
+    if (node.kind === "expr" && node.code === candidate.stateName) {
+      directTextUses += 1;
+      return;
+    }
+
+    if (node.kind === "expr" && containsIdentifier(node.code, candidate.stateName)) {
+      unsafe = true;
+      return;
+    }
+
+    if (nodeHasStructuralIdentifierUse(node, candidate.stateName)) {
+      unsafe = true;
+      return;
+    }
+
+    if (node.kind === "element") {
+      for (const attr of node.attributes) {
+        if (attr.kind === "static-attr") {
+          continue;
+        }
+
+        if (containsIdentifier(attr.code, candidate.stateName)) {
+          unsafe = true;
+        }
+      }
+    }
+  });
+
+  for (const statement of component.bodyStatements) {
+    if (isDirectTextBindingDeclaration(statement, candidate.stateName)) {
+      continue;
+    }
+
+    if (containsIdentifier(statement, candidate.stateName)) {
+      unsafe = true;
+    }
+  }
+
+  return directTextUses === 1 && !unsafe && hasDirectTextBindingHost(component.root, candidate);
+}
+
+function nodeHasStructuralIdentifierUse(node: JsxNodeIr, stateName: string): boolean {
+  if (node.kind === "conditional") {
+    return containsIdentifier(node.conditionCode, stateName);
+  }
+
+  if (node.kind === "list") {
+    return [
+      node.itemsCode,
+      node.keyCode,
+      ...(node.bodyStatements ?? []),
+    ].some((code) => code !== undefined && containsIdentifier(code, stateName));
+  }
+
+  if (node.kind === "component") {
+    return (
+      (node.keyCode !== undefined && containsIdentifier(node.keyCode, stateName)) ||
+      node.props.some((prop) => {
+        if (prop.kind === "render-prop") {
+          return false;
+        }
+
+        return containsIdentifier(prop.code, stateName);
+      })
+    );
+  }
+
+  if (node.kind === "element") {
+    return node.keyCode !== undefined && containsIdentifier(node.keyCode, stateName);
+  }
+
+  if (node.kind === "async-boundary") {
+    return [
+      node.valueCode,
+      node.placeholderTagCode,
+      node.catchName,
+    ].some((code) => code !== undefined && containsIdentifier(code, stateName));
+  }
+
+  if (node.kind === "fragment") {
+    return (node.bodyStatements ?? []).some((statement) => containsIdentifier(statement, stateName));
+  }
+
+  return false;
+}
+
+function isDirectTextBindingDeclaration(statement: string, stateName: string): boolean {
+  return new RegExp(
+    `^\\s*const\\s+\\[\\s*${stateName}\\s*,\\s*[A-Za-z_$][\\w$]*\\s*\\]\\s*=\\s*useState\\(.+\\);\\s*$`,
+  ).test(statement);
+}
+
+function hasDirectTextBindingHost(
+  node: JsxNodeIr,
+  candidate: DirectTextBinding,
+): boolean {
+  let found = false;
+
+  visit(node, (current) => {
+    if (
+      current.kind === "element" &&
+      findDirectTextBindingForChildren(current.children, [candidate]) !== undefined
+    ) {
+      found = true;
+    }
+  });
+
+  return found;
+}
+
+function rewriteDirectTextBindingStatement(
+  statement: string,
+  directTextBindings: readonly DirectTextBinding[],
+  helperNames: CompatHelperNames,
+): string {
+  for (const binding of directTextBindings) {
+    const match = statement.match(
+      /^\s*const\s+\[\s*(?<stateName>[A-Za-z_$][\w$]*)\s*,\s*(?<setterName>[A-Za-z_$][\w$]*)\s*\]\s*=\s*(?<initializer>useState\(.+\));\s*$/,
+    );
+
+    if (match?.groups?.stateName !== binding.stateName) {
+      continue;
+    }
+
+    const metadataName = helperNames.REACTIVE_TEXT_BINDING_META ?? "_REACTIVE_TEXT_BINDING_META";
+    return [
+      `const ${binding.tupleName} = ${match.groups.initializer};`,
+      `  const [${binding.stateName}, ${match.groups.setterName}] = ${binding.tupleName};`,
+      `  const ${binding.bindingName} = ${binding.tupleName}[${metadataName}];`,
+    ].join("\n");
+  }
+
+  return statement;
+}
+
+function findDirectTextBindingForChildren(
+  children: readonly JsxNodeIr[],
+  directTextBindings: readonly DirectTextBinding[],
+): DirectTextBinding | undefined {
+  if (children.length !== 1) {
+    return undefined;
+  }
+
+  const child = children[0];
+
+  if (child?.kind !== "expr") {
+    return undefined;
+  }
+
+  return directTextBindings.find((binding) => binding.stateName === child.code);
+}
+
+function containsIdentifier(code: string, name: string): boolean {
+  return new RegExp(`(^|[^A-Za-z_$\\d])${name}([^A-Za-z_$\\d]|$)`).test(code);
+}
+
 function emitPropName(name: string): string {
   return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name);
 }

package/src/emit-server-stream.ts

@@ -625,7 +625,7 @@ function emitAppendStatements(
           );
         }
 
-        return `  await ${part.name}(${sinkName}, ${emitPropsObject(part.props, part.children, part.escapeHelperName)});`;
+        return `  await ${part.name}(${sinkName}, ${emitPropsObject(part.props, part.children, part.escapeHelperName, part.name)});`;
       }
 
       if (part.kind === "react-node") {
@@ -721,7 +721,7 @@ function emitSyncPartAsAppendStatement(
       );
     }
 
-    return `${indent}await ${part.name}(${sinkName}, ${emitPropsObject(part.props, part.children, part.escapeHelperName)});`;
+    return `${indent}await ${part.name}(${sinkName}, ${emitPropsObject(part.props, part.children, part.escapeHelperName, part.name)});`;
   }
 
   if (part.kind === "react-node") {
@@ -868,7 +868,7 @@ function tryEmitPartAsStringExpression(
   }
   if (part.kind === "component" && part.hydrationId === undefined) {
     return emitRenderableHtmlExpression(
-      `${part.name}(${emitPropsObject(part.props, part.children, part.escapeHelperName)})`,
+      `${part.name}(${emitPropsObject(part.props, part.children, part.escapeHelperName, part.name)})`,
     );
   }
   // Non-compat component parts require `await sink-write`; lists with
@@ -2491,6 +2491,7 @@ function emitPropsObject(
   props: ComponentPropIr[],
   children: JsxNodeIr[] = [],
   escapeHelperName = "_escapeHtml",
+  componentName?: string,
 ): string {
   const entries = props.map((prop) => {
     if (prop.kind === "spread-prop") {
@@ -2505,17 +2506,21 @@ function emitPropsObject(
   });
 
   if (children.length > 0) {
+    const childrenExpression =
+      emitStreamRendererFromChildren(children, escapeHelperName) ??
+      emitHtmlExpressionFromChildren(children, escapeHelperName);
     entries.push(
-      `children: ${
-        emitStreamRendererFromChildren(children, escapeHelperName) ??
-        emitHtmlExpressionFromChildren(children, escapeHelperName)
-      }`,
+      `children: ${isRouterLinkComponentName(componentName) ? `${componentName}.trustedHtml(${childrenExpression})` : childrenExpression}`,
     );
   }
 
   return `{ ${entries.join(", ")} }`;
 }
 
+function isRouterLinkComponentName(name: string | undefined): name is string {
+  return name !== undefined && (name === "Link" || name.endsWith(".Link"));
+}
+
 function emitCompatRuntimePropsObject(
   props: ComponentPropIr[],
   children: JsxNodeIr[] = [],

package/src/emit-server.ts

@@ -559,6 +559,7 @@ function collectHtmlStatements(
           contextProviderHelperName,
           contextConsumerHelperName,
           reactNodeRenderHelperName,
+          node.name,
         ),
         asyncComponentNames,
       )};`,
@@ -1467,6 +1468,7 @@ function emitPropsObject(
   contextProviderHelperName?: string,
   contextConsumerHelperName?: string,
   reactNodeRenderHelperName?: string,
+  componentName?: string,
 ): string {
   const entries = props.map((prop) => {
     if (prop.kind === "spread-prop") {
@@ -1481,14 +1483,28 @@ function emitPropsObject(
   });
 
   if (children.length > 0) {
+    const childrenExpression = emitHtmlExpressionFromChildren(
+      children,
+      escapeHelperName,
+      escapeBatchHelperName,
+      asyncComponentNames,
+      dynamicAttributes,
+      contextProviderHelperName,
+      contextConsumerHelperName,
+      reactNodeRenderHelperName,
+    );
     entries.push(
-      `children: ${emitHtmlExpressionFromChildren(children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)}`,
+      `children: ${isRouterLinkComponentName(componentName) ? `${componentName}.trustedHtml(${childrenExpression})` : childrenExpression}`,
     );
   }
 
   return `{ ${entries.join(", ")} }`;
 }
 
+function isRouterLinkComponentName(name: string | undefined): name is string {
+  return name !== undefined && (name === "Link" || name.endsWith(".Link"));
+}
+
 function emitCompatRuntimePropsObject(
   props: ComponentPropIr[],
   children: JsxNodeIr[] = [],

package/src/transform.ts

@@ -3,6 +3,7 @@ import { emitCompat } from "./emit-compat.js";
 import { emitServer } from "./emit-server.js";
 import { emitServerStream } from "./emit-server-stream.js";
 import { analyzeCompilerModuleContextWithOxc, analyzeWithOxc } from "./oxc.js";
+import { unsupportedClientAsyncComponentDiagnostic } from "./diagnostics.js";
 import type { ComponentIr, JsxNodeIr } from "./ir.js";
 import type { AnalyzeToIrInput, AnalyzeToIrOutput, CompilerModuleContext } from "./internal.js";
 import type { AnalyzeModuleOptions } from "./types.js";
@@ -74,6 +75,11 @@ function transformWithAnalyzer(
   } as const;
   const analyzed = analyze(analyzeTarget, analyzeOptions);
   const diagnostics = [...analyzed.diagnostics];
+
+  if (input.target === "client") {
+    diagnostics.push(...collectClientAsyncComponentDiagnostics(analyzed.ir.components));
+  }
+
   const emitted =
     mode === "compat" && input.target === "client"
       ? emitCompat(analyzed.ir, { dev: input.dev })
@@ -169,6 +175,14 @@ function transformWithAnalyzer(
   };
 }
 
+function collectClientAsyncComponentDiagnostics(
+  components: readonly ComponentIr[],
+): TransformOutput["diagnostics"] {
+  return components
+    .filter((component) => component.async === true)
+    .map((component) => unsupportedClientAsyncComponentDiagnostic(component.name));
+}
+
 function createSourceMap(input: TransformInput, outputCode: string): string {
   const generatedMap = createSegmentMappings(outputCode, input.code);