@storybook/preact 6.4.0-alpha.4 → 6.4.0-alpha.40

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: 'preact'
+};
+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 = 'preact';
-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

@@ -27,7 +27,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = renderMain;
+exports.renderToDOM = renderToDOM;
 
 require("core-js/modules/es.function.name.js");
 
@@ -35,8 +35,6 @@ require("core-js/modules/es.array.concat.js");
 
 var preact = _interopRequireWildcard(require("preact"));
 
-var _global = _interopRequireDefault(require("global"));
-
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
 var _templateObject;
@@ -49,29 +47,28 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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;
-var rootElement = document ? document.getElementById('root') : null;
 var renderedStory;
 
-function preactRender(story) {
+function preactRender(story, domElement) {
   if (preact.Fragment) {
     // Preact 10 only:
-    preact.render(story, rootElement);
+    preact.render(story, domElement);
   } else {
-    renderedStory = preact.render(story, rootElement, renderedStory);
+    renderedStory = preact.render(story, domElement, renderedStory);
   }
 }
 
 var StoryHarness = function StoryHarness(_ref) {
   var showError = _ref.showError,
       name = _ref.name,
-      kind = _ref.kind,
-      storyFn = _ref.storyFn;
+      title = _ref.title,
+      storyFn = _ref.storyFn,
+      domElement = _ref.domElement;
   var content = preact.h(storyFn, null);
 
   if (!content) {
     showError({
-      title: "Expecting a Preact element from the story: \"".concat(name, "\" of \"").concat(kind, "\"."),
+      title: "Expecting a Preact element from the story: \"".concat(name, "\" of \"").concat(title, "\"."),
       description: (0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Did you forget to return the Preact element from the story?\n        Use \"() => (<MyComp/>)\" or \"() => { return <MyComp/>; }\" when defining the story.\n      "])))
     });
     return null;
@@ -80,24 +77,24 @@ var StoryHarness = function StoryHarness(_ref) {
   return content;
 };
 
-function renderMain(_ref2) {
+function renderToDOM(_ref2, domElement) {
   var storyFn = _ref2.storyFn,
-      kind = _ref2.kind,
+      title = _ref2.title,
       name = _ref2.name,
       showMain = _ref2.showMain,
       showError = _ref2.showError,
-      forceRender = _ref2.forceRender;
+      forceRemount = _ref2.forceRemount;
 
-  // But forceRender means that it's the same story, so we want to keep the state in that case.
-  if (!forceRender) {
-    preactRender(null);
+  if (forceRemount) {
+    preactRender(null, domElement);
   }
 
   showMain();
   preactRender(preact.h(StoryHarness, {
     name: name,
-    kind: kind,
+    title: title,
     showError: showError,
-    storyFn: storyFn
-  }));
+    storyFn: storyFn,
+    domElement: domElement
+  }), domElement);
 }

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: 'preact'
+};

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 = 'preact';
-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

@@ -7,31 +7,29 @@ import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.object.freeze.js";
 import * as preact from 'preact';
-import global from 'global';
 import dedent from 'ts-dedent';
-var document = global.document;
-var rootElement = document ? document.getElementById('root') : null;
 var renderedStory;
 
-function preactRender(story) {
+function preactRender(story, domElement) {
   if (preact.Fragment) {
     // Preact 10 only:
-    preact.render(story, rootElement);
+    preact.render(story, domElement);
   } else {
-    renderedStory = preact.render(story, rootElement, renderedStory);
+    renderedStory = preact.render(story, domElement, renderedStory);
   }
 }
 
 var StoryHarness = function StoryHarness(_ref) {
   var showError = _ref.showError,
       name = _ref.name,
-      kind = _ref.kind,
-      storyFn = _ref.storyFn;
+      title = _ref.title,
+      storyFn = _ref.storyFn,
+      domElement = _ref.domElement;
   var content = preact.h(storyFn, null);
 
   if (!content) {
     showError({
-      title: "Expecting a Preact element from the story: \"".concat(name, "\" of \"").concat(kind, "\"."),
+      title: "Expecting a Preact element from the story: \"".concat(name, "\" of \"").concat(title, "\"."),
       description: dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Did you forget to return the Preact element from the story?\n        Use \"() => (<MyComp/>)\" or \"() => { return <MyComp/>; }\" when defining the story.\n      "])))
     });
     return null;
@@ -40,24 +38,24 @@ var StoryHarness = function StoryHarness(_ref) {
   return content;
 };
 
-export default function renderMain(_ref2) {
+export function renderToDOM(_ref2, domElement) {
   var storyFn = _ref2.storyFn,
-      kind = _ref2.kind,
+      title = _ref2.title,
       name = _ref2.name,
       showMain = _ref2.showMain,
       showError = _ref2.showError,
-      forceRender = _ref2.forceRender;
+      forceRemount = _ref2.forceRemount;
 
-  // But forceRender means that it's the same story, so we want to keep the state in that case.
-  if (!forceRender) {
-    preactRender(null);
+  if (forceRemount) {
+    preactRender(null, domElement);
   }
 
   showMain();
   preactRender(preact.h(StoryHarness, {
     name: name,
-    kind: kind,
+    title: title,
     showError: showError,
-    storyFn: storyFn
-  }));
+    storyFn: storyFn,
+    domElement: domElement
+  }), domElement);
 }

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

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

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 = 'preact';
-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,32 +1,28 @@
 import * as preact from 'preact';
-import global from 'global';
 import dedent from 'ts-dedent';
-const {
-  document
-} = global;
-const rootElement = document ? document.getElementById('root') : null;
 let renderedStory;
 
-function preactRender(story) {
+function preactRender(story, domElement) {
   if (preact.Fragment) {
     // Preact 10 only:
-    preact.render(story, rootElement);
+    preact.render(story, domElement);
   } else {
-    renderedStory = preact.render(story, rootElement, renderedStory);
+    renderedStory = preact.render(story, domElement, renderedStory);
   }
 }
 
 const StoryHarness = ({
   showError,
   name,
-  kind,
-  storyFn
+  title,
+  storyFn,
+  domElement
 }) => {
   const content = preact.h(storyFn, null);
 
   if (!content) {
     showError({
-      title: `Expecting a Preact element from the story: "${name}" of "${kind}".`,
+      title: `Expecting a Preact element from the story: "${name}" of "${title}".`,
       description: dedent`
         Did you forget to return the Preact element from the story?
         Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
@@ -38,24 +34,24 @@ const StoryHarness = ({
   return content;
 };
 
-export default function renderMain({
+export function renderToDOM({
   storyFn,
-  kind,
+  title,
   name,
   showMain,
   showError,
-  forceRender
-}) {
-  // But forceRender means that it's the same story, so we want to keep the state in that case.
-  if (!forceRender) {
-    preactRender(null);
+  forceRemount
+}, domElement) {
+  if (forceRemount) {
+    preactRender(null, domElement);
   }
 
   showMain();
   preactRender(preact.h(StoryHarness, {
     name,
-    kind,
+    title,
     showError,
-    storyFn
-  }));
+    storyFn,
+    domElement
+  }), domElement);
 }

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,5 +1,18 @@
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
-import { ClientApi } from './types';
+import { IStorybookSection } from './types';
+import { PreactFramework } from './types-6-0';
+export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']> {
+    setAddon(addon: any): void;
+    configure(loader: Loadable, module: NodeModule): void;
+    getStorybook(): IStorybookSection[];
+    clearDecorators(): void;
+    forceReRender(): void;
+    raw: () => any;
+    load: (...args: any[]) => void;
+}
 export declare const storiesOf: ClientApi['storiesOf'];
 export declare const configure: ClientApi['configure'];
 export declare const addDecorator: ClientApi['addDecorator'];

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 { PreactFramework } from './types-6-0';
+export declare function renderToDOM({ storyFn, title, name, showMain, showError, forceRemount }: RenderContext<PreactFramework>, domElement: HTMLElement): void;

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

@@ -1,18 +1,35 @@
 import { AnyComponent } from 'preact';
-import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
 import { StoryFnPreactReturnType } from './types';
-export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type PreactComponent = AnyComponent<any, any>;
-declare type PreactReturnType = StoryFnPreactReturnType;
+export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+export declare type PreactFramework = {
+    component: AnyComponent<any, any>;
+    storyResult: StoryFnPreactReturnType;
+};
 /**
  * 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<PreactComponent> & Annotations<Args, PreactReturnType>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<PreactFramework, 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, PreactReturnType> & Annotations<Args, PreactReturnType>;
+export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, 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<PreactFramework, 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

@@ -1,6 +1,3 @@
-/// <reference types="webpack-env" />
-/// <reference types="node" />
-import { ClientStoryApi, Loadable } from '@storybook/addons';
 export { RenderContext } from '@storybook/core';
 export declare type StoryFnPreactReturnType = string | Node | preact.JSX.Element;
 export interface ShowErrorArgs {
@@ -9,18 +6,9 @@ export interface ShowErrorArgs {
 }
 export interface IStorybookStory {
     name: string;
-    render: () => any;
+    render: (context: any) => any;
 }
 export interface IStorybookSection {
     kind: string;
     stories: IStorybookStory[];
 }
-export interface ClientApi extends ClientStoryApi<StoryFnPreactReturnType> {
-    setAddon(addon: any): void;
-    configure(loader: Loadable, module: NodeModule): void;
-    getStorybook(): IStorybookSection[];
-    clearDecorators(): void;
-    forceReRender(): void;
-    raw: () => any;
-    load: (...args: any[]) => void;
-}

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,5 +1,18 @@
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
-import { ClientApi } from './types';
+import { IStorybookSection } from './types';
+import { PreactFramework } from './types-6-0';
+export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']> {
+    setAddon(addon: any): void;
+    configure(loader: Loadable, module: NodeModule): void;
+    getStorybook(): IStorybookSection[];
+    clearDecorators(): void;
+    forceReRender(): void;
+    raw: () => any;
+    load: (...args: any[]) => void;
+}
 export declare const storiesOf: ClientApi['storiesOf'];
 export declare const configure: ClientApi['configure'];
 export declare const addDecorator: ClientApi['addDecorator'];

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 { PreactFramework } from './types-6-0';
+export declare function renderToDOM({ storyFn, title, name, showMain, showError, forceRemount }: RenderContext<PreactFramework>, domElement: HTMLElement): void;

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

@@ -1,18 +1,35 @@
 import { AnyComponent } from 'preact';
-import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
 import { StoryFnPreactReturnType } from './types';
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type PreactComponent = AnyComponent<any, any>;
-declare type PreactReturnType = StoryFnPreactReturnType;
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+export declare type PreactFramework = {
+    component: AnyComponent<any, any>;
+    storyResult: StoryFnPreactReturnType;
+};
 /**
  * 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<PreactComponent> & Annotations<Args, PreactReturnType>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<PreactFramework, 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, PreactReturnType> & Annotations<Args, PreactReturnType>;
+export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, 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<PreactFramework, 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

@@ -1,6 +1,3 @@
-/// <reference types="webpack-env" />
-/// <reference types="node" />
-import { ClientStoryApi, Loadable } from '@storybook/addons';
 export type { RenderContext } from '@storybook/core';
 export declare type StoryFnPreactReturnType = string | Node | preact.JSX.Element;
 export interface ShowErrorArgs {
@@ -9,18 +6,9 @@ export interface ShowErrorArgs {
 }
 export interface IStorybookStory {
     name: string;
-    render: () => any;
+    render: (context: any) => any;
 }
 export interface IStorybookSection {
     kind: string;
     stories: IStorybookStory[];
 }
-export interface ClientApi extends ClientStoryApi<StoryFnPreactReturnType> {
-    setAddon(addon: any): void;
-    configure(loader: Loadable, module: NodeModule): void;
-    getStorybook(): IStorybookSection[];
-    clearDecorators(): void;
-    forceReRender(): void;
-    raw: () => any;
-    load: (...args: any[]) => void;
-}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@storybook/preact",
-  "version": "6.4.0-alpha.4",
+  "version": "6.4.0-alpha.40",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/preact",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/preact",
   "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/*"
       ]
     }
@@ -46,9 +46,11 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@storybook/addons": "6.4.0-alpha.4",
-    "@storybook/core": "6.4.0-alpha.4",
-    "@storybook/core-common": "6.4.0-alpha.4",
+    "@storybook/addons": "6.4.0-alpha.40",
+    "@storybook/core": "6.4.0-alpha.40",
+    "@storybook/core-common": "6.4.0-alpha.40",
+    "@storybook/csf": "0.0.2--canary.6aca495.0",
+    "@storybook/store": "6.4.0-alpha.40",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -72,6 +74,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0feb4147b27a31982db054a4fc5954515d506f7d",
+  "gitHead": "6b767d7c8f81b45cccd89a224223963fa751ad91",
   "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,
+};