fix(react): fix component props and strictly type playground data def…

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 (
     <div style={{ height: '300vh' }}>
       <ScrollSequence
-        assetsConfigs={assets}
+        assetsConfig={assets}
         drawMode="cover"
         scrollConfig={{
           start: 'top top',
@@ -135,7 +135,7 @@ const assets = [{
 <template>
   <div style="height: 300vh">
     <ScrollSequence 
-      :assetsConfigs="assets" 
+      :assetsConfig="assets" 
       drawMode="cover"
     />
   </div>
@@ -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 |
 |----------|------|---------|-------------|

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}`,

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;

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;
 	}

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<ScrollSequenceProps, "canvas" | "container">;
+
+const ScrollSequence = ({ assetsConfig, drawMode, networkPolicy, scrollConfig, loadingConfig, alt }: ScrollSequenceReactProps) => {
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const canvasRef = useRef<HTMLCanvasElement | null>(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 (
 		<div className="scroll-sequence container" ref={containerRef}>

playgrounds/astro/src/pages/react/index.astro

@@ -7,15 +7,15 @@ import { heroAssets, heroLoadingConfig, section2Assets, section2LoadingConfig, s
 	<section id="hero">
 		<ScrollSequence 
 			client:load
-			assetsConfigs={heroAssets}
+			assetsConfig={heroAssets}
 			loadingConfig={heroLoadingConfig}
 			alt={"My hero alt text"} 
 		/>
 	</section>
 	<section id="section-2">
 		<ScrollSequence
 			client:load
-			assetsConfigs={section2Assets}
+			assetsConfig={section2Assets}
 			loadingConfig={section2LoadingConfig}
 			scrollConfig={section2ScrollConfig}
 			alt={"Section alt text"} 

playgrounds/astro/src/pages/vanilla/index.astro

@@ -15,21 +15,21 @@ import Layout from "../../layouts/Layout.astro";
   <section></section>
 </Layout>
 <script>
-import ScrollSequence from "scroll-sequence";
+import ScrollSequence from "@scroll-sequence/vanilla";
 import { heroAssets, heroLoadingConfig, section2Assets, section2LoadingConfig, section2ScrollConfig } from "./../../utils/sequenceData"
 
 const scrollSequenceHero = ScrollSequence({
   canvas: document.querySelector("#canvas"),
   container: document.querySelector("#canvas-container"),
-  assetsConfigs: heroAssets,
+  assetsConfig: heroAssets,
   loadingConfig: heroLoadingConfig,
 });
 
-  
+
 const scrollSequenceSection2 = ScrollSequence({
   canvas: document.querySelector("#canvas-2"),
   container: document.querySelector("#canvas-container-2"),
-  assetsConfigs: section2Assets,
+  assetsConfig: section2Assets,
   loadingConfig: section2LoadingConfig,
   scrollConfig: section2ScrollConfig,
 });

playgrounds/astro/src/pages/vue/index.astro

@@ -7,15 +7,15 @@ import { heroAssets, heroLoadingConfig, section2Assets, section2LoadingConfig, s
 	<section id="hero">
 		<ScrollSequence 
 			client:only="vue" 
-			assetsConfigs={heroAssets}
+			assetsConfig={heroAssets}
 			loadingConfig={heroLoadingConfig}
 			alt={"My hero alt text"} 
 		/>
 	</section>
 	<section id="section-2">
 		<ScrollSequence 
 			client:only="vue" 
-			assetsConfigs={section2Assets}
+			assetsConfig={section2Assets}
 			loadingConfig={section2LoadingConfig}
 			scrollConfig={section2ScrollConfig}
 			alt={"Section alt text"} 

playgrounds/astro/src/utils/sequenceData.js → playgrounds/astro/src/utils/sequenceData.ts

@@ -1,4 +1,6 @@
-export const heroAssets = [
+import type { AssetsConfig, LoadingConfig, ScrollConfig } from "@scroll-sequence/core";
+
+export const heroAssets: AssetsConfig = [
 	{
 		name: "desktop",
 		url: "/images/sequences/1/desktop/A_",
@@ -19,11 +21,11 @@ export const heroAssets = [
 	},
 ];
 
-export const heroLoadingConfig = {
+export const heroLoadingConfig: LoadingConfig = {
 	loadingMode: "eager",
 };
 
-export const section2Assets = [
+export const section2Assets: AssetsConfig = [
 	{
 		name: "largeImages",
 		url: "/images/sequences/2/B_",
@@ -34,13 +36,13 @@ export const section2Assets = [
 	},
 ];
 
-export const section2LoadingConfig = {
+export const section2LoadingConfig: LoadingConfig = {
 	trigger: "#hero",
 	start: "top top",
 	markers: false,
 };
 
-export const section2ScrollConfig = {
+export const section2ScrollConfig: ScrollConfig = {
 	start: "top top",
 	end: "100%",
 };