From a9838d9cd07e92a82c672368dead7c2b3dfe5e8f Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Thu, 8 May 2025 20:26:46 +0800 Subject: [PATCH] chore(examples): add css and asset in umd example --- .../react-component-umd/src/assets/logo.svg | 7 +++++++ .../src/components/CounterButton/index.tsx | 10 ++++++++-- examples/react-component-umd/src/index.scss | 7 +++++++ examples/react-component-umd/src/index.tsx | 1 + examples/react-component-umd/tsconfig.json | 2 +- tests/e2e/react-component/index.pw.test.ts | 20 +++++++++++++++++++ tests/e2e/react-component/rsbuild.config.ts | 13 ++++++++++++ 7 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 examples/react-component-umd/src/assets/logo.svg diff --git a/examples/react-component-umd/src/assets/logo.svg b/examples/react-component-umd/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/examples/react-component-umd/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/react-component-umd/src/components/CounterButton/index.tsx b/examples/react-component-umd/src/components/CounterButton/index.tsx index 1b3260a4e..2638731c6 100644 --- a/examples/react-component-umd/src/components/CounterButton/index.tsx +++ b/examples/react-component-umd/src/components/CounterButton/index.tsx @@ -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 = ({ onClick, label, }) => ( - ); diff --git a/examples/react-component-umd/src/index.scss b/examples/react-component-umd/src/index.scss index 2e506a0ac..f4c82dce4 100644 --- a/examples/react-component-umd/src/index.scss +++ b/examples/react-component-umd/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-umd/src/index.tsx b/examples/react-component-umd/src/index.tsx index bd1f81c14..eb6493c95 100644 --- a/examples/react-component-umd/src/index.tsx +++ b/examples/react-component-umd/src/index.tsx @@ -8,6 +8,7 @@ export const Counter: React.FC = () => { return (
+

React

Counter: {count}

diff --git a/examples/react-component-umd/tsconfig.json b/examples/react-component-umd/tsconfig.json index 2142e121c..78ba7070a 100644 --- a/examples/react-component-umd/tsconfig.json +++ b/examples/react-component-umd/tsconfig.json @@ -7,7 +7,7 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "isolatedModules": true, - "jsx": "react", + "jsx": "react-jsx", "lib": ["DOM", "ESNext"], "moduleResolution": "node", "resolveJsonModule": true, diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts index ad9f8ad05..f419cf58c 100644 --- a/tests/e2e/react-component/index.pw.test.ts +++ b/tests/e2e/react-component/index.pw.test.ts @@ -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(); }); diff --git a/tests/e2e/react-component/rsbuild.config.ts b/tests/e2e/react-component/rsbuild.config.ts index 953dc4871..203fcecf5 100644 --- a/tests/e2e/react-component/rsbuild.config.ts +++ b/tests/e2e/react-component/rsbuild.config.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',