@stencil/storybook-plugin 0.0.1 → 0.0.3

package/README.md

@@ -13,7 +13,7 @@ npx storybook@next init
 to setup a new Storybook project. Select any preset available, e.g. Lit and finish the setup process. After, install the StencilJS preset.
 
 ```sh
-npm i --save-dev @stencil/storybook
+npm i --save-dev @stencil/storybook-plugin
 ```
 
 Last, update the `.storybook/main.ts` file as following:

package/dist/addArgsHelpers.d.ts

@@ -0,0 +1,10 @@
+import type { Renderer, ArgsEnhancer } from "@storybook/types";
+/**
+ * Automatically add action args for argTypes whose name
+ * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ */
+export declare const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer>;
+/**
+ * Add action args for list of strings.
+ */
+export declare const addActionsFromArgTypes: ArgsEnhancer<Renderer>;

package/dist/addArgsHelpers.js

@@ -0,0 +1,37 @@
+// This file is entirely copied from @storybook/addon-actions (changing the action import)
+import { action } from "@storybook/addon-actions";
+const isInInitialArgs = (name, initialArgs) => typeof initialArgs[name] === "undefined" && !(name in initialArgs);
+/**
+ * Automatically add action args for argTypes whose name
+ * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ */
+export const inferActionsFromArgTypesRegex = (context) => {
+    const { initialArgs, argTypes, parameters: { actions }, } = context;
+    if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
+        return {};
+    }
+    const argTypesRegex = new RegExp(actions.argTypesRegex);
+    const argTypesMatchingRegex = Object.entries(argTypes).filter(([name]) => !!argTypesRegex.test(name));
+    return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
+        if (isInInitialArgs(name, initialArgs)) {
+            acc[name] = action(name);
+        }
+        return acc;
+    }, {});
+};
+/**
+ * Add action args for list of strings.
+ */
+export const addActionsFromArgTypes = (context) => {
+    const { initialArgs, argTypes, parameters: { actions }, } = context;
+    if (actions?.disable || !argTypes) {
+        return {};
+    }
+    const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType["action"]);
+    return argTypesWithAction.reduce((acc, [name, argType]) => {
+        if (isInInitialArgs(name, initialArgs)) {
+            acc[name] = action(typeof argType["action"] === "string" ? argType["action"] : name);
+        }
+        return acc;
+    }, {});
+};

package/dist/component-to-jsx.d.ts

@@ -0,0 +1,2 @@
+import { Args } from "./types.js";
+export declare const componentToJSX: (tagName: string, args: Args) => any;

package/dist/component-to-jsx.js

@@ -0,0 +1,5 @@
+import { h } from '@stencil/core';
+export const componentToJSX = (tagName, args) => {
+    const Component = `${tagName}`;
+    return h(Component, { ...args });
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import './globals';
+export * from './types.js';
+export * from './portable-stories.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+import './globals';
+export * from './types.js';
+export * from './portable-stories.js';

package/dist/node/index.d.ts

@@ -0,0 +1,2 @@
+import type { StorybookConfig } from '../types';
+export declare function defineMain(config: StorybookConfig): StorybookConfig;

package/dist/node/index.js

@@ -0,0 +1,3 @@
+export function defineMain(config) {
+    return config;
+}

package/dist/portable-stories.d.ts

@@ -0,0 +1,22 @@
+import type { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from '@storybook/types';
+import type { StencilRenderer } from './types';
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/web-components';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+export declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<StencilRenderer<unknown>>;

package/dist/portable-stories.js

@@ -0,0 +1,25 @@
+import { setProjectAnnotations as originalSetProjectAnnotations, setDefaultProjectAnnotations, } from '@storybook/preview-api';
+import * as stencilAnnotations from './preview';
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/web-components';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(projectAnnotations) {
+    setDefaultProjectAnnotations(stencilAnnotations);
+    return originalSetProjectAnnotations(projectAnnotations);
+}

package/dist/preset.d.ts

@@ -0,0 +1,4 @@
+import { StorybookConfig } from './types.js';
+export declare const core: StorybookConfig['core'];
+export declare const viteFinal: StorybookConfig["viteFinal"];
+export declare const previewAnnotations: StorybookConfig["previewAnnotations"];

package/dist/preset.js

@@ -0,0 +1,33 @@
+import { dirname, join, resolve } from "node:path";
+import { createRequire } from "node:module";
+import { mergeConfig } from 'vite';
+import stencil from 'unplugin-stencil/vite';
+const require = createRequire(import.meta.url);
+const getAbsolutePath = (input) => dirname(require.resolve(join(input, 'package.json')));
+const renderer = join(__dirname, 'preview.js');
+export const core = {
+    builder: getAbsolutePath('@storybook/builder-vite'),
+    renderer,
+};
+export const viteFinal = async (defaultConfig) => {
+    const config = mergeConfig(defaultConfig, {
+        build: {
+            target: "es2020",
+            rollupOptions: {
+                external: ['@stencil/core'],
+            },
+        },
+        plugins: [stencil({
+                rootPath: defaultConfig.root,
+            })],
+    });
+    return config;
+};
+export const previewAnnotations = async (input = [], options) => {
+    const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+    const result = [];
+    return result
+        .concat(input)
+        .concat([renderer])
+        .concat(docsEnabled ? [resolve(getAbsolutePath('@storybook/html'), 'dist', 'entry-preview-docs.mjs')] : []);
+};

package/dist/preview.d.ts

@@ -0,0 +1,4 @@
+export declare const parameters: {
+    renderer: 'stencil';
+};
+export { render, renderToCanvas } from './render.js';

package/dist/preview.js

@@ -0,0 +1,2 @@
+export const parameters = { renderer: 'stencil' };
+export { render, renderToCanvas } from './render.js';

package/dist/render.d.ts

@@ -0,0 +1,4 @@
+import { ArgsStoryFn, RenderContext } from '@storybook/types';
+import type { StencilRenderer } from './types';
+export declare const render: ArgsStoryFn<StencilRenderer<unknown>>;
+export declare function renderToCanvas({ storyFn, showMain }: RenderContext<StencilRenderer<unknown>>, canvasElement: StencilRenderer<unknown>['canvasElement']): void;

package/dist/render.js

@@ -0,0 +1,25 @@
+import { simulatePageLoad } from '@storybook/preview-api';
+import { render as renderStencil } from '@stencil/core';
+import { componentToJSX } from './component-to-jsx';
+export const render = (args, context) => {
+    const { component } = context;
+    if (Array.isArray(component)) {
+        throw new Error('If your story does not contain a render function, you must provide a component property!');
+    }
+    const cmpName = customElements.getName(component);
+    if (!cmpName) {
+        throw new Error('Component is not registered!');
+    }
+    return componentToJSX(cmpName, args);
+};
+export function renderToCanvas({ storyFn, showMain }, canvasElement) {
+    const vdom = storyFn();
+    showMain();
+    if (canvasElement.firstChild) {
+        canvasElement.removeChild(canvasElement.firstChild);
+    }
+    const element = document.createElement('div');
+    canvasElement.appendChild(element);
+    renderStencil(vdom, element);
+    simulatePageLoad(element);
+}

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+import { VNode } from '@stencil/core';
+import { StorybookConfigVite } from '@storybook/builder-vite';
+import { WebRenderer } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+import type { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations, DecoratorFunction, LoaderFunction, StoryContext as GenericStoryContext, StrictArgs, ProjectAnnotations, StorybookConfig as StorybookConfigBase } from '@storybook/types';
+interface DevJSX {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+    stack?: string;
+}
+type JSXChildren = string | number | boolean | null | undefined | Function | RegExp | JSXChildren[] | Promise<JSXChildren> | VNode;
+type ComponentChildren<PROPS> = PROPS extends {
+    children: any;
+} ? never : {
+    children?: JSXChildren;
+};
+type PublicProps<PROPS> = (PROPS extends Record<any, any> ? Omit<PROPS, `${string}$`> : unknown extends PROPS ? {} : PROPS) & ComponentChildren<PROPS>;
+type FunctionComponent<P = unknown> = {
+    renderFn(props: P, key: string | null, flags: number, dev?: DevJSX): VNode;
+}['renderFn'];
+type Component<PROPS = unknown> = FunctionComponent<PublicProps<PROPS>>;
+export interface StencilRenderer<T> extends WebRenderer {
+    component: Component<T> | any;
+    storyResult: ReturnType<Component<T>>;
+    args: T;
+}
+export type Preview = ProjectAnnotations<StencilRenderer<unknown>>;
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<TArgs = Args> = ComponentAnnotations<StencilRenderer<TArgs>, 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)
+ */
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<StencilRenderer<TArgs>, 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 type StoryObj<TArgs = Args> = StoryAnnotations<StencilRenderer<TArgs>, TArgs>;
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<StencilRenderer<TArgs>, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<StencilRenderer<TArgs>, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<StencilRenderer<TArgs>, TArgs>;
+export type StorybookConfig = Omit<StorybookConfigBase, 'framework'> & {
+    framework: '@stencil/storybook-plugin' | {
+        name: '@stencil/storybook-plugin';
+    };
+} & StorybookConfigVite;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/storybook-plugin",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Storybook plugin for Stencil",
   "license": "MIT",
   "homepage": "https://github.com/stenciljs/storybook",
@@ -25,7 +25,9 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "template",
+    "preset.js"
   ],
   "//": "not sure why dist/preview is needed, but it is",
   "exports": {

package/preset.js

@@ -0,0 +1,2 @@
+// This file seems to only be necessary for Windows
+module.exports = require("./dist/preset.js");

package/template/cli/MyComponent.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/template/cli/MyComponent.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@stencil/storybook-plugin';
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  title: 'MyComponent',
+  component: MyComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    first: { control: 'text' },
+    last: { control: 'text' },
+    middle: { control: 'text' },
+  },
+  args: { first: 'John', last: 'Doe', middle: 'Michael' },
+} satisfies Meta<MyComponent>;
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const Primary: Story = {
+  args: {
+    first: 'John',
+    last: 'Doe',
+    middle: 'Michael',
+  }
+};

package/template/cli/MyComponent.tsx

@@ -0,0 +1,35 @@
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  shadow: true,
+})
+export class MyComponent {
+  /**
+   * The first name
+   */
+  @Prop() first: string;
+
+  /**
+   * The middle name
+   */
+  @Prop() middle: string;
+
+  /**
+   * The last name
+   */
+  @Prop() last: string;
+
+  private getText(): string {
+    return format(this.first, this.middle, this.last);
+  }
+
+  render() {
+    return <div>Hello, World! I'm {this.getText()}</div>;
+  }
+}
+
+function format(first?: string, middle?: string, last?: string): string {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}