@reckona/mreact-compiler 0.0.145 → 0.0.146

package/src/emit-compat.ts

@@ -322,7 +322,7 @@ function emitComponent(
   helperNames: CompatHelperNames,
   dev: boolean,
 ): string {
-  const directTextBindings = collectDirectTextBindings(component);
+  const directTextBindings = collectDirectTextBindings(component, helperNames);
   const body = component.bodyStatements.map((statement) =>
     `  ${rewriteDirectTextBindingStatement(statement, directTextBindings, helperNames)}`
   );
@@ -560,8 +560,12 @@ function emitComponentProps(
   return `{ ${entries.join(", ")} }`;
 }
 
-function collectDirectTextBindings(component: ComponentIr): DirectTextBinding[] {
+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(
@@ -575,14 +579,27 @@ function collectDirectTextBindings(component: ComponentIr): DirectTextBinding[]
 
     candidates.push({
       stateName,
-      tupleName: `_${stateName}StateTuple`,
-      bindingName: `_${stateName}TextBinding`,
+      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,
@@ -601,6 +618,11 @@ function directTextBindingIsSafe(
       return;
     }
 
+    if (nodeHasStructuralIdentifierUse(node, candidate.stateName)) {
+      unsafe = true;
+      return;
+    }
+
     if (node.kind === "element") {
       for (const attr of node.attributes) {
         if (attr.kind === "static-attr") {
@@ -627,6 +649,51 @@ function directTextBindingIsSafe(
   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*$`,

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[] = [],