@styleflow.app/flowpress-astro-core 0.2.0-beta.21 → 0.2.0-beta.22

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 0.2.0-beta.22
+
+- Added a dedicated `sf/image` renderer with WordPress responsive `srcset`,
+  authored or attachment-default `sizes`, intrinsic dimensions, per-image CSS
+  classes and validated loading, decoding and fetch-priority controls.
+- Included per-image CSS classes in the recursive CMS class collector used by
+  consumer Tailwind safelists.
+
 ## 0.2.0-beta.21
 
 - Forced locale-aware thousands grouping for four-digit number spinner values,

package/README.md

@@ -48,6 +48,12 @@ Hero image and video backgrounds apply the catalog `objectPosition` value as
 two percentages (for example `77% 100%`). Invalid or missing CMS values safely
 fall back to `50% 50%`.
 
+`sf/image` renders the responsive attachment data serialized by WordPress as a
+single `<img>` with `srcset`, `sizes` and positive intrinsic dimensions. The
+block-root `className` remains on its StyleFlow wrapper while `imageClassName`
+targets the image. Loading defaults to `lazy`, decoding to `async` and fetch
+priority to `auto`; invalid stored values fail closed to those defaults.
+
 Projects can add renderers for project-owned Gutenberg blocks without copying
 or patching the core renderer. Pass a `FlowpressBlockRenderers` map keyed by the
 full block name; the registry is propagated through every recursive rendering

package/dist/astro/GutenbergRenderer.astro

@@ -7,6 +7,7 @@ import ColumnBlock from "./blocks/ColumnBlock.astro";
 import FormBlock from "./blocks/FormBlock.astro";
 import GridBlock from "./blocks/GridBlock.astro";
 import HeroBlock from "./blocks/HeroBlock.astro";
+import ImageBlock from "./blocks/ImageBlock.astro";
 import ListItemFallback from "./blocks/ListItemFallback.astro";
 import NumberSpinnerBlock from "./blocks/NumberSpinnerBlock.astro";
 import TextBlock from "./blocks/TextBlock.astro";
@@ -143,23 +144,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
   }
 
   if (name === "image") {
-    const image = block.attributes.image as {
-      url?: string;
-      sourceUrl?: string;
-      alt?: string;
-      altText?: string;
-    } | undefined;
-    const src = image?.url ?? image?.sourceUrl;
-    return src ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
-        <img
-          src={src}
-          alt={String(block.attributes.alt ?? image?.alt ?? image?.altText ?? "")}
-          loading="lazy"
-          decoding="async"
-        />
-      </S>
-    ) : null;
+    return <ImageBlock block={block} contract={contract} />;
   }
 
   if (name === "gallery") {

package/dist/astro/blocks/ImageBlock.astro

@@ -0,0 +1,90 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { StyleflowContract } from "../../styleflow.js";
+import type { FlowpressBlock } from "../../types.js";
+import {
+  blockHtmlAttributes,
+  semanticProps
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+type ImageLoading = "eager" | "lazy";
+type ImageDecoding = "async" | "auto" | "sync";
+type ImageFetchPriority = "auto" | "high" | "low";
+
+const { block, contract } = Astro.props;
+const attributes = block.attributes;
+const media = attributes.image && typeof attributes.image === "object"
+  ? attributes.image as Record<string, unknown>
+  : {};
+
+function text(value: unknown): string {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function positiveInteger(value: unknown): number | undefined {
+  const number = typeof value === "number" ? value : Number(value);
+  return Number.isInteger(number) && number > 0 ? number : undefined;
+}
+
+function loadingValue(value: unknown): ImageLoading {
+  return value === "eager" ? "eager" : "lazy";
+}
+
+function decodingValue(value: unknown): ImageDecoding {
+  return ["async", "auto", "sync"].includes(String(value))
+    ? String(value) as ImageDecoding
+    : "async";
+}
+
+function fetchPriorityValue(value: unknown): ImageFetchPriority {
+  return ["auto", "high", "low"].includes(String(value))
+    ? String(value) as ImageFetchPriority
+    : "auto";
+}
+
+const src = text(media.url) || text(media.sourceUrl);
+const srcSet = text(media.srcSet) || text(media.srcset);
+const sizes = srcSet
+  ? text(attributes.sizes) || text(media.sizes) || undefined
+  : undefined;
+const alt = typeof attributes.alt === "string"
+  ? attributes.alt
+  : typeof media.alt === "string"
+    ? media.alt
+    : typeof media.altText === "string"
+      ? media.altText
+      : "";
+const imageClassName = text(attributes.imageClassName)
+  .replace(/\s+/g, " ") || undefined;
+const width = positiveInteger(media.width);
+const height = positiveInteger(media.height);
+const loading = loadingValue(attributes.loading);
+const decoding = decodingValue(attributes.decoding);
+const fetchPriority = fetchPriorityValue(attributes.fetchPriority);
+---
+
+{src ? (
+  <S
+    as="div"
+    {...semanticProps(attributes, contract)}
+    {...blockHtmlAttributes(attributes)}
+  >
+    <img
+      src={src}
+      srcset={srcSet || undefined}
+      sizes={sizes}
+      width={width}
+      height={height}
+      alt={alt}
+      class={imageClassName}
+      loading={loading}
+      decoding={decoding}
+      fetchpriority={fetchPriority}
+    />
+  </S>
+) : null}

package/dist/style-classes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-classes.d.ts","sourceRoot":"","sources":["../src/style-classes.ts"],"names":[],"mappings":"AAoBA;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,CA8BpE"}
+{"version":3,"file":"style-classes.d.ts","sourceRoot":"","sources":["../src/style-classes.ts"],"names":[],"mappings":"AAoBA;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,CAgCpE"}

package/dist/style-classes.js

@@ -35,8 +35,10 @@ export function collectFlowpressClassNames(blocks) {
         }
         const block = value;
         if (block.attributes && typeof block.attributes === "object") {
-            for (const token of classTokens(block.attributes.className)) {
-                classes.add(token);
+            for (const attribute of ["className", "imageClassName"]) {
+                for (const token of classTokens(block.attributes[attribute])) {
+                    classes.add(token);
+                }
             }
         }
         Object.values(value).forEach(visit);

package/dist/style-classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-classes.js","sourceRoot":"","sources":["../src/style-classes.ts"],"names":[],"mappings":"AAEA,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,uBAAuB,GAAG,8BAA8B,CAAC;AAE/D,SAAS,WAAW,CAAC,KAAc;IACjC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,KAAK;SACT,KAAK,CAAC,KAAK,CAAC;SACZ,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SAC5B,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,KAAK,CAAC,MAAM,GAAG,CAAC;WACb,KAAK,CAAC,MAAM,IAAI,gBAAgB;WAChC,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC;AACP,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,0BAA0B,CAAC,MAAe;IACxD,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAClC,MAAM,OAAO,GAAG,IAAI,OAAO,EAAU,CAAC;IAEtC,MAAM,KAAK,GAAG,CAAC,KAAc,EAAQ,EAAE;QACrC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,KAAgC,CAAC;QAC/C,IAAI,KAAK,CAAC,UAAU,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC7D,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC5D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QAED,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,KAAK,CAAC,MAAM,CAAC,CAAC;IACd,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AACvE,CAAC","sourcesContent":["import type { FlowpressBlock } from \"./types.js\";\n\nconst MAX_CLASS_LENGTH = 256;\nconst UNSAFE_CLASS_CHARACTERS = /[\\s\\\\{};\\u0000-\\u001f\\u007f]/;\n\nfunction classTokens(value: unknown): string[] {\n  if (typeof value !== \"string\") {\n    return [];\n  }\n\n  return value\n    .split(/\\s+/)\n    .map((token) => token.trim())\n    .filter((token) => (\n      token.length > 0\n      && token.length <= MAX_CLASS_LENGTH\n      && !UNSAFE_CLASS_CHARACTERS.test(token)\n    ));\n}\n\n/**\n * Collect class names authored in Gutenberg from serialized FlowPress blocks.\n *\n * The traversal includes resolved template/list blocks stored inside\n * attributes as well as ordinary inner blocks. Tokens that could terminate a\n * generated Tailwind `@source inline()` directive are discarded.\n */\nexport function collectFlowpressClassNames(blocks: unknown): string[] {\n  const classes = new Set<string>();\n  const visited = new WeakSet<object>();\n\n  const visit = (value: unknown): void => {\n    if (!value || typeof value !== \"object\") {\n      return;\n    }\n    if (visited.has(value)) {\n      return;\n    }\n    visited.add(value);\n\n    if (Array.isArray(value)) {\n      value.forEach(visit);\n      return;\n    }\n\n    const block = value as Partial<FlowpressBlock>;\n    if (block.attributes && typeof block.attributes === \"object\") {\n      for (const token of classTokens(block.attributes.className)) {\n        classes.add(token);\n      }\n    }\n\n    Object.values(value).forEach(visit);\n  };\n\n  visit(blocks);\n  return [...classes].sort((left, right) => left.localeCompare(right));\n}\n"]}
+{"version":3,"file":"style-classes.js","sourceRoot":"","sources":["../src/style-classes.ts"],"names":[],"mappings":"AAEA,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,uBAAuB,GAAG,8BAA8B,CAAC;AAE/D,SAAS,WAAW,CAAC,KAAc;IACjC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,KAAK;SACT,KAAK,CAAC,KAAK,CAAC;SACZ,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SAC5B,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,KAAK,CAAC,MAAM,GAAG,CAAC;WACb,KAAK,CAAC,MAAM,IAAI,gBAAgB;WAChC,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC;AACP,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,0BAA0B,CAAC,MAAe;IACxD,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAClC,MAAM,OAAO,GAAG,IAAI,OAAO,EAAU,CAAC;IAEtC,MAAM,KAAK,GAAG,CAAC,KAAc,EAAQ,EAAE;QACrC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,KAAgC,CAAC;QAC/C,IAAI,KAAK,CAAC,UAAU,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC7D,KAAK,MAAM,SAAS,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAU,EAAE,CAAC;gBACjE,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;oBAC7D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,KAAK,CAAC,MAAM,CAAC,CAAC;IACd,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AACvE,CAAC","sourcesContent":["import type { FlowpressBlock } from \"./types.js\";\n\nconst MAX_CLASS_LENGTH = 256;\nconst UNSAFE_CLASS_CHARACTERS = /[\\s\\\\{};\\u0000-\\u001f\\u007f]/;\n\nfunction classTokens(value: unknown): string[] {\n  if (typeof value !== \"string\") {\n    return [];\n  }\n\n  return value\n    .split(/\\s+/)\n    .map((token) => token.trim())\n    .filter((token) => (\n      token.length > 0\n      && token.length <= MAX_CLASS_LENGTH\n      && !UNSAFE_CLASS_CHARACTERS.test(token)\n    ));\n}\n\n/**\n * Collect class names authored in Gutenberg from serialized FlowPress blocks.\n *\n * The traversal includes resolved template/list blocks stored inside\n * attributes as well as ordinary inner blocks. Tokens that could terminate a\n * generated Tailwind `@source inline()` directive are discarded.\n */\nexport function collectFlowpressClassNames(blocks: unknown): string[] {\n  const classes = new Set<string>();\n  const visited = new WeakSet<object>();\n\n  const visit = (value: unknown): void => {\n    if (!value || typeof value !== \"object\") {\n      return;\n    }\n    if (visited.has(value)) {\n      return;\n    }\n    visited.add(value);\n\n    if (Array.isArray(value)) {\n      value.forEach(visit);\n      return;\n    }\n\n    const block = value as Partial<FlowpressBlock>;\n    if (block.attributes && typeof block.attributes === \"object\") {\n      for (const attribute of [\"className\", \"imageClassName\"] as const) {\n        for (const token of classTokens(block.attributes[attribute])) {\n          classes.add(token);\n        }\n      }\n    }\n\n    Object.values(value).forEach(visit);\n  };\n\n  visit(blocks);\n  return [...classes].sort((left, right) => left.localeCompare(right));\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleflow.app/flowpress-astro-core",
-  "version": "0.2.0-beta.21",
+  "version": "0.2.0-beta.22",
   "description": "Project-agnostic WordPress routing, templates, SEO and GraphQL runtime for FlowPress Astro apps.",
   "type": "module",
   "private": false,