feat: Upgrade form + composite to v3

Signed-off-by: Gordon Smith <[email protected]>
hpcc-systems · Nov 12, 2024 · ea5c9b7 · ea5c9b7
1 parent f177d98
commit ea5c9b7
Show file tree

Hide file tree

Showing 41 changed files with 1,053 additions and 454 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "packages/codemirror-shim",
     "packages/common",
     "packages/comms",
-    "xpackages/composite",
+    "packages/composite",
     "packages/dataflow",
     "xpackages/ddl-shim",
     "xpackages/deck-shim",
@@ -23,7 +23,7 @@
     "packages/dgrid2",
     "xpackages/eclwatch",
     "packages/esbuild-plugins",
-    "xpackages/form",
+    "packages/form",
     "packages/graph",
     "packages/html",
     "packages/layout",

diff --git a/packages/composite/.vscode/launch.json b/packages/composite/.vscode/launch.json
@@ -0,0 +1,47 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "test-browser",
+            "type": "msedge",
+            "request": "launch",
+            "url": "http://localhost:8888",
+            "webRoot": "${workspaceFolder}",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
+            ],
+        },
+        {
+            "name": "test-node",
+            "type": "node",
+            "request": "launch",
+            "runtimeArgs": [
+                "run-script",
+                "test-node"
+            ],
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
+            ],
+        },
+        {
+            "name": "index.html",
+            "request": "launch",
+            "type": "msedge",
+            "url": "file:///${workspaceFolder}/index.html",
+            "runtimeArgs": [
+                "--disable-web-security"
+            ],
+            "webRoot": "${workspaceFolder}",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
+            ]
+        }
+    ]
+}
diff --git a/packages/composite/.vscode/tasks.json b/packages/composite/.vscode/tasks.json
@@ -1,20 +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",
-            "script": "compile-umd-watch",
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            },
+            "script": "gen-types-watch",
             "problemMatcher": [
                 "$tsc-watch"
             ],
-            "label": "npm: compile-umd-watch",
-            "detail": "tsc --module umd --outDir ./lib-umd --watch"
+            "presentation": {
+                "group": "group-build"
+            }
+        },
+        {
+            "label": "bundle-watch",
+            "type": "npm",
+            "script": "bundle-watch",
+            "problemMatcher": [],
+            "presentation": {
+                "group": "group-build"
+            }
+        },
+        {
+            "label": "build",
+            "dependsOn": [
+                "gen-types-watch",
+                "bundle-watch",
+            ],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
         }
     ]
 }
diff --git a/packages/composite/esbuild.js b/packages/composite/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/composite/index.html b/packages/composite/index.html
@@ -0,0 +1,100 @@
+<!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/[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/other": "../other/dist/index.js",
+                "@hpcc-js/layout": "../layout/dist/index.js",
+                "@hpcc-js/composite": "../composite/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()">
+    <h1>ESM Quick Test</h1>
+    <div id="placeholder"></div>
+    <script type="module">
+        import { Area, Column } from "@hpcc-js/chart";
+
+        const simple = {
+            ND: {
+                columns: ["Subject", "Year 1", "Year 2", "Year 3", "Year 4"],
+                data: [
+                    ["English", 5, 43, 41, 92],
+                    ["English II", 17, 43, 83, 93],
+                    ["English III", 6, 43, 64, 93],
+                    ["Geography", 7, 45, 52, 83],
+                    ["Geography II", 16, 73, 52, 83],
+                    ["Geography III", 26, 83, 11, 72],
+                    ["Science", 66, 60, 85, 6],
+                    ["Science II", 46, 20, 53, 7],
+                    ["Science III", 46, 20, 38, 7],
+                    ["Math", 98, 30, 23, 13],
+                    ["Math II", 76, 30, 34, 6],
+                    ["Math III", 80, 30, 27, 8]
+                ]
+            },
+            WordCloud: {
+                columns: ["Word", "Weight"],
+                words: ["Myriel", "Napoleon", "Mlle.Baptistine", "Mme.Magloire", "CountessdeLo", "Geborand", "Champtercier", "Cravatte", "Count", "OldMan", "Labarre", "Valjean", "Marguerite", "Mme.deR", "Isabeau", "Gervais", "Tholomyes", "Listolier", "Fameuil", "Blacheville", "Favourite", "Dahlia", "Zephine", "Fantine", "Mme.Thenardier", "Thenardier", "Cosette", "Javert", "Fauchelevent", "Bamatabois", "Perpetue", "Simplice", "Scaufflaire", "Woman1", "Judge", "Champmathieu", "Brevet", "Chenildieu", "Cochepaille", "Pontmercy", "Boulatruelle", "Eponine", "Anzelma", "Woman2", "MotherInnocent", "Gribier", "Jondrette", "Mme.Burgon", "Gavroche", "Gillenormand", "Magnon", "Mlle.Gillenormand", "Mme.Pontmercy", "Mlle.Vaubois", "Lt.Gillenormand", "Marius", "BaronessT", "Mabeuf", "Enjolras", "Combeferre", "Prouvaire", "Feuilly", "Courfeyrac", "Bahorel", "Bossuet", "Joly", "Grantaire", "MotherPlutarch", "Gueulemer", "Babet", "Claquesous", "Montparnasse", "Toussaint", "Child1", "Child2", "Brujon", "Mme.Hucheloup"]
+            }
+        };
+
+        window.__widget = new Column()
+            .target("placeholder")
+            .columns(["Category", "Series-1", "Series-2"])
+            .data([
+                ["A", 34, 21],
+                ["B", 55, 34],
+                ["C", 54, 90],
+                ["D", 80, 153],
+                ["E", 86, 92],
+                ["F", 144, 233]
+            ])
+            .tooltipValueFormat(",.0f")
+            .showValue(true)
+            .xAxisFocus(true)
+            .render()
+            ;
+    </script>
+    <script>
+        function doResize() {
+            window.__widget?.resize()?.render();
+        }
+    </script>
+</body>
+
+</html>