Drop embed + rename report.offlline.js to report.bundle.js as it can …

…also be used online

README.md

@@ -60,44 +60,22 @@ The components can be used directly in the browser, without your own build syste
 [example.html](example.html) is a clustered table example which uses the latest package version from npm via https://esm.sh/.
 [example-molviewer.html](example-molviewer.html) is a simple molecule viewer example.
 
-### Offline
+### Offline bundle
 
 The table components are used by the caprieval module of haddock3 to generate report.html. 
 Haddock3 can be used [offline](https://www.bonvinlab.org/haddock3/modules/general_module_params.html#offline), 
 which means after installation the running of haddock3 will be isolated from the Internet.
 
-To use the table components offline, you can build an offline version of the components with
+To use the table components offline, you can build an offline bundle of the components with
 
 ```bash
 # Installs dependencies
 pnpm install
-# Create dist/index.css and dist/report.offline.js,
+# Create dist/index.css and dist/report.bundle.js,
 # which contains the table components and all of its dependencies
 pnpm build
 ```
 
 See [example-offline.html](example-offline.html) for an example of how to use the offline version.
 
 To prevent CORS issues, the html, css and js files should be served from the same http server like with `python3 -m http.server` and visit http://localhost:8000/example-offline.html.
-
-### Embedded
-
-Similar to offline, the js and css can be embedded into a HTML file instead of importing js and css files.
-
-To genererate an embedded example, run
-
-```bash
-# Installs dependencies
-pnpm install
-# Creates dist/index.css
-pnpm build:css
-# Creates dist/report.embedded.js,
-# Which defines the `haddock3ui` global variable that contains the table components
-pnon build:embedded
-# Creates example-embedded.html
-node generate-embedded-example.mjs
-# Start a web server
-python3 -m http.server
-```
-
-Then open `http://localhost:8000/example-embedded.html` in your browser.

build.mjs

@@ -25,7 +25,7 @@ for (const file of await readdir("dist", { recursive: true })) {
   const jsfn = "./dist/" + file;
   // Each .js file has a corresponding .d.ts file
   let types = jsfn.replace(/\.js$/, ".d.ts");
-  if (types === "./dist/report.offline.d.ts") {
+  if (types === "./dist/report.bundle.d.ts") {
     types = "./dist/report.d.ts";
   }
   packageJson.exports[key] = {

example-offline.html

@@ -97,7 +97,7 @@
       }  
     </script>
     <script type="module">
-      import{ renderClusterTable } from "./dist/report.offline.js";
+      import{ renderClusterTable } from "./dist/report.bundle.js";
       const props = JSON.parse(document.getElementById("datatable2").text)
       renderClusterTable(document.getElementById("root"), props.headers, props.clusters);
     </script>

example.html

@@ -97,6 +97,11 @@
   </script>
   <script type="module">
     import { renderClusterTable } from "https://esm.sh/@i-vresse/haddock3-ui/dist/report?bundle-deps";
+    // Instead of esm.sh you could also use the report.bundle.js file from a CDN or your own server
+    // import { renderClusterTable } from "https://cdn.jsdelivr.net/npm/@i-vresse/haddock3-ui/dist/report.bundle.js";
+    // import { renderClusterTable } from "https://your-own-server.com/haddock3-ui/dist/report.bundle.js";
+    // Note that report.bundle.js only includes the components needed for haddock3 analysis report
+    // The css file can be imported in a similar way
     const props = JSON.parse(document.getElementById("datatable2").text)
     renderClusterTable(document.getElementById("root"), props.headers, props.clusters);
   </script>

package.json

@@ -19,8 +19,7 @@
     "build:js": "tsc --project tsconfig.build.json",
     "build:package": "node build.mjs && pnpm format package.json",
     "build:css": "tailwindcss --content './src/**/*.{js,ts,jsx,tsx,mdx}' -i .ladle/index.css -o dist/index.css --minify",
-    "build:offline": "esbuild --bundle --format=esm --minify src/report.tsx --outfile=dist/report.offline.js",
-    "build:embed": "esbuild --bundle --format=iife --minify --global-name=haddock3ui src/report.tsx --outfile=dist/report.embed.js",
+    "build:offline": "esbuild --bundle --format=esm --minify src/report.tsx --outfile=dist/report.bundle.js",
     "typecheck": "tsc --noEmit",
     "docs:ladle": "ladle build",
     "docs:api": "typedoc",
@@ -129,16 +128,16 @@
         "default": "./dist/molviewer.js"
       }
     },
-    "./report": {
+    "./report.bundle": {
       "import": {
         "types": "./dist/report.d.ts",
-        "default": "./dist/report.js"
+        "default": "./dist/report.bundle.js"
       }
     },
-    "./report.offline": {
+    "./report": {
       "import": {
         "types": "./dist/report.d.ts",
-        "default": "./dist/report.offline.js"
+        "default": "./dist/report.js"
       }
     },
     "./toggles": {