techniq
diff --git a/‎.changeset/lazy-load-opt-in-features.md‎
Lines changed: 17 additions & 0 deletions b/‎.changeset/lazy-load-opt-in-features.md‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎.changeset/subpath-exports.md‎
Lines changed: 25 additions & 0 deletions b/‎.changeset/subpath-exports.md‎
Lines changed: 25 additions & 0 deletions
diff --git a/‎bundle-analyzer/bundle-analyzer.ts‎
Lines changed: 79 additions & 8 deletions b/‎bundle-analyzer/bundle-analyzer.ts‎
Lines changed: 79 additions & 8 deletions
@@ -0,0 +1,17 @@
+---
+'layerchart': patch
+---
+
+perf: Lazy-load opt-in features in `core` path
+
+5 components/dependencies that previously sat in every `<Chart>` user's sync graph are now dynamically imported only when the corresponding feature is used:
+
+- `BrushContext` in `Chart` — only loads when `<Chart brush={...}>` is set (default `undefined`)
+- `DefaultTooltip` in `ChartChildren` — only loads when `tooltipContext` is set and no custom `tooltip` snippet is provided
+- `d3-quadtree` in `TooltipContext` — only loads when `mode` is `'quadtree'`, `'quadtree-x'`, or `'quadtree-y'`
+- `Spline` in `Grid` — only loads when rendering radial linear grid lines (`<Chart radial>` with `radialY="linear"`)
+- `Bar` in `Highlight` — only loads when `<Chart highlight={{ bar: ... }}>` is set (default `false`)
+
+Result: **~10 KB gz off `core`** (115.6 → 105.25 KB) and comparable savings on every cartesian/geo/graph/hierarchy scenario, with no impact on rendered output for users who already opt into these features.
+
+Also switches internal `@layerstack/svelte-actions` imports from the barrel (`@layerstack/svelte-actions`) to sub-paths (`@layerstack/svelte-actions/styles`, `@layerstack/svelte-actions/portal`). No production bundle effect — bundlers already tree-shake the unused `popover.js` — but it stops the Svelte REPL/CDN from eagerly fetching `@floating-ui/dom` (popover's transitive dep) when consumers load `layerchart` from a CDN.
@@ -0,0 +1,25 @@
+---
+'layerchart': minor
+---
+
+breaking: Move heavy-dep components into sub-path exports
+
+The following components are no longer re-exported from `'layerchart'` and must be imported from new sub-paths:
+
+- `'layerchart/geo'` — `GeoCircle`, `GeoClipPath`, `GeoEdgeFade`, `GeoLegend`, `GeoPath`, `GeoPoint`, `GeoProjection`, `GeoRaster`, `GeoSpline`, `GeoTile`, `GeoVisible`, `Graticule`, `TileImage`
+- `'layerchart/hierarchy'` — `Tree`, `Treemap`, `Pack`, `Partition`
+- `'layerchart/force'` — `ForceSimulation`
+- `'layerchart/graph'` — `Dagre`, `Sankey`, `Chord`, `Ribbon`
+
+This isolates each group's external d3 dependency (`@dagrejs/dagre` ~22 KB, `d3-geo` ~15 KB, `d3-force` ~7 KB, `d3-hierarchy` ~6 KB, `d3-sankey` ~6 KB, `d3-chord` ~2 KB) behind an opt-in import — defending against bundlers that don't tree-shake the root barrel cleanly.
+
+`Voronoi`/`Hull` stay at root (already lazy-loaded via `TooltipContext`). `Contour`/`Density`/`Raster`/`BoxPlot`/`Violin`/`Threshold` and high-level charts (`LineChart`, `BarChart`, etc.) remain at root.
+
+**Migration:** update affected imports, e.g.
+
+```diff
+-import { Tree, GeoPath, ForceSimulation } from 'layerchart';
++import { Tree } from 'layerchart/hierarchy';
++import { GeoPath } from 'layerchart/geo';
++import { ForceSimulation } from 'layerchart/force';
+```
@@ -24,6 +24,7 @@ const __dirname = dirname(__filename);
 interface BundleResult {
 	scenario: string;
 	description: string;
+	group?: string;
 	size: number;
 	gzipSize: number;
 	imports: string[];
@@ -34,6 +35,40 @@ interface BundleReport {
 	results: BundleResult[];
 }
 
+/**
+ * Maps a component name to the layerchart sub-path it lives under.
+ * Components not listed here import from the bare `layerchart` package.
+ * Keep in sync with the package.json `exports` map and src/lib/components/<sub>/index.ts.
+ */
+const SUBPATH_FOR_COMPONENT: Record<string, string> = {
+	// geo
+	GeoCircle: "geo",
+	GeoClipPath: "geo",
+	GeoEdgeFade: "geo",
+	GeoLegend: "geo",
+	GeoPath: "geo",
+	GeoPoint: "geo",
+	GeoProjection: "geo",
+	GeoRaster: "geo",
+	GeoSpline: "geo",
+	GeoTile: "geo",
+	GeoVisible: "geo",
+	Graticule: "geo",
+	TileImage: "geo",
+	// hierarchy
+	Tree: "hierarchy",
+	Treemap: "hierarchy",
+	Pack: "hierarchy",
+	Partition: "hierarchy",
+	// force
+	ForceSimulation: "force",
+	// graph
+	Chord: "graph",
+	Dagre: "graph",
+	Ribbon: "graph",
+	Sankey: "graph",
+};
+
 
 class BundleAnalyzer {
 	tempDir: string;
@@ -81,7 +116,14 @@ class BundleAnalyzer {
 			results,
 		};
 
-		this.saveReport(report);
+		// Only update `latest.json` (the committed baseline) on full runs.
+		// Filtered/component runs would otherwise drop scenarios from the
+		// baseline and break the PR comparison comment.
+		const isFullRun =
+			!options.scenarios &&
+			!options.components &&
+			!options.componentFilter;
+		this.saveReport(report, isFullRun);
 		this.printReport(report);
 
 		if (options.visualize) {
@@ -127,6 +169,7 @@ class BundleAnalyzer {
 		return {
 			scenario: scenario.name,
 			description: scenario.description,
+			group: scenario.group,
 			size,
 			gzipSize,
 			imports: scenario.imports,
@@ -137,13 +180,34 @@ class BundleAnalyzer {
 		let content: string;
 
 		if (scenario.imports.length === 1 && scenario.imports[0] === "*") {
-			// Wildcard import: import everything
+			// Wildcard import: import everything (root + each sub-path)
 			content = `import * as LayerChart from "layerchart";
-;(globalThis.__lc_keep ||= []).push(LayerChart);
+import * as LayerChartGeo from "layerchart/geo";
+import * as LayerChartHierarchy from "layerchart/hierarchy";
+import * as LayerChartForce from "layerchart/force";
+import * as LayerChartGraph from "layerchart/graph";
+;(globalThis.__lc_keep ||= []).push(LayerChart, LayerChartGeo, LayerChartHierarchy, LayerChartForce, LayerChartGraph);
 `;
 		} else {
-			const importList = scenario.imports.join(", ");
-			content = `import { ${importList} } from "layerchart";
+			// Group imports by source module (root vs each sub-path).
+			const groups = new Map<string, string[]>([["layerchart", []]]);
+			for (const name of scenario.imports) {
+				const sub = SUBPATH_FOR_COMPONENT[name];
+				const mod = sub ? `layerchart/${sub}` : "layerchart";
+				const list = groups.get(mod) ?? [];
+				list.push(name);
+				groups.set(mod, list);
+			}
+
+			const importLines: string[] = [];
+			for (const [mod, names] of groups) {
+				if (names.length === 0) continue;
+				importLines.push(
+					`import { ${names.join(", ")} } from "${mod}";`
+				);
+			}
+
+			content = `${importLines.join("\n")}
 
 const refs = [
 	${scenario.imports.join(",\n\t")}
@@ -302,16 +366,23 @@ const refs = [
 		return { size, gzipSize };
 	}
 
-	private saveReport(report: BundleReport): void {
+	private saveReport(report: BundleReport, updateLatest = true): void {
 		const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
 		const filepath = join(this.outputDir, `bundle-report-${timestamp}.json`);
 
 		writeFileSync(filepath, JSON.stringify(report, null, 2));
 
-		const latestPath = join(this.outputDir, "latest.json");
-		writeFileSync(latestPath, JSON.stringify(report, null, 2));
+		if (updateLatest) {
+			const latestPath = join(this.outputDir, "latest.json");
+			writeFileSync(latestPath, JSON.stringify(report, null, 2));
+		}
 
 		console.log(`\nReport saved to ${filepath}`);
+		if (!updateLatest) {
+			console.log(
+				`(Skipped updating latest.json because this was a filtered run)`
+			);
+		}
 	}
 
 	private printReport(report: BundleReport): void {