fix(antdx): resolve Think component React #130 in production build (#123)

Author: Col0ring

.changeset/tame-icons-default.md

@@ -0,0 +1,12 @@
+---
+'@modelscope-studio/frontend': patch
+'@modelscope-studio/antdx': patch
+'modelscope_studio': patch
+---
+
+fix(antdx): resolve `Think` component React #130 error in production build
+
+- Fix default import mapping in the Vite plugin so namespace-style globals
+  (e.g. `@ant-design/icons`) correctly resolve `import X from 'mod'` to
+  `<global>.default` instead of the namespace object itself.
+- Forward `children` to `XThink` so user-provided content renders.

frontend/antdx/think/think.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Think as XThink, type ThinkProps } from '@ant-design/x';
 
 export const Think = sveltify<ThinkProps, ['loading', 'icon', 'title']>(
-  ({ slots, ...props }) => {
+  ({ slots, children, ...props }) => {
     return (
       <>
         <XThink
@@ -14,7 +14,9 @@ export const Think = sveltify<ThinkProps, ['loading', 'icon', 'title']>(
           }
           icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
           title={slots.title ? <ReactSlot slot={slots.title} /> : props.title}
-        />
+        >
+          {children}
+        </XThink>
       </>
     );
   }

frontend/plugin.js

@@ -2,21 +2,48 @@ import { parse, transformFromAstSync, traverse, types as t } from '@babel/core';
 import path from 'node:path';
 import url from 'node:url';
 
+// Each entry mirrors how the global is exposed in
+// `frontend/svelte-preprocess-react/inject.ts`:
+//   - namespace: true  -> registered via `import * as X from 'mod'`
+//                         (`window.ms_globals.<key>` is the namespace object)
+//   - namespace: false -> registered via `import X from 'mod'` (or a single
+//                         named binding stored directly), so
+//                         `window.ms_globals.<key>` already is the value.
 const baseGlobals = {
-  react: 'window.ms_globals.React',
-  'react-dom': 'window.ms_globals.ReactDOM',
-  'react-dom/client': 'window.ms_globals.ReactDOMClient',
-  antd: 'window.ms_globals.antd',
-  antdx: 'window.ms_globals.antdx',
-  '@ant-design/cssinjs': 'window.ms_globals.antdCssinjs',
-  '@ant-design/icons': 'window.ms_globals.antdIcons',
+  react: { ref: 'window.ms_globals.React', namespace: false },
+  'react-dom': { ref: 'window.ms_globals.ReactDOM', namespace: false },
+  'react-dom/client': {
+    ref: 'window.ms_globals.ReactDOMClient',
+    namespace: false,
+  },
+  antd: { ref: 'window.ms_globals.antd', namespace: true },
+  antdx: { ref: 'window.ms_globals.antdx', namespace: true },
+  '@ant-design/cssinjs': {
+    ref: 'window.ms_globals.antdCssinjs',
+    namespace: true,
+  },
+  '@ant-design/icons': {
+    ref: 'window.ms_globals.antdIcons',
+    namespace: true,
+  },
 
-  '@svelte-preprocess-react/react-contexts':
-    'window.ms_globals.internalReactContexts',
-  dayjs: 'window.ms_globals.dayjs',
-  '@utils/createItemsContext': 'window.ms_globals.createItemsContext',
-  '@globals/components': 'window.ms_globals.components',
-  '@monaco-editor/loader': 'window.ms_globals.monacoLoader',
+  '@svelte-preprocess-react/react-contexts': {
+    ref: 'window.ms_globals.internalReactContexts',
+    namespace: true,
+  },
+  dayjs: { ref: 'window.ms_globals.dayjs', namespace: false },
+  '@utils/createItemsContext': {
+    ref: 'window.ms_globals.createItemsContext',
+    namespace: true,
+  },
+  '@globals/components': {
+    ref: 'window.ms_globals.components',
+    namespace: true,
+  },
+  '@monaco-editor/loader': {
+    ref: 'window.ms_globals.monacoLoader',
+    namespace: false,
+  },
 };
 
 const dirname = path.dirname(url.fileURLToPath(import.meta.url));
@@ -56,8 +83,8 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => {
           ...userConfig.define,
           'process.env.NODE_ENV': JSON.stringify('production'),
         };
+        userConfig.build ??= {};
         if (external) {
-          userConfig.build ??= {};
           userConfig.build.rollupOptions ??= {};
           userConfig.build.rollupOptions.external = [
             ...(userConfig.build.rollupOptions.external || []),
@@ -90,8 +117,8 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => {
               enterPath.traverse({
                 ExportNamedDeclaration(nodePath) {
                   const source = nodePath.node.source?.value;
-                  const variable = globals[source];
-                  if (!variable) {
+                  const entry = globals[source];
+                  if (!entry) {
                     return;
                   }
                   const { specifiers } = nodePath.node;
@@ -100,7 +127,7 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => {
                     return t.variableDeclarator(
                       specifier.local,
                       t.memberExpression(
-                        t.identifier(variable),
+                        t.identifier(entry.ref),
                         specifier.local
                       )
                     );
@@ -113,9 +140,9 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => {
                 },
                 ImportDeclaration(nodePath) {
                   const source = nodePath.node.source.value;
-                  const variable = globals[source];
+                  const entry = globals[source];
 
-                  if (!variable) {
+                  if (!entry) {
                     return;
                   }
 
@@ -128,22 +155,30 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => {
                   const decls = specifiers.map((specifier) => {
                     switch (specifier.type) {
                       case 'ImportDefaultSpecifier':
+                        // For namespace-style globals, the default export
+                        // lives at `<ref>.default`. For value-style globals,
+                        // `<ref>` itself already is the default value.
                         return t.variableDeclarator(
                           specifier.local,
-                          t.identifier(variable)
+                          entry.namespace
+                            ? t.memberExpression(
+                                t.identifier(entry.ref),
+                                t.identifier('default')
+                              )
+                            : t.identifier(entry.ref)
                         );
                       case 'ImportSpecifier':
                         return t.variableDeclarator(
                           specifier.local,
                           t.memberExpression(
-                            t.identifier(variable),
+                            t.identifier(entry.ref),
                             specifier.imported
                           )
                         );
                       case 'ImportNamespaceSpecifier':
                         return t.variableDeclarator(
                           specifier.local,
-                          t.identifier(variable)
+                          t.identifier(entry.ref)
                         );
                       default:
                         throw new Error(