feat: Upgrade dgrid2 to v3

Signed-off-by: Gordon Smith <[email protected]>
hpcc-systems · Nov 11, 2024 · 63e30f0 · 63e30f0
1 parent c6496af
commit 63e30f0
Show file tree

Hide file tree

Showing 17 changed files with 1,507 additions and 6,675 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "xpackages/deck-shim",
     "packages/dgrid",
     "packages/dgrid-shim",
-    "xpackages/dgrid2",
+    "packages/dgrid2",
     "xpackages/eclwatch",
     "packages/esbuild-plugins",
     "xpackages/form",

diff --git a/packages/chart/package.json b/packages/chart/package.json
@@ -33,7 +33,7 @@
         "test": "vitest run",
         "coverage": "vitest run --coverage",
         "update": "npx --yes npm-check-updates -u -t minor",
-        "update-major": "npx -yes npm-check-updates -u"
+        "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
         "@hpcc-js/api": "^3.1.0",

diff --git a/packages/dgrid2/.vscode/launch.json b/packages/dgrid2/.vscode/launch.json
@@ -1,61 +1,47 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Dev",
-            "type": "chrome",
+            "name": "test-browser",
+            "type": "msedge",
             "request": "launch",
-            "url": "file:///${workspaceRoot}/index.html",
-            "runtimeArgs": [
-                "--allow-file-access-from-files",
-                "--disable-web-security"
+            "url": "http://localhost:8888",
+            "webRoot": "${workspaceFolder}",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
             ],
-            "webRoot": "${workspaceRoot}"
-        },
-        {
-            "name": "index.html (vite)",
-            "type": "pwa-msedge",
-            "request": "launch",
-            "url": "http://localhost:3000/index.html",
-            "webRoot": "${workspaceRoot}",
-            "preLaunchTask": "serve-vite",
-            "postDebugTask": "Terminate All Tasks"
         },
         {
-            "name": "lws",
-            "type": "chrome",
+            "name": "test-node",
+            "type": "node",
             "request": "launch",
-            "url": "http://localhost:8080/../packages/graph/index.html",
             "runtimeArgs": [
-                "--allow-file-access-from-files",
-                "--disable-web-security"
+                "run-script",
+                "test-node"
             ],
-            "webRoot": "${workspaceRoot}"
-        },
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "index.md",
-            "url": "${workspaceFolder}/../../website/index.html?debug=1#packages/graph/docs/index.md",
-            "runtimeArgs": [
-                "--allow-file-access-from-files",
-                "--disable-web-security"
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
             ],
-            "webRoot": "${workspaceFolder}/../../website"
         },
         {
-            "type": "chrome",
+            "name": "index.html",
             "request": "launch",
-            "name": "http index.md",
-            "url": "http://localhost:8080/${workspaceFolder}/../../website/index.html?debug=1#packages/graph/docs/index.md",
+            "type": "msedge",
+            "url": "file:///${workspaceFolder}/index.html",
             "runtimeArgs": [
-                "--allow-file-access-from-files",
                 "--disable-web-security"
             ],
-            "webRoot": "${workspaceFolder}/../../website"
+            "webRoot": "${workspaceFolder}",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
+            ]
         }
     ]
 }
diff --git a/packages/dgrid2/.vscode/tasks.json b/packages/dgrid2/.vscode/tasks.json
@@ -1,76 +1,36 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
     "version": "2.0.0",
     "tasks": [
         {
+            "label": "gen-types-watch",
             "type": "npm",
-            "label": "compile umd watch",
-            "script": "compile-umd-watch",
-            "problemMatcher": [],
-            "presentation": {
-                "group": "group-build"
-            }
-        },
-        {
-            "type": "npm",
-            "label": "compile es6 watch",
-            "script": "compile-es6-watch",
-            "problemMatcher": [],
+            "script": "gen-types-watch",
+            "problemMatcher": [
+                "$tsc-watch"
+            ],
             "presentation": {
                 "group": "group-build"
             }
         },
         {
+            "label": "bundle-watch",
             "type": "npm",
-            "label": "bundle watch",
             "script": "bundle-watch",
             "problemMatcher": [],
             "presentation": {
                 "group": "group-build"
             }
         },
         {
-            "label": "serve-vite",
-            "type": "npm",
-            "script": "serve-vite",
-            "problemMatcher": {
-                "owner": "node",
-                "fileLocation": [
-                    "relative",
-                    "${workspaceFolder}"
-                ],
-                "pattern": {
-                    "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
-                    "file": 1,
-                    "line": 2,
-                    "column": 3,
-                    "severity": 4,
-                    "message": 5
-                },
-                "background": {
-                    "activeOnStart": true,
-                    "beginsPattern": "^  vite",
-                    "endsPattern": "^  ready in "
-                }
-            },
-            "presentation": {
-                "group": "group-build"
-            },
-            "isBackground": true
-        },
-        {
-            "label": "build-local-dev-server",
+            "label": "build",
             "dependsOn": [
-                "compile umd watch",
-                "compile es6 watch",
-                "bundle watch",
+                "gen-types-watch",
+                "bundle-watch",
             ],
             "group": {
                 "kind": "build",
                 "isDefault": true
-            },
-            "problemMatcher": []
+            }
         }
     ]
 }
diff --git a/packages/dgrid2/esbuild.js b/packages/dgrid2/esbuild.js
@@ -0,0 +1,29 @@
+import { browserTpl } from "@hpcc-js/esbuild-plugins";
+import pkg from "./package.json" with { type: "json" };
+
+//  config  ---
+await Promise.all([
+    browserTpl("src/index.ts", "dist/index", {
+        keepNames: true,
+        alias: {
+            "d3-array": "@hpcc-js/common",
+            "d3-brush": "@hpcc-js/common",
+            "d3-collection": "@hpcc-js/common",
+            "d3-color": "@hpcc-js/common",
+            "d3-dispatch": "@hpcc-js/common",
+            "d3-drag": "@hpcc-js/common",
+            "d3-dsv": "@hpcc-js/common",
+            "d3-ease": "@hpcc-js/common",
+            "d3-format": "@hpcc-js/common",
+            "d3-interpolate": "@hpcc-js/common",
+            "d3-scale": "@hpcc-js/common",
+            "d3-selection": "@hpcc-js/common",
+            "d3-time-format": "@hpcc-js/common",
+            "d3-transition": "@hpcc-js/common",
+            "d3-zoom": "@hpcc-js/common"
+        },
+        external: [
+            ...Object.keys(pkg.dependencies),
+        ]
+    })
+]);
diff --git a/packages/dgrid2/index.css b/packages/dgrid2/index.css
diff --git a/packages/dgrid2/index.html b/packages/dgrid2/index.html
@@ -1,27 +1,91 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 
 <head>
-    <meta charset="utf-8">
-    <title>@hpcc-js/dgrid2</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hpcc-js/common/font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="./index.css">
+    <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/[email protected]/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>
+    <link rel="stylesheet" href="../common/dist/index.css">
+    <link rel="stylesheet" href="./dist/index.css">
 </head>
 
 <body onresize="doResize()">
-    <div id="placeholder">
-    </div>
+    <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() {
-            if (app) {
-                app
-                    .resize()
-                    .lazyRender()
-                    ;
-            }
+            window.__widget?.resize()?.render();
         }
     </script>
-    <script type="module" src="./src-test/index.ts"></script>
 </body>
 
 </html>