@storybook-tiny/webcomponent 1.1.5 → 1.2.0

package/bin/storybook-tiny.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-tiny/webcomponent",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A tiny storybook for web-components",
   "keywords": [
     "storybook",
@@ -34,15 +34,15 @@
     "vite.config.js"
   ],
   "dependencies": {
-    "mi-element": "^0.6.0",
+    "mi-element": "^0.7.0",
     "split.js": "^1.6.5",
     "@storybook-tiny/setup": "1.0.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "eslint": "^9.33.0",
-    "globals": "^16.3.0",
-    "vite": "^7.1.2"
+    "@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 as html, refsById } from 'mi-element'
+import { MiElement, define, html } from 'mi-element'
 
 const getLocationHash = () => decodeURIComponent(location.hash.substring(1))
 
@@ -24,18 +24,18 @@ const defaultStory = html`
 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',
@@ -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: '' }
     }
   }
 
@@ -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 = [