@hkdigital/lib-sveltekit 0.1.6 → 0.1.8

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

@@ -1,30 +1,30 @@
-import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
-
-import { OCTET_STREAM } from '../../../constants/mime/application.js';
-
-const BASE64_DATA =
-  'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
-
-/**
- * Create a response value that can be used by a mocked
- * fetch function
- *
- * @returns {Response}
- */
-export function createDataResponse(/* data , options */) {
-  const binaryString = atob(BASE64_DATA);
-  const bytes = new Uint8Array(binaryString.length);
-
-  for (let i = 0; i < binaryString.length; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-
-  const response = new Response(bytes, {
-    headers: new Headers({
-      [CONTENT_TYPE]: OCTET_STREAM,
-      [CONTENT_LENGTH]: String(bytes.length)
-    })
-  });
-
-  return response;
-}
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
+
+import { OCTET_STREAM } from '../../../constants/mime/application.js';
+
+const BASE64_DATA =
+  'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+/**
+ * Create a response value that can be used by a mocked
+ * fetch function
+ *
+ * @returns {Response}
+ */
+export function createDataResponse(/* data , options */) {
+  const binaryString = atob(BASE64_DATA);
+  const bytes = new Uint8Array(binaryString.length);
+
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  const response = new Response(bytes, {
+    headers: new Headers({
+      [CONTENT_TYPE]: OCTET_STREAM,
+      [CONTENT_LENGTH]: String(bytes.length)
+    })
+  });
+
+  return response;
+}

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

@@ -1,8 +1,8 @@
-/**
- * @typedef {Object} LoadingProgress
- * @property {number} bytesLoaded
- * @property {number} size
- * @property {boolean} loaded
- */
-
-export default {};
+/**
+ * @typedef {Object} LoadingProgress
+ * @property {number} bytesLoaded
+ * @property {number} size
+ * @property {boolean} loaded
+ */
+
+export default {};

package/dist/components/area/HkArea.svelte

@@ -1,49 +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]: any }}
-   */
-  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>
+<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]: any }}
+   */
+  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

@@ -1,4 +1,18 @@
 export default HkArea;
+type HkArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkArea: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/area/HkGridArea.svelte

@@ -1,77 +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]: any }}
-   */
-  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>
+<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]: any }}
+   */
+  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

@@ -1,4 +1,26 @@
 export default HkGridArea;
+type HkGridArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        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: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkGridArea: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/area/index.js

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

package/dist/components/boxes/game-box/GameBox.svelte

@@ -1,112 +1,112 @@
-<script>
-  import {
-    getGameWidthOnLandscape,
-    getGameWidthOnPortrait
-  } from './gamebox.util.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   aspectOnLandscape? :number,
-   *   aspectOnPortrait? :number,
-   *   onLandscape?: import('svelte').Snippet,
-   *   onPortrait?: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  const {
-    // > Style
-    base,
-    bg,
-    classes,
-    style,
-
-    // > Functional
-    aspectOnLandscape,
-    aspectOnPortrait,
-
-    // >Snippets
-    snippetLandscape,
-    snippetPortrait
-  } = $props();
-
-  // > Game width and height
-
-  let windowWidth = $state();
-  let windowHeight = $state();
-
-  let gameWidth = $state();
-  let gameHeight = $state();
-
-  let isLandscape = $derived(gameWidth > gameHeight);
-
-  $effect(() => {
-    // Determine game width and height from
-    // window dimensions and desired game aspect
-
-    let gameAspect;
-
-    if (windowWidth > windowHeight) {
-      gameWidth = getGameWidthOnLandscape({
-        windowWidth,
-        windowHeight,
-        aspectOnLandscape
-      });
-
-      gameAspect = aspectOnLandscape;
-    } else {
-      gameWidth = getGameWidthOnPortrait({
-        windowWidth,
-        windowHeight,
-        aspectOnPortrait
-      });
-
-      gameAspect = aspectOnPortrait;
-    }
-
-    if (gameAspect) {
-      gameHeight = gameWidth / gameAspect;
-    } else {
-      gameHeight = windowHeight;
-    }
-  });
-
-  // $inspect({ windowWidth, windowHeight, gameWidth, gameHeight, isLandscape });
-
-  // $effect(() => {
-  //   console.log({
-  //     windowWidth,
-  //     windowHeight,
-  //     gameWidth,
-  //     gameHeight,
-  //     isLandscape
-  //   });
-  // });
-</script>
-
-<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
-
-{#if gameHeight}
-  <!-- <div
-    data-boxes="game-box"
-    class="{base} {bg} {classes}"
-    style="width: {gameWidth}px; height: {gameHeight}px;--game-width={gameWidth};--game-height={gameHeight}; {style}" -->
-
-  <div
-    data-boxes="game-box"
-    class="{base} {bg} {classes}"
-    style:width="{gameWidth}px"
-    style:height="{gameHeight}px"
-    style:--game-width={gameWidth}
-    style:--game-height={gameHeight}
-    {style}
-  >
-    {#if isLandscape}
-      {@render snippetLandscape()}
-    {:else}
-      {@render snippetPortrait()}
-    {/if}
-  </div>
-{/if}
+<script>
+  import {
+    getGameWidthOnLandscape,
+    getGameWidthOnPortrait
+  } from './gamebox.util.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   aspectOnLandscape? :number,
+   *   aspectOnPortrait? :number,
+   *   onLandscape?: import('svelte').Snippet,
+   *   onPortrait?: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  const {
+    // > Style
+    base,
+    bg,
+    classes,
+    style,
+
+    // > Functional
+    aspectOnLandscape,
+    aspectOnPortrait,
+
+    // >Snippets
+    snippetLandscape,
+    snippetPortrait
+  } = $props();
+
+  // > Game width and height
+
+  let windowWidth = $state();
+  let windowHeight = $state();
+
+  let gameWidth = $state();
+  let gameHeight = $state();
+
+  let isLandscape = $derived(gameWidth > gameHeight);
+
+  $effect(() => {
+    // Determine game width and height from
+    // window dimensions and desired game aspect
+
+    let gameAspect;
+
+    if (windowWidth > windowHeight) {
+      gameWidth = getGameWidthOnLandscape({
+        windowWidth,
+        windowHeight,
+        aspectOnLandscape
+      });
+
+      gameAspect = aspectOnLandscape;
+    } else {
+      gameWidth = getGameWidthOnPortrait({
+        windowWidth,
+        windowHeight,
+        aspectOnPortrait
+      });
+
+      gameAspect = aspectOnPortrait;
+    }
+
+    if (gameAspect) {
+      gameHeight = gameWidth / gameAspect;
+    } else {
+      gameHeight = windowHeight;
+    }
+  });
+
+  // $inspect({ windowWidth, windowHeight, gameWidth, gameHeight, isLandscape });
+
+  // $effect(() => {
+  //   console.log({
+  //     windowWidth,
+  //     windowHeight,
+  //     gameWidth,
+  //     gameHeight,
+  //     isLandscape
+  //   });
+  // });
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
+
+{#if gameHeight}
+  <!-- <div
+    data-boxes="game-box"
+    class="{base} {bg} {classes}"
+    style="width: {gameWidth}px; height: {gameHeight}px;--game-width={gameWidth};--game-height={gameHeight}; {style}" -->
+
+  <div
+    data-boxes="game-box"
+    class="{base} {bg} {classes}"
+    style:width="{gameWidth}px"
+    style:height="{gameHeight}px"
+    style:--game-width={gameWidth}
+    style:--game-height={gameHeight}
+    {style}
+  >
+    {#if isLandscape}
+      {@render snippetLandscape()}
+    {:else}
+      {@render snippetPortrait()}
+    {/if}
+  </div>
+{/if}

package/dist/components/boxes/game-box/GameBox.svelte.d.ts

@@ -1,4 +1,19 @@
 export default GameBox;
+type GameBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        style?: string;
+        aspectOnLandscape?: number;
+        aspectOnPortrait?: number;
+        onLandscape?: Snippet<[]>;
+        onPortrait?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const GameBox: import("svelte").Component<{
     base?: string;
     bg?: string;