From 94fe07cdcbbe755cd06c111fac3e762f9330fd2b Mon Sep 17 00:00:00 2001 From: gaoyuan Date: Tue, 23 Jul 2024 20:54:57 +0800 Subject: [PATCH] feat: more plugins support used as environment plugin (#2994) --- .../vue-react-plugins/index.test.ts | 24 ++++++++ .../vue-react-plugins/rsbuild.config.ts | 32 +++++++++++ .../vue-react-plugins/src/react/App.tsx | 3 + .../vue-react-plugins/src/react/index.ts | 9 +++ .../vue-react-plugins/src/vue/A.jsx | 14 +++++ .../vue-react-plugins/src/vue/index.js | 6 ++ packages/core/src/index.ts | 1 + packages/plugin-preact/src/index.ts | 8 +-- packages/plugin-rem/src/index.ts | 4 +- packages/plugin-source-build/src/plugin.ts | 22 ++++---- .../plugin-styled-components/src/index.ts | 55 ++++++++++--------- packages/plugin-vue/src/index.ts | 11 ++-- packages/plugin-vue2/src/index.ts | 5 +- website/docs/en/plugins/dev/hooks.mdx | 4 ++ website/docs/zh/plugins/dev/hooks.mdx | 4 ++ 15 files changed, 148 insertions(+), 54 deletions(-) create mode 100644 e2e/cases/environments/vue-react-plugins/index.test.ts create mode 100644 e2e/cases/environments/vue-react-plugins/rsbuild.config.ts create mode 100644 e2e/cases/environments/vue-react-plugins/src/react/App.tsx create mode 100644 e2e/cases/environments/vue-react-plugins/src/react/index.ts create mode 100644 e2e/cases/environments/vue-react-plugins/src/vue/A.jsx create mode 100644 e2e/cases/environments/vue-react-plugins/src/vue/index.js diff --git a/e2e/cases/environments/vue-react-plugins/index.test.ts b/e2e/cases/environments/vue-react-plugins/index.test.ts new file mode 100644 index 0000000000..f5955e426b --- /dev/null +++ b/e2e/cases/environments/vue-react-plugins/index.test.ts @@ -0,0 +1,24 @@ +import { build, rspackOnlyTest } from '@e2e/helper'; +import { expect } from '@playwright/test'; + +rspackOnlyTest('should build basic Vue jsx correctly', async ({ page }) => { + const rsbuild = await build({ + cwd: __dirname, + runServer: true, + }); + + const reactUrl = new URL(`http://localhost:${rsbuild.port}/react`); + + await page.goto(reactUrl.href); + + await expect(page.locator('#test')).toHaveText('Hello Rsbuild!'); + + const vueUrl = new URL(`http://localhost:${rsbuild.port}/vue`); + + await page.goto(vueUrl.href); + + const button1 = page.locator('#button1'); + await expect(button1).toHaveText('A: 0'); + + await rsbuild.close(); +}); diff --git a/e2e/cases/environments/vue-react-plugins/rsbuild.config.ts b/e2e/cases/environments/vue-react-plugins/rsbuild.config.ts new file mode 100644 index 0000000000..23ade6d7eb --- /dev/null +++ b/e2e/cases/environments/vue-react-plugins/rsbuild.config.ts @@ -0,0 +1,32 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginBabel } from '@rsbuild/plugin-babel'; +import { pluginReact } from '@rsbuild/plugin-react'; +import { pluginVue } from '@rsbuild/plugin-vue'; +import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx'; + +export default defineConfig({ + environments: { + react: { + plugins: [pluginReact()], + source: { + entry: { + react: './src/react/index.ts', + }, + }, + }, + vue: { + plugins: [ + pluginVue(), + pluginVueJsx(), + pluginBabel({ + include: /\.(?:jsx|tsx)$/, + }), + ], + source: { + entry: { + vue: './src/vue/index.js', + }, + }, + }, + }, +}); diff --git a/e2e/cases/environments/vue-react-plugins/src/react/App.tsx b/e2e/cases/environments/vue-react-plugins/src/react/App.tsx new file mode 100644 index 0000000000..639af6a6e2 --- /dev/null +++ b/e2e/cases/environments/vue-react-plugins/src/react/App.tsx @@ -0,0 +1,3 @@ +const App = () =>
Hello Rsbuild!
; + +export default App; diff --git a/e2e/cases/environments/vue-react-plugins/src/react/index.ts b/e2e/cases/environments/vue-react-plugins/src/react/index.ts new file mode 100644 index 0000000000..5ceb026ccc --- /dev/null +++ b/e2e/cases/environments/vue-react-plugins/src/react/index.ts @@ -0,0 +1,9 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import App from './App'; + +const container = document.getElementById('root'); +if (container) { + const root = createRoot(container); + root.render(React.createElement(App)); +} diff --git a/e2e/cases/environments/vue-react-plugins/src/vue/A.jsx b/e2e/cases/environments/vue-react-plugins/src/vue/A.jsx new file mode 100644 index 0000000000..22d6237152 --- /dev/null +++ b/e2e/cases/environments/vue-react-plugins/src/vue/A.jsx @@ -0,0 +1,14 @@ +import { defineComponent, ref } from 'vue'; + +export default defineComponent({ + name: 'Test', + + setup() { + const count = ref(0); + return () => ( + + ); + }, +}); diff --git a/e2e/cases/environments/vue-react-plugins/src/vue/index.js b/e2e/cases/environments/vue-react-plugins/src/vue/index.js new file mode 100644 index 0000000000..6d3006e98c --- /dev/null +++ b/e2e/cases/environments/vue-react-plugins/src/vue/index.js @@ -0,0 +1,6 @@ +import { createApp } from 'vue'; +import A from './A'; + +console.log(A); + +createApp(A).mount('#root'); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 535dc0b980..4d429d55b3 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -48,6 +48,7 @@ export type { DevConfig, DistPathConfig, EnvironmentContext, + EnvironmentConfig, FilenameConfig, HtmlConfig, HtmlRspackPlugin, diff --git a/packages/plugin-preact/src/index.ts b/packages/plugin-preact/src/index.ts index 51a31cd586..48866b1f4f 100644 --- a/packages/plugin-preact/src/index.ts +++ b/packages/plugin-preact/src/index.ts @@ -1,4 +1,4 @@ -import type { RsbuildConfig, RsbuildPlugin, Rspack } from '@rsbuild/core'; +import type { EnvironmentConfig, RsbuildPlugin, Rspack } from '@rsbuild/core'; export type PluginPreactOptions = { /** @@ -18,14 +18,14 @@ export const pluginPreact = ( setup(api) { const { reactAliasesEnabled = true } = options; - api.modifyRsbuildConfig((userConfig, { mergeRsbuildConfig }) => { + api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => { const reactOptions: Rspack.SwcLoaderTransformConfig['react'] = { development: process.env.NODE_ENV === 'development', runtime: 'automatic', importSource: 'preact', }; - const extraConfig: RsbuildConfig = { + const extraConfig: EnvironmentConfig = { tools: { swc: { jsc: { @@ -52,7 +52,7 @@ export const pluginPreact = ( }; } - return mergeRsbuildConfig(extraConfig, userConfig); + return mergeEnvironmentConfig(extraConfig, userConfig); }); }, }); diff --git a/packages/plugin-rem/src/index.ts b/packages/plugin-rem/src/index.ts index 2495f8340d..3340f75696 100644 --- a/packages/plugin-rem/src/index.ts +++ b/packages/plugin-rem/src/index.ts @@ -61,9 +61,9 @@ export const pluginRem = ( }); }; - api.modifyRsbuildConfig(async (config, { mergeRsbuildConfig }) => { + api.modifyEnvironmentConfig(async (config, { mergeEnvironmentConfig }) => { const remPlugin = await getPostCSSPlugin(); - return mergeRsbuildConfig(config, { + return mergeEnvironmentConfig(config, { tools: { postcss(_, { addPlugins }) { addPlugins(remPlugin); diff --git a/packages/plugin-source-build/src/plugin.ts b/packages/plugin-source-build/src/plugin.ts index 849ac250a3..07feff6e71 100644 --- a/packages/plugin-source-build/src/plugin.ts +++ b/packages/plugin-source-build/src/plugin.ts @@ -58,15 +58,17 @@ export function pluginSourceBuild( setup(api) { const projectRootPath = api.context.rootPath; - let projects: Project[] = []; - - api.modifyRsbuildConfig(async (config) => { - projects = await getDependentProjects(projectName || projectRootPath, { - cwd: projectRootPath, - recursive: true, - filter: filterByField(sourceField, true), - extraMonorepoStrategies, - }); + let projects: Project[] | undefined; + + api.modifyEnvironmentConfig(async (config) => { + projects = + projects || + (await getDependentProjects(projectName || projectRootPath, { + cwd: projectRootPath, + recursive: true, + filter: filterByField(sourceField, true), + extraMonorepoStrategies, + })); const includes = await getSourceInclude({ projects, @@ -105,7 +107,7 @@ export function pluginSourceBuild( const references = new Set(); - for (const project of projects) { + for (const project of projects || []) { const filePath = path.join(project.dir, 'tsconfig.json'); if (fs.existsSync(filePath)) { references.add(filePath); diff --git a/packages/plugin-styled-components/src/index.ts b/packages/plugin-styled-components/src/index.ts index 43c09c7eda..96340bd4c9 100644 --- a/packages/plugin-styled-components/src/index.ts +++ b/packages/plugin-styled-components/src/index.ts @@ -57,39 +57,40 @@ export const pluginStyledComponents = ( }); }; - api.modifyRsbuildConfig({ - order: 'post', - handler: (userConfig, { mergeRsbuildConfig }) => { - const targets = userConfig.environments - ? Object.values(userConfig.environments).map( - (e) => e.output?.target || userConfig.output?.target || 'web', - ) - : [userConfig.output?.target || 'web']; - const useSSR = isServerTarget(targets); - const mergedOptions = getMergedOptions(useSSR); - if (!mergedOptions) { - return userConfig; - } + api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => { + const rsbuildConfig = api.getRsbuildConfig(); - const extraConfig: RsbuildConfig = { - tools: { - swc: { - jsc: { - experimental: { - plugins: [ - [ - require.resolve('@swc/plugin-styled-components'), - mergedOptions, - ], + const targets = rsbuildConfig.environments + ? Object.values(rsbuildConfig.environments).map( + (e) => e.output?.target || userConfig.output?.target || 'web', + ) + : [userConfig.output?.target || 'web']; + + const useSSR = isServerTarget(targets); + + const mergedOptions = getMergedOptions(useSSR); + if (!mergedOptions) { + return userConfig; + } + + const extraConfig: RsbuildConfig = { + tools: { + swc: { + jsc: { + experimental: { + plugins: [ + [ + require.resolve('@swc/plugin-styled-components'), + mergedOptions, ], - }, + ], }, }, }, - }; + }, + }; - return mergeRsbuildConfig(extraConfig, userConfig); - }, + return mergeEnvironmentConfig(extraConfig, userConfig); }); }, }); diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts index bf4739bb45..9ae0b38017 100644 --- a/packages/plugin-vue/src/index.ts +++ b/packages/plugin-vue/src/index.ts @@ -1,4 +1,4 @@ -import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core'; +import type { EnvironmentConfig, RsbuildPlugin } from '@rsbuild/core'; import { type VueLoaderOptions, VueLoaderPlugin } from 'vue-loader'; import { applySplitChunksRule } from './splitChunks'; @@ -37,8 +37,8 @@ export function pluginVue(options: PluginVueOptions = {}): RsbuildPlugin { const VUE_REGEXP = /\.vue$/; const CSS_MODULES_REGEX = /\.modules?\.\w+$/i; - api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => { - const extraConfig: RsbuildConfig = { + api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => { + const extraConfig: EnvironmentConfig = { source: { define: { // https://link.vuejs.org/feature-flags @@ -49,10 +49,7 @@ export function pluginVue(options: PluginVueOptions = {}): RsbuildPlugin { }, }; - const merged = mergeRsbuildConfig(extraConfig, config); - - merged.output ||= {}; - merged.output.cssModules ||= {}; + const merged = mergeEnvironmentConfig(extraConfig, config); // Support `