Merge pull request #58 from webxdc/simon/stackblitz-support

fix usage inside of stackblitz.com online IDE

Author: Simon-Laux

.npmignore

@@ -6,3 +6,5 @@
 
 # we don't want test fixtures
 backend/fixtures
+
+example_app.xdc

CHANGELOG.md

@@ -21,6 +21,7 @@ release date when you use `npm version` (see `README.md`).
 
 - Apps being unable to `fetch()` anything or use `blob:` and `data:` resource because of `connect-src` CSP
 - `indexedDB` not getting cleared on `clear()`
+- fix usage inside of stackblitz.com online IDE
 
 ## [0.17.0][] - 2023-06-08
 

backend/instance.ts

@@ -8,6 +8,7 @@ import { createPeer, InjectExpress } from "./app";
 import { AppInfo } from "./appInfo";
 import { getColorForId } from "./color";
 import { Instance as FrontendInstance } from "../types/instance";
+import { getInstanceUrl } from "./instance_url";
 
 export type Options = {
   basePort: number;
@@ -93,7 +94,7 @@ export class Instances {
       throw new Error(`Already have Webxdc instance at port: ${port}`);
     }
 
-    const instanceUrl = `http://localhost:${port}`;
+    const instanceUrl = getInstanceUrl(port);
 
     const wsInstance = createPeer({
       location: this.location,

backend/instance_url.ts

@@ -0,0 +1,10 @@
+import { isWebContainer, HostURL } from "@webcontainer/env";
+
+export function getInstanceUrl(port: number) {
+  if (isWebContainer()) {
+    // stackblitz / webcontainer uses different url to represent different ports.
+    // This is why we need to convert it here.
+    return HostURL.parse(`https://localhost:${port}`).href;
+  }
+  return `http://localhost:${port}`;
+}

package-lock.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@hope-ui/solid": "^0.6.2",
     "@stitches/core": "^1.2.8",
+    "@webcontainer/env": "^1.1.1",
     "adm-zip": "^0.5.9",
     "body-parser": "^1.20.0",
     "commander": "^9.3.0",

package.json

@@ -83,11 +83,26 @@ export class DevServerTransport implements Transport {
     window.location.reload();
   }
 
+  static port() {
+    if (location.host.endsWith(".webcontainer.io")) {
+      // stackblitz / webcontainer uses different url to represent different ports.
+      // example: `localhost:7002` becomes `https://xoriwypmnngithub-ltqe--7002--f565b097.local-corp.webcontainer.io/`
+      // in stackblitz environment.
+      // This regex extracts the port from the url.
+      return (
+        /--(\d+)--/.exec(document.location.href)?.[1] ||
+        "error in webxdc simulator"
+      );
+    } else {
+      return document.location.port;
+    }
+  }
+
   address() {
-    return `instance@${document.location.port}`;
+    return `instance@${DevServerTransport.port()}`;
   }
   name() {
-    return `Instance ${document.location.port}`;
+    return `Instance ${DevServerTransport.port()}`;
   }
 
   setInfo(info: Info): void {
@@ -115,7 +130,11 @@ window.addEventListener("load", () => alterUi(getWebXdc().selfName, transport));
 
 // listen to messages coming into iframe
 window.addEventListener("message", (event) => {
-  if (event.origin.indexOf("localhost:") === -1) {
+  const isAllowed =
+    event.origin.includes("localhost:") ||
+    (location.host.endsWith(".webcontainer.io") &&
+      event.origin.includes(".webcontainer.io"));
+  if (!isAllowed) {
     return;
   }
   if (event.data === "reload") {