yarn dlx sb@latest init --builder @storybook/builder-vite
ensure 3rd party deps
// package.json
{
"devDependencies": {
...,
"@babel/core": "^7.18.10",
"@mdx-js/react": "^1.6.22",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-backgrounds": "^6.5.9",
"@storybook/addon-docs": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-measure": "^6.5.9",
"@storybook/addon-outline": "^6.5.9",
"@storybook/builder-vite": "^0.2.2",
"@storybook/client-api": "^6.5.9",
"@storybook/client-logger": "^6.5.9",
"@storybook/web-components": "^6.5.9",
"@types/babel__core": "^7",
"@types/react": "^17",
"@types/react-dom": "^17",
"babel-loader": "^8.2.5",
"lit-html": "^2.2.7",
"object-inspect": "^1.12.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
...
}
}
then unplug object-inspect
yarn unplug object-inpect
modify code in the unplugged folder
// .yarn/unplugged/object-inspect-npm-1.12.2-f125a822c0/node_modules/object-inspect/index.js
var utilInspect = require('./util.inspect');
var inspectCustom = utilInspect.custom;
// becomes 👇
var utilInspect = require('./util.inspect');
var inspectCustom = utilInspect;
rm -rf node_modules/
When creating a new Web Component, you should also define a manifest. Use the following directory structure so that it will automatically fetched.
src
└── components
└── <component-category>
└── <component-name>
| index.ts
| <component-key>.ts
└── manifest
| index.ts
└── assets
icon.svg
preview.png
NB: build this package to update the components-list.json
file in the root.