feat(hiccup-svg): allow child elements in shapes

- update all shape functions to allow optional child elements
  (e.g. required for adding <animate>, <title>, <desc> etc.)

packages/hiccup-svg/src/circle.ts

@@ -1,12 +1,18 @@
 import { fattribs, ff } from "./format";
 import type { Vec2Like } from "./api";
 
-export const circle = (p: Vec2Like, r: number, attribs?: any): any[] => [
+export const circle = (
+    p: Vec2Like,
+    r: number,
+    attribs?: any,
+    ...body: any[]
+): any[] => [
     "circle",
     fattribs({
         ...attribs,
         cx: ff(p[0]),
         cy: ff(p[1]),
         r: ff(r),
     }),
+    ...body,
 ];

packages/hiccup-svg/src/ellipse.ts

@@ -5,7 +5,8 @@ export const ellipse = (
     p: Vec2Like,
     rx: number,
     ry: number,
-    attribs?: any
+    attribs?: any,
+    ...body: any[]
 ): any[] => [
     "ellipse",
     fattribs({
@@ -15,4 +16,5 @@ export const ellipse = (
         rx: ff(rx),
         ry: ff(ry),
     }),
+    ...body,
 ];

packages/hiccup-svg/src/image.ts

@@ -1,7 +1,12 @@
 import { fattribs, ff } from "./format";
 import type { Vec2Like } from "./api";
 
-export const image = (pos: Vec2Like, url: string, attribs?: any): any[] => [
+export const image = (
+    pos: Vec2Like,
+    url: string,
+    attribs?: any,
+    ...body: any[]
+): any[] => [
     "image",
     fattribs({
         ...attribs,
@@ -10,4 +15,5 @@ export const image = (pos: Vec2Like, url: string, attribs?: any): any[] => [
         x: ff(pos[0]),
         y: ff(pos[1]),
     }),
+    ...body,
 ];

packages/hiccup-svg/src/line.ts

@@ -1,7 +1,12 @@
 import { fattribs, ff } from "./format";
 import type { Vec2Like } from "./api";
 
-export const line = (a: Vec2Like, b: Vec2Like, attribs?: any): any[] => [
+export const line = (
+    a: Vec2Like,
+    b: Vec2Like,
+    attribs?: any,
+    ...body: any[]
+): any[] => [
     "line",
     fattribs({
         ...attribs,
@@ -10,6 +15,7 @@ export const line = (a: Vec2Like, b: Vec2Like, attribs?: any): any[] => [
         x2: ff(b[0]),
         y2: ff(b[1]),
     }),
+    ...body,
 ];
 
 export const hline = (y: number, attribs?: any) =>

packages/hiccup-svg/src/path.ts

@@ -3,7 +3,11 @@ import type { PathSegment } from "./api";
 
 const DEG = 180 / Math.PI;
 
-export const path = (segments: PathSegment[], attribs?: any): any[] => {
+export const path = (
+    segments: PathSegment[],
+    attribs?: any,
+    ...body: any[]
+): any[] => {
     let res = [];
     for (let seg of segments) {
         res.push(seg[0]);
@@ -41,5 +45,5 @@ export const path = (segments: PathSegment[], attribs?: any): any[] => {
                 res.push(fpoints((<any>seg).slice(1), ","));
         }
     }
-    return ["path", fattribs({ ...attribs, d: res.join("") })];
+    return ["path", fattribs({ ...attribs, d: res.join("") }), ...body];
 };

packages/hiccup-svg/src/points.ts

@@ -20,11 +20,13 @@ export const points = (
     pts: Iterable<Vec2Like>,
     shape: string,
     size = 1,
-    attribs?: any
+    attribs?: any,
+    ...body: any[]
 ): any[] => {
     const group = [
         "g",
         fattribs(withoutKeys(attribs, new Set(["shape", "size"]))),
+        ...body,
     ];
     const href = buildSymbol(group, shape, size);
     for (let p of pts) {
@@ -56,7 +58,8 @@ export const packedPoints = (
     pts: ArrayLike<number>,
     shape: string,
     size = 1,
-    attribs?: any
+    attribs?: any,
+    ...body: any[]
 ): any[] => {
     attribs = {
         start: 0,
@@ -77,6 +80,7 @@ export const packedPoints = (
                 new Set(["start", "cstride", "estride", "shape", "size", "num"])
             )
         ),
+        ...body,
     ];
     const href = buildSymbol(group, shape, size);
     for (let i = start; --num >= 0; i += estride) {

packages/hiccup-svg/src/polygon.ts

@@ -1,10 +1,15 @@
 import { fattribs, fpoints } from "./format";
 import type { Vec2Like } from "./api";
 
-export const polygon = (pts: Vec2Like[], attribs?: any): any[] => [
+export const polygon = (
+    pts: Vec2Like[],
+    attribs?: any,
+    ...body: any[]
+): any[] => [
     "polygon",
     fattribs({
         ...attribs,
         points: fpoints(pts),
     }),
+    ...body,
 ];

packages/hiccup-svg/src/polyline.ts

@@ -1,11 +1,16 @@
 import { fattribs, fpoints } from "./format";
 import type { Vec2Like } from "./api";
 
-export const polyline = (pts: Vec2Like[], attribs?: any): any[] => [
+export const polyline = (
+    pts: Vec2Like[],
+    attribs?: any,
+    ...body: any[]
+): any[] => [
     "polyline",
     fattribs({
         fill: "none",
         points: fpoints(pts),
         ...attribs,
     }),
+    ...body,
 ];

packages/hiccup-svg/src/rect.ts

@@ -5,16 +5,18 @@ export const rect = (
     p: Vec2Like,
     width: number,
     height: number,
-    attribs?: any
-) => roundedRect(p, width, height, 0, 0, attribs);
+    attribs?: any,
+    ...body: any[]
+) => roundedRect(p, width, height, 0, 0, attribs, ...body);
 
 export const roundedRect = (
     p: Vec2Like,
     width: number,
     height: number,
     rx: number,
     ry: number,
-    attribs?: any
+    attribs?: any,
+    ...body: any[]
 ): any[] => {
     attribs = fattribs({
         ...attribs,
@@ -27,5 +29,5 @@ export const roundedRect = (
         attribs.rx = ff(rx);
         attribs.ry = ff(ry);
     }
-    return ["rect", attribs];
+    return ["rect", attribs, ...body];
 };

packages/hiccup-svg/src/text.ts

@@ -1,12 +1,18 @@
 import { fattribs, ff } from "./format";
 import type { Vec2Like } from "./api";
 
-export const text = (p: Vec2Like, body: string, attribs?: any): any[] => [
+export const text = (
+    p: Vec2Like,
+    body: string,
+    attribs?: any,
+    ...xs: any[]
+): any[] => [
     "text",
     fattribs({
         ...attribs,
         x: ff(p[0]),
         y: ff(p[1]),
     }),
     body,
+    ...xs,
 ];