@storybook-tiny/webcomponent 1.0.0 → 1.1.1

package/README.md

@@ -53,7 +53,7 @@ document.getElementById('app').appendChild(storybook)
 Then run with vite:
 
 ```sh
-npx vite
+npx vite --open /stories/
 ```
 
 # license

package/bin/storybook-tiny.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url'
 
 const config = {
   rootDir: fileURLToPath(new URL('..', import.meta.url)),
-  devDependencies: ['@storybook-tiny/webcomponent', 'vite'],
+  devDependencies: ['@storybook-tiny/webcomponent', 'mi-element', 'vite'],
   files: ['stories/*', 'vite.config.js'],
   post: [
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-tiny/webcomponent",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A tiny storybook for webcompoments",
   "keywords": [
     "storybook",
@@ -33,6 +33,7 @@
     "vite.config.js"
   ],
   "dependencies": {
+    "mi-element": "^0.1.0",
     "@storybook-tiny/setup": "1.0.0"
   },
   "devDependencies": {

package/src/Storybook.js

@@ -1,22 +1,21 @@
 import styles from './Storybook.module.css'
-import { WcElement, define, cssUnit } from './WcElement'
+import { MiElement, define, refsBySelector, esc, refsById } from 'mi-element'
 
 const getLocationHash = () => decodeURIComponent(location.hash.substring(1))
 
-const template = `
-<main class="${styles.storybook}">
-  <aside>
-    <h4><a></a></h4>
-    <div></div>
-  </aside>
-  <section class="stories">
-  </section>
-</main>
-`
+/**
+ * convert number to css unit
+ * @param {numbers|string} unit 
+ * @returns {string}
+ */
+const cssUnit = (unit) => {
+  const n = Number(unit)
+  return isNaN(n) ? unit : `${n}px`
+}
 
 const defaultStory = `
 <p class="${styles.storybookSectionP}">
-  The tiny storybook for<span> </span>
+  The tiny storybook for
   <a
     href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
     target="_blanc"
@@ -27,50 +26,71 @@ const defaultStory = `
 </p>
 `
 
-class Storybook extends WcElement {
-  $ = {}
+class Storybook extends MiElement {
   state = {}
 
-  static attributes = {
-    header: 'Storybook Tiny',
-    href: '/stories/index.html',
-    width: 130,
-    stories: []
-  }
+  static shadowRootOptions = null
 
-  connectedCallback() {
-    this.innerHTML = template
-    const { $ } = this
-    $.aside = this.querySelector('main > aside')
-    $.h4 = $.aside.querySelector('h4 a')
-    $.titles = $.aside.querySelector('div')
-    $.story = this.querySelector('section')
-    this.addEventListener(window, 'hashchange', () => this._renderStory())
-    this.render()
+  static get attributes() {
+    return {
+      header: 'Storybook Tiny',
+      href: '/stories/index.html',
+      width: 130,
+      stories: []
+    }
   }
 
+  static template = `
+  <main class="${styles.storybook}">
+    <aside>
+      <h4><a></a></h4>
+      <nav></nav>
+    </aside>
+    <section class="stories">
+    </section>
+  </main>
+  `
+
   render() {
-    const { $ } = this
-    $.h4.textContent = this.header
-    $.h4.href = this.href
-    $.aside.style.flexBasis = cssUnit(this.width)
-    $.titles.innerHTML = ''
+    this.refs = refsBySelector(this.renderRoot, {
+      aside: 'main > aside',
+      h4: 'main > aside h4 a',
+      nav: 'main > aside nav',
+      story: 'main > section'
+    })
+    this.on('hashchange', () => this._updateStory(), window)
+  }
+
+  update() {
+    const { refs } = this
+    refs.h4.textContent = this.header
+    refs.h4.href = this.href
+    refs.aside.style.flexBasis = cssUnit(this.width)
+    refs.nav.innerHTML = ''
     for (const story of this.stories) {
       const $el = document.createElement('storybook-tiny-story')
       $el.story = story
-      $.titles.appendChild($el)
+      refs.nav.appendChild($el)
     }
-    this._renderStory()
+    this._updateStory()
   }
 
-  _renderStory() {
+  _updateStory() {
+    const { refs } = this
     const locHash = getLocationHash()
+
     if (this.state.title === locHash) {
       return
     }
 
+    // update active state on nav
+    for (const $el of refs.nav.childNodes) {
+      $el.active = $el.story?.title === locHash
+    }
+
     let renderStory = defaultStory
 
+    // find active story
     for (const story of this.stories) {
       if (typeof story === 'object') {
         const { title, component } = story
@@ -81,15 +101,15 @@ class Storybook extends WcElement {
       }
     }
 
-    const { $ } = this
-    $.story.innerHTML = ''
+    // try rendering the story
+    refs.story.innerHTML = ''
     try {
       switch (typeof renderStory) {
         case 'string':
-          $.story.innerHTML = renderStory
+          refs.story.innerHTML = renderStory
           break
         case 'function':
-          $.story.appendChild(renderStory())
+          refs.story.appendChild(renderStory())
           break
         default:
           throw new Error(
@@ -101,55 +121,66 @@ class Storybook extends WcElement {
       const error = document.createElement('storybook-tiny-error')
       error.message = err.message
       error.stack = err.stack
-      $.story.appendChild(error)
+      refs.story.appendChild(error)
     }
   }
 }
 
 define('storybook-tiny', Storybook)
 
-class Story extends WcElement {
-  connectedCallback() {
+class Story extends MiElement {
+  static shadowRootOptions = null
+
+  static get attributes() {
+    return {
+      active: false,
+      story: ''
+    }
+  }
+
+  update() {
     if (typeof this.story === 'string') {
-      this.innerHTML = this.story
+      this.renderRoot.innerHTML = this.story
       return
     }
 
-    this.addEventListener(window, 'hashchange', () => this.render())
     const { title } = this.story
-    this.innerHTML = `
-      <div>
-        <a 
-          href="#${title}" 
-          tabindex="0"
-          role="button"
-        >${title}</a>
-      </div>
-    `
-    this.render()
-  }
 
-  render() {
-    const { title } = this.story
-    const locHash = getLocationHash()
-    this.querySelector('a').className = locHash === title ? styles.active : ''
+    this.renderRoot.innerHTML = esc`
+    <div>
+      <a href="#${title}">${title}</a>
+    </div>
+    `
+    this.refs = { a: this.querySelector('a') }
+    this.refs.a.className = this.active ? styles.active : ''
   }
 }
 
 define('storybook-tiny-story', Story)
 
-class StoryError extends WcElement {
-  static attributes = { message: '', stack: '' }
+class StoryError extends MiElement {
+  static shadowRootOptions = null
+
+  static get attributes() {
+    return { message: '', stack: '' }
+  }
+
+  static template = `
+  <div class="${styles.error}">
+    <h2>Error</h2>
+    <p id="message"></p>
+    <p> </p>
+    <pre style="white-space: pre-wrap" id="stack"></pre>
+  </div>
+  `
 
   render() {
-    this.innerHTML = `
-      <div class="${styles.error}">
-        <h2>Error</h2>
-        <p>${this.message}</p>
-        <p> </p>
-        <pre style="white-space: pre-wrap">${this.stack}</pre>
-      </div>
-    `
+    this.refs = refsById(this.renderRoot)
+  }
+
+  update() {
+    this.refs.message.textContent = this.message
+    this.refs.stack.textContent = this.stack
   }
 }
 

package/stories/some.stories.js

@@ -1,12 +1,14 @@
+import { refsBySelector } from "mi-element/refs"
+
 // define some custom elements
 window.customElements.define(
   'x-button',
   class extends HTMLElement {
     connectedCallback() {
-      this.shadow = this.attachShadow({ mode: 'open' })
+      this.renderRoot = this.attachShadow({ mode: 'open' })
       this.$ = document.createElement('button')
       this.$.addEventListener('click', () => alert('Hi'))
-      this.shadow.appendChild(this.$)
+      this.renderRoot.appendChild(this.$)
       this.$.textContent = this.childNodes?.[0]?.textContent || 'Click Me'
     }
   }
@@ -15,7 +17,6 @@ window.customElements.define(
 window.customElements.define(
   'x-counter',
   class extends HTMLElement {
-    $ = {}
     init = 0
 
     static observedAttributes = ['init']
@@ -29,8 +30,8 @@ window.customElements.define(
     }
 
     connectedCallback() {
-      this.shadow = this.attachShadow({ mode: 'closed' })
-      this.shadow.innerHTML = `
+      this.renderRoot = this.attachShadow({ mode: 'closed' })
+      this.renderRoot.innerHTML = `
       <style>
         :host {
           font-size: 1.5em;
@@ -50,18 +51,21 @@ window.customElements.define(
       <div>
         <span class="count"></span>
         <span class="heart"></span>
-        <button>👍</button>
-        <button>👎</button>
+        <button id="up">👍</button>
+        <button id="down">👎</button>
       </div>
-    `
-      this.$.count = this.shadow.querySelector('.count')
-      this.$.heart = this.shadow.querySelector('.heart')
-      this.$.buttons = this.shadow.querySelectorAll('button')
-      this.$.buttons[0].addEventListener('click', () => {
+      `
+      this.refs = refsBySelector(this.renderRoot, {
+        count: '.count',
+        heart: '.heart',
+        up: '#up',
+        down: '#down'
+      })
+      this.refs.up.addEventListener('click', () => {
         this.init += 1
         this.render()
       })
-      this.$.buttons[1].addEventListener('click', () => {
+      this.refs.down.addEventListener('click', () => {
         this.init -= 1
         this.render()
       })
@@ -69,8 +73,8 @@ window.customElements.define(
     }
 
     render() {
-      this.$.count.textContent = this.init
-      this.$.heart.textContent =
+      this.refs.count.textContent = this.init
+      this.refs.heart.textContent =
         this.init === 0 ? '🤍' : this.init > 0 ? '❤️' : '💔'
     }
   }
@@ -86,8 +90,8 @@ export const storyCounter = {
   component: () => document.createElement('x-counter')
 }
 export const storyError = {
-  title: 'Error',
+  title: 'Hello 🌍 Error',
   component: () => {
-    throw new Error('baam')
+    throw new Error('Hello 🌍 Error')
   }
 }

package/src/WcElement.js

@@ -1,145 +0,0 @@
-/**
- * class extening HTMLElement to enable deferred rendering on attribute changes
- * either via `setAttribute(name, value)` or `this[name] = value`.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
- * @example
- * class Example extends WcElement {
- *  // internal references go here
- *  $ = {}
- *  // define all observed attributes.
- *  // attributes are accessible via `this[prop]`
- *  // avoid using attributes which are HTMLElement properties
- *  static attributes = {
- *    text: 'Hi'
- *  }
- *  // as with HTMLElement 
- *  connectedCallback() {
- *    // do initial mount of component here
- *    this._shadow = this.shadow = this.attachShadow({ mode: 'closed' })
- *    this._shadow.innerHTML = `<div></div>`
- *    this.$.div = this._shadow.querySelector('div')
- *    this.render()
- *  }
- *  // render method called every time an attribute changes
- *  render() {
- *    this.$.div.textContent = this.text
- *  }
- * }
- * // create a custom element with the `define` function (see below)
- * define('x-example', Example)
- * // create a DOM node and re-render via attribute or property changes
- * const elem = document.createElement('x-example')
- * elem.setAttribute('text', 'set attribute')
- * elem.text = 'set property'
- */
-export class WcElement extends HTMLElement {
-  _attr = {}
-  _removers = []
-
-  constructor() {
-    super()
-    this._attr = structuredClone(this.constructor.attributes || {})
-    observedAttributes(this)
-  }
-
-  /**
-   * set attribute and re-render
-   * @param {string} name
-   * @param {any} value
-   */
-  setAttribute(name, value) {
-    this._attr[name] = value
-    this.isConnected && this.deferredRender()
-  }
-
-  /**
-   * component must implement render()!
-   */
-  connectedCallback() {
-    this.render()
-  }
-
-  /**
-   * @param {string} name change attribute
-   * @param {any} _oldValue
-   * @param {any} newValue new value
-   */
-  attributeChangedCallback(name, _oldValue, newValue) {
-    this._attr[name] = newValue
-    this.deferredRender()
-  }
-
-  /**
-   * helper function to remove event listeners when component gets disconnected
-   * @param {HTMLElement} node
-   * @param {string} event
-   * @param {function} fn
-   */
-  addEventListener(node, event, fn) {
-    node.addEventListener(event, fn)
-    this._removers.push(() => node.removeEventListener(event, fn))
-  }
-
-  /**
-   * remove possible event listeners
-   */
-  disconnectedCallback() {
-    this._removers.forEach((remover) => remover())
-  }
-
-  /**
-   * deferred render
-   */
-  deferredRender() {
-    window.requestAnimationFrame(() => {
-      this.render()
-    })
-  }
-}
-
-/**
- * re-render component when property changes
- * @param {HTMLElement} elem 
- */
-const observedAttributes = (elem) => {
-  for (const prop of Object.keys(elem._attr)) {
-    Object.defineProperty(elem, prop, {
-      get() {
-        return elem._attr[prop]
-      },
-      set(newValue) {
-        const oldValue = elem._attr[prop]
-        if (oldValue === newValue) return
-        elem._attr[prop] = newValue
-        elem.isConnected && elem.deferredRender()
-      }
-    })
-  }
-}
-
-/**
- * defines a custom element adding observedAttributes from default static
- * attributes
- * @param {string} name custom element tag
- * @param {HTMLElement} Element
- */
-export const define = (name, Element) => {
-  Element.observedAttributes =
-    Element.observedAttributes || Object.keys(Element.attributes || [])
-  window.customElements.define(name, Element)
-}
-
-const toNumber = (n) => {
-  const _n = Number(n)
-  return !isNaN(_n) ? _n : undefined
-}
-
-/**
- * convert number to css unit
- * @param {numbers|string} unit 
- * @returns {string}
- */
-export const cssUnit = (unit) => {
-  const n = toNumber(unit)
-  return typeof n === 'number' ? `${n}px` : unit
-}