@guiexpert/preact-table 10.1.90 → 10.1.91

package/GuiexpertTable.d.ts

@@ -25,15 +25,28 @@ export interface GuiexpertTableProps {
     focusChanged?: GeFocusChangeEventFn;
 }
 /**
- * GuiexpertTable is a React component that wraps the ExpertTable library.
+ * GuiexpertTable is a Preact component that wraps the GuiExpert Table (`@guiexpert/table`).
  * It displays a table with various event listeners and callback functions.
+ *
+ * A new `tableModel` or `tableOptions` object (new reference) re-creates the table; the previous
+ * table is released with `TableScope.destroy()`, as on unmount. Keep both objects stable
+ * (create them once, not in `render`), otherwise the table is re-created on every render.
+ * Callback props may change freely – the current one is called.
  */
 export declare class GuiexpertTable extends Component<GuiexpertTableProps> {
-    ref: import('preact').RefObject<any>;
+    ref: import('preact').RefObject<HTMLDivElement>;
+    private tableScope?;
     constructor(props: GuiexpertTableProps);
     componentDidMount(): void;
+    componentDidUpdate(previousProps: Readonly<GuiexpertTableProps>): void;
     componentWillUnmount(): void;
+    /**
+     * Creates the table in `ele` (a table created before is destroyed first) and calls `tableReady`.
+     * The event callbacks are always taken from the current props.
+     */
     initTable(ele: HTMLDivElement, props: GuiexpertTableProps): void;
+    /** Releases the table (listeners, resize observer, cell renderers). */
+    private destroyTable;
     render(): import("preact").JSX.Element;
 }
 export default GuiexpertTable;

package/index.cjs

@@ -1 +1 @@
-"use strict";var s=Object.defineProperty;var u=(o,t,i)=>t in o?s(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i;var l=(o,t,i)=>u(o,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("preact/jsx-runtime"),a=require("preact"),r=require("@guiexpert/table");class h extends a.Component{constructor(i){super(i);l(this,"ref",a.createRef())}componentDidMount(){const i=this.ref.current;this.initTable(i,this.props)}componentWillUnmount(){}initTable(i,e){const d={onSelectionChanged(n){e.selectionChanged&&e.selectionChanged(n)},onScroll(n){e.scroll&&e.scroll(n)},onFocusChanged(n){e.focusChanged&&e.focusChanged(n)},onCheckboxChanged:n=>{e.checkboxChanged&&e.checkboxChanged(n)},onContextmenu:n=>{e.contextmenu&&e.contextmenu(n)},onModelChanged:n=>{e.modelChanged&&e.modelChanged(n)},onMouseClicked:n=>{e.mouseClicked&&e.mouseClicked(n)},onMouseDragging:n=>{e.mouseDragging&&e.mouseDragging(n)},onMouseDraggingEnd:n=>{e.mouseDraggingEnd&&e.mouseDraggingEnd(n)},onMouseMoved:n=>{}},c=new r.TableScope(i,e.tableModel,new r.SimpleDomService,e.tableOptions??new r.TableOptions,d);c.firstInit(),e.tableReady&&e.tableReady(c.getApi()),e.licenseKey&&r.LicenseManager.getInstance().setLicenseKey(e.licenseKey)}render(){return m.jsx("div",{ref:this.ref,className:"container-div",style:{width:"100%",height:"100%",backgroundColor:"transparent",padding:"0",margin:"0"}})}}class C{constructor(t){this.Component=t}render(t,i,e,d,c,n,f){const g={cellDiv:t,rowIndex:i,columnIndex:e,areaIdent:d,areaModel:c,cellValue:n};return a.render(a.h(this.Component,g),t),()=>{a.render(null,t)}}}exports.ComponentRendererWrapper=C;exports.GuiexpertTable=h;
+"use strict";var p=Object.defineProperty;var b=(a,s,o)=>s in a?p(a,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[s]=o;var u=(a,s,o)=>b(a,typeof s!="symbol"?s+"":s,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("preact/jsx-runtime"),d=require("preact"),l=require("@guiexpert/table");class C extends d.Component{constructor(o){super(o);u(this,"ref",d.createRef());u(this,"tableScope")}componentDidMount(){const o=this.ref.current;o&&this.initTable(o,this.props)}componentDidUpdate(o){const i=this.ref.current;i&&(o.tableModel!==this.props.tableModel||o.tableOptions!==this.props.tableOptions)&&this.initTable(i,this.props),this.props.licenseKey&&this.props.licenseKey!==o.licenseKey&&l.LicenseManager.getInstance().setLicenseKey(this.props.licenseKey)}componentWillUnmount(){this.destroyTable()}initTable(o,i){var g;this.destroyTable();const r=()=>this.props,h={onSelectionChanged:t=>{var e,n;return(n=(e=r()).selectionChanged)==null?void 0:n.call(e,t)},onFocusChanged:t=>{var e,n;return(n=(e=r()).focusChanged)==null?void 0:n.call(e,t)},onScroll:t=>{var e,n;return(n=(e=r()).scroll)==null?void 0:n.call(e,t)},onCheckboxChanged:t=>{var e,n;return(n=(e=r()).checkboxChanged)==null?void 0:n.call(e,t)},onContextmenu:t=>{var e,n;return(n=(e=r()).contextmenu)==null?void 0:n.call(e,t)},onModelChanged:t=>{var e,n;return(n=(e=r()).modelChanged)==null?void 0:n.call(e,t)},onMouseClicked:t=>{var e,n;return(n=(e=r()).mouseClicked)==null?void 0:n.call(e,t)},onMouseDragging:t=>{var e,n;return(n=(e=r()).mouseDragging)==null?void 0:n.call(e,t)},onMouseDraggingEnd:t=>{var e,n;return(n=(e=r()).mouseDraggingEnd)==null?void 0:n.call(e,t)},onMouseMoved:t=>{var e,n;return(n=(e=r()).mouseMoved)==null?void 0:n.call(e,t)}},c=new l.TableScope(o,i.tableModel,new l.SimpleDomService,i.tableOptions??new l.TableOptions,h);this.tableScope=c,c.firstInit(),(g=i.tableReady)==null||g.call(i,c.getApi()),i.licenseKey&&l.LicenseManager.getInstance().setLicenseKey(i.licenseKey)}destroyTable(){var o;(o=this.tableScope)==null||o.destroy(),this.tableScope=void 0}render(){return m.jsx("div",{ref:this.ref,className:"container-div",style:{width:"100%",height:"100%",backgroundColor:"transparent",padding:"0",margin:"0"}})}}class y{constructor(s){this.Component=s}render(s,o,i,r,h,c,g){const t={cellDiv:s,rowIndex:o,columnIndex:i,areaIdent:r,areaModel:h,cellValue:c};return d.render(d.h(this.Component,t),s),()=>{d.render(null,s)}}}exports.ComponentRendererWrapper=y;exports.GuiexpertTable=C;

package/index.d.ts

@@ -1,2 +1,2 @@
-export * from './GuiexpertTable';
-export * from './ComponentRendererWrapper';
+export * from './GuiexpertTable.js';
+export * from './ComponentRendererWrapper.js';

package/index.js

@@ -1,62 +1,90 @@
-var r = Object.defineProperty;
-var m = (i, t, o) => t in i ? r(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
-var d = (i, t, o) => m(i, typeof t != "symbol" ? t + "" : t, o);
-import { jsx as s } from "preact/jsx-runtime";
-import { Component as u, createRef as h, render as g, h as C } from "preact";
-import { TableScope as f, SimpleDomService as b, TableOptions as x, LicenseManager as M } from "@guiexpert/table";
-class v extends u {
+var p = Object.defineProperty;
+var b = (a, i, o) => i in a ? p(a, i, { enumerable: !0, configurable: !0, writable: !0, value: o }) : a[i] = o;
+var h = (a, i, o) => b(a, typeof i != "symbol" ? i + "" : i, o);
+import { jsx as u } from "preact/jsx-runtime";
+import { Component as C, createRef as y, render as g, h as f } from "preact";
+import { LicenseManager as m, TableScope as M, SimpleDomService as S, TableOptions as T } from "@guiexpert/table";
+class w extends C {
   constructor(o) {
     super(o);
-    d(this, "ref", h());
+    h(this, "ref", y());
+    h(this, "tableScope");
   }
   componentDidMount() {
     const o = this.ref.current;
-    this.initTable(o, this.props);
+    o && this.initTable(o, this.props);
+  }
+  componentDidUpdate(o) {
+    const s = this.ref.current;
+    s && (o.tableModel !== this.props.tableModel || o.tableOptions !== this.props.tableOptions) && this.initTable(s, this.props), this.props.licenseKey && this.props.licenseKey !== o.licenseKey && m.getInstance().setLicenseKey(this.props.licenseKey);
   }
   componentWillUnmount() {
+    this.destroyTable();
   }
-  initTable(o, e) {
-    const c = {
-      onSelectionChanged(n) {
-        e.selectionChanged && e.selectionChanged(n);
+  /**
+   * Creates the table in `ele` (a table created before is destroyed first) and calls `tableReady`.
+   * The event callbacks are always taken from the current props.
+   */
+  initTable(o, s) {
+    var d;
+    this.destroyTable();
+    const r = () => this.props, l = {
+      onSelectionChanged: (t) => {
+        var e, n;
+        return (n = (e = r()).selectionChanged) == null ? void 0 : n.call(e, t);
       },
-      onScroll(n) {
-        e.scroll && e.scroll(n);
+      onFocusChanged: (t) => {
+        var e, n;
+        return (n = (e = r()).focusChanged) == null ? void 0 : n.call(e, t);
       },
-      onFocusChanged(n) {
-        e.focusChanged && e.focusChanged(n);
+      onScroll: (t) => {
+        var e, n;
+        return (n = (e = r()).scroll) == null ? void 0 : n.call(e, t);
       },
-      onCheckboxChanged: (n) => {
-        e.checkboxChanged && e.checkboxChanged(n);
+      onCheckboxChanged: (t) => {
+        var e, n;
+        return (n = (e = r()).checkboxChanged) == null ? void 0 : n.call(e, t);
       },
-      onContextmenu: (n) => {
-        e.contextmenu && e.contextmenu(n);
+      onContextmenu: (t) => {
+        var e, n;
+        return (n = (e = r()).contextmenu) == null ? void 0 : n.call(e, t);
       },
-      onModelChanged: (n) => {
-        e.modelChanged && e.modelChanged(n);
+      onModelChanged: (t) => {
+        var e, n;
+        return (n = (e = r()).modelChanged) == null ? void 0 : n.call(e, t);
       },
-      onMouseClicked: (n) => {
-        e.mouseClicked && e.mouseClicked(n);
+      onMouseClicked: (t) => {
+        var e, n;
+        return (n = (e = r()).mouseClicked) == null ? void 0 : n.call(e, t);
       },
-      onMouseDragging: (n) => {
-        e.mouseDragging && e.mouseDragging(n);
+      onMouseDragging: (t) => {
+        var e, n;
+        return (n = (e = r()).mouseDragging) == null ? void 0 : n.call(e, t);
       },
-      onMouseDraggingEnd: (n) => {
-        e.mouseDraggingEnd && e.mouseDraggingEnd(n);
+      onMouseDraggingEnd: (t) => {
+        var e, n;
+        return (n = (e = r()).mouseDraggingEnd) == null ? void 0 : n.call(e, t);
       },
-      onMouseMoved: (n) => {
+      onMouseMoved: (t) => {
+        var e, n;
+        return (n = (e = r()).mouseMoved) == null ? void 0 : n.call(e, t);
       }
-    }, a = new f(
+    }, c = new M(
       o,
-      e.tableModel,
-      new b(),
-      e.tableOptions ?? new x(),
-      c
+      s.tableModel,
+      new S(),
+      s.tableOptions ?? new T(),
+      l
     );
-    a.firstInit(), e.tableReady && e.tableReady(a.getApi()), e.licenseKey && M.getInstance().setLicenseKey(e.licenseKey);
+    this.tableScope = c, c.firstInit(), (d = s.tableReady) == null || d.call(s, c.getApi()), s.licenseKey && m.getInstance().setLicenseKey(s.licenseKey);
+  }
+  /** Releases the table (listeners, resize observer, cell renderers). */
+  destroyTable() {
+    var o;
+    (o = this.tableScope) == null || o.destroy(), this.tableScope = void 0;
   }
   render() {
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: this.ref,
@@ -72,21 +100,21 @@ class v extends u {
     );
   }
 }
-class w {
-  constructor(t) {
-    this.Component = t;
+class O {
+  constructor(i) {
+    this.Component = i;
   }
-  render(t, o, e, c, a, n, k) {
-    const l = {
-      cellDiv: t,
+  render(i, o, s, r, l, c, d) {
+    const t = {
+      cellDiv: i,
       rowIndex: o,
-      columnIndex: e,
-      areaIdent: c,
-      areaModel: a,
-      cellValue: n
+      columnIndex: s,
+      areaIdent: r,
+      areaModel: l,
+      cellValue: c
     };
-    return g(C(this.Component, l), t), () => {
-      g(null, t);
+    return g(f(this.Component, t), i), () => {
+      g(null, i);
     };
   }
   // private mount(
@@ -110,6 +138,6 @@ class w {
   // }
 }
 export {
-  w as ComponentRendererWrapper,
-  v as GuiexpertTable
+  O as ComponentRendererWrapper,
+  w as GuiexpertTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/preact-table",
-  "version": "10.1.90",
+  "version": "10.1.91",
   "license": "MIT",
   "author": "Dr. Marc Kronberg <info@gui.expert> (https://gui.expert)",
   "repository": {
@@ -22,13 +22,16 @@
   },
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
       "require": "./index.cjs"
     }
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@guiexpert/table": "^1.1.90"
+    "@guiexpert/table": "^1.1.91"
   },
   "peerDependencies": {
     "preact": "^10.0.0"
@@ -40,7 +43,7 @@
     "@types/react": "^18.2.37 || ^19.0.0",
     "@types/react-dom": "^18.2.15 || ^19.0.0",
     "@types/node": "^20.11.17",
-    "vite": "6.3.4",
+    "vite": "6.4.4",
     "vite-plugin-dts": "^3.7.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-static-copy": "^0.17.0",
@@ -50,12 +53,17 @@
     "ts-node": "10.9.1",
     "tsconfig": "^7.0.0",
     "typescript": "5.2.2",
-    "@babel/core": "~7.28.6"
+    "@babel/core": "~7.28.6",
+    "vitest": "5.0.4",
+    "@vitest/browser-playwright": "5.0.4",
+    "playwright": "1.64.0"
   },
   "scripts": {
     "i": "pnpm i",
     "patch-version": "node patch.js",
     "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "npm-pub": "pnpm publish --no-git-checks --access public"
   }
 }