@revolist/svelte-charts 3.0.3 → 3.0.4

package/README.md

@@ -87,7 +87,9 @@ so do not destroy its ref yourself.
 Creation and updates are asynchronous. Pending work is cancelled on unmount or
 superseding configuration, and stale results are destroyed. Failures call
 `options.onError`, or `console.error` when no error handler is supplied. Server
-rendering produces an empty host; chart creation starts after client mounting.
+rendering produces an empty host by default. Pass the optional `serverRender`
+result from `renderChartToSVG` to include initial SVG and hydrate it on mounting.
+See the engine's [server rendering guide](../../docs/server-rendering.md).
 
 ## Building and distribution
 

package/dist/RevoChart.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { createChartComponentController } from '@revolist/charts/framework';
   import type { ChartComponentController, ChartComponentOptions } from '@revolist/charts/framework';
-  import type { ChartRef } from '@revolist/charts';
+  import type { ChartRef, ChartServerRender } from '@revolist/charts';
 
   interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     options: ChartComponentOptions;
     onReady?: (chart: ChartRef) => void;
+    serverRender?: ChartServerRender;
   }
-  let { options, onReady, style = '', ...attributes }: Props = $props();
+  let { options, onReady, serverRender, style = '', ...attributes }: Props = $props();
+  // Snapshot markup belongs to the initial mount, not subsequent prop updates.
+  const initial = untrack(() => serverRender);
   let host: HTMLDivElement;
   let controller: ChartComponentController | undefined;
   onMount(() => {
-    controller = createChartComponentController(host, chart => onReady?.(chart));
+    controller = createChartComponentController(host, chart => onReady?.(chart), !!initial);
     void controller.setOptions(options);
     return () => { controller?.destroy(); controller = undefined; };
   });
   $effect(() => { const next = options; void controller?.setOptions(next); });
 </script>
 
-<div {...attributes} bind:this={host} style={`width:100%;height:300px;${style}`}></div>
+<div {...attributes} bind:this={host} style={`width:100%;height:${initial?.height ?? 300}px;${style}`}>{@html initial?.svg ?? ''}</div>

package/dist/RevoChart.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ChartComponentOptions } from '@revolist/charts/framework';
-import type { ChartRef } from '@revolist/charts';
+import type { ChartRef, ChartServerRender } from '@revolist/charts';
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     options: ChartComponentOptions;
     onReady?: (chart: ChartRef) => void;
+    serverRender?: ChartServerRender;
 }
 declare const RevoChart: import("svelte").Component<Props, {}, "">;
 type RevoChart = ReturnType<typeof RevoChart>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/svelte-charts",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Svelte components for RevoGrid Charts",
   "type": "module",
   "license": "Commercial",
@@ -20,7 +20,7 @@
     }
   },
   "dependencies": {
-    "@revolist/charts": "3.0.3"
+    "@revolist/charts": "3.0.4"
   },
   "peerDependencies": {
     "svelte": "^5.55.0"