From 51b10aa10b2eea3411c028bf8deef320f1d8f845 Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Tue, 24 Feb 2026 10:30:25 +0000
Subject: [PATCH] feat: update dgrid integration and add new index-preview for
 dgrid2

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 package-lock.json                             |  3 +-
 packages/composite/index-preview.html         |  7 +-
 packages/composite/index.html                 |  7 +-
 packages/composite/package.json               |  4 +-
 packages/composite/src/MultiChart.ts          |  6 +-
 .../composite/tests/composite.browser.spec.ts |  7 --
 packages/dgrid2/index-preview.html            | 91 +++++++++++++++++++
 packages/dgrid2/index.html                    |  4 +-
 packages/dgrid2/vite.config.ts                |  7 +-
 9 files changed, 114 insertions(+), 22 deletions(-)
 create mode 100644 packages/dgrid2/index-preview.html
diff --git a/package-lock.json b/package-lock.json
index 4b166fd2fc..f9ee78ae7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -747,7 +747,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -21824,7 +21823,7 @@
         "@hpcc-js/api": "^3.4.10",
         "@hpcc-js/chart": "^3.6.6",
         "@hpcc-js/common": "^3.7.0",
-        "@hpcc-js/dgrid": "^3.6.0",
+        "@hpcc-js/dgrid2": "^3.5.8",
         "@hpcc-js/form": "^3.3.10",
         "@hpcc-js/html": "^3.3.10",
         "@hpcc-js/other": "^3.4.11",
diff --git a/packages/composite/index-preview.html b/packages/composite/index-preview.html
index 72881e246c..9c81be65bb 100644
--- a/packages/composite/index-preview.html
+++ b/packages/composite/index-preview.html
@@ -23,7 +23,6 @@
             margin-top: 20px;
         }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim/dist/index.min.js"></script>
     <script type="importmap">
         {
             "imports": {
@@ -84,7 +83,11 @@ <h1>ESM Quick Test</h1>
 
         setTimeout(() => {
             window.__widget.chartType("PIE").render();
-        }, 3000);
+        }, 1000);
+
+        setTimeout(() => {
+            window.__widget.chartType("TABLE").render();
+        }, 2000);
     </script>
     <script>
         function doResize() {
diff --git a/packages/composite/index.html b/packages/composite/index.html
index 65524d7fb1..5acc6ca53f 100644
--- a/packages/composite/index.html
+++ b/packages/composite/index.html
@@ -24,7 +24,6 @@
             margin-top: 20px;
         }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim/dist/index.min.js"></script>
 </head>
 
 <body onresize="doResize()">
@@ -67,7 +66,11 @@ <h1>ESM Quick Test</h1>
 
         setTimeout(() => {
             window.__widget.chartType("PIE").render();
-        }, 3000);
+        }, 1000);
+
+        setTimeout(() => {
+            window.__widget.chartType("TABLE").render();
+        }, 2000);
     </script>
     <script>
         function doResize() {
diff --git a/packages/composite/package.json b/packages/composite/package.json
index 51a58b21dc..5006f8ea43 100644
--- a/packages/composite/package.json
+++ b/packages/composite/package.json
@@ -40,7 +40,7 @@
         "@hpcc-js/api": "^3.4.10",
         "@hpcc-js/chart": "^3.6.6",
         "@hpcc-js/common": "^3.7.0",
-        "@hpcc-js/dgrid": "^3.6.0",
+        "@hpcc-js/dgrid2": "^3.5.8",
         "@hpcc-js/form": "^3.3.10",
         "@hpcc-js/html": "^3.3.10",
         "@hpcc-js/other": "^3.4.11",
@@ -65,4 +65,4 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization"
-}
+}
\ No newline at end of file
diff --git a/packages/composite/src/MultiChart.ts b/packages/composite/src/MultiChart.ts
index fc0e254d17..0023e3b91f 100644
--- a/packages/composite/src/MultiChart.ts
+++ b/packages/composite/src/MultiChart.ts
@@ -103,8 +103,8 @@ export class MultiChart extends HTMLWidget {
                     callback(new mod[classInfo.widgetID]());
                 });
                 break;
-            case "@hpcc-js/dgrid":
-                import("@hpcc-js/dgrid").then(mod => {
+            case "@hpcc-js/dgrid2":
+                import("@hpcc-js/dgrid2").then(mod => {
                     callback(new mod[classInfo.widgetID]());
                 });
                 break;
@@ -297,7 +297,7 @@ MultiChart.prototype._mapChartTypes = [
     { id: "OPENSTREET", display: "Open Street Map", widgetClass: "map_OpenStreet" }
 ].map(function (item: any) { item.family = "map"; return item; });
 MultiChart.prototype._anyChartTypes = [
-    { id: "TABLE", display: "Table", widgetClass: "dgrid_Table" },
+    { id: "TABLE", display: "Table", widgetClass: "dgrid2_Table" },
     { id: "TABLE_LEGACY", display: "Table (legacy)", widgetClass: "other_Table" },
     { id: "TABLE_NESTED", display: "Nested Table", widgetClass: "other_NestedTable" },
     { id: "TABLE_CALENDAR", display: "Table driven Calendar Heat Map", widgetClass: "other_CalendarHeatMap" },
diff --git a/packages/composite/tests/composite.browser.spec.ts b/packages/composite/tests/composite.browser.spec.ts
index 679de6cff5..ec7854f80b 100644
--- a/packages/composite/tests/composite.browser.spec.ts
+++ b/packages/composite/tests/composite.browser.spec.ts
@@ -1,7 +1,6 @@
 import { Class, HTMLWidget, SVGWidget } from "@hpcc-js/common";
 import { describe, it, expect } from "vitest";
 import { classDef, data, render } from "../../common/tests/index.ts";
-import { load_dgrid_shim } from "../../dgrid/tests/index.ts";
 
 const urlSearch: string = "";
 const simple = {
@@ -28,12 +27,6 @@ const simple = {
     }
 };
 describe("@hpcc-js/composite", async () => {
-    await load_dgrid_shim();
-
-    it("Shim Loaded", () => {
-        expect(globalThis["@hpcc-js/dgrid-shim"]).to.exist;
-    });
-
     const composite = await import("@hpcc-js/composite");
     const { MultiChart, Dermatology, MegaChart, MultiChartPanel } = composite;
     for (const key in composite) {
diff --git a/packages/dgrid2/index-preview.html b/packages/dgrid2/index-preview.html
new file mode 100644
index 0000000000..fc5e16e19b
--- /dev/null
+++ b/packages/dgrid2/index-preview.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Home</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+        }
+
+        h1 {
+            text-align: center;
+            margin-top: 50px;
+        }
+
+        #placeholder {
+            width: 100%;
+            height: 500px;
+            background-color: #fff;
+            margin-top: 20px;
+        }
+    </style>
+
+    <script type="importmap">
+        {
+            "imports": {
+                "@observablehq/runtime": "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5.9.9/dist/runtime.js",
+                "@hpcc-js/util": "../util/dist/index.js",
+                "@hpcc-js/common": "../common/dist/index.js",
+                "@hpcc-js/api": "../api/dist/index.js",
+                "@hpcc-js/chart": "../chart/dist/index.js",
+                "@hpcc-js/comms": "../comms/dist/index.js",
+                "@hpcc-js/dgrid2": "../dgrid2/dist/index.js",
+                "@hpcc-js/observablehq-compiler": "../observablehq-compiler/dist/index.js"
+            }
+        }
+    </script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim@2.26.0/dist/index.min.js"></script>
+</head>
+
+<body onresize="doResize()">
+    <h1>ESM Quick Test</h1>
+    <div id="placeholder"></div>
+    <script type="module">
+        import { Table } from "@hpcc-js/dgrid2";
+
+        window.__widget = new Table()
+            .target("placeholder")
+            .columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
+            .data([
+                ["A", -25, -23, -25, -22],
+                ["B", -20, -21, -25, -21],
+                ["C", -18, -20, -25, -19],
+                ["D", -17, -17, -25, -18],
+                ["E", -16, -15, -19, -18],
+                ["F", -15, -14, -16, -16],
+                ["G", -12, -10, -14, -15],
+                ["H", -12, -8, -13, -15],
+                ["I", -11, -6, -12, -12],
+                ["J", -11, -6, -8, -12],
+                ["K", -9, 0, -5, -10],
+                ["L", -5, 1, -5, -9],
+                ["M", -5, 2, -4, -8],
+                ["N", -1, 4, -2, -7],
+                ["O", 3, 7, 0, -5],
+                ["P", 3, 8, 0, -3],
+                ["Q", 4, 8, 7, 0],
+                ["R", 6, 9, 11, 1],
+                ["S", 9, 11, 11, 5],
+                ["T", 10, 20, 12, 6],
+                ["U", 12, 20, 16, 8],
+                ["V", 12, 21, 18, 14],
+                ["W", 14, 21, 18, 18],
+                ["X", 15, 23, 21, 18],
+                ["Y", 21, 23, 23, 21],
+                ["Z", 23, 24, 24, 24]
+            ])
+            .render()
+            ;
+    </script>
+    <script>
+        function doResize() {
+            window.__widget?.resize()?.render();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/dgrid2/index.html b/packages/dgrid2/index.html
index e24d97fada..7b30996ed7 100644
--- a/packages/dgrid2/index.html
+++ b/packages/dgrid2/index.html
@@ -23,15 +23,13 @@
             margin-top: 20px;
         }
     </style>
-
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim@2.26.0/dist/index.min.js"></script>
 </head>
 
 <body onresize="doResize()">
     <h1>ESM Quick Test</h1>
     <div id="placeholder"></div>
     <script type="module">
-        import { Table } from "@hpcc-js/dgrid2";
+        import { Table } from "./src/index.ts";
 
         window.__widget = new Table()
             .target("placeholder")
diff --git a/packages/dgrid2/vite.config.ts b/packages/dgrid2/vite.config.ts
index dcd27b31e1..92bf69aac1 100644
--- a/packages/dgrid2/vite.config.ts
+++ b/packages/dgrid2/vite.config.ts
@@ -3,5 +3,10 @@ import { createHpccViteConfig } from "@hpcc-js/esbuild-plugins";
 import pkg from "./package.json" with { type: "json" };
 
 export default createHpccViteConfig(pkg, {
-    plugins: [react()]
+    plugins: [react()],
+    configOverrides: {
+        define: {
+            "process.env.NODE_ENV": JSON.stringify("production")
+        }
+    }
 });
\ No newline at end of file
