Merge pull request #282 from arco-design/feat-build-esnext

feat: build output support esnext
arco-design · Aug 16, 2024 · 0b94ea6 · 0b94ea6
2 parents 6c95b3c + 34686df
commit 0b94ea6
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ umd/
 cjs/
 esm/
 dist/
+esnext/
 packages/arcodesign/tests/coverage
 packages/arcodesign/style/css
 yarn.lock

diff --git a/packages/arcodesign/components/_helpers/react-dom.ts b/packages/arcodesign/components/_helpers/react-dom.ts
@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 function isObject(obj: any): obj is { [key: string]: any } {
     return Object.prototype.toString.call(obj) === '[object Object]';
@@ -14,12 +14,12 @@ export interface RootTypeReact extends RootType {
 }
 export type CreateRootFnType = (container: Element | DocumentFragment) => RootTypeReact;
 
-const __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
-
-const CopyReactDOM = ReactDOM as typeof ReactDOM & {
+const CopyReactDOM = {
+    ...ReactDOM,
+} as typeof ReactDOM & {
     createRoot: CreateRootFnType;
     // https://github.com/facebook/react/blob/4ff5f5719b348d9d8db14aaa49a48532defb4ab7/packages/react-dom/src/client/ReactDOM.js#L181
-    [__SECRET_INTERNALS__]: {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
         usingClientEntryPoint?: boolean;
     };
 };
@@ -32,19 +32,22 @@ let copyRender: (
     _unmount: () => void;
 };
 
-const isReact18 = Number(CopyReactDOM.version?.split('.')[0]) > 17;
+const { version, render: reactRender, unmountComponentAtNode } = CopyReactDOM;
+
+const isReact18 = Number((version || '').split('.')[0]) > 17;
 
 const updateUsingClientEntryPoint = (skipWarning?: boolean) => {
     // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
     // Avoid console warning
-    if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
-        CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = CopyReactDOM;
+    if (isObject(__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)) {
+        __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skipWarning;
     }
 };
 
 let createRoot: CreateRootFnType | undefined;
 try {
-    createRoot = CopyReactDOM.createRoot;
+    ({ createRoot } = CopyReactDOM);
 } catch (_) {}
 
 if (isReact18 && createRoot) {
@@ -64,14 +67,14 @@ if (isReact18 && createRoot) {
     };
 } else {
     copyRender = function (app: ReactElement, container: Element | DocumentFragment) {
-        CopyReactDOM.render(app, container);
+        reactRender(app, container);
 
         return {
             render: (comment: ReactElement) => {
-                CopyReactDOM.render(comment, container);
+                reactRender(comment, container);
             },
             _unmount() {
-                CopyReactDOM.unmountComponentAtNode(container);
+                unmountComponentAtNode(container);
             },
         };
     };

diff --git a/packages/arcodesign/esnext-tsconfig.json b/packages/arcodesign/esnext-tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "strictNullChecks": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react",
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "module": "ESNext",
+        "target": "ESNext",
+        "declaration": true,
+        "lib": ["esnext", "dom"]
+    },
+    "include": [
+        "packages/arcodesign/components/**/*.ts",
+        "packages/arcodesign/components/**/*.tsx",
+        "packages/common-widgets/**/*.ts",
+        "sites/**/*.d.ts"
+    ],
+    "exclude": ["node_modules"]
+}
diff --git a/packages/arcodesign/gulpfile.js b/packages/arcodesign/gulpfile.js
@@ -30,6 +30,13 @@ function esmBuild() {
         .pipe(gulp.dest('esm'));
 }
 
+function esnextBuild() {
+    return gulp
+        .src('components/**/*.{ts,tsx}')
+        .pipe(ts.createProject('./esnext-tsconfig.json', { emitDeclarationOnly: false })())
+        .pipe(gulp.dest('esnext'));
+}
+
 function umdBuild() {
     return gulp
         .src('components/**/*.{ts,tsx}')
@@ -58,7 +65,8 @@ function copyLess() {
         )
         .pipe(gulp.dest('esm'))
         .pipe(gulp.dest('umd'))
-        .pipe(gulp.dest('cjs'));
+        .pipe(gulp.dest('cjs'))
+        .pipe(gulp.dest('esnext'));
 }
 
 function buildStyle(src) {
@@ -98,7 +106,7 @@ function entryLessBuild() {
 function moveCss() {
     try {
         allCss.forEach(file => {
-            ['esm', 'umd', 'cjs'].forEach(type => {
+            ['esm', 'umd', 'cjs', 'esnext'].forEach(type => {
                 const filePath = path.join('_temp_style_', file);
                 const newPath = path.join(type, path.dirname(file), 'css');
                 fs.mkdirpSync(newPath);
@@ -131,7 +139,7 @@ function buildCssEntry(type) {
 function moveCssEntry() {
     try {
         allCssEntry.forEach(file => {
-            ['esm', 'umd', 'cjs'].forEach(type => {
+            ['esm', 'umd', 'cjs', 'esnext'].forEach(type => {
                 const filePath = path.join('_temp_style_entry_', type, file);
                 const newPath = path.join(type, path.dirname(file), 'css');
                 fs.mkdirpSync(newPath);
@@ -149,11 +157,11 @@ function moveCssEntry() {
 gulp.task(
     'build',
     gulp.series(
-        gulp.parallel(dtsBuild, esmBuild, umdBuild, cjsBuild), // js 部分编译打包
+        gulp.parallel(dtsBuild, esmBuild, umdBuild, cjsBuild, esnextBuild), // js 部分编译打包
         copyLess, // 复制less文件到产物中
         gulp.parallel(lessBuild, entryLessBuild), // 编译less文件为css
         moveCss, // css产物放到css文件夹中
-        ...['esm', 'umd', 'cjs'].map(type => buildCssEntry(type)), // css中的js入口生成
+        ...['esm', 'umd', 'cjs', 'esnext'].map(type => buildCssEntry(type)), // css中的js入口生成
         moveCssEntry, // css入口js放到css文件夹中
     ),
 );
diff --git a/packages/common-widgets/package.json b/packages/common-widgets/package.json
@@ -16,5 +16,6 @@
     "gitHead": "8b2b5c2694e65be7a57a4f8d8d1af5db4601fda2",
     "dependencies": {
         "es6-promise": "^4.2.8"
-    }
+    },
+    "sideEffects": false
 }
diff --git a/packages/common-widgets/utils/is.ts b/packages/common-widgets/utils/is.ts
@@ -191,7 +191,9 @@ export function isDeepEqual(obj: any, sub: any): boolean {
         return false;
     }
     for (const key in obj) {
-        if (!isDeepEqual(obj[key], sub[key])) return false;
+        if (!isDeepEqual(obj[key], sub[key])) {
+            return false;
+        }
     }
     return true;
 }