@storybook-tiny/webcomponent 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/storybook-tiny.js +1 -1
- package/package.json +6 -6
- package/src/Storybook.js +19 -19
package/bin/storybook-tiny.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook-tiny/webcomponent",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"description": "A tiny storybook for web-components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
"vite.config.js"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"mi-element": "^0.
|
|
37
|
+
"mi-element": "^0.6.0",
|
|
38
38
|
"split.js": "^1.6.5",
|
|
39
|
-
"@storybook-tiny/setup": "1.0.
|
|
39
|
+
"@storybook-tiny/setup": "1.0.2"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@eslint/js": "^9.
|
|
43
|
-
"eslint": "^9.
|
|
42
|
+
"@eslint/js": "^9.33.0",
|
|
43
|
+
"eslint": "^9.33.0",
|
|
44
44
|
"globals": "^16.3.0",
|
|
45
|
-
"vite": "^7.
|
|
45
|
+
"vite": "^7.1.2"
|
|
46
46
|
},
|
|
47
47
|
"engines": {
|
|
48
48
|
"node": ">=20.0.0"
|
package/src/Storybook.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styles from './Storybook.module.css'
|
|
2
2
|
import split from 'split.js'
|
|
3
|
-
import { MiElement, define, refsBySelector, esc, refsById } from 'mi-element'
|
|
3
|
+
import { MiElement, define, refsBySelector, esc as html, refsById } from 'mi-element'
|
|
4
4
|
|
|
5
5
|
const getLocationHash = () => decodeURIComponent(location.hash.substring(1))
|
|
6
6
|
|
|
@@ -8,17 +8,17 @@ const STORE_ITEM = 'tiny-storybook-x'
|
|
|
8
8
|
|
|
9
9
|
const getXperc = (px = 130) => (px * 100) / window.innerWidth
|
|
10
10
|
|
|
11
|
-
const defaultStory = `
|
|
12
|
-
<p class="${styles.storybookSectionP}">
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</p>
|
|
11
|
+
const defaultStory = html`
|
|
12
|
+
<p class="${styles.storybookSectionP}">
|
|
13
|
+
The tiny storybook for
|
|
14
|
+
<a
|
|
15
|
+
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
|
|
16
|
+
target="_blanc"
|
|
17
|
+
rel="norel noreferrer"
|
|
18
|
+
>
|
|
19
|
+
Web Components
|
|
20
|
+
</a>
|
|
21
|
+
</p>
|
|
22
22
|
`
|
|
23
23
|
|
|
24
24
|
class Storybook extends MiElement {
|
|
@@ -127,11 +127,11 @@ class Storybook extends MiElement {
|
|
|
127
127
|
// try rendering the story
|
|
128
128
|
refs.story.innerHTML = ''
|
|
129
129
|
try {
|
|
130
|
-
switch (
|
|
131
|
-
case '
|
|
130
|
+
switch (toString.call(renderStory).slice(8, -1)) {
|
|
131
|
+
case 'String':
|
|
132
132
|
refs.story.innerHTML = renderStory
|
|
133
133
|
break
|
|
134
|
-
case '
|
|
134
|
+
case 'Function':
|
|
135
135
|
refs.story.appendChild(renderStory())
|
|
136
136
|
break
|
|
137
137
|
default:
|
|
@@ -169,10 +169,10 @@ class Story extends MiElement {
|
|
|
169
169
|
|
|
170
170
|
const { title } = this.story
|
|
171
171
|
|
|
172
|
-
this.renderRoot.innerHTML =
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
172
|
+
this.renderRoot.innerHTML = html`
|
|
173
|
+
<div>
|
|
174
|
+
<a href="#${title}">${title}</a>
|
|
175
|
+
</div>
|
|
176
176
|
`
|
|
177
177
|
this.refs = { a: this.querySelector('a') }
|
|
178
178
|
this.refs.a.className = this.active ? styles.active : ''
|