@styleflow.app/flowpress-astro-core 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/astro/GutenbergRenderer.astro

@@ -1,12 +1,24 @@
 ---
 import S from "@styleflow.app/astro/S.astro";
 import type {
+  FlowpressBlockAdapters,
   FlowpressBlockRenderers,
   FlowpressIconRenderer
 } from "../block-renderers.js";
+import {
+  flowpressAdapterCompatibilityIssue,
+  flowpressBlockTypeDescriptors
+} from "../composition.js";
 import type { StyleflowContract } from "../styleflow.js";
-import type { FlowpressBlock } from "../types.js";
+import type {
+  FlowpressBlock,
+  FlowpressBlockHtmlProps,
+  FlowpressCompositionV1
+} from "../types.js";
+import type { DynamicStyleflowProps } from "../styleflow.js";
 import ColumnBlock from "./blocks/ColumnBlock.astro";
+import CarouselBlock from "./blocks/CarouselBlock.astro";
+import CarouselItemBlock from "./blocks/CarouselItemBlock.astro";
 import FormBlock from "./blocks/FormBlock.astro";
 import GridBlock from "./blocks/GridBlock.astro";
 import HeroBlock from "./blocks/HeroBlock.astro";
@@ -27,9 +39,33 @@ interface Props {
   contract?: StyleflowContract;
   blockRenderers?: FlowpressBlockRenderers;
   iconRenderer?: FlowpressIconRenderer;
+  rootHtmlProps?: FlowpressBlockHtmlProps;
+  rootStyleflowProps?: DynamicStyleflowProps;
+  adapterDefinitions?: FlowpressBlockAdapters;
+  composition?: FlowpressCompositionV1;
+  parentBlockName?: string;
+  production?: boolean;
+  depth?: number;
+  skipCustomRendererFor?: string;
+  requireRegisteredAdapters?: boolean;
 }
 
-const { blocks, contract, blockRenderers = {}, iconRenderer: IconRenderer } = Astro.props;
+const {
+  blocks,
+  contract,
+  blockRenderers = {},
+  iconRenderer: IconRenderer,
+  rootHtmlProps,
+  rootStyleflowProps,
+  adapterDefinitions,
+  composition,
+  parentBlockName,
+  production = import.meta.env.PROD,
+  depth = 0,
+  skipCustomRendererFor,
+  requireRegisteredAdapters = false
+} = Astro.props;
+const descriptors = composition ? flowpressBlockTypeDescriptors(composition) : undefined;
 
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
@@ -47,25 +83,92 @@ function youtubeEmbedUrl(value: unknown): string | null {
     return null;
   }
 }
+
+function nestedRendererProps(nextParentBlockName: string) {
+  return {
+    adapterDefinitions,
+    composition,
+    parentBlockName: nextParentBlockName,
+    production,
+    depth: depth + 1,
+    requireRegisteredAdapters
+  };
+}
 ---
 
-{blocks.map((block) => {
+{blocks.map((block, index) => {
   const name = block.name.replace(/^sf\//, "");
   const children = block.innerBlocks ?? [];
-  const semantic = semanticProps(block.attributes, contract);
-  const htmlAttributes = blockHtmlAttributes(block.attributes);
-  const CustomBlockRenderer = blockRenderers[block.name];
+  const semantic = index === 0 && blocks.length === 1 && rootStyleflowProps
+    ? rootStyleflowProps
+    : semanticProps(block.attributes, contract);
+  const htmlAttributes = index === 0 && blocks.length === 1 && rootHtmlProps
+    ? rootHtmlProps
+    : blockHtmlAttributes(block.attributes);
+  const CustomBlockRenderer = block.name === skipCustomRendererFor
+    ? undefined
+    : blockRenderers[block.name];
+  const compatibilityIssue = descriptors && adapterDefinitions
+    ? flowpressAdapterCompatibilityIssue(block.name, descriptors, adapterDefinitions)
+    : null;
+
+  if (compatibilityIssue && production && block.name !== skipCustomRendererFor) {
+    throw new Error(compatibilityIssue.message);
+  }
+
+  if (
+    requireRegisteredAdapters
+    && block.name !== skipCustomRendererFor
+    && !CustomBlockRenderer
+  ) {
+    const message = compatibilityIssue?.message
+      ?? `Missing FlowPress block adapter for "${block.name}".`;
+    if (production) throw new Error(message);
+    return (
+      <aside data-flowpress-compatibility="missing-adapter" data-block-name={block.name} role="status">
+        <strong>{message}</strong>
+        <code>{compatibilityIssue?.command ?? `pnpm cms:block-adapter ${block.name}`}</code>
+      </aside>
+    );
+  }
 
   if (CustomBlockRenderer) {
     return (
-      <CustomBlockRenderer block={block} contract={contract}>
+      <>
+        {compatibilityIssue ? (
+          <aside data-flowpress-compatibility={compatibilityIssue.code} data-block-name={block.name} role="status">
+            <strong>{compatibilityIssue.message}</strong>
+            <code>{compatibilityIssue.command}</code>
+          </aside>
+        ) : null}
+      <CustomBlockRenderer
+        block={block}
+        contract={contract}
+        composition={composition}
+        adapters={adapterDefinitions ?? {}}
+        htmlProps={htmlAttributes}
+        styleflowProps={semantic}
+        parentBlockName={parentBlockName}
+        context={{
+          ...(parentBlockName ? { parentBlockName } : {}),
+          depth,
+          production
+        }}
+      >
         <Astro.self
           blocks={children}
           contract={contract}
           blockRenderers={blockRenderers}
           iconRenderer={IconRenderer}
+          adapterDefinitions={adapterDefinitions}
+          composition={composition}
+          parentBlockName={block.name}
+          production={production}
+          depth={depth + 1}
+          requireRegisteredAdapters={requireRegisteredAdapters}
         />
       </CustomBlockRenderer>
+      </>
     );
   }
 
@@ -77,6 +180,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
           contract={contract}
           blockRenderers={blockRenderers}
           iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
         />
       </HeroBlock>
     );
@@ -90,6 +194,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
           contract={contract}
           blockRenderers={blockRenderers}
           iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
         />
       </GridBlock>
     );
@@ -103,11 +208,48 @@ function youtubeEmbedUrl(value: unknown): string | null {
           contract={contract}
           blockRenderers={blockRenderers}
           iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
         />
       </ColumnBlock>
     );
   }
 
+  if (name === "carousel") {
+    const invalidChildNames = children
+      .filter((child) => child.name !== "sf/carousel-item")
+      .map((child) => child.name);
+    return (
+      <CarouselBlock
+        block={block}
+        contract={contract}
+        validChildren={invalidChildNames.length === 0}
+        invalidChildNames={invalidChildNames}
+      >
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
+        />
+      </CarouselBlock>
+    );
+  }
+
+  if (name === "carousel-item") {
+    return (
+      <CarouselItemBlock block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
+        />
+      </CarouselItemBlock>
+    );
+  }
+
   if (name === "number-spinner") {
     return <NumberSpinnerBlock block={block} contract={contract} />;
   }
@@ -129,13 +271,14 @@ function youtubeEmbedUrl(value: unknown): string | null {
           contract={contract}
           blockRenderers={blockRenderers}
           iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
         />
       </TextBlock>
     );
   }
 
   if (name === "button") {
-    const href = linkValue(block, "href") || "#";
+    const href = linkValue(block, "href");
     const link = objectValue(block, "href");
     const opensInNewTab = Boolean(link.opensInNewTab);
     const icon = String(block.attributes.icon ?? "").trim();
@@ -149,19 +292,32 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const buttonIcon = IconRenderer && icon ? (
       <IconRenderer name={icon} display="inline" size={4} />
     ) : null;
-    return (
-      <S
-        as="a"
+    const buttonContent = (
+      <>
+        {iconPosition === "before" ? buttonIcon : null}
+        {textValue(block, "label")}
+        {iconPosition === "after" ? buttonIcon : null}
+      </>
+    );
+    return href ? (
+      <S.a
         href={href}
         target={opensInNewTab ? "_blank" : undefined}
         rel={opensInNewTab ? "noopener noreferrer" : undefined}
         {...buttonSemantic}
         {...htmlAttributes}
       >
-        {iconPosition === "before" ? buttonIcon : null}
-        {textValue(block, "label")}
-        {iconPosition === "after" ? buttonIcon : null}
-      </S>
+        {buttonContent}
+      </S.a>
+    ) : (
+      <S.span
+        aria-disabled="true"
+        data-flowpress-link-unresolved
+        {...buttonSemantic}
+        {...htmlAttributes}
+      >
+        {buttonContent}
+      </S.span>
     );
   }
 
@@ -208,7 +364,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.images as Array<Record<string, unknown>>
       : [];
     return (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         {images.map((image) => image.url ? (
           <img
             src={String(image.url)}
@@ -217,7 +373,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
             decoding="async"
           />
         ) : null)}
-      </S>
+      </S.div>
     );
   }
 
@@ -225,7 +381,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const video = objectValue(block, "video");
     const poster = objectValue(block, "poster");
     return video.url ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         <video
           src={String(video.url)}
           poster={poster.url ? String(poster.url) : undefined}
@@ -234,14 +390,14 @@ function youtubeEmbedUrl(value: unknown): string | null {
           muted={Boolean(block.attributes.autoplay)}
           playsinline
         />
-      </S>
+      </S.div>
     ) : null;
   }
 
   if (name === "video-youtube") {
     const embed = youtubeEmbedUrl(block.attributes.url);
     return embed ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         <iframe
           src={embed}
           title={String(block.attributes.title ?? "YouTube video")}
@@ -249,15 +405,15 @@ function youtubeEmbedUrl(value: unknown): string | null {
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen
         />
-      </S>
+      </S.div>
     ) : null;
   }
 
   if (name === "chip") {
     return (
-      <S as="span" {...semantic} {...htmlAttributes}>
+      <S.span {...semantic} {...htmlAttributes}>
         {textValue(block, "label")}
-      </S>
+      </S.span>
     );
   }
 
@@ -265,14 +421,14 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const media = objectValue(block, "image");
     const href = linkValue(block);
     return (
-      <S as="article" {...semantic} {...htmlAttributes}>
+      <S.article {...semantic} {...htmlAttributes}>
         {media.url && (
           <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
         )}
-        {block.attributes.title && <S as="h3">{String(block.attributes.title)}</S>}
-        {block.attributes.text && <S as="p">{String(block.attributes.text)}</S>}
-        {href && <S as="a" href={href}>Scopri</S>}
-      </S>
+        {block.attributes.title && <S.h3>{String(block.attributes.title)}</S.h3>}
+        {block.attributes.text && <S.p>{String(block.attributes.text)}</S.p>}
+        {href && <S.a href={href}>Scopri</S.a>}
+      </S.article>
     );
   }
 
@@ -284,22 +440,23 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.resolvedBlocks as FlowpressBlock[][]
       : [];
     return (
-      <S as="ul" {...semantic} {...htmlAttributes}>
+      <S.ul {...semantic} {...htmlAttributes}>
         {items.map((item, index) => (
-          <S as="li">
+          <S.li>
             {resolvedBlocks[index]?.length ? (
               <Astro.self
                 blocks={resolvedBlocks[index]}
                 contract={contract}
                 blockRenderers={blockRenderers}
                 iconRenderer={IconRenderer}
+                {...nestedRendererProps(block.name)}
               />
             ) : (
               <ListItemFallback item={item} />
             )}
-          </S>
+          </S.li>
         ))}
-      </S>
+      </S.ul>
     );
   }
 
@@ -311,6 +468,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
           contract={contract}
           blockRenderers={blockRenderers}
           iconRenderer={IconRenderer}
+          {...nestedRendererProps(block.name)}
         />
       </div>
     ) : (
@@ -319,6 +477,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
         contract={contract}
         blockRenderers={blockRenderers}
         iconRenderer={IconRenderer}
+        {...nestedRendererProps(block.name)}
       />
     );
   }
@@ -329,7 +488,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   if (name === "accordion-item") {
     return (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
           <Astro.self
@@ -337,9 +496,10 @@ function youtubeEmbedUrl(value: unknown): string | null {
             contract={contract}
             blockRenderers={blockRenderers}
             iconRenderer={IconRenderer}
+            {...nestedRendererProps(block.name)}
           />
         </details>
-      </S>
+      </S.div>
     );
   }
 
@@ -360,42 +520,42 @@ function youtubeEmbedUrl(value: unknown): string | null {
         + `?key=${encodeURIComponent(googleMapsApiKey)}`
         + `&q=${encodeURIComponent(query)}`;
       return (
-        <S as="div" {...semantic} {...htmlAttributes}>
+        <S.div {...semantic} {...htmlAttributes}>
           <iframe
             src={source}
             title={address || "Map"}
             loading="lazy"
             referrerpolicy="no-referrer-when-downgrade"
           />
-        </S>
+        </S.div>
       );
     }
     return query ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
-        <S
-          as="a"
+      <S.div {...semantic} {...htmlAttributes}>
+        <S.a
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
           rel="noreferrer"
         >
           {address || query}
-        </S>
-      </S>
+        </S.a>
+      </S.div>
     ) : null;
   }
 
-  const layoutTag = name === "section" ? "section" : "div";
-  return (
-    <S as={layoutTag} {...semantic} {...htmlAttributes}>
-      {block.innerHtml && children.length === 0
-        ? <S as="div" set:html={block.innerHtml} />
-        : (
-          <Astro.self
-            blocks={children}
-            contract={contract}
-            blockRenderers={blockRenderers}
-            iconRenderer={IconRenderer}
-          />
-        )}
-    </S>
+  const fallbackContent = block.innerHtml && children.length === 0
+    ? <S.div set:html={block.innerHtml} />
+    : (
+      <Astro.self
+        blocks={children}
+        contract={contract}
+        blockRenderers={blockRenderers}
+        iconRenderer={IconRenderer}
+        {...nestedRendererProps(block.name)}
+      />
+    );
+  return name === "section" ? (
+    <S.section {...semantic} {...htmlAttributes}>{fallbackContent}</S.section>
+  ) : (
+    <S.div {...semantic} {...htmlAttributes}>{fallbackContent}</S.div>
   );
 })}

package/dist/astro/ThemeRuntime.astro

@@ -0,0 +1,24 @@
+---
+import { styleflowThemeBootstrapScript } from "../theme-runtime.js";
+
+interface Props {
+  themes: string[];
+  defaultTheme: string;
+}
+
+const { themes, defaultTheme } = Astro.props;
+const bootstrap = styleflowThemeBootstrapScript(themes, defaultTheme);
+---
+
+<script is:inline set:html={bootstrap}></script>
+<script>
+  import { initializeStyleflowThemeRuntime } from "../theme-runtime.js";
+
+  const initialize = () => initializeStyleflowThemeRuntime();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initialize, { once: true });
+  } else {
+    initialize();
+  }
+  document.addEventListener("astro:page-load", initialize);
+</script>