@storybook-tiny/webcomponent 1.1.4 → 1.2.0

package/bin/storybook-tiny.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-tiny/webcomponent",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "A tiny storybook for web-components",
   "keywords": [
     "storybook",
@@ -34,15 +34,15 @@
     "vite.config.js"
   ],
   "dependencies": {
-    "mi-element": "^0.4.1",
+    "mi-element": "^0.7.0",
     "split.js": "^1.6.5",
-    "@storybook-tiny/setup": "1.0.1"
+    "@storybook-tiny/setup": "1.0.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
-    "eslint": "^9.32.0",
-    "globals": "^16.3.0",
-    "vite": "^7.0.6"
+    "@eslint/js": "^9.39.2",
+    "eslint": "^9.39.2",
+    "globals": "^16.5.0",
+    "vite": "^7.3.0"
   },
   "engines": {
     "node": ">=20.0.0"

package/src/Storybook.js

@@ -1,6 +1,6 @@
 import styles from './Storybook.module.css'
 import split from 'split.js'
-import { MiElement, define, refsBySelector, esc, refsById } from 'mi-element'
+import { MiElement, define, html } from 'mi-element'
 
 const getLocationHash = () => decodeURIComponent(location.hash.substring(1))
 
@@ -8,34 +8,34 @@ const STORE_ITEM = 'tiny-storybook-x'
 
 const getXperc = (px = 130) => (px * 100) / window.innerWidth
 
-const defaultStory = `
-<p class="${styles.storybookSectionP}">
-  The tiny storybook for
-  <a
-    href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
-    target="_blanc"
-    rel="norel noreferrer"
-  >
-    webcomponents
-  </a>
-</p>
+const defaultStory = html`
+  <p class="${styles.storybookSectionP}">
+    The tiny storybook for
+    <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
+      target="_blanc"
+      rel="norel noreferrer"
+    >
+      Web Components
+    </a>
+  </p>
 `
 
 class Storybook extends MiElement {
   state = {}
 
-  static shadowRootOptions = null
+  static shadowRootInit = null
 
-  static get attributes() {
+  static get properties() {
     return {
-      header: 'Storybook Tiny',
-      href: '/stories/index.html',
-      width: 130,
-      stories: []
+      header: { initial: 'Storybook Tiny' },
+      href: { initial: '/stories/index.html' },
+      width: { initial: 130, type: Number },
+      stories: { initial: [], attribute: false }
     }
   }
 
-  static template = `
+  static template = html`
   <style>   
   .${styles.storybook} > .gutter {
       background-color: #eee;
@@ -76,7 +76,7 @@ class Storybook extends MiElement {
         localStorage.setItem(STORE_ITEM, xperc)
       }
     })
-    this.refs = refsBySelector(this.renderRoot, {
+    this.refs = this.refsBySelector({
       aside: 'main > aside',
       h4: 'main > aside h4 a',
       nav: 'main > aside nav',
@@ -127,11 +127,11 @@ class Storybook extends MiElement {
     // try rendering the story
     refs.story.innerHTML = ''
     try {
-      switch (typeof renderStory) {
-        case 'string':
+      switch (toString.call(renderStory).slice(8, -1)) {
+        case 'String':
           refs.story.innerHTML = renderStory
           break
-        case 'function':
+        case 'Function':
           refs.story.appendChild(renderStory())
           break
         default:
@@ -152,12 +152,12 @@ class Storybook extends MiElement {
 define('storybook-tiny', Storybook)
 
 class Story extends MiElement {
-  static shadowRootOptions = null
+  static shadowRootInit = null
 
-  static get attributes() {
+  static get properties() {
     return {
-      active: false,
-      story: ''
+      active: { initial: false, type: Boolean },
+      story: { initial: '' }
     }
   }
 
@@ -169,10 +169,10 @@ class Story extends MiElement {
 
     const { title } = this.story
 
-    this.renderRoot.innerHTML = esc`
-    <div>
-      <a href="#${title}">${title}</a>
-    </div>
+    this.renderRoot.innerHTML = html`
+      <div>
+        <a href="#${title}">${title}</a>
+      </div>
     `
     this.refs = { a: this.querySelector('a') }
     this.refs.a.className = this.active ? styles.active : ''
@@ -182,10 +182,13 @@ class Story extends MiElement {
 define('storybook-tiny-story', Story)
 
 class StoryError extends MiElement {
-  static shadowRootOptions = null
+  static shadowRootInit = null
 
-  static get attributes() {
-    return { message: '', stack: '' }
+  static get properties() {
+    return { 
+      message: { initial: '' }, 
+      stack: { initial: '' } 
+    }
   }
 
   static template = `
@@ -198,7 +201,10 @@ class StoryError extends MiElement {
   `
 
   render() {
-    this.refs = refsById(this.renderRoot)
+    this.refs = this.refsBySelector({
+      message: '#message',
+      stack: '#stack'
+    })
   }
 
   update() {

package/stories/stories.js

@@ -3,7 +3,7 @@ import {
   storyButton,
   storyCounter,
   storyError
-} from './some.stories'
+} from './some.stories.js'
 
 const storybook = document.createElement('storybook-tiny')
 storybook.stories = [