feat(runtime): add preview.pathname

packages/runtime/src/store/previews.ts

@@ -1,10 +1,11 @@
 import type { PreviewSchema } from '@tutorialkit/types';
+import type { WebContainer } from '@webcontainer/api';
 import { atom } from 'nanostores';
 import { PreviewInfo } from '../webcontainer/preview-info.js';
-import type { WebContainer } from '@webcontainer/api';
+import { PortInfo } from '../webcontainer/port-info.js';
 
 export class PreviewsStore {
-  private _availablePreviews: PreviewInfo[] = [];
+  private _availablePreviews = new Map<number, PortInfo>();
   private _previewsLayout: PreviewInfo[] = [];
 
   /**
@@ -21,21 +22,19 @@ export class PreviewsStore {
     const webcontainer = await webcontainerPromise;
 
     webcontainer.on('port', (port, type, url) => {
-      const previewInfos = this._availablePreviews.filter((preview) => preview.port === port);
+      let portInfo = this._availablePreviews.get(port);
+
+      if (!portInfo) {
+        portInfo = new PortInfo(port, url, type === 'open');
 
-      if (previewInfos.length === 0) {
-        const info = new PreviewInfo(port, type === 'open');
-        previewInfos.push(info);
-        this._availablePreviews.push(info);
+        this._availablePreviews.set(port, portInfo);
       }
 
-      previewInfos.forEach((info) => {
-        info.ready = type === 'open';
-        info.baseUrl = url;
-      });
+      portInfo.ready = type === 'open';
+      portInfo.origin = url;
 
       if (this._previewsLayout.length === 0) {
-        this.previews.set(previewInfos);
+        this.previews.set([new PreviewInfo(portInfo)]);
       } else {
         this._previewsLayout = [...this._previewsLayout];
         this.previews.set(this._previewsLayout);
@@ -60,16 +59,15 @@ export class PreviewsStore {
 
     const previewInfos = previews.map((preview) => {
       const info = new PreviewInfo(preview);
+      const portInfo = this._availablePreviews.get(info.port);
 
-      let previewInfo = this._availablePreviews.find((availablePreview) => PreviewInfo.equals(info, availablePreview));
-
-      if (!previewInfo) {
-        previewInfo = info;
-
-        this._availablePreviews.push(previewInfo);
+      if (!portInfo) {
+        this._availablePreviews.set(info.port, info.portInfo);
+      } else {
+        info.portInfo = portInfo;
       }
 
-      return previewInfo;
+      return info;
     });
 
     let areDifferent = previewInfos.length != this._previewsLayout.length;

packages/runtime/src/webcontainer/port-info.ts

@@ -0,0 +1,7 @@
+export class PortInfo {
+  constructor(
+    readonly port: number,
+    public origin?: string,
+    public ready?: boolean,
+  ) {}
+}

packages/runtime/src/webcontainer/preview-info.spec.ts

@@ -70,7 +70,7 @@ describe('PreviewInfo', () => {
 
   it('should have a url with a custom pathname and baseUrl', () => {
     const previewInfo = new PreviewInfo('3000/foo');
-    previewInfo.baseUrl = 'https://example.com';
+    previewInfo.portInfo.origin = 'https://example.com';
 
     expect(previewInfo.url).toBe('https://example.com/foo');
   });

packages/runtime/src/webcontainer/preview-info.ts

@@ -1,10 +1,10 @@
 import type { PreviewSchema } from '@tutorialkit/types';
+import { PortInfo } from './port-info.js';
 
 export class PreviewInfo {
-  port: number;
-  ready: boolean;
+  portInfo: PortInfo;
+
   title?: string;
-  baseUrl?: string;
   pathname?: string;
 
   get url(): string | undefined {
@@ -15,27 +15,41 @@ export class PreviewInfo {
     return undefined;
   }
 
-  constructor(preview: Exclude<PreviewSchema, boolean>[0], ready?: boolean) {
-    if (typeof preview === 'number') {
-      this.port = preview;
+  get port() {
+    return this.portInfo.port;
+  }
+
+  get baseUrl() {
+    return this.portInfo.origin;
+  }
+
+  get ready() {
+    return this.portInfo.ready;
+  }
+
+  constructor(preview: PortInfo | Exclude<PreviewSchema, boolean>[0], ready?: boolean) {
+    if (preview instanceof PortInfo) {
+      this.portInfo = preview;
+    } else if (typeof preview === 'number') {
+      this.portInfo = new PortInfo(preview);
     } else if (typeof preview === 'string') {
       const [port, ...rest] = preview.split('/');
-      this.port = parseInt(port);
+      this.portInfo = new PortInfo(parseInt(port));
       this.pathname = rest.join('/');
     } else if (Array.isArray(preview)) {
-      this.port = preview[0];
+      this.portInfo = new PortInfo(preview[0]);
       this.title = preview[1];
       this.pathname = preview[2];
     } else {
-      this.port = preview.port;
+      this.portInfo = new PortInfo(preview.port);
       this.title = preview.title;
       this.pathname = preview.pathname;
     }
 
-    this.ready = !!ready;
+    this.portInfo.ready ||= !!ready;
   }
 
   static equals(a: PreviewInfo, b: PreviewInfo) {
-    return a.port === b.port && a.pathname === b.pathname && a.title === b.title;
+    return a.portInfo.port === b.portInfo.port && a.pathname === b.pathname && a.title === b.title;
   }
 }