reactjs - Storybook Typescript ei lataa juuri lisättyä props-tyyppiä, tarvitsee Storybookin uudelleenkäynnistyksen
module.exports = {
stories: ["../**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
"@storybook/addon-a11y"
],
typescript: {
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
compilerOptions: {
allowSyntheticDefaultImports: false,
esModuleInterop: false
}
}
},
staticDirs: ["../src/assets"],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-webpack5"
},
webpackFinal: (config) => {
config.module.rules.push({
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve("babel-loader"),
options: {
presets: [
require("@babel/preset-typescript").default,
[require("@babel/preset-react").default, { runtime: "automatic" }],
// @ts-ignore
require("@babel/preset-env").default
]
}
}
]
});
config.resolve.extensions.push(".ts", ".tsx");
// config.module.rules.push({
// test: /\.mjs$/,
// include: /node_modules/,
// type: "javascript/auto"
// });
// config.resolve.extensions.push(".mjs");
return config;
}
};
Yllä on minun main.js-tiedostoni
export type ButtonProps= {
width: string;
/** Some comments */
height: string; // let say I added this after starting up Storybook
}
Kun lisään uusia props-arvoja props-tyyppiin (sanotaan vaikka height) nappityyppiini, Storybook ei ehkä näytä äskettäin lisättyjä props-arvoja tai kommentteja, ja uudet props-arvot tai kommentit näkyvät vain, jos käynnistän Storybookin uudelleen suorittamalla npm run storybook -skriptin. Kaikki (kuvaus, ominaisuudet) ladataan ja näkyvät vasta Storybookin uudelleenkäynnistyksen jälkeen.
Olen sisällyttänyt TypeScriptin konfiguraation main.js-tiedostooni alusta asti ja päätin hakea apua, koska ei ole tehokasta joutua käynnistämään Storybookia uudelleen, jos uudet muutokset eivät näy. Ilmoitathan, jos on jotain, mitä voisin kokeilla ratkaistakseni tämän ongelman.