@riebeckite/plugin-responsive-image 0.0.5 → 0.0.7

package/README.md

@@ -87,3 +87,7 @@ commit them next to the original image. Sites copy referenced vault assets into
 - `collectKnownAssetPaths(manifest)` — manifest asset set helper
 - Types: `ResponsiveImageOptions`, `ResolvedResponsiveImageOptions`,
   `ResponsiveImagePlan`, `ResponsiveImageSource`, `ResponsiveImageVariant`
+
+## See also
+
+- [Plugin guide](../../../docs/en/plugin-system.md)

package/README_ja.md

@@ -67,3 +67,7 @@ export default defineConfig({
 - `applyResponsiveImages(html, existingPaths, options?)` — HTML 変換
 - `collectKnownAssetPaths(manifest)` — マニフェストのアセット集合を取得
 - 型: `ResponsiveImageOptions`、`ResolvedResponsiveImageOptions`、`ResponsiveImagePlan`、`ResponsiveImageSource`、`ResponsiveImageVariant`
+
+## ????
+
+- [?????????](../../../docs/ja/plugin-system.md)

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { type ResponsiveImageOptions } from "./src/options.js";
+export { applyResponsiveImages } from "./src/html.js";
 export type { ResolvedResponsiveImageOptions, ResponsiveImageOptions, } from "./src/options.js";
 export { DEFAULT_RESPONSIVE_IMAGE_CLASS, DEFAULT_RESPONSIVE_IMAGE_FORMATS, DEFAULT_RESPONSIVE_IMAGE_SIZES, DEFAULT_RESPONSIVE_IMAGE_WIDTHS, resolveResponsiveImageOptions, } from "./src/options.js";
-export type { ResponsiveImagePlan, ResponsiveImageSource, ResponsiveImageVariant, } from "./src/types.js";
-export { buildResponsiveSrcset, collectKnownAssetPaths } from "./src/srcset.js";
 export { rehypeResponsiveImage } from "./src/rehype.js";
-export { applyResponsiveImages } from "./src/html.js";
+export { buildResponsiveSrcset, collectKnownAssetPaths } from "./src/srcset.js";
+export type { ResponsiveImagePlan, ResponsiveImageSource, ResponsiveImageVariant, } from "./src/types.js";
 /**
  * Build-time responsive image layer.
  *

package/dist/index.js

@@ -92,10 +92,74 @@ function isFormatList(value) {
   return Array.isArray(value) && value.every((item) => typeof item === "string" && item.trim() !== "");
 }
 
+// src/hast.ts
+function visitElements(node, visitor, parent, index) {
+  if (isElementNode(node)) {
+    visitor(node, parent, index);
+  }
+  for (const [childIndex, child] of [...getChildren(node)].entries()) {
+    visitElements(
+      child,
+      visitor,
+      isElementNode(node) ? node : parent,
+      childIndex
+    );
+  }
+}
+function isElementNode(node) {
+  return node.type === "element";
+}
+function getStringProperty(node, key) {
+  const value = node.properties?.[key];
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join(" ");
+  return null;
+}
+function hasProperty(node, key) {
+  return node.properties?.[key] !== void 0;
+}
+function ensureProperty(node, key, value) {
+  if (!node.properties) node.properties = {};
+  if (key in node.properties) return;
+  node.properties[key] = value;
+}
+function getChildren(node) {
+  const children = node.children;
+  return Array.isArray(children) ? children : [];
+}
+
+// src/rehype.ts
+var RESPONSIVE_IMAGE_MARKER = "data-responsive-image";
+var RESPONSIVE_IMAGE_SOURCE = "@riebeckite/plugin-responsive-image";
+var MARKER_PROPERTY = "dataResponsiveImage";
+function rehypeResponsiveImage(options = {}) {
+  const resolved = resolveResponsiveImageOptions(options);
+  return (tree, file) => {
+    visitElements(tree, (node) => {
+      if (node.tagName !== "img") return;
+      if (hasProperty(node, MARKER_PROPERTY)) return;
+      const src = getStringProperty(node, "src");
+      if (!src || src.trim() === "") {
+        warnMalformed(
+          file,
+          'An <img> element is missing a usable "src".'
+        );
+      }
+      if (resolved.lazy) ensureProperty(node, "loading", "lazy");
+      if (resolved.decoding) ensureProperty(node, "decoding", "async");
+      ensureProperty(node, "sizes", resolved.sizes);
+      if (!node.properties) node.properties = {};
+      node.properties[MARKER_PROPERTY] = "";
+    });
+  };
+}
+function warnMalformed(file, message) {
+  if (typeof file?.message !== "function") return;
+  file.message(message, { source: RESPONSIVE_IMAGE_SOURCE });
+}
+
 // src/srcset.ts
-import {
-  attachmentUrl
-} from "@riebeckite/core";
+import { attachmentUrl } from "@riebeckite/core";
 var FORMAT_MIME_TYPES = {
   avif: "image/avif",
   bmp: "image/bmp",
@@ -125,7 +189,9 @@ function buildResponsiveSrcset(existingPaths, src, options = {}) {
   const sources = [];
   for (const format of resolved.formats) {
     if (format === split.extension) continue;
-    const widthVariants = variants.filter((variant) => variant.format === format && variant.width !== void 0).toSorted((a, b) => (a.width ?? 0) - (b.width ?? 0));
+    const widthVariants = variants.filter(
+      (variant) => variant.format === format && variant.width !== void 0
+    ).toSorted((a, b) => (a.width ?? 0) - (b.width ?? 0));
     if (widthVariants.length > 0) {
       sources.push({
         type: mimeTypeFor(format),
@@ -230,72 +296,6 @@ function encodeAssetPath(path) {
   return path.split("/").map(encodeURIComponent).join("/");
 }
 
-// src/hast.ts
-function visitElements(node, visitor, parent, index) {
-  if (isElementNode(node)) {
-    visitor(node, parent, index);
-  }
-  for (const [childIndex, child] of [...getChildren(node)].entries()) {
-    visitElements(
-      child,
-      visitor,
-      isElementNode(node) ? node : parent,
-      childIndex
-    );
-  }
-}
-function isElementNode(node) {
-  return node.type === "element";
-}
-function getStringProperty(node, key) {
-  const value = node.properties?.[key];
-  if (typeof value === "string") return value;
-  if (Array.isArray(value)) return value.join(" ");
-  return null;
-}
-function hasProperty(node, key) {
-  return node.properties?.[key] !== void 0;
-}
-function ensureProperty(node, key, value) {
-  if (!node.properties) node.properties = {};
-  if (key in node.properties) return;
-  node.properties[key] = value;
-}
-function getChildren(node) {
-  const children = node.children;
-  return Array.isArray(children) ? children : [];
-}
-
-// src/rehype.ts
-var RESPONSIVE_IMAGE_MARKER = "data-responsive-image";
-var RESPONSIVE_IMAGE_SOURCE = "@riebeckite/plugin-responsive-image";
-var MARKER_PROPERTY = "dataResponsiveImage";
-function rehypeResponsiveImage(options = {}) {
-  const resolved = resolveResponsiveImageOptions(options);
-  return (tree, file) => {
-    visitElements(tree, (node) => {
-      if (node.tagName !== "img") return;
-      if (hasProperty(node, MARKER_PROPERTY)) return;
-      const src = getStringProperty(node, "src");
-      if (!src || src.trim() === "") {
-        warnMalformed(
-          file,
-          'An <img> element is missing a usable "src".'
-        );
-      }
-      if (resolved.lazy) ensureProperty(node, "loading", "lazy");
-      if (resolved.decoding) ensureProperty(node, "decoding", "async");
-      ensureProperty(node, "sizes", resolved.sizes);
-      if (!node.properties) node.properties = {};
-      node.properties[MARKER_PROPERTY] = "";
-    });
-  };
-}
-function warnMalformed(file, message) {
-  if (typeof file?.message !== "function") return;
-  file.message(message, { source: RESPONSIVE_IMAGE_SOURCE });
-}
-
 // src/html.ts
 var IMG_TAG_PATTERN = /<img\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
 var ATTRIBUTE_PATTERN = /([^\s"'=<>`/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-responsive-image",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,11 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.5"
+    "@riebeckite/core": "0.0.7"
+  },
+  "devDependencies": {
+    "tsx": "^4.22.4",
+    "@riebeckite/test": "0.0.7"
   },
   "publishConfig": {
     "access": "public"
@@ -50,6 +54,7 @@
     "./style.css"
   ],
   "scripts": {
-    "build": "node ../../../scripts/build_package.mjs"
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
   }
 }

package/style.css

@@ -1,11 +1,11 @@
-.rb-responsive-image {
-  display: block;
-  max-width: 100%;
-}
-
-.rb-responsive-image > img {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-}
+.rb-responsive-image {
+  display: block;
+  max-width: 100%;
+}
+
+.rb-responsive-image > img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}