Merge pull request #4296 from GordonSmith/HTML_REACT_PREACT

fix: Remove preact references from html
hpcc-systems · Nov 13, 2024 · 9ac09fb · 9ac09fb
2 parents f297d81 + c78df51
commit 9ac09fb
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/html/esbuild.js b/packages/html/esbuild.js
@@ -24,6 +24,7 @@ await Promise.all([
         },
         external: [
             ...Object.keys(pkg.dependencies),
+            ...Object.keys(pkg.peerDependencies),
         ]
     })
 ]);
diff --git a/packages/html/index.html b/packages/html/index.html
@@ -0,0 +1,82 @@
+<!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/observablehq-compiler": "../observablehq-compiler/dist/index.js",
+                "@hpcc-js/html": "../comms/html/index.js",
+                "@hpcc-js/react": "../react/dist/index.js",
+                "react":"../../node_modules/react/umd/react.development.js",
+                "react-dom/client":"../../node_modules/react-dom/client.js",
+                "preact":"../../node_modules/preact/dist/preact.module.js",
+                "preact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
+                "preact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js",
+                "react":"../../node_modules/preact/compat/dist/compat.module.js",
+                "react-dom/client":"../../node_modules/preact/compat/client.mjs"
+            }
+        }
+    </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 { HTMLAdapter, SVGAdapter, Span, Text, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
+
+        window.__widget = new SVGAdapter(Text)
+            .target("placeholder")
+            .prop("text", "red")
+            .render()
+            ;
+
+        setTimeout(() => {
+            window.__widget
+                .prop("text", "gggg Hello\nWorld 2 yyyy")
+                .render()
+                ;
+        }, 1000);
+    </script>
+    <script>
+        function doResize() {
+            window.__widget
+                ?.resize()
+                ?.render()
+                ;
+        }
+    </script>
+</body>
+
+</html>
diff --git a/packages/html/package.json b/packages/html/package.json
@@ -42,7 +42,13 @@
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.2.0",
         "d3-format": "^1",
-        "d3-selection": "^1"
+        "d3-selection": "^1",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
     },
     "repository": {
         "type": "git",

diff --git a/packages/html/src/VizComponent.tsx b/packages/html/src/VizComponent.tsx
@@ -1,4 +1,4 @@
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
 import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizComponent extends JSXWidget.Component<any, any> {

diff --git a/packages/html/src/VizInstance.tsx b/packages/html/src/VizInstance.tsx
@@ -1,4 +1,4 @@
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
 import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizInstance extends JSXWidget.Component<any, any> {