chore: update

Author: SoonIter

examples/react-component-bundle-false/rslib.config.ts

@@ -5,7 +5,10 @@ import { type LibConfig, defineConfig } from '@rslib/core';
 export default defineConfig({
   source: {
     entry: {
-      index: ['./src/**', '!./src/env.d.ts'],
+      index: [
+        './src/**', 
+        '!./src/env.d.ts'
+      ],
     },
   },
   lib: [

examples/react-component-bundle-false/src/components/CounterButton/index.module.scss

@@ -1,3 +1,3 @@
 .button {
-  background: yellow;
+  background: url('../../assets/logo.svg') no-repeat;
 }

examples/react-component-bundle-false/src/components/CounterButton/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './index.module.scss';
+import logo from '../../assets/logo.svg'
 
 interface CounterButtonProps {
   onClick: () => void;
@@ -11,6 +12,7 @@ export const CounterButton: React.FC<CounterButtonProps> = ({
   label,
 }) => (
   <button type="button" className={styles.button} onClick={onClick}>
+    <img src={logo} alt='react'/>
     {label}
   </button>
 );

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;
+}

examples/react-component-bundle/src/components/CounterButton/index.module.scss

@@ -1,3 +1,3 @@
 .button {
-  background: yellow;
+  background: url('../../assets/logo.svg') no-repeat;
 }

examples/react-component-bundle/src/components/CounterButton/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './index.module.scss';
+import logo from '../../assets/logo.svg'
 
 interface CounterButtonProps {
   onClick: () => void;
@@ -11,6 +12,7 @@ export const CounterButton: React.FC<CounterButtonProps> = ({
   label,
 }) => (
   <button type="button" className={styles.button} onClick={onClick}>
+    <img src={logo} alt='react'/>
     {label}
   </button>
 );

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;
+}

package.json

@@ -64,7 +64,8 @@
   },
   "pnpm": {
     "overrides": {
-      "zx>@types/node": "-"
+      "zx>@types/node": "-",
+      "@rspack/core": "/Users/bytedance/Documents/codes/rspack/packages/rspack"
     }
   }
 }

packages/core/src/asset/LibAssetExtractPlugin.ts

@@ -0,0 +1,74 @@
+import { type Rspack, rspack } from '@rsbuild/core';
+import { getUndoPath } from '../css/utils';
+
+type Options = {
+}
+/**
+ * these codes is written according to
+ * https://github.com/web-infra-dev/rspack/blob/61f0cd2b4e313445a9d3329ca71240e99edfb352/crates/rspack_plugin_asset/src/lib.rs#L531
+ */
+const pattern: RegExp = /__webpack_require__\.p\s\+\s["'](.+)["']/g;
+function extractAssetFilenames (content: string): string[] {
+  console.log([...content.matchAll(pattern)])
+  return [...content.matchAll(pattern)].map(i => {
+    return i?.[1]
+  }).filter(Boolean) as string[];
+}
+
+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}');`;
+
+const pluginName = 'LIB_ASSET_EXTRACT_PLUGIN';
+
+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),
+      );
+      for (const name of chunkAsset) {
+        const isEsmFormat = compilation.options.output.module;
+        const undoPath = getUndoPath(
+          name,
+          compilation.outputOptions.path!,
+          true,
+        );
+        compilation.updateAsset(name, (old) => {
+          const oldSource = old.source().toString();
+          const assetFilenames = extractAssetFilenames(oldSource);
+          
+          if (assetFilenames.length === 1) {
+            const assetFilename = assetFilenames[0];
+            let newSource: string = '';
+            const url = `${undoPath}${assetFilename}`;
+            
+            if(isEsmFormat) {
+              newSource = esmSingleFileTemplate(url);
+            } else {
+              newSource = cjsSingleFileTemplate(url);
+            }
+            return new rspack.sources.RawSource(newSource);
+          } else {
+            const newSource = new rspack.sources.ReplaceSource(old);
+            assetFilenames.forEach(() => {
+            })
+            return newSource;
+          } 
+          
+        });
+      }
+  })
+})}
+}
+export { LibAssetExtractPlugin};

packages/core/src/asset/assetConfig.ts

@@ -1,5 +1,6 @@
 import type { EnvironmentConfig } from '@rsbuild/core';
 import type { Format } from '../types';
+import { LibAssetExtractPlugin } from './LibAssetExtractPlugin';
 
 // TODO: asset config document
 export const composeAssetConfig = (
@@ -11,15 +12,27 @@ 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', // TODO: will turn on this with js support together in the future
+        },
+        tools: {
+          rspack: {
+            plugins: [new LibAssetExtractPlugin()]
+          
+          },
         },
       };
     }
-
+    // TODO: bundleless
     return {
       output: {
         dataUriLimit: 0, // default: no inline asset
-        // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future
+        assetPrefix: 'auto',
+      },
+      tools: {
+        rspack: {
+          plugins: [new LibAssetExtractPlugin()]
+        
+        },
       },
     };
   }