@storybook/html 7.6.0-alpha.3 → 7.6.0-alpha.5

package/dist/entry-preview-docs.d.ts

@@ -0,0 +1,21 @@
+import { DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
+import { SourceType } from '@storybook/docs-tools';
+import { H as HtmlRenderer } from './types-43cfeb83.js';
+
+declare const decorators: DecoratorFunction<HtmlRenderer>[];
+declare const parameters: {
+    docs: {
+        story: {
+            inline: boolean;
+        };
+        source: {
+            type: SourceType;
+            language: string;
+            code: undefined;
+            excludeDecorators: undefined;
+        };
+    };
+};
+declare const argTypesEnhancers: ArgTypesEnhancer[];
+
+export { argTypesEnhancers, decorators, parameters };

package/dist/entry-preview-docs.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),import_preview_api=require("@storybook/preview-api");function skipSourceRender(context){var _a;let sourceParams=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}var sourceDecorator=(storyFn,context)=>{var _a,_b;let story=storyFn(),renderedForSource=(_b=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):story,source;return skipSourceRender(context)||(typeof renderedForSource=="string"?source=renderedForSource:renderedForSource instanceof Element&&(source=renderedForSource.outerHTML)),(0,import_preview_api.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,args:unmappedArgs,source})}),story};var decorators=[sourceDecorator],parameters={docs:{story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});

package/dist/entry-preview-docs.mjs

@@ -0,0 +1,6 @@
+import { SourceType, enhanceArgTypes, SNIPPET_RENDERED } from '@storybook/docs-tools';
+import { useEffect, addons } from '@storybook/preview-api';
+
+function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}var sourceDecorator=(storyFn,context)=>{let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;return skipSourceRender(context)||(typeof renderedForSource=="string"?source=renderedForSource:renderedForSource instanceof Element&&(source=renderedForSource.outerHTML)),useEffect(()=>{let{id,unmappedArgs}=context;source&&addons.getChannel().emit(SNIPPET_RENDERED,{id,args:unmappedArgs,source});}),story};var decorators=[sourceDecorator],parameters={docs:{story:{inline:!0},source:{type:SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},argTypesEnhancers=[enhanceArgTypes];
+
+export { argTypesEnhancers, decorators, parameters };

package/dist/entry-preview.d.ts

@@ -0,0 +1,10 @@
+import { H as HtmlRenderer, P as Parameters } from './types-43cfeb83.js';
+import { ArgsStoryFn, RenderContext } from '@storybook/types';
+import '@storybook/docs-tools';
+
+declare const render: ArgsStoryFn<HtmlRenderer>;
+declare function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<HtmlRenderer>, canvasElement: HtmlRenderer['canvasElement']): void;
+
+declare const parameters: Parameters;
+
+export { parameters, render, renderToCanvas };

package/dist/entry-preview.js

@@ -0,0 +1,7 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_preview_api=require("@storybook/preview-api"),{Node}=import_global.global,render=(args,context)=>{let{id,component:Component}=context;if(typeof Component=="string"){let output=Component;return Object.keys(args).forEach(key=>{output=output.replace(`{{${key}}}`,args[key])}),output}if(Component instanceof HTMLElement){let output=Component.cloneNode(!0);return Object.keys(args).forEach(key=>{output.setAttribute(key,typeof args[key]=="string"?args[key]:JSON.stringify(args[key]))}),output}if(typeof Component=="function")return Component(args,context);throw console.warn(import_ts_dedent.dedent`
+    Storybook's HTML renderer only supports rendering DOM elements and strings.
+    Received: ${Component}
+  `),new Error(`Unable to render story ${id}`)};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&forceRemount===!1)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var parameters={renderer:"html"};0&&(module.exports={parameters,render,renderToCanvas});

package/dist/entry-preview.mjs

@@ -0,0 +1,5 @@
+export { render, renderToCanvas } from './chunk-JHBKUHDQ.mjs';
+
+var parameters={renderer:"html"};
+
+export { parameters };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { H as HtmlRenderer } from './types-a021d1c4.js';
+import { H as HtmlRenderer } from './types-43cfeb83.js';
 import '@storybook/docs-tools';
 
 interface ClientApi extends Addon_ClientStoryApi<HtmlRenderer['storyResult']> {

package/dist/preset.d.ts

@@ -0,0 +1,5 @@
+import { StorybookConfig } from '@storybook/types';
+
+declare const previewAnnotations: StorybookConfig['previewAnnotations'];
+
+export { previewAnnotations };

package/dist/preset.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_path=require("path"),previewAnnotations=async(input,options)=>{let docsEnabled=Object.keys(await options.presets.apply("docs",{},options)).length>0;return[].concat(input).concat([(0,import_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={previewAnnotations});

package/dist/{types-a021d1c4.d.ts → types-43cfeb83.d.ts}

@@ -21,4 +21,4 @@ interface Parameters {
     };
 }
 
-export { HtmlRenderer as H, Parameters as P, StoryFnHtmlReturnType as S };
+export { HtmlRenderer as H, Parameters as P };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.5",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -49,11 +47,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.6.0-alpha.3",
-    "@storybook/docs-tools": "7.6.0-alpha.3",
+    "@storybook/core-client": "7.6.0-alpha.5",
+    "@storybook/docs-tools": "7.6.0-alpha.5",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.6.0-alpha.3",
-    "@storybook/types": "7.6.0-alpha.3",
+    "@storybook/preview-api": "7.6.0-alpha.5",
+    "@storybook/types": "7.6.0-alpha.5",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -71,7 +69,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },

package/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

package/template/cli/js/Page.stories.js

@@ -1,4 +1,4 @@
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 import { createPage } from './Page';
 
 export default {
@@ -16,9 +16,12 @@ export const LoggedOut = {};
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

package/template/cli/ts-3-8/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 import { createPage } from './Page';
 
 const meta: Meta = {
@@ -19,9 +19,12 @@ export const LoggedOut: StoryObj = {};
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

package/template/cli/ts-4-9/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 import { createPage } from './Page';
 
 const meta = {
@@ -19,9 +19,12 @@ export const LoggedOut: StoryObj = {};
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

package/dist/config.d.ts

@@ -1,13 +0,0 @@
-import { S as StoryFnHtmlReturnType, H as HtmlRenderer, P as Parameters } from './types-a021d1c4.js';
-import { Addon_DecoratorFunction, ArgTypesEnhancer, ArgsStoryFn, RenderContext } from '@storybook/types';
-import '@storybook/docs-tools';
-
-declare const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[];
-declare const argTypesEnhancers: ArgTypesEnhancer[];
-
-declare const render: ArgsStoryFn<HtmlRenderer>;
-declare function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<HtmlRenderer>, canvasElement: HtmlRenderer['canvasElement']): void;
-
-declare const parameters: Parameters;
-
-export { argTypesEnhancers, decorators, parameters, render, renderToCanvas };

package/dist/config.js

@@ -1,7 +0,0 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var config_exports={};__export(config_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(config_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),import_preview_api=require("@storybook/preview-api");function skipSourceRender(context){var _a;let sourceParams=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){var _a,_b;let story=storyFn(),renderedForSource=(_b=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):story,source;return skipSourceRender(context)||(typeof renderedForSource=="string"?source=renderedForSource:renderedForSource instanceof Element&&(source=renderedForSource.outerHTML)),(0,import_preview_api.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,args:unmappedArgs,source})}),story}var decorators=[sourceDecorator],parameters={docs:{story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_preview_api2=require("@storybook/preview-api"),{Node}=import_global.global,render=(args,context)=>{let{id,component:Component}=context;if(typeof Component=="string"){let output=Component;return Object.keys(args).forEach(key=>{output=output.replace(`{{${key}}}`,args[key])}),output}if(Component instanceof HTMLElement){let output=Component.cloneNode(!0);return Object.keys(args).forEach(key=>{output.setAttribute(key,typeof args[key]=="string"?args[key]:JSON.stringify(args[key]))}),output}if(typeof Component=="function")return Component(args,context);throw console.warn(import_ts_dedent.dedent`
-    Storybook's HTML renderer only supports rendering DOM elements and strings.
-    Received: ${Component}
-  `),new Error(`Unable to render story ${id}`)};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api2.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&forceRemount===!1)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api2.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
-        Did you forget to return the HTML snippet from the story?
-        Use "() => <your snippet or node>" or when defining the story.
-      `})}var parameters2={renderer:"html",...parameters};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -1,7 +0,0 @@
-export { render, renderToCanvas } from './chunk-JHBKUHDQ.mjs';
-import { SourceType, enhanceArgTypes, SNIPPET_RENDERED } from '@storybook/docs-tools';
-import { useEffect, addons } from '@storybook/preview-api';
-
-function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}function sourceDecorator(storyFn,context){let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;return skipSourceRender(context)||(typeof renderedForSource=="string"?source=renderedForSource:renderedForSource instanceof Element&&(source=renderedForSource.outerHTML)),useEffect(()=>{let{id,unmappedArgs}=context;source&&addons.getChannel().emit(SNIPPET_RENDERED,{id,args:unmappedArgs,source});}),story}var decorators=[sourceDecorator],parameters={docs:{story:{inline:!0},source:{type:SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},argTypesEnhancers=[enhanceArgTypes];var parameters2={renderer:"html",...parameters};
-
-export { argTypesEnhancers, decorators, parameters2 as parameters };

package/preview.js

@@ -1 +0,0 @@
-export * from './dist/config';