Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
@storybook/source-loader
Advanced tools
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.
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,338,051 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 11 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
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.