They already use web-modules good thing

[lemanschik]

They use 2 integrations as they need to supply inital dependencies to the internal loader

funny thing they implemented web modules but they forgotten the integrity part which is importent.

@stackblitz/sdk

const PACKAGE_JSON = {
  name: 'cool-project',
  version: '0.0.0',
  private: true,
  dependencies: {
    gsap: '^3.11.0',
    jquery: '^3.6.0',
    lodash: '^4.17.21',
  },
};

const project = {
  title: 'My cool project',
  description: 'Example animation project',
  template: 'javascript',
  // REQUIRED: specify dependencies
  dependencies: PACKAGE_JSON.dependencies,
  files: {
    // Recommended: provide a package.json file with the same dependencies
    'package.json': JSON.stringify(PACKAGE_JSON, null, 2),
    'index.html': '<h1>Hello world!</h1>',
    'index.js': 'import gsap from "gsap";\n// etc.',
  },
};

thats why they are working on a web-container api they think they can keep the loader infrastructure internal.

[lemanschik]

they then put a binding on the wasm ECMAScript libnode pointers

https://w-corp.staticblitz.com/webcontainer-api-client.8cf5a3c77f45c942df800a39619ec49fff7e5814.js

the build is the following take nodejs build ECMAScript only build modules indipendent as WASM then link them up via in memory pointers.

[lemanschik]

api

/**
 * The WebContainer global is available after a successful {@link load}.
 */
export declare const WebContainer: {
    /**
     * Creates a WebContainer instance. It can only be called once.
     */
    boot(): Promise<WebContainer>;
};
export interface WebContainer {
    /**
     * Gives access to the underlying file system.
     */
    fs: FileSystemAPI;
    /**
     * Runs a process.
     */
    run(options: RunOptions, eventListeners?: RunListeners): Promise<WebContainerProcess>;
    /**
     * Listens for global events.
     *
     * @event 'port' - Emitted when a port is open or closed by some process. The `url` parameter
     * specifies the url from which the server can be accessed.
     *
     * @event 'server-ready' - Emitted when the server running on `port` is listening for incoming
     * connections and ready to answer requests.
     *
     * @event 'error' - Emitted when an internal error is triggered.
     */
    on(event: 'port', listener: (port: number, type: 'open' | 'close', url: string) => void): () => void;
    on(event: 'server-ready', listener: (port: number, url: string) => void): () => void;
    on(event: 'error', listener: (error: {
        message: string;
    }) => void): () => void;
    /**
     * Loads a tree of files into the filesystem.
     *
     * If given, {@param mountPoints} specifies a set of nested paths where the tree should be loaded.
     */
    loadFiles(tree: FileSystemTree, options?: {
        mountPoints?: string | string[];
    }): Promise<void>;
    /**
     * Destroys the WebContainer instance and releases its resources.
     */
    teardown(): void;
}
declare type BufferEncoding = Exclude<string, 'buffer'>;
/**
 * Interface to interact directly with the WebContainer filesystem. Modeled after `fs.promises` in Node.
 */
export interface FileSystemAPI {
    readdir(path: string, options: 'buffer' | {
        encoding: 'buffer';
    }): Promise<Uint8Array[]>;
    readdir(path: string, options?: {
        encoding?: BufferEncoding | null;
    } | BufferEncoding | null): Promise<string[]>;
    readFile(path: string, encoding?: null): Promise<Uint8Array>;
    readFile(path: string, encoding: BufferEncoding): Promise<string>;
    rm(path: string, options?: {
        force?: boolean;
        recursive?: boolean;
    }): Promise<void>;
}
export interface FileSystemTree {
    [name: string]: DirectoryEntry | FileEntry;
}
export interface DirectoryEntry {
    directory: FileSystemTree;
}
export interface FileEntry {
    file: {
        contents: string | Uint8Array;
    };
}
/**
 * A running process spawned in a {@link WebContainer}.
 */
export interface WebContainerProcess {
    /**
     * A promise for the exit code of the process.
     */
    onExit: Promise<number>;
    /**
     * Kills the process.
     */
    kill(): void;
}
export interface RunOptions {
    /**
     * Command to be spawned, e.g. 'node', 'npm', 'ls', etc.
     */
    command: string;
    /**
     * Command line arguments for the process.
     *
     * @example
     *
     * ```
     * // with command `node`
     * ['index.js']
     *
     * // with command `npm`
     * ['install', '--production']
     * ```
     */
    args?: string[];
    /**
     * Environment variables to set for this process.
     */
    env?: Record<string, string | number | boolean>;
}
/**
 * Listeners for events coming from a spawned process.
 */
export interface RunListeners {
    /**
     * Receives all terminal stdout emitted by the spawned process _and_ its descendants.
     */
    stdout?: (data: string) => void;
    /**
     * Receives all terminal stderr emitted by the spawned process _and_ its descendants.
     */
    stderr?: (data: string) => void;
    /**
     * Receives all terminal output (stdout and stderr together) emitted by the spawned process
     * _and_ its descendants.
     */
    output?: (data: string) => void;
}
/**
 * The main entrypoint of this library.
 *
 * @returns A promise that indicates whether the WebContainer global is available to use.
 */
export declare function load(): Promise<typeof WebContainer>;
export {};

[lemanschik]

sdk types

import { connect, embedGithubProject, embedProject, embedProjectId, openGithubProject, openProject, openProjectId } from './lib';
--
2 | export type { Project, ProjectOptions, ProjectDependencies, ProjectFiles, ProjectSettings, ProjectTemplate, EmbedOptions, OpenOptions, OpenFileOption, UiThemeOption, UiViewOption, } from './interfaces';
3 | export type { FsDiff, VM } from './vm';
4 | declare const _default: {
5 | connect: typeof connect;
6 | embedGithubProject: typeof embedGithubProject;
7 | embedProject: typeof embedProject;
8 | embedProjectId: typeof embedProjectId;
9 | openGithubProject: typeof openGithubProject;
10 | openProject: typeof openProject;
11 | openProjectId: typeof openProjectId;
12 | };
13 | export default _default;