Merge branch 'dev' of github.com:estruyf/vscode-demo-time into dev

estruyf · estruyf · commit fb5fae9f2505 · 2025-03-31T15:10:35.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## [0.0.90] - 2025-03-31
+
+- [#83](https://github.com/estruyf/vscode-demo-time/issues/83): Added support for custom web components in the slide view
+
 ## [0.0.89] - 2025-03-29
 
 - Small title theme fix in `quantum`
diff --git a/package.json b/package.json
@@ -158,6 +158,14 @@
           "type": "boolean",
           "default": false,
           "description": "Hide the editor actions"
+        },
+        "demoTime.customWebComponents": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": [],
+          "description": "Provide paths to scripts for loading your custom web components. Each path should point to a JavaScript file."
         }
       }
     },
diff --git a/src/constants/Config.ts b/src/constants/Config.ts
@@ -22,4 +22,7 @@ export const Config = {
     enabled: "api.enabled",
     port: "api.port",
   },
+  webcomponents: {
+    scripts: "customWebComponents",
+  },
 };
diff --git a/src/preview/Preview.ts b/src/preview/Preview.ts
@@ -175,6 +175,7 @@ export class Preview {
     const localServerUrl = "http://localhost:9001";
 
     let scriptUrl = [];
+    let moduleUrl = [];
 
     const extension = Extension.getInstance();
     const extPath = Uri.file(extension.extensionPath);
@@ -196,6 +197,18 @@ export class Preview {
 
     scriptUrl.push(webview.asWebviewUri(Uri.joinPath(extPath, "assets", "slides", "tailwind.js")).toString());
 
+    const webComponents = extension.getSetting<string[]>(Config.webcomponents.scripts);
+    if (webComponents) {
+      const workspaceFolder = extension.workspaceFolder;
+      for (const webComponent of webComponents) {
+        if (webComponent.startsWith("http")) {
+          moduleUrl.push(webComponent);
+        } else if (workspaceFolder) {
+          moduleUrl.push(webview.asWebviewUri(Uri.joinPath(workspaceFolder.uri, webComponent)).toString());
+        }
+      }
+    }
+
     const webviewUrl = getWebviewUrl(webview, "");
 
     return `<!DOCTYPE html>
@@ -208,6 +221,7 @@ export class Preview {
       <div id="root" data-webview-url="${webviewUrl}"></div>
   
       ${scriptUrl.map((url) => `<script src="${url}"></script>`).join("\n")}
+      ${moduleUrl.map((url) => `<script src="${url}" type="module"></script>`).join("\n")}
 
       <img style="display:none" src="https://api.visitorbadge.io/api/combined?path=https:%2f%2fgithub.com%2festruyf%2fvscode-demo-time&labelColor=%23202736&countColor=%23FFD23F&slug=preview" alt="Preview usage" />
     </body>
