@freereportjs/svelte 0.1.0 → 0.9.0

package/dist/FreeReportViewer.svelte

@@ -1,63 +1,67 @@
-<script lang="ts">
-  import { createViewer, type Report, type Viewer } from '@freereportjs/core';
-  import { untrack } from 'svelte';
-  import { FILL, FRAME, type FreeReportViewerProps } from './types.js';
-
-  /**
-   * Toolbar, parameter panel and paged report. `definition`, `data`, `params` and `zoom` update the viewer
-   * in place; other props recreate it. Callbacks are read when called.
-   */
-  let { class: className = '', style = '', ...props }: FreeReportViewerProps = $props();
-  let host: HTMLDivElement;
-  let viewer = $state.raw<Viewer | null>(null);
-  let applied: Pick<FreeReportViewerProps, 'definition' | 'data' | 'params' | 'zoom'> = { definition: undefined! };
-
-  /** The viewer (null before mount); with `bind:this`. */
-  export function getViewer(): Viewer | null {
-    return viewer;
-  }
-  /** The report the viewer shows (null before mount). */
-  export function getReport(): Report | null {
-    return viewer?.report ?? null;
-  }
-
-  const key = $derived(JSON.stringify([props.lang, props.toolbar, props.licenseKey, props.pdfSecurity, props.fileName, !!props.fetchData]));
-
-  // create on mount, recreate when a creation-only prop changes
-  $effect(() => {
-    void key;
-    const v = untrack(() => {
-      applied = { definition: props.definition, data: props.data, params: props.params, zoom: props.zoom };
-      return createViewer(host, {
-        ...applied, lang: props.lang, toolbar: props.toolbar, licenseKey: props.licenseKey, pdfSecurity: props.pdfSecurity,
-        fileName: props.fileName,
-        onOutput: e => props.onOutput?.(e),
-        fetchData: props.fetchData && (params => props.fetchData!(params)),
-      });
-    });
-    viewer = v;
-    untrack(() => props.onReady?.(v));
-    return () => {
-      v.destroy();
-      viewer = null;
-    };
-  });
-
-  $effect(() => {
-    const { definition, data, params, zoom } = props;
-    const v = viewer;
-    if (!v) return;
-    untrack(() => {
-      const a = applied;
-      if (zoom !== a.zoom) v.setZoom((a.zoom = zoom) ?? 'width');
-      // definition + data together are laid out once
-      let dirty = false;
-      if (definition !== a.definition) { v.report.setDefinition((a.definition = definition)); dirty = true; }
-      if (data !== a.data) { v.report.setData((a.data = data) ?? {}); dirty = true; }
-      if (params !== a.params) void v.setParams((a.params = params) ?? {});
-      else if (dirty) void v.refresh();
-    });
-  });
-</script>
-
-<div class={className} style={FRAME + style}><div bind:this={host} style={FILL}></div></div>
+<script lang="ts">
+  import { createViewer, type Report, type Viewer } from '@freereportjs/core';
+  import { untrack } from 'svelte';
+  import { FILL, FRAME, type FreeReportViewerProps } from './types.js';
+
+  /**
+   * Toolbar, parameter panel and paged report. `definition`, `data`, `params` and `zoom` update the viewer
+   * in place; other props recreate it. Callbacks are read when called.
+   */
+  let { class: className = '', style = '', ...props }: FreeReportViewerProps = $props();
+  let host: HTMLDivElement;
+  let viewer = $state.raw<Viewer | null>(null);
+  let applied: Pick<FreeReportViewerProps, 'definition' | 'data' | 'params' | 'zoom'> = { definition: undefined! };
+
+  /** The viewer (null before mount); with `bind:this`. */
+  export function getViewer(): Viewer | null {
+    return viewer;
+  }
+  /** The report the viewer shows (null before mount). */
+  export function getReport(): Report | null {
+    return viewer?.report ?? null;
+  }
+
+  const key = $derived(JSON.stringify([props.lang, props.toolbar, props.licenseKey, props.pdfSecurity, props.fileName, !!props.fetchData]));
+
+  // create on mount, recreate when a creation-only prop changes
+  $effect(() => {
+    void key;
+    const v = untrack(() => {
+      applied = { definition: props.definition, data: props.data, params: props.params, zoom: props.zoom };
+      return createViewer(host, {
+        ...applied, lang: props.lang, toolbar: props.toolbar, licenseKey: props.licenseKey, pdfSecurity: props.pdfSecurity,
+        fileName: props.fileName,
+        onOutput: e => props.onOutput?.(e),
+        onReady: e => props.onRendered?.(e),
+        onParamsSubmit: p => props.onParamsSubmit?.(p),
+        onPageChange: (n, total) => props.onPageChange?.(n, total),
+        onError: (err, during) => props.onError?.(err, during),
+        fetchData: props.fetchData && (params => props.fetchData!(params)),
+      });
+    });
+    viewer = v;
+    untrack(() => props.onReady?.(v));
+    return () => {
+      v.destroy();
+      viewer = null;
+    };
+  });
+
+  $effect(() => {
+    const { definition, data, params, zoom } = props;
+    const v = viewer;
+    if (!v) return;
+    untrack(() => {
+      const a = applied;
+      if (zoom !== a.zoom) v.setZoom((a.zoom = zoom) ?? 'width');
+      // definition + data together are laid out once
+      let dirty = false;
+      if (definition !== a.definition) { v.report.setDefinition((a.definition = definition)); dirty = true; }
+      if (data !== a.data) { v.report.setData((a.data = data) ?? {}); dirty = true; }
+      if (params !== a.params) void v.setParams((a.params = params) ?? {});
+      else if (dirty) void v.refresh();
+    });
+  });
+</script>
+
+<div class={className} style={FRAME + style}><div bind:this={host} style={FILL}></div></div>

package/dist/types.d.ts

@@ -15,6 +15,11 @@ export interface FreeReportViewerProps {
     fetchData?: ViewerOptions['fetchData'];
     /** Called with the viewer each time one is created. */
     onReady?: (viewer: Viewer) => void;
+    /** After every run: { pages, rows, ms, params } (the core viewer's onReady). */
+    onRendered?: ViewerOptions['onReady'];
+    onParamsSubmit?: ViewerOptions['onParamsSubmit'];
+    onPageChange?: ViewerOptions['onPageChange'];
+    onError?: ViewerOptions['onError'];
     class?: string;
     /** Extra inline style for the frame (default: height 100%, min-height 480px). */
     style?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freereportjs/svelte",
-  "version": "0.1.0",
+  "version": "0.9.0",
   "description": "Svelte 5 components for FreeReport, the web reporting engine: report viewer and banded report designer (free for personal use).",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -19,7 +19,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@freereportjs/core": "^0.1.0",
+    "@freereportjs/core": "^0.9.0",
     "svelte": "^5.0.0"
   },
   "keywords": [
@@ -36,7 +36,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@freereportjs/core": "^0.1.0",
+    "@freereportjs/core": "^0.9.0",
     "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "jsdom": "^30.1.2",