refactor: extract vue3-project-specific logic, #87 (#127)

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "lint": "eslint . --ext js,vue,ts",
-    "build": "pnpm run -r --filter @histoire/controls build && pnpm run -r --filter histoire build && pnpm run -r --filter !histoire --filter !@histoire/controls build",
+    "build": "pnpm run -r --filter @histoire/controls build && pnpm run -r --filter !@histoire/controls build",
     "watch": "pnpm run build && pnpm run -r --parallel --filter \"./packages/**\" watch",
     "test": "pnpm run -r --parallel --filter \"./packages/**\" test",
     "test:open": "pnpm run -r --parallel --filter \"./packages/**\" test:open",

packages/histoire-controls/vite.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
 
     rollupOptions: {
       external: [
+        /@histoire/,
         'vue',
       ],
     },

packages/histoire-plugin-vue/client.d.ts

@@ -0,0 +1,3 @@
+
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/client/client'

packages/histoire-plugin-vue/collect.d.ts

@@ -0,0 +1,3 @@
+
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/client/server'

packages/histoire/src/components.d.ts → packages/histoire-plugin-vue/components.d.ts

@@ -4,7 +4,7 @@ import type {
   StoryLayout,
   Story,
   Variant,
-} from './client/app/types'
+} from '@histoire/shared'
 import type {
   HstCheckbox,
   HstText,

packages/histoire-plugin-vue/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@histoire/plugin-vue",
+  "version": "0.7.3",
+  "description": "Histoire plugin for Vue.js support",
+  "license": "MIT",
+  "author": {
+    "name": "Guillaume Chau"
+  },
+  "repository": {
+    "url": "https://github.com/Akryum/histoire.git",
+    "type": "git",
+    "directory": "packages/histoire-plugin-vue"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    "./client": {
+      "import": "./dist/bundled/client.js",
+      "types": "./dist/client/client.d.ts"
+    },
+    "./collect": {
+      "import": "./dist/bundled/server.js",
+      "types": "./dist/client/server.d.ts"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && pnpm run build:types",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly",
+    "watch": "concurrently \"vite build --watch\" \"pnpm run build:types --watch\""
+  },
+  "dependencies": {
+    "@histoire/controls": "workspace:^",
+    "@histoire/shared": "workspace:^"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.1",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1",
+    "vue": "^3.2.31",
+    "vue-tsc": "^0.35.2"
+  },
+  "peerDependencies": {
+    "histoire": "workspace:^",
+    "vue": "^3.2.31"
+  }
+}

packages/histoire-plugin-vue/src/client/app/MountStoryVue3.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { App, createApp, h, onMounted, onUnmounted, ref } from 'vue'
+import type { Story } from '@histoire/shared'
+import { registerGlobalComponents } from './global-components.js'
+import { RouterLinkStub } from './RouterLinkStub'
+
+const props = defineProps<{
+  story: Story
+}>()
+
+const el = ref<HTMLDivElement>()
+let app: App
+
+async function mountStory () {
+  app = createApp({
+    name: 'MountStoryVue3',
+
+    render: () => {
+      return h(props.story.file.component, {
+        story: props.story,
+      })
+    },
+  })
+
+  registerGlobalComponents(app)
+
+  // Stubs
+  app.component('RouterLink', RouterLinkStub)
+
+  const target = document.createElement('div')
+  el.value.appendChild(target)
+  app.mount(target)
+}
+
+onMounted(async () => {
+  await mountStory()
+})
+
+onUnmounted(() => {
+  app?.unmount()
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>

packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue → packages/histoire-plugin-vue/src/client/app/SandboxVue3.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { App, createApp, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
-import { Story, Variant, PropDefinition, AutoPropComponentDefinition } from '../../types'
-import { getTagName } from '../../codegen/vue3'
-import { applyStateToVariant } from '../../util/state'
+import { applyStateToVariant } from '@histoire/shared'
+import type { Story, Variant, PropDefinition, AutoPropComponentDefinition } from '@histoire/shared'
+import { getTagName } from '../codegen'
+import { registerGlobalComponents } from './global-components.js'
 import { RouterLinkStub } from './RouterLinkStub'
 // @ts-expect-error virtual module id
 import * as setup from '$histoire-setup'
@@ -126,6 +127,8 @@ async function mountVariant () {
     },
   })
 
+  registerGlobalComponents(app)
+
   // Stubs
   app.component('RouterLink', RouterLinkStub)
 

packages/histoire/src/client/app/components/exposed/Story.vue → packages/histoire-plugin-vue/src/client/app/Story.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, provide, useAttrs, VNode, h, PropType, getCurrentInstance } from 'vue'
-import type { Story } from '../../types.js'
+import type { Story } from '@histoire/shared'
 import Variant from './Variant.vue'
 
 export default defineComponent({

packages/histoire/src/client/app/components/exposed/Variant.vue → packages/histoire-plugin-vue/src/client/app/Variant.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance, inject, PropType, useAttrs, watch } from 'vue'
-import { Variant } from '../../types'
-import { applyStateToVariant } from '../../util/state'
+import type { Variant } from '@histoire/shared'
+import { applyStateToVariant } from '@histoire/shared'
 
 // const logLocation = location.href.includes('__sandbox') ? '[Sandbox]' : '[Host]'
 

packages/histoire/src/client/app/global-components.ts → packages/histoire-plugin-vue/src/client/app/global-components.ts

@@ -1,7 +1,7 @@
 import { App } from 'vue'
 import { registerVueComponents } from '@histoire/controls'
-import Story from './components/exposed/Story.vue'
-import Variant from './components/exposed/Variant.vue'
+import Story from './Story.vue'
+import Variant from './Variant.vue'
 
 export function registerGlobalComponents (app: App) {
   // eslint-disable-next-line vue/multi-word-component-names

packages/histoire-plugin-vue/src/client/app/index.ts

@@ -0,0 +1,2 @@
+export { default as SandboxVue3 } from './SandboxVue3.vue'
+export { default as MountStoryVue3 } from './MountStoryVue3.vue'

packages/histoire-plugin-vue/src/client/app/util.ts

@@ -0,0 +1,28 @@
+import { unref, isRef } from 'vue'
+
+const isObject = (val) => val !== null && typeof val === 'object'
+
+export function toRawDeep (val, seen = new Set()) {
+  const unwrappedValue = isRef(val) ? unref(val) : val
+
+  if (seen.has(unwrappedValue)) {
+    return Array.isArray(unwrappedValue) ? [] : {}
+  }
+
+  seen.add(unwrappedValue)
+
+  if (!isObject(unwrappedValue)) {
+    return unwrappedValue
+  }
+
+  if (Array.isArray(unwrappedValue)) {
+    return unwrappedValue.map(value => toRawDeep(value, seen))
+  }
+
+  return toRawObject(unwrappedValue, seen)
+}
+
+const toRawObject = (obj: Record<any, any>, seen = new Set()) => Object.keys(obj).reduce((raw, key) => {
+  raw[key] = toRawDeep(obj[key], seen)
+  return raw
+}, {})

packages/histoire-plugin-vue/src/client/client.ts

@@ -0,0 +1,2 @@
+export * from './app/index.js'
+export * from './codegen.js'

packages/histoire/src/client/app/codegen/vue3.ts → packages/histoire-plugin-vue/src/client/codegen.ts

@@ -2,10 +2,8 @@
 
 import { VNode, vModelText, vModelCheckbox, vModelSelect, vModelRadio, vModelDynamic, Text } from 'vue'
 import { pascal } from 'case'
-import { createAutoBuildingObject, indent } from './util'
-import { serializeJs } from './serialize-js'
-import type { Variant } from '../types'
-import { voidElements } from './const'
+import { createAutoBuildingObject, indent, serializeJs, voidElements } from '@histoire/shared'
+import type { Variant } from '@histoire/shared'
 
 export async function generateSourceCode (variant: Variant) {
   const vnode = variant.slots().default?.({ state: variant.state ?? {} }) ?? []

packages/histoire-plugin-vue/src/client/server.ts

@@ -0,0 +1 @@
+export * from './server/run.js'

packages/histoire/src/client/server/vue3/Story.vue → packages/histoire-plugin-vue/src/client/server/Story.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, inject, onMounted, PropType, provide, useAttrs } from 'vue'
-import type { StoryFile, Story, Variant } from '../../../node/types'
+import type { ServerStoryFile, ServerStory, ServerVariant } from '@histoire/shared'
 
 const stub = { name: 'StubbedComponent', render: () => null }
 
@@ -26,7 +26,7 @@ export default defineComponent({
     },
 
     layout: {
-      type: Object as PropType<Story['layout']>,
+      type: Object as PropType<ServerStory['layout']>,
       default: () => ({ type: 'single', iframe: true }),
     },
 
@@ -48,12 +48,12 @@ export default defineComponent({
 
   setup (props) {
     const attrs = useAttrs() as {
-      data: StoryFile
+      data: ServerStoryFile
     }
 
     // Story
 
-    const story: Story = {
+    const story: ServerStory = {
       id: props.id ?? attrs.data.id,
       title: props.title ?? attrs.data.fileName,
       group: props.group,
@@ -70,7 +70,7 @@ export default defineComponent({
 
     provide('story', story)
 
-    provide('addVariant', (variant: Variant) => {
+    provide('addVariant', (variant: ServerVariant) => {
       story.variants.push(variant)
     })
 

packages/histoire/src/client/server/vue3/Variant.vue → packages/histoire-plugin-vue/src/client/server/Variant.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, inject } from 'vue'
-import type { Story, Variant } from '../../../node/types'
+import type { ServerStory, ServerVariant } from '@histoire/shared'
 
 export default defineComponent({
   name: 'HistoireVariant',
@@ -28,20 +28,20 @@ export default defineComponent({
   },
 
   setup (props) {
-    const story = inject<Story>('story')
+    const story = inject<ServerStory>('story')
 
     function generateId () {
       return `${story.id}-${story.variants.length}`
     }
 
-    const variant: Variant = {
+    const variant: ServerVariant = {
       id: props.id ?? generateId(),
       title: props.title,
       icon: props.icon,
       iconColor: props.iconColor,
     }
 
-    const addVariant = inject('addVariant') as (variant: Variant) => void
+    const addVariant = inject('addVariant') as (variant: ServerVariant) => void
     addVariant(variant)
   },
 

packages/histoire/src/client/server/vue3/run.ts → packages/histoire-plugin-vue/src/client/server/run.ts

@@ -1,6 +1,6 @@
 import { createApp, h } from 'vue'
 import { registerVueComponents } from '@histoire/controls'
-import type { ServerRunPayload } from '../index.js'
+import type { ServerRunPayload } from '@histoire/shared'
 import Story from './Story.vue'
 import Variant from './Variant.vue'
 // @ts-expect-error virtual module id

packages/histoire-plugin-vue/src/client/shim.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const comp: ComponentOptions
+  export default comp
+}

packages/histoire-plugin-vue/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "rootDir": "src",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "types": [
+      "node",
+      "@peeky/test"
+    ],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "sourceMap": false,
+    "preserveWatchOutput": true,
+    "preserveSymlinks": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    // Volar
+    "jsx": "preserve",
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}