@poveste/plugin-vue 0.1.0

package/src/client/app/Variant.ts

@@ -0,0 +1,196 @@
+import type { Variant } from '@poveste/shared'
+import type { ComputedRef, PropType } from 'vue'
+import { applyState } from '@poveste/shared'
+import { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, useAttrs } from 'vue'
+import { syncVariantAutoProps } from './auto-props.js'
+import { useRenderContext } from './render-context.js'
+import { syncStateBundledAndExternal, toRawDeep } from './util.js'
+
+// const logLocation = location.href.includes('__sandbox') ? '[Sandbox]' : '[Host]'
+
+export default defineComponent({
+
+  name: 'Variant',
+  __histoireType: 'variant',
+
+  props: {
+    initState: {
+      type: Function as PropType<() => any | Promise<any>>,
+      default: undefined,
+    },
+
+    source: {
+      type: String,
+      default: undefined,
+    },
+
+    responsiveDisabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    autoPropsDisabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    setupApp: {
+      type: Function,
+      default: undefined,
+    },
+
+    meta: {
+      type: Object as PropType<Variant['meta']>,
+      default: undefined,
+    },
+
+    implicit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  async setup(props) {
+    const attrs = useAttrs() as {
+      variant?: Variant
+    }
+    const vm = getCurrentInstance()
+    const story = inject<ComputedRef<any>>('story')
+    const implicitState = inject<() => any>('implicitState')
+    const renderContext = useRenderContext()
+    let lastPropsTypesSnapshot: string
+    let renderVariant: Variant
+    let renderStateSync: ReturnType<typeof syncStateBundledAndExternal>
+
+    const mountVariant = computed(() => attrs.variant)
+
+    if (renderContext?.mode !== 'render' && typeof props.initState === 'function' && mountVariant.value) {
+      const state = await props.initState()
+      applyState(mountVariant.value.state, toRawDeep(state))
+    }
+
+    if (renderContext?.mode !== 'render' && mountVariant.value && implicitState) {
+      syncStateBundledAndExternal(mountVariant.value.state, implicitState())
+    }
+
+    function updateVariant(variant: Variant) {
+      Object.assign(variant, {
+        slots: () => vm.proxy.$slots,
+        source: props.source,
+        responsiveDisabled: props.responsiveDisabled,
+        autoPropsDisabled: props.autoPropsDisabled,
+        setupApp: props.setupApp,
+        meta: props.meta,
+        configReady: true,
+      })
+
+      if (!props.implicit && !story.value?.meta?.hasVariantChildComponents) {
+        if (!story.value.meta) {
+          story.value.meta = {}
+        }
+
+        Object.assign(story.value.meta, {
+          hasVariantChildComponents: true,
+        })
+      }
+    }
+
+    function resolveVariant() {
+      if (attrs.variant) {
+        return attrs.variant
+      }
+
+      if (renderContext?.mode !== 'render') {
+        return null
+      }
+
+      if (!renderVariant) {
+        renderVariant = story.value?.variants[renderContext.nextVariantIndex.value]
+        renderContext.nextVariantIndex.value++
+      }
+
+      return renderVariant
+    }
+
+    function renderVariantSlot(variant: Variant) {
+      if (renderContext.slotName === 'controls') {
+        return vm.proxy.$slots.controls?.({
+          state: renderContext.externalState,
+        }) ?? null
+      }
+
+      if (renderContext.slotName !== 'default') {
+        return null
+      }
+
+      const vnodes = vm.proxy.$slots.default?.({
+        state: renderContext.externalState,
+      }) ?? null
+
+      if (vnodes && !variant.autoPropsDisabled) {
+        lastPropsTypesSnapshot = syncVariantAutoProps(
+          variant,
+          vnodes,
+          renderContext.externalState,
+          lastPropsTypesSnapshot,
+        )
+      }
+
+      return vnodes
+    }
+
+    function syncRenderVariantState(variant: Variant) {
+      if (!implicitState) {
+        return
+      }
+
+      const shouldSync = renderContext?.mode === 'render'
+        && renderContext.currentVariant?.id === variant.id
+
+      if (shouldSync && !renderStateSync) {
+        renderStateSync = syncStateBundledAndExternal(variant.state, implicitState())
+      }
+      else if (!shouldSync && renderStateSync) {
+        renderStateSync.stop()
+        renderStateSync = null
+      }
+    }
+
+    if (mountVariant.value) {
+      updateVariant(mountVariant.value)
+    }
+
+    onBeforeUnmount(() => {
+      renderStateSync?.stop()
+    })
+
+    return {
+      renderContext,
+      renderVariantSlot,
+      resolveVariant,
+      syncRenderVariantState,
+      updateVariant,
+    }
+  },
+
+  render() {
+    const variant = this.resolveVariant()
+
+    if (!variant) {
+      return null
+    }
+
+    this.updateVariant(variant)
+    this.syncRenderVariantState(variant)
+
+    if (this.renderContext?.mode !== 'render') {
+      return null
+    }
+
+    if (this.renderContext.currentVariant?.id !== variant.id) {
+      return null
+    }
+
+    return this.renderVariantSlot(variant)
+  },
+})

package/src/client/app/auto-props.ts

@@ -0,0 +1,135 @@
+import type { AutoPropComponentDefinition, PropDefinition, Variant } from '@poveste/shared'
+import { applyState } from '@poveste/shared'
+import { getTagName } from '../codegen'
+
+export function syncVariantAutoProps(
+  variant: Variant,
+  vnodes: any,
+  externalState: Variant['state'],
+  lastSnapshot: string,
+) {
+  const defs = scanForAutoProps(vnodes, externalState)
+  const snapshot = JSON.stringify(defs)
+
+  if (!lastSnapshot || lastSnapshot !== snapshot) {
+    applyState(variant.state, {
+      _hPropDefs: defs,
+    })
+
+    if (!variant.state._hPropState) {
+      applyState(variant.state, {
+        _hPropState: {},
+      })
+    }
+  }
+
+  return snapshot
+}
+
+function scanForAutoProps(vnodes: any, externalState: Variant['state']) {
+  const result: AutoPropComponentDefinition[] = []
+  const traversalState = {
+    index: 0,
+  }
+
+  visitVNodes(vnodes, externalState, traversalState, result)
+
+  return result.filter(def => def.props.length)
+}
+
+function visitVNodes(vnodes: any, externalState: Variant['state'], traversalState: { index: number }, result: AutoPropComponentDefinition[]) {
+  for (const vnode of normalizeVNodes(vnodes)) {
+    if (!vnode) continue
+
+    if (typeof vnode.type === 'object') {
+      const index = traversalState.index++
+      const propDefs: PropDefinition[] = []
+
+      for (const key in vnode.type.props) {
+        const prop = vnode.type.props[key]
+        let types
+        let defaultValue
+
+        if (prop) {
+          const rawTypes = Array.isArray(prop.type)
+            ? prop.type
+            : typeof prop === 'function'
+              ? [prop]
+              : [prop.type]
+
+          types = rawTypes.map((type) => {
+            switch (type) {
+              case String:
+                return 'string'
+              case Number:
+                return 'number'
+              case Boolean:
+                return 'boolean'
+              case Object:
+                return 'object'
+              case Array:
+                return 'array'
+              default:
+                return 'unknown'
+            }
+          })
+
+          defaultValue = typeof prop.default === 'function'
+            ? prop.default.toString()
+            : prop.default
+        }
+
+        propDefs.push({
+          name: key,
+          types,
+          required: prop?.required,
+          default: defaultValue,
+        })
+
+        if (externalState?._hPropState?.[index]?.[key] != null) {
+          if (!vnode.props) {
+            vnode.props = {}
+          }
+          vnode.props[key] = externalState._hPropState[index][key]
+
+          if (!vnode.dynamicProps) {
+            vnode.dynamicProps = []
+          }
+
+          if (!vnode.dynamicProps.includes(key)) {
+            vnode.dynamicProps.push(key)
+          }
+        }
+      }
+
+      result.push({
+        name: getTagName(vnode),
+        index,
+        props: propDefs,
+      } as AutoPropComponentDefinition)
+    }
+
+    if (Array.isArray(vnode.children)) {
+      visitVNodes(vnode.children, externalState, traversalState, result)
+    }
+  }
+}
+
+function normalizeVNodes(vnodes: any) {
+  if (!Array.isArray(vnodes)) {
+    return vnodes == null ? [] : [vnodes]
+  }
+
+  const result = []
+
+  for (const vnode of vnodes) {
+    if (Array.isArray(vnode)) {
+      result.push(...normalizeVNodes(vnode))
+    }
+    else if (vnode != null) {
+      result.push(vnode)
+    }
+  }
+
+  return result
+}

package/src/client/app/global-components.ts

@@ -0,0 +1,131 @@
+import type {
+  App as _App,
+} from '@poveste/vendors/vue'
+import type {
+  App,
+} from 'vue'
+import { components } from '@poveste/controls'
+import {
+  createApp as _createApp,
+  h as _h,
+  reactive as _reactive,
+} from '@poveste/vendors/vue'
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  onUpdated,
+  ref,
+} from 'vue'
+import Story from './Story'
+import Variant from './Variant'
+
+export function registerGlobalComponents(app: App) {
+  app.component('Story', Story)
+
+  app.component('Variant', Variant)
+
+  for (const key in components) {
+    app.component(key, wrapControlComponent(components[key]))
+  }
+}
+
+function wrapControlComponent(controlComponent) {
+  return defineComponent({
+    name: controlComponent.name,
+    inheritAttrs: false,
+    setup(props, { attrs }) {
+      const el = ref<HTMLDivElement>()
+      const slotEl = ref<HTMLDivElement>()
+
+      // Attrs
+
+      const state = _reactive({})
+
+      function applyState(data) {
+        Object.assign(state, data)
+      }
+
+      applyState(attrs)
+      onBeforeUpdate(() => {
+        applyState(attrs)
+      })
+
+      // Slots
+
+      let newSlotCalls = []
+      const slotCalls = ref([])
+
+      function moveSlotContent() {
+        slotCalls.value.forEach((props, index) => {
+          const renderedEl = slotEl.value.querySelector(`[renderslotid="${index}"]`)
+          if (!renderedEl) return
+          const targetEl = el.value.querySelector(`[slotid="${index}"]`)
+          while (targetEl.firstChild) {
+            targetEl.removeChild(targetEl.lastChild)
+          }
+          targetEl.appendChild(renderedEl)
+        })
+      }
+
+      // App
+
+      let app: _App
+
+      onMounted(() => {
+        app = _createApp({
+          mounted() {
+            slotCalls.value = newSlotCalls
+            newSlotCalls = []
+          },
+          updated() {
+            slotCalls.value = newSlotCalls
+            newSlotCalls = []
+          },
+          render() {
+            return _h(controlComponent, {
+              ...state,
+              key: 'component',
+            }, {
+              default: (props) => {
+                newSlotCalls.push(props)
+                return _h('div', {
+                  slotId: newSlotCalls.length - 1,
+                })
+              },
+            })
+          },
+        })
+        app.mount(el.value)
+      })
+
+      onUpdated(() => {
+        moveSlotContent()
+      })
+
+      onBeforeUnmount(() => {
+        app.unmount()
+      })
+
+      return {
+        el,
+        slotEl,
+        slotCalls,
+      }
+    },
+    render() {
+      return [
+        h('div', {
+          ref: 'el',
+        }),
+        h('div', {
+          ref: 'slotEl',
+        }, this.slotCalls.map((props, index) => h('div', {
+          renderSlotId: index,
+        }, this.$slots.default(props)))),
+      ]
+    },
+  })
+}

package/src/client/app/host.ts

@@ -0,0 +1,139 @@
+import type { Story, Variant } from '@poveste/shared'
+import type { App, Component, PropType, VNode } from 'vue'
+import type { Vue3StorySetupApi, Vue3StorySetupHandler } from '../../helpers.js'
+// @ts-expect-error virtual module id
+import * as generatedSetup from 'virtual:$histoire-generated-global-setup'
+// @ts-expect-error virtual module id
+import * as setup from 'virtual:$histoire-setup'
+import {
+  createApp,
+  defineComponent,
+  h,
+  Suspense,
+} from 'vue'
+import { registerGlobalComponents } from './global-components.js'
+import { type PreviewRenderContext, provideRenderContext } from './render-context.js'
+import { RouterLinkStub } from './RouterLinkStub'
+
+interface PreviewHostOptions {
+  name: string
+  el: HTMLElement
+  getStory: () => Story
+  getVariant: () => Variant | null
+  renderContext: PreviewRenderContext
+  wrapInDiv?: boolean
+}
+
+const PreviewHostRoot = defineComponent({
+  name: 'PreviewHostRoot',
+
+  props: {
+    story: {
+      type: Object as PropType<Story>,
+      required: true,
+    },
+
+    renderContext: {
+      type: Object as PropType<PreviewRenderContext>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    provideRenderContext(props.renderContext)
+
+    return () => h(props.story.file.component, {
+      story: props.story,
+    })
+  },
+})
+
+export function createPreviewHost(options: PreviewHostOptions) {
+  let app: App = null
+  let target: HTMLDivElement = null
+
+  async function mount() {
+    const wrappers: Component[] = []
+
+    target = document.createElement('div')
+    options.el.appendChild(target)
+
+    app = createApp({
+      name: options.name,
+
+      render: () => {
+        let vnode: VNode = h(PreviewHostRoot, {
+          story: options.getStory(),
+          renderContext: options.renderContext,
+        })
+
+        for (const wrapper of wrappers) {
+          const child = vnode
+          vnode = h(wrapper, {
+            story: options.getStory(),
+            variant: options.getVariant(),
+          }, () => child)
+        }
+
+        if (options.wrapInDiv) {
+          vnode = h('div', vnode)
+        }
+
+        return h(Suspense, {}, vnode)
+      },
+    })
+
+    registerGlobalComponents(app)
+    app.component('RouterLink', RouterLinkStub)
+
+    const setupApi: Vue3StorySetupApi = {
+      app,
+      story: options.getStory(),
+      variant: options.getVariant(),
+      addWrapper: (wrapper) => {
+        wrappers.unshift(wrapper)
+      },
+    }
+
+    await runSetupHooks(setupApi)
+
+    app.mount(target)
+  }
+
+  function unmount() {
+    app?.unmount()
+    app = null
+
+    if (target) {
+      target.parentNode?.removeChild(target)
+      target = null
+    }
+  }
+
+  function forceUpdate() {
+    app?._instance?.proxy?.$forceUpdate()
+  }
+
+  return {
+    mount,
+    unmount,
+    forceUpdate,
+  }
+}
+
+async function runSetupHooks(setupApi: Vue3StorySetupApi) {
+  if (typeof generatedSetup?.setupVue3 === 'function') {
+    const setupFn = generatedSetup.setupVue3 as Vue3StorySetupHandler
+    await setupFn(setupApi)
+  }
+
+  if (typeof setup?.setupVue3 === 'function') {
+    const setupFn = setup.setupVue3 as Vue3StorySetupHandler
+    await setupFn(setupApi)
+  }
+
+  if (typeof setupApi.variant?.setupApp === 'function') {
+    const setupFn = setupApi.variant.setupApp as Vue3StorySetupHandler
+    await setupFn(setupApi)
+  }
+}

package/src/client/app/index.ts

@@ -0,0 +1,2 @@
+export { default as MountStory } from './MountStory'
+export { default as RenderStory } from './RenderStory'

package/src/client/app/render-context.ts

@@ -0,0 +1,23 @@
+import type { Variant } from '@poveste/shared'
+import type { InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface PreviewRenderContext {
+  mode: 'mount' | 'render'
+  slotName: string
+  currentVariant: Variant | null
+  externalState: Variant['state'] | null
+  nextVariantIndex: {
+    value: number
+  }
+}
+
+const previewRenderContextKey: InjectionKey<PreviewRenderContext> = Symbol('histoire-preview-render-context')
+
+export function provideRenderContext(value: PreviewRenderContext) {
+  provide(previewRenderContextKey, value)
+}
+
+export function useRenderContext() {
+  return inject(previewRenderContextKey, null)
+}