diff --git a/examples/solid-component-bundle/README.md b/examples/solid-component-bundle/README.md new file mode 100644 index 000000000..49b7bf34b --- /dev/null +++ b/examples/solid-component-bundle/README.md @@ -0,0 +1,3 @@ +# @examples/solid-component + +This example demonstrates how to use Rslib to build a simple SolidJS component. diff --git a/examples/solid-component-bundle/package.json b/examples/solid-component-bundle/package.json new file mode 100644 index 000000000..b313a9627 --- /dev/null +++ b/examples/solid-component-bundle/package.json @@ -0,0 +1,22 @@ +{ + "name": "@examples/solid-component-bundle", + "version": "1.0.0", + "private": true, + "type": "module", + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "scripts": { + "build": "rslib build" + }, + "devDependencies": { + "@rsbuild/plugin-sass": "^1.3.1", + "@rsbuild/plugin-solid": "^1.0.5", + "@rslib/core": "workspace:*", + "solid-js": "^1.6.0", + "typescript": "^5.8.3" + }, + "peerDependencies": { + "solid-js": "^1.0.0" + } +} diff --git a/examples/solid-component-bundle/rslib.config.ts b/examples/solid-component-bundle/rslib.config.ts new file mode 100644 index 000000000..2022eff8a --- /dev/null +++ b/examples/solid-component-bundle/rslib.config.ts @@ -0,0 +1,16 @@ +import { pluginSass } from '@rsbuild/plugin-sass'; +import { pluginSolid } from '@rsbuild/plugin-solid'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + lib: [ + { + format: 'esm', + dts: true, + }, + ], + output: { + target: 'web', + }, + plugins: [pluginSolid(), pluginSass()], +}); diff --git a/examples/solid-component-bundle/src/assets/logo.svg b/examples/solid-component-bundle/src/assets/logo.svg new file mode 100644 index 000000000..8a8988c4f --- /dev/null +++ b/examples/solid-component-bundle/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid-component-bundle/src/components/CounterButton/index.module.scss b/examples/solid-component-bundle/src/components/CounterButton/index.module.scss new file mode 100644 index 000000000..19301eef2 --- /dev/null +++ b/examples/solid-component-bundle/src/components/CounterButton/index.module.scss @@ -0,0 +1,3 @@ +.button { + background: yellow; +} diff --git a/examples/solid-component-bundle/src/components/CounterButton/index.tsx b/examples/solid-component-bundle/src/components/CounterButton/index.tsx new file mode 100644 index 000000000..b5b97f1a2 --- /dev/null +++ b/examples/solid-component-bundle/src/components/CounterButton/index.tsx @@ -0,0 +1,17 @@ +import type { Component } from 'solid-js'; +import styles from './index.module.scss'; + +interface CounterButtonProps { + onClick: () => void; + label: string; +} + +export const CounterButton: Component = (props) => ( + +); diff --git a/examples/solid-component-bundle/src/env.d.ts b/examples/solid-component-bundle/src/env.d.ts new file mode 100644 index 000000000..ce107c108 --- /dev/null +++ b/examples/solid-component-bundle/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid-component-bundle/src/index.scss b/examples/solid-component-bundle/src/index.scss new file mode 100644 index 000000000..f4c82dce4 --- /dev/null +++ b/examples/solid-component-bundle/src/index.scss @@ -0,0 +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/solid-component-bundle/src/index.tsx b/examples/solid-component-bundle/src/index.tsx new file mode 100644 index 000000000..7d1ab2fc6 --- /dev/null +++ b/examples/solid-component-bundle/src/index.tsx @@ -0,0 +1,17 @@ +import type { Component } from 'solid-js'; +import { CounterButton } from './components/CounterButton'; +import { useCounter } from './useCounter'; +import './index.scss'; + +export const Counter: Component = () => { + const { count, increment, decrement } = useCounter(); + + return ( +
+

Solid

+

Counter: {count()}

+ + +
+ ); +}; diff --git a/examples/solid-component-bundle/src/useCounter.ts b/examples/solid-component-bundle/src/useCounter.ts new file mode 100644 index 000000000..62aefdb61 --- /dev/null +++ b/examples/solid-component-bundle/src/useCounter.ts @@ -0,0 +1,10 @@ +import { createSignal } from 'solid-js'; + +export const useCounter = (initialValue = 0) => { + const [count, setCount] = createSignal(initialValue); + + const increment = () => setCount((prev) => prev + 1); + const decrement = () => setCount((prev) => prev - 1); + + return { count, increment, decrement }; +}; diff --git a/examples/solid-component-bundle/tsconfig.json b/examples/solid-component-bundle/tsconfig.json new file mode 100644 index 000000000..ec72ac505 --- /dev/null +++ b/examples/solid-component-bundle/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "jsx": "preserve", + "jsxImportSource": "solid-js", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "moduleResolution": "node", + "baseUrl": "./src", + "paths": { + "@/*": ["*"] + } + }, + "include": ["src"], + "exclude": ["node_modules", "dist"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c6f8786f..a4f1584d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -245,6 +245,24 @@ importers: specifier: ^19.1.0 version: 19.1.0 + examples/solid-component-bundle: + devDependencies: + '@rsbuild/plugin-sass': + specifier: ^1.3.1 + version: 1.3.1(@rsbuild/core@1.3.9) + '@rsbuild/plugin-solid': + specifier: ^1.0.5 + version: 1.0.5(@babel/core@7.26.10)(@rsbuild/core@1.3.9)(solid-js@1.9.5) + '@rslib/core': + specifier: workspace:* + version: link:../../packages/core + solid-js: + specifier: ^1.6.0 + version: 1.9.5 + typescript: + specifier: ^5.8.3 + version: 5.8.3 + examples/vue-component-bundle: devDependencies: '@rsbuild/plugin-vue': @@ -1153,6 +1171,10 @@ packages: resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==} engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.18.6': + resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} + engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.25.9': resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==} engines: {node: '>=6.9.0'} @@ -2269,6 +2291,11 @@ packages: engines: {node: '>=16.10.0'} hasBin: true + '@rsbuild/plugin-babel@1.0.4': + resolution: {integrity: sha512-ZYbyC3zNYluTWTJDVrAW3eRJfvSTIQlp/bs20iY/MATm8/rRq2xtlAP5keCYxpx5CJZX7IT7i6f4z24/YrJJwA==} + peerDependencies: + '@rsbuild/core': 1.x + '@rsbuild/plugin-babel@1.0.5': resolution: {integrity: sha512-g6kZsAREO7c3KEBXRnLbOovIEL/TQDMls2QQFpaGxHx1K7pJB5nNmY1XpTzLCch62xfmBV4crOde0Dow6NAshg==} peerDependencies: @@ -2307,6 +2334,11 @@ packages: peerDependencies: '@rsbuild/core': 1.x + '@rsbuild/plugin-solid@1.0.5': + resolution: {integrity: sha512-sbSXxVfqs3dCQ4RllIx3Qm9NbTNgtbok7dHD0ikYpd3PytZLtaEHnEPn8i1uOzl371uHpNnwtLuFHX5Y6MJaIA==} + peerDependencies: + '@rsbuild/core': 1.x + '@rsbuild/plugin-stylus@1.1.1': resolution: {integrity: sha512-utXOlHyWCib9nVOqorApIYIc+IrldHQznTbutZpuYqdN4fic217XJWJBm+c8ccDwmjVttgCMgwS0UVVvHbDzGg==} peerDependencies: @@ -3210,11 +3242,21 @@ packages: b-validate@1.5.3: resolution: {integrity: sha512-iCvCkGFskbaYtfQ0a3GmcQCHl/Sv1GufXFGuUQ+FE+WJa7A/espLOuFIn09B944V8/ImPj71T4+rTASxO2PAuA==} + babel-plugin-jsx-dom-expressions@0.39.7: + resolution: {integrity: sha512-8GzVmFla7jaTNWW8W+lTMl9YGva4/06CtwJjySnkYtt8G1v9weCzc2SuF1DfrudcCNb2Doetc1FRg33swBYZCA==} + peerDependencies: + '@babel/core': ^7.20.12 + babel-plugin-polyfill-corejs3@0.12.0: resolution: {integrity: sha512-S95J8gvvIIBanFi/mHvZ6CIvkpHKPICgaDNfwpDZfl5xcNnmX4Y3T/+HnCRSddBkuFmX3DkBzzCI4anCl5Ql7w==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 + babel-preset-solid@1.9.5: + resolution: {integrity: sha512-85I3osODJ1LvZbv8wFozROV1vXq32BubqHXAGu73A//TRs3NLI1OFP83AQBUTSQHwgZQmARjHlJciym3we+V+w==} + peerDependencies: + '@babel/core': ^7.0.0 + bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -4415,6 +4457,9 @@ packages: resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==} engines: {node: '>=12'} + html-entities@2.3.3: + resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} + html-entities@2.6.0: resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==} @@ -6136,6 +6181,16 @@ packages: serialize-javascript@6.0.2: resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} + seroval-plugins@1.2.1: + resolution: {integrity: sha512-H5vs53+39+x4Udwp4J5rNZfgFuA+Lt+uU+09w1gYBVWomtAl98B+E9w7yC05Xc81/HgLvJdlyqJbU0fJCKCmdw==} + engines: {node: '>=10'} + peerDependencies: + seroval: ^1.0 + + seroval@1.2.1: + resolution: {integrity: sha512-yBxFFs3zmkvKNmR0pFSU//rIsYjuX418TnlDmc2weaq5XFDqDIV/NOMPBoLrbxjLH42p4UzRuXHryXh9dYcKcw==} + engines: {node: '>=10'} + serve-static@2.2.0: resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==} engines: {node: '>= 18'} @@ -6221,6 +6276,14 @@ packages: snake-case@3.0.4: resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} + solid-js@1.9.5: + resolution: {integrity: sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw==} + + solid-refresh@0.6.3: + resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} + peerDependencies: + solid-js: ^1.3 + sort-object-keys@1.1.3: resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==} @@ -6738,6 +6801,9 @@ packages: util@0.12.5: resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==} + validate-html-nesting@1.2.2: + resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==} + varint@6.0.0: resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==} @@ -7135,6 +7201,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/helper-module-imports@7.18.6': + dependencies: + '@babel/types': 7.27.0 + '@babel/helper-module-imports@7.25.9': dependencies: '@babel/traverse': 7.27.0 @@ -8277,6 +8347,20 @@ snapshots: core-js: 3.41.0 jiti: 2.4.2 + '@rsbuild/plugin-babel@1.0.4(@rsbuild/core@1.3.9)': + dependencies: + '@babel/core': 7.26.10 + '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.10) + '@babel/preset-typescript': 7.27.0(@babel/core@7.26.10) + '@rsbuild/core': 1.3.9 + '@types/babel__core': 7.20.5 + deepmerge: 4.3.1 + reduce-configs: 1.1.0 + upath: 2.0.1 + transitivePeerDependencies: + - supports-color + '@rsbuild/plugin-babel@1.0.5(@rsbuild/core@1.3.9)': dependencies: '@babel/core': 7.26.10 @@ -8358,6 +8442,17 @@ snapshots: reduce-configs: 1.1.0 sass-embedded: 1.86.0 + '@rsbuild/plugin-solid@1.0.5(@babel/core@7.26.10)(@rsbuild/core@1.3.9)(solid-js@1.9.5)': + dependencies: + '@rsbuild/core': 1.3.9 + '@rsbuild/plugin-babel': 1.0.4(@rsbuild/core@1.3.9) + babel-preset-solid: 1.9.5(@babel/core@7.26.10) + solid-refresh: 0.6.3(solid-js@1.9.5) + transitivePeerDependencies: + - '@babel/core' + - solid-js + - supports-color + '@rsbuild/plugin-stylus@1.1.1(@rsbuild/core@1.3.9)(@swc/helpers@0.5.17)(webpack@5.98.0)': dependencies: '@rsbuild/core': 1.3.9 @@ -9432,6 +9527,16 @@ snapshots: b-validate@1.5.3: {} + babel-plugin-jsx-dom-expressions@0.39.7(@babel/core@7.26.10): + dependencies: + '@babel/core': 7.26.10 + '@babel/helper-module-imports': 7.18.6 + '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10) + '@babel/types': 7.27.0 + html-entities: 2.3.3 + parse5: 7.1.2 + validate-html-nesting: 1.2.2 + babel-plugin-polyfill-corejs3@0.12.0(@babel/core@7.26.10): dependencies: '@babel/core': 7.26.10 @@ -9440,6 +9545,11 @@ snapshots: transitivePeerDependencies: - supports-color + babel-preset-solid@1.9.5(@babel/core@7.26.10): + dependencies: + '@babel/core': 7.26.10 + babel-plugin-jsx-dom-expressions: 0.39.7(@babel/core@7.26.10) + bail@2.0.2: {} balanced-match@1.0.2: {} @@ -10813,6 +10923,8 @@ snapshots: dependencies: whatwg-encoding: 2.0.0 + html-entities@2.3.3: {} + html-entities@2.6.0: {} html-minifier-terser@7.2.0: @@ -12895,6 +13007,12 @@ snapshots: dependencies: randombytes: 2.1.0 + seroval-plugins@1.2.1(seroval@1.2.1): + dependencies: + seroval: 1.2.1 + + seroval@1.2.1: {} + serve-static@2.2.0: dependencies: encodeurl: 2.0.0 @@ -12996,6 +13114,21 @@ snapshots: dot-case: 3.0.4 tslib: 2.8.1 + solid-js@1.9.5: + dependencies: + csstype: 3.1.3 + seroval: 1.2.1 + seroval-plugins: 1.2.1(seroval@1.2.1) + + solid-refresh@0.6.3(solid-js@1.9.5): + dependencies: + '@babel/generator': 7.27.0 + '@babel/helper-module-imports': 7.25.9 + '@babel/types': 7.27.0 + solid-js: 1.9.5 + transitivePeerDependencies: + - supports-color + sort-object-keys@1.1.3: {} sort-package-json@2.15.1: @@ -13553,6 +13686,8 @@ snapshots: is-typed-array: 1.1.13 which-typed-array: 1.1.15 + validate-html-nesting@1.2.2: {} + varint@6.0.0: {} vary@1.1.2: {}