chore(examples): add css and asset in umd example (#972)

Author: Timeless0911

examples/react-component-umd/src/assets/logo.svg

@@ -1,4 +1,5 @@
-import React from 'react';
+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<CounterButtonProps> = ({
   onClick,
   label,
 }) => (
-  <button type="button" className={styles.button} onClick={onClick}>
+  <button
+    type="button"
+    className={`${styles.button} counter-button`}
+    onClick={onClick}
+  >
+    <img src={logo} alt="react" />
     {label}
   </button>
 );

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

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

examples/react-component-umd/src/index.scss

@@ -8,6 +8,7 @@ export const Counter: React.FC = () => {
 
   return (
     <div>
+      <h1 className="counter-title">React</h1>
       <h2 className="counter-text">Counter: {count}</h2>
       <CounterButton onClick={decrement} label="-" />
       <CounterButton onClick={increment} label="+" />

examples/react-component-umd/src/index.tsx

@@ -7,7 +7,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["DOM", "ESNext"],
     "moduleResolution": "node",
     "resolveJsonModule": true,

examples/react-component-umd/tsconfig.json

@@ -51,6 +51,23 @@ async function assetShouldWork(page: Page) {
   }
 }
 
+async function inlineAssetShouldWork(page: Page) {
+  // asset in css url('./logo.svg')
+  const h1El = page.locator('h1');
+  assert(h1El);
+  expect(h1El).toHaveCSS('background', /.*data:image\/svg\+xml;base64.*/);
+
+  // 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(/.*data:image\/svg\+xml;base64.*/);
+  }
+}
+
 test('should render example "react-component-bundle" successfully', async ({
   page,
 }) => {
@@ -90,6 +107,7 @@ test('should render example "react-component-umd" successfully', async ({
   );
   fs.mkdirSync(path.resolve(__dirname, './public/umd'), { recursive: true });
   fs.copyFileSync(umdPath, path.resolve(__dirname, './public/umd/index.js'));
+  fs.copyFileSync(umdPath, path.resolve(__dirname, './public/umd/index.css'));
 
   const rsbuild = await dev({
     cwd: __dirname,
@@ -98,5 +116,7 @@ test('should render example "react-component-umd" successfully', async ({
   });
 
   await counterCompShouldWork(page);
+  await styleShouldWork(page);
+  await inlineAssetShouldWork(page);
   await rsbuild.close();
 });

tests/e2e/react-component/index.pw.test.ts

@@ -44,6 +44,15 @@ export default defineConfig({
             head: true,
             append: true,
           },
+          {
+            tag: 'link',
+            attrs: {
+              href: '/umd/index.css',
+              rel: 'stylesheet',
+            },
+            head: true,
+            append: true,
+          },
         ],
       },
       source: {
@@ -62,6 +71,10 @@ export default defineConfig({
             from: '../../../examples/react-component-umd/dist/umd/index.js',
             to: 'umd/index.js',
           },
+          {
+            from: '../../../examples/react-component-umd/dist/umd/index.css',
+            to: 'umd/index.css',
+          },
           {
             from: 'node_modules/react-18/umd/react.development.js',
             to: 'umd/react.development.js',