@hkdigital/lib-sveltekit 0.1.43 → 0.1.45

package/dist/classes/svelte/image/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ImageLoader } from "./ImageLoader.svelte";
-export { default as ImageVariantsLoader } from "./ImageVariantsLoader.svelte";
+export { default as ImageLoader } from "./ImageLoader.svelte.js";
+export { default as ImageVariantsLoader } from "./ImageVariantsLoader.svelte.js";

package/dist/classes/svelte/image/index.js

@@ -1,4 +1,4 @@
-export { default as ImageLoader } from './ImageLoader.svelte';
-export { default as ImageVariantsLoader } from './ImageVariantsLoader.svelte';
+export { default as ImageLoader } from './ImageLoader.svelte.js';
+export { default as ImageVariantsLoader } from './ImageVariantsLoader.svelte.js';
 
 // export * from './constants.js';

package/dist/classes/svelte/network-loader/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NetworkLoader } from "./NetworkLoader.svelte";
+export { default as NetworkLoader } from "./NetworkLoader.svelte.js";
 export * from "./constants.js";

package/dist/classes/svelte/network-loader/index.js

@@ -1,3 +1,3 @@
-export { default as NetworkLoader } from './NetworkLoader.svelte';
+export { default as NetworkLoader } from './NetworkLoader.svelte.js';
 
 export * from './constants.js';

package/dist/components/buttons/button/Button.svelte

@@ -11,6 +11,7 @@
    *   size?: 'sm' | 'md' | 'lg',
    *   variant?: string,
    *   mode?: 'light'|'dark'
+   *   buttonType?: 'button' | 'submit' | 'reset',
    *   active?: boolean,
    *   selected?: boolean,
    *   loading?: boolean,
@@ -34,6 +35,8 @@
     variant = '',
     mode = 'light',
 
+    buttonType = 'button',
+
     // States
     active = $bindable(false),
     selected = $bindable(false),
@@ -62,7 +65,7 @@
   data-size={size}
   data-variant={variant}
   data-mode={mode}
-  type="button"
+  type={buttonType}
   class="{base} {bg} {classes} {stateClasses}"
   disabled={disabled || loading}
   aria-busy={loading}

package/dist/components/buttons/button/Button.svelte.d.ts

@@ -9,6 +9,7 @@ declare const Button: import("svelte").Component<{
     size?: "sm" | "md" | "lg";
     variant?: string;
     mode?: "light" | "dark";
+    buttonType?: "button" | "submit" | "reset";
     active?: boolean;
     selected?: boolean;
     loading?: boolean;

package/dist/util/http/http-request.d.ts

@@ -1,8 +1,9 @@
 /**
  * @callback requestHandler
- * @param {AbortController} controller
- * @param {( reason?: Error ) => void} abort
- * @param {( delayMs: number) => void} timeout
+ * @param {Object} _
+ * @param {AbortController} _.controller
+ * @param {( reason?: Error ) => void} _.abort
+ * @param {( delayMs: number) => void} _.timeout
  */
 /**
  * Make GET request
@@ -105,4 +106,8 @@ export function httpRequest({ method, url, urlSearchParams, body, headers, reque
     requestHandler?: requestHandler;
     timeoutMs?: number;
 }): Promise<Response>;
-export type requestHandler = (controller: AbortController, abort: (reason?: Error) => void, timeout: (delayMs: number) => void) => any;
+export type requestHandler = (_: {
+    controller: AbortController;
+    abort: (reason?: Error) => void;
+    timeout: (delayMs: number) => void;
+}) => any;

package/dist/util/http/http-request.js

@@ -13,9 +13,10 @@ import { waitForAndCheckResponse } from './response.js';
 
 /**
  * @callback requestHandler
- * @param {AbortController} controller
- * @param {( reason?: Error ) => void} abort
- * @param {( delayMs: number) => void} timeout
+ * @param {Object} _
+ * @param {AbortController} _.controller
+ * @param {( reason?: Error ) => void} _.abort
+ * @param {( delayMs: number) => void} _.timeout
  */
 
 /**
@@ -41,7 +42,13 @@ import { waitForAndCheckResponse } from './response.js';
  *
  * @returns {Promise<Response>} responsePromise
  */
-export async function httpGet({ url, urlSearchParams, headers, requestHandler, timeoutMs }) {
+export async function httpGet({
+	url,
+	urlSearchParams,
+	headers,
+	requestHandler,
+	timeoutMs
+}) {
 	const responsePromise = httpRequest({
 		method: METHOD_GET,
 		url,
@@ -76,7 +83,13 @@ export async function httpGet({ url, urlSearchParams, headers, requestHandler, t
  *
  * @returns {Promise<Response>} responsePromise
  */
-export async function httpPost({ url, body = null, headers, requestHandler, timeoutMs }) {
+export async function httpPost({
+	url,
+	body = null,
+	headers,
+	requestHandler,
+	timeoutMs
+}) {
 	const responsePromise = httpRequest({
 		method: METHOD_POST,
 		url,
@@ -142,7 +155,10 @@ export async function httpRequest({
 	if (headers) {
 		setRequestHeaders(requestHeaders, headers);
 
-		if (headers[CONTENT_TYPE] === APPLICATION_JSON && typeof body !== 'string') {
+		if (
+			headers[CONTENT_TYPE] === APPLICATION_JSON &&
+			typeof body !== 'string'
+		) {
 			throw new Error(
 				`Trying to send request with [content-type:${APPLICATION_JSON}], ` +
 					'but body is not a (JSON encoded) string.'
@@ -151,6 +167,7 @@ export async function httpRequest({
 		// IDEA: try to decode the body to catch errors on client side
 	}
 
+	/** @type {RequestInit} */
 	const init = {
 		mode: 'cors',
 		cache: 'no-cache',
@@ -165,7 +182,8 @@ export async function httpRequest({
 	if (urlSearchParams) {
 		if (!(urlSearchParams instanceof URLSearchParams)) {
 			throw new Error(
-				'Invalid parameter [urlSearchParams] ' + '(expected instanceof URLSearchParams)'
+				'Invalid parameter [urlSearchParams] ' +
+					'(expected instanceof URLSearchParams)'
 			);
 		}
 
@@ -174,7 +192,8 @@ export async function httpRequest({
 		for (const [name, value] of urlSearchParams.entries()) {
 			if (existingParams.has(name)) {
 				throw new Error(
-					`Cannot set URL search parameter [${name}] ` + `in url [${url.href}] (already set)`
+					`Cannot set URL search parameter [${name}] ` +
+						`in url [${url.href}] (already set)`
 				);
 			}
 
@@ -246,10 +265,12 @@ export async function httpRequest({
 		 * @param {number} delayMs
 		 */
 		const timeout = (delayMs = 10000) => {
-			expect.positiveNumber(delayMs, 'Invalid value for [delayMs]');
+			expect.positiveNumber(delayMs);
 
 			const timerId = setTimeout(() => {
-				controller.abort(new TimeoutError(`Request [${url.href}] timed out [${delayMs}]`));
+				controller.abort(
+					new TimeoutError(`Request [${url.href}] timed out [${delayMs}]`)
+				);
 			}, delayMs);
 
 			promise.finally(() => {
@@ -262,7 +283,7 @@ export async function httpRequest({
 		}
 
 		if (requestHandler) {
-			expect.function(requestHandler, 'Invalid parameter [requestHandler]');
+			expect.function(requestHandler);
 
 			requestHandler({ controller, abort, timeout });
 		}

package/dist/util/http/response.js

@@ -2,7 +2,10 @@ import { ResponseError } from '../../constants/errors/index.js';
 import * as expect from '../expect/index.js';
 import { toURL } from './url.js';
 
-import { WWW_AUTHENTICATE, CONTENT_LENGTH } from '../../constants/http/headers.js';
+import {
+	WWW_AUTHENTICATE,
+	CONTENT_LENGTH
+} from '../../constants/http/headers.js';
 
 import { href } from './url.js';
 
@@ -69,7 +72,8 @@ export async function expectResponseOk(response, url) {
 	const error = await getErrorFromResponse(response);
 
 	throw new ResponseError(
-		`Server returned - ${response.status} ${response.statusText} ` + `[url=${href(url)}]`,
+		`Server returned - ${response.status} ${response.statusText} ` +
+			`[url=${href(url)}]`,
 		{ cause: error }
 	);
 }
@@ -120,9 +124,12 @@ export async function waitForAndCheckResponse(responsePromise, url) {
 		}
 	} catch (e) {
 		if (e instanceof TypeError || response?.ok === false) {
-			throw new ResponseError(`A network error occurred for request [${href(url)}]`, {
-				cause: e
-			});
+			throw new ResponseError(
+				`A network error occurred for request [${href(url)}]`,
+				{
+					cause: e
+				}
+			);
 		} else {
 			throw e;
 		}
@@ -148,7 +155,7 @@ export function loadResponseBuffer(response, onProgress) {
 
 	let bytesLoaded = 0;
 
-	if (onProgress && size) {
+	if (onProgress /*&& size*/) {
 		onProgress({ bytesLoaded, size });
 	}
 
@@ -182,12 +189,14 @@ export function loadResponseBuffer(response, onProgress) {
 				// console.log({ size, bytesLoaded, value });
 
 				if (size && bytesLoaded > size) {
-					throw new Error(`Received more bytes that specified by header content-length`);
+					throw new Error(
+						`Received more bytes that specified by header content-length`
+					);
 				}
 
 				chunks.push(value);
 
-				if (onProgress && size) {
+				if (onProgress /*&& size*/) {
 					onProgress({ bytesLoaded, size });
 				}
 			}
@@ -199,7 +208,9 @@ export function loadResponseBuffer(response, onProgress) {
 		} // end while
 
 		if (size && bytesLoaded !== size) {
-			throw new Error(`Received [${bytesLoaded}], but expected [${size}] bytes`);
+			throw new Error(
+				`Received [${bytesLoaded}], but expected [${size}] bytes`
+			);
 		}
 
 		// Concat the chinks into a single array

package/dist/widgets/presenter/Presenter.state.svelte.d.ts

@@ -26,11 +26,15 @@ export class PresenterState {
     /** @type {string} */
     currentSlideName: string;
     /** @type {string} */
+    nextSlideName: string;
+    /** @type {string} */
     pendingSlideName: string;
     /** @type {boolean} */
     configured: boolean;
-    /** @type {Map<Symbol, () => void>} */
-    onUpdateListeners: Map<Symbol, () => void>;
+    /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+    onBeforeListeners: Map<Symbol, (params: ListenerParams) => void>;
+    /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+    onShowListeners: Map<Symbol, (params: ListenerParams) => void>;
     /**
      * Configure the presentation
      *
@@ -64,25 +68,6 @@ export class PresenterState {
 export type Slide = import("./typedef").Slide;
 export type Transition = import("./typedef").Transition;
 export type Layer = import("./typedef").Layer;
-export type LoadController = {
-    /**
-     * - Function to call when loading is complete
-     */
-    loaded: () => void;
-    /**
-     * - Function to return to the previous slide
-     */
-    cancel: () => void;
-};
-export type PresenterRef = {
-    /**
-     * - Navigate to a slide by name
-     */
-    gotoSlide: (name: string) => void;
-    /**
-     * - Get the current slide name
-     */
-    getCurrentSlideName: () => string;
-    onUpdate: (callback: any) => Function;
-};
+export type PresenterRef = import("./typedef").Layer;
+export type LoadController = import("./typedef").Layer;
 import { HkPromise } from '../../classes/promise/index.js';

package/dist/widgets/presenter/Presenter.state.svelte.js

@@ -6,6 +6,8 @@ import { untrack } from 'svelte';
 
 import { HkPromise } from '../../classes/promise/index.js';
 
+import { STAGE_BEFORE, STAGE_SHOW } from './constants.js';
+
 /**
  * @typedef {import("./typedef").Slide} Slide
  */
@@ -19,16 +21,11 @@ import { HkPromise } from '../../classes/promise/index.js';
  */
 
 /**
- * @typedef {Object} LoadController
- * @property {() => void} loaded - Function to call when loading is complete
- * @property {() => void} cancel - Function to return to the previous slide
+ * @typedef {import("./typedef").Layer} PresenterRef
  */
 
 /**
- * @typedef {Object} PresenterRef
- * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
- * @property {() => string} getCurrentSlideName - Get the current slide name
- * @property {(callback)=>Function} onUpdate
+ * @typedef {import("./typedef").Layer} LoadController
  */
 
 const Z_BACK = 0;
@@ -89,14 +86,20 @@ export class PresenterState {
     return currentSlide?.name || '';
   });
 
+  /** @type {string} */
+  nextSlideName;
+
   /** @type {string} */
   pendingSlideName;
 
   /** @type {boolean} */
   configured = false;
 
-  /** @type {Map<Symbol, () => void>} */
-  onUpdateListeners = new Map();
+  /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+  onBeforeListeners = new Map();
+
+  /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+  onShowListeners = new Map();
 
   /**
    * Initialize the presenter state and set up reactivity
@@ -281,11 +284,19 @@ export class PresenterState {
       throw new Error('Not configured yet');
     }
 
+    if (slide.name === this.currentSlideName) {
+      throw new Error(`gotoSlide cannot transition to current slide`);
+    }
+
+    this.nextSlideName = slide.name;
+
     if (this.busy) {
       this.pendingSlideName = slide.name;
       return;
     }
 
+    this.#callOnBeforeListeners();
+
     this.slideLoadingPromise = null;
 
     // Get a presenter reference to pass to the slide
@@ -396,6 +407,7 @@ export class PresenterState {
     if (this.pendingSlideName) {
       const pendingName = this.pendingSlideName;
 
+      this.nextSlideName = pendingName;
       this.pendingSlideName = null;
 
       untrack(() => {
@@ -403,14 +415,26 @@ export class PresenterState {
           this.gotoSlide(pendingName);
         }
       });
+    } else {
+      this.nextSlideName = null;
     }
 
-    this.#CallUpdateListeners();
+    this.#callOnShowListeners();
   }
 
-  #CallUpdateListeners() {
-    for (const fn of this.onUpdateListeners.values()) {
-      fn();
+  #callOnBeforeListeners() {
+    let nextSlideName = this.nextSlideName;
+
+    for (const fn of this.onBeforeListeners.values()) {
+      fn({ stage: STAGE_BEFORE, slideName: nextSlideName });
+    }
+  }
+
+  #callOnShowListeners() {
+    let currentSlideName = this.currentSlideName;
+
+    for (const fn of this.onShowListeners.values()) {
+      fn({ stage: STAGE_SHOW, slideName: currentSlideName });
     }
   }
 
@@ -557,12 +581,20 @@ export class PresenterState {
     return {
       gotoSlide: (name) => this.gotoSlide(name),
       getCurrentSlideName: () => this.currentSlideName,
-      onUpdate: (callback) => {
+      onBefore: (callback) => {
+        const key = Symbol();
+        this.onBeforeListeners.set(key, callback);
+
+        return () => {
+          this.onBeforeListeners.delete(key);
+        };
+      },
+      onAfter: (callback) => {
         const key = Symbol();
-        this.onUpdateListeners.set(key, callback);
+        this.onShowListeners.set(key, callback);
 
         return () => {
-          this.onUpdateListeners.delete(key);
+          this.onShowListeners.delete(key);
         };
       }
     };

package/dist/widgets/presenter/constants.d.ts

@@ -1,3 +1,5 @@
 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/constants.js

@@ -2,3 +2,6 @@ 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/typedef.d.ts

@@ -25,6 +25,31 @@ export type FadeOutTransition = {
     duration?: number;
     timing?: string;
 };
+export type ListenerParams = {
+    stage: string;
+    slideName: string;
+};
+export type LoadController = {
+    /**
+     * - Function to call when loading is complete
+     */
+    loaded: () => void;
+    /**
+     * - Function to return to the previous slide
+     */
+    cancel: () => void;
+};
+export type PresenterRef = {
+    /**
+     * - Navigate to a slide by name
+     */
+    gotoSlide: (name: string) => void;
+    /**
+     * - Get the current slide name
+     */
+    getCurrentSlideName: () => string;
+    onUpdate: (callback: any) => Function;
+};
 export type Transition = CssTransition | FadeInTransition | FadeOutTransition;
 export type SlideData = {
     [attrs: string]: any;

package/dist/widgets/presenter/typedef.js

@@ -32,6 +32,26 @@
  * }} FadeOutTransition
  */
 
+/**
+ * @typedef {{
+ *   stage: string,
+ *   slideName: string
+ * }} ListenerParams
+ */
+
+/**
+ * @typedef {Object} LoadController
+ * @property {() => void} loaded - Function to call when loading is complete
+ * @property {() => void} cancel - Function to return to the previous slide
+ */
+
+/**
+ * @typedef {Object} PresenterRef
+ * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
+ * @property {() => string} getCurrentSlideName - Get the current slide name
+ * @property {(callback)=>Function} onUpdate
+ */
+
 /**
  * @typedef {CssTransition|FadeInTransition|FadeOutTransition} Transition
  */

package/dist/widgets/presenter/util.js

@@ -25,7 +25,7 @@ export function waitForRender(callback) {
           setTimeout(() => {
             callback();
             resolve();
-          }, 50);
+          }, 20);
         });
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.43",
+	"version": "0.1.45",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"