@riebeckite/plugin-responsive-image 0.0.31 → 0.0.33

package/README.md

@@ -3,8 +3,8 @@
 <!-- Generated from docs/docs/plugins/responsive-image.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
 
 Upgrades existing `<img>` elements with lazy loading and responsive
-`<picture>` / `srcset` markup, using only image variants that are already
-present in the content manifest.
+`<picture>` / `srcset` markup, using only image variants already present in the
+content manifest, including variants from `imageOptimizer()`.
 
 [日本語](./README_ja.md)
 
@@ -30,17 +30,24 @@ assets that the manifest already knows about.
 import { defineConfig } from "@riebeckite/core";
 import { attachment } from "@riebeckite/plugin-attachment";
 import { obsidianMarkdown } from "@riebeckite/plugin-obsidian-markdown";
+import { imageOptimizer } from "@riebeckite/plugin-image-optimizer";
 import { responsiveImage } from "@riebeckite/plugin-responsive-image";
 
 export default defineConfig({
   // ...
-  plugins: [obsidianMarkdown(), attachment(), responsiveImage()],
+  plugins: [obsidianMarkdown(), attachment(), imageOptimizer(), responsiveImage()],
 });
 ```
 
 `responsiveImage()` uses `order: 100`, so it runs after the media and
 attachment renderers.
 
+## Live example
+
+The logo below is emitted as a `<picture>` element when image variants exist in the manifest.
+
+![riebeckite-logo-horizontal.png](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/riebeckite-logo-horizontal.png.md)
+
 ## Options
 
 | Option | Type | Default | Description |
@@ -67,22 +74,15 @@ site asset URL (`/attachments/photo.png`) and the attachment URL
 (`/assets/attachments/photo.png`). If the source cannot be matched to a manifest
 asset, the `<img>` is left untouched.
 
-## Limitation: no image encoding
-
-This plugin is a deterministic discovery/HTML layer. It does **not** encode or
-generate new image files by default. `PluginAsset` only supports `style` and
-`script` module specifiers, so Core currently exposes no supported way for a
-plugin to emit arbitrary binary files into the build output.
+## Image encoding
 
-`generate` and `outputDir` are reserved for a future release and do nothing
-today. Adding real encoding requires a Core file-emission API; until then,
-pre-generate the variants yourself (for example with an external image tool) and
-commit them next to the original image. Sites copy referenced vault assets into
-`public/` through `apps/web/scripts/build_images.ts`.
+This plugin remains a deterministic markup layer. Add
+`@riebeckite/plugin-image-optimizer` to encode WebP and AVIF variants during the
+same build; generated assets are discovered before this plugin creates markup.
 
 ## Exports
 
-- `responsiveImage(options?)` / `responsiveImagePlugin` — plugin factory
+- `responsiveImage(options?)` / `responsiveImage` — plugin factory
 - `resolveResponsiveImageOptions(options?)` — resolve defaults
 - `buildResponsiveSrcset(existingPaths, src, options?)` — pure srcset planner
 - `applyResponsiveImages(html, existingPaths, options?)` — HTML transform

package/README_ja.md

@@ -2,13 +2,13 @@
 
 <!-- Generated from docs/docs/plugins/responsive-image.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
 
-既存の `<img>` に遅延読み込みと、レスポンシブな `<picture>` / `srcset` を付与するプラグインです。参照するのは、すでにコンテンツマニフェストに存在する画像バリアントだけです。
+既存の `<img>` に遅延読み込みと、レスポンシブな `<picture>` / `srcset` を付与するプラグインです。参照するのは、`imageOptimizer()` が生成したものを含め、すでにコンテンツマニフェストに存在する画像バリアントだけです。
 
 [English](./README.md)
 
 ## できること
 
-`responsiveImage()` はビルド時の HTML レイヤーとして動作します。
+`responsiveImage()` はビルド時の HTML 変換レイヤーとして動作します。
 
 1. `<img>` に `loading="lazy"` と `decoding="async"` を付与します。すでに属性がある場合は変更しません。
 2. `sizes` がなければ追加します。
@@ -22,16 +22,23 @@ URL を捏造することはありません。ファイルを書き出すこと
 import { defineConfig } from "@riebeckite/core";
 import { attachment } from "@riebeckite/plugin-attachment";
 import { obsidianMarkdown } from "@riebeckite/plugin-obsidian-markdown";
+import { imageOptimizer } from "@riebeckite/plugin-image-optimizer";
 import { responsiveImage } from "@riebeckite/plugin-responsive-image";
 
 export default defineConfig({
   // ...
-  plugins: [obsidianMarkdown(), attachment(), responsiveImage()],
+  plugins: [obsidianMarkdown(), attachment(), imageOptimizer(), responsiveImage()],
 });
 ```
 
 `responsiveImage()` は `order: 100` で動作するため、メディアと添付ファイルのレンダラーより後に実行されます。
 
+## 実行例
+
+マニフェストに画像のバリアントがあれば、次のロゴは `<picture>` 要素として出力されます。
+
+![riebeckite-logo-horizontal.png](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/riebeckite-logo-horizontal.png.ja.md)
+
 ## オプション
 
 | オプション | 型 | 既定値 | 内容 |
@@ -55,15 +62,13 @@ export default defineConfig({
 
 元の `<img src>` は、サイトのアセット URL（`/attachments/photo.png`）と添付ファイル URL（`/assets/attachments/photo.png`）の両方を試して、マニフェスト上のアセットに対応付けます。対応するアセットが見つからない `<img>` はそのまま残します。
 
-## 制約: 画像のエンコードはしない
-
-このプラグインは、決定的な探索と HTML 変換だけを担当します。既定では新しい画像ファイルを生成しません。`PluginAsset` は `style` と `script` のモジュール指定子しか扱えず、プラグインが任意のバイナリファイルをビルド成果物へ出力する手段を Core は提供していません。
+## 画像のエンコード
 
-`generate` と `outputDir` は将来のリリース向けの予約で、現在は何もしません。実際のエンコードには Core のファイル出力 API が必要です。それまでは、外部の画像ツールなどでバリアントを事前生成し、元画像の隣にコミットしてください。サイト側では `apps/web/scripts/build_images.ts` が、参照されたボールト内アセットを `public/` へコピーします。
+このプラグインは引き続き決定的なマークアップ変換だけを担当します。同じビルドで WebP と AVIF を生成するには、`@riebeckite/plugin-image-optimizer` を追加してください。生成アセットは、このプラグインがマークアップを作る前に検出されます。
 
 ## 公開 API
 
-- `responsiveImage(options?)` / `responsiveImagePlugin`：プラグインファクトリ
+- `responsiveImage(options?)` / `responsiveImage`：プラグインファクトリ
 - `resolveResponsiveImageOptions(options?)`：既定値の解決
 - `buildResponsiveSrcset(existingPaths, src, options?)`：純粋な srcset 計画
 - `applyResponsiveImages(html, existingPaths, options?)`：HTML 変換

package/dist/index.d.ts

@@ -14,4 +14,3 @@ export type { ResponsiveImagePlan, ResponsiveImageSource, ResponsiveImageVariant
  * content manifest. It never fabricates URLs and never writes files.
  */
 export declare function responsiveImage(options?: ResponsiveImageOptions): import("@riebeckite/core").RiebeckitePlugin<ResponsiveImageOptions>;
-export declare const responsiveImagePlugin: typeof responsiveImage;

package/dist/index.js

@@ -385,11 +385,12 @@ function responsiveImage(options = {}) {
   return definePlugin({
     name: PLUGIN_NAME,
     order: 100,
+    optional: ["image-transforms"],
     processedContentCache: {
       version: "responsive-image-v1",
       dependencyMode: "none"
     },
-    contentOutputDependencies: [{ type: "global" }],
+    resolveContentOutputDependencies: ({ entry }) => entry.html.includes(RESPONSIVE_IMAGE_MARKER) ? [{ type: "global" }] : [],
     options,
     validateOptions: validateResponsiveImageOptions,
     extendHtmlPipeline: (pipeline) => {
@@ -417,7 +418,6 @@ function responsiveImage(options = {}) {
     ]
   });
 }
-var responsiveImagePlugin = responsiveImage;
 export {
   DEFAULT_RESPONSIVE_IMAGE_CLASS,
   DEFAULT_RESPONSIVE_IMAGE_FORMATS,
@@ -428,6 +428,5 @@ export {
   collectKnownAssetPaths,
   rehypeResponsiveImage,
   resolveResponsiveImageOptions,
-  responsiveImage,
-  responsiveImagePlugin
+  responsiveImage
 };

package/dist/src/hast.d.ts

@@ -1,6 +1,5 @@
 import type { ElementNode, HastNode } from "./types.js";
 export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ElementNode, index?: number) => void, parent?: ElementNode, index?: number): void;
-export declare function isElementNode(node: HastNode): node is ElementNode;
 export declare function getStringProperty(node: ElementNode, key: string): string | null;
 export declare function hasProperty(node: ElementNode, key: string): boolean;
 export declare function ensureProperty(node: ElementNode, key: string, value: string): void;

package/dist/src/rehype.d.ts

@@ -1,7 +1,6 @@
 import type { ResponsiveImageOptions } from "./options.js";
 import type { HastNode } from "./types.js";
 export declare const RESPONSIVE_IMAGE_MARKER = "data-responsive-image";
-export declare const RESPONSIVE_IMAGE_SOURCE = "@riebeckite/plugin-responsive-image";
 /**
  * HTML-pipeline pass: normalise the responsive attributes on every `<img>` and
  * mark it so the manifest pass can wrap it once the asset set is known.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-responsive-image",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,11 +15,11 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33"
   },
   "devDependencies": {
-    "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.31"
+    "@riebeckite/test": "0.0.33",
+    "tsx": "^4.22.4"
   },
   "publishConfig": {
     "access": "public"