From be0bd531581630c8fb38112fa0bc9d3ab015c610 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 29 Apr 2026 18:37:23 +0000 Subject: [PATCH] Version Packages (next) --- .changeset/pre.json | 1 + packages/layerchart/CHANGELOG.md | 97 ++++++++++++++++++++++++++++++++ packages/layerchart/package.json | 2 +- 3 files changed, 99 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 4e4898952..93d338d7d 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -198,6 +198,7 @@ "open-houses-vanish", "orientation-to-valueaxis", "pattern-html-layer", + "per-layer-primitive-variants", "piechart-arcchart-labels-prop", "pink-flies-worry", "pink-hornets-rest", diff --git a/packages/layerchart/CHANGELOG.md b/packages/layerchart/CHANGELOG.md index f4c0aeecf..de8892c55 100644 --- a/packages/layerchart/CHANGELOG.md +++ b/packages/layerchart/CHANGELOG.md @@ -1,5 +1,102 @@ # LayerChart +## 2.0.0-next.61 + +### Minor Changes + +- feat: Per-layer variants for primitives, compound marks, and high-level charts (`layerchart/svg`, `layerchart/canvas`, `layerchart/html`) ([#848](https://github.com/techniq/layerchart/pull/848)) + + Layer-agnostic components auto-detect the surrounding ``, ``, or `` layer and bundle every render path. The new sub-path exports expose layer-specific variants so consumers committed to a single rendering layer can opt into a smaller bundle. + + ```ts + // Default: agnostic, dispatches at runtime — works in any layer + import { Rect, Circle, Text, Path, LineChart } from 'layerchart'; + + // SVG-only — skips canvas + html branches + import { Rect, Circle, Text, Path, LineChart } from 'layerchart/svg'; + + // Canvas-only + import { Rect, Circle, Text, LineChart } from 'layerchart/canvas'; + + // HTML-only — drops canvas + svg overhead (some primitives are ~95% smaller) + import { Rect, Circle, Text, Pattern, LinearGradient } from 'layerchart/html'; + ``` + + Each agnostic component (e.g. `Rect.svelte`) now dispatches to the corresponding per-layer variant under the hood (`Rect.svg.svelte`, `Rect.canvas.svelte`, `Rect.html.svelte`) — no breaking change for existing consumers. + + ### What's split + + **Primitives (13)** — the basic graphics building blocks + `Circle`, `Text`, `Rect`, `Line`, `Path`, `Ellipse`, `Polygon`, `Group`, `Image`, `ClipPath`, `Pattern`, `LinearGradient`, `RadialGradient` + + **Compound marks (~30)** — chart axes, marks, annotations, and chart-relative shapes + `Axis`, `Grid`, `Rule`, `Highlight`, `Layer`, `ChartChildren`, `ChartClipPath`, `CircleClipPath`, `Bars`, `Bar`, `Spline`, `Area`, `Pie`, `Arc`, `ArcLabel`, `Points`, `Cell`, `Frame`, `Threshold`, `Trail`, `Vector`, `Link`, `Labels`, `AnnotationLine`, `AnnotationPoint`, `AnnotationRange`, `Hull`, `Density`, `Voronoi`, `Contour`, `Raster`, `Violin`, `BoxPlot`, `Calendar`, `Month` + + **Geo components (`layerchart/geo`)** + `GeoPath`, `GeoSpline`, `GeoPoint`, `GeoCircle`, `GeoTile`, `TileImage`, `Graticule`, `GeoClipPath`, `GeoEdgeFade` + + **Graph components (`layerchart/graph`)** + `Ribbon` + + **High-level chart wrappers** — pre-composed charts with built-in tooltips, highlights, and series handling + `LineChart`, `AreaChart`, `BarChart`, `ScatterChart`, `PieChart`, `ArcChart` + + The geo, graph, hierarchy, and force sub-paths also re-export every layer-agnostic helper they previously included, so a single `from 'layerchart/svg'` import covers a typical SVG chart end-to-end without falling back to `'layerchart'`. + + ### Standout per-layer wins (gz, vs agnostic baseline) + + **Primitives where the per-layer rendering is dramatically simpler:** + - `Pattern` html: 14.81 → 0.92 KB (-94%) — HTML implementation is just CSS-string generation + - `LinearGradient` html: 14.38 → 0.53 KB (-96%) + - `Image` canvas: 14.95 → 3.73 KB (-75%) + - `Text` svg/html: 29.13 → ~16 KB (-45%) + - `Circle` / `Rect` / `Ellipse` / `Line` / `Path`: ~22–27% smaller per-layer + + **Compound marks:** typically 8–15% gz savings per-layer; outliers like `Highlight` (-30% canvas) and `Cell` (-22% svg) are larger because their HTML/canvas vs. SVG paths diverge significantly. + + **High-level charts:** ~5–12% gz savings (~5–11 KB) when imported from `layerchart/svg` or `layerchart/canvas`. A single-layer LineChart drops from 89.6 KB → 79.0 KB gz on the SVG path. + + For a consumer who migrates all imports to a single layer, cumulative savings across primitives and compound marks are 60–80 KB gz. + + ### Bundle reductions on the default `` path + + In addition to opt-in per-layer variants, this release also makes a few previously-eager features lazy: + - **``** is now dynamically imported when `` is set — saves ~2.8 KB gz on every chart that doesn't pan/zoom. + - **``** was already lazy; nothing changes there. + + ### `` for non-cartesian charts (new) + + A new `` component is exported alongside `` from each layer sub-path (`layerchart`, `layerchart/svg`, `layerchart/canvas`, `layerchart/html`). It provides the chart context, sizing, brush, transform, and tooltip plumbing — but skips `` and the `Layer` / `Axis` / `Grid` / `Rule` / `Highlight` / `ChartClipPath` import chain it pulls in. + + Use it for geo maps, custom layouts, or any chart that renders its own primitives directly via the `children` snippet: + + ```svelte + + + + {#snippet children({ context })} + + + + + + {/snippet} + + ``` + + Measured savings (bundle scenarios): + - `base` (``) → `core` (``): 83.42 → 50.93 KB gz (**−39%**) + - `geo` (`` + `GeoPath`/`GeoPoint`) → `core-geo` (`` + `GeoProjection` + `GeoPath`): 87.23 → 54.67 KB gz (**−37%**) + - `base-svg` (per-layer) → `core-svg` (per-layer): 77.37 → 50.88 KB gz (**−34%**) + + ### Behavior + + Identical to the agnostic versions: visual output, props, types, and bindable refs all match. The dispatcher pattern adds ~0.2 KB per primitive to `core` for users on the agnostic API (transitive cost from `Highlight` / `Axis` / `Chart`) — a worthwhile tradeoff for the opt-in per-layer savings. + + See the updated ["Bundle Size" guide](https://layerchart.com/docs/guides/bundle-size) for the full table, tradeoffs, and when to opt into per-layer imports. + ## 2.0.0-next.60 ### Minor Changes diff --git a/packages/layerchart/package.json b/packages/layerchart/package.json index f6b552a3f..984e25522 100644 --- a/packages/layerchart/package.json +++ b/packages/layerchart/package.json @@ -5,7 +5,7 @@ "license": "MIT", "repository": "techniq/layerchart", "homepage": "https://layerchart.com", - "version": "2.0.0-next.60", + "version": "2.0.0-next.61", "scripts": { "dev": "pnpm package:watch", "build": "svelte-package",