feat: export create-addon

ci: node version

chore: package-lock

chore(release): 0.1.35

chore: publish file

chore(release): 0.1.36

.github/workflows/release.yml

@@ -18,10 +18,10 @@ jobs:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 14.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@master
         with:
-          node-version: 14.x
+          node-version: 18.x
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Dependencies

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.36](https://github.com/modernweb-dev/storybook-prebuilt/compare/v0.1.35...v0.1.36) (2023-07-04)
+
+### [0.1.35](https://github.com/modernweb-dev/storybook-prebuilt/compare/v0.1.34...v0.1.35) (2023-07-04)
+
+
+### Features
+
+* export create-addon ([e2b8dcf](https://github.com/modernweb-dev/storybook-prebuilt/commit/e2b8dcfb9b21fede12b7406f919d9494245bb0c8))
+
 ### [0.1.34](https://github.com/modernweb-dev/storybook-prebuilt/compare/v0.1.33...v0.1.34) (2022-02-26)
 
 ### [0.1.33](https://github.com/modernweb-dev/storybook-prebuilt/compare/v0.1.32...v0.1.33) (2022-01-10)

create-addon.js

@@ -0,0 +1,85 @@
+/**
+ * Storybook addons are React components. The `createAddon` function returns a React component that
+ * wraps a custom element and passes on properties and events. This allows for creating addons with
+ * web components (and therefore LitElement).
+ *
+ * The wrapper can forward specific events to your addon (web component) as they occur. Your addon
+ * can listen for these events. Some useful Storybook events are forwarded by default (such as when
+ * the user changes stories). An `options` parameter can be passed to `createAddon` that contains
+ * additional events that you may need for your use case.
+ *
+ * Storybook expects only 1 addon to be in the DOM, which is the addon that is selected (active).
+ * This means addons can be continuously connected/disconnected when switching between addons and
+ * stories. This is important to understand to work effectively with LitElement lifecycle methods
+ * and events. Addons that rely on events that might occur when it is not active, should have their
+ * event listeners set up in the `constructor`. Event listeners set up in the `connectedCallback`
+ * should always also be disconnected.
+ */
+
+import { React } from './manager.js';
+import {
+  STORY_SPECIFIED,
+  STORY_CHANGED,
+  STORY_RENDERED,
+} from './core-events.js';
+
+// A default set of Storybook events that are forwarded to the addon as they occur. If an addon
+// needs additional events (either Storybook or custom events), they can be passed via the options.
+const storybookEvents = [STORY_SPECIFIED, STORY_CHANGED, STORY_RENDERED];
+const { Component, createRef, createElement } = React;
+/**
+ * @param {String} customElementName
+ * @param {Object} [options]
+ */
+export function createAddon(customElementName, options = {}) {
+  return class extends Component {
+    constructor(props) {
+      super(props);
+      this.ref = createRef();
+    }
+
+    componentDidMount() {
+      const customEvents = options.events ?? [];
+      const uniqueEvents = Array.from(
+        new Set([...storybookEvents, ...customEvents])
+      );
+      uniqueEvents.forEach(event => {
+        this.props.api.getChannel().on(event, detail => {
+          if (!this.addonElement) {
+            this.updateAddon(event);
+          }
+          this.addonElement.dispatchEvent(new CustomEvent(event, { detail }));
+        });
+      });
+    }
+
+    componentDidUpdate() {
+      this.updateAddon();
+    }
+
+    updateAddon() {
+      if (!this.addonElement) {
+        this.addonElement = document.createElement(customElementName);
+      }
+
+      const { api, active } = this.props;
+      Object.assign(this.addonElement, { api, active });
+
+      // Here, the element could get added for the first time, or re-added after a switch between addons.
+      if (this.shouldAddonBeInDom() && !this.ref.current.firstChild) {
+        this.ref.current.appendChild(this.addonElement);
+      }
+    }
+
+    shouldAddonBeInDom() {
+      return this.ref.current && this.props.active;
+    }
+
+    render() {
+      if (!this.props.active) {
+        return null;
+      }
+      return createElement('div', { ref: this.ref });
+    }
+  };
+}