@tutorialkit-rb/runtime 1.5.2-rb.0.1.0

package/dist/utils/support.js

@@ -0,0 +1,23 @@
+export function isWebContainerSupported() {
+    try {
+        const hasSharedArrayBuffer = 'SharedArrayBuffer' in globalThis;
+        const looksLikeChrome = navigator.userAgent.includes('Chrome');
+        const looksLikeFirefox = navigator.userAgent.includes('Firefox');
+        const looksLikeSafari = navigator.userAgent.includes('Safari');
+        if (hasSharedArrayBuffer && (looksLikeChrome || looksLikeFirefox)) {
+            return true;
+        }
+        if (hasSharedArrayBuffer && looksLikeSafari) {
+            // we only support Safari 16.4 and up so we check for the version here
+            const match = navigator.userAgent.match(/Version\/(\d+)\.(\d+) (?:Mobile\/.*?)?Safari/);
+            const majorVersion = match ? Number(match?.[1]) : 0;
+            const minorVersion = match ? Number(match?.[2]) : 0;
+            return majorVersion > 16 || (majorVersion === 16 && minorVersion >= 4);
+        }
+        // allow overriding the support check with localStorage.webcontainer_any_ua = 1
+        return Boolean(localStorage.getItem('webcontainer_any_ua'));
+    }
+    catch {
+        return false;
+    }
+}

package/dist/utils/terminal.d.ts

@@ -0,0 +1,17 @@
+export interface ITerminal {
+    readonly cols?: number;
+    readonly rows?: number;
+    reset: () => void;
+    write: (data: string) => void;
+    input: (data: string) => void;
+    onData: (cb: (data: string) => void) => void;
+}
+export declare const escapeCodes: {
+    reset: string;
+    clear: string;
+    red: (text: string) => string;
+    gray: (text: string) => string;
+    green: (text: string) => string;
+    magenta: (text: string) => string;
+};
+export declare function clearTerminal(terminal?: ITerminal): void;

package/dist/utils/terminal.js

@@ -0,0 +1,13 @@
+const reset = '\x1b[0m';
+export const escapeCodes = {
+    reset,
+    clear: '\x1b[g',
+    red: (text) => `\x1b[1;31m${text}${reset}`,
+    gray: (text) => `\x1b[37m${text}${reset}`,
+    green: (text) => `\x1b[1;32m${text}${reset}`,
+    magenta: (text) => `\x1b[35m${text}${reset}`,
+};
+export function clearTerminal(terminal) {
+    terminal?.reset();
+    terminal?.write(escapeCodes.clear);
+}

package/dist/webcontainer/command.d.ts

@@ -0,0 +1,28 @@
+import type { CommandSchema, CommandsSchema } from '@tutorialkit-rb/types';
+export declare class Commands implements Iterable<Command> {
+    /**
+     * List of commands executed before the main command.
+     */
+    readonly prepareCommands?: Command[];
+    /**
+     * Main command to run. Typically a dev server, e.g. `npm run start`.
+     */
+    readonly mainCommand?: Command;
+    constructor({ prepareCommands, mainCommand }: CommandsSchema);
+    [Symbol.iterator](): Generator<Command, void, unknown>;
+}
+export declare class Command {
+    /**
+     * The underlying shell command.
+     */
+    readonly shellCommand: string;
+    /**
+     * Title describing what this command does, e.g., "Installing dependencies".
+     */
+    readonly title: string;
+    constructor(command: CommandSchema);
+    isRunnable(): boolean;
+    static equals(a: Command, b: Command): boolean;
+    static toTitle(command: CommandSchema): string;
+    static toShellCommand(command: CommandSchema): string;
+}

package/dist/webcontainer/command.js

@@ -0,0 +1,67 @@
+export class Commands {
+    /**
+     * List of commands executed before the main command.
+     */
+    prepareCommands;
+    /**
+     * Main command to run. Typically a dev server, e.g. `npm run start`.
+     */
+    mainCommand;
+    constructor({ prepareCommands, mainCommand }) {
+        this.prepareCommands = prepareCommands?.map((command) => new Command(command));
+        this.mainCommand = mainCommand ? new Command(mainCommand) : undefined;
+    }
+    [Symbol.iterator]() {
+        const _this = this;
+        return (function* () {
+            for (const command of _this.prepareCommands ?? []) {
+                yield command;
+            }
+            if (_this.mainCommand) {
+                yield _this.mainCommand;
+            }
+        })();
+    }
+}
+export class Command {
+    /**
+     * The underlying shell command.
+     */
+    shellCommand;
+    /**
+     * Title describing what this command does, e.g., "Installing dependencies".
+     */
+    title;
+    constructor(command) {
+        this.shellCommand = Command.toShellCommand(command);
+        this.title = Command.toTitle(command);
+    }
+    isRunnable() {
+        return this.shellCommand !== '';
+    }
+    static equals(a, b) {
+        return a.shellCommand === b.shellCommand;
+    }
+    static toTitle(command) {
+        let title = '';
+        if (typeof command === 'string') {
+            title = command;
+        }
+        else if (Array.isArray(command)) {
+            title = command[1];
+        }
+        else {
+            title = command.title;
+        }
+        return title;
+    }
+    static toShellCommand(command) {
+        if (typeof command === 'string') {
+            return command;
+        }
+        if (Array.isArray(command)) {
+            return command[0];
+        }
+        return command.command;
+    }
+}

package/dist/webcontainer/editor-config.d.ts

@@ -0,0 +1,12 @@
+import type { EditorSchema } from '@tutorialkit-rb/types';
+export declare class EditorConfig {
+    private _config;
+    constructor(config?: EditorSchema);
+    get visible(): boolean;
+    get fileTree(): {
+        /** Visibility of file tree */
+        visible: boolean;
+        /** Whether to allow file and folder editing in file tree */
+        allowEdits: false | string[];
+    };
+}

package/dist/webcontainer/editor-config.js

@@ -0,0 +1,60 @@
+export class EditorConfig {
+    _config;
+    constructor(config) {
+        this._config = normalizeEditorConfig(config);
+    }
+    get visible() {
+        return this._config.visible;
+    }
+    get fileTree() {
+        return this._config.fileTree;
+    }
+}
+function normalizeEditorConfig(config) {
+    if (config === false) {
+        return {
+            visible: false,
+            fileTree: {
+                visible: false,
+                allowEdits: false,
+            },
+        };
+    }
+    if (config === undefined || config === true) {
+        return {
+            visible: true,
+            fileTree: {
+                visible: true,
+                allowEdits: false,
+            },
+        };
+    }
+    if (typeof config.fileTree === 'boolean') {
+        return {
+            visible: true,
+            fileTree: {
+                visible: config.fileTree,
+                allowEdits: false,
+            },
+        };
+    }
+    if (typeof config.fileTree?.allowEdits === 'boolean' || !config.fileTree?.allowEdits) {
+        return {
+            visible: true,
+            fileTree: {
+                visible: true,
+                allowEdits: config.fileTree?.allowEdits ? ['**'] : false,
+            },
+        };
+    }
+    return {
+        visible: true,
+        fileTree: {
+            visible: true,
+            allowEdits: toArray(config.fileTree.allowEdits),
+        },
+    };
+}
+function toArray(items) {
+    return Array.isArray(items) ? items : [items];
+}

package/dist/webcontainer/index.d.ts

@@ -0,0 +1,4 @@
+export { Command, Commands } from './command.js';
+export { safeBoot } from './on-demand-boot.js';
+export { PreviewInfo } from './preview-info.js';
+export { StepsController, type Step, type Steps } from './steps.js';

package/dist/webcontainer/index.js

@@ -0,0 +1,4 @@
+export { Command, Commands } from './command.js';
+export { safeBoot } from './on-demand-boot.js';
+export { PreviewInfo } from './preview-info.js';
+export { StepsController } from './steps.js';

package/dist/webcontainer/on-demand-boot.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Lightweight wrapper around WebContainer.boot
+ * to only boot if there's no risk on crashing the browser.
+ *
+ * This typicall might happen on iOS.
+ *
+ * When iOS is detected, a call to `unblock()` is required
+ * to move forward with the boot.
+ */
+import { WebContainer, type BootOptions } from '@webcontainer/api';
+import { type ReadableAtom } from 'nanostores';
+export type BootStatus = 'unknown' | 'blocked' | 'booting' | 'booted';
+export declare const bootStatus: ReadableAtom<BootStatus>;
+export declare function safeBoot(options: BootOptions): Promise<WebContainer>;
+export declare function unblockBoot(): void;

package/dist/webcontainer/on-demand-boot.js

@@ -0,0 +1,39 @@
+/**
+ * Lightweight wrapper around WebContainer.boot
+ * to only boot if there's no risk on crashing the browser.
+ *
+ * This typicall might happen on iOS.
+ *
+ * When iOS is detected, a call to `unblock()` is required
+ * to move forward with the boot.
+ */
+import { WebContainer } from '@webcontainer/api';
+import { atom } from 'nanostores';
+import { withResolvers } from '../utils/promises.js';
+const localBootStatus = atom('unknown');
+const blockingStatus = withResolvers();
+export const bootStatus = localBootStatus;
+export async function safeBoot(options) {
+    if (localBootStatus.get() === 'unknown') {
+        localBootStatus.set(isRestricted() ? 'blocked' : 'booting');
+    }
+    if (localBootStatus.get() === 'blocked') {
+        await blockingStatus.promise;
+        localBootStatus.set('booting');
+    }
+    const webcontainer = await WebContainer.boot(options);
+    localBootStatus.set('booted');
+    return webcontainer;
+}
+export function unblockBoot() {
+    if (localBootStatus.get() !== 'blocked') {
+        return;
+    }
+    blockingStatus.resolve();
+}
+function isRestricted() {
+    const { userAgent, maxTouchPoints, platform } = navigator;
+    const iOS = /iPhone/.test(userAgent) || platform === 'iPhone';
+    const iPadOS = (platform === 'MacIntel' && maxTouchPoints > 1) || platform === 'iPad';
+    return iOS || iPadOS;
+}

package/dist/webcontainer/port-info.d.ts

@@ -0,0 +1,6 @@
+export declare class PortInfo {
+    readonly port: number;
+    origin?: string | undefined;
+    ready: boolean;
+    constructor(port: number, origin?: string | undefined, ready?: boolean);
+}

package/dist/webcontainer/port-info.js

@@ -0,0 +1,10 @@
+export class PortInfo {
+    port;
+    origin;
+    ready;
+    constructor(port, origin, ready = false) {
+        this.port = port;
+        this.origin = origin;
+        this.ready = ready;
+    }
+}

package/dist/webcontainer/preview-info.d.ts

@@ -0,0 +1,21 @@
+import type { PreviewSchema } from '@tutorialkit-rb/types';
+import { PortInfo } from './port-info.js';
+export declare class PreviewInfo {
+    readonly portInfo: PortInfo;
+    title?: string;
+    pathname?: string;
+    get url(): string | undefined;
+    get port(): number;
+    get baseUrl(): string | undefined;
+    get ready(): boolean;
+    constructor(preview: Omit<Preview, 'port'>, portInfo: PortInfo);
+    set path(val: string | undefined);
+    static parse(preview: Exclude<PreviewSchema, boolean>[0]): Preview;
+    static equals(a: PreviewInfo, b: PreviewInfo): boolean;
+}
+interface Preview {
+    port: number;
+    pathname?: string;
+    title?: string;
+}
+export {};

package/dist/webcontainer/preview-info.js

@@ -0,0 +1,56 @@
+import { PortInfo } from './port-info.js';
+export class PreviewInfo {
+    portInfo;
+    title;
+    pathname;
+    get url() {
+        if (this.baseUrl) {
+            return new URL(this.pathname ?? '/', this.baseUrl).toString();
+        }
+        return undefined;
+    }
+    get port() {
+        return this.portInfo.port;
+    }
+    get baseUrl() {
+        return this.portInfo.origin;
+    }
+    get ready() {
+        return this.portInfo.ready;
+    }
+    constructor(preview, portInfo) {
+        this.title = preview.title;
+        this.pathname = preview.pathname;
+        this.portInfo = portInfo;
+    }
+    set path(val) {
+        this.pathname = val;
+    }
+    static parse(preview) {
+        if (typeof preview === 'number') {
+            return {
+                port: preview,
+            };
+        }
+        else if (typeof preview === 'string') {
+            const [port, ...rest] = preview.split('/');
+            return {
+                port: parseInt(port),
+                pathname: rest.join('/'),
+            };
+        }
+        else if (Array.isArray(preview)) {
+            return {
+                port: preview[0],
+                title: preview[1],
+                pathname: preview[2],
+            };
+        }
+        else {
+            return preview;
+        }
+    }
+    static equals(a, b) {
+        return a.portInfo.port === b.portInfo.port && a.pathname === b.pathname && a.title === b.title;
+    }
+}

package/dist/webcontainer/shell.d.ts

@@ -0,0 +1,14 @@
+import type { WebContainer } from '@webcontainer/api';
+import type { ITerminal } from '../utils/terminal.js';
+interface ProcessOptions {
+    /**
+     * Set to `true` if you want to allow redirecting output (e.g. `echo foo > bar`).
+     */
+    allowRedirects: boolean;
+    /**
+     * List of commands that are allowed by the JSH process.
+     */
+    allowCommands?: string[];
+}
+export declare function newJSHProcess(webcontainer: WebContainer, terminal: ITerminal, options: ProcessOptions | undefined): Promise<import("@webcontainer/api").WebContainerProcess>;
+export {};

package/dist/webcontainer/shell.js

@@ -0,0 +1,46 @@
+import { withResolvers } from '../utils/promises.js';
+export async function newJSHProcess(webcontainer, terminal, options) {
+    const args = [];
+    if (!options?.allowRedirects) {
+        // if redirects are turned off, start JSH with `--no-redirects`
+        args.push('--no-redirects');
+    }
+    if (Array.isArray(options?.allowCommands)) {
+        // if only a subset of commands is allowed, pass it down to JSH
+        args.push('--allow-commands', options.allowCommands.join(','));
+    }
+    // we spawn a JSH process with a fallback cols and rows in case the process is not attached yet to a visible terminal
+    const process = await webcontainer.spawn('/bin/jsh', ['--osc', ...args], {
+        terminal: {
+            cols: terminal.cols ?? 80,
+            rows: terminal.rows ?? 15,
+        },
+        env: {
+            PATH: `${webcontainer.workdir}/bin:${webcontainer.path}`,
+        },
+    });
+    const input = process.input.getWriter();
+    const output = process.output;
+    const jshReady = withResolvers();
+    let isInteractive = false;
+    output.pipeTo(new WritableStream({
+        write(data) {
+            if (!isInteractive) {
+                const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
+                if (osc === 'interactive') {
+                    // wait until we see the interactive OSC
+                    isInteractive = true;
+                    jshReady.resolve();
+                }
+            }
+            terminal.write(data);
+        },
+    }));
+    terminal.onData((data) => {
+        if (isInteractive) {
+            input.write(data);
+        }
+    });
+    await jshReady.promise;
+    return process;
+}

package/dist/webcontainer/steps.d.ts

@@ -0,0 +1,15 @@
+import type { Command } from './command.js';
+export type Steps = Step[];
+export interface Step {
+    title: string;
+    status: 'completed' | 'running' | 'failed' | 'skipped' | 'idle';
+}
+export declare class StepsController {
+    /**
+     * Steps that the runner is or will be executing.
+     */
+    steps: import("nanostores").WritableAtom<Steps | undefined>;
+    setFromCommands(commands: Command[]): void;
+    updateStep(index: number, step: Step): void;
+    skipRemaining(index: number): void;
+}

package/dist/webcontainer/steps.js

@@ -0,0 +1,38 @@
+import { atom } from 'nanostores';
+export class StepsController {
+    /**
+     * Steps that the runner is or will be executing.
+     */
+    steps = atom(undefined);
+    setFromCommands(commands) {
+        if (commands.length > 0) {
+            this.steps.set(commands.map((command) => ({
+                title: command.title,
+                status: 'idle',
+            })));
+        }
+        else {
+            this.steps.set(undefined);
+        }
+    }
+    updateStep(index, step) {
+        const currentSteps = this.steps.value;
+        if (!currentSteps) {
+            return;
+        }
+        this.steps.set([...currentSteps.slice(0, index), step, ...currentSteps.slice(index + 1)]);
+    }
+    skipRemaining(index) {
+        const currentSteps = this.steps.value;
+        if (!currentSteps) {
+            return;
+        }
+        this.steps.set([
+            ...currentSteps.slice(0, index),
+            ...currentSteps.slice(index).map((step) => ({
+                ...step,
+                status: 'skipped',
+            })),
+        ]);
+    }
+}

package/dist/webcontainer/terminal-config.d.ts

@@ -0,0 +1,59 @@
+import type { TerminalPanelType, TerminalSchema } from '@tutorialkit-rb/types';
+import type { WebContainerProcess } from '@webcontainer/api';
+import type { ITerminal } from '../utils/terminal.js';
+interface TerminalPanelOptions {
+    id?: string;
+    title?: string;
+    allowRedirects?: boolean;
+    allowCommands?: string[];
+}
+export declare class TerminalConfig {
+    private _config;
+    constructor(config?: TerminalSchema);
+    get panels(): TerminalPanel[];
+    get activePanel(): number;
+    get defaultOpen(): boolean;
+}
+/**
+ * This class contains the state for a terminal panel. This is a panel which is attached to a process and renders
+ * the process output to a screen.
+ */
+export declare class TerminalPanel implements ITerminal {
+    readonly type: TerminalPanelType;
+    private readonly _options?;
+    static panelCount: Record<TerminalPanelType, number>;
+    static resetCount(): void;
+    readonly id: string;
+    readonly title: string;
+    private _terminal?;
+    private _process?;
+    private _data;
+    private _onData?;
+    constructor(type: TerminalPanelType, _options?: TerminalPanelOptions | undefined);
+    get terminal(): ITerminal | undefined;
+    get process(): WebContainerProcess | undefined;
+    get processOptions(): {
+        allowRedirects: boolean;
+        allowCommands: string[] | undefined;
+    } | undefined;
+    get cols(): number | undefined;
+    get rows(): number | undefined;
+    reset(): void;
+    /** @internal*/
+    write(data: string): void;
+    input(data: string): void;
+    onData(callback: (data: string) => void): void;
+    /**
+     * Attach a WebContainer process to this panel.
+     *
+     * @param process The WebContainer process
+     */
+    attachProcess(process: WebContainerProcess): void;
+    /**
+     * Attach a terminal to this panel.
+     *
+     * @param terminal The terminal.
+     */
+    attachTerminal(terminal: ITerminal): void;
+}
+export {};