poveste 0.6.0 → 0.7.0

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

@@ -1,167 +0,0 @@
-import type { Story, Variant } from '@poveste/shared'
-import type { PropType as _PropType } from '@poveste/vendors/vue'
-import type { VanillaStorySetupHandler as _VanillaStorySetupHandler, App, MountApi, VanillaApi } from './types'
-import { getSetupHook as _getSetupHook } from '@poveste/shared'
-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:$poveste-generated-global-setup'
-// @ts-expect-error virtual module id
-import * as setup from 'virtual:$poveste-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'),
-      }
-
-      const generatedSetupVanilla = _getSetupHook<_VanillaStorySetupHandler>(generatedSetup, 'setupVanilla')
-      if (generatedSetupVanilla) {
-        await generatedSetupVanilla({
-          app,
-          story: props.story,
-          variant: props.variant,
-        })
-      }
-
-      const setupVanilla = _getSetupHook<_VanillaStorySetupHandler>(setup, 'setupVanilla')
-      if (setupVanilla) {
-        await 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

@@ -1,6 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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>
-}
-
-export type VanillaStorySetupHandler = (payload: { app: App, story: Story, variant: Variant }) => unknown
-
-interface CommonProps {
-  setupApp?: VanillaStorySetupHandler
-}
-
-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

@@ -1,63 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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: [
-        // Published layout: `poveste` and scoped `@poveste/*` packages. These
-        // MUST be inlined so vite-node transforms them and resolves their
-        // `virtual:` imports; otherwise they're loaded via native Node ESM,
-        // which throws ERR_UNSUPPORTED_ESM_URL_SCHEME on `virtual:` and breaks
-        // story collection for any fresh npm install.
-        /\/poveste\/dist/,
-        /\/poveste\/client/,
-        /@poveste\/[\w-]+\/dist/,
-        // Workspace layout: packages/poveste-<name>/dist (dev / monorepo).
-        /poveste-[\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) {
-          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

@@ -1,9 +0,0 @@
-import type { ServerRunPayload } from '@poveste/shared'
-// @ts-expect-error virtual module
-import { collectSupportPlugins } from 'virtual:$poveste-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

@@ -1,103 +0,0 @@
-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, resetDomEnv } 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
-// Worker-lifetime: externalised runtimes cache the DOM they first saw, so one
-// per story broke re-collection.
-let _domEnv: ReturnType<typeof createDomEnv> | undefined
-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)
-    },
-  }))
-
-  if (_domEnv) {
-    resetDomEnv(_domEnv)
-  }
-  else {
-    _domEnv = 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
-    })
-  }
-
-  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,
-  }
-}