@revolist/react-charts 3.0.2 → 3.0.4

package/README.md

@@ -94,7 +94,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/index.d.ts

@@ -1,9 +1,11 @@
 import type { HTMLAttributes, ReactElement } from 'react';
 import type { ChartComponentOptions } from '@revolist/charts/framework';
-import type { ChartRef } from '@revolist/charts';
+import type { ChartRef, ChartServerRender } from '@revolist/charts';
 export type { ChartComponentOptions, ChartRef };
 export interface RevoChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     options: ChartComponentOptions;
     onReady?: (chart: ChartRef) => void;
+    /** Initial trusted output from @revolist/charts/server. */
+    serverRender?: ChartServerRender;
 }
-export declare function RevoChart({ options, onReady, style, ...attributes }: RevoChartProps): ReactElement;
+export declare function RevoChart({ options, onReady, serverRender, style, ...attributes }: RevoChartProps): ReactElement;

package/dist/index.js

@@ -1,13 +1,16 @@
+'use client';
 import { createElement, useEffect, useRef } from 'react';
 import { createChartComponentController } from '@revolist/charts/framework';
-export function RevoChart({ options, onReady, style, ...attributes }) {
+export function RevoChart({ options, onReady, serverRender, style, ...attributes }) {
     const host = useRef(null);
     const controller = useRef(undefined);
     const ready = useRef(onReady);
+    const initial = useRef(serverRender);
+    const markup = useRef(serverRender ? { __html: serverRender.svg } : undefined);
     // Update callbacks only after commit; abandoned concurrent renders stay invisible.
     useEffect(() => { ready.current = onReady; }, [onReady]);
     useEffect(() => {
-        const instance = createChartComponentController(host.current, chart => ready.current?.(chart));
+        const instance = createChartComponentController(host.current, chart => ready.current?.(chart), !!initial.current);
         controller.current = instance;
         return () => {
             instance.destroy();
@@ -15,5 +18,8 @@ export function RevoChart({ options, onReady, style, ...attributes }) {
         };
     }, []);
     useEffect(() => { void controller.current?.setOptions(options); }, [options]);
-    return createElement('div', { ...attributes, ref: host, style: { width: '100%', height: '300px', ...style } });
+    return createElement('div', { ...attributes, ref: host,
+        ...(markup.current ? { dangerouslySetInnerHTML: markup.current } : {}),
+        style: { width: '100%', height: `${initial.current?.height ?? 300}px`, ...style },
+    });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/react-charts",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "React components for RevoGrid Charts",
   "type": "module",
   "license": "Commercial",
@@ -18,7 +18,7 @@
     }
   },
   "dependencies": {
-    "@revolist/charts": "3.0.2"
+    "@revolist/charts": "3.0.4"
   },
   "peerDependencies": {
     "react": "^19.2.0",