Update README w.r.t. bundling

ssciwr · Sep 24, 2024 · 6315e3e · 6315e3e
1 parent 321ea88
commit 6315e3e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -21,23 +21,15 @@ npm run dev
 
 ## Usage
 
+You can create a bundle with the following commands:
 ```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Svelte Component</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" type="text/css" crossorigin href="bundle.css">
-    <script src="bundle.js"></script>
-</head>
-<body>
-    <easydb-detail-view uuid="e95dcb74-77f6-4794-b468-506da8b7a3a1"/>
-</body>
-</html>
+npm run easydb -- --instance-url=https://heidicon.ub.uni-heidelberg.de
+npm run bundle
 ```
 
+This will generate `bundle.{js,css}` in the `bundle/` directory. You can look at the provided
+`index.html` for an example of how to integrate into your HTML page.
+
 ## Issues
 
 If you find any issues with using this component, please open an issue.

diff --git a/bundle/index.html b/bundle/index.html
@@ -4,9 +4,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Svelte Component</title>
+
+    <!-- Import the generated bundle -->
     <script src="bundle.js"></script>
+
+    <!-- Ensure that our CSS is loaded into the shadow DOM of our component -->
+    <script>
+        customElements.whenDefined("easydb-detail-view").then(() => {
+        setTimeout(() => {
+          let ele = document.getElementById("my-easydb");
+          console.log(ele);
+          var link = document.createElement("link");
+          link.setAttribute("rel", "stylesheet");
+          link.setAttribute(
+            "href",
+            "bundle.css"
+          );
+          ele.shadowRoot.appendChild(link);
+        }, 0);
+      });
+    </script>
 </head>
 <body>
-    <easydb-detail-view uuid="e95dcb74-77f6-4794-b468-506da8b7a3a1"/>
+    <easydb-detail-view id="my-easydb" uuid="e95dcb74-77f6-4794-b468-506da8b7a3a1"/>
 </body>
 </html>