@tenjuu99/blog 0.3.5 → 0.4.0

package/lib/dir.js

@@ -27,6 +27,9 @@ const packageDirCore = path.dirname(__filename) + '/../packages'
 
 let alreadyCached = false
 
+// @vocab: パッケージ
+// @vocab: ビルド
+// @test: tests/ssg-core/hooks.test.js
 const cache = () => {
   if (alreadyCached) {
     return

package/lib/distribute.js

@@ -8,14 +8,22 @@ import { styleText } from 'node:util'
 import config from './config.js'
 import { cacheDir } from './dir.js'
 import { applyTemplate } from './applyTemplate.js'
+import { distributeImages } from './imageDistributor.js'
+import { createConverter } from '../packages/editor/server/createConverter.js'
 
 const indexFile = `${cacheDir}/index.json`
 
+// @vocab: ページ
+// @vocab: テンプレート
 const renderPage = async (page) => {
   const template = page.template
   return [page.name, await render(template, page)]
 }
 
+// @vocab: ビルド
+// @vocab: ページ
+// @vocab: ページインデックス
+// @test: tests/ssg-core/hooks.test.js
 const distribute = async (data, srcDir, distDir) => {
   const promises = []
   const newIndex = []
@@ -36,13 +44,19 @@ const distribute = async (data, srcDir, distDir) => {
     })
   }
   const distributeRaw = config.distribute_raw.split(',')
-  distributeRaw.forEach((copyDir) => {
+  const imageConverter = config.image_converter ? await createConverter(config.image_converter) : null
+  for (const copyDir of distributeRaw) {
     if (!existsSync(`${cacheDir}/${copyDir}`)) {
-      return
+      continue
+    }
+    if (imageConverter) {
+      await distributeImages(`${cacheDir}/${copyDir}/`, `${distDir}/${copyDir}/`, imageConverter)
+      console.log(styleText('green', '[convert]'), `${cacheDir}/${copyDir}/ => ${distDir}/${copyDir}/`)
+    } else {
+      cpSync(`${cacheDir}/${copyDir}/`, `${distDir}/${copyDir}/`, { recursive: true, force: true })
+      console.log(styleText('green', '[copy]'), `${cacheDir}/${copyDir}/ => ${distDir}/${copyDir}/`)
     }
-    cpSync(`${cacheDir}/${copyDir}/`, `${distDir}/${copyDir}/`, { recursive: true, force: true })
-    console.log(styleText('green', '[copy]'), `${cacheDir}/${copyDir}/ => ${distDir}/${copyDir}/`)
-  })
+  }
 
   if (!existsSync(cacheDir)) {
     mkdirSync(cacheDir)

package/lib/files.js

@@ -4,6 +4,8 @@ import { templateDir, cssDir } from './dir.js'
 let staticFilesContainer = {}
 let loaded = false
 
+// @vocab: テンプレート
+// @test: tests/editor/editor-sidebar.test.js
 const warmUp = async () => {
   if (loaded) {
     return

package/lib/filter.js

@@ -70,6 +70,9 @@ const ifConditionEvaluator = (condition, variables) => {
  * @param {object} variables
  * @returns {string}
  */
+// @vocab: テンプレート
+// @vocab: ヘルパー関数
+// @test: tests/ssg-core/filter.test.js
 const replaceIfFilter = (text, variables) => {
   const matched = [...text.matchAll(IF_REGEXP)]
   for (const item of matched) {
@@ -87,6 +90,10 @@ const replaceIfFilter = (text, variables) => {
   return text
 }
 
+// @vocab: SSGスクリプト
+// @vocab: テンプレート
+// @vocab: ヘルパー関数
+// @test: tests/ssg-core/filter.test.js
 const replaceScriptFilter = async (text, variables) => {
   let replaced = text
   const scripts = [...text.matchAll(SCRIPT_REGEXP)].map((matched) => {

package/lib/generate.js

@@ -12,6 +12,8 @@ const beforeGenerate = async () => {
   await warmUpTemplate()
 }
 
+// @vocab: ビルド
+// @test: tests/ssg-core/hooks.test.js
 export const runHooks = async (hookName, customHelperDir = null, customAllData = null, customConfig = null) => {
   const targetConfig = customConfig || config
   const targetAllData = customAllData || allData
@@ -43,6 +45,9 @@ export const runHooks = async (hookName, customHelperDir = null, customAllData =
   }
 }
 
+// @vocab: ビルド
+// @vocab: ページインデックス
+// @test: tests/ssg-core/hooks.test.js
 const generate = async () => {
   let start = performance.now()
   await beforeGenerate()

package/lib/helper.js

@@ -7,6 +7,9 @@ const helper = {}
 // top-level await を使うと循環依存がある場合に ESM のデッドロックが発生するため IIFE を使用する。
 // helperReady をエクスポートすることで、ヘルパーのロード完了を外部から await できる。
 // （Promise は一度 resolve すれば以降の await は即座に返るため、複数箇所で await しても問題ない）
+// @vocab: ヘルパー関数
+// @vocab: パッケージ
+// @test: tests/ssg-core/helper.test.js
 export const helperReady = (async () => {
   if (config.helper) {
     const files = config.helper.split(',')

package/lib/imageDistributor.js

@@ -0,0 +1,59 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'tiff', 'heic', 'bmp'])
+
+/**
+ * @vocab ビルド画像配布器
+ * @test tests/ssg-core/imageDistributor.test.js
+ */
+export async function distributeImages(srcDir, distDir, { fn, ext }) {
+  const files = await collectFiles(srcDir)
+  for (const relPath of files) {
+    const srcPath = path.join(srcDir, relPath)
+    const fileExt = path.extname(relPath).slice(1).toLowerCase()
+    const isImage = IMAGE_EXTENSIONS.has(fileExt)
+    const baseName = path.basename(relPath, path.extname(relPath))
+    const subDir = path.dirname(relPath)
+    if (fn && isImage) {
+      const outputName = ext ? `${baseName}.${ext}` : path.basename(relPath)
+      const distPath = path.join(distDir, subDir, outputName)
+      await writeConvertedFile(srcPath, distPath, fn)
+    } else {
+      const distPath = path.join(distDir, relPath)
+      fs.mkdirSync(path.dirname(distPath), { recursive: true })
+      fs.copyFileSync(srcPath, distPath)
+    }
+  }
+}
+
+/**
+ * @vocab ビルド画像配布器
+ * @test tests/ssg-core/imageDistributor.test.js
+ */
+export async function collectFiles(dir) {
+  const result = []
+  const walk = (current, rel) => {
+    for (const entry of fs.readdirSync(current, { withFileTypes: true })) {
+      const relPath = rel ? path.join(rel, entry.name) : entry.name
+      if (entry.isDirectory()) {
+        walk(path.join(current, entry.name), relPath)
+      } else {
+        result.push(relPath)
+      }
+    }
+  }
+  walk(dir, '')
+  return result
+}
+
+/**
+ * @vocab ビルド画像配布器
+ * @test tests/ssg-core/imageDistributor.test.js
+ */
+export async function writeConvertedFile(srcPath, distPath, fn) {
+  const buffer = fs.readFileSync(srcPath)
+  const converted = await fn(buffer)
+  fs.mkdirSync(path.dirname(distPath), { recursive: true })
+  fs.writeFileSync(distPath, converted)
+}

package/lib/indexer.js

@@ -31,6 +31,9 @@ const collect = (dir, namePrefix = '', promises = []) => {
   return promises
 }
 
+// @vocab: ページインデックス
+// @vocab: ページ
+// @test: tests/ssg-core/indexer.test.js
 const indexing = async () => {
   allData = {}
 

package/lib/pageData.js

@@ -5,11 +5,16 @@ import config from './config.js'
 const FRONTMATTER_REGEXP = /^(<!|-)--(?<variables>[\s\S]*?)--(-|>)/
 const METADATA_KEY_REGEXP = /^([a-zA-Z\d_-]+):/
 
+// @vocab: ページ
+// @vocab: フロントマター
+// @test: tests/ssg-core/pageData.test.js
 const makePageData = (filename, content) => {
   const [name, ext] = filename.split('.')
   return parse(content, name, ext)
 }
 
+// @vocab: フロントマター
+// @vocab: ページ
 const parse = (content, name, ext) => {
   const matched = content.match(FRONTMATTER_REGEXP)
   const markdownReplaced = content.replace(FRONTMATTER_REGEXP, '')
@@ -65,6 +70,8 @@ const parse = (content, name, ext) => {
   return metaDataMerged
 }
 
+// @vocab: フロントマター
+// @test: tests/ssg-core/pageData.test.js
 const parseMetaData = (data) => {
   const metaData = {}
   let isStringContinue = false

package/lib/render.js

@@ -13,6 +13,11 @@ marked.use({
   breaks: true
 })
 
+// @vocab: テンプレート
+// @vocab: ページ
+// @vocab: SSGスクリプト
+// @vocab: ヘルパー関数
+// @test: tests/ssg-core/helper.test.js
 const render = async (templateName, data) => {
   await helperReady
   let template

package/lib/replaceVariablesFilter.js

@@ -11,6 +11,9 @@ const VARIABLE_REGEXP = /(\\)?{{[\s]*([^{}]+)[\s]*}}/g
  * @params {object} variables
  * @return {text}
  */
+// @vocab: テンプレート
+// @vocab: ヘルパー関数
+// @test: tests/ssg-core/replaceVariablesFilter.test.js
 const replaceVariablesFilter = (text, variables) => {
   const matched = [...text.matchAll(VARIABLE_REGEXP)]
   const replace = Object.fromEntries(matched.map(match => [match[0], {variableName: match[2].trim().toLowerCase(), backslash: !!match[1]}]))
@@ -29,6 +32,8 @@ const replaceVariablesFilter = (text, variables) => {
  * @param {object} variables
  * @return {Array.<string>}
  */
+// @vocab: ヘルパー関数
+// @vocab: テンプレート
 const replaceVariable = (target, replaceTargetRawText, backslash, variables) => {
     const toBeReplace = replaceTargetRawText
     const toBeReplaceScript = toBeReplace.match(/([\w\d_]+)\((.*)\)/)

package/lib/server/helper/parseRequestBody.js

@@ -0,0 +1,46 @@
+/**
+ * HTTP リクエストボディを JSON としてパースする共通ヘルパー。
+ * Buffer.concat による安全な連結、サイズ制限、JSON.parse エラーハンドリングを提供する。
+ *
+ * @param {import('http').IncomingMessage} req
+ * @param {{ maxSize?: number }} [options] maxSize: バイト上限（デフォルト: 無制限）
+ * @returns {Promise<unknown>} パース済み JSON
+ * @throws {{ message: string, code: 'PAYLOAD_TOO_LARGE' | 'INVALID_JSON' }} パース失敗時
+ */
+export function parseJsonBody(req, options = {}) {
+  const { maxSize = Infinity } = options
+  return new Promise((resolve, reject) => {
+    const chunks = []
+    let totalSize = 0
+    let aborted = false
+    req
+      .on('data', chunk => {
+        if (aborted) return
+        totalSize += chunk.length
+        if (totalSize > maxSize) {
+          aborted = true
+          req.destroy()
+          const err = new Error('リクエストサイズが上限を超えています')
+          err.code = 'PAYLOAD_TOO_LARGE'
+          reject(err)
+          return
+        }
+        chunks.push(chunk)
+      })
+      .on('end', () => {
+        if (aborted) return
+        try {
+          // setEncoding('utf8') 時は chunks が string[] になるため両ケースに対応する
+          const body = Buffer.isBuffer(chunks[0])
+            ? Buffer.concat(chunks).toString('utf8')
+            : chunks.join('')
+          resolve(JSON.parse(body))
+        } catch {
+          const err = new Error('リクエストボディのJSON解析に失敗しました')
+          err.code = 'INVALID_JSON'
+          reject(err)
+        }
+      })
+      .on('error', reject)
+  })
+}

package/lib/server.js

@@ -1,7 +1,7 @@
 import http from 'http'
 import url from 'url'
 import fs from 'node:fs'
-import { distDir, serverDir } from './dir.js'
+import { distDir, srcDir, serverDir } from './dir.js'
 import { styleText } from 'node:util'
 import handle from './tryServer.js'
 import contentType from './contentType.js'
@@ -20,7 +20,11 @@ const server = () => {
       }
       path += '.html'
     }
-    if (!fs.existsSync(`${distDir}${path}`)) {
+    let filePath = `${distDir}${path}`
+    if (!fs.existsSync(filePath)) {
+      filePath = `${srcDir}${path}`
+    }
+    if (!fs.existsSync(filePath)) {
       console.log(styleText('red', `[${request.method}] 404`), request.url)
       const errorContent = fs.readFileSync(`${distDir}/404.html`)
       response.writeHead(404)
@@ -28,7 +32,7 @@ const server = () => {
       return
     }
     try {
-      const content = fs.readFileSync(`${distDir}${path}`, 'binary')
+      const content = fs.readFileSync(filePath, 'binary')
 
       const ext = path.split('.')[1]
       console.log(styleText('green', `[${request.method}] 200`), request.url)

package/lib/tryServer.js

@@ -9,7 +9,9 @@ const handlers = async (path) => {
   if (handlersAlreadyRegistered) {
     return registeredHandlers[path]
   }
-  const serverFiles = fs.readdirSync(serverDir)
+  const serverFiles = fs.readdirSync(serverDir, { withFileTypes: true })
+    .filter(e => e.isFile())
+    .map(e => e.name)
   const loaded = await Promise.all(serverFiles.map(file => import(`${serverDir}/${file}`)))
   loaded.forEach(s => registeredHandlers[s.path] = s)
   handlersAlreadyRegistered = true

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "blog template",
   "main": "index.js",
   "scripts": {
     "dev": "node bin/dev-server",
     "server": "node bin/server",
     "generate": "node bin/generate",
-    "test": "node --test --test-concurrency=1 test/**/*.test.js",
-    "test:watch": "node --test --watch test/**/*.test.js"
+    "test": "node --test --test-concurrency=1 tests/**/*.test.js",
+    "test:watch": "node --test --watch tests/**/*.test.js"
   },
   "bin": {
     "generate": "bin/generate",
@@ -23,10 +23,13 @@
   "license": "MIT",
   "dependencies": {
     "chokidar": "^4.0.x",
-    "marked": "^13.x"
+    "marked": "^13.x",
+    "sharp": "^0.35.2"
   },
   "devDependencies": {
-    "@tenjuu99/blog": "file:./"
+    "@playwright/test": "^1.61.0",
+    "@tenjuu99/blog": "file:./",
+    "@types/node": "^25.9.3"
   },
   "type": "module",
   "engines": {

package/packages/breadcrumbs/helper/breadcrumbs.js

@@ -2,6 +2,9 @@ import { allData, config } from '@tenjuu99/blog'
 
 export function breadcrumbList(pageName, topPageName = 'top') {
   const pageData = allData[pageName]
+  if (!pageData) {
+    return ''
+  }
   const entries = Object.entries(allData)
   const breadCrumbs = ['/']
   if (pageData.breadcrumbs) {

package/packages/category/helper/category.js

@@ -8,6 +8,11 @@ let categoryTreeCache = null
  * @param {Object} config - 設定オブジェクト
  * @returns {Object} カテゴリーツリー
  */
+// @vocab: カテゴリーシステム
+// @vocab: カテゴリー
+// @vocab: カテゴリーパス
+// @vocab: サブカテゴリー
+// @test: tests/category/category-tree.test.js
 export function buildCategoryTree(data = allData, conf = config) {
   const tree = {}
   const urlCase = conf.category?.url_case || 'lower'
@@ -74,6 +79,10 @@ export function getCategoryTree() {
  * @param {Array} categoryPath - カテゴリーパス（例: ["Art", "Painting"]）
  * @returns {Array} ページデータの配列
  */
+// @vocab: カテゴリーパス
+// @vocab: カテゴリー
+// @vocab: ページ
+// @test: tests/category/category-helper.test.js
 export function getCategoryPages(categoryPath) {
   const pages = []
 
@@ -95,6 +104,10 @@ export function getCategoryPages(categoryPath) {
  * @param {Array} categoryPath - カテゴリーパス（例: ["Art"]）
  * @returns {Array} ページデータの配列
  */
+// @vocab: サブカテゴリー
+// @vocab: カテゴリーパス
+// @vocab: ページ
+// @test: tests/category/category-helper.test.js
 export function getCategoryPagesRecursive(categoryPath) {
   const pages = []
 

package/packages/category/helper/categoryIndexer.js

@@ -4,6 +4,8 @@ import { buildCategoryTree } from './category.js'
  * 記事名配列を perPage 件ずつのページ配列に分割する
  * 空の場合は [[]] を返す（ページ数ゼロを避けるため）
  */
+// @vocab: ページネーション
+// @test: tests/category/category-pagination.test.js
 function sliceIntoPages(items, perPage) {
   if (items.length === 0) return [[]]
   const pages = []
@@ -37,6 +39,9 @@ function sliceIntoPages(items, perPage) {
  * @param {Object} categoryConfig - 単一カテゴリー設定オブジェクト
  * @param {Object} config - グローバル設定オブジェクト
  */
+// @vocab: カテゴリーページ
+// @vocab: ページネーション
+// @test: tests/category/category-pagination.test.js
 function buildVirtualPage(url, categoryData, children, currentPage, totalPages, categoryConfig, config) {
   const pageName = url.replace(/^\//, '') + '/index'
   const paginationBase = categoryData.baseUrl + '/'
@@ -82,6 +87,10 @@ function buildVirtualPage(url, categoryData, children, currentPage, totalPages,
  * @param {Object} categoryConfig - 単一カテゴリー設定オブジェクト
  * @param {Object} config - グローバル設定オブジェクト
  */
+// @vocab: カテゴリーページ
+// @vocab: カテゴリーシステム
+// @vocab: ページネーション
+// @test: tests/category/category-pagination.test.js
 function generateCategoryPages(allData, categoryConfig, config) {
   const pathFilter = categoryConfig.path_filter || ''
   let filteredData = allData
@@ -140,6 +149,9 @@ function generateCategoryPages(allData, categoryConfig, config) {
  * @param {Object} allData - 全ページデータ
  * @param {Object} config - 設定オブジェクト
  */
+// @vocab: カテゴリーシステム
+// @vocab: ビルド
+// @test: tests/category/category-indexer.test.js
 export async function afterIndexing(allData, config) {
   const categorySystems = config.categories
     ? config.categories

package/packages/category/helper/pagination.js

@@ -2,6 +2,9 @@
  * getPaginationUrl: ページ番号から URL を生成する
  * page === 1 なら basePath、それ以外なら basePath + page + '/'
  */
+// @vocab: ページネーション
+// @vocab: カテゴリーページ
+// @test: tests/category/category-pagination.test.js
 export function getPaginationUrl(basePath, page) {
   const base = basePath.endsWith('/') ? basePath : `${basePath}/`
   if (page === 1) return base
@@ -12,6 +15,8 @@ export function getPaginationUrl(basePath, page) {
  * buildWindowedPages: ウィンドウ付きページ番号リストを生成する
  * 各要素は {num, isCurrent} または {num: null, isEllipsis: true}
  */
+// @vocab: ページネーション
+// @test: tests/category/category-pagination.test.js
 export function buildWindowedPages(totalPages, currentPage, windowSize = 2) {
   if (totalPages <= 0) return []
   if (totalPages === 1) return [{ num: 1, isCurrent: currentPage === 1 }]

package/packages/editor/css/editor.css

@@ -3,6 +3,8 @@ body {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  font-family: Helvetica, "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
+  font-weight: 300;
 }
 header {
   text-align: center;
@@ -49,6 +51,42 @@ main.container {
 .editor-options {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 5px;
+}
+.editor-options-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.editor-options-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#newFileDialog {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 24px;
+  min-width: 320px;
+}
+#newFileDialog form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+#newFileDialog label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#newFileDialog #newFileError {
+  color: #c00;
+  font-size: 0.9em;
+  margin: 0;
+  min-height: 1.2em;
 }
 #editorTextArea {
   resize: none;
@@ -81,20 +119,27 @@ form select {
   border: none;
   border-radius: 0 5px 5px 0;
 }
+
 .sidebar {
+  --sidebar-bg: #313d64;
+  --sidebar-dir: #79afb4;
+  --sidebar-file: #cbcbcb;
+  --sidebar-active-file-fg: #333;
+  --sidebar-active-file-bg: rgba(165,218,246,0.8);
+  --sidebar-modified-fg: #ff7777;
+  --sidebar-hover-bg: rgba(104, 117, 154, .3);
   display: flex;
   justify-content: space-between;
   width: 300px;
-  overflow: hidden;
+  overflow: scroll;
   left: 0;
-  background: rgb(192, 198, 217);
+  background: var(--sidebar-bg);
   height: 100%;
   padding: 0;
-  overflow-y: hidden;
   flex-basis: 300px;
   position: relative;
   z-index: 3;
-  word-break: break-all;
+  font-size: 0.85em;
 }
 .sidebar-close .sidebar {
   left: -290px;
@@ -104,6 +149,9 @@ form select {
   padding: 0;
   margin: 0;
 }
+.sidebar > ul {
+  padding: 0 0 0 15px;
+}
 .sidebar-close .sidebar ul {
   position: absolute;
   left: -290px;
@@ -111,26 +159,66 @@ form select {
 }
 .sidebar li {
   list-style: none;
-  padding-left: 20px;
+  padding-left: 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sidebar li:has(a.active):not(:has(li)) {
+  background: var(--sidebar-active-file-bg);
 }
 .sidebar a {
-  color: #666;
+  color: var(--sidebar-file);
   text-decoration: none;
 }
-.sidebar li:hover {
-  background: rgba(104, 117, 154, .3);
+.sidebar a.active {
+  color: var(--sidebar-active-file-fg);
+  display: block;
+}
+.sidebar a[data-status="new"]::after {
+  content: " ●";
+  color: #e06c00;
+}
+.sidebar a[data-status="modified"]::after {
+  content: " ◆";
+  color: #0070c0;
+}
+.sidebar a[data-status="published"]::after {
+  content: " ✓";
+  color: #888;
+}
+.sidebar a[data-status="new"],
+.sidebar a[data-status="modified"] {
+  color: var(--sidebar-modified-fg);
+}
+.sidebar li:not(:has(li)):hover,
+.sidebar li.dir-node summary:hover {
+  background: var(--sidebar-hover-bg);
+}
+
+.sidebar details > summary {
+  cursor: pointer;
+  padding: 2px 0;
+  color: var(--sidebar-dir);
+  list-style: disclosure-closed;
+}
+.sidebar li.dir-node details:not([open]):has(a[data-status="new"]) summary,
+.sidebar li.dir-node details:not([open]):has(a[data-status="modified"]) summary {
+  color: var(--sidebar-modified-fg);
+}
+.sidebar details[open] > summary {
+  list-style: disclosure-open;
 }
 .sidebar-toggle {
   cursor: pointer;
   width: 20px;
   height: 100%;
   position: absolute;
-  right: 0;
+  left: 0;
 }
 .sidebar-close .sidebar-toggle {
   position: fixed;
   left: 0;
-  background: rgb(192, 198, 217);
+  background: var(--sidebar-bg);
 }
 .sidebar-toggle:hover:after {
   position: absolute;

package/packages/editor/helper/sidebarTree.js

@@ -0,0 +1,11 @@
+import { buildTree, renderTreeHtml } from '../js/tree.js'
+
+/**
+ * @param {Array<{name: string, __filetype: string, __is_auto_category: boolean}>} files
+ * @param {Object.<string, 'new'|'modified'|'published'|'unknown'>} [statusMap]
+ * @returns {string}
+ */
+export function renderSidebarTree(files, statusMap = {}) {
+  const tree = buildTree(files.filter(f => !f.__is_auto_category))
+  return renderTreeHtml(tree, '', statusMap)
+}

package/packages/editor/js/autoPreviewInitializer.js

@@ -0,0 +1,11 @@
+/**
+ * @vocab プレビュー自動更新器
+ * @test tests/editor/auto-preview.test.js
+ */
+import { createDebounce } from './debouncer.js'
+
+export function initAutoPreview(textarea, onUpdate, delay = 500) {
+  const debouncedUpdate = createDebounce(onUpdate, delay)
+  textarea.addEventListener('input', debouncedUpdate)
+  return debouncedUpdate
+}