pugkit 1.0.0-beta.3 → 1.0.0

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,29 @@ 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/`配下の画像は非対応です。
+
 ### Image Optimization
 
 ビルド時に自動的に画像を最適化します。
@@ -132,7 +146,7 @@ img(src='/assets/img/photo.jpg', width=size.width, height=size.height, alt='')
 
 ### File Naming Rules
 
-- `_`（アンダースコア）で始まるファイルは部分テンプレートとして扱われます
+- `_`（アンダースコア）で始まるファイルはテンプレートとして扱われます
 - `_`で始まるディレクトリ内のファイルもビルド対象外です
 - 通常のファイル名のみがビルドされます
 

package/core/server.mjs

@@ -17,8 +17,10 @@ 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;
       url.searchParams.set('t', Date.now());
       link.href = url.toString();
     });

package/core/watcher.mjs

@@ -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,7 +295,7 @@ class FileWatcher {
   }
 
   /**
-   * CSSインジェクション（リロードなし）
+   * CSSインジェクション
    */
   injectCSS() {
     if (this.context.server) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pugkit",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0",
   "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
+    }
+  }
+}