@hkdigital/lib-sveltekit 0.0.31

package/README.md

@@ -0,0 +1,104 @@
+# HKdigital's lib Sveltekit
+
+Base library that we use to power up our Sveltekit projects
+
+This is a library for [SvelteKit](https://svelte.dev/) projects. 
+It contains common code and components that we use to create our projects. 
+
+## Status
+
+**EARLY DEVELOPMENT RELEASE**
+This package is incomplete and not fully tested.
+Do not use in production environments yet.
+
+## A note about tailwindcss
+
+Components in this package use [tailwindcss](https://tailwindcss.com/).
+
+To compile tailwind classes inside this package, you must add the package location to your tailwindcss plugin configuration (instructions below).
+
+## Using the library
+
+### Install
+
+The library can be installed as a normal NPM library.
+
+```bash
+pnpm add @hkdigital/lib-sveltekit
+```
+
+### Update
+
+```bash
+ncu "@hkdigital/*" -u && pnpm install
+```
+
+### Import JS & Svelte
+
+All exports are in subfolders.
+
+For example to import a constant from `constants/regexp/index.js`
+
+```svelte
+import { CHAR } from '@hkdigital/lib-sveltekit-test/constants/regexp';
+```
+
+### import CSS
+
+Vite should include postcss-import, but the only solution to get it working for now is to use a relative path to the node_modules folder.
+
+For example:
+
+```css
+/* src/app.css */
+@import '../node_modules/@hkdigital/lib-sveltekit-test/dist/css/utilities.postcss';
+```
+
+### Enable tailwind processing
+
+Allow the tailwind CSS processor to work on the library inside node_modules
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    './node_modules/@hkdigital/**/*.{html,js,svelte,ts}',
+    './src/**/*.{html,js,svelte,ts}',
+```
+
+## Building the showcase app
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Developing
+
+To develop this library, clone the repository and install the dependencies, then start the development server of the test runners. Checkout the [package.json](./package.json) file for more details.
+
+Everything inside `src/lib` is part of the library, everything inside `src/routes` is the showcase app of this library.
+
+## Publishing
+
+The name of this library is `@hkdigital/lib-sveltekit` and it is published on [NPM](https://npmjs.com). You need NPM credentials to publish in the scope `@hkdigital`. 
+
+### Contribute
+If your wish to contribute to this library, please contact us [HKdigital](https://hkdigital.nl/contact). Alternatively, the license permits you to fork the library and publish under an alternative name. Change the package name in [package.json](./package.json) to do so.
+
+```bash
+npm login
+npm version patch
+npm publish --access public
+```

package/dist/classes/index.d.ts

@@ -0,0 +1,2 @@
+export * as streams from "./streams/index.js";
+export * as stores from "./stores/index.js";

package/dist/classes/index.js

@@ -0,0 +1,2 @@
+export * as streams from './streams/index.js';
+export * as stores from './stores/index.js';

package/dist/classes/stores/SubscribersCount.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Class that can be used to add a `SubscribersCount` store to classes
+ * or other objects
+ */
+export default class SubscribersCount {
+    /**
+     * Create a writable store with added 'subscribeCount' functionality
+     */
+    static writable(...args: any[]): any;
+    /**
+     * Add subscriber count functionality to an existing store by wrapping
+     * the store with a Proxy
+     *
+     * @template T;
+     *
+     * @param {import('svelte/store').Writable<T>} store
+     */
+    static wrap<T>(store: import("svelte/store").Writable<T>): any;
+    increment(): void;
+    decrement(): void;
+    /**
+     * Subscribe to `SubscribersCount` store
+     *
+     * @param {(value:number)=>void} fn
+     *
+     * @returns {()=>void} unsubscribe
+     */
+    subscribe(fn: (value: number) => void): () => void;
+    /**
+     * Subscribe to `SubscribersCount` store and receive an update once if the
+     * count is zero.
+     *
+     * @param {(value:number)=>void} fn
+     *
+     * @returns {()=>void} unsubscribe
+     */
+    onceEmpty(fn: (value: number) => void): () => void;
+    #private;
+}

package/dist/classes/stores/SubscribersCount.js

@@ -0,0 +1,107 @@
+import { writable, get } from 'svelte/store';
+
+/**
+ * Class that can be used to add a `SubscribersCount` store to classes
+ * or other objects
+ */
+export default class SubscribersCount {
+	#count;
+
+	constructor() {
+		this.#count = writable(0);
+	}
+
+	increment() {
+		this.#count.update((value) => value + 1);
+	}
+
+	decrement() {
+		this.#count.update((value) => value - 1);
+	}
+
+	/**
+	 * Subscribe to `SubscribersCount` store
+	 *
+	 * @param {(value:number)=>void} fn
+	 *
+	 * @returns {()=>void} unsubscribe
+	 */
+	subscribe(fn) {
+		return this.#count.subscribe(fn);
+	}
+
+	/**
+	 * Subscribe to `SubscribersCount` store and receive an update once if the
+	 * count is zero.
+	 *
+	 * @param {(value:number)=>void} fn
+	 *
+	 * @returns {()=>void} unsubscribe
+	 */
+	onceEmpty(fn) {
+		let unsubscribe = this.#count.subscribe((value) => {
+			if (value === 0) {
+				unsubscribe();
+				fn(value);
+			}
+		});
+
+		return unsubscribe;
+	}
+
+	/**
+	 * Create a writable store with added 'subscribeCount' functionality
+	 */
+	static writable() {
+		const store = writable(...arguments);
+
+		return SubscribersCount.wrap(store);
+	}
+
+	/**
+	 * Add subscriber count functionality to an existing store by wrapping
+	 * the store with a Proxy
+	 *
+	 * @template T;
+	 *
+	 * @param {import('svelte/store').Writable<T>} store
+	 */
+	static wrap(store) {
+		// expect.store( store );
+
+		const counter = new SubscribersCount();
+
+		const handler = {
+			/**
+			 * @param {*} target
+			 * @param {string} prop
+			 */
+			get(target, prop) {
+				switch (prop) {
+					case 'subscribe': {
+						return /* subscribe */ function () {
+							counter.increment();
+							const unsubscribe = target[prop](...arguments);
+
+							return /* unsubscribe */ () => {
+								counter.decrement();
+								unsubscribe();
+							};
+						};
+					}
+
+					case 'value':
+						return get(store);
+
+					case 'subscribersCount':
+						return counter;
+				}
+
+				return Reflect.get(target, prop);
+				// return target[prop];
+			}
+		};
+
+		return new Proxy(store, handler);
+	}
+}

package/dist/classes/stores/index.d.ts

@@ -0,0 +1 @@
+export { default as SubscribersCount } from "./SubscribersCount.js";

package/dist/classes/stores/index.js

@@ -0,0 +1 @@
+export { default as SubscribersCount } from './SubscribersCount.js';

package/dist/classes/streams/LogTransformStream.d.ts

@@ -0,0 +1,4 @@
+export default class LogTransformStream extends TransformStream<any, any> {
+    constructor();
+    start(): void;
+}

package/dist/classes/streams/LogTransformStream.js

@@ -0,0 +1,19 @@
+export default class LogTransformStream extends TransformStream {
+	constructor() {
+		const transformer = {
+			/**
+			 * Log the chunk and enqueue the unchanged chunk
+			 *
+			 * @param {*} chunk
+			 * @param {*} controller
+			 */
+			transform: (chunk, controller) => {
+				console.log('log', chunk);
+				controller.enqueue(chunk);
+			}
+		};
+
+		super(transformer);
+	}
+	start() {}
+}

package/dist/classes/streams/ServerEventsStore.d.ts

@@ -0,0 +1,22 @@
+export default class ServerEventsStore {
+    /**
+     * @param {object} _
+     * @param {Zods.AbsOrRelUrl} _.url
+     */
+    constructor({ url }: {
+        url: Zods.AbsOrRelUrl;
+    });
+    /** @type {SubscribersCount} */
+    subscribersCount: SubscribersCount;
+    /**
+     * Subscribe to Server Send Events
+     *
+     * @param {import("svelte/store").Subscriber<object|null>} fn
+     *
+     * @returns {()=>void} unsubscribe
+     */
+    subscribe(fn: import("svelte/store").Subscriber<object | null>): () => void;
+    #private;
+}
+import SubscribersCount from '../stores/SubscribersCount.js';
+import * as Zods from '../../zod/all.js';

package/dist/classes/streams/ServerEventsStore.js

@@ -0,0 +1,110 @@
+import { writable } from 'svelte/store';
+
+// eslint-disable-next-line no-unused-vars
+import * as Zods from '../../zod/all.js';
+
+import SubscribersCount from '../stores/SubscribersCount.js';
+
+// > Class
+
+export default class ServerEventsStore {
+	/** @type {Zods.AbsOrRelUrl} */
+	#url;
+
+	/** @type {import("svelte/store").Writable<object|null>} */
+	#store;
+
+	/** @type {boolean} */
+	#starting = false;
+
+	/** @type {ReadableStream<Uint8Array>|null} */
+	#stream = null;
+
+	/** @type {SubscribersCount} */
+	subscribersCount;
+
+	/**
+	 * @param {object} _
+	 * @param {Zods.AbsOrRelUrl} _.url
+	 */
+	constructor({ url }) {
+		this.#url = Zods.AbsOrRelUrl.parse(url);
+
+		this.#store = writable(null);
+
+		this.subscribersCount = new SubscribersCount();
+	}
+
+	/**
+	 * Subscribe to Server Send Events
+	 *
+	 * @param {import("svelte/store").Subscriber<object|null>} fn
+	 *
+	 * @returns {()=>void} unsubscribe
+	 */
+	subscribe(fn) {
+		this.subscribersCount.increment();
+
+		const unsubscribe = this.#store?.subscribe(fn);
+
+		this.#tryStartStream();
+
+		return () => {
+			this.subscribersCount.decrement();
+			unsubscribe?.();
+		};
+	}
+
+	async #tryStartStream() {
+		if (this.#stream || this.#starting) {
+			return;
+		}
+
+		try {
+			this.#starting = true;
+
+			const aborter = new AbortController();
+			const signal = aborter.signal;
+
+			const response = await fetch(this.#url, { signal });
+
+			const stream = (this.#stream = response.body);
+
+			this.#starting = false;
+
+			const reader =
+				// @ts-ignore
+				stream.pipeThrough(new TextDecoderStream()).getReader();
+
+			// const textDecoder = new TextDecoder('utf-8');
+
+			while (!signal.aborted) {
+				const { value, done } = await reader.read();
+
+				if (undefined === value) {
+					break;
+				}
+
+				const obj = JSON.parse(value);
+				// const obj = JSON.parse(textDecoder.decode(value));
+
+				if (!done) {
+					this.#store.set(obj);
+				}
+
+				// console.log({ ...obj, done });
+
+				if (done) {
+					break;
+				}
+			} // end for
+		} catch (e) {
+			this.#starting = false;
+			this.#stream = null;
+
+			if (e instanceof Error && e.name !== 'AbortError') {
+				throw e;
+			}
+		}
+	}
+}

package/dist/classes/streams/TimeStampSource.d.ts

@@ -0,0 +1,13 @@
+export default class TimestampSource {
+    /**
+     * Stream start function
+     *
+     * @param {ReadableStreamDefaultController} ctr
+     */
+    start(ctr: ReadableStreamDefaultController): void;
+    /**
+     * Stop generation of new stream output
+     */
+    cancel(): void;
+    #private;
+}

package/dist/classes/streams/TimeStampSource.js

@@ -0,0 +1,26 @@
+export default class TimestampSource {
+  /** @type {number|NodeJS.Timeout|undefined} */
+  #interval;
+
+  constructor() {}
+
+  /**
+   * Stream start function
+   *
+   * @param {ReadableStreamDefaultController} ctr
+   */
+  start(ctr) {
+    ctr.enqueue(JSON.stringify({ now: Date.now() }));
+
+    this.#interval = setInterval(() => {
+      return ctr.enqueue(JSON.stringify({ now: Date.now() }));
+    }, 1000);
+  }
+
+  /**
+   * Stop generation of new stream output
+   */
+  cancel() {
+    clearInterval(this.#interval);
+  }
+}

package/dist/classes/streams/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LogTransformStream } from "./LogTransformStream.js";
+export { default as ServerEventsStore } from "./ServerEventsStore.js";
+export { default as TimeStampSource } from "./TimeStampSource.js";

package/dist/classes/streams/index.js

@@ -0,0 +1,3 @@
+export { default as LogTransformStream } from './LogTransformStream.js';
+export { default as ServerEventsStore } from './ServerEventsStore.js';
+export { default as TimeStampSource } from './TimeStampSource.js';

package/dist/components/area/HkArea.svelte

@@ -0,0 +1,49 @@
+<script>
+  /**
+   * Area component
+   * An area is actually a DIV that can be styled and can contain content
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: * }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+
+    // Snippets
+    children,
+
+    // DOM Element
+    domElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-area
+  class="{base} {bg} {padding} {margin} {classes}"
+  bind:this={domElem}
+  {style}
+  {...attrs}
+>
+  {@render children()}
+</div>

package/dist/components/area/HkArea.svelte.d.ts

@@ -0,0 +1,12 @@
+export default HkArea;
+declare const HkArea: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    style?: string;
+    children: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "domElem">;

package/dist/components/area/HkGridArea.svelte

@@ -0,0 +1,77 @@
+<script>
+  /**
+   * Grid area component
+   * This component contains a DIV that has display: grid set. It is
+   * wrapped in a box which makes it possible to add box attributes
+   * such as margins.
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  import HkArea from './HkArea.svelte';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   boxBase?: string,
+   *   boxBg?: string,
+   *   boxPadding?: string,
+   *   boxMargin?: string,
+   *   boxClasses?: string,
+   *   boxAttrs?: { [attr: string]: * },
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: * }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+    boxBase,
+    boxBg,
+    boxPadding,
+    boxMargin,
+    boxClasses,
+    boxAttrs,
+
+    // Snippets
+    children,
+
+    // DOM Element's
+    domElem = $bindable(),
+    boxDomElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-grid-area-box
+  class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
+  {...boxAttrs}
+  bind:this={boxDomElem}
+>
+  <HkArea
+    data-hk-grid-area
+    base="grid {base}"
+    bind:domElem
+    {bg}
+    {padding}
+    {margin}
+    {classes}
+    {style}
+    {...attrs}
+  >
+    {@render children()}
+  </HkArea>
+</div>

package/dist/components/area/HkGridArea.svelte.d.ts

@@ -0,0 +1,20 @@
+export default HkGridArea;
+declare const HkGridArea: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    style?: string;
+    boxBase?: string;
+    boxBg?: string;
+    boxPadding?: string;
+    boxMargin?: string;
+    boxClasses?: string;
+    boxAttrs?: {
+        [attr: string]: any;
+    };
+    children: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "domElem" | "boxDomElem">;

package/dist/components/area/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HkArea } from "./HkArea.svelte";
+export { default as HkGridArea } from "./HkGridArea.svelte";

package/dist/components/area/index.js

@@ -0,0 +1,2 @@
+export { default as HkArea } from './HkArea.svelte';
+export { default as HkGridArea } from './HkGridArea.svelte';