@revolist/vue-charts 3.0.3 → 3.0.5

package/README.md

@@ -90,7 +90,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,12 +1,15 @@
 import type { PropType } from 'vue';
 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 declare const RevoChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     options: {
         type: PropType<ChartComponentOptions>;
         required: true;
     };
+    serverRender: {
+        type: PropType<ChartServerRender>;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -16,6 +19,9 @@ export declare const RevoChart: import("vue").DefineComponent<import("vue").Extr
         type: PropType<ChartComponentOptions>;
         required: true;
     };
+    serverRender: {
+        type: PropType<ChartServerRender>;
+    };
 }>> & Readonly<{
     onReady?: ((_chart: ChartRef) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/index.js

@@ -3,17 +3,21 @@ import { createChartComponentController } from '@revolist/charts/framework';
 export const RevoChart = defineComponent({
     name: 'RevoChart',
     inheritAttrs: false,
-    props: { options: { type: Object, required: true } },
+    props: {
+        options: { type: Object, required: true },
+        serverRender: { type: Object },
+    },
     emits: { ready: (_chart) => true },
     setup(props, { attrs, emit }) {
+        const initial = props.serverRender;
         const host = ref();
         let controller;
         onMounted(() => {
-            controller = createChartComponentController(host.value, chart => emit('ready', chart));
+            controller = createChartComponentController(host.value, chart => emit('ready', chart), !!initial);
             void controller.setOptions(toRaw(props.options));
         });
         watch(() => props.options, options => { void controller?.setOptions(toRaw(options)); });
         onBeforeUnmount(() => controller?.destroy());
-        return () => h('div', mergeProps({ style: { width: '100%', height: '300px' } }, attrs, { ref: host }));
+        return () => h('div', mergeProps({ style: { width: '100%', height: `${initial?.height ?? 300}px` } }, attrs, { ref: host, ...(initial ? { innerHTML: initial.svg } : {}) }));
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/vue-charts",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Vue components for RevoGrid Charts",
   "type": "module",
   "license": "Commercial",
@@ -18,7 +18,7 @@
     }
   },
   "dependencies": {
-    "@revolist/charts": "3.0.3"
+    "@revolist/charts": "3.0.5"
   },
   "peerDependencies": {
     "vue": "^3.5.0"