Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
storybook-builder-vite
Advanced tools
Requirements:
NB! This code is still very experimental! Have a look at the GitHub issues for known bugs. If you find any new bugs, feel free to create an issue or send a pull request!
The Vite builder cannot build itself. Are you willing to contribute?
https://github.com/eirslett/storybook-builder-vite/issues/11
Please read the How to contribute guide.
npm install storybook-builder-vite --save-dev
or
yarn add --dev storybook-builder-vite
In your main.js
configuration file,
set core: { builder: "storybook-builder-vite" }
.
For autoreload of stories to work, they need to have
.stories.tsx
file suffix. See also #53
The builder supports both development mode in Storybook, and building a static production version.
The builder will not read your vite.config.js
file by default.
In .storybook/main.js
(or whatever your Storybook config file is named)
you can override the Vite config:
module.exports = {
async viteFinal(config, { configType }) {
// customize the Vite config here
config.resolve.alias.foo = 'bar';
// return the customized config
return config;
},
// ... other options here
};
The viteFinal
function will give you config
which is
the builder's own Vite config. You can tweak this as you want,
for example to set up aliases, add new plugins etc.
The configType
variable will be either "DEVELOPMENT"
or "PRODUCTION"
.
The function should return the updated Vite configuration.
When using this builder with Svelte, your .storybook/main.js
(or equivalent)
can contain a svelteOptions
object to pass custom options to
vite-plugin-svelte
:
const preprocess = require('svelte-preprocess');
module.exports = {
svelteOptions: {
preprocess: preprocess({
typescript: true,
postcss: true,
sourceMap: true,
}),
},
};
The builder will by default enable Vite's server.fs.strict
option, for increased security. The default project root
is set to the parent directory of the
storybook configuration directory. This can be overridden in viteFinal.
npm init @vitejs/app vite-react-app --template react && cd vite-react-app
npm install # or yarn
npx sb@next init --builder storybook-builder-vite && npm run storybook
[vite] new dependencies found:
, please add those dependencies to your optimizeDeps.include
in viteFinal
. E.g. config.optimizeDeps.include = [...(config.optimizeDeps?.include ?? []), "storybook-dark-mode"],
.Contributions are welcome!
The code is a monorepo with the core storybook-builder-vite
package,
and examples (like packages/example-react
) to test the builder implementation with.
Similar to the main storybook monorepo, you need yarn , because the project is organized as yarn workspaces. This lets you write new code in the core builder package, and instantly use them from the example packages.
FAQs
An experimental plugin to run and build Storybooks with Vite
The npm package storybook-builder-vite receives a total of 2,054 weekly downloads. As such, storybook-builder-vite popularity was classified as popular.
We found that storybook-builder-vite demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.