Skip to content

Commit

Permalink
feat: more plugins support used as environment plugin (#2994)
Browse files Browse the repository at this point in the history
  • Loading branch information
9aoy authored Jul 23, 2024
1 parent bdb5c5d commit 94fe07c
Show file tree
Hide file tree
Showing 15 changed files with 148 additions and 54 deletions.
24 changes: 24 additions & 0 deletions e2e/cases/environments/vue-react-plugins/index.test.ts
Original file line number Diff line number Diff line change
@@ -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();
});
32 changes: 32 additions & 0 deletions e2e/cases/environments/vue-react-plugins/rsbuild.config.ts
Original file line number Diff line number Diff line change
@@ -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',
},
},
},
},
});
3 changes: 3 additions & 0 deletions e2e/cases/environments/vue-react-plugins/src/react/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const App = () => <div id="test">Hello Rsbuild!</div>;

export default App;
9 changes: 9 additions & 0 deletions e2e/cases/environments/vue-react-plugins/src/react/index.ts
Original file line number Diff line number Diff line change
@@ -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));
}
14 changes: 14 additions & 0 deletions e2e/cases/environments/vue-react-plugins/src/vue/A.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { defineComponent, ref } from 'vue';

export default defineComponent({
name: 'Test',

setup() {
const count = ref(0);
return () => (
<button id="button1" type="button" onClick={() => count.value++}>
A: {count.value}
</button>
);
},
});
6 changes: 6 additions & 0 deletions e2e/cases/environments/vue-react-plugins/src/vue/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { createApp } from 'vue';
import A from './A';

console.log(A);

createApp(A).mount('#root');
1 change: 1 addition & 0 deletions packages/core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export type {
DevConfig,
DistPathConfig,
EnvironmentContext,
EnvironmentConfig,
FilenameConfig,
HtmlConfig,
HtmlRspackPlugin,
Expand Down
8 changes: 4 additions & 4 deletions packages/plugin-preact/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { RsbuildConfig, RsbuildPlugin, Rspack } from '@rsbuild/core';
import type { EnvironmentConfig, RsbuildPlugin, Rspack } from '@rsbuild/core';

export type PluginPreactOptions = {
/**
Expand All @@ -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: {
Expand All @@ -52,7 +52,7 @@ export const pluginPreact = (
};
}

return mergeRsbuildConfig(extraConfig, userConfig);
return mergeEnvironmentConfig(extraConfig, userConfig);
});
},
});
4 changes: 2 additions & 2 deletions packages/plugin-rem/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
22 changes: 12 additions & 10 deletions packages/plugin-source-build/src/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -105,7 +107,7 @@ export function pluginSourceBuild(

const references = new Set<string>();

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);
Expand Down
55 changes: 28 additions & 27 deletions packages/plugin-styled-components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
},
});
11 changes: 4 additions & 7 deletions packages/plugin-vue/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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
Expand All @@ -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 `<style module>` in Vue SFC
if (merged.output.cssModules.auto === true) {
Expand Down
5 changes: 1 addition & 4 deletions packages/plugin-vue2/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,7 @@ export function pluginVue2(options: PluginVueOptions = {}): RsbuildPlugin {
const VUE_REGEXP = /\.vue$/;
const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;

api.modifyRsbuildConfig((config) => {
config.output ||= {};
config.output.cssModules ||= {};

api.modifyEnvironmentConfig((config) => {
// Support `<style module>` in Vue SFC
if (config.output.cssModules.auto === true) {
config.output.cssModules.auto = (path, query) => {
Expand Down
4 changes: 4 additions & 0 deletions website/docs/en/plugins/dev/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,10 @@ rsbuild.addPlugins([plugin1, plugin2]);

Modify the config passed to the Rsbuild, you can directly modify the config object, or return a new object to replace the previous object.

:::warning
`modifyRsbuildConfig` is a global hook. To add support for your plugin as an [environment-specific plugin](/guide/advanced/environments#add-plugins-for-specified-environment), you should use [modifyEnvironmentConfig](/plugins/dev/hooks#modifyenvironmentconfig) instead of `modifyRsbuildConfig`.
:::

- **Type:**

```ts
Expand Down
4 changes: 4 additions & 0 deletions website/docs/zh/plugins/dev/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,10 @@ rsbuild.addPlugins([plugin1, plugin2]);

修改传递给 Rsbuild 的配置项,你可以直接修改传入的 config 对象,也可以返回一个新的对象来替换传入的对象。

:::warning
`modifyRsbuildConfig` 为全局 hook。如果你希望你开发的插件支持[仅在特定的 environment 下生效](/guide/advanced/environments#为指定环境添加插件),应避免使用 `modifyRsbuildConfig`,可使用 [modifyEnvironmentConfig](/plugins/dev/hooks#modifyenvironmentconfig) 代替。
:::

- **类型:**

```ts
Expand Down

0 comments on commit 94fe07c

Please sign in to comment.