From 5cdaa16f801dd31b035ee46326ff0a535ebea000 Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 18 Dec 2024 21:51:27 +0800 Subject: [PATCH] feat: support for `importModule` in `api.transform` (#4217) --- .../index.test.ts | 18 ++++++++++++++++++ .../plugin-transform-import-module/myPlugin.ts | 13 +++++++++++++ .../rsbuild.config.ts | 5 +++++ .../plugin-transform-import-module/src/foo.ts | 1 + .../src/index.css | 3 +++ .../src/index.js | 3 +++ packages/core/src/loader/transformLoader.ts | 7 ++++--- packages/core/src/types/plugin.ts | 11 +++++------ 8 files changed, 52 insertions(+), 9 deletions(-) create mode 100644 e2e/cases/plugin-api/plugin-transform-import-module/index.test.ts create mode 100644 e2e/cases/plugin-api/plugin-transform-import-module/myPlugin.ts create mode 100644 e2e/cases/plugin-api/plugin-transform-import-module/rsbuild.config.ts create mode 100644 e2e/cases/plugin-api/plugin-transform-import-module/src/foo.ts create mode 100644 e2e/cases/plugin-api/plugin-transform-import-module/src/index.css create mode 100644 e2e/cases/plugin-api/plugin-transform-import-module/src/index.js diff --git a/e2e/cases/plugin-api/plugin-transform-import-module/index.test.ts b/e2e/cases/plugin-api/plugin-transform-import-module/index.test.ts new file mode 100644 index 0000000000..df0c599187 --- /dev/null +++ b/e2e/cases/plugin-api/plugin-transform-import-module/index.test.ts @@ -0,0 +1,18 @@ +import { build, rspackOnlyTest } from '@e2e/helper'; +import { expect } from '@playwright/test'; + +rspackOnlyTest( + 'should allow plugin to transform code and call `importModule`', + async () => { + const rsbuild = await build({ + cwd: __dirname, + }); + + const files = await rsbuild.unwrapOutputJSON(); + const indexCss = Object.keys(files).find( + (file) => file.includes('index') && file.endsWith('.css'), + ); + + expect(files[indexCss!].includes('#00f')).toBeTruthy(); + }, +); diff --git a/e2e/cases/plugin-api/plugin-transform-import-module/myPlugin.ts b/e2e/cases/plugin-api/plugin-transform-import-module/myPlugin.ts new file mode 100644 index 0000000000..bab114a00d --- /dev/null +++ b/e2e/cases/plugin-api/plugin-transform-import-module/myPlugin.ts @@ -0,0 +1,13 @@ +import { join } from 'node:path'; +import type { RsbuildPlugin } from '@rsbuild/core'; + +export const myPlugin: RsbuildPlugin = { + name: 'my-plugin', + setup(api) { + api.transform({ test: /\.css$/ }, async ({ code, importModule }) => { + // @ts-expect-error TODO: Rspack type issue + const { foo } = await importModule(join(__dirname, './src/foo.ts')); + return code.replace('red', foo); + }); + }, +}; diff --git a/e2e/cases/plugin-api/plugin-transform-import-module/rsbuild.config.ts b/e2e/cases/plugin-api/plugin-transform-import-module/rsbuild.config.ts new file mode 100644 index 0000000000..5aa09d1d63 --- /dev/null +++ b/e2e/cases/plugin-api/plugin-transform-import-module/rsbuild.config.ts @@ -0,0 +1,5 @@ +import { myPlugin } from './myPlugin'; + +export default { + plugins: [myPlugin], +}; diff --git a/e2e/cases/plugin-api/plugin-transform-import-module/src/foo.ts b/e2e/cases/plugin-api/plugin-transform-import-module/src/foo.ts new file mode 100644 index 0000000000..30395dc527 --- /dev/null +++ b/e2e/cases/plugin-api/plugin-transform-import-module/src/foo.ts @@ -0,0 +1 @@ +export const foo = 'blue'; diff --git a/e2e/cases/plugin-api/plugin-transform-import-module/src/index.css b/e2e/cases/plugin-api/plugin-transform-import-module/src/index.css new file mode 100644 index 0000000000..60f1eab971 --- /dev/null +++ b/e2e/cases/plugin-api/plugin-transform-import-module/src/index.css @@ -0,0 +1,3 @@ +body { + color: red; +} diff --git a/e2e/cases/plugin-api/plugin-transform-import-module/src/index.js b/e2e/cases/plugin-api/plugin-transform-import-module/src/index.js new file mode 100644 index 0000000000..f2eb6d0df6 --- /dev/null +++ b/e2e/cases/plugin-api/plugin-transform-import-module/src/index.js @@ -0,0 +1,3 @@ +import './index.css'; + +console.log('hello'); diff --git a/packages/core/src/loader/transformLoader.ts b/packages/core/src/loader/transformLoader.ts index 6707c4a412..4b30a353d2 100644 --- a/packages/core/src/loader/transformLoader.ts +++ b/packages/core/src/loader/transformLoader.ts @@ -1,5 +1,5 @@ import type { LoaderContext } from '@rspack/core'; -import type { EnvironmentContext, Rspack, TransformContext } from '../types'; +import type { EnvironmentContext, Rspack } from '../types'; export type TransformLoaderOptions = { id: string; @@ -30,8 +30,9 @@ export default async function transform( resourcePath: this.resourcePath, resourceQuery: this.resourceQuery, environment: getEnvironment(), - addDependency: this.addDependency, - emitFile: this.emitFile as TransformContext['emitFile'], + addDependency: this.addDependency.bind(this), + emitFile: this.emitFile.bind(this), + importModule: this.importModule.bind(this), }); if (result === null || result === undefined) { diff --git a/packages/core/src/types/plugin.ts b/packages/core/src/types/plugin.ts index 1a400abd57..a17e505cef 100644 --- a/packages/core/src/types/plugin.ts +++ b/packages/core/src/types/plugin.ts @@ -263,12 +263,11 @@ export type TransformContext = { * @param sourceMap source map of the asset * @param assetInfo additional asset information */ - emitFile: ( - name: string, - content: string | Buffer, - sourceMap?: string, - assetInfo?: Record, - ) => void; + emitFile: Rspack.LoaderContext['emitFile']; + /** + * Compile and execute a module at the build time. + */ + importModule: Rspack.LoaderContext['importModule']; }; export type TransformHandler = (