poveste 0.1.0

package/src/node/search.ts

@@ -0,0 +1,84 @@
+import type { Context } from './context.js'
+import { noCase } from 'change-case'
+
+export async function generateTitleSearchData(ctx: Context) {
+  const searchIndex = []
+  const { idMap, addToIdMap } = createIdMap()
+
+  for (const storyFile of ctx.storyFiles) {
+    if (storyFile.story) {
+      searchIndex.push({
+        id: addToIdMap(storyFile.story.id, 'story'),
+        text: convertTitleToSentence(storyFile.story.title),
+      })
+      for (const variant of storyFile.story.variants) {
+        searchIndex.push({
+          id: addToIdMap(`${storyFile.story.id}:${variant.id}`, 'variant'),
+          text: convertTitleToSentence(`${storyFile.story.title} ${variant.title}`),
+        })
+      }
+    }
+  }
+
+  return {
+    index: searchIndex,
+    idMap,
+  }
+}
+
+export async function generateDocSearchData(ctx: Context) {
+  const searchIndex = []
+  const { idMap, addToIdMap } = createIdMap()
+
+  for (const storyFile of ctx.storyFiles) {
+    if (storyFile.story && storyFile.story.docsText) {
+      searchIndex.push({
+        id: addToIdMap(storyFile.story.id, 'story'),
+        text: storyFile.story.docsText,
+      })
+    }
+  }
+
+  return {
+    index: searchIndex,
+    idMap,
+  }
+}
+
+function createIdMap() {
+  let uid = 0
+  const idMap: Record<number, { id: string, kind: string }> = {}
+
+  function addToIdMap(id: string, kind: string) {
+    const n = uid++
+    idMap[n] = { id, kind }
+    return n
+  }
+
+  return {
+    idMap,
+    addToIdMap,
+  }
+}
+
+function convertTitleToSentence(text: string) {
+  return text.split(' ').map(str => noCase(str)).join(' ')
+}
+
+// @TODO clear handlers when SearchPane unmounts
+export function getSearchDataJS(data: any) {
+  return `export let searchData = ${JSON.stringify(data)}
+const handlers = []
+export function onUpdate (cb) {
+  handlers.push(cb)
+}
+if (import.meta.hot) {
+  import.meta.hot.accept(newModule => {
+    searchData = newModule.searchData
+    handlers.forEach(h => {
+      h(newModule.searchData)
+      newModule.onUpdate(h)
+    })
+  })
+}`
+}

package/src/node/server.ts

@@ -0,0 +1,235 @@
+import type { ServerStoryFile } from '@poveste/shared'
+import type { Context } from './context.js'
+import { performance } from 'node:perf_hooks'
+import pc from 'picocolors'
+import { createServer as createViteServer, mergeConfig as mergeViteConfig } from 'vite'
+import { useCollectStories } from './collect/index.js'
+import { useModuleLoader } from './load.js'
+import { createMarkdownFilesWatcher, onMarkdownListChange } from './markdown.js'
+import { DevEventPluginApi, DevPluginApi } from './plugin.js'
+import { onStoryChange, onStoryListChange, watchStories } from './stories.js'
+import { wrapLogError } from './util/log.js'
+import * as VirtualFiles from './virtual/index.js'
+import { getViteConfigWithPlugins } from './vite.js'
+
+export interface CreateServerOptions {
+  port?: number
+  open?: boolean
+  host?: string | boolean
+}
+
+export async function createServer(ctx: Context, options: CreateServerOptions = {}) {
+  const getViteServer = async (collecting: boolean) => {
+    const { viteConfig, viteConfigFile } = await getViteConfigWithPlugins(collecting, ctx)
+
+    if (!collecting) {
+      if (options.open) {
+        viteConfig.server.open = true
+      }
+
+      if (options.host) {
+        viteConfig.server.host = options.host
+      }
+    }
+
+    const server = await createViteServer(
+      mergeViteConfig(viteConfig, {
+        optimizeDeps: { include: viteConfig.optimizeDeps?.include ?? [], noDiscovery: collecting },
+      }),
+    )
+    await server.pluginContainer.buildStart({})
+    return {
+      server,
+      viteConfigFile,
+    }
+  }
+
+  // Should be run sequentially to get a fresh vite.config.js each time
+  const { server: nodeServer } = await getViteServer(true) // Run before normal vite to prevent breaking HMR in Nuxt
+  const { server, viteConfigFile } = await getViteServer(false)
+  await watchStories(ctx)
+  const { stop: stopMdFileWatcher } = await createMarkdownFilesWatcher(ctx)
+
+  const moduleLoader = useModuleLoader({
+    server: nodeServer,
+  })
+
+  const pluginOnCleanups: (() => void | Promise<void>)[] = []
+  for (const plugin of ctx.config.plugins) {
+    if (plugin.onDev) {
+      const api = new DevPluginApi(ctx, plugin, moduleLoader)
+      const onCleanup = (cb: () => void | Promise<void>) => {
+        pluginOnCleanups.push(cb)
+      }
+      await plugin.onDev(api, onCleanup)
+    }
+  }
+
+  // Custom dev events
+  server.ws.on(`histoire:dev-event`, async ({ event, payload }) => {
+    for (const plugin of ctx.config.plugins) {
+      if (plugin.onDevEvent) {
+        const api = new DevEventPluginApi(ctx, plugin, moduleLoader, event, payload)
+        const result = await plugin.onDevEvent(api)
+        if (!event.startsWith('on') && result !== undefined) {
+          server.ws.send(`histoire:dev-event-result`, { event, result })
+          break
+        }
+      }
+    }
+  })
+
+  // Wait for pre-bundling (in `listen()`)
+  await server.listen(options.port ?? server.config.server?.port)
+
+  const {
+    clearCache,
+    executeStoryFile,
+    destroy: destroyCollectStories,
+  } = useCollectStories({
+    server: nodeServer,
+    mainServer: server,
+  }, ctx)
+
+  // onStoryChange debouncing
+  let queued = false
+  let queuedFiles: ServerStoryFile[] = []
+  let currentFiles: ServerStoryFile[] = []
+  let queueTimer
+  let collecting = false
+  let didAllStoriesYet = false
+
+  // Invalidate modules
+  const invalidateModule = (id: string) => {
+    const mod = server.moduleGraph.getModuleById(id)
+    if (!mod) {
+      return
+    }
+    server.moduleGraph.invalidateModule(mod)
+
+    // Send HMR update
+    const timestamp = Date.now()
+    mod.lastHMRTimestamp = timestamp
+    server.ws.send({
+      type: 'update',
+      updates: [
+        {
+          type: 'js-update',
+          acceptedPath: mod.url,
+          path: mod.url,
+          timestamp,
+        },
+      ],
+    })
+  }
+
+  onStoryChange(async (changedFile) => {
+    if (changedFile && !didAllStoriesYet) {
+      return
+    }
+
+    if (changedFile) {
+      if (!queuedFiles.includes(changedFile)) {
+        queuedFiles.push(changedFile)
+      }
+    }
+    else {
+      queuedFiles = []
+    }
+
+    if (!queued) {
+      queued = true
+      if (!collecting) {
+        clearTimeout(queueTimer)
+        // Debounce
+        queueTimer = setTimeout(collect, 100)
+      }
+      else if (!changedFile && !currentFiles.length) {
+        // Full collect in progress
+        queued = false
+      }
+    }
+  })
+
+  async function collect() {
+    collecting = true
+
+    clearCache()
+
+    currentFiles = queuedFiles.slice()
+    queuedFiles = []
+    queued = false
+
+    console.log('Collect stories start', currentFiles.length ? currentFiles.map(f => f.fileName).join(', ') : 'all')
+    const time = performance.now()
+    if (currentFiles.length) {
+      await Promise.all(currentFiles.map(async (storyFile) => {
+        await executeStoryFile(storyFile)
+        if (storyFile.story) {
+          await invalidateModule(`/__resolved__virtual:story-source:${storyFile.story.id}`)
+        }
+      }))
+    }
+    else {
+      // Full update
+
+      // Progress tracking
+      const fileCount = ctx.storyFiles.length
+      let loadedFilesCount = 0
+      const sendProgress = () => {
+        server.ws.send('histoire:stories-loading-progress', {
+          loadedFileCount: loadedFilesCount,
+          totalFileCount: fileCount,
+        })
+      }
+
+      sendProgress()
+
+      await Promise.all(ctx.storyFiles.map(async (storyFile) => {
+        await executeStoryFile(storyFile)
+        loadedFilesCount++
+        sendProgress()
+      }))
+
+      didAllStoriesYet = true
+      server.ws.send('histoire:all-stories-loaded', {})
+    }
+    console.log(`Collect stories end ${pc.bold(pc.blue(Math.round(performance.now() - time)))}ms`)
+
+    invalidateModule(VirtualFiles.RESOLVED_STORIES_ID)
+    invalidateModule(VirtualFiles.RESOLVED_SEARCH_TITLE_DATA_ID)
+
+    collecting = false
+
+    if (queued) {
+      await collect()
+    }
+  }
+
+  onStoryListChange(() => {
+    invalidateModule(VirtualFiles.RESOLVED_STORIES_ID)
+    invalidateModule(VirtualFiles.RESOLVED_SEARCH_TITLE_DATA_ID)
+  })
+
+  onMarkdownListChange(() => {
+    invalidateModule(VirtualFiles.RESOLVED_MARKDOWN_FILES)
+  })
+
+  async function close() {
+    for (const cb of pluginOnCleanups) {
+      await wrapLogError('plugin.onDev.onCleanup', () => cb())
+    }
+    await wrapLogError('server.close', () => server.close())
+    await wrapLogError('nodeServer', () => nodeServer.close())
+    await wrapLogError('destroyCollectStories', () => destroyCollectStories())
+    await wrapLogError('stopMdFileWatcher', () => stopMdFileWatcher())
+  }
+
+  collect()
+
+  return {
+    server,
+    viteConfigFile,
+    close,
+  }
+}

package/src/node/stories.ts

@@ -0,0 +1,154 @@
+import type { ServerStoryFile } from '@poveste/shared'
+import type { Context } from './context.js'
+import { kebabCase } from 'change-case'
+import chokidar from 'chokidar'
+import { globby } from 'globby'
+import micromatch from 'micromatch'
+import { basename, resolve } from 'pathe'
+
+type StoryChangeHandler = (file?: ServerStoryFile) => unknown
+const storyChangeHandlers: StoryChangeHandler[] = []
+
+/**
+ * Called when a new story is added or modified. Collecting should be done.
+ * @param handler
+ */
+export function onStoryChange(handler: StoryChangeHandler) {
+  storyChangeHandlers.push(handler)
+}
+
+export function notifyStoryChange(file?: ServerStoryFile) {
+  for (const handler of storyChangeHandlers) {
+    handler(file)
+  }
+}
+
+type StoryListChangeHandler = () => unknown
+const storyListChangeHandlers: StoryListChangeHandler[] = []
+
+/**
+ * Called when the story list has changed (ex: removed a story). No collecting should be needed.
+ * @param handler
+ */
+export function onStoryListChange(handler: StoryListChangeHandler) {
+  storyListChangeHandlers.push(handler)
+}
+
+export function notifyStoryListChange() {
+  for (const handler of storyListChangeHandlers) {
+    handler()
+  }
+}
+
+let context: Context
+
+export async function watchStories(newContext: Context) {
+  context = newContext
+
+  const baseWatchPaths = Array.from(new Set(context.config.storyMatch.map((pattern) => {
+    const segments = pattern.split('/')
+    return segments.slice(0, segments.findIndex(segment => segment.includes('*'))).join('/') || '.'
+  })))
+
+  const resolvedStoryIgnored = context.config.storyIgnored.map((pattern) => {
+    return resolve(context.root, pattern)
+  })
+
+  const resolveStoryMatch = context.config.storyMatch.map((pattern) => {
+    return resolve(context.root, pattern)
+  })
+
+  const watcher = chokidar.watch(baseWatchPaths, {
+    cwd: context.root,
+    ignored: (path, stats) => {
+      if (resolvedStoryIgnored.some(pattern => micromatch.isMatch(path, pattern))) {
+        return true
+      }
+      if (resolveStoryMatch.some(pattern => micromatch.isMatch(path, pattern))) {
+        return false
+      }
+
+      // Allow directories to be traversed, only ignore files that don't match
+      return stats?.isFile() ?? false
+    },
+  })
+
+  watcher
+    .on('add', (file) => {
+      const storyFile = addStory(file)
+      setTimeout(() => notifyStoryChange(storyFile), 100) // Delay in case file renaming fired Add event before Unlink event
+    })
+    .on('unlink', (file) => {
+      removeStory(file)
+      notifyStoryListChange()
+    })
+
+  return watcher
+}
+
+function getAbsoluteFilePath(relativeFilePath: string) {
+  return resolve(context.root, relativeFilePath)
+}
+
+export function addStory(relativeFilePath: string, virtualModuleCode?: string) {
+  const absoluteFilePath = getAbsoluteFilePath(relativeFilePath)
+
+  for (const file of context.storyFiles) {
+    if (file.path === absoluteFilePath) {
+      return file
+    }
+  }
+
+  const fileId = kebabCase(relativeFilePath.toLowerCase())
+  let fileName = basename(relativeFilePath)
+  if (fileName.includes('.')) {
+    fileName = fileName.substring(0, fileName.indexOf('.'))
+  }
+
+  let supportPluginId: string
+
+  for (const p of context.config.supportMatch) {
+    if (micromatch.isMatch(absoluteFilePath, p.patterns, {
+      dot: true,
+    })) {
+      supportPluginId = p.pluginIds[0]
+      break
+    }
+  }
+
+  if (!supportPluginId) {
+    throw new Error(`No support plugin found for file ${absoluteFilePath}`)
+  }
+
+  const file: ServerStoryFile = {
+    id: fileId, // The file id will be changed by the story id after it is collected
+    path: absoluteFilePath,
+    relativePath: relativeFilePath,
+    fileName,
+    moduleId: virtualModuleCode ? `virtual:story:${absoluteFilePath}` : absoluteFilePath,
+    supportPluginId,
+    virtual: !!virtualModuleCode,
+    moduleCode: virtualModuleCode,
+  }
+  context.storyFiles.push(file)
+  return file
+}
+
+export function removeStory(relativeFilePath: string) {
+  const absoluteFilePath = getAbsoluteFilePath(relativeFilePath)
+  const index = context.storyFiles.findIndex(file => file.path === absoluteFilePath)
+  if (index !== -1) context.storyFiles.splice(index, 1)
+}
+
+export async function findAllStories(newContext: Context) {
+  context = newContext
+
+  const files = await globby(context.config.storyMatch, {
+    cwd: context.root,
+    ignore: context.config.storyIgnored,
+  })
+  context.storyFiles.length = 0
+  for (const file of files) {
+    addStory(file)
+  }
+}

package/src/node/tree.ts

@@ -0,0 +1,158 @@
+import type {
+  PovesteConfig,
+  ServerStoryFile,
+  ServerTree,
+  ServerTreeFile,
+  TreeGroupConfig,
+} from '@poveste/shared'
+import pc from 'picocolors'
+
+export function createPath(config: PovesteConfig, file: ServerTreeFile) {
+  if (config.tree.file === 'title') {
+    return file.title.split('/')
+  }
+
+  if (config.tree.file === 'path') {
+    const paths = file.path.split('/').slice(0, -1)
+
+    // check if tree file path is a plugin
+    const index = paths.findIndex(p => p.includes('.histoire'))
+
+    if (index !== -1) {
+      return ['plugins', file.title]
+    }
+
+    return [...paths, file.title]
+  }
+
+  return config.tree.file(file)
+}
+
+export function makeTree(config: PovesteConfig, files: ServerStoryFile[]) {
+  interface ITreeObject {
+    [index: string]: number | ITreeObject
+  }
+
+  interface ITreeGroup {
+    groupConfig?: TreeGroupConfig
+    treeObject: ITreeObject
+  }
+
+  const groups: ITreeGroup[] = config.tree?.groups?.map(g => ({
+    groupConfig: g,
+    treeObject: {},
+  })) || []
+  const defaultGroup = {
+    treeObject: {},
+  }
+  groups.push(defaultGroup)
+
+  files.forEach((file, index) => {
+    const group = getGroup(file)
+    setPath(file.treePath, index, group.treeObject)
+  })
+
+  let sortingFunction = (a: string, b: string) => a.localeCompare(b)
+
+  if (config.tree.order !== 'asc') {
+    sortingFunction = config.tree.order
+  }
+
+  const result: ServerTree = []
+
+  for (const group of groups) {
+    if (group === defaultGroup) {
+      result.push(...buildTree(group.treeObject))
+    }
+    else {
+      result.push({
+        group: true,
+        id: group.groupConfig.id,
+        title: group.groupConfig.title,
+        children: buildTree(group.treeObject),
+      })
+    }
+  }
+
+  return result
+
+  function getGroup(file: ServerStoryFile): ITreeGroup {
+    if (file.story?.group) {
+      const group = groups.find(g => g.groupConfig?.id === file.story.group)
+      if (group) {
+        return group
+      }
+      else {
+        console.error(pc.red(`Group ${file.story.group} not found for story ${file.path}`))
+      }
+    }
+    for (const group of groups) {
+      if (group.groupConfig?.include && group.groupConfig.include(file.treeFile)) {
+        return group
+      }
+    }
+    return defaultGroup
+  }
+
+  function setPath(path: string[], value: unknown, tree: unknown) {
+    path.reduce((subtree, key, i) => {
+      if (i === path.length - 1) {
+        setKey(subtree, key, value)
+      }
+      else if (isLeaf(subtree[key])) {
+        setKey(subtree, key, subtree[key])
+        subtree[key] = {}
+      }
+      else if (!subtree[key]) {
+        subtree[key] = {}
+      }
+      return subtree[key]
+    }, tree)
+
+    function isLeaf(element) {
+      return !Number.isNaN(Number(element))
+    }
+  }
+
+  function setKey(tree, key, value) {
+    if (isUndefined(tree[key])) {
+      tree[key] = value
+      return
+    }
+
+    let copyNumber = 1
+
+    while (!isUndefined(tree[`${key}-${copyNumber}`])) {
+      copyNumber++
+    }
+
+    tree[`${key}-${copyNumber}`] = value
+
+    function isUndefined(element) {
+      return element === undefined
+    }
+  }
+
+  function buildTree(treeObject: ITreeObject): ServerTree {
+    const tree: ServerTree = []
+
+    for (const [key, element] of Object.entries(treeObject)) {
+      if (Number.isInteger(element)) {
+        tree.push({
+          title: key,
+          index: element as number,
+        })
+      }
+      else {
+        tree.push({
+          title: key,
+          children: buildTree(element as ITreeObject),
+        })
+      }
+    }
+
+    tree.sort((a, b) => sortingFunction(a.title, b.title))
+
+    return tree
+  }
+}

package/src/node/util/find-up.ts

@@ -0,0 +1,24 @@
+import fs from 'node:fs'
+import path from 'pathe'
+
+export function findUp(cwd: string = process.cwd(), fileNames: string[]): string {
+  let { root } = path.parse(cwd)
+  let dir = cwd
+
+  // On Windows, it will for example return `C:`, we need to add the trailing `/`
+  if (root[1] === ':' && root[2] === undefined) {
+    root += '/'
+  }
+
+  while (dir !== root) {
+    for (const fileName of fileNames) {
+      const searchPath = path.join(dir, fileName)
+      if (fs.existsSync(searchPath)) {
+        return searchPath
+      }
+    }
+    dir = path.dirname(dir)
+  }
+
+  return null
+}

package/src/node/util/fs.ts

@@ -0,0 +1 @@
+export const slash = (str: string) => str.replace(/\\/g, '/')

package/src/node/util/log.ts

@@ -0,0 +1,10 @@
+import pc from 'picocolors'
+
+export async function wrapLogError(id: string, cb: () => unknown) {
+  try {
+    await cb()
+  }
+  catch (e) {
+    console.error(pc.red(`[Error] ${id}: ${e}`))
+  }
+}

package/src/node/util/slugify.ts

@@ -0,0 +1,26 @@
+// From vitepress
+
+// string.js slugify drops non ascii chars so we have to
+// use a custom implementation here
+import { remove as removeDiacritics } from 'diacritics'
+// eslint-disable-next-line no-control-regex
+const rControl = /[\u0000-\u001F]/g
+const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g
+
+export function slugify(str: string): string {
+  return (
+    removeDiacritics(str)
+      // Remove control characters
+      .replace(rControl, '')
+      // Replace special characters
+      .replace(rSpecial, '-')
+      // Remove continuous separators
+      .replace(/-{2,}/g, '-')
+      // Remove prefixing and trailing separators
+      .replace(/^-+|-+$/g, '')
+      // ensure it doesn't start with a number (#121)
+      .replace(/^(\d)/, '_$1')
+      // lowercase
+      .toLowerCase()
+  )
+}