WebContainer Preview Ports Store (stores/previews.ts)

bolt.diy_V2.0 · dev-tools, webcontainer, nanostores, preview, port, realtime

Nanostores store that tracks live preview ports from a WebContainer, exposing ready state and base URLs.

// Source: https://github.com/mperkins0155/bolt.diy_V2.0 | License: MIT | Copyright 2024 StackBlitz, Inc
// Provided via justclaw.it.com; keep this notice with the code.
import type { WebContainer } from '@webcontainer/api';
import { atom } from 'nanostores';

export interface PreviewInfo {
  port: number;
  ready: boolean;
  baseUrl: string;
}

export class PreviewsStore {
  #availablePreviews = new Map<number, PreviewInfo>();
  #webcontainer: Promise<WebContainer>;

  previews = atom<PreviewInfo[]>([]);

  constructor(webcontainerPromise: Promise<WebContainer>) {
    this.#webcontainer = webcontainerPromise;

    this.#init();
  }

  async #init() {
    const webcontainer = await this.#webcontainer;

    webcontainer.on('port', (port, type, url) => {
      let previewInfo = this.#availab

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key