@hkdigital/lib-sveltekit 0.1.62 → 0.1.65

package/dist/widgets/presenter/Presenter.svelte

@@ -1,140 +1,140 @@
-<script>
-  import { onMount } from 'svelte';
-
-  import { GridLayers } from '../../components/layout/index.js';
-
-  import { PresenterState } from './Presenter.state.svelte.js';
-  import { cssBefore, cssDuring, waitForRender } from './util.js';
-
-  /**
-   * @typedef {import("./typedef.js").Slide} Slide
-   */
-
-  /**
-   * @typedef {import("./typedef.js").Layer} Layer
-   */
-
-  /**
-   * @type {{
-   *   classes?: string,
-   *   slides?: import("./typedef.js").Slide[],
-   *   presenterRef?: import('./Presenter.state.svelte.js').PresenterRef,
-   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
-   *   loadingSnippet?: import('svelte').Snippet,
-   * }}
-   */
-  let {
-    // > Style
-    classes,
-
-    // > Functional
-    slides,
-    presenterRef = $bindable(),
-
-    // Snippets
-    layoutSnippet,
-    loadingSnippet
-  } = $props();
-
-  const presenter = new PresenterState();
-
-  onMount(() => {
-    // Configure presenter with slides if provided
-    presenter.configure({ slides });
-    presenterRef = presenter.getPresenterRef();
-  });
-
-  // > State
-
-  let classesA = $state('');
-  let classesB = $state('');
-
-  let stylesA = $state('');
-  let stylesB = $state('');
-
-  //> Apply stage classes and styles
-
-  $effect(() => {
-    // > layerA
-
-    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
-      presenter.layerA;
-
-    if (transitions?.length) {
-      // console.debug('layerA:transitions', transitions, {
-      //   stageBeforeIn,
-      //   stageIn,
-      //   stageBeforeOut,
-      //   stageOut
-      // });
-
-      if (stageBeforeIn || stageBeforeOut) {
-        ({ style: stylesA, classes: classesA } = cssBefore(transitions));
-      } else if (stageIn || stageOut) {
-        waitForRender(() => {
-          ({ style: stylesA, classes: classesA } = cssDuring(transitions));
-        });
-      }
-    } else {
-      stylesA = '';
-      classesA = '';
-    }
-  });
-
-  $effect(() => {
-    // > layerB
-
-    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
-      presenter.layerB;
-
-    if (transitions?.length) {
-      // console.debug('layerB:transitions', transitions, {
-      //   stageBeforeIn,
-      //   stageIn,
-      //   stageBeforeOut,
-      //   stageOut
-      // });
-
-      if (stageBeforeIn || stageBeforeOut) {
-        ({ style: stylesB, classes: classesB } = cssBefore(transitions));
-      } else if (stageIn || stageOut) {
-        waitForRender(() => {
-          ({ style: stylesB, classes: classesB } = cssDuring(transitions));
-        });
-      }
-    } else {
-      stylesB = '';
-      classesB = '';
-    }
-  });
-</script>
-
-<GridLayers data-component="presenter" {classes}>
-  <div
-    style:z-index={presenter.layerA.z}
-    style:visibility={presenter.layerA.visible ? 'visible' : 'hidden'}
-    inert={presenter.busy}
-    class="justify-self-stretch self-stretch overflow-hidden"
-  >
-    <div class="{classesA} h-full w-full" style={stylesA}>
-      {@render layoutSnippet(presenter.slideA, presenter.layerA)}
-    </div>
-  </div>
-
-  <div
-    style:z-index={presenter.layerB.z}
-    style:visibility={presenter.layerB.visible ? 'visible' : 'hidden'}
-    inert={presenter.busy}
-    class="justify-self-stretch self-stretch overflow-hidden"
-  >
-    <div class="{classesB} h-full w-full" style={stylesB}>
-      {@render layoutSnippet(presenter.slideB, presenter.layerB)}
-    </div>
-  </div>
-
-  {#if loadingSnippet && presenter.loadingSpinner}
-    <div class="h-full w-full" style="z-index:20;">
-      {@render loadingSnippet()}
-    </div>
-  {/if}
-</GridLayers>
+<script>
+  import { onMount } from 'svelte';
+
+  import { GridLayers } from '../../components/layout/index.js';
+
+  import { PresenterState } from './Presenter.state.svelte.js';
+  import { cssBefore, cssDuring, waitForRender } from './util.js';
+
+  /**
+   * @typedef {import("./typedef.js").Slide} Slide
+   */
+
+  /**
+   * @typedef {import("./typedef.js").Layer} Layer
+   */
+
+  /**
+   * @type {{
+   *   classes?: string,
+   *   slides?: import("./typedef.js").Slide[],
+   *   presenterRef?: import('./Presenter.state.svelte.js').PresenterRef,
+   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
+   *   loadingSnippet?: import('svelte').Snippet,
+   * }}
+   */
+  let {
+    // > Style
+    classes,
+
+    // > Functional
+    slides,
+    presenterRef = $bindable(),
+
+    // Snippets
+    layoutSnippet,
+    loadingSnippet
+  } = $props();
+
+  const presenter = new PresenterState();
+
+  onMount(() => {
+    // Configure presenter with slides if provided
+    presenter.configure({ slides });
+    presenterRef = presenter.getPresenterRef();
+  });
+
+  // > State
+
+  let classesA = $state('');
+  let classesB = $state('');
+
+  let stylesA = $state('');
+  let stylesB = $state('');
+
+  //> Apply stage classes and styles
+
+  $effect(() => {
+    // > layerA
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerA;
+
+    if (transitions?.length) {
+      // console.debug('layerA:transitions', transitions, {
+      //   stageBeforeIn,
+      //   stageIn,
+      //   stageBeforeOut,
+      //   stageOut
+      // });
+
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesA, classes: classesA } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        waitForRender(() => {
+          ({ style: stylesA, classes: classesA } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesA = '';
+      classesA = '';
+    }
+  });
+
+  $effect(() => {
+    // > layerB
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerB;
+
+    if (transitions?.length) {
+      // console.debug('layerB:transitions', transitions, {
+      //   stageBeforeIn,
+      //   stageIn,
+      //   stageBeforeOut,
+      //   stageOut
+      // });
+
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesB, classes: classesB } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        waitForRender(() => {
+          ({ style: stylesB, classes: classesB } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesB = '';
+      classesB = '';
+    }
+  });
+</script>
+
+<GridLayers data-component="presenter" {classes}>
+  <div
+    style:z-index={presenter.layerA.z}
+    style:visibility={presenter.layerA.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class="{classesA} h-full w-full" style={stylesA}>
+      {@render layoutSnippet(presenter.slideA, presenter.layerA)}
+    </div>
+  </div>
+
+  <div
+    style:z-index={presenter.layerB.z}
+    style:visibility={presenter.layerB.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class="{classesB} h-full w-full" style={stylesB}>
+      {@render layoutSnippet(presenter.slideB, presenter.layerB)}
+    </div>
+  </div>
+
+  {#if loadingSnippet && presenter.loadingSpinner}
+    <div class="h-full w-full" style="z-index:20;">
+      {@render loadingSnippet()}
+    </div>
+  {/if}
+</GridLayers>

package/dist/widgets/presenter/Presenter.svelte__

@@ -0,0 +1,125 @@
+<script>
+  /* ---------------------------------------------------------------- Imports */
+
+  import { GridLayers } from '$lib/components/layout/index.js';
+
+  import { createOrGetPresenterState } from './index.js';
+  import { cssBefore, cssDuring } from './util.js';
+
+  /* ------------------------------------------------------------------ Props */
+
+  /**
+   * @typedef {import("./typedef.js").Slide} Slide
+   */
+
+  /**
+   * @typedef {import("./typedef.js").Layer} Layer
+   */
+
+  /**
+   * @type {{
+   *   classes?: string,
+   *   slides?: import("./typedef.js").Slide[],
+   *   autostart?: boolean,
+   *   startSlide?: string,
+   *   instanceKey?: Symbol | string,
+   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>
+   * }}
+   */
+  let {
+    // > Style
+    classes,
+
+    // > Functional
+    slides,
+    autostart = false,
+    startSlide,
+
+    // State
+    instanceKey,
+
+    // Snippets
+    layoutSnippet
+  } = $props();
+
+  /* ------------------------------------------------------------------ State */
+
+  const presenter = createOrGetPresenterState(instanceKey);
+
+  $effect.pre(() => {
+    // Configure presenter with slides if provided
+    presenter.configure({ slides, autostart, startSlide });
+  });
+
+  let classesA = $state('');
+  let classesB = $state('');
+
+  let stylesA = $state('');
+  let stylesB = $state('');
+
+  //> Apply stage classes and styles
+
+  $effect(() => {
+    // > layerA
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerA;
+
+    if (transitions && transitions.length) {
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesA, classes: classesA } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        setTimeout(() => {
+          ({ style: stylesA, classes: classesA } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesA = '';
+      classesA = '';
+    }
+  });
+
+  $effect(() => {
+    // > layerB
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerB;
+
+    if (transitions) {
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesB, classes: classesB } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        setTimeout(() => {
+          ({ style: stylesB, classes: classesB } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesB = '';
+      classesB = '';
+    }
+  });
+</script>
+
+<GridLayers data-component="presenter" {classes}>
+  <div
+    style:z-index={presenter.layerA.z}
+    style:visibility={presenter.layerA.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class={classesA} style={stylesA}>
+      {@render layoutSnippet(presenter.slideA, presenter.layerA)}
+    </div>
+  </div>
+
+  <div
+    style:z-index={presenter.layerB.z}
+    style:visibility={presenter.layerB.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class={classesB} style={stylesB}>
+      {@render layoutSnippet(presenter.slideB, presenter.layerB)}
+    </div>
+  </div>
+</GridLayers>

package/dist/widgets/presenter/constants.js

@@ -1,7 +1,7 @@
-export const TRANSITION_CSS = 'css';
-
-export const FADE_IN = 'fade-in';
-export const FADE_OUT = 'fade-out';
-
-export const STAGE_BEFORE = 'stage-before';
-export const STAGE_SHOW = 'stage-show';
+export const TRANSITION_CSS = 'css';
+
+export const FADE_IN = 'fade-in';
+export const FADE_OUT = 'fade-out';
+
+export const STAGE_BEFORE = 'stage-before';
+export const STAGE_SHOW = 'stage-show';

package/dist/widgets/presenter/index.js

@@ -1,10 +1,10 @@
-export { default as Presenter } from './Presenter.svelte';
-export { default as ImageSlide } from './ImageSlide.svelte';
-
-export { PresenterState } from './Presenter.state.svelte.js';
-
-export * from './typedef.js';
-export * from './constants.js';
-
-// @ts-ignore
-export * from './util.js';
+export { default as Presenter } from './Presenter.svelte';
+export { default as ImageSlide } from './ImageSlide.svelte';
+
+export { PresenterState } from './Presenter.state.svelte.js';
+
+export * from './typedef.js';
+export * from './constants.js';
+
+// @ts-ignore
+export * from './util.js';

package/dist/widgets/presenter/typedef.js

@@ -1,106 +1,106 @@
-/**
- * @typedef {{
- *     type: (import('./constants').TRANSITION_CSS),
- *     property: string,
- *     from: string,
- *     to: string,
- *     delay?: number
- *     duration?: number
- *     timing?: string
- * }} CssTransition
- */
-
-/**
- * @typedef {{
- *     type: (import('./constants').FADE_IN),
- *     from?: string,
- *     to?: string,
- *     delay?: number
- *     duration?: number
- *     timing?: string
- * }} FadeInTransition
- */
-
-/**
- * @typedef {{
- *     type: (import('./constants').FADE_OUT),
- *     from?: string,
- *     to?: string,
- *     delay?: number
- *     duration?: number
- *     timing?: string
- * }} FadeOutTransition
- */
-
-/**
- * @typedef {Object} LoadController
- * @property {() => void} loaded - Function to call when loading is complete
- * @property {() => void} cancel - Function to return to the previous slide
- */
-
-/**
- * @typedef {{
- *   stage: string,
- *   slideName: string
- * }} ListenerParams
- */
-
-/**
- * @typedef {( params: ListenerParams) => () => void } ListenerCallback
- */
-
-/**
- * @typedef {() => void } UnregisterFn
- */
-
-/**
- * @typedef {Object} PresenterRef
- * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
- * @property {() => string} getCurrentSlideName - Get the current slide name
- * @property {( callback: ListenerCallback ) => UnregisterFn} onBefore
- *   Register listener that is called when a slide enters state 'before'
- * @property {( callback: ListenerCallback ) => UnregisterFn} onShow
- *   Register listener that is called when a slide enters state 'show'
- */
-
-/**
- * @typedef {CssTransition|FadeInTransition|FadeOutTransition} Transition
- */
-
-/**
- * @typedef {{[attrs: string]: *}} SlideData
- */
-
-/**
- * @typedef {{[attrs: string]: *}} SlideLayerLayout
- */
-
-/**
- * @typedef {{data?:SlideData, layout?:SlideLayerLayout}} SlideLayer
- */
-
-/**
- * @typedef {object} Slide
- * @property {string} name
- * @property {SlideData} [data]
- * @property {SlideLayer[]} [layers]
- * @property {Transition[]} [intro]
- * @property {Transition[]} [outro]
- * @property {number} [duration]
- */
-
-/**
- * @typedef {object} Layer
- * @property {number} z
- * @property {boolean} visible
- * @property {boolean} [stageIdle]
- * @property {boolean} [stageBeforeIn]
- * @property {boolean} [stageIn]
- * @property {boolean} [stageShow]
- * @property {boolean} [stageBeforeOut]
- * @property {boolean} [stageOut]
- * @property {boolean} [stageAfter]
- * @property {Transition[]} [transitions]
- */
-
-export default {};
+/**
+ * @typedef {{
+ *     type: (import('./constants').TRANSITION_CSS),
+ *     property: string,
+ *     from: string,
+ *     to: string,
+ *     delay?: number
+ *     duration?: number
+ *     timing?: string
+ * }} CssTransition
+ */
+
+/**
+ * @typedef {{
+ *     type: (import('./constants').FADE_IN),
+ *     from?: string,
+ *     to?: string,
+ *     delay?: number
+ *     duration?: number
+ *     timing?: string
+ * }} FadeInTransition
+ */
+
+/**
+ * @typedef {{
+ *     type: (import('./constants').FADE_OUT),
+ *     from?: string,
+ *     to?: string,
+ *     delay?: number
+ *     duration?: number
+ *     timing?: string
+ * }} FadeOutTransition
+ */
+
+/**
+ * @typedef {Object} LoadController
+ * @property {() => void} loaded - Function to call when loading is complete
+ * @property {() => void} cancel - Function to return to the previous slide
+ */
+
+/**
+ * @typedef {{
+ *   stage: string,
+ *   slideName: string
+ * }} ListenerParams
+ */
+
+/**
+ * @typedef {( params: ListenerParams) => () => void } ListenerCallback
+ */
+
+/**
+ * @typedef {() => void } UnregisterFn
+ */
+
+/**
+ * @typedef {Object} PresenterRef
+ * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
+ * @property {() => string} getCurrentSlideName - Get the current slide name
+ * @property {( callback: ListenerCallback ) => UnregisterFn} onBefore
+ *   Register listener that is called when a slide enters state 'before'
+ * @property {( callback: ListenerCallback ) => UnregisterFn} onShow
+ *   Register listener that is called when a slide enters state 'show'
+ */
+
+/**
+ * @typedef {CssTransition|FadeInTransition|FadeOutTransition} Transition
+ */
+
+/**
+ * @typedef {{[attrs: string]: *}} SlideData
+ */
+
+/**
+ * @typedef {{[attrs: string]: *}} SlideLayerLayout
+ */
+
+/**
+ * @typedef {{data?:SlideData, layout?:SlideLayerLayout}} SlideLayer
+ */
+
+/**
+ * @typedef {object} Slide
+ * @property {string} name
+ * @property {SlideData} [data]
+ * @property {SlideLayer[]} [layers]
+ * @property {Transition[]} [intro]
+ * @property {Transition[]} [outro]
+ * @property {number} [duration]
+ */
+
+/**
+ * @typedef {object} Layer
+ * @property {number} z
+ * @property {boolean} visible
+ * @property {boolean} [stageIdle]
+ * @property {boolean} [stageBeforeIn]
+ * @property {boolean} [stageIn]
+ * @property {boolean} [stageShow]
+ * @property {boolean} [stageBeforeOut]
+ * @property {boolean} [stageOut]
+ * @property {boolean} [stageAfter]
+ * @property {Transition[]} [transitions]
+ */
+
+export default {};