Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
@storybook/source-loader
Advanced tools
Package description
The @storybook/source-loader package is a loader for webpack that allows you to load the source code of a story into Storybook. This enables you to display the source code in a live code editor or snippet for documentation purposes, which can be helpful for developers to understand how to use a component. It is part of the Storybook ecosystem, which is a tool for developing UI components in isolation for React, Vue, Angular, and more.
Load story source code
This webpack configuration snippet shows how to include the @storybook/source-loader as a pre-loader for files that match the `.stories.js` or `.stories.jsx` pattern. This allows Storybook to display the source code of these stories.
module.exports = {
module: {
rules: [
{
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/source-loader')],
enforce: 'pre',
},
],
},
};
The raw-loader package is similar to @storybook/source-loader in that it allows you to import files as a string. However, it is not specific to Storybook and does not have the capability to integrate with Storybook's UI to display source code alongside component stories.
While not a webpack loader, highlight.js is a syntax highlighter that can be used to display source code in a formatted way on web pages. It is similar to @storybook/source-loader in that it helps with displaying readable source code, but it does not have the Storybook integration for loading story sources automatically.
The storybook-addon-code package is an addon for Storybook that allows you to show code samples in your stories. It is similar to @storybook/source-loader in its purpose of displaying source code for documentation, but it works as an addon that you can configure within Storybook rather than a webpack loader.
Changelog
8.0.9
@vitejs/plugin-react-swc
with plugins - #26837, thanks @JReinhold!Readme
Storybook source-loader
is a webpack loader that annotates Storybook story files with their source code. It powers the storysource and docs addons.
The loader can be customized with the following options:
The parser that will be parsing your code to AST (based on prettier)
Allowed values:
javascript
- defaulttypescript
flow
Be sure to update the regex test for the webpack rule if utilizing Typescript files.
Usage:
module.exports = function ({ config }) {
config.module.rules.push({
test: /\.stories\.tsx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: { parser: 'typescript' },
},
],
enforce: 'pre',
});
return config;
};
The prettier configuration that will be used to format the story source in the addon panel.
Defaults:
{
printWidth: 100,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
}
Usage:
module.exports = function ({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: {
prettierConfig: {
printWidth: 100,
singleQuote: false,
},
},
},
],
enforce: 'pre',
});
return config;
};
The array of regex that is used to remove "ugly" comments.
Defaults:
[/^eslint-.*/, /^global.*/];
Usage:
module.exports = function ({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: {
uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
},
},
],
enforce: 'pre',
});
return config;
};
Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;
Defaults: true
Usage:
module.exports = function ({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: { injectDecorator: false },
},
],
enforce: 'pre',
});
return config;
};
FAQs
Source loader
The npm package @storybook/source-loader receives a total of 1,458,133 weekly downloads. As such, @storybook/source-loader popularity was classified as popular.
We found that @storybook/source-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.