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

@@ -7,7 +7,8 @@ import { Location } from "./location";
 import { createPeer, InjectExpress } from "./app";
 import { AppInfo } from "./appInfo";
 import { getColorForId } from "./color";
-import { Instance as FrontendInstance } from "../types/instance";
+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}`;
+}

backend/run.ts

@@ -1,10 +1,10 @@
-import process from "process";
-import open from "open";
+import process from 'process';
+import open from 'open';
 
-import { createFrontend, InjectExpress } from "./app";
-import { Instances, Options } from "./instance";
-import { getLocation, Location, LocationError } from "./location";
-import { getAppInfo, AppInfo, AppInfoError } from "./appInfo";
+import { createFrontend, InjectExpress } from './app';
+import { Instances, Options } from './instance';
+import { getLocation, Location, LocationError } from './location';
+import { getAppInfo, AppInfo, AppInfoError } from './appInfo';
 
 export type Inject = {
   injectFrontend: InjectExpress;
@@ -29,12 +29,12 @@ function actualRun(appInfo: AppInfo, options: Options, inject: Inject): void {
   );
 
   frontend.listen(options.basePort, () => {
-    console.log("Starting webxdc-dev frontend");
+    console.log('Starting webxdc-dev frontend');
   });
 
   instances.start();
 
-  open("http://localhost:" + options.basePort);
+  open('http://localhost:' + options.basePort);
 }
 
 export function run(locationStr: string, options: Options, inject: Inject) {
@@ -49,13 +49,13 @@ export function run(locationStr: string, options: Options, inject: Inject) {
     throw e;
   }
 
-  for (const signal in ["SIGINT", "SIGTERM"]) {
+  for (const signal in ['SIGINT', 'SIGTERM']) {
     process.on(signal, () => {
       location.dispose();
     });
   }
 
-  console.log("Starting webxdc project in:", locationStr);
+  console.log('Starting webxdc project in:', locationStr);
 
   getAppInfo(location)
     .then((appInfo) => {

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,9 +130,9 @@ window.addEventListener("load", () => alterUi(getWebXdc().selfName, transport));
 
 // listen to messages coming into iframe
 window.addEventListener("message", (event) => {
-  if (event.origin.indexOf("localhost:") === -1) {
-    return;
-  }
+  // if (event.origin.indexOf("localhost:") === -1) {
+  //   return;
+  // }
   if (event.data === "reload") {
     window.location.reload();
   }