@hkdigital/lib-sveltekit 0.1.44 → 0.1.46

package/README.md

@@ -11,6 +11,10 @@ It contains common code and components that we use to create our projects.
 This package is incomplete and not fully tested.
 Do not use in production environments yet.
 
+### TODO
+
+Add information about Skeleton, theming and imagetools
+
 ## A note about tailwindcss
 
 Components in this package use [tailwindcss](https://tailwindcss.com/).
@@ -46,7 +50,7 @@ We use a wildcard to upgrade all installed `node_modules` in the scope `@hkdigit
 You can also add this command to your project. To do so, add the lines to the bottom of the `scripts` section of your `package.json`.
 
 ```bash
-"upgrade:hklib": "ncu '@hkdigital/*' -u && pnpm install",
+"upgrade:hk": "ncu --dep dev,optional,peer,prod '@hkdigital/*' -u && pnpm install",
 "upgrade:all": "ncu -u && pnpm install"
 ```
 
@@ -83,7 +87,7 @@ export default {
     './src/**/*.{html,js,svelte,ts}',
 ```
 
-## Building the showcase app
+## Building the library
 
 To build your library:
 
@@ -91,6 +95,8 @@ To build your library:
 npm run package
 ```
 
+## Building the showcase app
+
 To create a production version of your showcase app:
 
 ```bash

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

@@ -68,6 +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 PresenterRef = import("./typedef").Layer;
-export type LoadController = import("./typedef").Layer;
+export type PresenterRef = import("./typedef").PresenterRef;
+export type LoadController = import("./typedef").LoadController;
 import { HkPromise } from '../../classes/promise/index.js';

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

@@ -21,11 +21,11 @@ import { STAGE_BEFORE, STAGE_SHOW } from './constants.js';
  */
 
 /**
- * @typedef {import("./typedef").Layer} PresenterRef
+ * @typedef {import("./typedef").PresenterRef} PresenterRef
  */
 
 /**
- * @typedef {import("./typedef").Layer} LoadController
+ * @typedef {import("./typedef").LoadController} LoadController
  */
 
 const Z_BACK = 0;
@@ -589,7 +589,7 @@ export class PresenterState {
           this.onBeforeListeners.delete(key);
         };
       },
-      onAfter: (callback) => {
+      onShow: (callback) => {
         const key = Symbol();
         this.onShowListeners.set(key, callback);
 

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

@@ -25,10 +25,6 @@ export type FadeOutTransition = {
     duration?: number;
     timing?: string;
 };
-export type ListenerParams = {
-    stage: string;
-    slideName: string;
-};
 export type LoadController = {
     /**
      * - Function to call when loading is complete
@@ -39,6 +35,12 @@ export type LoadController = {
      */
     cancel: () => void;
 };
+export type ListenerParams = {
+    stage: string;
+    slideName: string;
+};
+export type ListenerCallback = (params: ListenerParams) => () => void;
+export type UnregisterFn = () => void;
 export type PresenterRef = {
     /**
      * - Navigate to a slide by name
@@ -48,7 +50,14 @@ export type PresenterRef = {
      * - Get the current slide name
      */
     getCurrentSlideName: () => string;
-    onUpdate: (callback: any) => Function;
+    /**
+     *   Register listener that is called when a slide enters state 'before'
+     */
+    onBefore: (callback: ListenerCallback) => UnregisterFn;
+    /**
+     *   Register listener that is called when a slide enters state 'show'
+     */
+    onShow: (callback: ListenerCallback) => UnregisterFn;
 };
 export type Transition = CssTransition | FadeInTransition | FadeOutTransition;
 export type SlideData = {

package/dist/widgets/presenter/typedef.js

@@ -32,6 +32,12 @@
  * }} 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,
@@ -40,16 +46,21 @@
  */
 
 /**
- * @typedef {Object} LoadController
- * @property {() => void} loaded - Function to call when loading is complete
- * @property {() => void} cancel - Function to return to the previous slide
+ * @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)=>Function} onUpdate
+ * @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'
  */
 
 /**

package/package.json

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