Merge pull request #5 from i-VRESSE/examplehtml

Trying to get example.html files to work
i-VRESSE · Sep 10, 2024 · 1c31894 · 1c31894
2 parents 1adfa4b + 5d623f2
commit 1c31894
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -54,4 +54,5 @@ API documentation is available at [https://i-VRESSE.github.io/haddock3-ui/api/](
 
 The components can be used directly in the browser, without your own build system.
 
-[example.html](example.html) is a simple example which uses the latest library from npm using https://esm.sh/ for libray hosting.
+[example.html](example.html) is a clustered table example which uses the latest library from npm using https://esm.sh/ for libray hosting.
+[example-molviewer.html](example-molviewer.html) is a simple molecule viewer example.
diff --git a/example-molviewer.html b/example-molviewer.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Haddock3 ui components - SimpleViewer example</title>
+    <link
+      href="https://esm.sh/@i-vresse/haddock3-ui/dist/index.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react",
+          "react-dom": "https://esm.sh/react-dom"
+        }
+      }
+    </script>
+    <script type="module">
+      import { createRoot } from "react-dom";
+      import { createElement } from "react";
+      import { SimpleViewer } from "https://esm.sh/@i-vresse/haddock3-ui/dist/molviewer?bundle-deps";
+
+      createRoot(document.getElementById("viewport")).render(
+        createElement(SimpleViewer, { "structure": "https://files.rcsb.org/download/2OOB.pdb.gz" })
+      );
+
+    </script>
+    <div id="viewport" style="width:800px; height:600px;"></div>
+  </body>
+</html>
diff --git a/example.html b/example.html
@@ -2,27 +2,33 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Haddock3 ui component</title>
+    <title>Haddock3 ui components - ClusterTable example</title>
     <link
       href="https://esm.sh/@i-vresse/haddock3-ui/dist/index.css"
       rel="stylesheet"
     />
   </head>
   <body>
     <div id="root"></div>
-    <script type="importmap">
-      {
-        "imports": {
-          "react": "https://esm.sh/react",
-          "react-dom": "https://esm.sh/react-dom",
-          "@i-vresse/haddock3-ui": "https://esm.sh/@i-vresse/haddock3-ui?bundle"
-        }
-      }
-    </script>
     <script type="module">
-      import { createRoot } from "react-dom";
-      import { createElement } from "react";
-      import { ClusterTable } from "@i-vresse/haddock3-ui/dist/table/ClusterTable";
+      import { createRoot } from "https://esm.sh/react-dom";
+      import { createElement } from "https://esm.sh/react";
+      // Fails on view molecule, React is not defined
+      import { ClusterTable } from "https://esm.sh/@i-vresse/haddock3-ui/dist/table/ClusterTable";
+      // Fails on view molecule, React is not defined
+      //import { ClusterTable } from "https://esm.sh/@i-vresse/haddock3-ui/dist/table/ClusterTable?bundle-deps";
+      // Fails on useState<SortState> bad hook
+      //import { ClusterTable } from "https://esm.sh/@i-vresse/haddock3-ui/dist/table/ClusterTable?dev";
+      // Failed with
+      // Uncaught SyntaxError: The requested module 'https://esm.run/@i-vresse/haddock3-ui/dist/table/ClusterTable' does not provide an export named 'ClusterTable' (at example.html:22:16)
+      // 'Failed to bundle using Rollup v2.79.1: failed to resolve an internal import. If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr');
+      //import { ClusterTable } from "https://esm.run/@i-vresse/haddock3-ui@0.2.0/dist/table/ClusterTable"
+      // Failed with
+      // TypeError: Cannot read properties of null (reading 'useState')
+      //   at n.useState (react.production.min.js:26:234)
+      //   at T (SortableTable.tsx:227:37)
+      // import { ClusterTable } from "https://esm.noim.io/@i-vresse/haddock3-ui@0.2.0/dist/table/ClusterTable"
+
 
       const clusters = [
         {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@i-vresse/haddock3-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "private": false,
   "sideEffects": false,

diff --git a/src/CopyToClipBoardIcon.stories.tsx b/src/CopyToClipBoardIcon.stories.tsx
@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
 
-import { CopyToClipBoardIcon } from "../src/CopyToClipBoardIcon.js";
+import { CopyToClipBoardIcon } from "./CopyToClipBoardIcon.js";
 
 export const Default: Story = () => <CopyToClipBoardIcon />;
diff --git a/src/DialogViewer.tsx b/src/DialogViewer.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode, useState } from "react";
-import { cn } from "../src/cn.js";
-import { SimpleViewer } from "../src/molviewer.js";
+import { cn } from "./cn.js";
+import { SimpleViewer } from "./molviewer.js";
 
 export function DialogViewer({
   url,

diff --git a/src/molviewer.tsx b/src/molviewer.tsx
@@ -1,10 +1,10 @@
 import {
   ColormakerRegistry,
-  Component,
-  PickingProxy,
+  type Component,
+  type PickingProxy,
   Stage,
-  Structure,
-  StructureComponent,
+  type Structure,
+  type StructureComponent,
   type StructureRepresentationType,
 } from "ngl";
 import {

diff --git a/src/toggles/ResidueHeader.stories.tsx b/src/toggles/ResidueHeader.stories.tsx
@@ -1,6 +1,6 @@
 import type { Story } from "@ladle/react";
 
-import { ResiduesHeader } from "../../src/toggles/ResidueHeader.js";
+import { ResiduesHeader } from "./ResidueHeader.js";
 
 export const ActiveAndPassive: Story<{
   showActive: boolean;