compostjs 0.1.0 → 0.2.0

package/.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Test
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: '8.0.x'
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - run: dotnet tool restore
+      - run: npm install
+      - run: npm test

package/CLAUDE.md

@@ -0,0 +1,78 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build Commands
+
+Prerequisites: .NET SDK 8+, Node.js, npm. Fable is installed as a dotnet local tool (`.config/dotnet-tools.json`).
+
+```bash
+dotnet tool restore          # Install Fable 4.28.0
+npm install                  # Install Vite + virtual-dom
+
+npm start                    # Dev server at http://localhost:8080 (Fable watch + Vite)
+npm run build                # Compile F# to ES modules in dist/ (for npm package)
+npm run rebuild              # Clean dist/ and rebuild
+npm run standalone           # Bundle standalone IIFE to docs/releases/
+npm test                     # Compile F# then run Vitest tests (test/*.test.js)
+
+npm run release              # Full release (runs the three steps below)
+npm run release:version      # Bump version in package.json, create git commit + tag (via np)
+npm run release:standalone   # Build standalone bundle and commit to git
+npm run release:publish      # Rebuild dist/ and npm publish (prompts for 2FA)
+```
+
+Tests use Vitest against the Fable-compiled JS output. F# must be compiled before tests run (`npm test` handles this). Test files go in `test/`. Use `c.foldDom(f, acc, node)` to traverse `DomNode` trees in tests — the callback receives `(acc, tag, attrs)` where `attrs` is a plain JS object of string attribute values. CI runs `npm test` on pushes and PRs to `master` via GitHub Actions (`.github/workflows/test.yml`).
+
+## Architecture
+
+Compost.js is a composable data visualization library. The core is written in **F#** and compiled to **JavaScript** via **Fable 4**. The runtime dependency is `virtual-dom` for efficient DOM updates in interactive charts.
+
+### F# Source (`src/compost/`)
+
+Three files, compiled in this order (defined in `compost.fsproj`):
+
+1. **`html.fs`** — `Compost.Html` module. Low-level JS interop layer:
+   - `Common` module: `[<Emit>]`-based helpers for JS operations (property access, typeof, date formatting)
+   - `Virtualdom` module: `[<Import>]` bindings to `virtual-dom` (h, diff, patch, createElement)
+   - `DomNode`/`DomAttribute` types and HTML/SVG rendering
+   - `foldDom`: generic fold over `DomNode` trees (used in tests to inspect rendered SVG)
+   - `createVirtualDomApp`: stateful interactive app loop using virtual-dom diffing
+
+2. **`core.fs`** — `Compost` namespace. The visualization engine (~800 lines):
+   - **Domain types**: `Value<'u>` (continuous `COV` or categorical `CAR`), `Scale<'v>`, `Shape<'vx,'vy>`, `Style`, `EventHandler`
+   - **Shape** is a discriminated union (Line, Bubble, Shape, Text, Image, Layered, Interactive, Axes, NestX/Y, Padding, etc.) — this is the core composable DSL
+   - Uses F# units of measure (`[<Measure>]`) for type-safe coordinate spaces
+   - `Scales` module: axis generation, range calculation
+   - `Projections` module: coordinate transformation (data space → pixel space)
+   - `Drawing` module: converts shapes → SVG elements
+   - `Events` module: routes mouse/touch events to interactive handlers
+   - `Derived` module: higher-level combinators (FillColor, StrokeColor, Column, Bar, Area)
+
+3. **`compost.fs`** — `main` module. The JavaScript API surface:
+   - Exposes `scale` (JsScale) and `compost` (JsCompost) objects
+   - Handles JS↔F# value conversion via `parseValue`/`formatValue` (numbers become `COV`, `[string, number]` arrays become `CAR`)
+   - All ~20 API methods (`render`, `interactive`, `overlay`, `axes`, `on`, etc.) are defined here
+
+### JavaScript Entry Points (`src/project/`)
+
+- **`standalone.js`** — Imports `scale`/`compost` from F# and assigns to `window.s`/`window.c`
+- **`demos.js`** — Interactive demo examples used by the dev server (`index.html`)
+- **`data.js`** — Demo datasets (elections, exchange rates, iris)
+
+### Build Outputs
+
+- **`dist/`** — ES modules for npm (`compost.js` is the entry point, `"main"` in package.json)
+- **`docs/releases/`** — Standalone IIFE bundles for `<script>` tag usage
+
+### How Fable Compilation Works
+
+`dotnet fable` compiles `.fs` files to `.fs.js` files. During `npm start` (watch mode), these appear next to the source files (`src/compost/*.fs.js`). During `npm run build`, they go to `dist/` via the `-o` flag. Fable library dependencies go into `fable_modules/`. Vite (or any bundler) then treats the `.js` output as standard ES modules.
+
+## Key Patterns
+
+- The JS API uses `obj` and `box`/`unbox` heavily for dynamic typing at the JS boundary. The F# internals are fully typed with units of measure.
+- `[<Emit("...")>]` is used for inline JS expressions (property access, typeof, Date operations).
+- `[<Import("name","module")>]` is used for virtual-dom imports.
+- `JsInterop.createObj` creates plain JS objects from F# key-value sequences.
+- Interactive charts use a virtual-dom update cycle: event → update function → render function → diff/patch.

package/README.md

@@ -33,6 +33,20 @@ JavaScript file that is added to the `releases` folder of the `docs` with the cu
 version number in the filename (and also updates the `latest` file).
 This should all happen automatically when using `npm run release`.
 
+### Releasing Compost
+
+Before releasing, make sure all changes are committed. Then run:
+
+```
+npm run release
+```
+
+This runs three steps in order:
+
+1. **`npm run release:version`** — bumps the version in `package.json` and creates a git commit and tag (via `np`)
+2. **`npm run release:standalone`** — builds the standalone bundle and commits it to git
+3. **`npm run release:publish`** — rebuilds `dist/` and publishes to npm (prompts for 2FA)
+
 ## What is the story behind the name??
 
 ![Compost](https://github.com/compostjs/compost/raw/master/compost.gif)

package/dist/compost.js

@@ -1,10 +1,10 @@
-import { Compost_createSvg, EventHandler, HorizontalAlign, VerticalAlign, Derived_Bar, Derived_Column, Derived_Font, Derived_StrokeColor, Derived_PreserveAspectRatio, Derived_FillColor, Shape, Scale, categorical, Value, continuous } from "./core.js";
-import { printf, toFail } from "./fable_modules/fable-library-js.4.28.0/String.js";
+import { Compost_createSvg, EventHandler, Derived_Bar, Derived_Column, Derived_Font, Derived_StrokeColor, Derived_PreserveAspectRatio, Derived_FillColor, Shape, StyleConfig, Scale, HorizontalAlign, VerticalAlign, categorical, Value, continuous } from "./core.js";
+import { join, printf, toFail } from "./fable_modules/fable-library-js.4.28.0/String.js";
 import { map as map_1, item } from "./fable_modules/fable-library-js.4.28.0/Array.js";
-import { toList, map, delay, toArray } from "./fable_modules/fable-library-js.4.28.0/Seq.js";
-import { ofArray } from "./fable_modules/fable-library-js.4.28.0/List.js";
-import { defaultOf, equals } from "./fable_modules/fable-library-js.4.28.0/Util.js";
-import { renderTo, createVirtualDomApp, DomNode, DomAttribute } from "./html.js";
+import { empty, append, toList, map, singleton, collect, delay, toArray } from "./fable_modules/fable-library-js.4.28.0/Seq.js";
+import { ofArray, ofSeq } from "./fable_modules/fable-library-js.4.28.0/List.js";
+import { createObj, equals, defaultOf } from "./fable_modules/fable-library-js.4.28.0/Util.js";
+import { foldDom, renderTo, createVirtualDomApp, DomNode, DomAttribute } from "./html.js";
 
 export function Helpers_formatValue(v) {
     if (v.tag === 1) {
@@ -34,6 +34,282 @@ export function Helpers_parseValue(v) {
     }
 }
 
+function Serialization_serValue() {
+    return Helpers_formatValue;
+}
+
+function Serialization_deserValue() {
+    return Helpers_parseValue;
+}
+
+function Serialization_serializeVerticalAlign(_arg) {
+    switch (_arg.tag) {
+        case 1:
+            return "middle";
+        case 2:
+            return "hanging";
+        default:
+            return "baseline";
+    }
+}
+
+function Serialization_deserializeVerticalAlign(_arg) {
+    switch (_arg) {
+        case "baseline":
+            return new VerticalAlign(0, []);
+        case "hanging":
+            return new VerticalAlign(2, []);
+        default:
+            return new VerticalAlign(1, []);
+    }
+}
+
+function Serialization_serializeHorizontalAlign(_arg) {
+    switch (_arg.tag) {
+        case 1:
+            return "center";
+        case 2:
+            return "end";
+        default:
+            return "start";
+    }
+}
+
+function Serialization_deserializeHorizontalAlign(_arg) {
+    switch (_arg) {
+        case "start":
+            return new HorizontalAlign(0, []);
+        case "end":
+            return new HorizontalAlign(2, []);
+        default:
+            return new HorizontalAlign(1, []);
+    }
+}
+
+function Serialization_serializeScale(_arg) {
+    if (_arg.tag === 1) {
+        return {
+            kind: "categorical",
+            cats: toArray(delay(() => collect((matchValue) => singleton(matchValue.fields[0]), _arg.fields[0]))),
+        };
+    }
+    else {
+        return {
+            kind: "continuous",
+            lo: _arg.fields[0].fields[0],
+            hi: _arg.fields[1].fields[0],
+        };
+    }
+}
+
+function Serialization_deserializeScale(o) {
+    const matchValue = o["kind"];
+    switch (matchValue) {
+        case "continuous":
+            return new Scale(0, [new continuous(o["lo"]), new continuous(o["hi"])]);
+        case "categorical":
+            return new Scale(1, [toArray(delay(() => map((c) => (new categorical(c)), o["cats"])))]);
+        default:
+            return toFail(printf("Unknown scale kind: %s"))(matchValue);
+    }
+}
+
+function Serialization_serializeStyleConfig(_arg) {
+    switch (_arg.tag) {
+        case 2:
+            return {
+                kind: "stroke",
+                color: _arg.fields[0],
+            };
+        case 3:
+            return {
+                kind: "font",
+                font: _arg.fields[0],
+                color: _arg.fields[1],
+            };
+        case 4:
+            return {
+                kind: "aspect",
+                value: _arg.fields[0],
+            };
+        case 0:
+            throw new Error("Cannot serialize Custom style config");
+        default:
+            return {
+                kind: "fill",
+                color: _arg.fields[0],
+            };
+    }
+}
+
+function Serialization_deserializeStyleConfig(o) {
+    const matchValue = o["kind"];
+    switch (matchValue) {
+        case "fill":
+            return new StyleConfig(1, [o["color"]]);
+        case "stroke":
+            return new StyleConfig(2, [o["color"]]);
+        case "font":
+            return new StyleConfig(3, [o["font"], o["color"]]);
+        case "aspect":
+            return new StyleConfig(4, [o["value"]]);
+        default:
+            return toFail(printf("Unknown style config kind: %s"))(matchValue);
+    }
+}
+
+function Serialization_serializePoints(pts) {
+    return toArray(delay(() => collect((matchValue) => singleton([Serialization_serValue()(matchValue[0]), Serialization_serValue()(matchValue[1])]), pts)));
+}
+
+export function Serialization_serializeShape(s) {
+    switch (s.tag) {
+        case 9:
+            return {
+                kind: "shape",
+                points: Serialization_serializePoints(ofSeq(s.fields[0])),
+            };
+        case 8:
+            return {
+                kind: "bubble",
+                x: Serialization_serValue()(s.fields[0]),
+                y: Serialization_serValue()(s.fields[1]),
+                w: s.fields[2],
+                h: s.fields[3],
+            };
+        case 2:
+            return {
+                kind: "text",
+                x: Serialization_serValue()(s.fields[0]),
+                y: Serialization_serValue()(s.fields[1]),
+                valign: Serialization_serializeVerticalAlign(s.fields[2]),
+                halign: Serialization_serializeHorizontalAlign(s.fields[3]),
+                rotation: s.fields[4],
+                text: s.fields[5],
+            };
+        case 0:
+            return {
+                kind: "image",
+                href: s.fields[0],
+                p1: [Serialization_serValue()(s.fields[1][0]), Serialization_serValue()(s.fields[1][1])],
+                p2: [Serialization_serValue()(s.fields[2][0]), Serialization_serValue()(s.fields[2][1])],
+            };
+        case 10:
+            return {
+                kind: "layered",
+                shapes: toArray(delay(() => map(Serialization_serializeShape, s.fields[0]))),
+            };
+        case 11:
+            return {
+                kind: "axes",
+                axes: join(" ", toList(delay(() => append(s.fields[0] ? singleton("top") : empty(), delay(() => append(s.fields[1] ? singleton("right") : empty(), delay(() => append(s.fields[2] ? singleton("bottom") : empty(), delay(() => (s.fields[3] ? singleton("left") : empty())))))))))),
+                shape: Serialization_serializeShape(s.fields[4]),
+            };
+        case 13:
+            return {
+                kind: "padding",
+                top: s.fields[0][0],
+                right: s.fields[0][1],
+                bottom: s.fields[0][2],
+                left: s.fields[0][3],
+                shape: Serialization_serializeShape(s.fields[1]),
+            };
+        case 5:
+            return {
+                kind: "nestx",
+                lx: Serialization_serValue()(s.fields[0]),
+                hx: Serialization_serValue()(s.fields[1]),
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        case 6:
+            return {
+                kind: "nesty",
+                ly: Serialization_serValue()(s.fields[0]),
+                hy: Serialization_serValue()(s.fields[1]),
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        case 4: {
+            const sy = s.fields[1];
+            const sx = s.fields[0];
+            return {
+                kind: "scale",
+                sx: (sx == null) ? defaultOf() : Serialization_serializeScale(sx),
+                sy: (sy == null) ? defaultOf() : Serialization_serializeScale(sy),
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        }
+        case 1:
+            return {
+                kind: "styled",
+                param: Serialization_serializeStyleConfig(s.fields[0]),
+                shape: Serialization_serializeShape(s.fields[1]),
+            };
+        case 3:
+            return {
+                kind: "autoscale",
+                x: s.fields[0],
+                y: s.fields[1],
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        case 14:
+            return {
+                kind: "offset",
+                dx: s.fields[0][0],
+                dy: s.fields[0][1],
+                shape: Serialization_serializeShape(s.fields[1]),
+            };
+        case 12:
+            throw new Error("Cannot serialize Interactive shapes");
+        default:
+            return {
+                kind: "line",
+                points: Serialization_serializePoints(ofSeq(s.fields[0])),
+            };
+    }
+}
+
+export function Serialization_deserializeShape(o) {
+    const matchValue = o["kind"];
+    switch (matchValue) {
+        case "line":
+            return new Shape(7, [toList(delay(() => map((p) => [Serialization_deserValue()(item(0, p)), Serialization_deserValue()(item(1, p))], o["points"])))]);
+        case "shape":
+            return new Shape(9, [toList(delay(() => map((p_1) => [Serialization_deserValue()(item(0, p_1)), Serialization_deserValue()(item(1, p_1))], o["points"])))]);
+        case "bubble":
+            return new Shape(8, [Serialization_deserValue()(o["x"]), Serialization_deserValue()(o["y"]), o["w"], o["h"]]);
+        case "text":
+            return new Shape(2, [Serialization_deserValue()(o["x"]), Serialization_deserValue()(o["y"]), Serialization_deserializeVerticalAlign(o["valign"]), Serialization_deserializeHorizontalAlign(o["halign"]), o["rotation"], o["text"]]);
+        case "image": {
+            const matchValue_1 = o["p1"];
+            const p2 = o["p2"];
+            const p1 = matchValue_1;
+            return new Shape(0, [o["href"], [Serialization_deserValue()(item(0, p1)), Serialization_deserValue()(item(1, p1))], [Serialization_deserValue()(item(0, p2)), Serialization_deserValue()(item(1, p2))]]);
+        }
+        case "layered":
+            return new Shape(10, [toList(delay(() => map(Serialization_deserializeShape, o["shapes"])))]);
+        case "axes": {
+            const a = o["axes"];
+            return new Shape(11, [a.indexOf("top") >= 0, a.indexOf("right") >= 0, a.indexOf("bottom") >= 0, a.indexOf("left") >= 0, Serialization_deserializeShape(o["shape"])]);
+        }
+        case "padding":
+            return new Shape(13, [[o["top"], o["right"], o["bottom"], o["left"]], Serialization_deserializeShape(o["shape"])]);
+        case "nestx":
+            return new Shape(5, [Serialization_deserValue()(o["lx"]), Serialization_deserValue()(o["hx"]), Serialization_deserializeShape(o["shape"])]);
+        case "nesty":
+            return new Shape(6, [Serialization_deserValue()(o["ly"]), Serialization_deserValue()(o["hy"]), Serialization_deserializeShape(o["shape"])]);
+        case "scale":
+            return new Shape(4, [equals(o["sx"], defaultOf()) ? undefined : Serialization_deserializeScale(o["sx"]), equals(o["sy"], defaultOf()) ? undefined : Serialization_deserializeScale(o["sy"]), Serialization_deserializeShape(o["shape"])]);
+        case "styled":
+            return new Shape(1, [Serialization_deserializeStyleConfig(o["param"]), Serialization_deserializeShape(o["shape"])]);
+        case "autoscale":
+            return new Shape(3, [o["x"], o["y"], Serialization_deserializeShape(o["shape"])]);
+        case "offset":
+            return new Shape(14, [[o["dx"], o["dy"]], Serialization_deserializeShape(o["shape"])]);
+        default:
+            return toFail(printf("Unknown shape kind: %s"))(matchValue);
+    }
+}
+
 export const scale = {
     continuous(lo, hi) {
         return new Scale(0, [new continuous(lo), new continuous(hi)]);
@@ -170,5 +446,22 @@ export const compost = {
         const el_1 = document.getElementById(id_1);
         renderTo(el_1, Compost_createSvg(false, false, el_1.clientWidth, el_1.clientHeight, viz));
     },
+    foldDom(f_3, acc, node) {
+        return foldDom((acc_1, _ns, tag_1, attrs_3) => f_3(acc_1, tag_1, createObj(toArray(delay(() => collect((matchValue) => {
+            const matchValue_1 = matchValue[1];
+            if (matchValue_1.tag === 1) {
+                return singleton([matchValue[0], matchValue_1.fields[0]]);
+            }
+            else {
+                return empty();
+            }
+        }, attrs_3))))), acc, node);
+    },
+    serialize(s_15) {
+        return Serialization_serializeShape(s_15);
+    },
+    deserialize(o_1) {
+        return Serialization_deserializeShape(o_1);
+    },
 };
 

package/dist/core.js

@@ -183,6 +183,38 @@ export function Style_$reflection() {
     return record_type("Compost.Style", [], Style, () => [["StrokeColor", tuple_type(float64_type, Color_$reflection())], ["StrokeWidth", Width_$reflection()], ["StrokeDashArray", class_type("System.Collections.Generic.IEnumerable`1", [Number$_$reflection()])], ["Fill", FillStyle_$reflection()], ["Animation", option_type(tuple_type(int32_type, string_type, lambda_type(Style_$reflection(), Style_$reflection())))], ["Font", string_type], ["Cursor", string_type], ["PreserveAspectRatio", string_type], ["FormatAxisXLabel", lambda_type(Scale_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), lambda_type(Value_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), string_type))], ["FormatAxisYLabel", lambda_type(Scale_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), lambda_type(Value_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), string_type))]]);
 }
 
+export class StyleConfig extends Union {
+    constructor(tag, fields) {
+        super();
+        this.tag = tag;
+        this.fields = fields;
+    }
+    cases() {
+        return ["Custom", "FillColor", "StrokeColor", "Font", "PreserveAspectRatio"];
+    }
+}
+
+export function StyleConfig_$reflection() {
+    return union_type("Compost.StyleConfig", [], StyleConfig, () => [[["Item", lambda_type(Style_$reflection(), Style_$reflection())]], [["Item", string_type]], [["Item", string_type]], [["Item1", string_type], ["Item2", string_type]], [["Item", string_type]]]);
+}
+
+export function StyleConfig__Apply_4E2CA0C5(this$, style) {
+    switch (this$.tag) {
+        case 1:
+            return new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [this$.fields[0]])]]), style.Animation, style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
+        case 2:
+            return new Style([1, new Color(1, [this$.fields[0]])], style.StrokeWidth, style.StrokeDashArray, style.Fill, style.Animation, style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
+        case 3: {
+            const clr_2 = this$.fields[1];
+            return new Style([0, new Color(1, [clr_2])], style.StrokeWidth, style.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [clr_2])]]), style.Animation, this$.fields[0], style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
+        }
+        case 4:
+            return new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, style.Fill, style.Animation, style.Font, style.Cursor, this$.fields[0], style.FormatAxisXLabel, style.FormatAxisYLabel);
+        default:
+            return this$.fields[0](style);
+    }
+}
+
 export class EventHandler extends Union {
     constructor(tag, fields) {
         super();
@@ -225,7 +257,7 @@ export class Shape extends Union {
 }
 
 export function Shape_$reflection(gen0, gen1) {
-    return union_type("Compost.Shape", [gen0, gen1], Shape, () => [[["Item1", string_type], ["Item2", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))], ["Item3", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))]], [["Item1", lambda_type(Style_$reflection(), Style_$reflection())], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", option_type(Scale_$reflection(gen0))], ["Item2", option_type(Scale_$reflection(gen1))], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [Shape_$reflection(gen0, gen1)])]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", bool_type], ["Item4", bool_type], ["Item5", Shape_$reflection(gen0, gen1)]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]]]);
+    return union_type("Compost.Shape", [gen0, gen1], Shape, () => [[["Item1", string_type], ["Item2", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))], ["Item3", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))]], [["Item1", StyleConfig_$reflection()], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", option_type(Scale_$reflection(gen0))], ["Item2", option_type(Scale_$reflection(gen1))], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [Shape_$reflection(gen0, gen1)])]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", bool_type], ["Item4", bool_type], ["Item5", Shape_$reflection(gen0, gen1)]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]]]);
 }
 
 export class Svg_StringBuilder {
@@ -407,7 +439,7 @@ export class Scales_ScaledShape extends Union {
 }
 
 export function Scales_ScaledShape_$reflection(gen0, gen1) {
-    return union_type("Compost.Scales.ScaledShape", [gen0, gen1], Scales_ScaledShape, () => [[["Item1", lambda_type(Style_$reflection(), Style_$reflection())], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", string_type], ["Item2", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))], ["Item3", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))]], [["Item", array_type(Scales_ScaledShape_$reflection(gen0, gen1))]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Scale_$reflection(gen0)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]]]);
+    return union_type("Compost.Scales.ScaledShape", [gen0, gen1], Scales_ScaledShape, () => [[["Item1", StyleConfig_$reflection()], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", string_type], ["Item2", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))], ["Item3", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))]], [["Item", array_type(Scales_ScaledShape_$reflection(gen0, gen1))]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Scale_$reflection(gen0)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]]]);
 }
 
 export function Scales_getExtremes(_arg) {
@@ -699,8 +731,8 @@ export function Scales_calculateScales(style, shape) {
             const lx = matchValue[0];
             const hy = matchValue_1[1];
             const hx = matchValue[1];
-            const LineStyle = (clr, alpha, width, shape_18) => (new Shape(1, [(s) => (new Style([alpha, new Color(1, [clr])], new Width(width), s.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["transparent"])]]), s.Animation, s.Font, s.Cursor, s.PreserveAspectRatio, s.FormatAxisXLabel, s.FormatAxisYLabel)), shape_18]));
-            const FontStyle = (style_2, shape_19) => (new Shape(1, [(s_1) => (new Style([0, new Color(1, ["transparent"])], s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["black"])]]), s_1.Animation, style_2, s_1.Cursor, s_1.PreserveAspectRatio, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), shape_19]));
+            const LineStyle = (clr, alpha, width, shape_18) => (new Shape(1, [new StyleConfig(0, [(s) => (new Style([alpha, new Color(1, [clr])], new Width(width), s.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["transparent"])]]), s.Animation, s.Font, s.Cursor, s.PreserveAspectRatio, s.FormatAxisXLabel, s.FormatAxisYLabel))]), shape_18]));
+            const FontStyle = (style_2, shape_19) => (new Shape(1, [new StyleConfig(0, [(s_1) => (new Style([0, new Color(1, ["transparent"])], s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["black"])]]), s_1.Animation, style_2, s_1.Cursor, s_1.PreserveAspectRatio, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel))]), shape_19]));
             return calculateScales(new Shape(13, [[showTop ? 30 : 0, showRight ? 50 : 0, showBottom ? 30 : 0, showLeft ? 50 : 0], new Shape(10, [toList(delay(() => append(singleton(new Shape(4, [sx_4, sy_4, new Shape(10, [toList(delay(() => append(map_1((x_2) => LineStyle("#e4e4e4", 1, 1, new Shape(7, [[[x_2, ly], [x_2, hy]]])), Scales_generateAxisSteps(sx_4)), delay(() => map_1((y_2) => LineStyle("#e4e4e4", 1, 1, new Shape(7, [[[lx, y_2], [hx, y_2]]])), Scales_generateAxisSteps(sy_4))))))])])), delay(() => append(showTop ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[lx, hy], [hx, hy]]]))), delay(() => collect((matchValue_2) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[0, -10], new Shape(2, [matchValue_2[0], hy, new VerticalAlign(0, []), new HorizontalAlign(1, []), 0, matchValue_2[1]])]))), Scales_generateAxisLabels(style.FormatAxisXLabel, sx_4)))) : empty_1(), delay(() => append(showRight ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[hx, hy], [hx, ly]]]))), delay(() => collect((matchValue_3) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[10, 0], new Shape(2, [hx, matchValue_3[0], new VerticalAlign(1, []), new HorizontalAlign(0, []), 0, matchValue_3[1]])]))), Scales_generateAxisLabels(style.FormatAxisYLabel, sy_4)))) : empty_1(), delay(() => append(showBottom ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[lx, ly], [hx, ly]]]))), delay(() => collect((matchValue_4) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[0, 10], new Shape(2, [matchValue_4[0], ly, new VerticalAlign(2, []), new HorizontalAlign(1, []), 0, matchValue_4[1]])]))), Scales_generateAxisLabels(style.FormatAxisXLabel, sx_4)))) : empty_1(), delay(() => append(showLeft ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[lx, hy], [lx, ly]]]))), delay(() => collect((matchValue_5) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[-10, 0], new Shape(2, [lx, matchValue_5[0], new VerticalAlign(1, []), new HorizontalAlign(2, []), 0, matchValue_5[1]])]))), Scales_generateAxisLabels(style.FormatAxisYLabel, sy_4)))) : empty_1(), delay(() => singleton(shape_17)))))))))))))])]));
         }
         case 10: {
@@ -715,9 +747,9 @@ export function Scales_calculateScales(style, shape) {
             return [scales_9, new Scales_ScaledShape(7, [shape.fields[0], scales_9[0], scales_9[1], patternInput_10[1]])];
         }
         default: {
-            const f = shape.fields[0];
-            const patternInput = Scales_calculateScales(f(style), shape.fields[1]);
-            return [patternInput[0], new Scales_ScaledShape(0, [f, patternInput[1]])];
+            const sc = shape.fields[0];
+            const patternInput = Scales_calculateScales(StyleConfig__Apply_4E2CA0C5(sc, style), shape.fields[1]);
+            return [patternInput[0], new Scales_ScaledShape(0, [sc, patternInput[1]])];
         }
     }
 }
@@ -852,7 +884,7 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
             case 6:
                 return new Svg_Svg(5, [map((shape_4) => Drawing_drawShape(ctx, area_1[0], area_1[1], area_1[2], area_1[3], scales_1[0], scales_1[1], shape_4), shape.fields[0])]);
             case 0: {
-                ctx_mut = (new Drawing_DrawingContext(shape.fields[0](ctx.Style), ctx.Definitions));
+                ctx_mut = (new Drawing_DrawingContext(StyleConfig__Apply_4E2CA0C5(shape.fields[0], ctx.Style), ctx.Definitions));
                 area__mut = area_1[0];
                 area__1_mut = area_1[1];
                 area__2_mut = area_1[2];
@@ -1373,19 +1405,19 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
 }
 
 export function Derived_PreserveAspectRatio(pa, s) {
-    return new Shape(1, [(s_1) => (new Style(s_1.StrokeColor, s_1.StrokeWidth, s_1.StrokeDashArray, s_1.Fill, s_1.Animation, s_1.Font, s_1.Cursor, pa, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(4, [pa]), s]);
 }
 
 export function Derived_StrokeColor(clr, s) {
-    return new Shape(1, [(s_1) => (new Style([1, new Color(1, [clr])], s_1.StrokeWidth, s_1.StrokeDashArray, s_1.Fill, s_1.Animation, s_1.Font, s_1.Cursor, s_1.PreserveAspectRatio, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(2, [clr]), s]);
 }
 
 export function Derived_FillColor(clr, s) {
-    return new Shape(1, [(s_1) => (new Style(s_1.StrokeColor, s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [clr])]]), s_1.Animation, s_1.Font, s_1.Cursor, s_1.PreserveAspectRatio, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(1, [clr]), s]);
 }
 
 export function Derived_Font(font, clr, s) {
-    return new Shape(1, [(s_1) => (new Style([0, new Color(1, [clr])], s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [clr])]]), s_1.Animation, font, s_1.Cursor, s_1.PreserveAspectRatio, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(3, [font, clr]), s]);
 }
 
 export function Derived_Area(line) {

package/dist/html.js

@@ -7,7 +7,7 @@ import { equals, createAtom, defaultOf, createObj, disposeSafe, getEnumerator }
 import { array_type, tuple_type, union_type, obj_type, string_type, lambda_type, unit_type, class_type } from "./fable_modules/fable-library-js.4.28.0/Reflection.js";
 import { patch, diff, h as h_1 } from "virtual-dom";
 import { toArray as toArray_1, singleton, empty, append as append_1 } from "./fable_modules/fable-library-js.4.28.0/List.js";
-import { item, map as map_1 } from "./fable_modules/fable-library-js.4.28.0/Array.js";
+import { fold, item, map as map_1 } from "./fable_modules/fable-library-js.4.28.0/Array.js";
 import { Event as Event$ } from "./fable_modules/fable-library-js.4.28.0/Event.js";
 import { startImmediate } from "./fable_modules/fable-library-js.4.28.0/Async.js";
 import { singleton as singleton_1 } from "./fable_modules/fable-library-js.4.28.0/AsyncBuilder.js";
@@ -212,6 +212,15 @@ export function createVirtualDomApp(id, initial, r, u) {
     }, event.Publish);
 }
 
+export function foldDom(f, acc, node) {
+    if (node.tag === 1) {
+        return fold((acc_2, node_1) => foldDom(f, acc_2, node_1), f(acc, node.fields[0], node.fields[1], node.fields[2]), node.fields[3]);
+    }
+    else {
+        return acc;
+    }
+}
+
 export function text(s_1) {
     return new DomNode(0, [s_1]);
 }

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "compostjs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Composable data visualization library for JavaScript",
   "author": "Tomas Petricek",
   "license": "MIT",
   "scripts": {
     "start": "dotnet fable watch src/compost/compost.fsproj --run npx vite",
-    "build": "dotnet fable src/compost/compost.fsproj -o dist && rm dist/fable_modules/.gitignore",
+    "build": "dotnet fable src/compost/compost.fsproj -o dist && rm -f dist/fable_modules/.gitignore",
     "rebuild": "rm -rf dist && npm run build",
     "standalone": "dotnet fable src/compost/compost.fsproj --run npx vite build && sh copy-latest.sh",
-    "updatejs": "npm run standalone && git add . && git commit -m \"Update standalone release file in docs\"",
-    "release": "np --yolo --no-release-draft --no-publish && npm run updatejs && npm run rebuild && npm publish"
+    "test": "dotnet fable src/compost/compost.fsproj && npx vitest run",
+    "release:version": "np --yolo --no-release-draft --no-publish",
+    "release:standalone": "npm run standalone && git add . && git commit -m \"Update standalone release file in docs\"",
+    "release:publish": "npm run rebuild && npm publish",
+    "release": "npm run release:version && npm run release:standalone && npm run release:publish"
   },
   "repository": {
     "type": "git",
@@ -32,6 +35,7 @@
   },
   "devDependencies": {
     "np": "^11.0.2",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
   }
 }

package/test/compost.test.js

@@ -0,0 +1,116 @@
+import { describe, it, expect } from 'vitest';
+import { scale as s, compost as c } from '../src/compost/compost.fs.js';
+
+// Collect all elements matching a predicate using the F# foldDom helper.
+// The fold callback receives (acc, tag, attrs) where attrs is a plain
+// object with string attribute values (Events/Properties are excluded).
+function findElements(node, pred) {
+  return c.foldDom((acc, tag, attrs) => {
+    if (pred(tag, attrs)) acc.push({ tag, attrs });
+    return acc;
+  }, [], node);
+}
+
+// Parse an SVG path "d" attribute into an array of {cmd, x, y} objects.
+// Handles format like "M0 200 L200 0 " where command letter is directly
+// followed by the x coordinate.
+function parsePath(d) {
+  const coords = [];
+  for (const m of d.matchAll(/([ML])(-?[\d.]+)\s+(-?[\d.]+)/g)) {
+    coords.push({ cmd: m[1], x: parseFloat(m[2]), y: parseFloat(m[3]) });
+  }
+  return coords;
+}
+
+describe('style rendering', () => {
+  it('renders a shape with fill color set', () => {
+    const sh = c.shape([[0, 0], [1, 0], [1, 1], [0, 1]]);
+    const svg = c.svg(200, 200, c.fillColor("red", sh));
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+    expect(paths[0].attrs.style).toContain('fill:red');
+  });
+
+  it('renders a line with stroke color set', () => {
+    const line = c.line([[0, 0], [1, 1]]);
+    const svg = c.svg(200, 200, c.strokeColor("blue", line));
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+    expect(paths[0].attrs.style).toContain('stroke:blue');
+  });
+});
+
+describe('svg rendering', () => {
+  it('renders a line from (0,0) to (1,1) as an SVG path', () => {
+    const line = c.line([[0, 0], [1, 1]]);
+    const svg = c.svg(200, 200, line);
+
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+
+    const coords = parsePath(paths[0].attrs.d);
+
+    // X: 0->0, 1->200.  Y: 0->200, 1->0 (SVG Y-axis is inverted)
+    expect(coords).toHaveLength(2);
+    expect(coords[0]).toEqual({ cmd: 'M', x: 0, y: 200 });
+    expect(coords[1]).toEqual({ cmd: 'L', x: 200, y: 0 });
+  });
+
+  it('renders a column as a path filling the full SVG area', () => {
+    const col = c.column("test", 10);
+    const svg = c.svg(200, 200, col);
+
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+
+    const coords = parsePath(paths[0].attrs.d);
+
+    // Single column auto-scales to fill the entire 200x200 area
+    // Closed path covering all four corners
+    expect(coords).toHaveLength(5);
+    expect(coords[0]).toEqual({ cmd: 'M', x: 0,   y: 0 });
+    expect(coords[1]).toEqual({ cmd: 'L', x: 200, y: 0 });
+    expect(coords[2]).toEqual({ cmd: 'L', x: 200, y: 200 });
+    expect(coords[3]).toEqual({ cmd: 'L', x: 0,   y: 200 });
+    expect(coords[4]).toEqual({ cmd: 'L', x: 0,   y: 0 });
+  });
+});
+
+describe('serialization', () => {
+  it('round-trips a line through serialize/deserialize', () => {
+    const line = c.line([[0, 0], [1, 1]]);
+    const line2 = c.deserialize(c.serialize(line));
+    const paths1 = findElements(c.svg(200, 200, line), (tag) => tag === 'path');
+    const paths2 = findElements(c.svg(200, 200, line2), (tag) => tag === 'path');
+    expect(paths2[0].attrs.d).toEqual(paths1[0].attrs.d);
+  });
+
+  it('round-trips a styled shape through serialize/deserialize', () => {
+    const shape = c.fillColor("red", c.strokeColor("blue", c.line([[0, 0], [1, 1]])));
+    const shape2 = c.deserialize(c.serialize(shape));
+    const paths1 = findElements(c.svg(200, 200, shape), (tag) => tag === 'path');
+    const paths2 = findElements(c.svg(200, 200, shape2), (tag) => tag === 'path');
+    expect(paths2[0].attrs.style).toEqual(paths1[0].attrs.style);
+    expect(paths2[0].attrs.d).toEqual(paths1[0].attrs.d);
+  });
+
+  it('round-trips a multi-series bar chart through serialize/deserialize', () => {
+    const chart = c.axes("left bottom",
+      c.scaleY(s.continuous(0, 50),
+        c.overlay([
+          c.padding(0, 5, 0, 5, c.fillColor("#DC4B4A", c.column("apples", 30))),
+          c.padding(0, 5, 0, 5, c.fillColor("#424498", c.column("plums", 20))),
+          c.padding(0, 5, 0, 5, c.fillColor("#A0CB5B", c.column("kiwi", 40))),
+        ])
+      )
+    );
+    const chart2 = c.deserialize(c.serialize(chart));
+    const paths1 = findElements(c.svg(400, 300, chart), (tag) => tag === 'path');
+    const paths2 = findElements(c.svg(400, 300, chart2), (tag) => tag === 'path');
+    expect(paths2.length).toBe(paths1.length);
+    paths1.forEach((p, i) => {
+      expect(paths2[i].attrs.d).toEqual(p.attrs.d);
+      expect(paths2[i].attrs.style).toEqual(p.attrs.style);
+    });
+  });
+});