chore: support compile decorator

toeverything · Jan 18, 2024 · 616ffa7 · 616ffa7
1 parent 9b056f1
commit 616ffa7
Show file tree

Hide file tree

Showing 9 changed files with 1,171 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,8 @@
     "@nx/vite": "17.2.8",
     "@perfsee/sdk": "^1.9.0",
     "@playwright/test": "^1.40.0",
+    "@rollup/plugin-swc": "^0.3.0",
+    "@swc/core": "^1.3.102",
     "@taplo/cli": "^0.5.2",
     "@testing-library/react": "^14.1.2",
     "@toeverything/infra": "workspace:*",
@@ -73,7 +75,6 @@
     "@typescript-eslint/parser": "^6.13.1",
     "@vanilla-extract/vite-plugin": "^3.9.2",
     "@vanilla-extract/webpack-plugin": "^2.3.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-istanbul": "1.1.3",
     "@vitest/ui": "1.1.3",
     "electron": "^27.1.0",

diff --git a/packages/common/infra/src/blocksuite/migration/subdoc.ts b/packages/common/infra/src/blocksuite/migration/subdoc.ts
@@ -120,9 +120,9 @@ function runBlockMigration(
 }
 
 function migrateSurface(data: YMap<unknown>) {
-  for (const [, value] of <IterableIterator<[string, YMap<unknown>]>>(
-    data.entries()
-  )) {
+  for (const [, value] of data.entries() as IterableIterator<
+    [string, YMap<unknown>]
+  >) {
     if (value.get('type') === 'connector') {
       migrateSurfaceConnector(value);
     }

diff --git a/packages/frontend/core/.webpack/config.ts b/packages/frontend/core/.webpack/config.ts
@@ -140,6 +140,7 @@ export const createConfiguration: (
 
     resolve: {
       symlinks: true,
+      // some package use '.js' to import '.ts' files for compatibility with moduleResolution: node
       extensionAlias: {
         '.js': ['.js', '.tsx', '.ts'],
         '.mjs': ['.mjs', '.mts'],
@@ -267,6 +268,8 @@ export const createConfiguration: (
                       },
                     },
                     useDefineForClassFields: false,
+                    legacyDecorator: true,
+                    decoratorMetadata: true,
                   },
                   experimental: {
                     plugins: [

diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
@@ -98,7 +98,7 @@
     "@perfsee/webpack": "^1.8.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@sentry/webpack-plugin": "^2.8.0",
-    "@swc/core": "^1.3.93",
+    "@swc/core": "^1.3.102",
     "@testing-library/react": "^14.0.0",
     "@types/animejs": "^3",
     "@types/bytes": "^3.1.3",

diff --git a/scripts/rollup-plugin-swc.ts b/scripts/rollup-plugin-swc.ts
@@ -0,0 +1,44 @@
+import { createFilter } from '@rollup/pluginutils';
+import { transform } from '@swc/core';
+import type { Plugin } from 'vite';
+
+const queryRE = /\?.*$/;
+const hashRE = /#.*$/;
+const cleanUrl = (url: string) => url.replace(hashRE, '').replace(queryRE, '');
+
+export function RollupPluginSwc(): Plugin {
+  const filter = createFilter(/\.(tsx?|jsx)$/, /\.js$/);
+
+  return {
+    name: 'rollup-plugin-swc',
+    async transform(code, id) {
+      if (filter(id) || filter(cleanUrl(id))) {
+        const result = await transform(code, {
+          jsc: {
+            target: 'esnext',
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+              decorators: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+                importSource: '@emotion/react',
+              },
+              legacyDecorator: true,
+              decoratorMetadata: true,
+            },
+          },
+          filename: id,
+          sourceMaps: true,
+        });
+        return {
+          code: result.code,
+          map: result.map,
+        };
+      }
+      return;
+    },
+  };
+}
diff --git a/tests/storybook/.storybook/main.ts b/tests/storybook/.storybook/main.ts
@@ -1,9 +1,8 @@
 import { runCli } from '@magic-works/i18n-codegen';
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 import { fileURLToPath } from 'node:url';
-import { mergeConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import webpack from 'webpack';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
 import { getRuntimeConfig } from '../../../packages/frontend/core/.webpack/runtime-config';
 
 runCli(
@@ -31,9 +30,14 @@ export default {
     'storybook-addon-react-router-v6',
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
   },
-  async viteFinal(config, _options) {
+  webpackFinal: async config => {
     const runtimeConfig = getRuntimeConfig({
       distribution: 'browser',
       mode: 'development',
@@ -42,35 +46,62 @@ export default {
     });
     // disable for storybook build
     runtimeConfig.enableCloud = false;
-    return mergeConfig(config, {
-      assetsInclude: ['**/*.md'],
+    return {
+      ...config,
       resolve: {
-        alias: {
-          // workaround for https://github.com/vitejs/vite/issues/9731
-          // it seems vite does not resolve self reference correctly?
-          '@affine/core': fileURLToPath(
-            new URL('../../../packages/frontend/core/src', import.meta.url)
-          ),
+        ...config.resolve,
+        // some package use '.js' to import '.ts' files for compatibility with moduleResolution: node
+        extensionAlias: {
+          '.js': ['.js', '.tsx', '.ts'],
+          '.mjs': ['.mjs', '.mts'],
         },
       },
       plugins: [
-        vanillaExtractPlugin(),
-        tsconfigPaths({
-          root: fileURLToPath(new URL('../../../', import.meta.url)),
-          ignoreConfigErrors: true,
+        new VanillaExtractPlugin(),
+        new webpack.DefinePlugin({
+          'process.env': JSON.stringify({}),
+          'process.env.COVERAGE': JSON.stringify(!!process.env.COVERAGE),
+          'process.env.SHOULD_REPORT_TRACE': JSON.stringify(
+            Boolean(process.env.SHOULD_REPORT_TRACE === 'true')
+          ),
+          'process.env.TRACE_REPORT_ENDPOINT': JSON.stringify(
+            process.env.TRACE_REPORT_ENDPOINT
+          ),
+          'process.env.CAPTCHA_SITE_KEY': JSON.stringify(
+            process.env.CAPTCHA_SITE_KEY
+          ),
+          'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN),
+          'process.env.BUILD_TYPE': JSON.stringify(process.env.BUILD_TYPE),
+          runtimeConfig: JSON.stringify(runtimeConfig),
         }),
+        ...(config.plugins ?? []),
       ],
-      define: {
-        'process.on': 'undefined',
-        'process.env': {},
-        'process.env.COVERAGE': JSON.stringify(!!process.env.COVERAGE),
-        'process.env.SHOULD_REPORT_TRACE': `${Boolean(
-          process.env.SHOULD_REPORT_TRACE === 'true'
-        )}`,
-        'process.env.TRACE_REPORT_ENDPOINT': `"${process.env.TRACE_REPORT_ENDPOINT}"`,
-        'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
-        runtimeConfig: runtimeConfig,
+    };
+  },
+  swc: async config => {
+    return {
+      ...config,
+      jsc: {
+        // https://swc.rs/docs/configuring-swc/
+        preserveAllComments: true,
+        parser: {
+          syntax: 'typescript',
+          dynamicImport: true,
+          topLevelAwait: false,
+          tsx: true,
+          decorators: true,
+        },
+        target: 'es2022',
+        externalHelpers: false,
+        transform: {
+          react: {
+            runtime: 'automatic',
+          },
+          useDefineForClassFields: false,
+          legacyDecorator: true,
+          decoratorMetadata: true,
+        },
       },
-    });
+    };
   },
 } as StorybookConfig;
diff --git a/tests/storybook/package.json b/tests/storybook/package.json
@@ -35,13 +35,12 @@
     "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-storysource": "^7.5.3",
     "@storybook/blocks": "^7.5.3",
-    "@storybook/builder-vite": "^7.5.3",
+    "@storybook/builder-webpack5": "^7.5.3",
     "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@storybook/test-runner": "^0.16.0",
     "@tomfreudenberg/next-auth-mock": "^0.5.6",
-    "@vanilla-extract/esbuild-plugin": "^2.3.1",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vanilla-extract/webpack-plugin": "^2.3.1",
     "chromatic": "^10.0.0",
     "concurrently": "^8.2.2",
     "jest-mock": "^29.7.0",

diff --git a/vitest.config.ts b/vitest.config.ts
@@ -2,14 +2,16 @@ import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vitest/config';
 
+import { RollupPluginSwc } from './scripts/rollup-plugin-swc';
+
 const rootDir = fileURLToPath(new URL('.', import.meta.url));
 
 export default defineConfig({
-  plugins: [react(), vanillaExtractPlugin()],
+  plugins: [vanillaExtractPlugin(), RollupPluginSwc()],
   assetsInclude: ['**/*.md'],
+  esbuild: false,
   resolve: {
     alias: {
       // prevent tests using two different sources of yjs