hmr-serve 0.1.0

package/src/client/components/ContentPane.vue

@@ -0,0 +1,93 @@
+<template>
+  <section class="content-pane" data-testid="content-pane">
+    <div v-if="loading" class="status">Loading…</div>
+    <div v-else-if="error" class="status error" data-testid="content-error">{{ error }}</div>
+    <div v-else-if="!file" class="status">Select a file to preview</div>
+    <iframe
+      v-else-if="file.kind === 'iframe'"
+      :key="framedSrc"
+      :src="framedSrc"
+      class="raw-frame"
+      data-testid="content-iframe"
+      sandbox="allow-scripts allow-same-origin"
+    ></iframe>
+    <!-- eslint-disable-next-line vue/no-v-html -- content is server-rendered from the user's own local files -->
+    <div v-else class="rendered markdown-body" data-testid="content-html" v-html="file.html"></div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+import type { RenderedFile } from '../../shared/types';
+import { fetchFile } from '../api';
+import { onFileUpdate } from '../hmr';
+
+interface ContentPaneData {
+  file: RenderedFile | null;
+  loading: boolean;
+  error: string | null;
+  version: number;
+  unsubscribe: (() => void) | null;
+}
+
+export default defineComponent({
+  name: 'ContentPane',
+  props: {
+    path: { type: String as PropType<string | null>, default: null },
+  },
+  data(): ContentPaneData {
+    return { file: null, loading: false, error: null, version: 0, unsubscribe: null };
+  },
+  computed: {
+    // Cache-busting version keeps the sandboxed iframe reloading on live updates.
+    framedSrc(): string {
+      if (!this.file?.iframeSrc) return '';
+      const sep = this.file.iframeSrc.includes('?') ? '&' : '?';
+      return `${this.file.iframeSrc}${sep}v=${this.version}`;
+    },
+  },
+  watch: {
+    path: {
+      immediate: true,
+      handler(next: string | null): void {
+        void this.load(next);
+      },
+    },
+  },
+  mounted(): void {
+    // Live updates ride Vite's HMR socket; re-fetch only when the open file changes.
+    this.unsubscribe = onFileUpdate((update) => {
+      if (update.path !== this.path) return;
+      this.version += 1;
+      if (update.event === 'unlink') {
+        this.file = null;
+        this.error = 'File was removed';
+        return;
+      }
+      void this.load(this.path);
+    });
+  },
+  beforeUnmount(): void {
+    this.unsubscribe?.();
+  },
+  methods: {
+    async load(path: string | null): Promise<void> {
+      if (!path) {
+        this.file = null;
+        this.error = null;
+        return;
+      }
+      this.loading = true;
+      this.error = null;
+      try {
+        this.file = await fetchFile(path);
+      } catch (err) {
+        this.file = null;
+        this.error = err instanceof Error ? err.message : String(err);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+});
+</script>

package/src/client/components/FileTree.vue

@@ -0,0 +1,58 @@
+<template>
+  <nav class="file-tree" data-testid="file-tree" role="tree">
+    <ul class="root">
+      <tree-node
+        v-for="node in visibleNodes"
+        :key="node.path"
+        :node="node"
+        :selected-path="selectedPath"
+        @select="$emit('select', $event)"
+      />
+    </ul>
+    <p v-if="visibleNodes.length === 0" class="empty" data-testid="tree-empty">
+      {{ filter ? 'No matches' : 'No files' }}
+    </p>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+import type { FileNode } from '../../shared/types';
+import TreeNode from './TreeNode.vue';
+
+/** Prune the tree to files whose name matches `query` (case-insensitive),
+ *  keeping ancestor directories of any surviving file. Pure so behavior is
+ *  easy to reason about and test through the rendered output. */
+function filterTree(nodes: FileNode[], query: string): FileNode[] {
+  if (!query) return nodes;
+  const needle = query.toLowerCase();
+  const out: FileNode[] = [];
+  for (const node of nodes) {
+    if (node.type === 'file') {
+      if (node.name.toLowerCase().includes(needle)) out.push(node);
+    } else {
+      const children = filterTree(node.children ?? [], query);
+      if (children.length > 0) out.push({ ...node, children });
+    }
+  }
+  return out;
+}
+
+export default defineComponent({
+  name: 'FileTree',
+  components: { TreeNode },
+  props: {
+    nodes: { type: Array as PropType<FileNode[]>, required: true },
+    selectedPath: { type: String as PropType<string | null>, default: null },
+    filter: { type: String, default: '' },
+  },
+  emits: {
+    select: (path: string) => typeof path === 'string',
+  },
+  computed: {
+    visibleNodes(): FileNode[] {
+      return filterTree(this.nodes, this.filter.trim());
+    },
+  },
+});
+</script>

package/src/client/components/SearchBox.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="search-box">
+    <input
+      :value="modelValue"
+      type="search"
+      class="search-input"
+      placeholder="Search files…"
+      data-testid="search-input"
+      aria-label="Search files"
+      @input="onInput"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SearchBox',
+  props: {
+    modelValue: { type: String, default: '' },
+  },
+  emits: {
+    'update:modelValue': (value: string) => typeof value === 'string',
+  },
+  methods: {
+    onInput(event: Event): void {
+      this.$emit('update:modelValue', (event.target as HTMLInputElement).value);
+    },
+  },
+});
+</script>

package/src/client/components/TreeNode.vue

@@ -0,0 +1,59 @@
+<template>
+  <li class="tree-node">
+    <div
+      v-if="node.type === 'directory'"
+      class="node dir"
+      role="treeitem"
+      :aria-expanded="expanded"
+      @click="toggle"
+    >
+      <span class="twisty">{{ expanded ? '▾' : '▸' }}</span>
+      <span class="name">{{ node.name }}</span>
+    </div>
+    <ul v-if="node.type === 'directory' && expanded" class="children">
+      <tree-node
+        v-for="child in node.children"
+        :key="child.path"
+        :node="child"
+        :selected-path="selectedPath"
+        @select="$emit('select', $event)"
+      />
+    </ul>
+    <div
+      v-else-if="node.type === 'file'"
+      class="node file"
+      role="treeitem"
+      data-testid="file-node"
+      :data-path="node.path"
+      :class="{ selected: node.path === selectedPath }"
+      @click="$emit('select', node.path)"
+    >
+      <span class="name">{{ node.name }}</span>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+import type { FileNode } from '../../shared/types';
+
+export default defineComponent({
+  // Named so the template can recurse into itself.
+  name: 'TreeNode',
+  props: {
+    node: { type: Object as PropType<FileNode>, required: true },
+    selectedPath: { type: String as PropType<string | null>, default: null },
+  },
+  emits: {
+    select: (path: string) => typeof path === 'string',
+  },
+  data() {
+    return { expanded: true };
+  },
+  methods: {
+    toggle(): void {
+      this.expanded = !this.expanded;
+    },
+  },
+});
+</script>

package/src/client/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // Options-API SFCs; props/emits are inferred at call sites via defineComponent.
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

package/src/client/hmr.ts

@@ -0,0 +1,17 @@
+import { HMR_UPDATE_EVENT, type HmrServeUpdate } from '../shared/types.js';
+
+export type UpdateListener = (update: HmrServeUpdate) => void;
+
+/**
+ * Subscribe to server-pushed file updates over Vite's HMR channel. Returns an
+ * unsubscribe function. This is the live-update transport for the content pane —
+ * it rides Vite's own websocket rather than a bespoke one, and Vite's client
+ * transparently reconnects it if the socket drops.
+ */
+export function onFileUpdate(listener: UpdateListener): () => void {
+  const hot = import.meta.hot;
+  if (!hot) return () => {};
+  const handler = (data: HmrServeUpdate): void => listener(data);
+  hot.on(HMR_UPDATE_EVENT, handler);
+  return () => hot.off(HMR_UPDATE_EVENT, handler);
+}

package/src/client/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>hmr-serve</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

package/src/client/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './styles.css';
+
+createApp(App).mount('#app');

package/src/client/styles.css

@@ -0,0 +1,188 @@
+:root {
+  --bg: #1e1e1e;
+  --bg-side: #252526;
+  --bg-hover: #2a2d2e;
+  --bg-sel: #094771;
+  --fg: #cccccc;
+  --fg-dim: #8a8a8a;
+  --border: #333333;
+  --accent: #4daafc;
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: var(--font);
+  color: var(--fg);
+  background: var(--bg);
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 12px;
+  background: var(--bg-side);
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  font-weight: 600;
+  color: var(--accent);
+}
+
+.search-box {
+  flex: 1;
+  max-width: 420px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 5px 10px;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font: inherit;
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 280px;
+  min-width: 180px;
+  overflow: auto;
+  background: var(--bg-side);
+  border-right: 1px solid var(--border);
+  padding: 6px 0;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+.file-tree ul,
+.search-results {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.file-tree .children {
+  padding-left: 14px;
+}
+
+.node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.node:hover {
+  background: var(--bg-hover);
+}
+
+.node.file.selected {
+  background: var(--bg-sel);
+}
+
+.twisty {
+  width: 12px;
+  color: var(--fg-dim);
+}
+
+.empty {
+  padding: 8px 12px;
+  color: var(--fg-dim);
+  font-size: 13px;
+}
+
+.search-hit {
+  padding: 6px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+}
+
+.search-hit:hover {
+  background: var(--bg-hover);
+}
+
+.search-hit.selected {
+  background: var(--bg-sel);
+}
+
+.hit-title {
+  display: block;
+  font-weight: 500;
+}
+
+.hit-snippet {
+  display: block;
+  color: var(--fg-dim);
+  font-size: 12px;
+}
+
+.content-pane {
+  height: 100%;
+}
+
+.status {
+  padding: 24px;
+  color: var(--fg-dim);
+}
+
+.status.error {
+  color: #f48771;
+}
+
+.raw-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.rendered {
+  padding: 24px 32px;
+  max-width: 900px;
+  line-height: 1.6;
+}
+
+.rendered pre,
+.rendered code {
+  font-family: var(--mono);
+}
+
+.rendered pre {
+  background: var(--bg-side);
+  padding: 12px 16px;
+  border-radius: 6px;
+  overflow: auto;
+}

package/src/shared/types.ts

@@ -0,0 +1,63 @@
+// Types shared across the Node server and the Vue client. Kept dependency-free
+// so both the `node` and `vite/client` type environments can import it.
+
+/** How the client should present a file's rendered content. */
+export type RenderKind = 'html' | 'iframe' | 'code';
+
+/** A node in the file tree. Directories carry `children`; files carry `ext`. */
+export interface FileNode {
+  /** Path relative to the served root, POSIX-separated (e.g. `docs/intro.md`). */
+  path: string;
+  /** Base name for display (e.g. `intro.md`). */
+  name: string;
+  type: 'file' | 'directory';
+  /** Lower-case extension without the dot (e.g. `md`). Files only. */
+  ext?: string;
+  /** Present on directories; sorted dirs-first then alphabetically. */
+  children?: FileNode[];
+}
+
+export interface TreeResponse {
+  root: string;
+  nodes: FileNode[];
+}
+
+/** Server-rendered content for a single file, returned by `/file`. */
+export interface RenderedFile {
+  path: string;
+  kind: RenderKind;
+  /** Rendered HTML for `html`/`code` kinds. Absent for `iframe`. */
+  html?: string;
+  /** URL the client should point a sandboxed iframe at, for `iframe` kind. */
+  iframeSrc?: string;
+  /** Highlight.js language for `code` kind, when detected. */
+  language?: string;
+  title: string;
+}
+
+export interface SearchHit {
+  path: string;
+  title: string;
+  /** A short excerpt around the first match, plain text. */
+  snippet: string;
+  score: number;
+}
+
+export interface SearchResponse {
+  query: string;
+  hits: SearchHit[];
+}
+
+/** Payload pushed over Vite's HMR channel when a watched file changes. */
+export interface HmrServeUpdate {
+  event: 'add' | 'change' | 'unlink';
+  path: string;
+}
+
+/** The custom HMR event name the client subscribes to via `import.meta.hot`. */
+export const HMR_UPDATE_EVENT = 'hmr-serve:update';
+
+/** Extensions the tool renders at launch. Central so the tree filter, the
+ *  renderer registry, and the indexer agree on one source of truth. */
+export const SUPPORTED_EXTENSIONS = ['md', 'html', 'css', 'txt'] as const;
+export type SupportedExtension = (typeof SUPPORTED_EXTENSIONS)[number];