perf: Optimize primitive component instantiation (~3-5x faster for Rect, Circle, Ellipse, Line, Text, Path, Group)

Author: techniq

.changeset/fast-primitives-perf.md

@@ -0,0 +1,12 @@
+---
+'layerchart': patch
+---
+
+perf: Optimize primitive component instantiation (~3-5x faster for Rect, Circle, Ellipse, Line, Text, Path, Group)
+
+- `createMotion`: Fast-path passthrough when no `motion` prop is provided, avoiding `$state`/`$effect` overhead per axis
+- `createDataMotionMap`: Short-circuit when `motion` is `undefined`, skipping `parseMotionProp` overhead
+- `createKey`: Only create fill/stroke key trackers in canvas layer (skipped for SVG/HTML)
+- `registerComponent`: Skip `registerMark` for empty `MarkInfo` (pixel-mode marks)
+- All primitives: Skip `$effect` for data motion tracking when no motion is configured
+- Rect/Image: Avoid per-axis `parseMotionProp` calls when `motion` is `undefined`

packages/layerchart/package.json

@@ -15,7 +15,8 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "TZ=UTC-5 vitest",
     "test:ui": "TZ=UTC-5 vitest --ui",
-    "bench": "pnpm bench:linechart && pnpm bench:composable && pnpm bench:svg-vs-canvas",
+    "bench": "pnpm bench:primitives && pnpm bench:linechart && pnpm bench:composable && pnpm bench:svg-vs-canvas",
+    "bench:primitives": "TZ=UTC-5 vitest bench --project bench src/lib/bench/primitives.svelte.bench.ts",
     "bench:linechart": "TZ=UTC-5 vitest bench --project bench src/lib/components/charts/LineChart.svelte.bench.ts",
     "bench:composable": "TZ=UTC-5 vitest bench --project bench src/lib/bench/composable-vs-linechart.svelte.bench.ts",
     "bench:svg-vs-canvas": "TZ=UTC-5 vitest bench --project bench src/lib/bench/svg-vs-canvas.svelte.bench.ts",

packages/layerchart/src/lib/bench/PrimitiveBench.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Chart from '../components/Chart.svelte';
+  import Layer from '../components/layers/Layer.svelte';
+  import Rect from '../components/Rect.svelte';
+  import Circle from '../components/Circle.svelte';
+  import Ellipse from '../components/Ellipse.svelte';
+  import Line from '../components/Line.svelte';
+  import Group from '../components/Group.svelte';
+  import Text from '../components/Text.svelte';
+  import Path from '../components/Path.svelte';
+
+  type Primitive = 'rect' | 'circle' | 'ellipse' | 'line' | 'group' | 'text' | 'path';
+  type Mode = 'layerchart' | 'native';
+
+  type Props = {
+    primitive: Primitive;
+    mode: Mode;
+    count?: number;
+  };
+
+  let { primitive, mode, count = 100 }: Props = $props();
+</script>
+
+{#if mode === 'layerchart'}
+  <Chart width={500} height={300}>
+    <Layer type="svg">
+      {#each Array(count) as _, i (i)}
+        {#if primitive === 'rect'}
+          <Rect x={10} y={10} width={50} height={30} fill="steelblue" />
+        {:else if primitive === 'circle'}
+          <Circle cx={30} cy={30} r={15} fill="steelblue" />
+        {:else if primitive === 'ellipse'}
+          <Ellipse cx={30} cy={30} rx={20} ry={10} fill="steelblue" />
+        {:else if primitive === 'line'}
+          <Line x1={0} y1={0} x2={50} y2={50} stroke="steelblue" strokeWidth={2} />
+        {:else if primitive === 'group'}
+          <Group x={10} y={10} />
+        {:else if primitive === 'text'}
+          <Text x={10} y={20} value="Hello" fill="steelblue" />
+        {:else if primitive === 'path'}
+          <Path pathData="M0,0 L50,50 L100,0 Z" fill="none" stroke="steelblue" strokeWidth={2} />
+        {/if}
+      {/each}
+    </Layer>
+  </Chart>
+{:else}
+  <svg width={500} height={300}>
+    {#each Array(count) as _, i (i)}
+      {#if primitive === 'rect'}
+        <rect x={10} y={10} width={50} height={30} fill="steelblue" />
+      {:else if primitive === 'circle'}
+        <circle cx={30} cy={30} r={15} fill="steelblue" />
+      {:else if primitive === 'ellipse'}
+        <ellipse cx={30} cy={30} rx={20} ry={10} fill="steelblue" />
+      {:else if primitive === 'line'}
+        <line x1={0} y1={0} x2={50} y2={50} stroke="steelblue" stroke-width={2} />
+      {:else if primitive === 'group'}
+        <g transform="translate(10,10)"></g>
+      {:else if primitive === 'text'}
+        <text x={10} y={20} fill="steelblue">Hello</text>
+      {:else if primitive === 'path'}
+        <path d="M0,0 L50,50 L100,0 Z" fill="none" stroke="steelblue" stroke-width={2} />
+      {/if}
+    {/each}
+  </svg>
+{/if}

packages/layerchart/src/lib/bench/primitives.svelte.bench.ts

@@ -0,0 +1,61 @@
+import { describe, bench, afterEach } from 'vitest';
+import { render, cleanup } from 'vitest-browser-svelte';
+
+import PrimitiveBench from './PrimitiveBench.svelte';
+
+afterEach(() => {
+  cleanup();
+});
+
+const PRIMITIVES = ['rect', 'circle', 'ellipse', 'line', 'group', 'text', 'path'] as const;
+const COUNT = 100;
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// LayerChart primitives vs native SVG elements — 100 instances each
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+for (const primitive of PRIMITIVES) {
+  describe(`${primitive} — ${COUNT} instances`, () => {
+    bench(`Native <${primitive}>`, () => {
+      cleanup();
+      render(PrimitiveBench, { primitive, mode: 'native', count: COUNT });
+    });
+
+    bench(`LayerChart <${primitive[0].toUpperCase()}${primitive.slice(1)}>`, () => {
+      cleanup();
+      render(PrimitiveBench, { primitive, mode: 'layerchart', count: COUNT });
+    });
+  });
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Scaling: 10, 100, 500, 1000 instances (rect as representative)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+describe('rect — scaling', () => {
+  for (const count of [10, 100, 500, 1000]) {
+    bench(`Native <rect> × ${count}`, () => {
+      cleanup();
+      render(PrimitiveBench, { primitive: 'rect', mode: 'native', count });
+    });
+
+    bench(`LayerChart <Rect> × ${count}`, () => {
+      cleanup();
+      render(PrimitiveBench, { primitive: 'rect', mode: 'layerchart', count });
+    });
+  }
+});
+
+describe('circle — scaling', () => {
+  for (const count of [10, 100, 500, 1000]) {
+    bench(`Native <circle> × ${count}`, () => {
+      cleanup();
+      render(PrimitiveBench, { primitive: 'circle', mode: 'native', count });
+    });
+
+    bench(`LayerChart <Circle> × ${count}`, () => {
+      cleanup();
+      render(PrimitiveBench, { primitive: 'circle', mode: 'layerchart', count });
+    });
+  }
+});

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

@@ -154,19 +154,21 @@
   // --- Data mode: resolved items with optional motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  // Update motion targets when resolved values change
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveCircle(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  // Only create the data motion tracking effect when motion is actually configured
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveCircle(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   // Reading Spring .current here makes this reactive to animation frames
@@ -266,8 +268,9 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  // Only create key trackers when in canvas mode (they're only used for canvas dep tracking)
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Circle',
@@ -296,9 +299,9 @@
         motionCx.current,
         motionCy.current,
         motionR.current,
-        fillKey.current,
+        fillKey!.current,
         fillOpacity,
-        strokeKey.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,

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

@@ -170,18 +170,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveEllipse(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveEllipse(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -290,8 +292,8 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Ellipse',
@@ -321,9 +323,9 @@
         motionCy.current,
         motionRx.current,
         motionRy.current,
-        fillKey.current,
+        fillKey!.current,
         fillOpacity,
-        strokeKey.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,

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

@@ -156,18 +156,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveGroup(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveGroup(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {

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

@@ -238,18 +238,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion as MotionOptions | undefined);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveImage(d);
-      untrack(() => dataMotionMap.update(key, { x: resolved.x, y: resolved.y, width: resolved.width, height: resolved.height }));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveImage(d);
+        untrack(() => dataMotionMap.update(key, { x: resolved.x, y: resolved.y, width: resolved.width, height: resolved.height }));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -292,22 +294,22 @@
   const motionX = createMotion(
     _initialX,
     () => (typeof x === 'number' ? x : 0),
-    parseMotionProp(motion, 'x')
+    motion === undefined ? undefined : parseMotionProp(motion, 'x')
   );
   const motionY = createMotion(
     _initialY,
     () => (typeof y === 'number' ? y : 0),
-    parseMotionProp(motion, 'y')
+    motion === undefined ? undefined : parseMotionProp(motion, 'y')
   );
   const motionWidth = createMotion(
     _initialWidth,
     () => resolvedPixelWidth,
-    parseMotionProp(motion, 'width')
+    motion === undefined ? undefined : parseMotionProp(motion, 'width')
   );
   const motionHeight = createMotion(
     _initialHeight,
     () => resolvedPixelHeight,
-    parseMotionProp(motion, 'height')
+    motion === undefined ? undefined : parseMotionProp(motion, 'height')
   );
 
   // Pixel mode r and rotate (only when direct number values)