diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a0c5234ce..7e4bcf6b0 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -123,7 +123,7 @@ jobs: cache: 'pnpm' - name: Install Dependencies - run: pnpm install && cd ./tests && pnpx playwright install chromium + run: pnpm install && cd ./tests && pnpm playwright install chromium - name: Integration Test (Vitest) run: pnpm run test:integration @@ -158,7 +158,7 @@ jobs: cache: 'pnpm' - name: Install Dependencies - run: pnpm install && cd ./tests && npx playwright install + run: pnpm install && cd ./tests && npx playwright install chromium # only run benchmark in Ubuntu - name: Benchmarks (Vitest) diff --git a/examples/express-plugin/rslib.config.ts b/examples/express-plugin/rslib.config.ts index 5ef8af604..f781c663a 100644 --- a/examples/express-plugin/rslib.config.ts +++ b/examples/express-plugin/rslib.config.ts @@ -1,16 +1,10 @@ import { defineConfig } from '@rslib/core'; -const shared = { - dts: { - bundle: false, - }, -}; - export default defineConfig({ lib: [ { - ...shared, format: 'esm', + dts: true, output: { distPath: { root: './dist/esm', @@ -18,8 +12,8 @@ export default defineConfig({ }, }, { - ...shared, format: 'cjs', + dts: true, output: { distPath: { root: './dist/cjs', diff --git a/examples/module-federation/mf-react-component/rslib.config.ts b/examples/module-federation/mf-react-component/rslib.config.ts index 4dff69848..2f3b6e792 100644 --- a/examples/module-federation/mf-react-component/rslib.config.ts +++ b/examples/module-federation/mf-react-component/rslib.config.ts @@ -2,17 +2,11 @@ import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; import { pluginReact } from '@rsbuild/plugin-react'; import { defineConfig } from '@rslib/core'; -const shared = { - dts: { - bundle: false, - }, -}; - export default defineConfig({ lib: [ { - ...shared, format: 'esm', + dts: true, output: { distPath: { root: './dist/esm', @@ -20,8 +14,8 @@ export default defineConfig({ }, }, { - ...shared, format: 'cjs', + dts: true, output: { distPath: { root: './dist/cjs', @@ -29,8 +23,8 @@ export default defineConfig({ }, }, { - ...shared, format: 'mf', + dts: true, output: { distPath: { root: './dist/mf', diff --git a/examples/preact-component-bundle-false/README.md b/examples/preact-component-bundle-false/README.md new file mode 100644 index 000000000..7b79da051 --- /dev/null +++ b/examples/preact-component-bundle-false/README.md @@ -0,0 +1,3 @@ +# @examples/preact-component + +This example demonstrates how to use Rslib to build a simple Preact component. diff --git a/examples/preact-component-bundle-false/package.json b/examples/preact-component-bundle-false/package.json new file mode 100644 index 000000000..81f4b849c --- /dev/null +++ b/examples/preact-component-bundle-false/package.json @@ -0,0 +1,19 @@ +{ + "name": "@examples/preact-component-bundle-false", + "private": true, + "main": "./dist/cjs/index.js", + "module": "./dist/esm/index.mjs", + "types": "./dist/cjs/index.d.ts", + "scripts": { + "build": "rslib build" + }, + "devDependencies": { + "@rsbuild/plugin-preact": "^1.2.0", + "@rsbuild/plugin-sass": "^1.1.1", + "@rslib/core": "workspace:*", + "preact": "^10.24.3" + }, + "peerDependencies": { + "preact": "^10" + } +} diff --git a/examples/preact-component-bundle-false/rslib.config.ts b/examples/preact-component-bundle-false/rslib.config.ts new file mode 100644 index 000000000..89f6dd767 --- /dev/null +++ b/examples/preact-component-bundle-false/rslib.config.ts @@ -0,0 +1,37 @@ +import { pluginPreact } from '@rsbuild/plugin-preact'; +import { pluginSass } from '@rsbuild/plugin-sass'; +import { type LibConfig, defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**', '!./src/env.d.ts'], + }, + }, + lib: [ + { + bundle: false, + dts: true, + format: 'esm', + output: { + distPath: { + root: './dist/esm', + }, + }, + }, + { + bundle: false, + dts: true, + format: 'cjs', + output: { + distPath: { + root: './dist/cjs', + }, + }, + }, + ], + output: { + target: 'web', + }, + plugins: [pluginPreact(), pluginSass()], +}); diff --git a/examples/preact-component-bundle-false/src/components/CounterButton/index.module.scss b/examples/preact-component-bundle-false/src/components/CounterButton/index.module.scss new file mode 100644 index 000000000..19301eef2 --- /dev/null +++ b/examples/preact-component-bundle-false/src/components/CounterButton/index.module.scss @@ -0,0 +1,3 @@ +.button { + background: yellow; +} diff --git a/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx b/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx new file mode 100644 index 000000000..09f8b087a --- /dev/null +++ b/examples/preact-component-bundle-false/src/components/CounterButton/index.tsx @@ -0,0 +1,16 @@ +import type { FunctionComponent } from 'preact'; +import styles from './index.module.scss'; + +interface CounterButtonProps { + onClick: () => void; + label: string; +} + +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 new file mode 100644 index 000000000..0506fbcb4 --- /dev/null +++ b/examples/preact-component-bundle-false/src/env.d.ts @@ -0,0 +1,4 @@ +declare module '*.module.scss' { + const classes: { [key: string]: string }; + export default classes; +} diff --git a/examples/preact-component-bundle-false/src/index.scss b/examples/preact-component-bundle-false/src/index.scss new file mode 100644 index 000000000..2e506a0ac --- /dev/null +++ b/examples/preact-component-bundle-false/src/index.scss @@ -0,0 +1,3 @@ +.counter-text { + font-size: 50px; +} diff --git a/examples/preact-component-bundle-false/src/index.tsx b/examples/preact-component-bundle-false/src/index.tsx new file mode 100644 index 000000000..08aa464e8 --- /dev/null +++ b/examples/preact-component-bundle-false/src/index.tsx @@ -0,0 +1,16 @@ +import type { FunctionComponent } from 'preact'; +import { CounterButton } from './components/CounterButton/index'; +import { useCounter } from './useCounter'; +import './index.scss'; + +export const Counter: FunctionComponent = () => { + const { count, increment, decrement } = useCounter(); + + return ( +
+

Counter: {count}

+ + +
+ ); +}; diff --git a/examples/preact-component-bundle-false/src/useCounter.tsx b/examples/preact-component-bundle-false/src/useCounter.tsx new file mode 100644 index 000000000..a35e47008 --- /dev/null +++ b/examples/preact-component-bundle-false/src/useCounter.tsx @@ -0,0 +1,10 @@ +import { useState } from 'preact/hooks'; + +export const useCounter = (initialValue = 0) => { + const [count, setCount] = useState(initialValue); + + const increment = () => setCount((prev) => prev + 1); + const decrement = () => setCount((prev) => prev - 1); + + return { count, increment, decrement }; +}; diff --git a/examples/preact-component-bundle-false/tsconfig.json b/examples/preact-component-bundle-false/tsconfig.json new file mode 100644 index 000000000..28eed8b0f --- /dev/null +++ b/examples/preact-component-bundle-false/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "allowJs": true, + "baseUrl": ".", + "declaration": true, + "emitDeclarationOnly": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "jsx": "react-jsx", + "jsxImportSource": "preact", + "lib": ["DOM", "ESNext"], + "moduleResolution": "node", + "resolveJsonModule": true, + "rootDir": "src", + "skipLibCheck": true, + "strict": true + }, + "exclude": ["**/node_modules"], + "include": ["src"] +} diff --git a/examples/react-component-bundle-false/rslib.config.ts b/examples/react-component-bundle-false/rslib.config.ts index a5a3fccd3..c75c7acf3 100644 --- a/examples/react-component-bundle-false/rslib.config.ts +++ b/examples/react-component-bundle-false/rslib.config.ts @@ -2,13 +2,6 @@ import { pluginReact } from '@rsbuild/plugin-react'; import { pluginSass } from '@rsbuild/plugin-sass'; import { type LibConfig, defineConfig } from '@rslib/core'; -const shared: LibConfig = { - bundle: false, - dts: { - bundle: false, - }, -}; - export default defineConfig({ source: { entry: { @@ -17,8 +10,9 @@ export default defineConfig({ }, lib: [ { - ...shared, format: 'esm', + bundle: false, + dts: true, output: { distPath: { root: './dist/esm', @@ -26,8 +20,9 @@ export default defineConfig({ }, }, { - ...shared, format: 'cjs', + bundle: false, + dts: true, output: { distPath: { root: './dist/cjs', diff --git a/examples/react-component-bundle/rslib.config.ts b/examples/react-component-bundle/rslib.config.ts index 237965aed..74367c947 100644 --- a/examples/react-component-bundle/rslib.config.ts +++ b/examples/react-component-bundle/rslib.config.ts @@ -2,17 +2,11 @@ import { pluginReact } from '@rsbuild/plugin-react'; import { pluginSass } from '@rsbuild/plugin-sass'; import { defineConfig } from '@rslib/core'; -const shared = { - dts: { - bundle: false, - }, -}; - export default defineConfig({ lib: [ { - ...shared, format: 'esm', + dts: true, output: { distPath: { root: './dist/esm', @@ -22,8 +16,8 @@ export default defineConfig({ }, }, { - ...shared, format: 'cjs', + dts: true, output: { distPath: { root: './dist/cjs', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0dc8ebbf..586c5bb1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -172,6 +172,21 @@ importers: specifier: ^5.6.3 version: 5.6.3 + examples/preact-component-bundle-false: + devDependencies: + '@rsbuild/plugin-preact': + specifier: ^1.2.0 + version: 1.2.0(@rsbuild/core@1.1.3)(preact@10.24.3) + '@rsbuild/plugin-sass': + specifier: ^1.1.1 + version: 1.1.1(@rsbuild/core@1.1.3) + '@rslib/core': + specifier: workspace:* + version: link:../../packages/core + preact: + specifier: ^10.24.3 + version: 10.24.3 + examples/react-component-bundle: devDependencies: '@rsbuild/plugin-react': @@ -1687,6 +1702,14 @@ packages: '@polka/url@1.0.0-next.28': resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} + '@prefresh/core@1.5.3': + resolution: {integrity: sha512-nDzxj0tA1/M6APNAWqaxkZ+3sTdPHESa+gol4+Bw7rMc2btWdkLoNH7j9rGhUb8SThC0Vz0VoXtq+U+9azGLHg==} + peerDependencies: + preact: ^10.0.0 + + '@prefresh/utils@1.2.0': + resolution: {integrity: sha512-KtC/fZw+oqtwOLUFM9UtiitB0JsVX0zLKNyRTA332sqREqSALIIQQxdUCS1P3xR/jT1e2e8/5rwH6gdcMLEmsQ==} + '@remix-run/router@1.21.0': resolution: {integrity: sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==} engines: {node: '>=14.0.0'} @@ -1803,6 +1826,11 @@ packages: '@rsbuild/core': optional: true + '@rsbuild/plugin-preact@1.2.0': + resolution: {integrity: sha512-f1ZXXNjDqoNfuHb+IL8aqJnV6Vh+BHB8RoHkjp1hOwqRYpfPYbSA1Gb8Hp5L37TXn94nX9RrZiShFg7iAiUR1Q==} + peerDependencies: + '@rsbuild/core': 1.x + '@rsbuild/plugin-react@1.0.6': resolution: {integrity: sha512-k2VS7nvNm74DlVQROK+w+Ua1j60n3qSnVFva8zjmj6uakLCxxp85aRwfEHzaVP/YdDLffweypROuQPYvTZ57ew==} peerDependencies: @@ -1905,6 +1933,12 @@ packages: resolution: {integrity: sha512-VynGOEsVw2s8TAlLf/uESfrgfrq2+rcXB1muPJYBWbsm1Oa6r5qVQhjA5ggM6z/coYPrsVMgovl3Ff7Q7OCp1w==} engines: {node: '>=16.0.0'} + '@rspack/plugin-preact-refresh@1.1.1': + resolution: {integrity: sha512-ilJKprdF71SK8dCLsyr2sSdM/fiwg98LQ+2/7t63NbfR2RU/PKXSLqn6L+qPCzzmhSrRudrntqsbwD7RxWzpLg==} + peerDependencies: + '@prefresh/core': ^1.5.0 + '@prefresh/utils': ^1.2.0 + '@rspack/plugin-react-refresh@1.0.0': resolution: {integrity: sha512-WvXkLewW5G0Mlo5H1b251yDh5FFiH4NDAbYlFpvFjcuXX2AchZRf9zdw57BDE/ADyWsJgA8kixN/zZWBTN3iYA==} peerDependencies: @@ -2199,12 +2233,18 @@ packages: peerDependencies: '@svgr/core': '*' + '@swc/counter@0.1.3': + resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} + '@swc/helpers@0.5.13': resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==} '@swc/helpers@0.5.15': resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} + '@swc/plugin-prefresh@5.0.0': + resolution: {integrity: sha512-lldjXy40xr8rGdufo7z1GMVFOTOln7349OwWRaCvzknyv8Pm6ZFu1AYJLZM/GwYwEs27OGIbUoTXL6Xm4v0Mlg==} + '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -4954,6 +4994,9 @@ packages: resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} engines: {node: ^10 || ^12 || >=14} + preact@10.24.3: + resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==} + prebundle@1.2.5: resolution: {integrity: sha512-Q5MG7i+AqurdHLuit5INkFNsekfA40KAhsqpddDAmIR5NSEVc7sGiSAf7Cmu3OafvkI3QUl4RRTvvjfVP4nqrA==} hasBin: true @@ -7300,6 +7343,12 @@ snapshots: '@polka/url@1.0.0-next.28': {} + '@prefresh/core@1.5.3(preact@10.24.3)': + dependencies: + preact: 10.24.3 + + '@prefresh/utils@1.2.0': {} + '@remix-run/router@1.21.0': {} '@rollup/pluginutils@5.1.3(rollup@4.18.1)': @@ -7413,6 +7462,16 @@ snapshots: optionalDependencies: '@rsbuild/core': 1.1.3 + '@rsbuild/plugin-preact@1.2.0(@rsbuild/core@1.1.3)(preact@10.24.3)': + dependencies: + '@prefresh/core': 1.5.3(preact@10.24.3) + '@prefresh/utils': 1.2.0 + '@rsbuild/core': 1.1.3 + '@rspack/plugin-preact-refresh': 1.1.1(@prefresh/core@1.5.3(preact@10.24.3))(@prefresh/utils@1.2.0) + '@swc/plugin-prefresh': 5.0.0 + transitivePeerDependencies: + - preact + '@rsbuild/plugin-react@1.0.6(@rsbuild/core@1.1.3)': dependencies: '@rsbuild/core': 1.1.3 @@ -7522,6 +7581,11 @@ snapshots: '@rspack/lite-tapable@1.0.1': {} + '@rspack/plugin-preact-refresh@1.1.1(@prefresh/core@1.5.3(preact@10.24.3))(@prefresh/utils@1.2.0)': + dependencies: + '@prefresh/core': 1.5.3(preact@10.24.3) + '@prefresh/utils': 1.2.0 + '@rspack/plugin-react-refresh@1.0.0(react-refresh@0.14.2)': dependencies: error-stack-parser: 2.1.4 @@ -7921,6 +7985,8 @@ snapshots: transitivePeerDependencies: - typescript + '@swc/counter@0.1.3': {} + '@swc/helpers@0.5.13': dependencies: tslib: 2.8.1 @@ -7929,6 +7995,10 @@ snapshots: dependencies: tslib: 2.8.1 + '@swc/plugin-prefresh@5.0.0': + dependencies: + '@swc/counter': 0.1.3 + '@trysound/sax@0.2.0': {} '@tybys/wasm-util@0.9.0': @@ -11177,6 +11247,8 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 + preact@10.24.3: {} + prebundle@1.2.5(typescript@5.6.3): dependencies: '@vercel/ncc': 0.38.1 diff --git a/website/docs/en/guide/solution.mdx b/website/docs/en/guide/solution.mdx index d23d4f6b9..2da58e655 100644 --- a/website/docs/en/guide/solution.mdx +++ b/website/docs/en/guide/solution.mdx @@ -10,7 +10,7 @@ When developing a library that runs in the browser, you can package it in both [ When publishing to npm, you can choose not to [minify](/config/rsbuild/output#minify) your code or to minify it while providing a [sourcemap](/config/rsbuild/output#sourcemap) to enhance the debugging experience for users of your library. For styling, you can use [CSS](/guide/advanced/css), or [CSS pre-processors](/guide/advanced/css#preprocessors) like Sass, Less, or Stylus, or apply [PostCSS](/guide/advanced/css#postcss) for CSS post-processing. Tools like [Tailwind CSS](/guide/advanced/css#tailwind-css) can also help in building your styles. Using [CSS modules](/guide/advanced/css#css-modules) to create CSS modules is another option. -In terms of resource management, Rslib handles [static assets](/guide/advanced/assets) used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](/guide/solution/preact), or other frameworks, using [Storybook](/guide/advanced/storybook) for UI component development and testing. +In terms of resource management, Rslib handles [static assets](/guide/advanced/assets) used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false), or other frameworks, using [Storybook](/guide/advanced/storybook) for UI component development and testing. Refer to the solutions in this chapter to learn how to use Rslib to develop browser libraries for different frameworks. diff --git a/website/docs/en/guide/solution/preact.mdx b/website/docs/en/guide/solution/preact.mdx deleted file mode 100644 index 9cec8c678..000000000 --- a/website/docs/en/guide/solution/preact.mdx +++ /dev/null @@ -1 +0,0 @@ -# Preact