@storybook/html 7.6.0-beta.2 → 8.0.0-alpha.0

package/dist/entry-preview.mjs

@@ -1,5 +1,13 @@
-export { render, renderToCanvas } from './chunk-JHBKUHDQ.mjs';
+import { global } from '@storybook/global';
+import { dedent } from 'ts-dedent';
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
 
-var parameters={renderer:"html"};
+var {Node}=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(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,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&forceRemount===!1)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description: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"};
 
-export { parameters };
+export { parameters, render, renderToCanvas };

package/dist/index.d.ts

@@ -1,18 +1,8 @@
-import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
+import { 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-43cfeb83.js';
 import '@storybook/docs-tools';
 
-interface ClientApi extends Addon_ClientStoryApi<HtmlRenderer['storyResult']> {
-    configure(loader: Addon_Loadable, module: NodeModule): void;
-    forceReRender(): void;
-    raw: () => any;
-}
-declare const storiesOf: ClientApi['storiesOf'];
-declare const configure: ClientApi['configure'];
-declare const forceReRender: ClientApi['forceReRender'];
-declare const raw: ClientApi['raw'];
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -46,4 +36,4 @@ type Loader<TArgs = StrictArgs> = LoaderFunction<HtmlRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<HtmlRenderer, TArgs>;
 type Preview = ProjectAnnotations<HtmlRenderer>;
 
-export { Decorator, HtmlRenderer, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, configure, forceReRender, raw, storiesOf };
+export { Decorator, HtmlRenderer, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj };

package/dist/index.js

@@ -1,7 +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 src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="HTML";var import_preview_api2=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_preview_api=require("@storybook/preview-api"),{Node}=import_global2.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 RENDERER="html",api=(0,import_preview_api2.start)(renderToCanvas,{render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,storiesOf});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __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 src_exports={};module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="HTML";var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());

package/dist/index.mjs

@@ -1,7 +1,3 @@
-import { renderToCanvas, render } from './chunk-JHBKUHDQ.mjs';
 import { global } from '@storybook/global';
-import { start } from '@storybook/preview-api';
 
-var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="HTML";var RENDERER="html",api=start(renderToCanvas,{render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;typeof module<"u"&&module?.hot?.decline();
-
-export { configure, forceReRender, raw, storiesOf };
+var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="HTML";typeof module<"u"&&module?.hot?.decline();

package/dist/preset.d.ts

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

package/dist/preset.js

@@ -1 +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});
+"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "7.6.0-beta.2",
+  "version": "8.0.0-alpha.0",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -47,15 +47,14 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.6.0-beta.2",
-    "@storybook/docs-tools": "7.6.0-beta.2",
+    "@storybook/docs-tools": "8.0.0-alpha.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.6.0-beta.2",
-    "@storybook/types": "7.6.0-beta.2",
+    "@storybook/preview-api": "8.0.0-alpha.0",
+    "@storybook/types": "8.0.0-alpha.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.9.3"
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "@babel/core": "*"

package/template/cli/js/Button.stories.js

@@ -1,6 +1,6 @@
 import { createButton } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 export default {
   title: 'Example/Button',
   tags: ['autodocs'],
@@ -21,7 +21,7 @@ export default {
   },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
   args: {
     primary: true,

package/template/cli/js/Header.stories.js

@@ -2,14 +2,14 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/html/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args) => createHeader(args),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },

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

@@ -5,14 +5,14 @@ export default {
   title: 'Example/Page',
   render: () => createPage(),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

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

@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/html';
 import type { ButtonProps } from './Button';
 import { createButton } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
   tags: ['autodocs'],
@@ -26,7 +26,7 @@ const meta: Meta<ButtonProps> = {
 export default meta;
 type Story = StoryObj<ButtonProps>;
 
-// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,

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

@@ -4,14 +4,14 @@ import { createHeader } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/html/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args) => createHeader(args),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },

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

@@ -6,7 +6,7 @@ const meta: Meta = {
   title: 'Example/Page',
   render: () => createPage(),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
 };
@@ -15,7 +15,7 @@ export default meta;
 
 export const LoggedOut: StoryObj = {};
 
-// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

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

@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/html';
 import type { ButtonProps } from './Button';
 import { createButton } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: 'Example/Button',
   tags: ['autodocs'],
@@ -26,7 +26,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<ButtonProps>;
 
-// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,

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

@@ -4,14 +4,14 @@ import { createHeader } from './Header';
 
 const meta = {
   title: 'Example/Header',
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/html/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args) => createHeader(args),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },

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

@@ -6,7 +6,7 @@ const meta = {
   title: 'Example/Page',
   render: () => createPage(),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
 } satisfies Meta;
@@ -15,7 +15,7 @@ export default meta;
 
 export const LoggedOut: StoryObj = {};
 
-// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/dist/chunk-JHBKUHDQ.mjs

@@ -1,13 +0,0 @@
-import { global } from '@storybook/global';
-import { dedent } from 'ts-dedent';
-import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
-
-var {Node}=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(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,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&forceRemount===!1)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent`
-        Did you forget to return the HTML snippet from the story?
-        Use "() => <your snippet or node>" or when defining the story.
-      `});}
-
-export { render, renderToCanvas };