layerchart 2.0.0-next.1 → 2.0.0-next.3

package/dist/components/RectClipPath.svelte

@@ -1,25 +1,89 @@
-<script lang="ts">
-  import type { ComponentProps } from 'svelte';
-  import { uniqueId } from '@layerstack/utils';
+<script lang="ts" module>
+  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
 
-  import ClipPath from './ClipPath.svelte';
-  import Rect from './Rect.svelte';
+  export type BaseRectClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+
+    /**
+     * The x position of the clipPath.
+     *
+     * @default 0
+     */
+    x?: number;
+
+    /**
+     * The y position of the clipPath.
+     *
+     * @default 0
+     */
+    y?: number;
+
+    /**
+     * The width of the clipPath.
+     *
+     * @required
+     */
+    width: number;
+
+    /**
+     * The height of the clipPath.
+     *
+     * @required
+     */
+    height: number;
+
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
 
-  /** Unique id for clipPath */
-  export let id: string = uniqueId('clipPath-');
+    /**
+     * The default children snippet which provides
+     * the id and url for the clipPath.
+     */
+    children?: Snippet<[{ id: string; url: string }]>;
+
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+  };
+
+  export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML &
+    Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
+
+  export type RectClipPathProps = RectClipPathPropsWithoutHTML &
+    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import ClipPath from './ClipPath.svelte';
+  import { createId } from '../utils/createId.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import type { MotionProp } from '../utils/motion.svelte.js';
 
-  export let x: number = 0;
-  export let y: number = 0;
-  export let width: number;
-  export let height: number;
-  export let spring: ComponentProps<Rect>['spring'] = undefined;
-  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
+  const uid = $props.id();
 
-  /** Disable clipping (show all) */
-  export let disabled: boolean = false;
+  let {
+    id = createId('clipPath-', uid),
+    x = 0,
+    y = 0,
+    disabled = false,
+    children: childrenProp,
+    ...restProps
+  }: RectClipPathProps = $props();
 </script>
 
-<ClipPath {id} {disabled} let:url>
-  <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} {...$$restProps} />
-  <slot {id} {url} />
+<ClipPath {id} {disabled}>
+  {#snippet clip()}
+    <Rect {x} {y} {...extractLayerProps(restProps, 'clip-path-rect')} />
+  {/snippet}
+  {#snippet children({ url })}
+    {@render childrenProp?.({ id, url })}
+  {/snippet}
 </ClipPath>

package/dist/components/RectClipPath.svelte.d.ts

@@ -0,0 +1,55 @@
+import { type RectPropsWithoutHTML } from './Rect.svelte';
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type BaseRectClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+    /**
+     * The x position of the clipPath.
+     *
+     * @default 0
+     */
+    x?: number;
+    /**
+     * The y position of the clipPath.
+     *
+     * @default 0
+     */
+    y?: number;
+    /**
+     * The width of the clipPath.
+     *
+     * @required
+     */
+    width: number;
+    /**
+     * The height of the clipPath.
+     *
+     * @required
+     */
+    height: number;
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The default children snippet which provides
+     * the id and url for the clipPath.
+     */
+    children?: Snippet<[{
+        id: string;
+        url: string;
+    }]>;
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+};
+export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML & Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
+export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+import type { MotionProp } from '../utils/motion.svelte.js';
+declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
+type RectClipPath = ReturnType<typeof RectClipPath>;
+export default RectClipPath;

package/dist/components/Rule.svelte

@@ -1,42 +1,78 @@
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type BaseRulePropsWithoutHTML = {
+    /**
+     * Create a vertical `x` line
+     * - If true or 'left', will draw at chart left (xRange[0])
+     * - If 'right', will draw at chart right (xRange[1])
+     * - Use `0` for baseline (yScale(0))
+     * - Use number | Date value for annotation (yScale(value))
+     *
+     * @default false
+     */
+    x?: number | Date | boolean | 'left' | 'right';
+
+    /**
+     * Pixel offset to apply to `x` coordinate
+     *
+     * @default 0
+     */
+    xOffset?: number;
+
+    /**
+     * Create a horizontal `y` line
+     * - If true or 'bottom', will draw at chart bottom (yRange[0])
+     * - If 'top', will draw at chart top (yRange[1])
+     * - Use `0` for baseline (xScale(0))
+     * - Use number | Date value for annotation (xScale(value))
+     *
+     * @default false
+     */
+    y?: number | Date | boolean | 'top' | 'bottom';
+
+    /**
+     * Pixel offset to apply to `y` coordinate
+     * @default 0
+     */
+    yOffset?: number;
+  };
+
+  export type RulePropsWithoutHTML = BaseRulePropsWithoutHTML &
+    Without<Partial<LinePropsWithoutHTML>, BaseRulePropsWithoutHTML>;
+
+  export type RuleProps = RulePropsWithoutHTML &
+    Without<SVGAttributes<SVGElement>, RulePropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import { chartContext } from './ChartContext.svelte';
   import Circle from './Circle.svelte';
-  import Line from './Line.svelte';
-
-  const { xScale, yScale, xRange, yRange, radial } = chartContext();
-
-  $: [xRangeMin, xRangeMax] = extent<number | Date>($xRange);
-  $: [yRangeMin, yRangeMax] = extent<number | Date>($yRange);
-
-  /**
-   * Create a vertical `x` line
-   * - If true or 'left', will draw at chart left (xRange[0])
-   * - If 'right', will draw at chart right (xRange[1])
-   * - Use `0` for baseline (yScale(0))
-   * - Use number | Date value for annotation (yScale(value))
-   */
-  export let x: number | Date | boolean | 'left' | 'right' = false;
-
-  /** Pixel offset to apply to `x` coordinate */
-  export let xOffset = 0;
-
-  /**
-   * Create a horizontal `y` line
-   * - If true or 'bottom', will draw at chart bottom (yRange[0])
-   * - If 'top', will draw at chart top (yRange[1])
-   * - Use `0` for baseline (xScale(0))
-   * - Use number | Date value for annotation (xScale(value))
-   */
-  export let y: number | Date | boolean | 'top' | 'bottom' = false;
-
-  /** Pixel offset to apply to `y` coordinate */
-  export let yOffset = 0;
-
-  $: showRule = (value: typeof x | typeof y, axis: 'x' | 'y') => {
+  import Group from './Group.svelte';
+  import Line, { type LinePropsWithoutHTML } from './Line.svelte';
+  import { getChartContext } from './Chart.svelte';
+  import { layerClass } from '../utils/attributes.js';
+
+  let {
+    x = false,
+    xOffset = 0,
+    y = false,
+    yOffset = 0,
+    class: className,
+    children,
+    ...restProps
+  }: RuleProps = $props();
+
+  const ctx = getChartContext();
+
+  const xRangeMinMax = $derived(extent<number | Date>(ctx.xRange));
+  const yRangeMinMax = $derived(extent<number | Date>(ctx.yRange));
+
+  function showRule(value: typeof x | typeof y, axis: 'x' | 'y') {
     switch (typeof value) {
       case 'boolean':
         return value;
@@ -44,70 +80,78 @@
         return true;
       default:
         if (axis === 'x') {
-          return $xScale(value) >= xRangeMin! && $xScale(value) <= xRangeMax!;
+          return ctx.xScale(value) >= xRangeMinMax[0]! && ctx.xScale(value) <= xRangeMinMax[1]!;
         } else {
-          return $yScale(value) >= yRangeMin! && $yScale(value) <= yRangeMax!;
+          return ctx.yScale(value) >= yRangeMinMax[0]! && ctx.yScale(value) <= yRangeMinMax[1]!;
         }
     }
-  };
+  }
 </script>
 
-<g class="rule">
+<Group class={layerClass('rule-g')}>
   {#if showRule(x, 'x')}
     {@const xCoord =
-      x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x) + xOffset}
+      x === true || x === 'left'
+        ? xRangeMinMax[0]
+        : x === 'right'
+          ? xRangeMinMax[1]
+          : ctx.xScale(x) + xOffset}
 
-    {#if $radial}
-      {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMin))}
-      {@const [x2, y2] = pointRadial(xCoord, Number(yRangeMax))}
+    {#if ctx.radial}
+      {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMinMax[0]))}
+      {@const [x2, y2] = pointRadial(xCoord, Number(yRangeMinMax[1]))}
 
       <Line
+        {...restProps}
         {x1}
         {y1}
         {x2}
         {y2}
-        {...$$restProps}
-        class={cls('stroke-surface-content/10', $$props.class)}
+        class={cls(layerClass('rule-x-radial-line'), 'stroke-surface-content/10', className)}
       />
     {:else}
       <Line
+        {...restProps}
         x1={xCoord}
         x2={xCoord}
-        y1={$yRange[0] || 0}
-        y2={$yRange[1] || 0}
-        {...$$restProps}
-        class={cls('stroke-surface-content/50', $$props.class)}
+        y1={ctx.yRange[0] || 0}
+        y2={ctx.yRange[1] || 0}
+        class={cls(layerClass('rule-x-line'), 'stroke-surface-content/50', className)}
       />
     {/if}
   {/if}
 
   {#if showRule(y, 'y')}
-    {#if $radial}
+    {#if ctx.radial}
       <Circle
         r={y === true || y === 'bottom'
-          ? yRangeMax
+          ? yRangeMinMax[1]
           : y === 'top'
-            ? yRangeMin
-            : $yScale(y) + yOffset}
-        class={cls('fill-none stroke-surface-content/50', $$props.class)}
+            ? yRangeMinMax[0]
+            : ctx.yScale(y) + yOffset}
+        class={cls(
+          layerClass('rule-y-radial-circle'),
+          'fill-none stroke-surface-content/50',
+          className
+        )}
       />
     {:else}
       <Line
-        x1={$xRange[0] || 0}
-        x2={$xRange[1] || 0}
+        {...restProps}
+        x1={ctx.xRange[0] || 0}
+        x2={ctx.xRange[1] || 0}
         y1={y === true || y === 'bottom'
-          ? yRangeMax
+          ? yRangeMinMax[1]
           : y === 'top'
-            ? yRangeMin
-            : $yScale(y) + yOffset}
+            ? yRangeMinMax[0]
+            : ctx.yScale(y) + yOffset}
         y2={y === true || y === 'bottom'
-          ? yRangeMax
+          ? yRangeMinMax[1]
           : y === 'top'
-            ? yRangeMin
-            : $yScale(y) + yOffset}
-        {...$$restProps}
-        class={cls('stroke-surface-content/50', $$props.class)}
+            ? yRangeMinMax[0]
+            : ctx.yScale(y) + yOffset}
+        class={cls(layerClass('rule-y-line'), 'stroke-surface-content/50', className)}
       />
     {/if}
   {/if}
-</g>
+</Group>

package/dist/components/Rule.svelte.d.ts

@@ -1,20 +1,41 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        x?: (number | Date | boolean | "left" | "right") | undefined;
-        xOffset?: number | undefined;
-        y?: (number | Date | boolean | "top" | "bottom") | undefined;
-        yOffset?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+export type BaseRulePropsWithoutHTML = {
+    /**
+     * Create a vertical `x` line
+     * - If true or 'left', will draw at chart left (xRange[0])
+     * - If 'right', will draw at chart right (xRange[1])
+     * - Use `0` for baseline (yScale(0))
+     * - Use number | Date value for annotation (yScale(value))
+     *
+     * @default false
+     */
+    x?: number | Date | boolean | 'left' | 'right';
+    /**
+     * Pixel offset to apply to `x` coordinate
+     *
+     * @default 0
+     */
+    xOffset?: number;
+    /**
+     * Create a horizontal `y` line
+     * - If true or 'bottom', will draw at chart bottom (yRange[0])
+     * - If 'top', will draw at chart top (yRange[1])
+     * - Use `0` for baseline (xScale(0))
+     * - Use number | Date value for annotation (xScale(value))
+     *
+     * @default false
+     */
+    y?: number | Date | boolean | 'top' | 'bottom';
+    /**
+     * Pixel offset to apply to `y` coordinate
+     * @default 0
+     */
+    yOffset?: number;
 };
-export type RuleProps = typeof __propDef.props;
-export type RuleEvents = typeof __propDef.events;
-export type RuleSlots = typeof __propDef.slots;
-export default class Rule extends SvelteComponentTyped<RuleProps, RuleEvents, RuleSlots> {
-}
-export {};
+export type RulePropsWithoutHTML = BaseRulePropsWithoutHTML & Without<Partial<LinePropsWithoutHTML>, BaseRulePropsWithoutHTML>;
+export type RuleProps = RulePropsWithoutHTML & Without<SVGAttributes<SVGElement>, RulePropsWithoutHTML>;
+import { type LinePropsWithoutHTML } from './Line.svelte';
+declare const Rule: import("svelte").Component<RuleProps, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/Sankey.svelte

@@ -1,3 +1,81 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type NodeExtraProperties = Record<string, any>;
+
+  export type SankeyProps = {
+    /**
+     * The function to get the nodes from the data.
+     * @default (d: any) => d.nodes
+     */
+    nodes?: (d: any) => any;
+
+    /**
+     * The function to get the node ID from the node data.
+     *
+     * @default (d: any) => d.index
+     */
+    nodeId?: (d: any) => any;
+    /**
+     * @see https://github.com/d3/d3-sankey#alignments
+     *
+     * @default sankeyJustify
+     */
+    nodeAlign?:
+      | ((node: SankeyNode<any, any>, n: number) => number)
+      | 'left'
+      | 'right'
+      | 'center'
+      | 'justify';
+
+    /**
+     * The width of the nodes.
+     *
+     * @default 4
+     */
+    nodeWidth?: number;
+
+    /**
+     * The padding between nodes.
+     *
+     * @default 10
+     */
+    nodePadding?: number;
+
+    /**
+     * The function to sort the nodes.
+     */
+    nodeSort?: (a: SankeyNode<any, any>, b: SankeyNode<any, any>) => number | undefined;
+
+    /**
+     * The function to get the links from the data.
+     *
+     * @default (d: any) => d.links
+     */
+    links?: (d: any) => any;
+
+    /**
+     * The function to sort the links.
+     *
+     */
+    linkSort?: (a: SankeyLink<any, any>, b: SankeyLink<any, any>) => number | undefined;
+
+    /**
+     * A function to be called when the data is updated.
+     */
+    onUpdate?: (data: SankeyGraph<{}, {}>) => void;
+
+    children?: Snippet<
+      [
+        {
+          nodes: SankeyNode<NodeExtraProperties, any>[];
+          links: SankeyNode<NodeExtraProperties, any>[];
+        },
+      ]
+    >;
+  };
+</script>
+
 <script lang="ts">
   // https://github.com/d3/d3-sankey
   import {
@@ -8,62 +86,61 @@
     sankeyJustify,
     type SankeyNode,
     type SankeyLink,
+    type SankeyGraph,
   } from 'd3-sankey';
 
-  import { chartContext } from './ChartContext.svelte';
-
-  const { data, width, height } = chartContext();
-
-  export let nodes = (d: any) => d.nodes;
-  export let nodeId = (d: any) => d.index;
-  /**
-   * see: https://github.com/d3/d3-sankey#alignments
-   */
-  export let nodeAlign:
-    | ((node: SankeyNode<any, any>, n: number) => number)
-    | 'left'
-    | 'right'
-    | 'center'
-    | 'justify' = sankeyJustify;
-  export let nodeWidth = 4;
-  export let nodePadding = 10;
-  export let nodeSort = undefined;
-
-  export let links = (d: any) => d.links;
-  export let linkSort = undefined;
-
-  export let onupdate: ((data: typeof sankeyData) => void) | undefined = undefined;
-
-  $: sankey = d3Sankey()
-    .size([$width, $height])
-    .nodes(nodes)
-    .nodeId(nodeId)
-    .nodeAlign(
-      nodeAlign === 'left'
-        ? sankeyLeft
-        : nodeAlign === 'center'
-          ? sankeyCenter
-          : nodeAlign === 'right'
-            ? sankeyRight
-            : nodeAlign === 'justify'
-              ? sankeyJustify
-              : nodeAlign
-    )
-    .nodeWidth(nodeWidth)
-    .nodePadding(nodePadding)
-    // @ts-expect-error
-    .nodeSort(nodeSort)
-    .links(links)
-    // @ts-expect-error
-    .linkSort(linkSort);
-
-  // @ts-expect-error
-  $: sankeyData = sankey($data);
-  type NodeExtraProperties = Record<string, any>;
-  $: _nodes = sankeyData.nodes as SankeyNode<NodeExtraProperties, any>[];
-  $: _links = sankeyData.links as SankeyLink<NodeExtraProperties, any>[];
-
-  $: onupdate?.(sankeyData);
+  import { getChartContext } from './Chart.svelte';
+
+  let {
+    nodes: nodesProp = (d: any) => d.nodes,
+    nodeId = (d: any) => d.index,
+    nodeAlign = sankeyJustify,
+    nodeWidth = 4,
+    nodePadding = 10,
+    nodeSort,
+    links: linksProp = (d: any) => d.links,
+    linkSort,
+    onUpdate,
+    children,
+  }: SankeyProps = $props();
+
+  const ctx = getChartContext();
+
+  const sankeyData = $derived.by(() => {
+    if (typeof document === 'undefined') return { nodes: [], links: [] };
+
+    return (
+      d3Sankey()
+        .size([ctx.width, ctx.height])
+        .nodes(nodesProp)
+        .nodeId(nodeId)
+        .nodeAlign(
+          nodeAlign === 'left'
+            ? sankeyLeft
+            : nodeAlign === 'center'
+              ? sankeyCenter
+              : nodeAlign === 'right'
+                ? sankeyRight
+                : nodeAlign === 'justify'
+                  ? sankeyJustify
+                  : nodeAlign
+        )
+        .nodeWidth(nodeWidth)
+        .nodePadding(nodePadding)
+        // @ts-expect-error
+        .nodeSort(nodeSort)
+        .links(linksProp)
+        // @ts-expect-error
+        .linkSort(linkSort)(structuredClone(ctx.data))
+    );
+  });
+
+  $effect(() => {
+    onUpdate?.(sankeyData);
+  });
 </script>
 
-<slot nodes={_nodes} links={_links} />
+{@render children?.({
+  nodes: sankeyData.nodes,
+  links: sankeyData.links,
+})}