@akinon/pz-theme 2.0.6-rc.1 → 2.0.6

package/CHANGELOG.md

@@ -1,37 +1,15 @@
 # @akinon/pz-theme
 
-## 2.0.6-rc.1
+## 2.0.6
 
 ### Patch Changes
 
-- Updated dependencies [51ea0688]
-  - @akinon/next@2.0.6-rc.1
-
-## 2.0.6-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea23]
-- Updated dependencies [324f97d5]
-- Updated dependencies
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1]
-- Updated dependencies [143be2b9]
-- Updated dependencies [7889b08f]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f4]
-- Updated dependencies [57d7eb30]
-- Updated dependencies [d99a6a7d]
-- Updated dependencies [9db81a71]
-- Updated dependencies [591e345e]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc]
-- Updated dependencies [1d00f2d0]
-- Updated dependencies [4ac7b2a1]
-- Updated dependencies [4998a963]
-- Updated dependencies [3909d322]
-- Updated dependencies [e18836b2]
-  - @akinon/next@2.0.6-rc.0
+- 8ae85c5a: ZERO-4382: Add lazy load and fetch priority support
+- Updated dependencies [89deabe5]
+- Updated dependencies [1a345c47]
+- Updated dependencies [1f1ae44e]
+- Updated dependencies [8d8fefbe]
+  - @akinon/next@2.0.6
 
 ## 2.0.5
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.6-rc.1",
+  "version": "2.0.6",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {
-    "@akinon/next": "2.0.6-rc.1",
+    "@akinon/next": "2.0.6",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -15,7 +15,7 @@
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.6-rc.1",
+    "@akinon/next": "2.0.6",
     "@types/node": "^18.7.8",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",

package/src/blocks/image-block.tsx

@@ -1,6 +1,13 @@
 import React, { useMemo } from 'react';
 
-import { getResponsiveValue } from '../utils';
+import {
+  IMAGE_FETCH_PRIORITIES,
+  IMAGE_LOADING_STRATEGIES,
+  type ImageFetchPriority,
+  type ImageLoadingStrategy,
+  getResponsiveValue,
+  resolveOption
+} from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 const pickImageSource = (value: unknown, currentBreakpoint: string): string => {
@@ -72,6 +79,22 @@ const ImageBlock = ({
   }, [block.value, block.properties?.alt, currentBreakpoint]);
 
   const { url: src, alt } = imageValue;
+  const loadingStrategyValue =
+    block.properties?.loadingStrategy ?? block.styles?.loadingStrategy;
+  const priorityValue = block.properties?.priority ?? block.styles?.priority;
+
+  const loadingStrategy = resolveOption<ImageLoadingStrategy>(
+    loadingStrategyValue,
+    currentBreakpoint,
+    'lazy',
+    IMAGE_LOADING_STRATEGIES
+  );
+  const priority = resolveOption<ImageFetchPriority>(
+    priorityValue,
+    currentBreakpoint,
+    'auto',
+    IMAGE_FETCH_PRIORITIES
+  );
 
   const width = getResponsiveValue(
     block.styles?.width,
@@ -125,6 +148,8 @@ const ImageBlock = ({
       key={src}
       src={src}
       alt={alt}
+      loading={loadingStrategy}
+      fetchPriority={priority}
       style={{
         display: 'block',
         width: width ?? '100%',

package/src/blocks/slider-block.tsx

@@ -7,6 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import ThemeBlock from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import {
+  applyFirstSlideImageLoading,
   getCSSStyles,
   getResponsiveValue,
   resolveThemeCssVariables
@@ -481,37 +482,46 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
             !isDesigner && showArrows ? <CustomRightArrow /> : undefined
           }
         >
-          {sortedBlocks.map((childBlock) => (
-            <div
-              key={childBlock.id}
-              style={{
-                paddingLeft: slidePadding,
-                paddingRight: slidePadding
-              }}
-            >
-              <ThemeBlock
-                block={childBlock}
-                placeholderId={placeholderId}
-                sectionId={sectionId}
-                isDesigner={isDesigner}
-                isSelected={selectedBlockId === childBlock.id}
-                selectedBlockId={selectedBlockId}
-                currentBreakpoint={currentBreakpoint}
-                onMoveUp={() => blockAction('MOVE_BLOCK_UP', childBlock.id)}
-                onMoveDown={() => blockAction('MOVE_BLOCK_DOWN', childBlock.id)}
-                onDuplicate={() =>
-                  blockAction('DUPLICATE_BLOCK', childBlock.id)
-                }
-                onToggleVisibility={() =>
-                  blockAction('TOGGLE_BLOCK_VISIBILITY', childBlock.id)
-                }
-                onDelete={() => blockAction('DELETE_BLOCK', childBlock.id)}
-                onRename={(newLabel: string) =>
-                  blockAction('RENAME_BLOCK', childBlock.id, newLabel)
-                }
-              />
-            </div>
-          ))}
+          {sortedBlocks.map((childBlock, index) => {
+            const renderedChildBlock =
+              index === 0
+                ? applyFirstSlideImageLoading(childBlock)
+                : childBlock;
+
+            return (
+              <div
+                key={childBlock.id}
+                style={{
+                  paddingLeft: slidePadding,
+                  paddingRight: slidePadding
+                }}
+              >
+                <ThemeBlock
+                  block={renderedChildBlock}
+                  placeholderId={placeholderId}
+                  sectionId={sectionId}
+                  isDesigner={isDesigner}
+                  isSelected={selectedBlockId === childBlock.id}
+                  selectedBlockId={selectedBlockId}
+                  currentBreakpoint={currentBreakpoint}
+                  onMoveUp={() => blockAction('MOVE_BLOCK_UP', childBlock.id)}
+                  onMoveDown={() =>
+                    blockAction('MOVE_BLOCK_DOWN', childBlock.id)
+                  }
+                  onDuplicate={() =>
+                    blockAction('DUPLICATE_BLOCK', childBlock.id)
+                  }
+                  onToggleVisibility={() =>
+                    blockAction('TOGGLE_BLOCK_VISIBILITY', childBlock.id)
+                  }
+                  onDelete={() => blockAction('DELETE_BLOCK', childBlock.id)}
+                  onRename={(newLabel: string) =>
+                    blockAction('RENAME_BLOCK', childBlock.id, newLabel)
+                  }
+                />
+              </div>
+            );
+          })}
         </Carousel>
 
         {isDesigner &&

package/src/sections/posts-slider-section.tsx

@@ -6,7 +6,11 @@ import { twMerge } from 'tailwind-merge';
 
 import ThemeBlock from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
-import { getCSSStyles, getResponsiveValue } from '../utils';
+import {
+  applyFirstSlideImageLoading,
+  getCSSStyles,
+  getResponsiveValue
+} from '../utils';
 
 interface PostsSliderSectionProps {
   section: any;
@@ -424,9 +428,11 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
         containerClass="posts-slider-carousel"
         dotListClass="posts-slider-dots"
       >
-        {expandedBlocks.map((block) => {
+        {expandedBlocks.map((block, index) => {
           const controlBlockId = block.__iteratorParentId || block.id;
           const isIteratorClone = Boolean(block.__fromIterator);
+          const renderedBlock =
+            index === 0 ? applyFirstSlideImageLoading(block) : block;
 
           return (
             <div
@@ -437,7 +443,7 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
               }}
             >
               <ThemeBlock
-                block={block}
+                block={renderedBlock}
                 placeholderId={placeholderId}
                 sectionId={section.id}
                 isDesigner={isDesigner && !isIteratorClone}

package/src/utils/index.ts

@@ -1,6 +1,33 @@
 import React from 'react';
+import type { Block as ThemeBlockData } from '../theme-block';
+
 export * from './publish-window';
 
+export type ImageLoadingStrategy = 'eager' | 'lazy';
+export type ImageFetchPriority = 'high' | 'auto' | 'low';
+
+export const IMAGE_LOADING_STRATEGIES: ImageLoadingStrategy[] = [
+  'eager',
+  'lazy'
+];
+export const IMAGE_FETCH_PRIORITIES: ImageFetchPriority[] = [
+  'high',
+  'auto',
+  'low'
+];
+
+const FIRST_SLIDE_IMAGE_LOADING = {
+  loadingStrategy: 'eager',
+  priority: 'high'
+} as const;
+
+const hasOwnProperty = (value: unknown, key: string) =>
+  Boolean(
+    value &&
+      typeof value === 'object' &&
+      Object.prototype.hasOwnProperty.call(value, key)
+  );
+
 type ThemeSettings = Record<string, unknown> | null;
 
 const THEME_CSS_VARIABLE_MAP: Record<string, string> = {
@@ -160,6 +187,51 @@ export const getResponsiveValue = (
   return value;
 };
 
+export const resolveOption = <T extends string>(
+  value: unknown,
+  currentBreakpoint: string,
+  fallback: T,
+  allowedValues: T[]
+): T => {
+  const candidate = getResponsiveValue(value, currentBreakpoint, fallback);
+
+  if (typeof candidate === 'string' && allowedValues.includes(candidate as T)) {
+    return candidate as T;
+  }
+
+  return fallback;
+};
+
+export const applyFirstSlideImageLoading = (
+  slideBlock: ThemeBlockData
+): ThemeBlockData => {
+  const applyToBlock = (candidate: ThemeBlockData): ThemeBlockData => {
+    const nextChildren = candidate.blocks?.map(applyToBlock);
+
+    if (candidate.type !== 'image') {
+      return nextChildren ? { ...candidate, blocks: nextChildren } : candidate;
+    }
+
+    const properties = candidate.properties || {};
+
+    return {
+      ...candidate,
+      properties: {
+        ...properties,
+        ...(!hasOwnProperty(properties, 'loadingStrategy')
+          ? { loadingStrategy: FIRST_SLIDE_IMAGE_LOADING.loadingStrategy }
+          : {}),
+        ...(!hasOwnProperty(properties, 'priority')
+          ? { priority: FIRST_SLIDE_IMAGE_LOADING.priority }
+          : {})
+      },
+      ...(nextChildren ? { blocks: nextChildren } : {})
+    };
+  };
+
+  return applyToBlock(slideBlock);
+};
+
 const kebabToCamel = (str: string): string => {
   return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 };
@@ -756,9 +828,7 @@ const collectBlockCSS = (
 
   blocks.forEach((block) => {
     if (block.styles && Object.keys(block.styles).length > 0) {
-      const selector = `[data-block-id="${
-        block.styleSourceId || block.id
-      }"]`;
+      const selector = `[data-block-id="${block.styleSourceId || block.id}"]`;
       css += generateElementCSS(selector, block.styles, targetBreakpoint);
     }