feat: support asset module

[SoonIter]

Summary

there are some cases to show the rslib asset/module artifect after this change

1. asset/resource

input

└── src
    ├── assets
    │   └── logo.svg   // <--
    └── index.tsx

// index.tsx
import foo from './assets/logo.svg';
console.log(foo);

output

./dist
└── esm
    ├── assets
    │   └── logo.mjs     // <-- default reexport from svg
    ├── static/svg
    │   └── logo.svg     // <--
    ├── index.d.ts
    └── index.mjs

// dist/esm/index.mjs
import foo from './assets/logo.mjs';
console.log(foo);

// dist/esm/assets/logo.mjs
import url from '../static/svg/logo.svg';
export { url as default };

2. asset/inline

decided by output.dataUriLimit

input

└── src
    ├── assets
    │   └── logo.svg   // <--
    └── index.tsx

// index.tsx
import foo from './assets/logo.svg';
console.log(foo);

output

./dist
└── esm
    ├── assets
    │   └── logo.mjs    // <-- default export a "data" url string
    ├── index.d.ts
    └── index.mjs

// dist/esm/index.mjs
import foo from './assets/logo.mjs';
console.log(foo);

// dist/esm/assets/logo.mjs
const url = "data:image/svg+xml;base64,foo"
export { url as default };

3. asset/source

input

└── src
    ├── assets
    │   └── logo.svg   // <--
    └── index.tsx

// index.tsx
import foo from './assets/logo.svg';
console.log(foo);

output

./dist
└── esm
    ├── assets
    │   └── logo.mjs    // <-- default export a source txt string
    ├── index.d.ts
    └── index.mjs

// dist/esm/index.mjs
import foo from './assets/logo.mjs';
console.log(foo);

// dist/esm/assets/logo.mjs
const url = "source text"
export { url as default };

4. svgr

queryImport is only supported in bundle, not supported in bundleless

we recommend that bundleless uses mixedImport

pluginSvgr({
	mixedImport: true
});

input

└── src
    ├── assets
    │   └── logo.svg   // <--
    └── index.tsx

// index.tsx
import foo from './assets/logo.svg';
console.log(foo);

output

./dist
└── esm
    ├── assets
    │   └── logo.mjs     // <-- both url and Svgr ReactComponent
    ├── index.d.ts
    └── index.mjs

// dist/esm/index.mjs
import foo from './assets/logo.mjs';
console.log(foo);

// dist/esm/assets/logo.mjs
import __rslib_svgr_url__0__ from "../static/svg/logo.svg";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
const SvgLogo = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 841.9 }) });
var logo_default = SvgLogo;
const logo_rslib_entry_ = __rslib_svgr_url__0__;
export { SvgLogo as ReactComponent, logo_rslib_entry_ as default };

5. publicPath

you can switch to old behavior (contain __webpack_require__.p) by set output.assetPrefix

default value of output.assetPrefix is "auto"

Related Links

close #570

associated with https://github.com/web-infra-dev/rspack/pull/8724/files#

close #219

close #230

close #231

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).

[netlify]

✅ Deploy Preview for rslib ready!

Name	Link
🔨 Latest commit	c4b6dac
🔍 Latest deploy log	https://app.netlify.com/sites/rslib/deploys/6790c48db285fa0008d90c01
😎 Deploy Preview	https://deploy-preview-684--rslib.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.