refactor: expose a semantically sound getting serpenta context function

Writerside/topics/Configuration-Interface.md

@@ -7,16 +7,10 @@ All Serpenta components shall get data that shall be configurable from this cont
 ```html
 <!-- Component.svelte -->
 <script lang="ts">
-    import { getContext } from "svelte";
-    import type { FinalizedConfig } 
-        from "$lib/appShell/SerpentaConfig";
-    
-    const config = getContext<FinalizedConfig>("serpenta-config");
+    import { getSerpentaContext } from "$lib";
+
+    const context = getSerpentaContext();
 </script>
 ```
 
 The config itself has a describing interface:
-
-```Typescript
-const
-```

packages/serpenta/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delft-hyperloop/serpenta",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "description": "UI Component Library of Delft Hyperloop's Serpenta GUI Standard.",
   "keywords": [

packages/serpenta/src/lib/appShell/SerpentaConfig.ts

@@ -1,6 +1,7 @@
 import { writable, type Writable } from "svelte/store";
 import { ErrorStatus, PlotBuffer } from "$lib";
 import type { DataDistributor, WindowEngine, CommandInvocation } from "$lib";
+import { getContext } from "svelte";
 
 /**
  * Serpenta configuration object
@@ -23,7 +24,7 @@ export interface SerpentaConfig {
     };
 }
 
-export interface FinalizedConfig {
+export interface FinalizedContext {
     appWindow: any;
     pod_name: string;
 
@@ -41,7 +42,7 @@ export interface FinalizedConfig {
     };
 }
 
-export function defineConfig(config: SerpentaConfig): FinalizedConfig {
+export function defineConfig(config: SerpentaConfig): FinalizedContext {
     return {
         appWindow: config.appWindow,
         pod_name: config.pod_name,
@@ -60,3 +61,11 @@ export function defineConfig(config: SerpentaConfig): FinalizedConfig {
         }
     };
 }
+
+/**
+ * Get the Serpenta context from within the `<SerpentaShell>` base component.
+ * @note this will return null if not called within the serpenta shell.
+ */
+export function getSerpentaContext(): FinalizedContext {
+    return getContext<FinalizedContext>("serpenta-context");
+}

packages/serpenta/src/lib/appShell/SerpentaShell.svelte

@@ -3,10 +3,10 @@
     import { initializeStores, Modal, Toast } from "@skeletonlabs/skeleton";
     import { BottomBar, TitleBar } from "$lib";
     import { onDestroy, setContext } from "svelte";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import type { FinalizedContext } from "$lib/appShell/SerpentaConfig";
 
-    export let config: FinalizedConfig;
-    setContext<FinalizedConfig>("serpenta-config", config);
+    export let config: FinalizedContext;
+    setContext<FinalizedContext>("serpenta-context", config);
 
     config.grand_data_distributor.start(50);
 

packages/serpenta/src/lib/components/control/CommandButton.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { util } from "$lib";
-    import { getContext } from "svelte";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import { getSerpentaContext, util } from "$lib";
 
     export let className: string = "";
     export let cmd: string;
@@ -11,11 +9,11 @@
     export let errorCallback: (error: string) => void = () => {};
     export let textOverride: string = "";
 
-    const config = getContext<FinalizedConfig>("serpenta-config");
-    const commandInvoker = config.command_invocation;
+    const context = getSerpentaContext();
+    const commandInvoker = context.command_invocation;
 
     let send = async () => {
-        await commandInvoker.invokeCommand<void>(config.generic_command_name, { cmdName: cmd, val })
+        await commandInvoker.invokeCommand<void>(context.generic_command_name, { cmdName: cmd, val })
             .then(returned => {
                 console.log(`Command ${cmd} sent with val: ${val}`);
                 successCallback(returned);

packages/serpenta/src/lib/components/control/TauriCommandButton.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { util } from "$lib";
-    import { getContext } from "svelte";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import { getSerpentaContext, util } from "$lib";
 
     export let className: string = "";
     export let cmd: string;
@@ -11,8 +9,7 @@
     export let errorCallback: (error: string) => void = () => {};
     export let textOverride: string = "";
 
-    const config = getContext<FinalizedConfig>("serpenta-config");
-    const commandInvoker = config.command_invocation;
+    const commandInvoker = getSerpentaContext().command_invocation;
 
     export let send = async () => {
         console.log(`Sending command: ${cmd} with options ${options}`);

packages/serpenta/src/lib/components/control/ToggleCommandButton.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { getContext } from "svelte";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import { getSerpentaContext } from "$lib/appShell/SerpentaConfig";
 
     export let offCmd: string;
     export let onCmd: string;
@@ -11,8 +10,7 @@
     // for binding
     export let status: boolean = false;
 
-    const config = getContext<FinalizedConfig>("serpenta-config");
-    const commandInvoker = config.command_invocation;
+    const commandInvoker = getSerpentaContext().command_invocation;
 
     const toggleOff = () => {
         commandInvoker.invokeCommand("send_command", { cmdName: offCmd, val }).then(r => {

packages/serpenta/src/lib/components/data/Chart.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-    import { getContext, onDestroy, onMount } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import "uplot/dist/uPlot.min.css";
-    import { PlotBuffer, PopupIcon } from "$lib";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import { getSerpentaContext, PlotBuffer, PopupIcon } from "$lib";
 
-    const config: FinalizedConfig = getContext<FinalizedConfig>("serpenta-config");
-    const grandCharter = config.grand_charter;
-    const windowEngine = config.window_engine;
+    const context = getSerpentaContext();
+    const grandCharter = context.grand_charter;
+    const windowEngine = context.window_engine;
 
     function popoutWindow() {
         windowEngine.spawnWindow(title, `/view/chart/${title}`);

packages/serpenta/src/lib/components/data/Store.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { getContext } from "svelte";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import { getSerpentaContext } from "$lib/appShell/SerpentaConfig";
     import { type DataDistributor } from "$lib";
 
-    const config: FinalizedConfig = getContext<FinalizedConfig>("serpenta-config");
-    const latestTimestamp = config.latest_timestamp;
-    const gdd: DataDistributor = config.grand_data_distributor;
+    const context = getSerpentaContext();
+    const latestTimestamp = context.latest_timestamp;
+    const gdd: DataDistributor = context.grand_data_distributor;
 
     const STALE_DATA_TICKS = 10_000;
     export let datatype: string;

packages/serpenta/src/lib/components/graphic/FSM.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-    import { getContext, onDestroy, onMount } from "svelte";
-    import { type DataDistributor } from "$lib";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
+    import { onDestroy, onMount } from "svelte";
+    import { getSerpentaContext } from "$lib";
 
-    const config: FinalizedConfig = getContext<FinalizedConfig>("serpenta-config");
-    const gdd: DataDistributor = config.grand_data_distributor;
+    const gdd = getSerpentaContext().grand_data_distributor;
 
     let boot_state: SVGGElement;
     let est_con_state: SVGGElement;

packages/serpenta/src/lib/components/page/BottomBar.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-    import { getContext, onMount } from "svelte";
-    import { ErrorStatus, type DataDistributor } from "$lib";
+    import { onMount } from "svelte";
+    import { ErrorStatus, type DataDistributor, getSerpentaContext } from "$lib";
     import type { Writable } from "svelte/store";
-    import type { FinalizedConfig } from "$lib/appShell/SerpentaConfig";
 
-    const config: FinalizedConfig = getContext<FinalizedConfig>("serpenta-config");
-    const gdd: DataDistributor = config.grand_data_distributor;
-    const bigErrorStatus: Writable<ErrorStatus> = config.big_error;
-    const fsmStateName: string = config.stores.fsm_name;
-    const podName: string = config.pod_name;
+    const context = getSerpentaContext();
+    const gdd: DataDistributor = context.grand_data_distributor;
+    const bigErrorStatus: Writable<ErrorStatus> = context.big_error;
+    const fsmStateName: string = context.stores.fsm_name;
+    const podName: string = context.pod_name;
 
     let time = new Date().toLocaleTimeString([], {
         hour: "2-digit",

packages/serpenta/src/lib/index.ts

@@ -21,7 +21,7 @@ import { PlotBuffer, StrokePresets } from "$lib/PlotBuffer";
 import type { DataDistributor } from "$lib/middleware/DataDistributor";
 import type { WindowEngine } from "$lib/middleware/WindowControl";
 import util from "$lib/util";
-import { defineConfig, type SerpentaConfig } from "$lib/appShell/SerpentaConfig";
+import { defineConfig, getSerpentaContext, type SerpentaConfig } from "$lib/appShell/SerpentaConfig";
 import type { CommandInvocation } from "./middleware/CommandInvocation";
 
 /**
@@ -56,6 +56,7 @@ export {
     util,
     SerpentaShell,
     defineConfig,
+    getSerpentaContext,
     StrokePresets,
     PopupIcon
 };