From fa9b43447ab43bc7c0c3cee24dfee25c2147e988 Mon Sep 17 00:00:00 2001 From: surunzi Date: Sun, 15 Sep 2024 11:02:36 +0800 Subject: [PATCH] feat(shader-toy-player): vue support --- .storybook/main.js | 10 ++++++++++ index.json | 1 + lib/build.js | 3 +++ src/shader-toy-player/index.ts | 7 ++++--- src/shader-toy-player/package.json | 1 + src/shader-toy-player/story.js | 13 +++++++++++-- src/shader-toy-player/vue.ts | 26 +++++++++++++++++++++++--- src/share/story.js | 18 +++++++++--------- 8 files changed, 62 insertions(+), 17 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 80eeede..127cfdc 100644 --- a/.storybook/main.js +++ b/.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'], diff --git a/index.json b/index.json index c807584..bcd9bbd 100644 --- a/index.json +++ b/index.json @@ -316,6 +316,7 @@ }, "shader-toy-player": { "icon": true, + "vue": true, "test": false, "version": "0.1.0", "style": true, diff --git a/lib/build.js b/lib/build.js index e24fc7a..9a58b84 100644 --- a/lib/build.js +++ b/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( diff --git a/src/shader-toy-player/index.ts b/src/shader-toy-player/index.ts index 2fea3b2..691e678 100644 --- a/src/shader-toy-player/index.ts +++ b/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) +} diff --git a/src/shader-toy-player/package.json b/src/shader-toy-player/package.json index 4a530e6..c9f9d15 100644 --- a/src/shader-toy-player/package.json +++ b/src/shader-toy-player/package.json @@ -4,6 +4,7 @@ "description": "Shader toy player", "luna": { "icon": true, + "vue": true, "test": false } } diff --git a/src/shader-toy-player/story.js b/src/shader-toy-player/story.js index df5d869..c821f85 100644 --- a/src/shader-toy-player/story.js +++ b/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', + }, + }) }, }) }, diff --git a/src/shader-toy-player/vue.ts b/src/shader-toy-player/vue.ts index 4f3db10..a12a000 100644 --- a/src/shader-toy-player/vue.ts +++ b/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() + const shaderToyPlayer = shallowRef() + + onMounted(() => { + shaderToyPlayer.value = new ShaderToyPlayer(container.value!) + }) + + return () => { + return h('div', { + ref: container, + style: props.style, + }) + } }, }) diff --git a/src/share/story.js b/src/share/story.js index 1cd70d8..f4aacbd 100644 --- a/src/share/story.js +++ b/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' -} \ No newline at end of file +}