diff --git a/README.md b/README.md index 62b1c56..bcb79e0 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ HTML const sequence = new ScrollSequence({ container: document.querySelector('#sequence-container'), canvas: document.querySelector('#sequence-canvas'), - assetsConfigs: [ + assetsConfig: [ { name: 'hero', url: '/assets/images', @@ -105,7 +105,7 @@ export default function Hero() { return (
@@ -168,15 +168,15 @@ const assets = [ ## Attributes | Option | Type | Default | Description | | ------------- | ----------- | ------------------- | ------------------------------ | -| `assetsConfigs` | `Array` | `[]` | Array of asset configurations | +| `assetsConfig` | `Array` | `[]` | Array of asset configurations | | `drawMode` | `String` | `'cover'` | `'cover'` or `'contain'` | | `scrollConfig` | `Object` | `{}` | Scroll trigger configuration | | `networkPolicy` | `adaptive \| fallback-only` |`adaptive` | Not yet implemented -### Assets Configuration Object (`assetsConfigs`) +### Assets Configuration Object (`assetsConfig`) -Each object within the `assetsConfigs` array defines a sequence of images and supports the following properties: +Each object within the `assetsConfig` array defines a sequence of images and supports the following properties: | Property | Type | Default | Description | |----------|------|---------|-------------| diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index ae8dd97..a12b474 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,6 +1,6 @@ import { PrefersReducedMotion } from "./reduce-motion/reduce-motion"; -import type { AssetsConfigs, BreakpointConfig, LoadingConfig, ScrollConfig, ScrollSequenceProps } from "./types/scrollSequence"; -export type { AssetsConfigs, BreakpointConfig, LoadingConfig, ScrollConfig, ScrollSequenceProps }; +import type { AssetsConfig, BreakpointConfig, LoadingConfig, ScrollConfig, ScrollSequenceProps } from "./types/scrollSequence"; +export type { AssetsConfig, BreakpointConfig, LoadingConfig, ScrollConfig, ScrollSequenceProps }; import { ScrollEngine } from "./scroll-engine/scroll-engine"; import { ActiveBreakpoint } from "./active-breakpoint/active-breakpoint"; import resolveFallbackFrameUrl from "./utils/url-resolvers/resolveFallbackUrls"; @@ -122,7 +122,7 @@ export class ScrollSequenceEngine { }; initBreakpointsManager = () => { - this.breakpoints = this.normalizeBreakpoints(this.config.assetsConfigs); + this.breakpoints = this.normalizeBreakpoints(this.config.assetsConfig); this.activeBreakpointManager = new ActiveBreakpoint(this.breakpoints); this.activeBreakpointManager.init(); this.activeBreakpoint = this.activeBreakpointManager.getActive(); @@ -156,7 +156,7 @@ export class ScrollSequenceEngine { this.minFramesToPreload = this.totalFrames < this.MIN_FRAMES_TO_PRELOAD ? this.totalFrames : this.MIN_FRAMES_TO_PRELOAD; }; - normalizeBreakpoints = (assetsConfig: AssetsConfigs) => { + normalizeBreakpoints = (assetsConfig: AssetsConfig) => { return assetsConfig.map((cfg, index) => ({ ...cfg, name: cfg.name || `asset-${index}`, diff --git a/packages/core/src/types/scrollSequence.ts b/packages/core/src/types/scrollSequence.ts index 253ac81..8d9086b 100644 --- a/packages/core/src/types/scrollSequence.ts +++ b/packages/core/src/types/scrollSequence.ts @@ -1,7 +1,7 @@ export type DrawMode = "cover" | "contain"; export type NetworkPolicy = "adaptive" | "fallback-only"; -export interface AssetsConfig { +export interface AssetConfig { /** Unique name for the asset */ name: string; /** Base URL of the frames */ @@ -27,7 +27,7 @@ export interface AssetsConfig { } /** Array of assets */ -export type AssetsConfigs = AssetsConfig[]; +export type AssetsConfig = AssetConfig[]; /** * Configuration for loading frames in the scroll sequence. @@ -72,7 +72,7 @@ export interface ScrollConfig { export interface ScrollSequenceEngine { /** Array of assets to display */ - assetsConfigs: AssetsConfigs; + assetsConfig: AssetsConfig; /** Optional loading configuration */ loadingConfig?: LoadingConfig; @@ -101,7 +101,7 @@ export interface ScrollSequenceEngine { */ export interface ScrollSequenceProps { /** Array of assets to display */ - assetsConfigs: AssetsConfigs; + assetsConfig: AssetsConfig; /** Optional loading configuration */ loadingConfig?: LoadingConfig; diff --git a/packages/core/src/utils/url-resolvers/resolveFallbackUrls.ts b/packages/core/src/utils/url-resolvers/resolveFallbackUrls.ts index 4cfecbf..81ca002 100644 --- a/packages/core/src/utils/url-resolvers/resolveFallbackUrls.ts +++ b/packages/core/src/utils/url-resolvers/resolveFallbackUrls.ts @@ -1,7 +1,7 @@ -import type { AssetsConfig } from "../../types/scrollSequence"; +import type { AssetConfig } from "../../types/scrollSequence"; import { getFrameHref } from "./getFrameHref"; -const resolveFallbackFrameUrl = (cfg: AssetsConfig): string => { +const resolveFallbackFrameUrl = (cfg: AssetConfig): string => { if (typeof cfg.frameFallback === "string") { return cfg.frameFallback; } diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index c9b615e..912b81b 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -1,8 +1,10 @@ -import { useEffect, useMemo, useRef } from "react"; +import { useEffect, useRef } from "react"; import { ScrollSequenceEngine } from "@scroll-sequence/core"; import type { ScrollSequenceProps } from "@scroll-sequence/core"; -const ScrollSequence = ({ assetsConfigs, drawMode, networkPolicy, scrollConfig, loadingConfig, alt }: ScrollSequenceProps) => { +export type ScrollSequenceReactProps = Omit; + +const ScrollSequence = ({ assetsConfig, drawMode, networkPolicy, scrollConfig, loadingConfig, alt }: ScrollSequenceReactProps) => { const containerRef = useRef(null); const canvasRef = useRef(null); @@ -19,7 +21,7 @@ const ScrollSequence = ({ assetsConfigs, drawMode, networkPolicy, scrollConfig, } const engine = new ScrollSequenceEngine({ - assetsConfigs: assetsConfigs, + assetsConfig: assetsConfig, drawMode, networkPolicy, scrollConfig, @@ -32,7 +34,7 @@ const ScrollSequence = ({ assetsConfigs, drawMode, networkPolicy, scrollConfig, return () => { engine.destroy(); }; - }, [assetsConfigs, drawMode, networkPolicy, scrollConfig, loadingConfig]); + }, [assetsConfig, drawMode, networkPolicy, scrollConfig, loadingConfig]); return (
diff --git a/playgrounds/astro/src/pages/react/index.astro b/playgrounds/astro/src/pages/react/index.astro index 8ea8943..3412f0a 100644 --- a/playgrounds/astro/src/pages/react/index.astro +++ b/playgrounds/astro/src/pages/react/index.astro @@ -7,7 +7,7 @@ import { heroAssets, heroLoadingConfig, section2Assets, section2LoadingConfig, s
@@ -15,7 +15,7 @@ import { heroAssets, heroLoadingConfig, section2Assets, section2LoadingConfig, s