Export ForceSimulation's Forces<NodeDatum, LinkDatum> type. (#531)

* Export `ForceSimulation`'s `Forces<NodeDatum, LinkDatum>` type

* Fix breakages

Author: regexident

.changeset/tricky-pears-help.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(ForceSimulation): Export Forces<NodeDatum, LinkDatum> type.

packages/layerchart/src/lib/components/ForceSimulation.svelte

@@ -8,7 +8,10 @@
   } from 'd3-force';
   import type { Snippet } from 'svelte';
 
-  type Forces = Record<string, Force<any, any>>;
+  export type Forces<
+    NodeDatum extends SimulationNodeDatum,
+    LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,
+  > = Record<string, Force<NodeDatum, LinkDatum>>;
 
   export type Data<TNode = any, TLink = any> = {
     nodes: TNode[];
@@ -60,11 +63,14 @@
     LinkDatumFor<NodeDatum, LinkDatum>
   >;
 
-  export type ForceSimulationProps<NodeDatum, LinkDatum> = {
+  export type ForceSimulationProps<
+    NodeDatum extends SimulationNodeDatum,
+    LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,
+  > = {
     /**
      * Force simulation parameters
      */
-    forces: Forces;
+    forces: Forces<NodeDatum, LinkDatum>;
 
     /**
      * An object with arrays of nodes and links,
@@ -148,7 +154,11 @@
   };
 </script>
 
-<script lang="ts" generics="NodeDatum, LinkDatum = undefined">
+<script
+  lang="ts"
+  generics="NodeDatum extends SimulationNodeDatum,
+    LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,"
+>
   import { watch } from 'runed';
   import type { Prettify } from '@layerstack/utils';
 
@@ -187,7 +197,7 @@
 
   // d3.Simulation does not provide a `.forces()` getter, so we need to
   // keep track of previous forces ourselves, for diffing against `forces`.
-  let previousForces: Forces = {};
+  let previousForces: Forces<NodeDatum, LinkDatum> = {};
 
   let paused: boolean = true;
 
@@ -291,7 +301,7 @@
     simulation.nodes(nodes);
   }
 
-  function pushForcesToSimulation(forces: Forces) {
+  function pushForcesToSimulation(forces: Forces<NodeDatum, LinkDatum>) {
     // Evict obsolete forces:
     const names = Object.keys(previousForces);
     for (const name of names) {

packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
   import { scaleOrdinal } from 'd3-scale';
-  import { forceX, forceY, forceCollide } from 'd3-force';
+  import { forceX, forceY, forceCollide, type SimulationNodeDatum } from 'd3-force';
 
   import { asAny, Axis, Chart, Circle, ForceSimulation, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import type { USSenatorsDatum } from '$static/data/examples/us-senators.js';
+  import type { Prettify } from '@layerstack/utils';
+
+  type NodeDatum = USSenatorsDatum;
+
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
 
   let { data } = $props();
 
-  const nodes = data.usSenators;
+  const nodes: MySimulationNodeDatum[] = data.usSenators;
 
   const genderColor = scaleOrdinal(['var(--color-info)', 'var(--color-warning)']);
 
-  const xForce = forceX().strength(0.95);
-  const yForce = forceY().strength(0.075);
-  const collideForce = forceCollide();
+  const xForce = forceX<MySimulationNodeDatum>().strength(0.95);
+  const yForce = forceY<MySimulationNodeDatum>().strength(0.075);
+  const collideForce = forceCollide<MySimulationNodeDatum>();
 </script>
 
 <h1>Examples</h1>

packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte

@@ -6,24 +6,31 @@
   import { Chart, Circle, Group, ForceSimulation, Svg } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import type { Prettify } from '@layerstack/utils';
+
+  type NodeDatum = { r: number; group: number };
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
 
   const k = 600 / 200;
   const r = randomUniform(k, k * 4);
   const n = 4;
-  const randomData = Array.from({ length: 200 }, (_, i) => ({ r: r(), group: i && (i % n) + 1 }));
+  const randomData: MySimulationNodeDatum[] = Array.from({ length: 200 }, (_, i) => ({
+    r: r(),
+    group: i && (i % n) + 1,
+  }));
 
   const groupColor = scaleOrdinal([
     'var(--color-info)',
     'var(--color-warning)',
     'var(--color-danger)',
   ]);
 
-  const xForce = forceX().strength(0.01);
-  const yForce = forceY().strength(0.01);
-  const collideForce = forceCollide<SimulationNodeDatum & { r: number }>()
+  const xForce = forceX<MySimulationNodeDatum>().strength(0.01);
+  const yForce = forceY<MySimulationNodeDatum>().strength(0.01);
+  const collideForce = forceCollide<MySimulationNodeDatum>()
     .radius((d) => d.r + 1)
     .iterations(3);
-  const manyBodyForce = forceManyBody();
+  const manyBodyForce = forceManyBody<MySimulationNodeDatum>();
 </script>
 
 <h1>Examples</h1>

packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte

@@ -14,32 +14,39 @@
   import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import type { Prettify } from '@layerstack/utils';
 
   let { data } = $props();
 
-  type Node = {
+  type NodeDatum = {
     id: string;
     group: number;
   };
 
-  type Link = {
+  type LinkDatum = {
     source: string;
     target: string;
     value: number;
   };
 
-  const nodes: (Node & SimulationNodeDatum)[] = data.miserables.nodes;
-  const links: (Link & SimulationLinkDatum<Node & SimulationNodeDatum>)[] = data.miserables.links;
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
+  type MySimulationLinkDatum = Prettify<
+    LinkDatum & SimulationLinkDatum<NodeDatum & SimulationNodeDatum>
+  >;
+
+  const nodes: MySimulationNodeDatum[] = data.miserables.nodes;
+  const links: MySimulationLinkDatum[] = data.miserables.links;
 
   const colorScale = scaleOrdinal(schemeCategory10);
 
-  // @ts-expect-error - TODO: can we fix these types
-  const linkForce = $derived(forceLink(links).id((d) => d.id));
-  const chargeForce = forceManyBody().strength(-30).theta(0.9);
-  const xForce = forceX();
-  const yForce = forceY();
+  const linkForce = $derived(
+    forceLink<MySimulationNodeDatum, MySimulationLinkDatum>(links).id((d) => d.id)
+  );
+  const chargeForce = forceManyBody<MySimulationNodeDatum>().strength(-30).theta(0.9);
+  const xForce = forceX<MySimulationNodeDatum>();
+  const yForce = forceY<MySimulationNodeDatum>();
 
-  function keyForLink(link: Link & SimulationLinkDatum<Node & SimulationNodeDatum>): any {
+  function keyForLink(link: MySimulationLinkDatum): any {
     return link.value + link.index!;
   }
 </script>

packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte

@@ -1,17 +1,37 @@
 <script lang="ts">
-  import { forceManyBody, forceLink, forceCenter } from 'd3-force';
+  import {
+    forceManyBody,
+    forceLink,
+    forceCenter,
+    type SimulationNodeDatum,
+    type SimulationLinkDatum,
+  } from 'd3-force';
   import { curveLinear } from 'd3-shape';
 
   import { Field, Switch } from 'svelte-ux';
   import { Chart, ForceSimulation, Link, Svg, Tooltip } from 'layerchart';
   import { cls } from '@layerstack/tailwind';
-  import { clamp } from '@layerstack/utils';
+  import { clamp, type Prettify } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { movable } from '$lib/actions/movable.js';
 
-  const nodes = Array.from({ length: 13 }, (_, i) => ({ id: i }));
-  const links = [
+  type NodeDatum = {
+    id: number;
+  };
+
+  type LinkDatum = {
+    source: number;
+    target: number;
+  };
+
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
+  type MySimulationLinkDatum = Prettify<
+    LinkDatum & SimulationLinkDatum<NodeDatum & SimulationNodeDatum>
+  >;
+
+  const nodes: MySimulationNodeDatum[] = Array.from({ length: 13 }, (_, i) => ({ id: i }));
+  const links: MySimulationLinkDatum[] = [
     { source: 0, target: 1 },
     { source: 1, target: 2 },
     { source: 2, target: 0 },

packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte

@@ -15,22 +15,28 @@
   import { Checkbox, Field, ProgressCircle, RangeField } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import type { Prettify } from '@layerstack/utils';
 
   let { data } = $props();
 
-  type Node = {
+  type NodeDatum = {
     id: string;
     group: number;
   };
 
-  type Link = {
+  type LinkDatum = {
     source: string;
     target: string;
     value: number;
   };
 
-  const nodes: (Node & SimulationNodeDatum)[] = data.miserables.nodes;
-  const links: (Link & SimulationLinkDatum<Node & SimulationNodeDatum>)[] = data.miserables.links;
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
+  type MySimulationLinkDatum = Prettify<
+    LinkDatum & SimulationLinkDatum<NodeDatum & SimulationNodeDatum>
+  >;
+
+  const nodes: MySimulationNodeDatum[] = data.miserables.nodes;
+  const links: MySimulationLinkDatum[] = data.miserables.links;
 
   const colorScale = scaleOrdinal(schemeCategory10);
 
@@ -61,11 +67,12 @@
     });
   });
 
-  // @ts-expect-error
-  const linkForce = $derived(forceLink(links).id((d) => d.id));
-  const chargeForce = forceManyBody();
-  const collideForce = forceCollide();
-  const centerForce = forceCenter(0, 0);
+  const linkForce = $derived(
+    forceLink<MySimulationNodeDatum, MySimulationLinkDatum>(links).id((d) => d.id)
+  );
+  const chargeForce = forceManyBody<MySimulationNodeDatum>();
+  const collideForce = forceCollide<MySimulationNodeDatum>();
+  const centerForce = forceCenter<MySimulationNodeDatum>(0, 0);
 
   let linkDistance = $state(30);
 

packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte

@@ -1,13 +1,25 @@
 <script lang="ts">
   import { scaleBand, scaleOrdinal } from 'd3-scale';
-  import { forceX, forceManyBody, forceCollide, forceCenter } from 'd3-force';
+  import {
+    forceX,
+    forceManyBody,
+    forceCollide,
+    forceCenter,
+    type SimulationNodeDatum,
+  } from 'd3-force';
 
   import { asAny, Chart, Circle, ForceSimulation, Svg } from 'layerchart';
   import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
 
   import dots from './dots.json' with { type: 'json' };
+  import type { Prettify } from '@layerstack/utils';
+
+  type NodeDatum = { category: string; value: number };
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
+
+  const nodes: MySimulationNodeDatum[] = dots as MySimulationNodeDatum[];
 
   const categoryColor = scaleOrdinal([
     'var(--color-info)',
@@ -22,10 +34,10 @@
     reheatSimulation({ groupBy });
   });
 
-  const xForce = forceX().strength(0.1);
-  const chargeForce = forceManyBody().strength(3);
-  const collideForce = forceCollide();
-  const centerForce = forceCenter();
+  const xForce = forceX<MySimulationNodeDatum>().strength(0.1);
+  const chargeForce = forceManyBody<MySimulationNodeDatum>().strength(3);
+  const collideForce = forceCollide<MySimulationNodeDatum>();
+  const centerForce = forceCenter<MySimulationNodeDatum>();
 
   function reheatSimulation(args: Record<string, any> = {}) {
     const _ = args;
@@ -45,9 +57,9 @@
   </Field>
 </div>
 
-<Preview data={dots}>
+<Preview data={nodes}>
   <div class="h-[300px] p-4 border rounded-sm">
-    <Chart data={dots} x="category" xScale={scaleBand()} r="value" rRange={[3, 12]}>
+    <Chart data={nodes} x="category" xScale={scaleBand()} r="value" rRange={[3, 12]}>
       {#snippet children({ context })}
         {@const nodeStrokeWidth = 1}
         <Svg>
@@ -64,7 +76,7 @@
               ),
               center: centerForce.x(context.width / 2).y(context.height / 2),
             }}
-            data={{ nodes: dots }}
+            data={{ nodes }}
             bind:alpha
           >
             {#snippet children({ nodes })}

packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte

@@ -1,22 +1,31 @@
 <script lang="ts">
-  import { hierarchy } from 'd3-hierarchy';
-  import { forceX, forceY, forceManyBody, forceLink } from 'd3-force';
+  import { hierarchy, type HierarchyLink, type HierarchyNode } from 'd3-hierarchy';
+  import { forceX, forceY, forceManyBody, forceLink, type SimulationNodeDatum } from 'd3-force';
 
   import { Chart, Circle, ForceSimulation, Link, Svg, Tooltip } from 'layerchart';
   import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import type { Prettify } from '@layerstack/utils';
+
+  type NodeDatum = { name: string; value: number };
+  type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
 
   let { data } = $props();
 
-  const root = hierarchy(data.flare);
-  const nodes = root.descendants();
-  const links = root.links();
+  const root: HierarchyNode<MySimulationNodeDatum> = hierarchy<MySimulationNodeDatum>(data.flare);
+  const nodes: HierarchyNode<MySimulationNodeDatum>[] = root.descendants();
+  const links: HierarchyLink<MySimulationNodeDatum>[] = root.links();
 
-  const linkForce = forceLink(links).distance(0).strength(1);
-  const chargeForce = forceManyBody().strength(-50);
-  const xForce = forceX();
-  const yForce = forceY();
+  const linkForce = forceLink<
+    HierarchyNode<MySimulationNodeDatum>,
+    HierarchyLink<MySimulationNodeDatum>
+  >(links)
+    .distance(0)
+    .strength(1);
+  const chargeForce = forceManyBody<HierarchyNode<MySimulationNodeDatum>>().strength(-50);
+  const xForce = forceX<HierarchyNode<MySimulationNodeDatum>>();
+  const yForce = forceY<HierarchyNode<MySimulationNodeDatum>>();
 </script>
 
 <h1>Examples</h1>

packages/layerchart/static/data/examples/us-senators.d.ts

@@ -1,7 +1,9 @@
-export type USSenatorsData = {
+export type USSenatorsDatum = {
   state_name: string;
   party: string;
   name: string;
   gender: string;
   date_of_birth: Date;
-}[];
+};
+
+export type USSenatorsData = USSenatorsDatum[];