@poveste/plugin-vue 0.1.0

package/src/client/app/util.ts

@@ -0,0 +1,129 @@
+import { applyState } from '@poveste/shared'
+import {
+  isRef as _isRef,
+  unref as _unref,
+  watch as _watch,
+} from '@poveste/vendors/vue'
+import { isRef, unref, watch } from 'vue'
+
+const isObject = val => val !== null && typeof val === 'object'
+
+/**
+ * Using external/user Vue
+ */
+export function toRawDeep(val, seen = new WeakMap()) {
+  const unwrappedValue = isRef(val) ? unref(val) : val
+
+  if (typeof unwrappedValue === 'symbol') {
+    return unwrappedValue.toString()
+  }
+
+  if (!isObject(unwrappedValue)) {
+    return unwrappedValue
+  }
+
+  if (seen.has(unwrappedValue)) {
+    return seen.get(unwrappedValue)
+  }
+
+  if (Array.isArray(unwrappedValue)) {
+    const result = []
+    seen.set(unwrappedValue, result)
+    result.push(...unwrappedValue.map(value => toRawDeep(value, seen)))
+    return result
+  }
+  else {
+    const result = {}
+    seen.set(unwrappedValue, result)
+    toRawObject(unwrappedValue, result, seen)
+    return result
+  }
+}
+
+function toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = new WeakMap()) {
+  Object.keys(obj).forEach((key) => {
+    target[key] = toRawDeep(obj[key], seen)
+  })
+}
+
+/**
+ * Using bundled Vue
+ */
+export function _toRawDeep(val, seen = new WeakMap()) {
+  const unwrappedValue = _isRef(val) ? _unref(val) : val
+
+  if (typeof unwrappedValue === 'symbol') {
+    return unwrappedValue.toString()
+  }
+
+  if (!isObject(unwrappedValue)) {
+    return unwrappedValue
+  }
+
+  if (seen.has(unwrappedValue)) {
+    return seen.get(unwrappedValue)
+  }
+
+  if (Array.isArray(unwrappedValue)) {
+    const result = []
+    seen.set(unwrappedValue, result)
+    result.push(...unwrappedValue.map(value => _toRawDeep(value, seen)))
+    return result
+  }
+  else {
+    const result = {}
+    seen.set(unwrappedValue, result)
+    _toRawObject(unwrappedValue, result, seen)
+    return result
+  }
+}
+
+function _toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = new WeakMap()) {
+  Object.keys(obj).forEach((key) => {
+    target[key] = toRawDeep(obj[key], seen)
+  })
+}
+
+/**
+ * Synchronize states between the bundled and external/user versions of Vue
+ * @param bundledState Reactive state created with the bundled Vue
+ * @param externalState Reactive state created with the external/user Vue
+ */
+export function syncStateBundledAndExternal(bundledState, externalState) {
+  let syncing = false
+
+  const _stop = _watch(() => bundledState, (value) => {
+    if (value == null) return
+    if (!syncing) {
+      syncing = true
+      applyState(externalState, _toRawDeep(value))
+    }
+    else {
+      syncing = false
+    }
+  }, {
+    deep: true,
+    immediate: true,
+  })
+
+  const stop = watch(() => externalState, (value) => {
+    if (value == null) return
+    if (!syncing) {
+      syncing = true
+      applyState(bundledState, toRawDeep(value))
+    }
+    else {
+      syncing = false
+    }
+  }, {
+    deep: true,
+    immediate: true,
+  })
+
+  return {
+    stop() {
+      _stop()
+      stop()
+    },
+  }
+}

package/src/client/client.ts

@@ -0,0 +1,8 @@
+export * from './app/index.js'
+export * from './codegen.js'
+
+declare module '@poveste/shared' {
+  interface StoryMeta {
+    hasVariantChildComponents?: boolean
+  }
+}

package/src/client/codegen.ts

@@ -0,0 +1,400 @@
+// @TODO remove @ts-ignore
+
+import type { Variant } from '@poveste/shared'
+import type { VNode } from 'vue'
+import { createAutoBuildingObject, indent, serializeJs, voidElements } from '@poveste/shared'
+import { camelCase, pascalCase } from 'change-case'
+import { Text, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText } from 'vue'
+
+export async function generateSourceCode(variant: Variant) {
+  const vnode = variant.slots().default?.({ state: variant.state ?? {} }) ?? []
+  const list = Array.isArray(vnode) ? vnode : [vnode]
+  const lines: string[] = []
+  for (const n in list) {
+    const vnode = list[n]
+    lines.push(...(await printVNode(vnode, variant.state?._hPropState?.[n])).lines)
+  }
+  return lines.join('\n')
+}
+
+async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = null): Promise<{ lines: string[], isText?: boolean }> {
+  if (vnode.type === Text) {
+    return {
+      // @ts-expect-error TODO
+      lines: [vnode.children],
+      isText: true,
+    }
+  }
+
+  const lines: string[] = []
+
+  if (typeof vnode.type === 'object' || typeof vnode.type === 'string') {
+    // Wait for async component
+    // @ts-expect-error TODO
+    if (vnode.type?.__asyncLoader && !vnode.type.__asyncResolved) {
+      // @ts-expect-error TODO
+      await vnode.type.__asyncLoader()
+    }
+
+    const attrs: string[][] = []
+    let multilineAttrs = false
+    const skipProps: string[] = [
+      'key',
+    ]
+
+    // Directives
+    function genDirective(dirName: string, dir, valueCode: string = null) {
+      let modifiers = ''
+      for (const key in dir.modifiers) {
+        if (dir.modifiers[key]) {
+          modifiers += `.${key}`
+        }
+      }
+      let arg = ''
+      if (dir.arg) {
+        arg = `:${dir.arg}`
+      }
+      if (valueCode) {
+        // Cleanup render code
+        valueCode = valueCode.replace(/^\$(setup|props|data)\./g, '')
+      }
+      const valueLines = valueCode ? [valueCode] : serializeAndCleanJs(dir.value)
+      const attr: string[] = []
+      const dirAttr = `v-${dirName}${arg}${modifiers}="`
+      if (valueLines.length > 1) {
+        attr.push(`${dirAttr}${valueLines[0]}`)
+        attr.push(...valueLines.slice(1, valueLines.length - 1))
+        attr.push(`${valueLines[valueLines.length - 1]}"`)
+        multilineAttrs = true
+      }
+      else {
+        attr.push(`${dirAttr}${valueLines[0] ?? ''}"`)
+      }
+      attrs.push(attr)
+    }
+    if (vnode.dirs) {
+      for (const dir of vnode.dirs) {
+        // Vmodel
+        if (dir.dir === vModelText || dir.dir === vModelSelect || dir.dir === vModelRadio || dir.dir === vModelCheckbox || dir.dir === vModelDynamic) {
+          const listenerKeys = [`onUpdate:${dir.arg ?? 'modelValue'}`, `onUpdate:${camelCase(dir.arg ?? 'modelValue')}`]
+          const listenerKey = listenerKeys.find(key => vnode.props[key])
+          const listener = vnode.props[listenerKey]
+          let valueCode: string = null
+          if (listener) {
+            skipProps.push(listenerKey)
+            const listenerSource = listener.toString()
+            const result = /\(\$event\) => (.*?) = \$event/.exec(listenerSource)
+            if (result) {
+              valueCode = result[1]
+            }
+          }
+          genDirective('model', dir, valueCode)
+        }
+        // @ts-expect-error TODO
+        else if (dir.instance._ || dir.instance.$) {
+          // @ts-expect-error TODO
+          const target = dir.instance.$ ?? dir.instance._
+          let dirName: string
+          for (const directives of [target.directives, target.appContext.directives]) {
+            for (const key in directives) {
+              if (directives[key] === dir.dir) {
+                dirName = key
+                break
+              }
+            }
+            if (dirName) break
+          }
+          // Check in setup state
+          if (!dirName) {
+            for (const key in target.setupState) {
+              if (target.setupState[key] === dir.dir) {
+                dirName = key.replace(/^v(\w)/, (_, p1) => p1.toLowerCase())
+                break
+              }
+            }
+          }
+          if (dirName) {
+            genDirective(dirName, dir)
+          }
+        }
+      }
+    }
+
+    // Attributes
+    function addAttr(prop: string, value: any) {
+      // @ts-expect-error TODO
+      if (typeof value !== 'string' || vnode.dynamicProps?.includes(prop)) {
+        let directive = ':'
+        if (prop.startsWith('on')) {
+          directive = '@'
+        }
+        const arg = directive === '@' ? `${prop[2].toLowerCase()}${prop.slice(3)}` : prop
+
+        // v-model on component
+        const vmodelListeners = [`onUpdate:${prop}`, `onUpdate:${camelCase(prop)}`]
+        // @ts-expect-error TODO
+        const vmodelListener = vmodelListeners.find(key => vnode.dynamicProps?.includes(key) || (vnode.props && key in vnode.props))
+        if (directive === ':' && vmodelListener) {
+          // Listener
+          skipProps.push(vmodelListener)
+          const listener = vnode.props[vmodelListener]
+          const listenerSource = listener.toString()
+          let valueCode: string
+          const result = /\(\$event\) => (.*?) = \$event/.exec(listenerSource)
+          if (result) {
+            valueCode = result[1]
+          }
+
+          // Modifiers
+          const modifiersKey = `${prop === 'modelValue' ? 'model' : prop}Modifiers`
+          const modifiers = vnode.props[modifiersKey] ?? {}
+          skipProps.push(modifiersKey)
+
+          // Directive
+          genDirective('model', {
+            arg: prop === 'modelValue' ? null : prop,
+            modifiers,
+            value,
+          }, valueCode)
+          return
+        }
+
+        if (typeof value === 'undefined') {
+          return
+        }
+
+        let serialized: string[]
+        if (typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')) {
+          // It was formatted from auto building object (slot props)
+          serialized = cleanupExpression(value.substring(2, value.length - 2).trim()).split('\n')
+        }
+        else if (typeof value === 'function') {
+          let code = cleanupExpression(value.toString().replace(/'/g, '\\\'').replace(/"/g, '\''))
+          const testResult = /function (\S+)\(/.exec(code)
+          if (testResult) {
+            // Function name only
+            serialized = [testResult[1]]
+          }
+          else {
+            if (code.startsWith('($event) => ')) {
+              // Remove unnecessary `($event) => `
+              code = code.substring('($event) => '.length)
+            }
+            serialized = code.split('\n')
+          }
+        }
+        else {
+          serialized = serializeAndCleanJs(value)
+        }
+        if (serialized.length > 1) {
+          multilineAttrs = true
+          const indented: string[] = [`${directive}${arg}="${serialized[0]}`]
+          indented.push(...serialized.slice(1, serialized.length - 1))
+          indented.push(`${serialized[serialized.length - 1]}"`)
+          attrs.push(indented)
+        }
+        else {
+          attrs.push([`${directive}${arg}="${serialized[0]}"`])
+        }
+      }
+      // @ts-expect-error TODO
+      else if (vnode.type?.props?.[prop]?.type === Boolean) {
+        attrs.push([prop])
+      }
+      else {
+        attrs.push([`${prop}="${value}"`])
+      }
+    }
+
+    for (const prop in vnode.props) {
+      if (skipProps.includes(prop) || (propsOverrides && prop in propsOverrides)) {
+        continue
+      }
+      const value = vnode.props[prop]
+      addAttr(prop, value)
+    }
+
+    if (propsOverrides) {
+      for (const prop in propsOverrides) {
+        addAttr(prop, propsOverrides[prop])
+      }
+    }
+
+    if (attrs.length > 1) {
+      multilineAttrs = true
+    }
+
+    // Tags
+    const tagName = getTagName(vnode)
+
+    // Children
+    let isChildText = false
+    const childLines: string[] = []
+    if (typeof vnode.children === 'string') {
+      if (tagName === 'pre') {
+        childLines.push(vnode.children)
+      }
+      else {
+        childLines.push(...vnode.children.split('\n'))
+      }
+      isChildText = true
+    }
+    else if (Array.isArray(vnode.children)) {
+      let isAllChildText
+      for (const child of vnode.children) {
+        // @ts-expect-error TODO
+        const result = await printVNode(child)
+        if (result.isText) {
+          if (isAllChildText === undefined) {
+            isAllChildText = true
+          }
+          const text = result.lines[0]
+          if (!childLines.length || /^\s/.test(text)) {
+            childLines.push(text.trim())
+          }
+          else {
+            childLines[childLines.length - 1] += text
+          }
+        }
+        else {
+          if (isAllChildText === undefined) {
+            isAllChildText = false
+          }
+          childLines.push(...result.lines)
+        }
+      }
+      if (isAllChildText !== undefined) {
+        isChildText = isAllChildText
+      }
+    }
+
+    // Slots
+    if (vnode.children && typeof vnode.children === 'object' && !Array.isArray(vnode.children)) {
+      for (const key in vnode.children) {
+        if (typeof vnode.children[key] === 'function') {
+          const autoObject = createAutoBuildingObject(key => `{{ ${key} }}`, (target, p) => {
+            // Vue 3
+            if (p === '__v_isRef') {
+              return () => false
+            }
+          })
+          const children = vnode.children[key](autoObject.proxy)
+          const slotLines: string[] = []
+          for (const child of children) {
+            slotLines.push(...(await printVNode(child)).lines)
+          }
+          const slotProps = Object.keys(autoObject.cache)
+          if (slotProps.length) {
+            childLines.push(`<template #${key}="{ ${slotProps.join(', ')} }">`)
+            childLines.push(...indent(slotLines))
+            childLines.push('</template>')
+          }
+          else if (key === 'default') {
+            childLines.push(...slotLines)
+          }
+          else {
+            childLines.push(`<template #${key}>`)
+            childLines.push(...indent(slotLines))
+            childLines.push(`</template>`)
+          }
+        }
+      }
+    }
+
+    // Template
+    const tag = [`<${tagName}`]
+    if (multilineAttrs) {
+      for (const attrLines of attrs) {
+        tag.push(...indent(attrLines))
+      }
+      if (childLines.length > 0) {
+        tag.push('>')
+      }
+    }
+    else {
+      if (attrs.length === 1) {
+        tag[0] += ` ${attrs[0]}`
+      }
+      if (childLines.length > 0) {
+        tag[0] += '>'
+      }
+    }
+
+    const isVoid = voidElements.includes(tagName.toLowerCase())
+
+    if (childLines.length > 0) {
+      if (childLines.length === 1 && tag.length === 1 && !attrs.length && isChildText) {
+        lines.push(`${tag[0]}${childLines[0]}</${tagName}>`)
+      }
+      else {
+        lines.push(...tag)
+        lines.push(...indent(childLines))
+        lines.push(`</${tagName}>`)
+      }
+    }
+    else if (tag.length > 1) {
+      lines.push(...tag)
+      lines.push(isVoid ? '>' : '/>')
+    }
+    else {
+      lines.push(`${tag[0]}${isVoid ? '' : ' /'}>`)
+    }
+  }
+  else if (vnode?.shapeFlag & 1 << 4) {
+    // @ts-expect-error TODO
+    for (const child of vnode.children) {
+      lines.push(...(await printVNode(child)).lines)
+    }
+  }
+
+  return {
+    lines,
+  }
+}
+
+export function getTagName(vnode: VNode) {
+  if (typeof vnode.type === 'string') {
+    return vnode.type
+  }
+  // @ts-expect-error TODO
+  else if (vnode.type?.__asyncResolved) {
+    // @ts-expect-error TODO
+    const asyncComp = vnode.type?.__asyncResolved
+    return asyncComp.name ?? getNameFromFile(asyncComp.__file)
+  }
+  // @ts-expect-error TODO
+  else if (vnode.type?.name) {
+    // @ts-expect-error TODO
+    return vnode.type.name
+  }
+  // @ts-expect-error TODO
+  else if (vnode.type?.__file) {
+    // @ts-expect-error TODO
+    return getNameFromFile(vnode.type.__file)
+  }
+  return 'Anonymous'
+}
+
+function getNameFromFile(file: string) {
+  const parts = /([^/]+)\.vue$/.exec(file)
+  if (parts) {
+    return pascalCase(parts[1])
+  }
+  return 'Anonymous'
+}
+
+function serializeAndCleanJs(value: any) {
+  const isAutoBuildingObject = !!value?.__autoBuildingObject
+  const result = serializeJs(value)
+  if (isAutoBuildingObject) {
+    // @ts-expect-error TODO
+    return [cleanupExpression(result.__autoBuildingObjectGetKey)]
+  }
+  else {
+    return cleanupExpression(result).split('\n')
+  }
+}
+
+function cleanupExpression(expr: string) {
+  return expr.replace(/\$setup\./g, '')
+}

package/src/client/server/Story.ts

@@ -0,0 +1,121 @@
+import type { ServerStory, ServerStoryFile, ServerVariant } from '@poveste/shared'
+import type { PropType } from 'vue'
+import { defineComponent, inject, onMounted, provide, useAttrs } from 'vue'
+import { autoStubComponents } from './stub'
+
+export default defineComponent({
+  name: 'PovesteStory',
+
+  inheritAttrs: false,
+
+  props: {
+    title: {
+      type: String,
+      default: undefined,
+    },
+
+    id: {
+      type: String,
+      default: undefined,
+    },
+
+    group: {
+      type: String,
+      default: undefined,
+    },
+
+    layout: {
+      type: Object as PropType<ServerStory['layout']>,
+      default: undefined,
+    },
+
+    icon: {
+      type: String,
+      default: undefined,
+    },
+
+    iconColor: {
+      type: String,
+      default: undefined,
+    },
+
+    docsOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    meta: {
+      type: Object as PropType<ServerStory['meta']>,
+      default: undefined,
+    },
+  },
+
+  setup(props) {
+    const attrs = useAttrs() as {
+      data: ServerStoryFile
+    }
+
+    // Story
+
+    const story: ServerStory = {
+      id: props.id ?? attrs.data.id,
+      title: props.title ?? attrs.data.fileName,
+      group: props.group,
+      layout: props.layout,
+      icon: props.icon,
+      iconColor: props.iconColor,
+      docsOnly: props.docsOnly,
+      meta: props.meta,
+      variants: [],
+    }
+    const addStory = inject('addStory', null)
+    addStory?.(story)
+
+    // Variants
+
+    provide('story', story)
+
+    provide('addVariant', (variant: ServerVariant) => {
+      story.variants.push(variant)
+    })
+
+    onMounted(() => {
+      if (!story.variants.length) {
+        story.variants.push({
+          id: '_default',
+          title: 'default',
+        })
+      }
+    })
+
+    return {
+      story,
+    }
+  },
+
+  render() {
+    let suppressError = false
+    try {
+      const vnodes = this.$slots.default?.({
+        get state() {
+          // No variant tags
+          suppressError = true
+          return {}
+        },
+      })
+
+      // Auto stub components
+      if (Array.isArray(vnodes)) {
+        autoStubComponents(vnodes)
+      }
+
+      return vnodes
+    }
+    catch (e) {
+      if (!suppressError) {
+        console.error(e)
+      }
+      return null
+    }
+  },
+})

package/src/client/server/Variant.ts

@@ -0,0 +1,56 @@
+import type { ServerStory, ServerVariant } from '@poveste/shared'
+import { defineComponent, inject, type PropType } from 'vue'
+
+export default defineComponent({
+  name: 'PovesteVariant',
+
+  props: {
+    title: {
+      type: String,
+      default: 'untitled',
+    },
+
+    id: {
+      type: String,
+      default: undefined,
+    },
+
+    icon: {
+      type: String,
+      default: undefined,
+    },
+
+    iconColor: {
+      type: String,
+      default: undefined,
+    },
+
+    meta: {
+      type: Object as PropType<ServerVariant['meta']>,
+      default: undefined,
+    },
+  },
+
+  setup(props) {
+    const story = inject<ServerStory>('story')
+
+    function generateId() {
+      return `${story.id}-${story.variants.length}`
+    }
+
+    const variant: ServerVariant = {
+      id: props.id ?? generateId(),
+      title: props.title,
+      icon: props.icon,
+      iconColor: props.iconColor,
+      meta: props.meta,
+    }
+
+    const addVariant = inject('addVariant') as (variant: ServerVariant) => void
+    addVariant(variant)
+  },
+
+  render() {
+    return null
+  },
+})