hotfix: duplicate identifiers

Author: aidenybai

packages/compiler/plugin.ts

@@ -3,7 +3,7 @@ import { createUnplugin } from 'unplugin';
 import { transformAsync } from '@babel/core';
 import pluginSyntaxJsx from '@babel/plugin-syntax-jsx';
 import pluginSyntaxTypescript from '@babel/plugin-syntax-typescript';
-import { dim, magenta } from 'kleur/colors';
+import { dim, magenta, bold, cyan } from 'kleur/colors';
 import { visitor as legacyVdomVisitor } from './vdom';
 import {
   callExpressionVisitor as reactCallExpressionVisitor,
@@ -31,10 +31,18 @@ export const intro = () => {
   if (hasIntroRan) return;
   hasIntroRan = true;
 
+  const tips = [
+    `use ${dim('// million-ignore')} for errors`,
+    `use { threshold: ? } to adjust optimization sensitivity (default=0.1)`,
+    `use { mute: true } to disable info logs`,
+  ];
+
   // eslint-disable-next-line no-console
-  console.log(`\n  ${magenta(`⚡ Million.js ${process.env.VERSION || ''}`)}
-  - Tip:     use ${dim('// million-ignore')} for errors
-  - Hotline: https://million.dev/hotline\n`);
+  console.log(`\n  ${bold(
+    magenta(`⚡ Million.js ${process.env.VERSION || ''}`),
+  )}
+  - Tip:     ${tips[Math.floor(Math.random() * tips.length)] as string}
+  - Hotline: ${cyan('https://million.dev/hotline')}\n`);
 };
 
 export const unplugin = createUnplugin((options: Options) => {

packages/compiler/react/call-expression-visitor.ts

@@ -235,8 +235,8 @@ export const callExpressionVisitor = (
           t.isFunctionExpression(forwardRefComponent) ||
           t.isArrowFunctionExpression(forwardRefComponent)
         ) {
-          const anonymousComponentId =
-            componentDeclarationPath.scope.generateUidIdentifier('anonymous$');
+          const unique = getUniqueId();
+          const anonymousComponentId = t.identifier(`M${unique}`);
           componentDeclarationPath.parentPath.insertBefore(
             t.variableDeclaration('const', [
               t.variableDeclarator(

packages/compiler/react/component-visitor.ts

@@ -87,7 +87,7 @@ export const componentVisitor = (options: Options = {}, isReact = true) => {
     if (comment?.value.includes('million-ignore')) {
       // eslint-disable-next-line no-console
       console.log(
-        dim(`⚡ ${yellow(`<${rawComponent.id.name}>`)} was ignored.`),
+        dim(` ○ ${yellow(`<${rawComponent.id.name}>`)} was ignored`),
       );
       return;
     }
@@ -247,7 +247,7 @@ export const componentVisitor = (options: Options = {}, isReact = true) => {
           `${yellow(`<${rawComponent.id.name}>`)} now renders ${green(
             underline(`~${improvementFormatted}%`),
           )} faster`,
-          ' ⚡',
+          ' ⚡ ',
         ),
       );
     }

packages/compiler/react/transform.ts

@@ -458,8 +458,14 @@ export const transformComponent = (
    * const master = (props) => {
    * ```
    */
-  Component.id = masterComponentId;
 
+  if (
+    t.isIdentifier(Component.id) &&
+    Component.id.name === masterComponentId.name
+  ) {
+    masterComponentId.name = `${masterComponentId.name}_${getUniqueId()}`;
+  }
+  Component.id = masterComponentId;
   callSitePath.replaceWith(masterComponentId);
 
   globalPath.insertBefore(
@@ -473,7 +479,10 @@ export const transformComponent = (
       t.expressionStatement(
         t.assignmentExpression(
           '=',
-          t.memberExpression(masterComponentId, t.identifier('callable')),
+          t.memberExpression(
+            masterComponentId,
+            t.identifier('__block_callable__'),
+          ),
           t.booleanLiteral(true),
         ),
       ),

packages/compiler/react/utils.ts

@@ -94,12 +94,8 @@ export const createError = (message: string, path: NodePath, file: string) => {
   );
 };
 
-export const stylePrimaryMessage = (message: string, comment: string) => {
-  return `\n🦁 ${bgMagenta(' million ')} ${magenta(message)} \n${comment}\n`;
-};
-
 export const styleSecondaryMessage = (message: string, emoticon: string) => {
-  return `${magenta(emoticon)} ${message}`;
+  return `${magenta(emoticon)}${message}`;
 };
 
 export const styleLinks = (message: string) => {

packages/react/for.ts

@@ -121,7 +121,10 @@ const createChildren = <T>(
       continue;
     }
 
-    if (typeof vnode.type === 'function' && 'callable' in vnode.type) {
+    if (
+      typeof vnode.type === 'function' &&
+      '__block_callable__' in vnode.type
+    ) {
       const puppetComponent = vnode.type(vnode.props);
       if (MapHas$.call(REGISTRY, puppetComponent.type)) {
         const puppetBlock = MapGet$.call(REGISTRY, puppetComponent.type)!;

packages/react/utils.ts

@@ -53,7 +53,7 @@ export const renderReactScope = (
   if (
     isValidElement(vnode) &&
     typeof vnode.type === 'function' &&
-    'callable' in vnode.type
+    '__block_callable__' in vnode.type
   ) {
     const puppetComponent = (vnode.type as any)(vnode.props);
     if (REGISTRY.has(puppetComponent.type)) {