feat(shader-toy-player): vue support

.storybook/main.js

@@ -2,6 +2,7 @@ const path = require('path')
 const map = require('licia/map')
 const each = require('licia/each')
 const keys = require('licia/keys')
+const webpack = require('webpack')
 
 const components = keys(require('../index.json'))
 
@@ -58,6 +59,15 @@ module.exports = {
         )
       })
     })
+
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: true,
+        __VUE_PROD_DEVTOOLS__: false,
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+      })
+    )
+
     return config
   },
   staticDirs: ['../public'],

index.json

@@ -316,6 +316,7 @@
   },
   "shader-toy-player": {
     "icon": true,
+    "vue": true,
     "test": false,
     "version": "0.1.0",
     "style": true,

lib/build.js

@@ -66,6 +66,9 @@ module.exports = wrap(async function (component) {
     if (config.react) {
       pkg.exports['./react'] = `./esm/${component}/react.js`
     }
+    if (config.vue) {
+      pkg.exports['./vue'] = `./esm/${component}/vue.js`
+    }
   }
 
   await fs.writeFile(

src/shader-toy-player/index.ts

@@ -5,7 +5,7 @@ import noop from 'licia/noop'
 import perfNow from 'licia/perfNow'
 import fullscreen from 'licia/fullscreen'
 import raf from 'licia/raf'
-import { drag, eventPage } from '../share/util'
+import { drag, eventPage, exportCjs } from '../share/util'
 import { piCreateAudioContext, piCreateFPSCounter } from './piLibs'
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Effect = require('./Effect').default
@@ -315,5 +315,6 @@ export default class ShaderToyPlayer extends Component {
   }
 }
 
-module.exports = ShaderToyPlayer
-module.exports.default = ShaderToyPlayer
+if (typeof module !== 'undefined') {
+  exportCjs(module, ShaderToyPlayer)
+}

src/shader-toy-player/package.json

@@ -4,6 +4,7 @@
   "description": "Shader toy player",
   "luna": {
     "icon": true,
+    "vue": true,
     "test": false
   }
 }

src/shader-toy-player/story.js

@@ -75,13 +75,22 @@ const def = story(
   {
     readme,
     source: __STORY__,
-    VueComponent() {
+    VueComponent({ theme }) {
       return defineComponent({
         components: {
           LunaShaderToyPlayer,
         },
         render() {
-          return h('div', 'hello')
+          return h(LunaShaderToyPlayer, {
+            theme,
+            style: {
+              maxWidth: '640px',
+              width: '100%',
+              margin: '0 auto',
+              minHeight: '150px',
+              aspectRatio: '1280/720',
+            },
+          })
         },
       })
     },

src/shader-toy-player/vue.ts

@@ -1,8 +1,28 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, onMounted, shallowRef } from 'vue'
+import ShaderToyPlayer from './index'
 
 const LunaShaderToyPlayer = defineComponent({
-  render() {
-    return h('div', 'Hello world')
+  name: 'LunaShaderToyPlayer',
+  props: {
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const container = shallowRef<HTMLDivElement>()
+    const shaderToyPlayer = shallowRef<ShaderToyPlayer>()
+
+    onMounted(() => {
+      shaderToyPlayer.value = new ShaderToyPlayer(container.value!)
+    })
+
+    return () => {
+      return h('div', {
+        ref: container,
+        style: props.style,
+      })
+    }
   },
 })
 

src/share/story.js

@@ -31,8 +31,6 @@ export default function story(
     VueComponent = false,
   } = {}
 ) {
-  const container = h('div')
-
   if (changelog) {
     readme += `\n## Changelog\n${changelog.replace(/## /g, '### ')}`
   }
@@ -53,6 +51,8 @@ export default function story(
       layout,
     },
     [camelCase(name)]: () => {
+      const container = h('div')
+
       fixKnobs(name)
 
       waitUntil(() => container.parentElement).then(() => {
@@ -81,9 +81,9 @@ export default function story(
   }
 
   if (ReactComponent) {
-    const container = h('div')
-
     ret.react = function () {
+      const container = h('div')
+
       fixKnobs(`react-${name}`)
 
       const { theme } = createKnobs()
@@ -100,9 +100,9 @@ export default function story(
   }
 
   if (VueComponent) {
-    const container = h('div')
-
     ret.vue = function () {
+      const container = h('div')
+
       fixKnobs(`vue-${name}`)
 
       const { theme } = createKnobs()
@@ -111,10 +111,10 @@ export default function story(
       window.componentName = upperFirst(camelCase(`vue-${name}`))
 
       createApp(VueComponent({ theme })).mount(container)
-        
+
       updateBackground(theme)
 
-      return container 
+      return container
     }
   }
 
@@ -181,4 +181,4 @@ function updateBackground(theme) {
   document.documentElement.style.background = contain(theme, 'dark')
     ? '#000'
     : '#fff'
-}
+}