poveste 0.1.0

package/src/node/builtin-plugins/vanilla-support/RenderStory.ts

@@ -0,0 +1,164 @@
+import type { Story, Variant } from '@poveste/shared'
+import type { PropType as _PropType } from '@poveste/vendors/vue'
+import type { App, MountApi, VanillaApi } from './types'
+import {
+  defineComponent as _defineComponent,
+  h as _h,
+  onBeforeUnmount as _onBeforeUnmount,
+  onMounted as _onMounted,
+  ref as _ref,
+  watch as _watch,
+} from '@poveste/vendors/vue'
+// @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'
+
+export default _defineComponent({
+  name: 'RenderStory',
+
+  props: {
+    variant: {
+      type: Object as _PropType<Variant>,
+      required: true,
+    },
+
+    story: {
+      type: Object as _PropType<Story>,
+      required: true,
+    },
+
+    slotName: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  emits: {
+    ready: () => true,
+  },
+
+  setup(props, { emit }) {
+    const sandbox = _ref<HTMLDivElement>()
+    let mounting = false
+    let app: App
+    let appHooks: Record<'onUpdate' | 'onUnmount', (() => unknown)[]>
+
+    async function unmountVariant() {
+      if (app) {
+        await app.onUnmount?.()
+        if (appHooks) {
+          for (const hook of appHooks.onUnmount) {
+            await hook()
+          }
+        }
+
+        app.el.parentNode.removeChild(app.el)
+        app = null
+      }
+    }
+
+    async function mountVariant() {
+      if (mounting) return
+      mounting = true
+
+      await unmountVariant()
+
+      app = {
+        el: document.createElement('div'),
+      }
+
+      if (typeof generatedSetup?.setupVanilla === 'function') {
+        await generatedSetup.setupVanilla({
+          app,
+          story: props.story,
+          variant: props.variant,
+        })
+      }
+
+      if (typeof setup?.setupVanilla === 'function') {
+        await setup.setupVanilla({
+          app,
+          story: props.story,
+          variant: props.variant,
+        })
+      }
+
+      if (typeof props.variant.setupApp === 'function') {
+        await props.variant.setupApp({
+          app,
+          story: props.story,
+          variant: props.variant,
+        })
+      }
+
+      await app.onMount?.()
+
+      appHooks = {
+        onUpdate: [],
+        onUnmount: [],
+      }
+
+      const api: MountApi = {
+        el: app.el,
+        state: props.variant.state,
+        onUpdate: (cb) => {
+          appHooks.onUpdate.push(cb)
+        },
+        onUnmount: (cb) => {
+          appHooks.onUnmount.push(cb)
+        },
+      }
+
+      const onMount = props.variant.slots()[props.slotName] as VanillaApi['onMount'] | VanillaApi['onMountControls']
+      await onMount(api)
+
+      sandbox.value.appendChild(app.el)
+
+      emit('ready')
+    }
+
+    _onMounted(async () => {
+      if (props.variant.configReady) {
+        await mountVariant()
+      }
+    })
+
+    _watch(() => props.variant, async (value) => {
+      if (value.configReady && !mounting) {
+        if (!app) {
+          await mountVariant()
+        }
+        else {
+          // @TODO check if need to refresh here
+        }
+      }
+    }, {
+      deep: true,
+    })
+
+    _watch(() => props.variant.state, async () => {
+      if (appHooks) {
+        for (const hook of appHooks.onUpdate) {
+          await hook()
+        }
+      }
+    }, {
+      deep: true,
+    })
+
+    _onBeforeUnmount(() => {
+      unmountVariant()
+    })
+
+    return {
+      sandbox,
+    }
+  },
+
+  render() {
+    return _h('div', {
+      ref: 'sandbox',
+    })
+  },
+})

package/src/node/builtin-plugins/vanilla-support/client.ts

@@ -0,0 +1,6 @@
+export { default as MountStory } from './MountStory'
+export { default as RenderStory } from './RenderStory'
+
+export function generateSourceCode() {
+  // noop
+}

package/src/node/builtin-plugins/vanilla-support/collect.ts

@@ -0,0 +1,43 @@
+import type { ServerRunPayload, ServerStory, ServerVariant } from '@poveste/shared'
+import type { StoryOptions, VariantOptions } from './types'
+
+export async function run({ file, storyData }: ServerRunPayload) {
+  const { default: Comp } = await import(/* @vite-ignore */ file.moduleId)
+
+  const options = Comp as StoryOptions
+
+  let rawVariants: VariantOptions[] = []
+
+  if (options.onMount) {
+    // Implicit variant
+    rawVariants = [{
+      id: '_default',
+      title: 'default',
+    }]
+  }
+  else {
+    rawVariants = options.variants
+  }
+
+  const story: ServerStory = {
+    id: options.id ?? file.id,
+    title: options.title ?? file.fileName,
+    group: options.group,
+    layout: options.layout ?? { type: 'single', iframe: true },
+    icon: options.icon,
+    iconColor: options.iconColor,
+    docsOnly: options.docsOnly ?? false,
+    variants: null,
+  }
+
+  const variants: ServerVariant[] = rawVariants.map((v, index) => ({
+    id: v.id ?? `${story.id}-${index}`,
+    title: v.title ?? 'untitled',
+    icon: v.icon ?? options.icon,
+    iconColor: v.iconColor ?? options.iconColor,
+  }))
+
+  story.variants = variants
+
+  storyData.push(story)
+}

package/src/node/builtin-plugins/vanilla-support/plugin.ts

@@ -0,0 +1,35 @@
+import type { Plugin } from '@poveste/shared'
+import { fileURLToPath } from 'node:url'
+import { dirname } from 'pathe'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export function vanillaSupport(): Plugin {
+  return {
+    name: 'builtin:vanilla-support',
+
+    defaultConfig() {
+      return {
+        supportMatch: [
+          {
+            id: 'vanilla',
+            patterns: ['**/*.js'],
+            pluginIds: ['vanilla'],
+          },
+        ],
+      }
+    },
+
+    supportPlugin: {
+      id: 'vanilla',
+      moduleName: __dirname,
+      setupFn: 'setupVanilla',
+      importStoryComponent: (file, index) => `import Comp${index} from ${JSON.stringify(file.moduleId)}`, // @TODO code-splitting
+    },
+
+    // onDev (api) {
+    //   // Test vanilla story
+    //   api.addStoryFile(resolve(__dirname, './vanilla.story.js'))
+    // },
+  }
+}

package/src/node/builtin-plugins/vanilla-support/types.ts

@@ -0,0 +1,40 @@
+import type { Awaitable, Story, StoryProps, Variant, VariantProps } from '@poveste/shared'
+
+export interface App {
+  el: HTMLElement
+  onMount?: () => void
+  onUpdate?: () => void
+  onUnmount?: () => void
+}
+
+export interface MountApi {
+  el: HTMLElement
+  state: Record<string, any>
+  onUpdate: (cb: () => unknown) => Awaitable<void>
+  onUnmount: (cb: () => unknown) => Awaitable<void>
+}
+
+export interface VanillaApi {
+  onMount?: (api: MountApi) => Awaitable<void>
+  onMountControls?: (api: MountApi) => Awaitable<void>
+}
+
+interface CommonProps {
+  setupApp?: (payload: { app: App, story: Story, variant: Variant }) => unknown
+}
+
+export type StoryOptions = Omit<StoryProps, 'setupApp'> & CommonProps & ((VanillaApi & {
+  variants?: never
+}) | {
+  variants?: VariantOptions[]
+  onMount?: never
+  onMountControls?: never
+})
+
+export interface VariantOptions extends Omit<VariantProps, 'setupApp'>, CommonProps, VanillaApi {
+
+}
+
+export function defineStory(story: StoryOptions) {
+  return story
+}

package/src/node/builtin-plugins/vanilla-support/vanilla.story.ts

@@ -0,0 +1,63 @@
+import type { StoryOptions } from './types'
+
+export default {
+  title: 'Vanilla story',
+  icon: 'ion:logo-nodejs',
+  variants: [
+    {
+      title: 'Hello',
+      onMount: ({ el, state, onUpdate }) => {
+        state.count = 0
+
+        const div = document.createElement('div')
+        div.innerHTML = '<h1>Hello World</h1>'
+        el.appendChild(div)
+
+        const counter = document.createElement('pre')
+        counter.innerHTML = `Counter: ${state.counter}`
+        div.appendChild(counter)
+
+        onUpdate(() => {
+          counter.innerHTML = `Counter: ${state.count}`
+        })
+      },
+      onMountControls: ({ el, state, onUnmount }) => {
+        const add = () => {
+          state.count++
+        }
+
+        Object.assign(el.style, {
+          padding: '8px',
+        })
+
+        const btn = document.createElement('button')
+        btn.innerHTML = '+1'
+        Object.assign(btn.style, {
+          padding: '6px',
+          borderRadius: '3px',
+          backgroundColor: '#a7f3d0',
+        })
+        btn.addEventListener('click', add)
+        el.appendChild(btn)
+
+        onUnmount(() => {
+          btn.removeEventListener('click', add)
+        })
+      },
+    },
+    {
+      title: 'Meow',
+      onMount: ({ el, onUpdate, onUnmount }) => {
+        const div = document.createElement('div')
+        div.innerHTML = '<h1>Meow</h1>'
+        el.appendChild(div)
+        onUpdate(() => {
+          console.log('update')
+        })
+        onUnmount(() => {
+          el.removeChild(div)
+        })
+      },
+    },
+  ],
+} as StoryOptions

package/src/node/collect/index.ts

@@ -0,0 +1,160 @@
+import type { ServerStoryFile } from '@poveste/shared'
+import type { ViteDevServer } from 'vite'
+import type { FetchFunction, ResolveIdFunction } from 'vite-node'
+import type { Context } from '../context.js'
+import type { Payload, ReturnData } from './worker.js'
+import { cpus } from 'node:os'
+import { MessageChannel } from 'node:worker_threads'
+import Tinypool from '@akryum/tinypool'
+import { createBirpc } from 'birpc'
+import path, { relative } from 'pathe'
+import pc from 'picocolors'
+import { ViteNodeServer } from 'vite-node/server'
+import { TEMP_PATH } from '../alias.js'
+import { createPath } from '../tree.js'
+import { slash } from '../util/fs.js'
+
+export interface UseCollectStoriesOptions {
+  server: ViteDevServer
+  mainServer?: ViteDevServer
+  throws?: boolean
+}
+
+export function useCollectStories(options: UseCollectStoriesOptions, ctx: Context) {
+  const { server, mainServer } = options
+
+  const node = new ViteNodeServer(server as any, {
+    deps: {
+      inline: [
+        /histoire\/dist/,
+        /histoire\/client/,
+        /@histoire\/[\w-]+\/dist/,
+        /histoire-[\w-]+\/dist/,
+        /@vue\/devtools-api/,
+        /vuetify/,
+        // @TODO temporary fix for https://github.com/histoire-dev/histoire/issues/409
+        /vite\w*\/dist\/client\/(client|env).mjs/,
+        ...ctx.config.viteNodeInlineDeps ?? [],
+        new RegExp(path.resolve(TEMP_PATH, 'plugins')),
+      ],
+      fallbackCJS: true,
+    },
+    transformMode: ctx.config.viteNodeTransformMode,
+  })
+
+  const maxThreads = ctx.config.collectMaxThreads ?? cpus().length
+
+  const threadsCount = ctx.mode === 'dev'
+    ? Math.max(Math.min(maxThreads, Math.floor(cpus().length / 2)), 1)
+    : Math.max(Math.min(maxThreads, cpus().length - 1), 1)
+  console.log(pc.blue(`Using ${threadsCount} thread${threadsCount === 1 ? '' : 's'} for story collection`))
+
+  const threadPool = new Tinypool({
+    filename: new URL('./worker.js', import.meta.url).href,
+    // WebContainer compatibility (Stackblitz)
+    useAtomics: typeof process.versions.webcontainer !== 'string',
+    minThreads: threadsCount,
+    maxThreads: threadsCount,
+  })
+
+  function clearCache() {
+    server.moduleGraph.invalidateAll()
+    node.fetchCache.clear()
+  }
+
+  function createChannel() {
+    const channel = new MessageChannel()
+    const port = channel.port2
+    const workerPort = channel.port1
+
+    createBirpc<Record<string, never>, {
+      fetchModule: FetchFunction
+      resolveId: ResolveIdFunction
+    }>({
+      fetchModule: id => node.fetchModule(id),
+      resolveId: (id, importer) => node.resolveId(id, importer),
+    }, {
+      post: data => port.postMessage(data),
+      on: data => port.on('message', data),
+    })
+
+    return {
+      port,
+      workerPort,
+    }
+  }
+
+  if (mainServer) {
+    mainServer.watcher.on('change', (file) => {
+      file = slash(file)
+      threadPool.broadcastMessage({
+        kind: 'hst:invalidate',
+        file,
+      })
+    })
+  }
+
+  async function executeStoryFile(storyFile: ServerStoryFile) {
+    try {
+      const { workerPort } = createChannel()
+      const payload: Payload = {
+        root: server.config.root,
+        base: server.config.base,
+        storyFile,
+        port: workerPort,
+      }
+      const { storyData } = await threadPool.run(payload, {
+        transferList: [
+          workerPort,
+        ],
+      }) as ReturnData
+      if (storyData.length === 0) {
+        console.warn(pc.yellow(`⚠️  No story found for ${storyFile.path}`))
+        return
+      }
+      else if (storyData.length > 1) {
+        console.warn(pc.yellow(`⚠️  Multiple stories not supported: ${storyFile.path}`))
+      }
+
+      const finalData = storyData[0]
+
+      // Default props
+      if (ctx.config.defaultStoryProps) {
+        for (const key in ctx.config.defaultStoryProps) {
+          if (finalData[key] == null) {
+            finalData[key] = ctx.config.defaultStoryProps[key]
+          }
+        }
+      }
+
+      if (!finalData.layout) {
+        finalData.layout = { type: 'single', iframe: true }
+      }
+
+      storyFile.id = finalData.id
+      storyFile.story = finalData
+      storyFile.treeFile = {
+        title: finalData.title,
+        path: relative(server.config.root, storyFile.path),
+      }
+      storyFile.treePath = createPath(ctx.config, storyFile.treeFile)
+      storyFile.story.title = storyFile.treePath[storyFile.treePath.length - 1]
+    }
+    catch (e) {
+      console.error(pc.red(`Error while collecting story ${storyFile.path}:\n${e.frame ? `${pc.bold(e.message)}\n${e.frame}` : e.stack}`))
+      if (options.throws) {
+        throw e
+      }
+    }
+  }
+
+  async function destroy() {
+    await threadPool.destroy()
+  }
+
+  return {
+    clearCache,
+    executeStoryFile,
+    destroy,
+  }
+}

package/src/node/collect/run.ts

@@ -0,0 +1,9 @@
+import type { ServerRunPayload } from '@poveste/shared'
+// @ts-expect-error virtual module
+import { collectSupportPlugins } from 'virtual:$histoire-support-plugins-collect'
+
+export async function run(payload: ServerRunPayload) {
+  const { run } = await collectSupportPlugins[payload.file.supportPluginId]()
+  const result = await run(payload)
+  return result
+}

package/src/node/collect/worker.ts

@@ -0,0 +1,97 @@
+import type { ServerRunPayload, ServerStory, ServerStoryFile } from '@poveste/shared'
+import type { MessagePort } from 'node:worker_threads'
+import type { FetchFunction, ResolveIdFunction } from 'vite-node'
+import { performance } from 'node:perf_hooks'
+import { fileURLToPath } from 'node:url'
+import { parentPort } from 'node:worker_threads'
+import { createBirpc } from 'birpc'
+import { dirname, resolve } from 'pathe'
+import pc from 'picocolors'
+import { ModuleCacheMap, ViteNodeRunner } from 'vite-node/client'
+import { createDomEnv } from '../dom/env.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export interface Payload {
+  root: string
+  base: string
+  port: MessagePort
+  storyFile: ServerStoryFile
+}
+
+export interface ReturnData {
+  storyData: ServerStory[]
+}
+
+const _moduleCache = new ModuleCacheMap()
+let _runner: ViteNodeRunner
+let _rpc: ReturnType<typeof createBirpc<{
+  fetchModule: FetchFunction
+  resolveId: ResolveIdFunction
+}>>
+
+// Cleanup module cache
+parentPort.on('message', (message) => {
+  if (message?.kind === 'hst:invalidate') {
+    _moduleCache.delete(message.file)
+  }
+})
+
+export default async (payload: Payload): Promise<ReturnData> => {
+  const startTime = performance.now()
+  process.env.HST_COLLECT = 'true'
+
+  _rpc = createBirpc<{
+    fetchModule: FetchFunction
+    resolveId: ResolveIdFunction
+  }>({}, {
+    post: data => payload.port.postMessage(data),
+    on: data => payload.port.on('message', data),
+  })
+
+  const runner = _runner ?? (_runner = new ViteNodeRunner({
+    root: payload.root,
+    base: payload.base,
+    moduleCache: _moduleCache,
+    fetchModule(id) {
+      return _rpc.fetchModule(id)
+    },
+    resolveId(id, importer) {
+      return _rpc.resolveId(id, importer)
+    },
+  }))
+
+  const { destroy: destroyDomEnv } = createDomEnv()
+
+  const el = window.document.createElement('div')
+
+  const beforeExecuteTime = performance.now()
+  // Mount app to collect stories/variants
+  const { run } = (await runner.executeFile(resolve(__dirname, './run.js'))) as { run: (payload: ServerRunPayload) => Promise<any> }
+  const afterExecuteTime = performance.now()
+  const storyData: ServerStory[] = []
+  await run({
+    file: payload.storyFile,
+    storyData,
+    el,
+  })
+  const afterRunTime = performance.now()
+
+  if (payload.storyFile.markdownFile) {
+    const el = document.createElement('div')
+    el.innerHTML = payload.storyFile.markdownFile.html
+    const text = el.textContent
+    storyData.forEach((s) => {
+      s.docsText = text
+    })
+  }
+
+  destroyDomEnv()
+
+  const endTime = performance.now()
+  console.log(pc.dim(`${payload.storyFile.relativePath} ${Math.round(endTime - startTime)}ms (setup:${Math.round(beforeExecuteTime - startTime)}ms, execute:${Math.round(afterExecuteTime - beforeExecuteTime)}ms, run:${Math.round(afterRunTime - afterExecuteTime)}ms)`))
+
+  return {
+    storyData,
+  }
+}