pugkit 1.0.0-beta.3 → 1.0.1

package/README.md

@@ -3,7 +3,7 @@
 ## About
 
 pugkitは静的サイト制作に特化したビルドツールです。
-納品向きの綺麗なHTMLと自由度の高いアセットを出力します。
+納品向きの綺麗なHTMLと、ファイル構成に制約のないアセットファイルを出力可能です。
 
 ## Installation
 
@@ -27,7 +27,7 @@ pugkit watch
 
 ### Production Build
 
-最適化されたファイルを生成します。
+製品用ファイルを生成します。
 
 ```bash
 pugkit build
@@ -92,7 +92,7 @@ export default {
 
 ### Pug Templates
 
-Pugテンプレート内では、`Builder`オブジェクトと`imageSize()`関数が使用できます。
+Pugテンプレート内では、`Builder` オブジェクトと `imageInfo()` 関数が使用できます。
 
 #### Builder Object
 
@@ -113,15 +113,61 @@ meta(property='og:url', content=Builder.url.href)
 | `Builder.url.pathname` | 現在のページのパス                 | `/about/`                                 |
 | `Builder.url.href`     | 完全なURL                          | `https://example.com/subdirectory/about/` |
 
-#### imageSize() Function
+#### imageInfo()
 
-画像ファイルのサイズを自動取得し、CLSを防ぎます。
+`src/` 配下の画像のメタデータを取得します。`imageOptimization` の設定に応じて `src` が最適化後のパスに変換され、`@2x`/`_sp` 画像が存在する場合も自動的に解決されます。
 
 ```pug
-- const size = imageSize('/assets/img/photo.jpg')
-img(src='/assets/img/photo.jpg', width=size.width, height=size.height, alt='')
+- const info = imageInfo('/assets/img/hero.jpg')
+img(src=info.src width=info.width height=info.height alt='')
 ```
 
+**返り値**
+
+| Property | Type                             | Description                                           |
+| -------- | -------------------------------- | ----------------------------------------------------- |
+| `src`    | `string`                         | 最適化設定に応じたパス（webpモード時は `.webp` パス） |
+| `width`  | `number \| undefined`            | 画像の幅（px）                                        |
+| `height` | `number \| undefined`            | 画像の高さ（px）                                      |
+| `format` | `string \| undefined`            | 画像フォーマット（`'jpg'` / `'png'` / `'svg'` など）  |
+| `isSvg`  | `boolean`                        | SVG かどうか                                          |
+| `retina` | `{ src: string } \| null`        | `@2x` 画像が存在する場合に自動検出                    |
+| `sp`     | `{ src, width, height } \| null` | `_sp` 画像が存在する場合に自動検出                    |
+
+> **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
 
 ビルド時に自動的に画像を最適化します。
@@ -132,7 +178,7 @@ img(src='/assets/img/photo.jpg', width=size.width, height=size.height, alt='')
 
 ### File Naming Rules
 
-- `_`（アンダースコア）で始まるファイルは部分テンプレートとして扱われます
+- `_`（アンダースコア）で始まるファイルはテンプレートとして扱われます
 - `_`で始まるディレクトリ内のファイルもビルド対象外です
 - 通常のファイル名のみがビルドされます
 

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'
 
@@ -19,6 +19,7 @@ const liveReloadScript = `<script>
   es.addEventListener('css-update', function() {
     document.querySelectorAll('link[rel="stylesheet"]').forEach(function(link) {
       var url = new URL(link.href);
+      if (url.origin !== location.origin) return;
       url.searchParams.set('t', Date.now());
       link.href = url.toString();
     });
@@ -27,6 +28,9 @@ const liveReloadScript = `<script>
     es.close();
     setTimeout(function() { location.reload(); }, 1000);
   };
+  window.addEventListener('beforeunload', function() {
+    es.close();
+  });
 })();
 </script>`
 
@@ -71,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
     }
 
@@ -85,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 で静的ファイルを配信 ───────────────────────
@@ -113,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 => {
@@ -128,8 +128,9 @@ class FileWatcher {
           await this.context.taskRegistry.sass(this.context)
         }
 
-        // CSSはインジェクション（リロードせずに更新）
-        this.injectCSS()
+        // CSSはインジェクション
+        const cssUrlPath = '/' + relPath.replace(/\\/g, '/').replace(/\.scss$/, '.css')
+        this.injectCSS(cssUrlPath)
       } catch (error) {
         logger.error('watch', `Sass build failed: ${error.message}`)
       }
@@ -294,13 +295,11 @@ class FileWatcher {
   }
 
   /**
-   * CSSインジェクション（リロードなし）
+   * CSSインジェクション
    */
   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-beta.3",
+  "version": "1.0.1",
   "description": "A build tool for Pug-based projects",
   "type": "module",
   "license": "MIT",

package/tasks/pug.mjs

@@ -3,7 +3,7 @@ import { basename } from 'node:path'
 import { compilePugFile } from '../transform/pug.mjs'
 import { formatHtml } from '../transform/html.mjs'
 import { createBuilderVars } from '../transform/builder-vars.mjs'
-import { createImageSizeHelper } from '../transform/image-size.mjs'
+import { createImageSizeHelper, createImageInfoHelper } from '../transform/image-size.mjs'
 import { generatePage } from '../generate/page.mjs'
 import { logger } from '../utils/logger.mjs'
 
@@ -68,8 +68,9 @@ async function processFile(filePath, context) {
 
     const builderVars = createBuilderVars(filePath, paths, config)
     const imageSize = createImageSizeHelper(filePath, paths, logger)
+    const imageInfo = createImageInfoHelper(filePath, paths, logger, config)
 
-    const html = template({ Builder: builderVars, imageSize })
+    const html = template({ Builder: builderVars, imageSize, imageInfo })
     const formatted = await formatHtml(html)
     await generatePage(filePath, formatted, paths)
   } catch (error) {

package/transform/image-size.mjs

@@ -1,5 +1,5 @@
 import { readFileSync, existsSync } from 'node:fs'
-import { resolve, dirname, basename } from 'node:path'
+import { resolve, dirname, basename, extname } from 'node:path'
 import sizeOf from 'image-size'
 
 export function createImageSizeHelper(filePath, paths, logger) {
@@ -36,3 +36,83 @@ export function createImageSizeHelper(filePath, paths, logger) {
     }
   }
 }
+
+export function createImageInfoHelper(filePath, paths, logger, config) {
+  const useWebp = config?.build?.imageOptimization === 'webp'
+  return src => {
+    const resolveImagePath = (imageSrc, baseDir) => {
+      if (imageSrc.startsWith('/')) {
+        return resolve(paths.src, imageSrc.slice(1))
+      }
+      return resolve(baseDir, imageSrc)
+    }
+
+    const findImageFile = resolvedPath => {
+      if (existsSync(resolvedPath)) return resolvedPath
+      return null
+    }
+
+    const fallback = {
+      src,
+      width: undefined,
+      height: undefined,
+      format: undefined,
+      isSvg: false,
+      retina: null,
+      sp: null
+    }
+
+    try {
+      const pageDir = dirname(filePath)
+      const resolvedPath = resolveImagePath(src, pageDir)
+      const foundPath = findImageFile(resolvedPath)
+
+      if (!foundPath) {
+        logger?.warn('pug', `Image not found: ${basename(resolvedPath)}`)
+        return fallback
+      }
+
+      const buffer = readFileSync(foundPath)
+      const { width, height, type: format } = sizeOf(buffer)
+
+      const ext = extname(src)
+      const isSvg = ext.toLowerCase() === '.svg'
+      const base = src.slice(0, -ext.length)
+      // webp モード時は src 自体を .webp パスに変換（SVG は除外）
+      const resolvedSrc = useWebp && !isSvg ? `${base}.webp` : src
+
+      // 2x retina 画像の自動検出
+      let retina = null
+      if (!isSvg) {
+        const retinaSrc = `${base}@2x${ext}`
+        const retinaResolvedPath = resolveImagePath(retinaSrc, pageDir)
+        const retinaFoundPath = findImageFile(retinaResolvedPath)
+        if (retinaFoundPath) {
+          retina = { src: useWebp ? `${base}@2x.webp` : retinaSrc }
+        }
+      }
+
+      // SP 画像の自動検出
+      let sp = null
+      if (!isSvg) {
+        const spSrc = `${base}_sp${ext}`
+        const spResolvedPath = resolveImagePath(spSrc, pageDir)
+        const spFoundPath = findImageFile(spResolvedPath)
+        if (spFoundPath) {
+          const spBuffer = readFileSync(spFoundPath)
+          const { width: spWidth, height: spHeight } = sizeOf(spBuffer)
+          sp = {
+            src: useWebp ? `${base}_sp.webp` : spSrc,
+            width: spWidth,
+            height: spHeight
+          }
+        }
+      }
+
+      return { src: resolvedSrc, width, height, format, isSvg, retina, sp }
+    } catch {
+      logger?.warn('pug', `Failed to get image info: ${basename(src)}`)
+      return fallback
+    }
+  }
+}