diff --git a/examples/preact-component-bundle-false/src/assets/logo.svg b/examples/preact-component-bundle-false/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/examples/preact-component-bundle-false/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx b/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx index 09f8b087a..52b41d1bb 100644 --- a/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx +++ b/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx @@ -1,4 +1,5 @@ import type { FunctionComponent } from 'preact'; +import logo from '../../assets/logo.svg'; import styles from './index.module.scss'; interface CounterButtonProps { @@ -10,7 +11,12 @@ export const CounterButton: FunctionComponent = ({ onClick, label, }) => ( - ); diff --git a/examples/preact-component-bundle-false/src/env.d.ts b/examples/preact-component-bundle-false/src/env.d.ts index 0506fbcb4..8fa0ce11c 100644 --- a/examples/preact-component-bundle-false/src/env.d.ts +++ b/examples/preact-component-bundle-false/src/env.d.ts @@ -2,3 +2,8 @@ declare module '*.module.scss' { const classes: { [key: string]: string }; export default classes; } + +declare module '*.svg' { + const url: string; + export default url; +} diff --git a/examples/preact-component-bundle-false/src/index.scss b/examples/preact-component-bundle-false/src/index.scss index 2e506a0ac..f4c82dce4 100644 --- a/examples/preact-component-bundle-false/src/index.scss +++ b/examples/preact-component-bundle-false/src/index.scss @@ -1,3 +1,10 @@ +.counter-title { + width: 100px; + height: 100px; + background: no-repeat url('./assets/logo.svg'); + background-size: cover; +} + .counter-text { font-size: 50px; } diff --git a/examples/react-component-bundle-false/rslib.config.ts b/examples/react-component-bundle-false/rslib.config.ts index fc48f32f2..389931477 100644 --- a/examples/react-component-bundle-false/rslib.config.ts +++ b/examples/react-component-bundle-false/rslib.config.ts @@ -12,6 +12,7 @@ export default defineConfig({ { format: 'esm', bundle: false, + syntax: ['es5'], dts: true, output: { distPath: { @@ -22,6 +23,7 @@ export default defineConfig({ { format: 'cjs', bundle: false, + syntax: ['es5'], dts: true, output: { distPath: { @@ -31,8 +33,8 @@ export default defineConfig({ }, ], output: { + minify: false, target: 'web', - assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, plugins: [pluginReact(), pluginSass()], }); diff --git a/examples/react-component-bundle-false/src/components/CounterButton/index.tsx b/examples/react-component-bundle-false/src/components/CounterButton/index.tsx index be37643e0..2638731c6 100644 --- a/examples/react-component-bundle-false/src/components/CounterButton/index.tsx +++ b/examples/react-component-bundle-false/src/components/CounterButton/index.tsx @@ -1,4 +1,5 @@ import type React from 'react'; +import logo from '../../assets/logo.svg'; import styles from './index.module.scss'; interface CounterButtonProps { @@ -10,7 +11,12 @@ export const CounterButton: React.FC = ({ onClick, label, }) => ( - ); diff --git a/examples/react-component-bundle-false/src/env.d.ts b/examples/react-component-bundle-false/src/env.d.ts index 0506fbcb4..8fa0ce11c 100644 --- a/examples/react-component-bundle-false/src/env.d.ts +++ b/examples/react-component-bundle-false/src/env.d.ts @@ -2,3 +2,8 @@ declare module '*.module.scss' { const classes: { [key: string]: string }; export default classes; } + +declare module '*.svg' { + const url: string; + export default url; +} diff --git a/examples/react-component-bundle/rslib.config.ts b/examples/react-component-bundle/rslib.config.ts index c00c22eb5..59d42518d 100644 --- a/examples/react-component-bundle/rslib.config.ts +++ b/examples/react-component-bundle/rslib.config.ts @@ -25,7 +25,6 @@ export default defineConfig({ ], output: { target: 'web', - assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, plugins: [pluginReact(), pluginSass()], }); diff --git a/examples/react-component-bundle/src/components/CounterButton/index.tsx b/examples/react-component-bundle/src/components/CounterButton/index.tsx index be37643e0..2638731c6 100644 --- a/examples/react-component-bundle/src/components/CounterButton/index.tsx +++ b/examples/react-component-bundle/src/components/CounterButton/index.tsx @@ -1,4 +1,5 @@ import type React from 'react'; +import logo from '../../assets/logo.svg'; import styles from './index.module.scss'; interface CounterButtonProps { @@ -10,7 +11,12 @@ export const CounterButton: React.FC = ({ onClick, label, }) => ( - ); diff --git a/examples/react-component-bundle/src/env.d.ts b/examples/react-component-bundle/src/env.d.ts index 0506fbcb4..8fa0ce11c 100644 --- a/examples/react-component-bundle/src/env.d.ts +++ b/examples/react-component-bundle/src/env.d.ts @@ -2,3 +2,8 @@ declare module '*.module.scss' { const classes: { [key: string]: string }; export default classes; } + +declare module '*.svg' { + const url: string; + export default url; +} diff --git a/packages/core/src/asset/LibAssetExtractPlugin.ts b/packages/core/src/asset/LibAssetExtractPlugin.ts new file mode 100644 index 000000000..72aea6660 --- /dev/null +++ b/packages/core/src/asset/LibAssetExtractPlugin.ts @@ -0,0 +1,162 @@ +import assert from 'node:assert'; +import { type Rspack, rspack } from '@rsbuild/core'; +import { getUndoPath } from '../css/utils'; + +/** + * these codes is written according to + * https://github.com/web-infra-dev/rspack/blob/61f0cd2b4e313445a9d3329ca71240e99edfb352/crates/rspack_plugin_asset/src/lib.rs#L531 + */ + +// 1. bundleless: single file +const BUNDLELESS_ASSET_PATTERN: RegExp = + /__webpack_require__\.p\s\+\s["'](.+)["']/g; +const RSLIB_NAMESPACE_OBJECT = '__rslib_asset__'; +const esmSingleFileTemplate = ( + url: string, +) => `import ${RSLIB_NAMESPACE_OBJECT} from '${url}'; +export default ${RSLIB_NAMESPACE_OBJECT};`; +const cjsSingleFileTemplate = (url: string) => + `module.exports = require('${url}');`; + +function extractAssetFilenames(content: string): string[] { + return [...content.matchAll(BUNDLELESS_ASSET_PATTERN)] + .map((i) => { + return i?.[1]; + }) + .filter(Boolean) as string[]; +} + +// 2. bundle +// remove __webpack_require__.p and __webpack_require__.g +const WEBPACK_REQUIRE_G_IIFE = + /\(\(\)\s*=>\s*{.*?__webpack_require__\.g\s\=.*?}\)\(\);/gms; +const WEBPACK_REQUIRE_G_IIFE_ES5 = + /!function\(\)\s*\s*{.*?__webpack_require__\.g\s\=.*?}\(\);/gms; +const WEBPACK_REQUIRE_P_IIFE = + /\(\(\)\s*=>\s*{.*?__webpack_require__\.p\s\=.*?}\)\(\);/gms; +const WEBPACK_REQUIRE_P_IIFE_ES5 = + /!function\(\)\s*\s*{.*?__webpack_require__\.p\s\=.*?}\(\);/gms; + +// 2.1 bundle: concatenated +const CONCATENATED_PATTERN: RegExp = + /(const|var)\s(\w+)\s=\s\(?__webpack_require__\.p\s\+\s["'](.+)["']\)?/g; +const concatenatedEsmReplaceTemplate = (variableName: string, url: string) => + `import ${variableName} from '${url}';`; +const concatenatedCjsReplaceTemplate = ( + declarationKind: string, + variableName: string, + url: string, +) => `${declarationKind} ${variableName} = require('${url}');`; + +// 2.2 bundle: not concatenated, in __webpack_require__.m +const NOT_CONCATENATED_PATTERN: RegExp = + /module\.exports = __webpack_require__\.p\s\+\s["'](.+)["']/g; +const nonConcatenatedReplaceTemplate = (url: string) => + `module.exports = require('${url}');`; + +const pluginName = 'LIB_ASSET_EXTRACT_PLUGIN'; + +type Options = { + // bundle and isUsingSvgr options: just for perf, in bundleless we can replace the entire file directly + bundle: boolean; + isUsingSvgr: boolean; +}; + +class LibAssetExtractPlugin implements Rspack.RspackPluginInstance { + readonly name: string = pluginName; + options: Options; + constructor(options: Options) { + this.options = options; + } + + apply(compiler: Rspack.Compiler): void { + compiler.hooks.make.tap(pluginName, (compilation) => { + compilation.hooks.processAssets.tap(pluginName, (assets) => { + const chunkAsset = Object.keys(assets).filter((name) => + /js$/.test(name), + ); + const isEsmFormat = compilation.options.output.module; + const canEntireFileReplacedDirectly = + !this.options.bundle && !this.options.isUsingSvgr; + for (const name of chunkAsset) { + const undoPath = getUndoPath( + name, + compilation.outputOptions.path!, + true, + ); + compilation.updateAsset(name, (old) => { + const oldSource = old.source().toString(); + + // bundleless + if (canEntireFileReplacedDirectly) { + const assetFilenames = extractAssetFilenames(oldSource); + // asset/resource + if (assetFilenames.length === 0) { + return old; + } + assert( + assetFilenames.length === 1, + `in bundleless mode, each asset file should only generate one js module, but generated ${assetFilenames}, ${oldSource}`, + ); + const assetFilename = assetFilenames[0]; + let newSource = ''; + const url = `${undoPath}${assetFilename}`; + + if (isEsmFormat) { + newSource = esmSingleFileTemplate(url); + } else { + newSource = cjsSingleFileTemplate(url); + } + return new rspack.sources.RawSource(newSource); + } + + // bundle + const newSource = new rspack.sources.ReplaceSource(old); + function replace( + pattern: RegExp, + replacer: (match: RegExpMatchArray) => string, + ) { + const matches = oldSource.matchAll(pattern); + for (const match of matches) { + const replaced = replacer(match); + newSource.replace( + match.index, + match.index + match[0].length - 1, + replaced, + ); + } + } + + const supportsArrowFunction = + compilation.options.output.environment?.arrowFunction; + supportsArrowFunction + ? replace(WEBPACK_REQUIRE_G_IIFE, () => '') + : replace(WEBPACK_REQUIRE_G_IIFE_ES5, () => ''); + supportsArrowFunction + ? replace(WEBPACK_REQUIRE_P_IIFE, () => '') + : replace(WEBPACK_REQUIRE_P_IIFE_ES5, () => ''); + + replace(CONCATENATED_PATTERN, (match) => { + const declarationKind = match[1]; + const variableName = match[2]; + const url = `${undoPath}${match[3]}`; + return isEsmFormat + ? concatenatedEsmReplaceTemplate(variableName!, url) + : concatenatedCjsReplaceTemplate( + declarationKind!, + variableName!, + url, + ); + }); + replace(NOT_CONCATENATED_PATTERN, (match) => { + const url = `${undoPath}${match[1]}`; + return nonConcatenatedReplaceTemplate(url); + }); + return newSource; + }); + } + }); + }); + } +} +export { LibAssetExtractPlugin }; diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index 81598e6ea..7b65cc4ca 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -1,5 +1,51 @@ -import type { EnvironmentConfig } from '@rsbuild/core'; +import type { EnvironmentConfig, RsbuildPlugin } from '@rsbuild/core'; import type { Format } from '../types'; +import { LibAssetExtractPlugin } from './LibAssetExtractPlugin'; + +const PLUGIN_NAME = 'rsbuild:lib-asset'; + +const RSBUILD_SVGR_PLUGIN_NAME = 'rsbuild:svgr'; +const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({ + name: PLUGIN_NAME, + pre: [RSBUILD_SVGR_PLUGIN_NAME], + setup(api) { + api.modifyBundlerChain((config, { CHAIN_ID }) => { + const isUsingSvgr = Boolean( + config.module + .rule(CHAIN_ID.RULE.SVG) + .oneOf(CHAIN_ID.RULE.SVG) + .uses.has(CHAIN_ID.USE.SVGR), + ); + if (isUsingSvgr && !bundle) { + // in bundleless, only support transform the svg asset to mixedImport svgr file + // remove issuer to make every svg asset is transformed + const rule = config.module + .rule(CHAIN_ID.RULE.SVG) + .oneOf(CHAIN_ID.ONE_OF.SVG); + rule.issuer([]); + } + config + .plugin(LibAssetExtractPlugin.name) + .use(LibAssetExtractPlugin, [{ bundle, isUsingSvgr }]); + + if (bundle) { + // preserve './' in css url + // https://github.com/web-infra-dev/rspack/pull/8946 + config.plugins.get(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT)?.tap((options) => { + if (bundle) { + return [ + { + ...options[0], + enforceRelative: true, + }, + ]; + } + return options; + }); + } + }); + }, +}); // TODO: asset config document export const composeAssetConfig = ( @@ -11,16 +57,17 @@ export const composeAssetConfig = ( return { output: { dataUriLimit: 0, // default: no inline asset - // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future + assetPrefix: 'auto', }, + plugins: [pluginLibAsset({ bundle: true })], }; } - return { output: { dataUriLimit: 0, // default: no inline asset - // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future + assetPrefix: 'auto', }, + plugins: [pluginLibAsset({ bundle: false })], }; } diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index cddd2b02e..57d6dfff3 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -17,7 +17,7 @@ import { composeAssetConfig } from './asset/assetConfig'; import { DEFAULT_CONFIG_EXTENSIONS, DEFAULT_CONFIG_NAME, - ENTRY_EXTENSIONS_PATTERN, + DTS_EXTENSIONS_PATTERN, JS_EXTENSIONS_PATTERN, RSLIB_ENTRY_QUERY, SWC_HELPERS, @@ -975,9 +975,9 @@ const composeEntryConfig = async ( }); // Filter the glob resolved entry files based on the allowed extensions - const resolvedEntryFiles = globEntryFiles.filter((file) => - ENTRY_EXTENSIONS_PATTERN.test(file), - ); + const resolvedEntryFiles = globEntryFiles.filter((i) => { + return !DTS_EXTENSIONS_PATTERN.test(i); + }); if (resolvedEntryFiles.length === 0) { throw new Error(`Cannot find ${resolvedEntryFiles}`); @@ -1124,6 +1124,7 @@ const composeBundlelessExternalConfig = ( styleRedirectPath, styleRedirectExtension, redirectPath, + issuer, ); if (cssExternal !== false) { @@ -1154,7 +1155,10 @@ const composeBundlelessExternalConfig = ( ); } else { // If it does not match jsExtensionsPattern, we should do nothing, eg: ./foo.png - return callback(); + resolvedRequest = resolvedRequest.replace( + /\.[^.]+$/, + jsExtension, + ); } } else { resolvedRequest = `${resolvedRequest}${jsExtension}`; diff --git a/packages/core/src/constant.ts b/packages/core/src/constant.ts index 85913bd83..a05f947bf 100644 --- a/packages/core/src/constant.ts +++ b/packages/core/src/constant.ts @@ -16,6 +16,8 @@ export const SHEBANG_REGEX: RegExp = /#!.*[\s\n\r]*$/; export const REACT_DIRECTIVE_REGEX: RegExp = /^['"]use (client|server)['"](;?)[\s\n\r]*$/; +const DTS_EXTENSIONS: string[] = ['d.ts', 'd.mts', 'd.cts']; + const JS_EXTENSIONS: string[] = [ 'js', 'mjs', @@ -33,11 +35,6 @@ const JS_EXTENSIONS: string[] = [ const CSS_EXTENSIONS: string[] = ['css', 'sass', 'scss', 'less'] as const; -const ENTRY_EXTENSIONS: string[] = [ - ...JS_EXTENSIONS, - ...CSS_EXTENSIONS, -] as const; - export const JS_EXTENSIONS_PATTERN: RegExp = new RegExp( `\\.(${JS_EXTENSIONS.join('|')})$`, ); @@ -46,6 +43,6 @@ export const CSS_EXTENSIONS_PATTERN: RegExp = new RegExp( `\\.(${CSS_EXTENSIONS.join('|')})$`, ); -export const ENTRY_EXTENSIONS_PATTERN: RegExp = new RegExp( - `\\.(${ENTRY_EXTENSIONS.join('|')})$`, +export const DTS_EXTENSIONS_PATTERN: RegExp = new RegExp( + `\\.(${DTS_EXTENSIONS.join('|')})$`, ); diff --git a/packages/core/src/css/LibCssExtractPlugin.ts b/packages/core/src/css/LibCssExtractPlugin.ts index d4588c63b..18001e841 100644 --- a/packages/core/src/css/LibCssExtractPlugin.ts +++ b/packages/core/src/css/LibCssExtractPlugin.ts @@ -3,6 +3,7 @@ import { RSLIB_CSS_ENTRY_FLAG } from './cssConfig'; import { ABSOLUTE_PUBLIC_PATH, AUTO_PUBLIC_PATH, + BASE_URI, SINGLE_DOT_PATH_SEGMENT, } from './libCssExtractLoader'; import { getUndoPath } from './utils'; @@ -62,14 +63,16 @@ class LibCssExtractPlugin implements Rspack.RspackPluginInstance { } } - replace(ABSOLUTE_PUBLIC_PATH, ''); replace(SINGLE_DOT_PATH_SEGMENT, '.'); const undoPath = getUndoPath( name, compilation.outputOptions.path!, - false, + // https://github.com/web-infra-dev/rspack/pull/8946 + true, ); - replace(AUTO_PUBLIC_PATH, undoPath); + replace(`${ABSOLUTE_PUBLIC_PATH}${AUTO_PUBLIC_PATH}`, undoPath); + replace(ABSOLUTE_PUBLIC_PATH, ''); + replace(`${BASE_URI}/`, ''); return replaceSource; }); diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index f5a93aab7..7f057d7dd 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/packages/core/src/css/cssConfig.ts @@ -87,9 +87,10 @@ export async function cssExternalHandler( styleRedirectPath: boolean, styleRedirectExtension: boolean, redirectPath: (request: string) => Promise, + issuer: string, ): Promise { - // cssExtract would execute the file handled by css-loader, so we cannot external the "helper import" from css-loader - // do not external @rsbuild/core/compiled/css-loader/noSourceMaps.js, sourceMaps.js, api.mjs etc. + // cssExtract: do not external @rsbuild/core/compiled/css-loader/noSourceMaps.js, sourceMaps.js, api.mjs etc. + // cssExtract would execute the result handled by css-loader with importModule, so we cannot external the "helper import" from css-loader if (/compiled\/css-loader\//.test(request)) { return callback(); } @@ -104,6 +105,10 @@ export async function cssExternalHandler( } if (!isCssFile(resolvedRequest)) { + // cssExtract: do not external assets module import + if (isCssFile(issuer)) { + return callback(); + } return false; } diff --git a/packages/core/tests/__snapshots__/config.test.ts.snap b/packages/core/tests/__snapshots__/config.test.ts.snap index 19dae61ba..5b9221534 100644 --- a/packages/core/tests/__snapshots__/config.test.ts.snap +++ b/packages/core/tests/__snapshots__/config.test.ts.snap @@ -8,6 +8,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i "progressBar": false, }, "output": { + "assetPrefix": "auto", "dataUriLimit": 0, "distPath": { "css": "./", @@ -113,6 +114,13 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i "name": "rsbuild:format", "setup": [Function], }, + { + "name": "rsbuild:lib-asset", + "pre": [ + "rsbuild:svgr", + ], + "setup": [Function], + }, { "name": "rsbuild:lib-entry-chunk", "setup": [Function], @@ -252,6 +260,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i "progressBar": false, }, "output": { + "assetPrefix": "auto", "dataUriLimit": 0, "distPath": { "css": "./", @@ -356,6 +365,13 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i "name": "rsbuild:cjs-import-meta-url-shim", "setup": [Function], }, + { + "name": "rsbuild:lib-asset", + "pre": [ + "rsbuild:svgr", + ], + "setup": [Function], + }, { "name": "rsbuild:lib-entry-chunk", "setup": [Function], diff --git a/packages/core/tests/constant.test.ts b/packages/core/tests/constant.test.ts index 5522c2ce6..d9fdf4ee7 100644 --- a/packages/core/tests/constant.test.ts +++ b/packages/core/tests/constant.test.ts @@ -1,7 +1,7 @@ import { expect, test } from 'vitest'; import { CSS_EXTENSIONS_PATTERN, - ENTRY_EXTENSIONS_PATTERN, + DTS_EXTENSIONS_PATTERN, JS_EXTENSIONS_PATTERN, } from '../src/constant'; @@ -27,6 +27,17 @@ const cssTestStrings = [ { str: '/Users/path/index.sass', expected: true }, ]; +const dtsTestStrings = [ + { str: 'index.js', expected: false }, + { str: './index.ts', expected: false }, + { str: './index.d.ts', expected: true }, + { str: '/Users/path/index.ts', expected: false }, + { str: '/Users/path/index.d.ts', expected: true }, + { str: '/Users/path/index.d.mts', expected: true }, + { str: '/Users/path/index.d.cts', expected: true }, + { str: '/Users/path/index.tsx', expected: false }, +]; + test('JS_EXTENSIONS_PATTERN', () => { for (const { str, expected } of jsTestStrings) { expect(JS_EXTENSIONS_PATTERN.test(str)).toBe(expected); @@ -39,8 +50,8 @@ test('CSS_EXTENSIONS_PATTERN', () => { } }); -test('ENTRY_EXTENSIONS_PATTERN', () => { - for (const { str, expected } of [...jsTestStrings, ...cssTestStrings]) { - expect(ENTRY_EXTENSIONS_PATTERN.test(str)).toBe(expected); +test('DTS_EXTENSIONS_PATTERN', () => { + for (const { str, expected } of dtsTestStrings) { + expect(DTS_EXTENSIONS_PATTERN.test(str)).toBe(expected); } }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 39f932bfa..ddf9684e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -459,9 +459,7 @@ importers: tests/integration/alias: {} - tests/integration/asset/limit: {} - - tests/integration/asset/name: + tests/integration/asset/hash: dependencies: react: specifier: ^19.0.0 @@ -471,6 +469,8 @@ importers: specifier: ^1.1.0 version: 1.1.0(@rsbuild/core@1.2.0-beta.0) + tests/integration/asset/limit: {} + tests/integration/asset/path: {} tests/integration/asset/public-path: {} diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts index ff618c545..ad9f8ad05 100644 --- a/tests/e2e/react-component/index.pw.test.ts +++ b/tests/e2e/react-component/index.pw.test.ts @@ -40,7 +40,15 @@ async function assetShouldWork(page: Page) { assert(h1El); expect(h1El).toHaveCSS('background', /static\/svg\/logo/); - // TODO: asset in js + // asset by import url from './assets/logo.svg' + const imgEls = await page.$$('.counter-button>img'); + expect(imgEls).toHaveLength(2); + const srcList = await Promise.all( + imgEls.map((imgEl) => imgEl.getAttribute('src')), + ); + for (const src of srcList) { + expect(src).toMatch(/static\/svg\/logo/); + } } test('should render example "react-component-bundle" successfully', async ({ diff --git a/tests/integration/asset/__snapshots__/index.test.ts.snap b/tests/integration/asset/__snapshots__/index.test.ts.snap index 50129058c..60bef9651 100644 --- a/tests/integration/asset/__snapshots__/index.test.ts.snap +++ b/tests/integration/asset/__snapshots__/index.test.ts.snap @@ -26,13 +26,7 @@ const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_r }); const logoreact = SvgLogo; console.log(logoreact); -" -`; - -exports[`use svgr 2`] = ` -"import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime"; -import "react"; -const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", { +const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 841.9 595.3", ...props, @@ -53,63 +47,106 @@ const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_r ] }) }); -const logoreact = SvgLogo; -console.log(logoreact); +import logo from './static/svg/logo.svg'; +console.log(logo_SvgLogo); +console.log(logo); " `; -exports[`use svgr 3`] = ` -"import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime"; -import "react"; -const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", { +exports[`use svgr 2`] = ` +""use strict"; +var __webpack_exports__ = {}; +const jsx_runtime_namespaceObject = require("react/jsx-runtime"); +require("react"); +const SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 841.9 595.3", ...props, - children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("g", { + children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", { fill: "#61DAFB", children: [ - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { + /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", { d: "M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3m-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9m-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9m32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1M421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32m-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24q7.05 12 14.4 23.4M420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32m-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9m-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2M310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7m237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1m38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6M320.8 78.4" }), - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", { + /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", { cx: 420.9, cy: 296.5, r: 45.7 }), - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { + /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", { d: "M520.5 78.1" }) ] }) }); -console.log(SvgLogo); -" -`; - -exports[`use svgr 4`] = ` -"import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime"; -import "react"; -const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", { +const logoreact = SvgLogo; +console.log(logoreact); +const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 841.9 595.3", ...props, - children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("g", { + children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", { fill: "#61DAFB", children: [ - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { + /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", { d: "M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3m-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9m-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9m32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1M421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32m-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24q7.05 12 14.4 23.4M420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32m-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9m-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2M310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7m237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1m38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6M320.8 78.4" }), - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", { + /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", { cx: 420.9, cy: 296.5, r: 45.7 }), - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { + /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", { d: "M520.5 78.1" }) ] }) }); -console.log(SvgLogo); +const logo = require('./static/svg/logo.svg'); +console.log(logo_SvgLogo); +console.log(logo); +var __webpack_export_target__ = exports; +for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__]; +if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', { + value: true +}); +" +`; + +exports[`use svgr 3`] = ` +"import * as __WEBPACK_EXTERNAL_MODULE__assets_logo_js_450929b7__ from "./assets/logo.js"; +console.log(__WEBPACK_EXTERNAL_MODULE__assets_logo_js_450929b7__.ReactComponent); +" +`; + +exports[`use svgr 4`] = ` +"import * as __WEBPACK_EXTERNAL_MODULE__assets_logo_js_450929b7__ from "./assets/logo.js"; +console.log(__WEBPACK_EXTERNAL_MODULE__assets_logo_js_450929b7__.ReactComponent); +" +`; + +exports[`use svgr 5`] = ` +""use strict"; +var __webpack_exports__ = {}; +const logo_cjs_namespaceObject = require("./assets/logo.cjs"); +console.log(logo_cjs_namespaceObject.ReactComponent); +var __webpack_export_target__ = exports; +for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__]; +if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', { + value: true +}); +" +`; + +exports[`use svgr 6`] = ` +""use strict"; +var __webpack_exports__ = {}; +const logo_cjs_namespaceObject = require("./assets/logo.cjs"); +console.log(logo_cjs_namespaceObject.ReactComponent); +var __webpack_export_target__ = exports; +for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__]; +if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', { + value: true +}); " `; diff --git a/tests/integration/asset/name/package.json b/tests/integration/asset/hash/package.json similarity index 100% rename from tests/integration/asset/name/package.json rename to tests/integration/asset/hash/package.json diff --git a/tests/integration/asset/name/rslib.config.ts b/tests/integration/asset/hash/rslib.config.ts similarity index 51% rename from tests/integration/asset/name/rslib.config.ts rename to tests/integration/asset/hash/rslib.config.ts index 0a70ba02e..c09405e8b 100644 --- a/tests/integration/asset/name/rslib.config.ts +++ b/tests/integration/asset/hash/rslib.config.ts @@ -1,9 +1,11 @@ import { pluginReact } from '@rsbuild/plugin-react'; import { defineConfig } from '@rslib/core'; -import { generateBundleEsmConfig } from 'test-helper'; +import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper'; export default defineConfig({ lib: [ + // 0. bundle default + // esm generateBundleEsmConfig({ output: { distPath: { @@ -14,6 +16,19 @@ export default defineConfig({ }, }, }), + // cjs + generateBundleCjsConfig({ + output: { + distPath: { + root: './dist/cjs/bundle', + }, + filename: { + image: '[name].[contenthash:8][ext]', + }, + }, + }), + // 1. bundleless default + // esm generateBundleEsmConfig({ bundle: false, output: { @@ -25,12 +40,19 @@ export default defineConfig({ }, }, }), + // cjs + generateBundleCjsConfig({ + bundle: false, + output: { + distPath: { + root: './dist/cjs/bundleless', + }, + filename: { + image: '[name].[contenthash:16][ext]', + }, + }, + }), ], - source: { - entry: { - index: './src/index.jsx', - }, - }, output: { target: 'web', }, diff --git a/tests/integration/asset/hash/src/assets/image.png b/tests/integration/asset/hash/src/assets/image.png new file mode 100644 index 000000000..a53ecc092 Binary files /dev/null and b/tests/integration/asset/hash/src/assets/image.png differ diff --git a/tests/integration/asset/name/src/index.jsx b/tests/integration/asset/hash/src/index.jsx similarity index 56% rename from tests/integration/asset/name/src/index.jsx rename to tests/integration/asset/hash/src/index.jsx index ce7aaaa9d..7caafe9ab 100644 --- a/tests/integration/asset/name/src/index.jsx +++ b/tests/integration/asset/hash/src/index.jsx @@ -1,4 +1,4 @@ -import a from '../../../../assets/image.png'; +import a from './assets/image.png'; export default () => { return ; diff --git a/tests/integration/asset/index.test.ts b/tests/integration/asset/index.test.ts index 6bc313b2b..21e0e0847 100644 --- a/tests/integration/asset/index.test.ts +++ b/tests/integration/asset/index.test.ts @@ -1,90 +1,185 @@ import { join } from 'node:path'; -import { buildAndGetResults } from 'test-helper'; +import { buildAndGetResults, queryContent } from 'test-helper'; import { expect, test } from 'vitest'; test('set the size threshold to inline static assets', async () => { const fixturePath = join(__dirname, 'limit'); const { contents } = await buildAndGetResults({ fixturePath }); - // inline when bundle - expect(Object.values(contents.esm0!)[0]).toContain( - 'const logo_namespaceObject = "data:image/svg+xml;base64', + // 0. bundle default + // esm + const { content: indexJs0 } = queryContent(contents.esm0!, /index\.js/); + expect(indexJs0).toContain( + "import logo_namespaceObject from './static/svg/logo.svg';", ); - - // external when bundle - expect(Object.values(contents.esm1!)[0]).toContain( - 'const logo_namespaceObject = __webpack_require__.p + "static/svg/logo.svg";', + // cjs + const { content: indexCjs0 } = queryContent(contents.cjs0!, /index\.cjs/); + expect(indexCjs0).toContain( + "const logo_namespaceObject = require('./static/svg/logo.svg');", ); - // inline bundleless - expect(Object.values(contents.esm2!)[0]).toContain( + // 1. bundle inline + // esm + const { content: indexJs1 } = queryContent(contents.esm1!, /index\.js/); + expect(indexJs1).toContain( + 'const logo_namespaceObject = "data:image/svg+xml;base64', + ); + // cjs + const { content: indexCjs1 } = queryContent(contents.cjs1!, /index\.cjs/); + expect(indexCjs1).toContain( 'const logo_namespaceObject = "data:image/svg+xml;base64', ); - // external bundleless - expect(Object.values(contents.esm3!)[0]).toContain( - 'const logo_namespaceObject = __webpack_require__.p + "static/svg/logo.svg";', + // 2. bundleless esm default + // esm + const { content: indexJs2 } = queryContent(contents.esm2!, /index\.js/); + const { content: logoJs2 } = queryContent(contents.esm2!, /assets\/logo\.js/); + expect(indexJs2).toMatchInlineSnapshot(` + "import * as __WEBPACK_EXTERNAL_MODULE__assets_logo_js_450929b7__ from "./assets/logo.js"; + const src_rslib_entry_ = __WEBPACK_EXTERNAL_MODULE__assets_logo_js_450929b7__["default"]; + export { src_rslib_entry_ as default }; + " + `); + expect(logoJs2).toMatchInlineSnapshot(` + "import __rslib_asset__ from '../static/svg/logo.svg'; + export default __rslib_asset__; + " + `); + // cjs + const { content: indexCjs2 } = queryContent(contents.cjs2!, /index\.cjs/); + const { content: logoCjs2 } = queryContent( + contents.cjs2!, + /assets\/logo\.cjs/, + ); + expect(indexCjs2).toContain( + 'const logo_cjs_namespaceObject = require("./assets/logo.cjs");', ); + expect(logoCjs2).toMatchInlineSnapshot(` + "module.exports = require('../static/svg/logo.svg'); + " + `); }); -test('set the assets name', async () => { - const fixturePath = join(__dirname, 'name'); +test('set the assets filename with hash', async () => { + const fixturePath = join(__dirname, 'hash'); const { contents } = await buildAndGetResults({ fixturePath }); - - // bundle - expect(Object.values(contents.esm0!)[0]).toContain( - 'const image_namespaceObject = __webpack_require__.p + "static/image/image.c74653c1.png";', + // 0. bundle default + // esm + const { content: indexJs0 } = queryContent(contents.esm0!, /index\.js/); + expect(indexJs0).toContain( + "import image_namespaceObject from './static/image/image.c74653c1.png';", + ); + // cjs + const { content: indexCjs0 } = queryContent(contents.cjs0!, /index\.cjs/); + expect(indexCjs0).toContain( + "const image_namespaceObject = require('./static/image/image.c74653c1.png');", ); - // bundleless - expect(Object.values(contents.esm1!)[0]).toContain( - 'const image_namespaceObject = __webpack_require__.p + "static/image/image.c74653c1712618b1.png";', + // 1. bundleless default + // esm + const { content: imageJs1 } = queryContent( + contents.esm1!, + /assets\/image\.js/, + ); + expect(imageJs1).toMatchInlineSnapshot(` + "import __rslib_asset__ from '../static/image/image.c74653c1712618b1.png'; + export default __rslib_asset__; + " + `); + // cjs + const { content: imageCjs1 } = queryContent( + contents.cjs1!, + /assets\/image\.cjs/, ); + expect(imageCjs1).toMatchInlineSnapshot(` + "module.exports = require('../static/image/image.c74653c1712618b1.png'); + " + `); }); test('set the assets output path', async () => { const fixturePath = join(__dirname, 'path'); const { contents } = await buildAndGetResults({ fixturePath }); - - // bundle - expect(Object.values(contents.esm0!)[0]).toContain( - 'const image_namespaceObject = __webpack_require__.p + "assets/bundle/image.png";', + // 0. bundle default + // esm + const { content: indexJs0 } = queryContent(contents.esm0!, /index\.js/); + expect(indexJs0).toContain( + "import image_namespaceObject from './assets/bundle/image.png';", + ); + // cjs + const { content: indexCjs0 } = queryContent(contents.cjs0!, /index\.cjs/); + expect(indexCjs0).toContain( + "const image_namespaceObject = require('./assets/bundle/image.png');", ); - // bundleless - expect(Object.values(contents.esm1!)[0]).toContain( - 'const image_namespaceObject = __webpack_require__.p + "assets/bundleless/image.png";', + // 1. bundleless default + // esm + const { content: imageJs1 } = queryContent( + contents.esm1!, + /assets\/image\.js/, ); + expect(imageJs1).toMatchInlineSnapshot(` + "import __rslib_asset__ from '../assets/bundleless/image.png'; + export default __rslib_asset__; + " + `); + // cjs + const { content: imageCjs1 } = queryContent( + contents.cjs1!, + /assets\/image\.cjs/, + ); + expect(imageCjs1).toMatchInlineSnapshot(` + "module.exports = require('../assets/bundleless/image.png'); + " + `); }); test('set the assets public path', async () => { const fixturePath = join(__dirname, 'public-path'); const { contents } = await buildAndGetResults({ fixturePath }); + // umd should preserve '__webpack_require__.p' + const { content: indexUmdJs } = queryContent(contents.umd!, /index\.js/); - // bundle - expect(Object.values(contents.esm0!)[0]).toContain( - '__webpack_require__.p = "/public/path/bundle/";', - ); - - // bundleless - expect(Object.values(contents.esm1!)[0]).toContain( + expect(indexUmdJs).toContain( '__webpack_require__.p = "/public/path/bundleless/";', ); + expect(indexUmdJs).toContain( + 'const image_namespaceObject = __webpack_require__.p + "static/image/image.png";', + ); }); test('use svgr', async () => { const fixturePath = join(__dirname, 'svgr'); const { contents } = await buildAndGetResults({ fixturePath }); - // bundle -- default export with react query - expect(Object.values(contents.esm0!)[0]).toMatchSnapshot(); - - // bundleless -- default export with react query - expect(Object.values(contents.esm1!)[0]).toMatchSnapshot(); - - // bundle -- named export - expect(Object.values(contents.esm2!)[0]).toMatchSnapshot(); + // 0. bundle + // esm + const { content: indexJs } = queryContent(contents.esm0!, /index\.js/); + expect(indexJs).matchSnapshot(); + // cjs + const { content: indexCjs } = queryContent(contents.cjs0!, /index\.cjs/); + expect(indexCjs).matchSnapshot(); + + // 1. bundleless + const { content: namedImportJs } = queryContent( + contents.esm1!, + /namedImport\.js/, + ); + expect(namedImportJs).toMatchSnapshot(); + const { content: defaultImportJs } = queryContent( + contents.esm1!, + /namedImport\.js/, + ); + expect(defaultImportJs).toMatchSnapshot(); - // bundleless -- named export - expect(Object.values(contents.esm3!)[0]).toMatchSnapshot(); + const { content: namedImportCjs } = queryContent( + contents.cjs1!, + /namedImport\.cjs/, + ); + expect(namedImportCjs).toMatchSnapshot(); + const { content: defaultImportCjs } = queryContent( + contents.cjs1!, + /namedImport\.cjs/, + ); + expect(defaultImportCjs).toMatchSnapshot(); }); diff --git a/tests/integration/asset/limit/rslib.config.ts b/tests/integration/asset/limit/rslib.config.ts index f472330cf..74acb079d 100644 --- a/tests/integration/asset/limit/rslib.config.ts +++ b/tests/integration/asset/limit/rslib.config.ts @@ -1,50 +1,82 @@ import { defineConfig } from '@rslib/core'; -import { generateBundleEsmConfig } from 'test-helper'; +import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper'; export default defineConfig({ lib: [ + // 0. bundle default + // esm generateBundleEsmConfig({ output: { distPath: { - root: './dist/esm/inline', + root: './dist/esm/bundle-default', }, - dataUriLimit: { - svg: 4096, + }, + }), + // cjs + generateBundleCjsConfig({ + output: { + distPath: { + root: './dist/cjs/bundle-default', }, }, }), + // 1. bundle inline + // esm generateBundleEsmConfig({ output: { distPath: { - root: './dist/esm/external', + root: './dist/esm/bundle-inline', + }, + dataUriLimit: { + svg: 4096, }, }, }), - generateBundleEsmConfig({ - bundle: false, + // cjs + generateBundleCjsConfig({ output: { distPath: { - root: './dist/esm/inline-bundleless', + root: './dist/cjs/bundle-inline', }, dataUriLimit: { svg: 4096, }, }, }), + // 2. bundleless default + // esm generateBundleEsmConfig({ bundle: false, output: { distPath: { - root: './dist/esm/external-bundleless', + root: './dist/esm/bundleless-default', }, }, }), + // cjs + generateBundleCjsConfig({ + bundle: false, + output: { + distPath: { + root: './dist/cjs/bundleless-default', + }, + }, + }), + + // TODO: inline in bundleless, modern module has no this feature, so pending + // 3. bundleless esm inline + // generateBundleEsmConfig({ + // bundle: false, + // output: { + // distPath: { + // root: './dist/esm/bundleless-inline', + // }, + // dataUriLimit: { + // svg: 4096, + // }, + // }, + // }), ], - source: { - entry: { - index: './src/index.js', - }, - }, output: { target: 'web', }, diff --git a/tests/integration/asset/limit/src/assets/logo.svg b/tests/integration/asset/limit/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/tests/integration/asset/limit/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tests/integration/asset/limit/src/index.js b/tests/integration/asset/limit/src/index.js index a6afa8809..3ec3a7c2a 100644 --- a/tests/integration/asset/limit/src/index.js +++ b/tests/integration/asset/limit/src/index.js @@ -1,3 +1,3 @@ -import logo from '../../../../assets/logo.svg'; +import logo from './assets/logo.svg'; export default logo; diff --git a/tests/integration/asset/path/rslib.config.ts b/tests/integration/asset/path/rslib.config.ts index 5881be935..463609d91 100644 --- a/tests/integration/asset/path/rslib.config.ts +++ b/tests/integration/asset/path/rslib.config.ts @@ -1,8 +1,10 @@ import { defineConfig } from '@rslib/core'; -import { generateBundleEsmConfig } from 'test-helper'; +import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper'; export default defineConfig({ lib: [ + // 0. bundle + // esm generateBundleEsmConfig({ output: { distPath: { @@ -11,6 +13,16 @@ export default defineConfig({ }, }, }), + generateBundleCjsConfig({ + output: { + distPath: { + root: './dist/esm/bundle', + image: 'assets/bundle', + }, + }, + }), + // 1. bundleless + // esm generateBundleEsmConfig({ bundle: false, output: { @@ -20,12 +32,16 @@ export default defineConfig({ }, }, }), + generateBundleCjsConfig({ + bundle: false, + output: { + distPath: { + root: './dist/esm/bundleless', + image: 'assets/bundleless', + }, + }, + }), ], - source: { - entry: { - index: './src/index.js', - }, - }, output: { target: 'web', }, diff --git a/tests/integration/asset/path/src/assets/image.png b/tests/integration/asset/path/src/assets/image.png new file mode 100644 index 000000000..a53ecc092 Binary files /dev/null and b/tests/integration/asset/path/src/assets/image.png differ diff --git a/tests/integration/asset/path/src/index.js b/tests/integration/asset/path/src/index.js index 63613bce5..b6e29ee81 100644 --- a/tests/integration/asset/path/src/index.js +++ b/tests/integration/asset/path/src/index.js @@ -1,3 +1,3 @@ -import a from '../../../../assets/image.png'; +import a from './assets/image.png'; export default a; diff --git a/tests/integration/asset/public-path/rslib.config.ts b/tests/integration/asset/public-path/rslib.config.ts index cb025d05a..88dcc69a9 100644 --- a/tests/integration/asset/public-path/rslib.config.ts +++ b/tests/integration/asset/public-path/rslib.config.ts @@ -1,29 +1,11 @@ import { defineConfig } from '@rslib/core'; -import { generateBundleEsmConfig } from 'test-helper'; +import { generateBundleUmdConfig } from 'test-helper'; export default defineConfig({ lib: [ - generateBundleEsmConfig({ + generateBundleUmdConfig({ output: { - distPath: { - root: './dist/esm/bundle', - }, - assetPrefix: '/public/path/bundle', - dataUriLimit: { - svg: 0, - }, - }, - }), - generateBundleEsmConfig({ - bundle: false, - output: { - distPath: { - root: './dist/esm/bundleless', - }, assetPrefix: '/public/path/bundleless', - dataUriLimit: { - svg: 0, - }, }, }), ], diff --git a/tests/integration/asset/public-path/src/assets/image.png b/tests/integration/asset/public-path/src/assets/image.png new file mode 100644 index 000000000..a53ecc092 Binary files /dev/null and b/tests/integration/asset/public-path/src/assets/image.png differ diff --git a/tests/integration/asset/public-path/src/index.js b/tests/integration/asset/public-path/src/index.js index a6afa8809..b17f08316 100644 --- a/tests/integration/asset/public-path/src/index.js +++ b/tests/integration/asset/public-path/src/index.js @@ -1,3 +1,3 @@ -import logo from '../../../../assets/logo.svg'; +import logo from './assets/image.png'; export default logo; diff --git a/tests/integration/asset/svgr/rslib.config.ts b/tests/integration/asset/svgr/rslib.config.ts index 6318ab07a..987972fca 100644 --- a/tests/integration/asset/svgr/rslib.config.ts +++ b/tests/integration/asset/svgr/rslib.config.ts @@ -1,73 +1,63 @@ import { pluginReact } from '@rsbuild/plugin-react'; import { pluginSvgr } from '@rsbuild/plugin-svgr'; import { defineConfig } from '@rslib/core'; -import { generateBundleEsmConfig } from 'test-helper'; +import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper'; export default defineConfig({ lib: [ + // 0. bundle + // esm generateBundleEsmConfig({ - source: { - entry: { - index: './src/index.js', - }, - }, output: { distPath: { root: './dist/esm/bundle-default', }, }, - plugins: [pluginSvgr()], + plugins: [ + pluginSvgr({ + mixedImport: true, + }), + ], }), - generateBundleEsmConfig({ - source: { - entry: { - index: './src/index.js', - }, - }, - bundle: false, + // cjs + generateBundleCjsConfig({ output: { distPath: { - root: './dist/esm/bundleless-default', + root: './dist/cjs/bundle-default', }, }, - plugins: [pluginSvgr()], + plugins: [ + pluginSvgr({ + mixedImport: true, + }), + ], }), + // 1. bundleless + // esm generateBundleEsmConfig({ - source: { - entry: { - index: './src/namedExport.js', - }, - }, + bundle: false, output: { distPath: { - root: './dist/esm/bundle-named', + root: './dist/esm/bundleless-default', }, }, plugins: [ pluginSvgr({ - svgrOptions: { - exportType: 'named', - }, + mixedImport: true, }), ], }), - generateBundleEsmConfig({ - source: { - entry: { - index: './src/namedExport.js', - }, - }, + // cjs + generateBundleCjsConfig({ bundle: false, output: { distPath: { - root: './dist/esm/bundleless-named', + root: './dist/cjs/bundleless-default', }, }, plugins: [ pluginSvgr({ - svgrOptions: { - exportType: 'named', - }, + mixedImport: true, }), ], }), diff --git a/tests/integration/asset/svgr/src/assets/logo.svg b/tests/integration/asset/svgr/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/tests/integration/asset/svgr/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tests/integration/asset/svgr/src/defaultImport.js b/tests/integration/asset/svgr/src/defaultImport.js new file mode 100644 index 000000000..abc3ec20b --- /dev/null +++ b/tests/integration/asset/svgr/src/defaultImport.js @@ -0,0 +1,3 @@ +import svgUrl from './assets/logo.svg'; + +console.log(svgUrl); diff --git a/tests/integration/asset/svgr/src/index.js b/tests/integration/asset/svgr/src/index.js index 0b3a78b3c..080d304bc 100644 --- a/tests/integration/asset/svgr/src/index.js +++ b/tests/integration/asset/svgr/src/index.js @@ -1,3 +1,3 @@ -import logo from '../../../../assets/logo.svg?react'; - -console.log(logo); +import './queryImport'; +import './namedImport'; +import './defaultImport'; diff --git a/tests/integration/asset/svgr/src/namedExport.js b/tests/integration/asset/svgr/src/namedExport.js deleted file mode 100644 index 5ab1c97c9..000000000 --- a/tests/integration/asset/svgr/src/namedExport.js +++ /dev/null @@ -1,3 +0,0 @@ -import { ReactComponent } from '../../../../assets/logo.svg'; - -console.log(ReactComponent); diff --git a/tests/integration/asset/svgr/src/namedImport.js b/tests/integration/asset/svgr/src/namedImport.js new file mode 100644 index 000000000..d09b8a4c4 --- /dev/null +++ b/tests/integration/asset/svgr/src/namedImport.js @@ -0,0 +1,3 @@ +import { ReactComponent } from './assets/logo.svg'; + +console.log(ReactComponent); diff --git a/tests/integration/asset/svgr/src/queryImport.js b/tests/integration/asset/svgr/src/queryImport.js new file mode 100644 index 000000000..cda504316 --- /dev/null +++ b/tests/integration/asset/svgr/src/queryImport.js @@ -0,0 +1,3 @@ +import logo from './assets/logo.svg?react'; + +console.log(logo); diff --git a/tests/integration/bundle-false/__snapshots__/index.test.ts.snap b/tests/integration/bundle-false/__snapshots__/index.test.ts.snap index b9b52178a..abe261dda 100644 --- a/tests/integration/bundle-false/__snapshots__/index.test.ts.snap +++ b/tests/integration/bundle-false/__snapshots__/index.test.ts.snap @@ -1,95 +1,12 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`svgr in bundleless 1`] = ` -"import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime"; -import "react"; -const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", { - xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 841.9 595.3", - ...props, - children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("g", { - fill: "#61DAFB", - children: [ - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { - d: "M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3m-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9m-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9m32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1M421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32m-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24q7.05 12 14.4 23.4M420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32m-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9m-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2M310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7m237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1m38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6M320.8 78.4" - }), - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", { - cx: 420.9, - cy: 296.5, - r: 45.7 - }), - /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { - d: "M520.5 78.1" - }) - ] - }) - }); -const logoreact = SvgLogo; -const src_rslib_entry_ = logoreact; -export { src_rslib_entry_ as default }; +"import __rslib_asset__ from '../static/svg/logo.svg'; +export default __rslib_asset__; " `; exports[`svgr in bundleless 2`] = ` -""use strict"; -var __webpack_require__ = {}; -(()=>{ - __webpack_require__.d = function(exports1, definition) { - for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, { - enumerable: true, - get: definition[key] - }); - }; -})(); -(()=>{ - __webpack_require__.o = function(obj, prop) { - return Object.prototype.hasOwnProperty.call(obj, prop); - }; -})(); -(()=>{ - __webpack_require__.r = function(exports1) { - if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, { - value: 'Module' - }); - Object.defineProperty(exports1, '__esModule', { - value: true - }); - }; -})(); -var __webpack_exports__ = {}; -__webpack_require__.r(__webpack_exports__); -__webpack_require__.d(__webpack_exports__, { - default: ()=>src_rslib_entry_ -}); -const jsx_runtime_namespaceObject = require("react/jsx-runtime"); -require("react"); -const SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", { - xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 841.9 595.3", - ...props, - children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", { - fill: "#61DAFB", - children: [ - /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", { - d: "M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3m-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9m-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9m32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1M421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32m-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24q7.05 12 14.4 23.4M420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32m-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9m-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2M310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7m237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1m38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6M320.8 78.4" - }), - /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", { - cx: 420.9, - cy: 296.5, - r: 45.7 - }), - /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", { - d: "M520.5 78.1" - }) - ] - }) - }); -const logoreact = SvgLogo; -const src_rslib_entry_ = logoreact; -var __webpack_export_target__ = exports; -for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__]; -if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', { - value: true -}); +"module.exports = require('../static/svg/logo.svg'); " `; diff --git a/tests/integration/bundle-false/asset/rslib.config.ts b/tests/integration/bundle-false/asset/rslib.config.ts index 68e3b9d61..e9a72ab2e 100644 --- a/tests/integration/bundle-false/asset/rslib.config.ts +++ b/tests/integration/bundle-false/asset/rslib.config.ts @@ -10,15 +10,4 @@ export default defineConfig({ bundle: false, }), ], - // do not inline svg - output: { - dataUriLimit: { - svg: 0, - }, - }, - source: { - entry: { - index: ['./src/**'], - }, - }, }); diff --git a/tests/integration/bundle-false/asset/src/assets/image.png b/tests/integration/bundle-false/asset/src/assets/image.png new file mode 100644 index 000000000..a53ecc092 Binary files /dev/null and b/tests/integration/bundle-false/asset/src/assets/image.png differ diff --git a/tests/integration/bundle-false/asset/src/assets/logo.svg b/tests/integration/bundle-false/asset/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/tests/integration/bundle-false/asset/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tests/integration/bundle-false/asset/src/index.js b/tests/integration/bundle-false/asset/src/index.js index a5d00849e..fcd03c098 100644 --- a/tests/integration/bundle-false/asset/src/index.js +++ b/tests/integration/bundle-false/asset/src/index.js @@ -1,5 +1,5 @@ -import image from '../../../../assets/image.png'; -import logoURL from '../../../../assets/logo.svg'; +import image from './assets/image.png'; +import logoURL from './assets/logo.svg'; console.log(logoURL); console.log(image); diff --git a/tests/integration/bundle-false/index.test.ts b/tests/integration/bundle-false/index.test.ts index c3c9b0d9c..61d489cfe 100644 --- a/tests/integration/bundle-false/index.test.ts +++ b/tests/integration/bundle-false/index.test.ts @@ -132,15 +132,24 @@ test('asset in bundleless', async () => { const fixturePath = join(__dirname, 'asset'); const { contents } = await buildAndGetResults({ fixturePath }); - const assets = [ - 'const image_namespaceObject = __webpack_require__.p + "static/image/image.png";', - 'const logo_namespaceObject = __webpack_require__.p + "static/svg/logo.svg";', - ]; - - for (const asset of assets) { - expect(Object.values(contents.esm)[0]).toContain(asset); - expect(Object.values(contents.cjs)[0]).toContain(asset); - } + expect(Object.values(contents.esm)[0]).toMatchInlineSnapshot(` + "import __rslib_asset__ from '../static/image/image.png'; + export default __rslib_asset__; + " + `); + expect(Object.values(contents.esm)[1]).toMatchInlineSnapshot(` + "import __rslib_asset__ from '../static/svg/logo.svg'; + export default __rslib_asset__; + " + `); + expect(Object.values(contents.cjs)[0]).toMatchInlineSnapshot(` + "module.exports = require('../static/image/image.png'); + " + `); + expect(Object.values(contents.cjs)[1]).toMatchInlineSnapshot(` + "module.exports = require('../static/svg/logo.svg'); + " + `); }); test('svgr in bundleless', async () => { diff --git a/tests/integration/bundle-false/svgr/src/assets/logo.svg b/tests/integration/bundle-false/svgr/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/tests/integration/bundle-false/svgr/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tests/integration/style/sass/bundle-false/rslib.config.ts b/tests/integration/style/sass/bundle-false/rslib.config.ts index 7ff820973..056271bab 100644 --- a/tests/integration/style/sass/bundle-false/rslib.config.ts +++ b/tests/integration/style/sass/bundle-false/rslib.config.ts @@ -24,6 +24,5 @@ export default defineConfig({ ], output: { target: 'web', - assetPrefix: 'auto', }, }); diff --git a/tests/integration/style/sass/bundle/rslib.config.ts b/tests/integration/style/sass/bundle/rslib.config.ts index 8d05f9f82..ebe77cc6a 100644 --- a/tests/integration/style/sass/bundle/rslib.config.ts +++ b/tests/integration/style/sass/bundle/rslib.config.ts @@ -18,6 +18,5 @@ export default defineConfig({ ], output: { target: 'web', - assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, });