Comments (6)
storybook-rsbuild's configuration is a little complex so for now you had to write the rsbuildFinal
in the following style
import { mergeRsbuildConfig } from '@rsbuild/core'
import type { StorybookConfig } from 'storybook-react-rsbuild'
import { join, dirname } from 'path'
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')))
}
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-onboarding'),
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-interactions'),
],
framework: {
name: getAbsolutePath('storybook-react-rsbuild'),
options: {},
},
docs: {
autodocs: 'tag',
},
typescript: {
reactDocgen: 'react-docgen',
check: true,
},
rsbuildFinal: (config) => {
return mergeRsbuildConfig(config, {
tools: {
+ rspack(config, { addRules, mergeConfig }) {
+ return mergeConfig(config, {
+ module: {
+ rules: [
+ {
+ test: /\.md$/,
+ type: 'asset/source',
+ },
+ ],
+ },
})
},
},
})
},
}
export default config
from storybook-rsbuild.
With above configuration, the .md
could be rendered as plain text instead of Markdown style. Is that identical with webpack?
![image](https://private-user-images.githubusercontent.com/12322740/343670535-80ccee3d-634f-4f92-a1c8-a5489595f3e8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NzIwNjAsIm5iZiI6MTcyMzg3MTc2MCwicGF0aCI6Ii8xMjMyMjc0MC8zNDM2NzA1MzUtODBjY2VlM2QtNjM0Zi00ZjkyLWExYzgtYTU0ODk1OTVmM2U4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDA1MTYwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY2NWQyOTEwNjNhZGRmOTA2NTM2MjQ0Y2Y1NjI4OTQzYWQyMWM3NjkzNDI1ZWYzOWI0NzlhMTA4MzRlY2U3MWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.UiP4_amXjhy_jICirQuLTi1wbKThC5568Q5XZDZQ_Gc)
![image](https://private-user-images.githubusercontent.com/12322740/343670501-3e588212-a84d-48b7-afcb-c09b96019768.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NzIwNjAsIm5iZiI6MTcyMzg3MTc2MCwicGF0aCI6Ii8xMjMyMjc0MC8zNDM2NzA1MDEtM2U1ODgyMTItYTg0ZC00OGI3LWFmY2ItYzA5Yjk2MDE5NzY4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDA1MTYwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI4ZjAzOGYzZGM5NGNiN2M1MGExNTVmNWMyNDY4ODBjMDc2ZDY5ZWM3YzMwZGIxNDlmYzg1NjNiMjcyODdkZGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.0MqYRBLW-iEysuDt7mZCOOMjvZQt-uEN3xAGZvYaSfc)
from storybook-rsbuild.
Well, I'm importing it plain text to render it within an .mdx file. So that should work. Can't test it though until #30 is addressed ;) Unless I'd set up a separate project just to test this.
from storybook-rsbuild.
So when importing and using a .md
in .mdx
, the .md
file could be render as Markdown content with webpack & SB8?
from storybook-rsbuild.
webpack & SB7, yes. But the import was *.md?raw but I think that results in pretty much the same.
from storybook-rsbuild.
I'll test does it works on webpack and SB8 then align with it.
from storybook-rsbuild.
Related Issues (20)
- Not working on Linux HOT 2
- Support Nx HOT 2
- Support for React <18 HOT 5
- Broken with [email protected] HOT 11
- error binding.JsResolverFactory is not a constructor HOT 4
- Compilation error "JavaScript parsing error: Expected ';', got 'assert'" HOT 7
- Very long compilation time and error "Conflict: Multiple assets emit different content to the same filename iframe.html" when source.entry is set in rsbuild config HOT 19
- Error: [html-rspack-plugin]: Child compilation failed HOT 2
- `Conflict: Multiple assets emit different content to the same filename iframe.html` when using custom `source.entry` HOT 3
- Creating new stories and saving stories in UI is not currently supported? HOT 6
- compatibility with storybook-addon-manual-mocks HOT 9
- react-docgen-typescript support? HOT 1
- Cannot find module error with `stories: ['../**/*.stories.ts']`
- Built SB has odd selectors that is being applied HOT 4
- How to use rspack.config.js configuration? HOT 2
- Can't resolve deps with @rsbuild/core 1.0.1-beta.10 HOT 1
- `public/index.html` gets copied instead of the Storybook template when building HOT 6
- CSS imported assets are bundled twice HOT 3
- v0.0.12 breaks dev HOT 11
- Asset loading in CSS doesn't work in dev HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook-rsbuild.