poveste 0.1.0

package/src/node/dom/env.ts

@@ -0,0 +1,60 @@
+import {
+  JSDOM,
+  VirtualConsole,
+} from 'jsdom'
+import { populateGlobal } from './util.js'
+
+export function createDomEnv() {
+  const dom = new JSDOM(
+    '<!DOCTYPE html>',
+    {
+      pretendToBeVisual: true,
+      runScripts: 'dangerously',
+      url: 'http://localhost:3000',
+      virtualConsole: console && globalThis.console ? new VirtualConsole().forwardTo(globalThis.console) : undefined,
+      includeNodeLocations: false,
+      contentType: 'text/html',
+    },
+  )
+
+  const { keys, originals } = populateGlobal(globalThis, dom.window, { bindFunctions: true })
+
+  function destroy() {
+    keys.forEach(key => delete globalThis[key])
+    originals.forEach((v, k) => {
+      globalThis[k] = v
+    })
+  }
+
+  window.ResizeObserver = window.ResizeObserver || class ResizeObserver {
+    disconnect(): void { /* noop */ }
+    observe(_target: Element, _options?: ResizeObserverOptions): void { /* noop */ }
+    unobserve(_target: Element): void { /* noop */ }
+  }
+
+  window.IntersectionObserver = window.IntersectionObserver || class IntersectionObserver {
+    root: Element
+    rootMargin: string
+    thresholds: number[]
+    disconnect(): void { /* noop */ }
+    observe = (_target: Element) => void { /* noop */ }
+    unobserve(_target: Element): void { /* noop */ }
+    takeRecords(): IntersectionObserverEntry[] { return [] }
+  }
+
+  window.matchMedia = window.matchMedia || ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }))
+
+  return {
+    window,
+    destroy,
+  }
+}

package/src/node/dom/util.ts

@@ -0,0 +1,83 @@
+/*
+ * Code from vitest https://github.com/vitest-dev/vitest/blob/98974ba4a5b95a57a98bc2077b74bc5609d6bb3a/packages/vitest/src/integrations/env/utils.ts#L1 by @antfu and @patak
+ */
+
+import { KEYS } from './dom-keys.js'
+
+const skipKeys = [
+  'window',
+  'self',
+  'top',
+  'parent',
+]
+
+export function getWindowKeys(global: any, win: any) {
+  const keys = new Set(KEYS.concat(Object.getOwnPropertyNames(win))
+    .filter((k) => {
+      if (skipKeys.includes(k)) {
+        return false
+      }
+      if (k in global) {
+        return KEYS.includes(k)
+      }
+      return true
+    }))
+
+  return keys
+}
+
+function isClassLikeName(name: string) {
+  return name[0] === name[0].toUpperCase()
+}
+
+interface PopulateOptions {
+  // we bind functions such as addEventListener and others
+  // because they rely on `this` in happy-dom, and in jsdom it
+  // has a priority for getting implementation from symbols
+  // (global doesn't have these symbols, but window - does)
+  bindFunctions?: boolean
+}
+
+export function populateGlobal(global: any, win: any, options: PopulateOptions = {}) {
+  const { bindFunctions = false } = options
+  const keys = getWindowKeys(global, win)
+
+  const originals = new Map<string | symbol, any>()
+
+  const overrideObject = new Map<string | symbol, any>()
+  for (const key of keys) {
+    const boundFunction = bindFunctions
+      && typeof win[key] === 'function'
+      && !isClassLikeName(key)
+      && win[key].bind(win)
+
+    if (KEYS.includes(key) && key in global) originals.set(key, global[key])
+
+    Object.defineProperty(global, key, {
+      get() {
+        if (overrideObject.has(key)) return overrideObject.get(key)
+        if (boundFunction) return boundFunction
+        return win[key]
+      },
+      set(v) {
+        overrideObject.set(key, v)
+      },
+      configurable: true,
+    })
+  }
+
+  global.window = global
+  global.self = global
+  global.top = global
+  global.parent = global
+
+  if (global.global) global.global = global
+
+  skipKeys.forEach(k => keys.add(k))
+
+  return {
+    keys,
+    skipKeys,
+    originals,
+  }
+}

package/src/node/index.ts

@@ -0,0 +1,12 @@
+export { defaultColors } from './colors.js'
+export * from './config.js'
+export * from './plugin.js'
+export * from '@poveste/shared'
+
+declare module 'rollup' {
+  interface PluginContextMeta {
+    histoire: {
+      isCollecting: boolean
+    }
+  }
+}

package/src/node/load.ts

@@ -0,0 +1,59 @@
+import type { ModuleLoader } from '@poveste/shared'
+import type { ViteDevServer } from 'vite'
+import { resolve } from 'pathe'
+import pc from 'picocolors'
+import { ViteNodeRunner } from 'vite-node/client'
+import { ViteNodeServer } from 'vite-node/server'
+
+export interface UseModuleLoaderOptions {
+  server: ViteDevServer
+  throws?: boolean
+}
+
+let _load: ModuleLoader['loadModule']
+
+export function useModuleLoader(options: UseModuleLoaderOptions): ModuleLoader {
+  const { server } = options
+
+  const node = new ViteNodeServer(server as any)
+
+  const runner = new ViteNodeRunner({
+    root: server.config.root,
+    base: server.config.base,
+    fetchModule: async id => node.fetchModule(id),
+    resolveId: (id, importer) => node.resolveId(id, importer),
+  })
+
+  function clearCache() {
+    server.moduleGraph.invalidateAll()
+    node.fetchCache.clear()
+    runner.moduleCache.clear()
+  }
+
+  async function loadModule(file: string) {
+    try {
+      const result = await runner.executeFile(resolve(file))
+      return result
+    }
+    catch (e) {
+      console.error(pc.red(`Error while loading module ${file}:\n${e.frame ? `${pc.bold(e.message)}\n${e.frame}` : e.stack}`))
+      if (options.throws) {
+        throw e
+      }
+    }
+  }
+
+  _load = loadModule
+
+  async function destroy() {
+    // Noop
+  }
+
+  return {
+    clearCache,
+    loadModule,
+    destroy,
+  }
+}
+
+export const loadModule: ModuleLoader['loadModule'] = (...args) => _load?.(...args)

package/src/node/markdown.ts

@@ -0,0 +1,267 @@
+import type { ServerMarkdownFile } from '@poveste/shared'
+import type { Plugin as VitePlugin } from 'vite'
+import type { Context } from './context.js'
+import { kebabCase } from 'change-case'
+import chokidar from 'chokidar'
+import fs from 'fs-extra'
+import matter from 'gray-matter'
+import MarkdownIt from 'markdown-it'
+import anchor from 'markdown-it-anchor'
+import attrs from 'markdown-it-attrs'
+import { full as emoji } from 'markdown-it-emoji'
+import micromatch from 'micromatch'
+import path from 'pathe'
+import pc from 'picocolors'
+import { bundledLanguages, createHighlighter } from 'shiki'
+import { addStory, notifyStoryChange, removeStory } from './stories.js'
+import { slugify } from './util/slugify.js'
+
+const onMarkdownListChangeHandlers: (() => unknown)[] = []
+
+export function onMarkdownListChange(handler: () => unknown) {
+  onMarkdownListChangeHandlers.push(handler)
+}
+
+function notifyMarkdownListChange() {
+  for (const handler of onMarkdownListChangeHandlers) {
+    handler()
+  }
+}
+
+export async function createMarkdownRenderer(ctx: Context) {
+  const highlighter = await createHighlighter({
+    themes: ['github-dark'],
+    langs: Object.keys(bundledLanguages), // not ideal but markdown-it does not provide async highlight
+  })
+
+  const md = new MarkdownIt({
+    highlight: (code, lang) => `<div class="htw-relative htw-not-prose __histoire-code"><div class="htw-absolute htw-top-0 htw-right-0 htw-text-xs htw-text-white/40">${lang}</div>${highlighter.codeToHtml(code, { theme: 'github-dark', lang })}</div>`,
+    linkify: true,
+    html: true,
+    breaks: false,
+  })
+
+  md.use(anchor, {
+    slugify,
+    permalink: anchor.permalink.ariaHidden({}),
+  })
+    .use(attrs)
+    .use(emoji)
+
+  // External links
+  {
+    const defaultRender = md.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+
+    md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+      const token = tokens[idx]
+      const hrefIndex = token.attrIndex('href')
+      const classIndex = token.attrIndex('class')
+
+      if (hrefIndex >= 0) {
+        const href = token.attrs[hrefIndex][1]
+        if (href.startsWith('.')) {
+          const queryIndex = href.indexOf('?')
+          const pathname = queryIndex >= 0 ? href.slice(0, queryIndex) : href
+          const query = queryIndex >= 0 ? href.slice(queryIndex) : ''
+
+          // File lookup
+          const file = path.resolve(path.dirname(env.file), pathname)
+          const storyFile = ctx.storyFiles.find(f => f.path === file)
+          const mdFile = ctx.markdownFiles.find(f => f.absolutePath === file)
+          if (!storyFile && !mdFile?.storyFile) {
+            throw new Error(pc.red(`[md] Cannot find story file: ${pathname} from ${env.file}`))
+          }
+
+          // Add attributes
+          const newHref = `${ctx.resolvedViteConfig.base}story/${encodeURIComponent(storyFile?.id ?? mdFile.storyFile.id)}${query}`
+          token.attrSet('href', newHref)
+          token.attrSet('data-route', 'true')
+        }
+        else if (!href.startsWith('/') && !href.startsWith('#') && (classIndex < 0 || !token.attrs[classIndex][1].includes('header-anchor'))) {
+          // Add target="_blank" to external links
+          const aIndex = token.attrIndex('target')
+
+          if (aIndex < 0) {
+            token.attrPush(['target', '_blank']) // add new attribute
+          }
+          else {
+            token.attrs[aIndex][1] = '_blank' // replace value of existing attr
+          }
+        }
+      }
+
+      // pass token to default renderer.
+      return defaultRender(tokens, idx, options, env, self)
+    }
+  }
+
+  return md
+}
+
+async function createMarkdownRendererWithPlugins(ctx: Context) {
+  let md = await createMarkdownRenderer(ctx)
+  if (ctx.config.markdown) {
+    const result = await ctx.config.markdown(md)
+    if (result) {
+      md = result
+    }
+  }
+  return md
+}
+
+export async function createMarkdownPlugins(ctx: Context) {
+  const plugins: VitePlugin[] = []
+  const md = await createMarkdownRendererWithPlugins(ctx)
+
+  // @TODO extract
+  plugins.push({
+    name: 'histoire-vue-docs-block',
+    transform(code, id) {
+      if (!id.includes('?vue&type=docs')) return
+      if (!id.includes('lang.md')) return
+      const file = id.substring(0, id.indexOf('?vue'))
+      const html = md.render(code, {
+        file,
+      })
+      return `export default Comp => {
+        Comp.doc = ${JSON.stringify(html)}
+      }`
+    },
+  })
+
+  return plugins
+}
+
+export async function createMarkdownFilesWatcher(ctx: Context) {
+  const md = await createMarkdownRendererWithPlugins(ctx)
+
+  const watcher = chokidar.watch('.', {
+    cwd: ctx.root,
+    ignored: (path, stats) => {
+      if (ctx.config.storyIgnored.some(pattern => micromatch.isMatch(path, pattern))) {
+        return true
+      }
+      if (micromatch.isMatch(path, '**/*.story.md')) {
+        return false
+      }
+
+      return stats?.isFile()
+    },
+  })
+
+  /**
+   * Initial scan is complete.
+   */
+  let watcherIsReady = false
+
+  function addFile(relativePath: string) {
+    const absolutePath = path.resolve(ctx.root, relativePath)
+    const dirFiles = fs.readdirSync(path.dirname(absolutePath))
+    const truncatedName = path.basename(absolutePath, '.md')
+    const isRelatedToStory = dirFiles.some(file => !file.endsWith('.md') && file.startsWith(truncatedName))
+
+    const { data: frontmatter, content } = matter(fs.readFileSync(absolutePath, 'utf8'))
+
+    let html: string | undefined
+
+    // We don't immediately render markdown during initial scanning in case
+    // markdown references other files in links (otherwise they might not
+    // be scanned yet and will throw 'not found' errors).
+    if (watcherIsReady) {
+      html = md.render(content, {
+        file: absolutePath,
+      })
+    }
+
+    const file: ServerMarkdownFile = {
+      id: kebabCase(relativePath.toLowerCase()),
+      relativePath,
+      absolutePath,
+      isRelatedToStory,
+      frontmatter,
+      content,
+      html,
+    }
+    ctx.markdownFiles.push(file)
+
+    if (!isRelatedToStory) {
+      const storyRelativePath = relativePath.replace(/\.md$/, '.js')
+      const storyFile = addStory(storyRelativePath, `export default ${JSON.stringify({
+        id: frontmatter.id,
+        title: frontmatter.title,
+        icon: frontmatter.icon ?? 'carbon:document-blank',
+        iconColor: frontmatter.iconColor,
+        group: frontmatter.group,
+        docsOnly: true,
+        variants: [],
+      })}`)
+      file.storyFile = storyFile
+      storyFile.markdownFile = file
+      notifyStoryChange(storyFile)
+    }
+    else {
+      const searchPath = path.join(path.dirname(relativePath), truncatedName)
+      const storyFile = ctx.storyFiles.find(f => f.relativePath.startsWith(searchPath))
+      if (storyFile) {
+        file.storyFile = storyFile
+        storyFile.markdownFile = file
+        notifyStoryChange(storyFile)
+      }
+    }
+
+    notifyMarkdownListChange()
+
+    return file
+  }
+
+  function removeFile(relativePath: string) {
+    const index = ctx.markdownFiles.findIndex(file => file.relativePath === relativePath)
+    if (index !== -1) {
+      const file = ctx.markdownFiles[index]
+      if (!file.isRelatedToStory) {
+        removeStory(file.storyFile.relativePath)
+        notifyStoryChange()
+      }
+      ctx.markdownFiles.splice(index, 1)
+      notifyMarkdownListChange()
+    }
+  }
+
+  async function stop() {
+    await watcher.close()
+  }
+
+  watcher
+    .on('add', (relativePath) => {
+      addFile(relativePath)
+    })
+    .on('unlink', (relativePath) => {
+      removeFile(relativePath)
+    })
+
+  await new Promise((resolve) => {
+    watcher.once('ready', resolve as () => void)
+  })
+
+  try {
+    // Render markdown after initial scan is complete.
+    for (const mdFile of ctx.markdownFiles) {
+      mdFile.html = md.render(mdFile.content, {
+        file: mdFile.absolutePath,
+      })
+    }
+    watcherIsReady = true
+
+    return {
+      stop,
+    }
+  }
+  catch (e) {
+    await stop()
+    throw e
+  }
+}
+
+export type MarkdownFilesWatcher = ReturnType<typeof createMarkdownFilesWatcher>

package/src/node/plugin.ts

@@ -0,0 +1,95 @@
+import type {
+  BuildEndCallback,
+  ChangeViteConfigCallback,
+  ModuleLoader,
+  Plugin,
+  PluginApiBase,
+  PluginApiBuild,
+  PluginApiDev,
+  PluginApiDevEvent,
+  PovesteConfig,
+  PreviewStoryCallback,
+  ServerStory,
+} from '@poveste/shared'
+import type { Context } from './context.js'
+import chokidar from 'chokidar'
+import fs from 'fs-extra'
+import path from 'pathe'
+import pc from 'picocolors'
+import { TEMP_PATH } from './alias.js'
+import { addStory, removeStory } from './stories.js'
+
+export class BasePluginApi implements PluginApiBase {
+  colors = pc
+  path = path
+  fs = fs
+
+  constructor(
+    protected ctx: Context,
+    protected plugin: Plugin,
+    public moduleLoader: ModuleLoader,
+  ) { }
+
+  get pluginTempDir() {
+    return path.resolve(TEMP_PATH, 'plugins', this.plugin.name.replace(/:/g, '_'))
+  }
+
+  log(...msg) {
+    console.log(this.colors.gray(`[Plugin:${this.plugin.name}]`), ...msg)
+  }
+
+  warn(...msg) {
+    console.warn(this.colors.yellow(`[Plugin:${this.plugin.name}]`), ...msg)
+  }
+
+  error(...msg) {
+    console.error(this.colors.red(`[Plugin:${this.plugin.name}]`), ...msg)
+  }
+
+  addStoryFile(file: string) {
+    removeStory(file)
+    addStory(file)
+  }
+
+  getStories(): ServerStory[] {
+    return this.ctx.storyFiles.map(f => f.story).filter(Boolean)
+  }
+
+  getConfig(): PovesteConfig {
+    return this.ctx.config
+  }
+}
+
+export class DevPluginApi extends BasePluginApi implements PluginApiDev {
+  watcher = chokidar
+}
+
+export class BuildPluginApi extends BasePluginApi implements PluginApiBuild {
+  changeViteConfigCallbacks: ChangeViteConfigCallback[] = []
+  buildEndCallbacks: BuildEndCallback[] = []
+  previewStoryCallbacks: PreviewStoryCallback[] = []
+
+  changeViteConfig(cb: ChangeViteConfigCallback) {
+    this.changeViteConfigCallbacks.push(cb)
+  }
+
+  onBuildEnd(cb: BuildEndCallback) {
+    this.buildEndCallbacks.push(cb)
+  }
+
+  onPreviewStory(cb: PreviewStoryCallback) {
+    this.previewStoryCallbacks.push(cb)
+  }
+}
+
+export class DevEventPluginApi extends BasePluginApi implements PluginApiDevEvent {
+  constructor(
+    ctx: Context,
+    plugin: Plugin,
+    moduleLoader: ModuleLoader,
+    public event: string,
+    public payload: any,
+  ) {
+    super(ctx, plugin, moduleLoader)
+  }
+}

package/src/node/preview.ts

@@ -0,0 +1,57 @@
+import type { Context } from './context.js'
+import http from 'node:http'
+import connect from 'connect'
+import sirv from 'sirv'
+
+interface ReturnPayload {
+  baseUrl: string
+  close: () => Promise<void>
+}
+
+export async function startPreview(port: number | null, ctx: Context): Promise<ReturnPayload> {
+  const app = connect()
+
+  app.use(
+    ctx.resolvedViteConfig.base,
+    sirv(ctx.config.outDir, {
+      dev: true,
+      etag: true,
+      single: true,
+    }),
+  )
+
+  let finalPort = port ?? 6006
+
+  const httpServer = http.createServer(app)
+
+  return new Promise((resolve, reject) => {
+    function onError(e: Error & { code?: string }) {
+      if (e.code === 'EADDRINUSE') {
+        httpServer.listen(++finalPort)
+      }
+      else {
+        reject(e)
+      }
+    }
+
+    httpServer.on('error', onError)
+
+    httpServer.listen(finalPort, () => {
+      httpServer.off('error', onError)
+      const baseUrl = `http://localhost:${finalPort}${ctx.resolvedViteConfig.base}`
+      resolve({
+        baseUrl,
+        close: () => new Promise((resolve, reject) => {
+          httpServer.close((err) => {
+            if (err) {
+              reject(err)
+            }
+            else {
+              resolve()
+            }
+          })
+        }),
+      })
+    })
+  })
+}