= $props();
+
+ const isPropsRune =
+ declaration.initializer &&
+ ts.isCallExpression(declaration.initializer) &&
+ ts.isIdentifier(declaration.initializer.expression) &&
+ declaration.initializer.expression.text === '$props';
+
+ const isPropsType =
+ declaration.type && propsType === checker.getTypeFromTypeNode(declaration.type);
+
+ if (ts.isObjectBindingPattern(declaration.name) && (isPropsRune || isPropsType)) {
propsRuneUsed = true;
declaration.name.elements.forEach((element) => {
const name = element.name.getText();
@@ -438,6 +445,7 @@ export function generateDocgen(targetFileName: string, sourceFileCache: SourceFi
) {
const prop = propMap.get(declaration.name.text);
if (prop && declaration.initializer) {
+ prop.optional = true;
const defaultValue = initializerToDefaultValue(declaration.initializer, checker);
if (defaultValue) {
prop.defaultValue = defaultValue;
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index a26b09f0e119..88893b9de002 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-webpack5",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 07428f493a0d..70462a88bcf9 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/sveltekit",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
@@ -61,7 +61,7 @@
"devDependencies": {
"@types/node": "^18.0.0",
"typescript": "^5.3.2",
- "vite": "^4.0.0"
+ "vite": "^5.0.13"
},
"peerDependencies": {
"storybook": "workspace:^",
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte
index f399324da533..f57732f0b5b7 100644
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte
@@ -24,7 +24,7 @@
* @property {Date=} date Date
* @property {number | string =} unionTypes Union of types
* @property {{ a: number } & { b: string } =} intersection Intersection of types
- * @property {import("svelte").Snippet=} children Snippet contents
+ * @property {import("svelte").Snippet} children Snippet contents
* @property {(event: MouseEvent) => number =} func Event callback function
*/
@@ -52,4 +52,4 @@
} = $props();
-Docs: JSDoc + Runes (svelte2tsx@0.7.13 does not support this yet.)
+Docs: JSDoc + Runes
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index f9361e7b775b..1670841d4aa0 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-vite",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -59,7 +59,7 @@
"@types/find-package-json": "^1.2.6",
"@types/node": "^18.0.0",
"typescript": "^5.3.2",
- "vite": "^4.0.0"
+ "vite": "^5.0.13"
},
"peerDependencies": {
"storybook": "workspace:^",
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
index 54ac30cbb9dd..c7218e328fc6 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
@@ -9,6 +9,7 @@ import {
createCheckerByJson,
type ComponentMeta,
type MetaCheckerOptions,
+ type PropertyMetaSchema,
} from 'vue-component-meta';
import { parseMulti } from 'vue-docgen-api';
@@ -50,6 +51,19 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<
const exportName = exportNames[index];
+ // we remove nested object schemas here since they are not used inside Storybook (we don't generate controls for object properties)
+ // and they can cause "out of memory" issues for large/complex schemas (e.g. HTMLElement)
+ // it also reduced the bundle size when running "storybook build" when such schemas are used
+ (['props', 'events', 'slots', 'exposed'] as const).forEach((key) => {
+ meta[key].forEach((value) => {
+ if (Array.isArray(value.schema)) {
+ value.schema.forEach((eventSchema) => removeNestedSchemas(eventSchema));
+ } else {
+ removeNestedSchemas(value.schema);
+ }
+ });
+ });
+
const exposed =
// the meta also includes duplicated entries in the "exposed" array with "on"
// prefix (e.g. onClick instead of click), so we need to filter them out here
@@ -250,3 +264,12 @@ async function getTsConfigReferences(tsConfigPath: string) {
return [];
}
}
+
+/**
+ * Removes any nested schemas from the given main schema (e.g. from a prop, event, slot or exposed).
+ * Useful to drastically reduce build size and prevent out of memory issues when large schemas (e.g. HTMLElement, MouseEvent) are used.
+ */
+function removeNestedSchemas(schema: PropertyMetaSchema) {
+ if (typeof schema !== 'object') return;
+ delete schema.schema;
+}
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 41e17adba7a3..c0ac55025f03 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-webpack5",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index a18fc4d66d45..664176f27d74 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components-vite",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index 7a3d01a09011..01d3521b5727 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components-webpack5",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
index f6a998875bec..0acb8450e13b 100644
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/blocks",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook Doc Blocks",
"keywords": [
"storybook"
@@ -44,7 +44,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/csf": "0.1.11",
+ "@storybook/csf": "^0.1.11",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
"@types/lodash": "^4.14.167",
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 1f8b0cda1a5f..a602280cbee9 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
{
"name": "sb",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 4f28285772e4..ad7b210137e5 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli/core/manager/globals.cjs b/code/lib/cli/core/manager/globals.cjs
new file mode 100644
index 000000000000..3dc797bf4cd7
--- /dev/null
+++ b/code/lib/cli/core/manager/globals.cjs
@@ -0,0 +1 @@
+module.exports = require('@storybook/core/manager/globals');
diff --git a/code/lib/cli/core/manager/globals.d.ts b/code/lib/cli/core/manager/globals.d.ts
new file mode 100644
index 000000000000..47746a38ada4
--- /dev/null
+++ b/code/lib/cli/core/manager/globals.d.ts
@@ -0,0 +1,2 @@
+export * from '@storybook/core/manager/globals';
+export type * from '@storybook/core/manager/globals';
diff --git a/code/lib/cli/core/manager/globals.js b/code/lib/cli/core/manager/globals.js
new file mode 100644
index 000000000000..779828900cda
--- /dev/null
+++ b/code/lib/cli/core/manager/globals.js
@@ -0,0 +1 @@
+export * from '@storybook/core/manager/globals';
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 3b7f10bf0838..da7b06aca726 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "storybook",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook's CLI - install, dev, build, upgrade, and more",
"keywords": [
"cli",
@@ -167,6 +167,11 @@
"types": "./core/preview/globals.d.ts",
"import": "./core/preview/globals.js",
"require": "./core/preview/globals.cjs"
+ },
+ "./internal/manager/globals": {
+ "types": "./core/manager/globals.d.ts",
+ "import": "./core/manager/globals.js",
+ "require": "./core/manager/globals.cjs"
}
},
"main": "dist/index.cjs",
@@ -219,6 +224,9 @@
"internal/manager-errors": [
"./core/manager-errors.d.ts"
],
+ "internal/manager/globals": [
+ "./core/manager/globals.d.ts"
+ ],
"internal/manager/globals-module-info": [
"./core/manager/globals-module-info.d.ts"
],
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 6e55584c100d..5c14d632cd36 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
@@ -58,7 +58,7 @@
"@babel/preset-env": "^7.24.4",
"@babel/types": "^7.24.0",
"@storybook/core": "workspace:*",
- "@storybook/csf": "0.1.11",
+ "@storybook/csf": "^0.1.11",
"@types/cross-spawn": "^6.0.2",
"cross-spawn": "^7.0.3",
"globby": "^14.0.1",
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 1e95304dbf0f..15964d58d5f3 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 447d677386e5..8ed99087ecff 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-plugin",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Enrich CSF files via static analysis",
"keywords": [
"storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index ba29f5151f1c..fc1928dea288 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 29af1e282b9a..90fe2180d93d 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-dom-shim",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 3e052e22090b..5c2963555975 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Source loader",
"keywords": [
"lib",
@@ -45,7 +45,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/csf": "0.1.11",
+ "@storybook/csf": "^0.1.11",
"estraverse": "^5.2.0",
"lodash": "^4.17.21",
"prettier": "^3.1.1"
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index ec3ed55f79cd..8fbcf1ba574f 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/test",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "",
"keywords": [
"storybook"
@@ -44,7 +44,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/csf": "0.1.11",
+ "@storybook/csf": "^0.1.11",
"@storybook/instrumenter": "workspace:*",
"@testing-library/dom": "10.1.0",
"@testing-library/jest-dom": "6.4.5",
diff --git a/code/lib/test/template/stories/loader-enhancements.stories.ts b/code/lib/test/template/stories/loader-enhancements.stories.ts
index 997b40e12644..b759a73b56c1 100644
--- a/code/lib/test/template/stories/loader-enhancements.stories.ts
+++ b/code/lib/test/template/stories/loader-enhancements.stories.ts
@@ -12,7 +12,7 @@ export default meta;
export const canvas_is_equal_to_within_canvas_element = {
async play({ canvas, canvasElement }) {
const oldCanvas = within(canvasElement);
- await expect(canvas satisfies typeof oldCanvas).toEqual(oldCanvas);
+ await expect(Object.keys(canvas)).toEqual(Object.keys(oldCanvas));
},
};
diff --git a/code/package.json b/code/package.json
index e7d38085b51d..8f933a17f10c 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"private": true,
"description": "Storybook root",
"homepage": "https://storybook.js.org/",
@@ -118,7 +118,7 @@
"@storybook/codemod": "workspace:*",
"@storybook/core": "workspace:*",
"@storybook/core-webpack": "workspace:*",
- "@storybook/csf": "0.1.11",
+ "@storybook/csf": "^0.1.11",
"@storybook/csf-plugin": "workspace:*",
"@storybook/ember": "workspace:*",
"@storybook/eslint-config-storybook": "^4.0.0",
@@ -205,8 +205,8 @@
"ts-dedent": "^2.0.0",
"typescript": "^5.4.3",
"util": "^0.12.4",
- "vite": "^4.0.0",
- "vitest": "^1.2.2",
+ "vite": "^5.0.13",
+ "vitest": "^1.6.0",
"wait-on": "^7.0.1"
},
"dependenciesMeta": {
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 2241500c2450..146b84c7da5e 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-create-react-app",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Create React App preset",
"keywords": [
"storybook"
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 704f6d59d308..833b7805a33b 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-html-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index 6a1e0a280a15..16a87a9e1ce6 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-preact-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 771b67e795c7..767f9649217f 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-react-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
"keywords": [
"storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index b516d0b928bf..e7039d11266f 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-server-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index a2e60dd2a774..2811f227da26 100644
--- a/code/presets/svelte-webpack/package.json
+++ b/code/presets/svelte-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-svelte-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index b122128b6ee6..fa0001cfeb06 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-vue3-webpack",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 66dc2ae7b0b2..dbc450b61fe0 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook HTML renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 37a3f71ca970..aef4175f0009 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook Preact renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 19ade57fedf1..49a11b714bd1 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook React renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/template/stories/csf1.stories.tsx b/code/renderers/react/template/stories/csf1.stories.tsx
new file mode 100644
index 000000000000..63a53672b396
--- /dev/null
+++ b/code/renderers/react/template/stories/csf1.stories.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default {
+ component: {},
+ parameters: {
+ chromatic: { disable: true },
+ },
+};
+
+export const Hello1 = () => Hello1
;
+export const Hello2 = () => Hello2
;
diff --git a/code/renderers/react/template/stories/csf2.stories.tsx b/code/renderers/react/template/stories/csf2.stories.tsx
new file mode 100644
index 000000000000..6b78e54e36e2
--- /dev/null
+++ b/code/renderers/react/template/stories/csf2.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default {
+ component: {},
+ parameters: {
+ chromatic: { disable: true },
+ },
+};
+
+const Template = ({ label }: { label: string }) => {label}
;
+Template.args = { label: 'Hello' };
+
+export const Hello1 = Template.bind({});
+
+export const Hello2 = Template.bind({});
+
+export const Hello3 = Template.bind({});
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 01ce95136d61..3646540c0d07 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook Server renderer",
"keywords": [
"storybook"
@@ -47,7 +47,7 @@
},
"dependencies": {
"@storybook/components": "workspace:^",
- "@storybook/csf": "0.1.11",
+ "@storybook/csf": "^0.1.11",
"@storybook/global": "^5.0.0",
"@storybook/manager-api": "workspace:^",
"@storybook/preview-api": "workspace:^",
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index a5076f7b8972..ea51d463e853 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook Svelte renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index ff2881aadbe2..8eda47f81277 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.2",
"description": "Storybook Vue 3 renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap
index cbe74a47b7d6..39e2654bcff4 100644
--- a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap
+++ b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap
@@ -157,12 +157,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"value": {
"name": "object",
"required": false,
- "value": {
- "nestedProp": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
},
},
@@ -183,12 +178,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"value": {
"name": "object",
"required": false,
- "value": {
- "nestedProp": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
},
},
@@ -279,12 +269,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": true,
- "value": {
- "foo": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
},
"literalFromContext": {
@@ -325,12 +310,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": true,
- "value": {
- "nestedProp": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
},
"nestedIntersection": {
@@ -347,16 +327,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": true,
- "value": {
- "additionalProp": {
- "name": "string",
- "required": true,
- },
- "nestedProp": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
},
"nestedOptional": {
@@ -377,22 +348,12 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
{
"name": "object",
"required": false,
- "value": {
- "nestedProp": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
{
"name": "object",
"required": false,
- "value": {
- "nestedProp": {
- "name": "string",
- "required": true,
- },
- },
+ "value": {},
},
],
},
@@ -411,13 +372,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1
"type": {
"name": "object",
"required": false,
- "value": {
- "recursive": {
- "name": "other",
- "required": true,
- "value": "MyNestedRecursiveProps",
- },
- },
+ "value": {},
},
},
"stringArray": {
diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts
index 76c52cc755a7..31f4d19dc163 100644
--- a/code/renderers/vue3/src/docs/extractArgTypes.ts
+++ b/code/renderers/vue3/src/docs/extractArgTypes.ts
@@ -1,3 +1,4 @@
+import type { VueDocgenInfo, VueDocgenInfoEntry, VueDocgenPlugin } from '@storybook/vue3-vite';
import type { ExtractedProp } from 'storybook/internal/docs-tools';
import {
convert,
@@ -6,7 +7,6 @@ import {
type ArgTypesExtractor,
} from 'storybook/internal/docs-tools';
import type { SBType, StrictArgTypes, StrictInputType } from 'storybook/internal/types';
-import type { VueDocgenInfo, VueDocgenInfoEntry, VueDocgenPlugin } from '@storybook/vue3-vite';
type PropertyMetaSchema = VueDocgenInfoEntry<'vue-component-meta', 'props'>['schema'];
@@ -283,17 +283,12 @@ export const convertVueComponentMetaProp = (
};
}
- // recursively/deeply convert all properties of the object
case 'object':
return {
name: 'object',
- value: Object.entries(schema.schema ?? {}).reduce>(
- (obj, [propName, propSchema]) => {
- obj[propName] = convertVueComponentMetaProp(propSchema);
- return obj;
- },
- {}
- ),
+ // while Storybook generates simple JSON object controls, nested schemas don't have specialized controls
+ // so we don't need to recursively map the object schema here
+ value: {},
required,
};
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index d695d7979c37..4f92bcd9cb27 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -1,304 +1,250 @@
-import { describe, expect, it } from 'vitest';
-
+import { expect, test } from 'vitest';
+import { h } from 'vue';
+import type { SourceCodeGeneratorContext } from './sourceDecorator';
import {
- mapAttributesAndDirectives,
- generateAttributesSource,
- attributeSource,
- htmlEventAttributeToVueEventAttribute as htmlEventToVueEvent,
+ generatePropsSourceCode,
+ generateSlotSourceCode,
+ generateSourceCode,
+ getFunctionParamNames,
+ parseDocgenInfo,
} from './sourceDecorator';
-expect.addSnapshotSerializer({
- print: (val: any) => val,
- test: (val: unknown) => typeof val === 'string',
-});
+test('should generate source code for props', () => {
+ const ctx: SourceCodeGeneratorContext = {
+ scriptVariables: {},
+ imports: {},
+ };
-describe('Vue3: sourceDecorator->mapAttributesAndDirective()', () => {
- it('camelCase boolean Arg', () => {
- expect(mapAttributesAndDirectives({ camelCaseBooleanArg: true })).toMatchInlineSnapshot(`
- [
- {
- arg: {
- content: camel-case-boolean-arg,
- loc: {
- source: camel-case-boolean-arg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: true,
- },
- },
- loc: {
- source: :camel-case-boolean-arg="true",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- ]
- `);
- });
- it('camelCase string Arg', () => {
- expect(mapAttributesAndDirectives({ camelCaseStringArg: 'foo' })).toMatchInlineSnapshot(`
- [
- {
- arg: {
- content: camel-case-string-arg,
- loc: {
- source: camel-case-string-arg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: foo,
- },
- },
- loc: {
- source: camel-case-string-arg="foo",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- ]
- `);
- });
- it('boolean arg', () => {
- expect(mapAttributesAndDirectives({ booleanarg: true })).toMatchInlineSnapshot(`
- [
- {
- arg: {
- content: booleanarg,
- loc: {
- source: booleanarg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: true,
- },
- },
- loc: {
- source: :booleanarg="true",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- ]
- `);
- });
- it('string arg', () => {
- expect(mapAttributesAndDirectives({ stringarg: 'bar' })).toMatchInlineSnapshot(`
- [
- {
- arg: {
- content: stringarg,
- loc: {
- source: stringarg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: bar,
- },
- },
- loc: {
- source: stringarg="bar",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- ]
- `);
- });
- it('number arg', () => {
- expect(mapAttributesAndDirectives({ numberarg: 2023 })).toMatchInlineSnapshot(`
- [
- {
- arg: {
- content: numberarg,
- loc: {
- source: numberarg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: 2023,
- },
- },
- loc: {
- source: :numberarg="2023",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- ]
- `);
- });
- it('camelCase boolean, string, and number Args', () => {
- expect(
- mapAttributesAndDirectives({
- camelCaseBooleanArg: true,
- camelCaseStringArg: 'foo',
- cameCaseNumberArg: 2023,
- })
- ).toMatchInlineSnapshot(`
- [
- {
- arg: {
- content: camel-case-boolean-arg,
- loc: {
- source: camel-case-boolean-arg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: true,
- },
- },
- loc: {
- source: :camel-case-boolean-arg="true",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- {
- arg: {
- content: camel-case-string-arg,
- loc: {
- source: camel-case-string-arg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: foo,
- },
- },
- loc: {
- source: camel-case-string-arg="foo",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- {
- arg: {
- content: came-case-number-arg,
- loc: {
- source: came-case-number-arg,
- },
- },
- exp: {
- isStatic: false,
- loc: {
- source: 2023,
- },
- },
- loc: {
- source: :came-case-number-arg="2023",
- },
- modifiers: [
- ,
- ],
- name: bind,
- type: 6,
- },
- ]
- `);
+ const code = generatePropsSourceCode(
+ {
+ a: 'foo',
+ b: '"I am double quoted"',
+ c: 42,
+ d: true,
+ e: false,
+ f: [1, 2, 3],
+ g: {
+ g1: 'foo',
+ g2: 42,
+ },
+ h: undefined,
+ i: null,
+ j: '',
+ k: BigInt(9007199254740991),
+ l: Symbol(),
+ m: Symbol('foo'),
+ modelValue: 'test-v-model',
+ otherModelValue: 42,
+ default: 'default slot',
+ testSlot: 'test slot',
+ },
+ ['default', 'testSlot'],
+ ['update:modelValue', 'update:otherModelValue'],
+ ctx
+ );
+
+ expect(code).toBe(
+ `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="f" :g="g" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')" v-model="modelValue" v-model:otherModelValue="otherModelValue"`
+ );
+
+ expect(ctx.scriptVariables).toStrictEqual({
+ f: `[1,2,3]`,
+ g: `{"g1":"foo","g2":42}`,
+ modelValue: 'ref("test-v-model")',
+ otherModelValue: 'ref(42)',
});
+
+ expect(Array.from(ctx.imports.vue.values())).toStrictEqual(['ref']);
});
-describe('Vue3: sourceDecorator->generateAttributesSource()', () => {
- it('camelCase boolean Arg', () => {
- expect(
- generateAttributesSource(
- mapAttributesAndDirectives({ camelCaseBooleanArg: true }),
- { camelCaseBooleanArg: true },
- [{ camelCaseBooleanArg: { type: 'boolean' } }] as any
- )
- ).toMatchInlineSnapshot(`:camel-case-boolean-arg="true"`);
- });
- it('camelCase string Arg', () => {
- expect(
- generateAttributesSource(
- mapAttributesAndDirectives({ camelCaseStringArg: 'foo' }),
- { camelCaseStringArg: 'foo' },
- [{ camelCaseStringArg: { type: 'string' } }] as any
- )
- ).toMatchInlineSnapshot(`camel-case-string-arg="foo"`);
+test('should generate source code for slots', () => {
+ // slot code generator should support primitive values (string, number etc.)
+ // but also VNodes (e.g. created using h()) so custom Vue components can also be used
+ // inside slots with proper generated code
+
+ const slots = {
+ default: 'default content',
+ a: 'a content',
+ b: 42,
+ c: true,
+ // single VNode without props
+ d: h('div', 'd content'),
+ // VNode with props and single child
+ e: h('div', { style: 'color:red' }, 'e content'),
+ // VNode with props and single child returned as getter
+ f: h('div', { style: 'color:red' }, () => 'f content'),
+ // VNode with multiple children
+ g: h('div', { style: 'color:red' }, [
+ 'child 1',
+ h('span', { style: 'color:green' }, 'child 2'),
+ ]),
+ // VNode multiple children but returned as getter
+ h: h('div', { style: 'color:red' }, () => [
+ 'child 1',
+ h('span', { style: 'color:green' }, 'child 2'),
+ ]),
+ // VNode with multiple and nested children
+ i: h('div', { style: 'color:red' }, [
+ 'child 1',
+ h('span', { style: 'color:green' }, ['nested child 1', h('p', 'nested child 2')]),
+ ]),
+ j: ['child 1', 'child 2'],
+ k: null,
+ l: { foo: 'bar' },
+ m: BigInt(9007199254740991),
+ };
+
+ const expectedCode = `default content
+
+a content
+
+42
+
+true
+
+d content
+
+e content
+
+f content
+
+child 1
+child 2
+
+child 1
+child 2
+
+child 1
+
nested child 1
+nested child 2