Extract app state into object

.gitignore

@@ -1,5 +1,7 @@
 out/
 tests/test_runner.bundle.js
+src/**/*.js
+tests/**/*.js
 
 # Created by https://www.gitignore.io/api/node
 

build

@@ -3,7 +3,6 @@
 SRC=src
 OUT=out
 ESBUILD=node_modules/.bin/esbuild
-TSC=node_modules/typescript/bin/tsc
 
 rm -rf $OUT
 mkdir -p $OUT

package.json

@@ -1,7 +1,6 @@
 {
   "name": "pokemon-types-d3",
   "version": "1.0.0",
-  "main": "src/index.ts",
   "license": "MIT",
   "scripts": {
     "build": "./build",
@@ -15,11 +14,12 @@
     "pokeapi-js-wrapper": "^1.1.1"
   },
   "devDependencies": {
-    "@types/d3": "^5.0.0",
+    "@types/d3": "^5.5.0",
     "@types/mithril": "^2.2.6",
-    "@types/node": "^10.5.2",
+    "@types/ospec": "^4.0.10",
     "esbuild": "^0.19.7",
     "ospec": "^4.2.0",
+    "tsc": "^2.0.4",
     "typescript": "^5.3.2"
   }
 }

src/index.ts

@@ -1,27 +1,48 @@
 import m from 'mithril';
+import stream from 'mithril/stream';
 import * as d3 from 'd3';
 import { PokemonType, INode } from './type_to_nodes';
 import { updateVisualisation } from './update_visualisation';
-import { focusedType, hoveredNode, visualisationTitle } from './utils';
+import { IState } from './utils';
 import { forceSimulation } from './simulation';
 
+const state: IState = {
+    focusedType: stream<PokemonType>('fire'),
+    hoveredNode: stream<INode | undefined>(undefined),
+    setFocusedType: function(newType: PokemonType) {
+        if (newType === this.focusedType()) {
+            return;
+        }
+
+        this.focusedType(newType);
+        m.redraw();
+    },
+    setHoveredNode: function(newNode?: INode) {
+        if (newNode === this.hoveredNode()) {
+            return;
+        }
+
+        this.hoveredNode(newNode);
+        m.redraw();
+    }
+};
+
 const Visualisation: m.Component<{
-    focused: PokemonType,
-    title: string,
     simulation: d3.Simulation<INode, undefined>,
+    state: IState,
 }, {
     oldFocused: PokemonType,
 }> = {
-    oncreate: ({attrs: {focused, title, simulation}, dom}) => {
-        updateVisualisation(dom, focused, title, simulation, true);
-        this.oldFocused = focused;
+    oncreate: function({attrs: {simulation, state}, dom}) {
+        updateVisualisation(dom, simulation, true, state);
+        this.oldFocused = state.focusedType();
     },
-    onupdate: ({attrs: {focused, title, simulation}, dom}) => {
-        const focusedUpdated = focused !== this.oldFocused;
-        updateVisualisation(dom, focused, title, simulation, focusedUpdated);
-        this.oldFocused = focused;
+    onupdate: function({attrs: {simulation, state}, dom}) {
+        const focusedUpdated = state.focusedType() !== this.oldFocused;
+        updateVisualisation(dom, simulation, focusedUpdated, state);
+        this.oldFocused = state.focusedType();
     },
-    view: ({attrs: {focused}}) => {
+    view: () => {
         return m(
             'svg',
             {
@@ -41,8 +62,7 @@ const simulation = forceSimulation();
 m.mount(document.body, {
     view: () => {
         return m(Visualisation, {
-            focused: focusedType(),
-            title: visualisationTitle(hoveredNode(), focusedType()),
+            state,
             simulation,
         });
     }

src/types.d.ts

@@ -1,5 +1 @@
-declare module 'ospec';
-declare module 'mithril-query';
-declare module 'mithril/test-utils/browserMock';
-declare module 'mithril-stream';
 declare module 'pokeapi-js-wrapper';

src/update_visualisation.ts

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import { Pokedex } from 'pokeapi-js-wrapper';
 import { PokemonType, INode } from './type_to_nodes';
-import { boundingDimensions, focusedType, updateFocusedType, updateHoveredNode, nodeRadius } from './utils';
+import { boundingDimensions, nodeRadius, IState } from './utils';
 import type_to_nodes from './type_to_nodes';
 import { tick } from './simulation';
 
@@ -23,38 +23,58 @@ function preloadData(nodes: INode[]): void {
 
 export async function updateVisualisation(
     svg: Element,
-    focused: PokemonType,
-    title: string,
     simulation: d3.Simulation<INode, undefined>,
     focusedUpdated: boolean,
+    state: IState,
 ): Promise<void> {
     const { width, height } = boundingDimensions(svg);
     svg.setAttribute('width', width.toString());
     svg.setAttribute('height', height.toString());
 
-    updateTitle(svg, title);
+    updateTitle(svg, state);
 
     if (focusedUpdated) {
-        const response = await pokedex.getTypeByName(focused);
+        const response = await pokedex.getTypeByName(state.focusedType());
         const nodes: INode[] = type_to_nodes(response);
         preloadData(nodes);
 
         simulation.nodes(nodes);
         tick(simulation);
-
     }
 
-    updateCircles(svg, simulation, focusedUpdated);
-    updateFocused(svg, focused);
+    updateCircles(svg, simulation, state);
+    updateFocused(svg, state.focusedType());
 }
 
 
 function updateFocused(svg: Element, focused: PokemonType): void {
     updateTextElement(svg, (focused as string), 'focused', 0.5, 0.5);
 }
 
-function updateTitle(svg: Element, title: string): void {
-    updateTextElement(svg, title, 'title', 0.5, 0.125);
+export function visualisationTitle(state: IState): string {
+    const hovered = state.hoveredNode();
+    const focused = state.focusedType();
+
+    if (hovered === undefined) {
+        return '';
+    }
+
+    let attacking;
+    let defending;
+
+    if (hovered.direction === 'from') {
+        attacking = hovered.name;
+        defending = focused;
+    } else {
+        attacking = focused;
+        defending = hovered.name;
+    }
+
+    return `${attacking} gets ${hovered.multiplier}x against ${defending}`;
+}
+
+function updateTitle(svg: Element, state: IState): void {
+    updateTextElement(svg, visualisationTitle(state), 'title', 0.5, 0.125);
 }
 
 function updateTextElement(
@@ -67,12 +87,12 @@ function updateTextElement(
     const { width, height } = boundingDimensions(svg);
 
     const updating = d3.select(svg)
-        .selectAll(`.${className}`)
+        .selectAll<Element, string>(`.${className}`)
         .data<string>([text], d => (d as string));
 
     updating
         .enter()
-        .append('text')
+        .append<Element>('text')
         .merge(updating)
         .classed(className, true)
         .attr('x', width * xMultiple)
@@ -87,11 +107,11 @@ function updateTextElement(
 function updateCircles(
     svg: Element,
     simulation: d3.Simulation<INode, undefined>,
-    focusedUpdated: boolean
+    state: IState,
 ): void {
     const { width, height } = boundingDimensions(svg);
     const nodeTransition = d3.transition()
-        .duration(focusedUpdated ? 600 : 0);
+        .duration(600);
 
     const updatingNodes = d3.select(svg)
         .selectAll<Element, INode>('circle')
@@ -114,23 +134,24 @@ function updateCircles(
         .attr('cx', d => d.x * width)
         .attr('cy', d => d.y * height)
         .on('click', function(d) {
-            if (focusedType() === d.name) {
+            if (state.focusedType() === d.name) {
                 return;
             }
 
-            updateFocusedType(d.name);
-            updateHoveredNode(undefined);
+            state.setFocusedType(d.name);
+            state.setHoveredNode(undefined);
             this.dispatchEvent(new Event('mouseout'));
         })
-        .on('mouseover', d => updateHoveredNode(d))
-        .on('mouseout', d => updateHoveredNode(undefined))
+        .on('mouseover', d => state.setHoveredNode(d))
+        .on('mouseout', d => state.setHoveredNode(undefined))
         .attr('r', 0);
 
     mergedNodes
         .transition(nodeTransition)
         .attr('cx', d => d.x * width)
         .attr('cy', d => d.y * height)
         .attr('r', d => nodeRadius(d) * Math.min(width, height));
+
     exitingNodes
         .transition(nodeTransition)
         .attr('r', 0)

src/utils.ts

@@ -1,35 +1,18 @@
-import stream from 'mithril/stream';
-import m from 'mithril';
 import { PokemonType, INode } from './type_to_nodes';
 
-export const focusedType = stream<PokemonType>('fire');
-
-export const hoveredNode = stream<INode | undefined>(undefined);
+export interface IState {
+    focusedType: () => PokemonType;
+    hoveredNode: () => INode | undefined;
+    setFocusedType: (newType: PokemonType) => undefined;
+    setHoveredNode: (newNode?: INode) => undefined;
+}
 
 const NODE_SIZE_FACTOR = 0.03;
 
 export function nodeRadius(node: INode): number {
     return (node.multiplier === 0 ? 0.1 : node.multiplier) * NODE_SIZE_FACTOR;
 }
 
-export function updateFocusedType(newType: PokemonType) {
-    if (newType === focusedType()) {
-        return;
-    }
-
-    focusedType(newType);
-    m.redraw();
-}
-
-export function updateHoveredNode(newNode?: INode) {
-    if (newNode === hoveredNode()) {
-        return;
-    }
-
-    hoveredNode(newNode);
-    m.redraw();
-}
-
 export function boundingDimensions(svg: Element) {
     const boundingRect = (svg.getBoundingClientRect() as DOMRect);
     const width = boundingRect.width;
@@ -40,22 +23,3 @@ export function boundingDimensions(svg: Element) {
 export function boundingWidth(svg: Element) {
     return boundingDimensions(svg).width;
 }
-
-export function visualisationTitle(hovered: INode, focused: PokemonType): string {
-    if (hovered === undefined) {
-        return '';
-    }
-
-    let attacking;
-    let defending;
-
-    if (hovered.direction === 'from') {
-        attacking = hovered.name;
-        defending = focused;
-    } else {
-        attacking = focused;
-        defending = hovered.name;
-    }
-
-    return `${attacking} gets ${hovered.multiplier}x against ${defending}`;
-}

tsconfig.json

@@ -1,9 +1,9 @@
 {
+  "include": ["src/**/*", "tests/**/*"],
   "compilerOptions": {
     "esModuleInterop": true,
     "noImplicitAny": true,
     "noUnusedLocals": true,
-    "downlevelIteration": true,
     "target": "es5",
     "lib": [
       "es6", "dom"