move types to .d.ts file

.vscode/settings.json

@@ -1,9 +1,4 @@
 {
     "deno.enable": true,
-    "deno.unstable": true,
-    "deno.codeLens.testArgs": [
-        "--allow-all",
-        "--no-check",
-        "--no-lock"
-    ]
+    "deno.unstable": true
 }

deno.json

@@ -1,8 +1,9 @@
 {
+    "compilerOptions": {"types":["store.d.ts"]},
     "tasks":
     {
         "fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
-        "test": "deno test --no-lock --watch test/store_test.js",
-        "test-debug": "deno test --no-lock --inspect-brk test/store_test.js"
+        "test": "deno test --no-lock --watch store.test.js",
+        "test-debug": "deno test --no-lock --inspect-brk store.test.js"
     }
 }

src/app.js

@@ -1,100 +1,54 @@
-//@ts-check
-import * as TW   from "https://esm.sh/@twind/core@1.0.1";
-import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
-import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
-
+import * as TW from "./twind.js";
 import * as UI from "./ui.js";
 import { Reducer, Initial } from "./store.js";
 import React from "https://esm.sh/preact@10.11.3/compat";
 import {html} from "https://esm.sh/htm@3.1.1/preact";
 
-
-/** @type {TW.TwindConfig} */
-const Configure = {
-    theme:
-    {
-        extend:
-        {
-            keyframes:
-            {
-                flash:
-                {
-                      '0%': { opacity: 1.0 },
-                     '50%': { opacity: 0.3 },
-                    '100%': { opacity: 0.0 }
-                },
-                pulse:
-                {
-                      "0%": { opacity: 0.0 },
-                     "10%": { opacity: 0.0 },
-                     "12%": { opacity: 1.0 },
-                     "22%": { opacity: 1.0 },
-                     "42%": { opacity: 0.2 },
-                    "100%": { opacity: 0.0 }
-                }
-            },
-            animation:
-            {
-                flash: "flash 1s both"
-            },
-            strokeWidth:
-            {
-                "bold": "3px"
-            }
-        }
-    },
-    rules:
-    [
-        [
-            "stroke-draw",
-            {
-                "vector-effect": "non-scaling-stroke",
-                "stroke-linecap": "square",
-                "fill": "none"
-            },
-        ],
-        [
-            'shadow-glow-(.*)',
-            (match, context)=>
-            {
-                return { "box-shadow": `0px 0px 5px 2px ${context.theme().colors[match[1]]}` };
-            }
-        ],
-        [
-            'shadow-sss',
-            {
-                "box-shadow": "rgb(0 0 0 / 50%) 0px -3px 2px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
-            }
-        ]
-    ],
-    presets: [TWPreTail(), TWPreAuto()]
-};
-const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
-const ShadowDiv = document.createElement("div");
-const ShadowCSS = document.createElement("style");
-ShadowDOM.append(ShadowCSS);
-ShadowDOM.append(ShadowDiv);
-TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
+/** @type {preact.Context<Binding>} */
+const StoreContext = React.createContext([Initial, (_a)=>{}]);
 
 
-const StoreContext = React.createContext(null);
+/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
 const StoreProvider =(props)=>
 {
     const reducer = React.useReducer(Reducer, Initial);
     return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
 }
-const StoreConsumer =()=> React.useContext(StoreContext);
 
+/** @typedef {[state:Store.State, dispatch:(inAction:Store.Action)=>void]} Binding */
+/** @type {()=>Binding} */
+const StoreConsumer =()=> React.useContext(StoreContext);
 
 const Deep =()=>
 {
-    const [State, Dispatch] = React.useContext(StoreContext);
+    const [State, Dispatch] = StoreConsumer();
     return html`
     <${UI.Button} onClick=${()=>Dispatch({Name:"Stim", Data:1})} disabled=${State.Stim.Value == State.Stim.Max}>
         ${State.Stim.Value}
     <//>`;
 }
 
+const Audiogram =()=>
+{
+    const [State, Dispatch] = StoreConsumer();
+    return html`
+    <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
+        ${State.Draw}
+        <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
+        <${UI.Mark} right=${false}/>
+        <line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
+    </svg>
+    `;
+}
+
+const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
+const ShadowDiv = document.createElement("div");
+const ShadowCSS = document.createElement("style");
+ShadowDOM.append(ShadowCSS);
+ShadowDOM.append(ShadowDiv);
+
+TW.Init(ShadowCSS, ShadowDiv);
+
 React.render(html`
     <${StoreProvider}>
         <${UI.Button} icon="+">hey!<//>

src/store.js

@@ -1,8 +1,5 @@
-//@ts-check
-
 const size = 1/6;
-/** @typedef {[frequency:number, position:number, normal:boolean]} ColumnMapping  */
-/** @type {Array<ColumnMapping>} */
+/** @type {Array<Store.ColumnMapping>} */
 export const ColumnMapping = [
     [ 125, size*0.0, true ],
     [ 250, size*1.0, true ],
@@ -14,7 +11,7 @@ export const ColumnMapping = [
     [6000, size*5.5, false],
     [8000, size*6.0, true ]
 ];
-/** @type {(inFrequency:number)=>ColumnMapping|false} */
+/** @type {(inFrequency:number)=>Store.ColumnMapping|false} */
 export const ColumnLookup =(inFrequency)=>
 {
     for(let i=0; i<ColumnMapping.length; i++)
@@ -26,19 +23,13 @@ export const ColumnLookup =(inFrequency)=>
 };
 
 
-/** @type {(freq:TestFrequency, chan:number, user:boolean)=>TestFrequencySample|undefined} */
-export const MarkGet =(freq, chan, user)=> freq[/** @type {"UserL"|"UserR"|"TestL"|"TestR"} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
+/** @type {(freq:Store.TestFrequency, chan:number, user:boolean)=>Store.TestFrequencySample|undefined} */
+export const MarkGet =(freq, chan, user)=> freq[/** @type {Store.PlotKey} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
 
-/** @type {(freq:TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>TestFrequencySample|undefined} */
+/** @type {(freq:Store.TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>Store.TestFrequencySample|undefined} */
 export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
 
-/** @typedef {{Min:number, Max:number, Value:number, Step:number}} Range */
-/** @typedef {{Stim:number, Resp:boolean}} TestFrequencySample */
-/** @typedef {{Hz:number, TestL:TestFrequencySample, TestR:TestFrequencySample, UserL?:TestFrequencySample, UserR?:TestFrequencySample}} TestFrequency */
-/** @typedef {{Name:string, Plot:Array<TestFrequency>}} Test */
-/** @typedef {{Test?:Test, Freq?:TestFrequency, Mark?:TestFrequencySample}} Context */
-/** @typedef {{Chan:Range, Freq:Range, Stim:Range, Live:Context, Draw:{UserL:DrawGroup, UserR:DrawGroup, TestL:DrawGroup, TestR:DrawGroup}, Tests:Array<Test>}} State */
-/** @type {State} */
+/** @type {Store.State} */
 export const Initial =
 {
     Chan: { Min:0,   Max:1,   Value:0,  Step:1 },
@@ -69,15 +60,7 @@ export const Initial =
     ]
 };
 
-/** @typedef {{Name:"Mark", Data:boolean|null}} ActionMark */
-/** @typedef {{Name:"Test", Data:number}} ActionTest */
-/** @typedef {{Name:"Chan", Data:number}} ActionChan */
-/** @typedef {{Name:"Freq", Data:number}} ActionFreq */
-/** @typedef {{Name:"Stim", Data:number}} ActionStim */
-/** @typedef {ActionMark|ActionTest|ActionChan|ActionFreq|ActionStim} Action */
-/** @typedef {(inState:State, inAction:Action)=>State} Reducer */
-/** @typedef {(inState:State)=>boolean} SelectionUpdater */
-/** @type {Record<string, SelectionUpdater>} */
+/** @type {Record<string, Store.ContextUpdater>} */
 const Update =
 {
     Freq(inState)
@@ -111,19 +94,16 @@ const Update =
     }
 };
 
-/** @typedef {{X:number, Y:number, Mark:TestFrequencySample}} DrawPoint */
-/** @typedef {{Points:Array<DrawPoint>, Paths:Array<Array<DrawPoint>>}} DrawGroup */
-/** @typedef {{Left:DrawGroup, Right:DrawGroup}} DrawChart */
-/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */
-/** @type {(inTest:Test, inChan:number, inStim:Range, inIsUser:boolean)=>DrawGroup} */
+
+/** @type {(inTest:Store.Test, inChan:number, inStim:Range, inIsUser:boolean)=>Store.DrawGroup} */
 export function Congtiguous(inTest, inChan, inStim, inIsUser)
 {
-    /** @type {DrawGroup} */
+    /** @type {Store.DrawGroup} */
     const output = {Points:[], Paths:[]};
 
     let plot;
     let valid = false;
-    /** @type {Array<DrawPoint>} */
+    /** @type {Array<Store.DrawPoint>} */
     let segment = [];
     for(let i=0; i<inTest.Plot.length; i++)
     {
@@ -134,7 +114,7 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
             const lookup = ColumnLookup(plot.Hz);
             if(lookup)
             {
-                /** @type {DrawPoint} */
+                /** @type {Store.DrawPoint} */
                 const point = {
                     X: lookup[1]*100,
                     Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100,
@@ -163,7 +143,7 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
 }
 
 
-/** @type {Reducer} */
+/** @type {Store.Reducer} */
 export function Reducer(inState, inAction)
 {
     const clone = {...inState};
@@ -207,31 +187,3 @@ export function Reducer(inState, inAction)
 
     return clone;
 }
-
-/*
-const minified =
-[
-    1,
-    [
-        [20, 30, 50, 40, 60, 80],[20, 30, 50, 40, 60, 80]
-    ]
-];
-const Expand =(inMin)=>
-{
-    const outTests = [];
-    const inFreq = inMin[0];
-    for(let i=1; i<inMin.length; i++)
-    {
-        let inTest = inMin[i];
-        let inTestName = inTest[0];
-
-        const outTest = {
-            Name:inTest[0],
-            Plot:[]
-        };
-        outTests.push(outTest);
-        const outFreq = {Hz:0, TestL:{Stim:0, Resp:true}, TestR:{Stim:0, Resp:true}, UserL:undefined, UserR:undefined};
-
-    }
-}
-*/

src/twind.js

@@ -0,0 +1,70 @@
+import * as TW   from "https://esm.sh/@twind/core@1.0.1";
+import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
+import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
+
+/** @type {TW.TwindConfig} */
+export const Configure = {
+    theme:
+    {
+        extend:
+        {
+            keyframes:
+            {
+                flash:
+                {
+                      '0%': { opacity: 1.0 },
+                     '50%': { opacity: 0.3 },
+                    '100%': { opacity: 0.0 }
+                },
+                pulse:
+                {
+                      "0%": { opacity: 0.0 },
+                     "10%": { opacity: 0.0 },
+                     "12%": { opacity: 1.0 },
+                     "22%": { opacity: 1.0 },
+                     "42%": { opacity: 0.2 },
+                    "100%": { opacity: 0.0 }
+                }
+            },
+            animation:
+            {
+                flash: "flash 1s both"
+            },
+            strokeWidth:
+            {
+                "bold": "3px"
+            }
+        }
+    },
+    rules:
+    [
+        [
+            "stroke-draw",
+            {
+                "vector-effect": "non-scaling-stroke",
+                "stroke-linecap": "square",
+                "fill": "none"
+            },
+        ],
+        [
+            'shadow-glow-(.*)',
+            (match, context)=>
+            {
+                return { "box-shadow": `0px 0px 5px 2px ${context.theme().colors[match[1]]}` };
+            }
+        ],
+        [
+            'shadow-sss',
+            {
+                "box-shadow": "rgb(0 0 0 / 50%) 0px -3px 2px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
+            }
+        ]
+    ],
+    presets: [TWPreTail(), TWPreAuto()]
+};
+
+/** @type {(elStyle:HTMLStyleElement, elDiv:HTMLDivElement)=>void} */
+export const Init =(elStyle, elDiv)=>
+{
+    TW.observe(TW.twind(Configure, TW.cssom(elStyle)), elDiv);
+};

store.d.ts

@@ -0,0 +1,54 @@
+declare namespace Store {
+  type ColumnMapping = [frequency: number, position: number, normal: boolean];
+
+  type Range = { Min: number; Max: number; Value: number; Step: number };
+  type TestFrequencySample = { Stim: number; Resp: boolean };
+
+  type TestFrequency = {
+    Hz: number;
+    TestL: TestFrequencySample;
+    TestR: TestFrequencySample;
+    UserL?: TestFrequencySample;
+    UserR?: TestFrequencySample;
+  };
+
+  type Test = { Name: string; Plot: Array<TestFrequency> };
+
+  type Context = {
+    Test?: Test;
+    Freq?: TestFrequency;
+    Mark?: TestFrequencySample;
+  };
+  
+  type State = {
+    Chan: Range;
+    Freq: Range;
+    Stim: Range;
+    Live: Context;
+    Draw: {
+      UserL: DrawGroup;
+      UserR: DrawGroup;
+      TestL: DrawGroup;
+      TestR: DrawGroup;
+    };
+    Tests: Array<Test>;
+  };
+
+  type ActionMark = { Name: "Mark"; Data: boolean | null };
+  type ActionTest = { Name: "Test"; Data: number };
+  type ActionChan = { Name: "Chan"; Data: number };
+  type ActionFreq = { Name: "Freq"; Data: number };
+  type ActionStim = { Name: "Stim"; Data: number };
+  type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim;
+  type Reducer = (inState: State, inAction: Action) => State;
+  type ContextUpdater = (inState: State) => boolean;
+
+  type PlotKeyUser = "UserL" | "UserR";
+  type PlotKeyTest = "TestL" | "TestR";
+  type PlotKey = PlotKeyUser | PlotKeyTest;
+
+  type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample };
+  type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<Array<DrawPoint>> };
+  type DrawChart = { Left: DrawGroup; Right: DrawGroup };
+  type DrawTest = { User?: DrawChart; Test?: DrawChart };
+}

store.test.js

@@ -1,5 +1,5 @@
 import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
-import { Reducer, ColumnMapping, Congtiguous, Initial } from "../src/store.js";
+import { Reducer, ColumnMapping, Congtiguous, Initial } from "./src/store.js";
 
 let state = {...Initial};
 
@@ -103,7 +103,7 @@ Deno.test("Make Marks", async(t)=>
 
 Deno.test("Contiguous Lines", ()=>
 {
-    /** @type {import("../src/store.js").Test} */
+    /** @type {Store.Test} */
     const model = {
         Name:"",
         Plot:[