pugkit 1.0.0 → 1.0.1

package/README.md

@@ -136,6 +136,38 @@ img(src=info.src width=info.width height=info.height alt='')
 
 > **Note:** `imageInfo()`は`src/`配下の画像のみ対応しています。`public/`配下の画像は非対応です。
 
+### SVG Sprite
+
+`src/` 配下の `icons/` ディレクトリに配置した SVG ファイルを1つのスプライトにまとめます。
+
+#### ディレクトリ構成
+
+```
+src/
+└── assets/
+    └── icons/       # ここに SVG を配置
+        ├── arrow.svg
+        └── close.svg
+```
+
+#### 出力
+
+```
+dist/
+└── assets/
+    └── icons.svg    # 自動生成されるスプライト
+```
+
+#### 使い方
+
+```html
+<svg><use href="assets/icons.svg#arrow"></use></svg>
+```
+
+- `icons/` ディレクトリは `src/` 配下の任意の場所に配置できます
+- SVG ファイル名がそのまま `<symbol id>` になります
+- `fill` / `stroke` は自動的に `currentColor` に変換されます（SVGの色をCSSで制御可能）
+
 ### Image Optimization
 
 ビルド時に自動的に画像を最適化します。

package/core/server.mjs

@@ -1,7 +1,7 @@
 import http from 'node:http'
 import path from 'node:path'
-import { existsSync, readFileSync } from 'node:fs'
-import { mkdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { mkdir, readFile } from 'node:fs/promises'
 import sirv from 'sirv'
 import { logger } from '../utils/logger.mjs'
 
@@ -17,7 +17,6 @@ const liveReloadScript = `<script>
     location.reload();
   });
   es.addEventListener('css-update', function() {
-    // 同一オリジンの <link rel="stylesheet"> のみ再読み込み（外部フォント等は除外）
     document.querySelectorAll('link[rel="stylesheet"]').forEach(function(link) {
       var url = new URL(link.href);
       if (url.origin !== location.origin) return;
@@ -29,6 +28,9 @@ const liveReloadScript = `<script>
     es.close();
     setTimeout(function() { location.reload(); }, 1000);
   };
+  window.addEventListener('beforeunload', function() {
+    es.close();
+  });
 })();
 </script>`
 
@@ -73,7 +75,11 @@ export async function serverTask(context, options = {}) {
       })
       res.write('retry: 1000\n\n')
       clients.add(res)
-      req.on('close', () => clients.delete(res))
+
+      const cleanup = () => clients.delete(res)
+      req.on('close', cleanup)
+      req.socket.on('close', cleanup)
+      res.on('error', cleanup)
       return
     }
 
@@ -87,22 +93,26 @@ export async function serverTask(context, options = {}) {
     const htmlFile = candidates.find(p => p.endsWith('.html') && existsSync(p))
 
     if (htmlFile) {
-      try {
-        let html = readFileSync(htmlFile, 'utf-8')
-        html = html.includes('</body>')
-          ? html.replace('</body>', liveReloadScript + '</body>')
-          : html + liveReloadScript
-        const buf = Buffer.from(html, 'utf-8')
-        res.writeHead(200, {
-          'Content-Type': 'text/html; charset=utf-8',
-          'Content-Length': buf.length,
-          'Cache-Control': 'no-cache'
+      readFile(htmlFile, 'utf-8')
+        .then(html => {
+          html = html.includes('</body>')
+            ? html.replace('</body>', liveReloadScript + '</body>')
+            : html + liveReloadScript
+          const buf = Buffer.from(html, 'utf-8')
+          res.writeHead(200, {
+            'Content-Type': 'text/html; charset=utf-8',
+            'Content-Length': buf.length,
+            'Cache-Control': 'no-cache'
+          })
+          res.end(buf)
         })
-        res.end(buf)
-        return
-      } catch {
-        // 読み込み失敗時は sirv にフォールスルー
-      }
+        .catch(() => {
+          staticServe(req, res, () => {
+            res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' })
+            res.end('404 Not Found')
+          })
+        })
+      return
     }
 
     // ── sirv で静的ファイルを配信 ───────────────────────
@@ -115,7 +125,11 @@ export async function serverTask(context, options = {}) {
   function broadcast(event, data = '') {
     const msg = `event: ${event}\ndata: ${data}\n\n`
     for (const res of clients) {
-      res.write(msg)
+      try {
+        res.write(msg)
+      } catch {
+        clients.delete(res)
+      }
     }
   }
 

package/core/watcher.mjs

@@ -111,7 +111,7 @@ class FileWatcher {
       ignoreInitial: true,
       ignored: [/(^|[\/\\])\../, /node_modules/, /\.git/],
       persistent: true,
-      awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
+      awaitWriteFinish: { stabilityThreshold: 50, pollInterval: 25 }
     })
 
     watcher.on('change', async path => {
@@ -299,9 +299,7 @@ class FileWatcher {
    */
   injectCSS() {
     if (this.context.server) {
-      setTimeout(() => {
-        this.context.server.reloadCSS()
-      }, 100)
+      this.context.server.reloadCSS()
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pugkit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A build tool for Pug-based projects",
   "type": "module",
   "license": "MIT",