@storybook/html 6.4.0-alpha.8 → 6.4.0-beta.2

package/dist/cjs/client/preview/config.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "renderToDOM", {
+  enumerable: true,
+  get: function get() {
+    return _render.renderToDOM;
+  }
+});
+exports.parameters = void 0;
+
+var _render = require("./render");
+
+var parameters = {
+  framework: 'html'
+};
+exports.parameters = parameters;

package/dist/cjs/client/preview/index.js

@@ -11,13 +11,11 @@ var _client = require("@storybook/core/client");
 
 require("./globals");
 
-var _render = _interopRequireDefault(require("./render"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _render = require("./render");
 
 /* eslint-disable prefer-destructuring */
 var framework = 'html';
-var api = (0, _client.start)(_render.default);
+var api = (0, _client.start)(_render.renderToDOM);
 
 var storiesOf = function storiesOf(kind, m) {
   return api.clientApi.storiesOf(kind, m).addParameters({

package/dist/cjs/client/preview/render.js

@@ -7,7 +7,7 @@ require("core-js/modules/es.object.freeze.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = renderMain;
+exports.renderToDOM = renderToDOM;
 
 require("core-js/modules/es.function.name.js");
 
@@ -17,7 +17,7 @@ var _global = _interopRequireDefault(require("global"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
-var _clientApi = require("@storybook/client-api");
+var _previewWeb = require("@storybook/preview-web");
 
 var _templateObject;
 
@@ -25,32 +25,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var document = _global.default.document,
-    Node = _global.default.Node;
-var rootElement = document.getElementById('root');
+var Node = _global.default.Node;
 
-function renderMain(_ref) {
+function renderToDOM(_ref, domElement) {
   var storyFn = _ref.storyFn,
       kind = _ref.kind,
       name = _ref.name,
       showMain = _ref.showMain,
       showError = _ref.showError,
-      forceRender = _ref.forceRender;
+      forceRemount = _ref.forceRemount;
   var element = storyFn();
   showMain();
 
   if (typeof element === 'string') {
-    rootElement.innerHTML = element;
-    (0, _clientApi.simulatePageLoad)(rootElement);
+    domElement.innerHTML = element;
+    (0, _previewWeb.simulatePageLoad)(domElement);
   } else if (element instanceof Node) {
-    // Don't re-mount the element if it didn't change and neither did the story
-    if (rootElement.firstChild === element && forceRender === true) {
+    if (domElement.firstChild === element && forceRemount === false) {
       return;
     }
 
-    rootElement.innerHTML = '';
-    rootElement.appendChild(element);
-    (0, _clientApi.simulateDOMContentLoaded)();
+    domElement.innerHTML = '';
+    domElement.appendChild(element);
+    (0, _previewWeb.simulateDOMContentLoaded)();
   } else {
     showError({
       title: "Expecting an HTML snippet or DOM node from the story: \"".concat(name, "\" of \"").concat(kind, "\"."),

package/dist/cjs/client/preview/types-7-0.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/client/preview/config.js

@@ -0,0 +1,4 @@
+export { renderToDOM } from './render';
+export var parameters = {
+  framework: 'html'
+};

package/dist/esm/client/preview/index.js

@@ -3,9 +3,9 @@ import "core-js/modules/es.array.concat.js";
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 var framework = 'html';
-var api = start(render);
+var api = start(renderToDOM);
 export var storiesOf = function storiesOf(kind, m) {
   return api.clientApi.storiesOf(kind, m).addParameters({
     framework: framework

package/dist/esm/client/preview/render.js

@@ -6,33 +6,32 @@ import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.object.freeze.js";
+
+/* eslint-disable no-param-reassign */
 import global from 'global';
 import dedent from 'ts-dedent';
-import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/client-api';
-var document = global.document,
-    Node = global.Node;
-var rootElement = document.getElementById('root');
-export default function renderMain(_ref) {
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
+var Node = global.Node;
+export function renderToDOM(_ref, domElement) {
   var storyFn = _ref.storyFn,
       kind = _ref.kind,
       name = _ref.name,
       showMain = _ref.showMain,
       showError = _ref.showError,
-      forceRender = _ref.forceRender;
+      forceRemount = _ref.forceRemount;
   var element = storyFn();
   showMain();
 
   if (typeof element === 'string') {
-    rootElement.innerHTML = element;
-    simulatePageLoad(rootElement);
+    domElement.innerHTML = element;
+    simulatePageLoad(domElement);
   } else if (element instanceof Node) {
-    // Don't re-mount the element if it didn't change and neither did the story
-    if (rootElement.firstChild === element && forceRender === true) {
+    if (domElement.firstChild === element && forceRemount === false) {
       return;
     }
 
-    rootElement.innerHTML = '';
-    rootElement.appendChild(element);
+    domElement.innerHTML = '';
+    domElement.appendChild(element);
     simulateDOMContentLoaded();
   } else {
     showError({

package/dist/modern/client/preview/config.js

@@ -0,0 +1,4 @@
+export { renderToDOM } from './render';
+export const parameters = {
+  framework: 'html'
+};

package/dist/modern/client/preview/index.js

@@ -1,9 +1,9 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 const framework = 'html';
-const api = start(render);
+const api = start(renderToDOM);
 export const storiesOf = (kind, m) => {
   return api.clientApi.storiesOf(kind, m).addParameters({
     framework

package/dist/modern/client/preview/render.js

@@ -1,33 +1,31 @@
+/* eslint-disable no-param-reassign */
 import global from 'global';
 import dedent from 'ts-dedent';
-import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/client-api';
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 const {
-  document,
   Node
 } = global;
-const rootElement = document.getElementById('root');
-export default function renderMain({
+export function renderToDOM({
   storyFn,
   kind,
   name,
   showMain,
   showError,
-  forceRender
-}) {
+  forceRemount
+}, domElement) {
   const element = storyFn();
   showMain();
 
   if (typeof element === 'string') {
-    rootElement.innerHTML = element;
-    simulatePageLoad(rootElement);
+    domElement.innerHTML = element;
+    simulatePageLoad(domElement);
   } else if (element instanceof Node) {
-    // Don't re-mount the element if it didn't change and neither did the story
-    if (rootElement.firstChild === element && forceRender === true) {
+    if (domElement.firstChild === element && forceRemount === false) {
       return;
     }
 
-    rootElement.innerHTML = '';
-    rootElement.appendChild(element);
+    domElement.innerHTML = '';
+    domElement.appendChild(element);
     simulateDOMContentLoaded();
   } else {
     showError({

package/dist/ts3.4/client/preview/config.d.ts

@@ -0,0 +1,4 @@
+export { renderToDOM } from './render';
+export declare const parameters: {
+    framework: string;
+};

package/dist/ts3.4/client/preview/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
 import { ClientStoryApi, Loadable } from '@storybook/addons';
+import { HtmlFramework } from './types-6-0';
 import './globals';
-import { StoryFnHtmlReturnType, IStorybookSection } from './types';
-interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
+import { IStorybookSection } from './types';
+interface ClientApi extends ClientStoryApi<HtmlFramework['storyResult']> {
     setAddon(addon: any): void;
     configure(loader: Loadable, module: NodeModule): void;
     getStorybook(): IStorybookSection[];

package/dist/ts3.4/client/preview/render.d.ts

@@ -1,2 +1,3 @@
-import { RenderContext } from './types';
-export default function renderMain({ storyFn, kind, name, showMain, showError, forceRender, }: RenderContext): void;
+import { RenderContext } from '@storybook/store';
+import { HtmlFramework } from './types-6-0';
+export declare function renderToDOM({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<HtmlFramework>, domElement: HTMLElement): void;

package/dist/ts3.4/client/preview/types-6-0.d.ts

@@ -1,16 +1,34 @@
-import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
 import { StoryFnHtmlReturnType } from './types';
 export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type HTMLReturnType = StoryFnHtmlReturnType;
+export declare type HtmlFramework = {
+    component: HTMLElement;
+    storyResult: StoryFnHtmlReturnType;
+};
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export declare type Meta<Args = DefaultArgs> = BaseMeta<HTMLElement> & Annotations<Args, HTMLReturnType>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<HtmlFramework, TArgs>;
 /**
- * Story function that represents a component example.
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type Story<Args = DefaultArgs> = BaseStory<Args, HTMLReturnType> & Annotations<Args, HTMLReturnType>;
+export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ *
+ * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
+ *
+ */
+export declare type Story<TArgs = Args> = StoryFn<TArgs>;

package/dist/ts3.4/client/preview/types-7-0.d.ts

@@ -0,0 +1,9 @@
+import { Args } from '@storybook/csf';
+import { StoryObj } from './types-6-0';
+export { StoryFn, StoryObj, Meta } from './types-6-0';
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type Story<TArgs = Args> = StoryObj<TArgs>;

package/dist/ts3.4/client/preview/types.d.ts

@@ -2,7 +2,7 @@ export { RenderContext } from '@storybook/core';
 export declare type StoryFnHtmlReturnType = string | Node;
 export interface IStorybookStory {
     name: string;
-    render: () => any;
+    render: (context: any) => any;
 }
 export interface IStorybookSection {
     kind: string;

package/dist/ts3.9/client/preview/config.d.ts

@@ -0,0 +1,4 @@
+export { renderToDOM } from './render';
+export declare const parameters: {
+    framework: string;
+};

package/dist/ts3.9/client/preview/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
 import { ClientStoryApi, Loadable } from '@storybook/addons';
+import { HtmlFramework } from './types-6-0';
 import './globals';
-import { StoryFnHtmlReturnType, IStorybookSection } from './types';
-interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
+import { IStorybookSection } from './types';
+interface ClientApi extends ClientStoryApi<HtmlFramework['storyResult']> {
     setAddon(addon: any): void;
     configure(loader: Loadable, module: NodeModule): void;
     getStorybook(): IStorybookSection[];

package/dist/ts3.9/client/preview/render.d.ts

@@ -1,2 +1,3 @@
-import { RenderContext } from './types';
-export default function renderMain({ storyFn, kind, name, showMain, showError, forceRender, }: RenderContext): void;
+import { RenderContext } from '@storybook/store';
+import { HtmlFramework } from './types-6-0';
+export declare function renderToDOM({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<HtmlFramework>, domElement: HTMLElement): void;

package/dist/ts3.9/client/preview/types-6-0.d.ts

@@ -1,16 +1,34 @@
-import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
 import { StoryFnHtmlReturnType } from './types';
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type HTMLReturnType = StoryFnHtmlReturnType;
+export declare type HtmlFramework = {
+    component: HTMLElement;
+    storyResult: StoryFnHtmlReturnType;
+};
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export declare type Meta<Args = DefaultArgs> = BaseMeta<HTMLElement> & Annotations<Args, HTMLReturnType>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<HtmlFramework, TArgs>;
 /**
- * Story function that represents a component example.
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type Story<Args = DefaultArgs> = BaseStory<Args, HTMLReturnType> & Annotations<Args, HTMLReturnType>;
+export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ *
+ * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
+ *
+ */
+export declare type Story<TArgs = Args> = StoryFn<TArgs>;

package/dist/ts3.9/client/preview/types-7-0.d.ts

@@ -0,0 +1,9 @@
+import { Args } from '@storybook/csf';
+import type { StoryObj } from './types-6-0';
+export type { StoryFn, StoryObj, Meta } from './types-6-0';
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type Story<TArgs = Args> = StoryObj<TArgs>;

package/dist/ts3.9/client/preview/types.d.ts

@@ -2,7 +2,7 @@ export type { RenderContext } from '@storybook/core';
 export declare type StoryFnHtmlReturnType = string | Node;
 export interface IStorybookStory {
     name: string;
-    render: () => any;
+    render: (context: any) => any;
 }
 export interface IStorybookSection {
     kind: string;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@storybook/html",
-  "version": "6.4.0-alpha.8",
+  "version": "6.4.0-beta.2",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/html",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/html",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -24,7 +24,7 @@
   "types": "dist/ts3.9/client/index.d.ts",
   "typesVersions": {
     "<3.8": {
-      "*": [
+      "dist/ts3.9/*": [
         "dist/ts3.4/*"
       ]
     }
@@ -45,10 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.8",
-    "@storybook/client-api": "6.4.0-alpha.8",
-    "@storybook/core": "6.4.0-alpha.8",
-    "@storybook/core-common": "6.4.0-alpha.8",
+    "@storybook/addons": "6.4.0-beta.2",
+    "@storybook/client-api": "6.4.0-beta.2",
+    "@storybook/core": "6.4.0-beta.2",
+    "@storybook/core-common": "6.4.0-beta.2",
+    "@storybook/csf": "0.0.2--canary.6aca495.0",
+    "@storybook/preview-web": "6.4.0-beta.2",
+    "@storybook/store": "6.4.0-beta.2",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -68,6 +71,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1ea7d55df3dc036f6ea091cb09cdc8f9512bda3d",
+  "gitHead": "3358e1e90c4e46dfd28e7ab822d5d20579463186",
   "sbmodern": "dist/modern/client/index.js"
 }

package/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};