build(dynamic-import): dynamic import component success

packages/arco-lib/tsup.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   entry: ['src/lib.ts', 'src/index.ts', 'src/widgets/index.ts'],
   format: ['cjs', 'esm', 'iife'],
   inject: ['./react-import.js'],
-  splitting: false,
+  splitting: true,
   sourcemap: true,
   clean: true,
   dts: true,

packages/chakra-ui-lib/tsup.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   entry: ['src/lib.ts', 'src/index.ts', 'src/widgets/index.ts'],
   format: ['cjs', 'esm', 'iife'],
   inject: ['./react-import.js'],
-  splitting: false,
+  splitting: true,
   sourcemap: true,
   clean: true,
   dts: true,

packages/editor-sdk/package.json

@@ -9,16 +9,15 @@
     "access": "public"
   },
   "types": "lib/index.d.ts",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "unpkg": "dist/iife/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
   "files": [
     "dist",
     "lib"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --no-splitting --clean --sourcemap --platform browser --metafile",
-    "dev": "tsup src/index.ts --watch --format cjs,esm,iife --legacy-output --no-splitting --clean --sourcemap --platform browser",
+    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --clean --sourcemap --platform browser --metafile",
+    "dev": "tsup src/index.ts --watch --format cjs,esm,iife --legacy-output --clean --sourcemap --platform browser",
     "typings": "tsc --emitDeclarationOnly",
     "prepublish": "npm run build && npm run typings",
     "test": "jest",

packages/editor-sdk/src/components/Form/ExpressionEditor.tsx

@@ -32,7 +32,6 @@ import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/display/autorefresh';
 import 'tern/plugin/doc_comment';
 import 'tern/plugin/complete_strings';
-import ecma from '../../constants/ecmascript';
 import tern, { Def } from 'tern';
 import { getTypeString } from '../../utils/type';
 
@@ -73,7 +72,8 @@ const getCursorIndex = (editor: CodeMirror.Editor) => {
   return cursorIndex;
 };
 
-function installTern(cm: CodeMirror.Editor) {
+async function installTern(cm: CodeMirror.Editor) {
+  const ecma = await import('../../constants/ecmascript');
   const t = new CodeMirror.TernServer({ defs: [ecma as unknown as Def] });
   cm.on('cursorActivity', cm => t.updateArgHints(cm));
   cm.on('change', (_instance, change) => {
@@ -252,8 +252,9 @@ export const BaseExpressionEditor = React.forwardRef<
                 },
               }),
         });
-        const t = installTern(cm.current);
-        tServer.current = t.server;
+        installTern(cm.current).then(t => {
+          tServer.current = t.server;
+        });
       }
       const changeHandler = (instance: CodeMirror.Editor) => {
         const value = instance.getValue();

packages/editor-sdk/src/components/Widgets/StyleWidgets/ColorWidget.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { CORE_VERSION, StyleWidgetName } from '@sunmao-ui/shared';
 import { WidgetProps } from '../../../types/widget';
 import { implementWidget, mergeWidgetOptionsIntoSpec } from '../../../utils/widget';
@@ -14,7 +14,6 @@ import {
   PopoverBody,
   Portal,
 } from '@chakra-ui/react';
-import { SketchPicker } from 'react-color';
 
 type ColorWidgetType = `${typeof CORE_VERSION}/${StyleWidgetName.Color}`;
 
@@ -32,6 +31,9 @@ export const ColorWidget: React.FC<WidgetProps<ColorWidgetType, string>> = props
   const onInputChange = (value: string) => {
     onChange(value);
   };
+  const SketchPicker = React.lazy(() => {
+    return import('react-color').then(lib => ({ default: lib.SketchPicker }));
+  });
 
   return (
     <InputGroup>
@@ -60,11 +62,13 @@ export const ColorWidget: React.FC<WidgetProps<ColorWidgetType, string>> = props
             <PopoverContent w="auto">
               <PopoverArrow />
               <PopoverBody padding={0}>
-                <SketchPicker
-                  width="250px"
-                  color={value || '#fff'}
-                  onChangeComplete={onColorChange}
-                />
+                <Suspense fallback={() => '加载Picker中'}>
+                  <SketchPicker
+                    width="250px"
+                    color={value || '#fff'}
+                    onChangeComplete={onColorChange}
+                  />
+                </Suspense>
               </PopoverBody>
             </PopoverContent>
           </Portal>

packages/editor-sdk/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'EditorSdk',
+      // the proper extensions will be added
+      fileName: 'index',
+      formats: ['cjs', 'es'],
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: [
+        'react',
+        'react-dom',
+        '@chakra-ui/react',
+        '@emotion/css',
+        '@emotion/react',
+      ],
+    },
+  },
+});

packages/editor/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --inject ../runtime/react-import.js --clean --no-splitting --sourcemap",
+    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --inject ../runtime/react-import.js --clean --sourcemap",
     "typings": "tsc --emitDeclarationOnly",
     "test": "jest",
     "prepublish": "npm run build && npm run typings"

packages/runtime/package.json

@@ -23,7 +23,7 @@
   "scripts": {
     "dev": "vite",
     "test": "jest",
-    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --inject ./react-import.js --clean --no-splitting --sourcemap --metafile",
+    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --inject ./react-import.js --clean --sourcemap --metafile",
     "typings": "tsc --emitDeclarationOnly",
     "lint": "eslint src --ext .ts",
     "prepublish": "npm run build && npm run typings",

packages/shared/package.json

@@ -17,8 +17,8 @@
     "lib"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --no-splitting --clean --sourcemap --platform browser",
-    "dev": "tsup src/index.ts --watch --format cjs,esm,iife --legacy-output --no-splitting --clean --sourcemap --platform browser",
+    "build": "tsup src/index.ts --format cjs,esm,iife --legacy-output --clean --sourcemap --platform browser",
+    "dev": "tsup src/index.ts --watch --format cjs,esm,iife --legacy-output --clean --sourcemap --platform browser",
     "typings": "tsc --emitDeclarationOnly",
     "prepublish": "npm run build && npm run typings",
     "test": "jest"