chore: small changes

package.json

@@ -83,6 +83,7 @@
     "ts-loader": "^8.4.0",
     "typedoc": "^0.26.3",
     "typescript": "^4.8.3",
+    "vue": "^3.5.4",
     "webpack": "^4.47.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^3.3.11"

src/shader-toy-player/story.js

@@ -2,9 +2,10 @@ import 'luna-shader-toy-player.css'
 import ShaderToyPlayer from 'luna-shader-toy-player.js'
 import readme from './README.md'
 import story from '../share/story'
-import h from 'licia/h'
 import $ from 'licia/$'
 import shaders, { cube } from './shaders'
+import LunaShaderToyPlayer from './vue'
+import { defineComponent, h } from 'vue'
 import { text, optionsKnob, button } from '@storybook/addon-knobs'
 
 const def = story(
@@ -74,9 +75,19 @@ const def = story(
   {
     readme,
     source: __STORY__,
+    VueComponent() {
+      return defineComponent({
+        components: {
+          LunaShaderToyPlayer,
+        },
+        render() {
+          return h('div', 'hello')
+        },
+      })
+    },
   }
 )
 
 export default def
 
-export const { shaderToyPlayer } = def
+export const { shaderToyPlayer: html, vue } = def

src/shader-toy-player/vue.ts

@@ -0,0 +1,9 @@
+import { defineComponent, h } from 'vue'
+
+const LunaShaderToyPlayer = defineComponent({
+  render() {
+    return h('div', 'Hello world')
+  },
+})
+
+export default LunaShaderToyPlayer

src/share/story.js

@@ -15,6 +15,7 @@ import now from 'licia/now'
 import ReactDOM from 'react-dom'
 import * as registerKnobs from '@storybook/addon-knobs/dist/registerKnobs'
 import { optionsKnob } from '@storybook/addon-knobs'
+import { createApp } from 'vue'
 
 export default function story(
   name,
@@ -27,6 +28,7 @@ export default function story(
     layout = 'padded',
     themes = {},
     ReactComponent = false,
+    VueComponent = false,
   } = {}
 ) {
   const container = h('div')
@@ -67,9 +69,8 @@ export default function story(
         window.component = window.components[0]
         window.componentName = upperFirst(camelCase(name))
 
-        document.documentElement.style.background = contain(theme, 'dark')
-          ? '#000'
-          : '#fff'
+        updateBackground(theme)
+
         each(window.components, (component) =>
           component.setOption('theme', theme)
         )
@@ -92,14 +93,31 @@ export default function story(
 
       ReactDOM.render(<ReactComponent theme={theme} />, container)
 
-      document.documentElement.style.background = contain(theme, 'dark')
-        ? '#000'
-        : '#fff'
+      updateBackground(theme)
 
       return container
     }
   }
 
+  if (VueComponent) {
+    const container = h('div')
+
+    ret.vue = function () {
+      fixKnobs(`vue-${name}`)
+
+      const { theme } = createKnobs()
+      window.components = []
+      delete window.component
+      window.componentName = upperFirst(camelCase(`vue-${name}`))
+
+      createApp(VueComponent({ theme })).mount(container)
+
+      updateBackground(theme)
+
+      return container 
+    }
+  }
+
   function createKnobs() {
     const theme = optionsKnob(
       'Theme',
@@ -158,3 +176,9 @@ function fixKnobs(name) {
     each(window.components, (component) => component.destroy())
   }
 }
+
+function updateBackground(theme) {
+  document.documentElement.style.background = contain(theme, 'dark')
+    ? '#000'
+    : '#fff'
+}