jupyterpack 0.2.1 → 0.4.0

package/lib/swConnection/mainConnectionManager.js

@@ -0,0 +1,93 @@
+import { arrayBufferToBase64 } from '../tools';
+import { UUID } from '@lumino/coreutils';
+/**
+ * Manages connections between clients and kernel executors.
+ * This class handles the registration of kernel executors and the generation of responses
+ * for client requests. It maintains a mapping of kernel client IDs to their respective executors.
+ * The HTTP requests intercepted by the service worker are forwarded to the appropriate kernel executor.
+ * The websocket messages forwarded from the broadcast channel are also forwarded to the appropriate kernel executor.
+ * It's running on the main thread
+ */
+export class ConnectionManager {
+    constructor(instanceId) {
+        this.instanceId = instanceId;
+        this._kernelExecutors = new Map();
+        this._wsBroadcastChannel = new BroadcastChannel(`/jupyterpack/ws/${instanceId}`);
+        this._initWsChannel();
+    }
+    async registerConnection(kernelExecutor) {
+        const uuid = UUID.uuid4();
+        this._kernelExecutors.set(uuid, kernelExecutor);
+        return { instanceId: this.instanceId, kernelClientId: uuid };
+    }
+    async generateResponse(options) {
+        const { urlPath, kernelClientId, method, params, requestBody, headers } = options;
+        const executor = this._kernelExecutors.get(kernelClientId);
+        if (!executor) {
+            return null;
+        }
+        const response = await executor.getResponse({
+            urlPath,
+            method,
+            params,
+            headers,
+            requestBody
+        });
+        return response;
+    }
+    _initWsChannel() {
+        this._wsBroadcastChannel.onmessage = event => {
+            const rawData = event.data;
+            let data;
+            if (typeof rawData === 'string') {
+                data = JSON.parse(rawData);
+            }
+            else {
+                data = rawData;
+            }
+            const { action, dest, wsUrl, payload } = data;
+            const executor = this._kernelExecutors.get(dest);
+            if (!executor) {
+                console.error('Missing kernel handle for message', data, dest, this._kernelExecutors);
+                return;
+            }
+            switch (action) {
+                case 'open': {
+                    executor.openWebsocket({
+                        instanceId: this.instanceId,
+                        kernelId: dest,
+                        wsUrl,
+                        protocol: payload.protocol
+                    });
+                    break;
+                }
+                case 'send': {
+                    let serializedData;
+                    let isBinary;
+                    if (payload instanceof ArrayBuffer || ArrayBuffer.isView(payload)) {
+                        // Convert data to base64 string
+                        serializedData = arrayBufferToBase64(payload);
+                        isBinary = true;
+                    }
+                    else if (typeof payload === 'string') {
+                        serializedData = payload;
+                        isBinary = false;
+                    }
+                    else {
+                        console.error('Unknown message type', payload);
+                        return;
+                    }
+                    executor.sendWebsocketMessage({
+                        instanceId: this.instanceId,
+                        kernelId: dest,
+                        wsUrl,
+                        message: JSON.stringify({ isBinary, data: serializedData })
+                    });
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+    }
+}

package/lib/swConnection/sw.js

@@ -1,6 +1,6 @@
 // import { expose } from 'comlink';
 import { MessageAction } from '../type';
-import { CommManager } from './comm_manager';
+import { CommManager } from './swCommManager';
 const COMM_MANAGER = new CommManager();
 /**
  * Install event listeners

package/lib/swConnection/swCommManager.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Manages communication between different components using Comlink's MessagePort-based communication.
+ * This class handles registration of communication channels and processing of requests.
+ * It's running on the service worker thread
+ */
+export declare class CommManager {
+    constructor();
+    registerComm(instanceId: string, port: MessagePort): void;
+    generateResponse(request: Request): Promise<Response>;
+    private _commIds;
+}

package/lib/swConnection/{comm_manager.js → swCommManager.js}

@@ -1,4 +1,9 @@
 import { wrap, transfer } from 'comlink';
+/**
+ * Manages communication between different components using Comlink's MessagePort-based communication.
+ * This class handles registration of communication channels and processing of requests.
+ * It's running on the service worker thread
+ */
 export class CommManager {
     constructor() {
         this._commIds = new Map();

package/lib/token.d.ts

@@ -1,3 +1,4 @@
 import { Token } from '@lumino/coreutils';
-import { IConnectionManager } from './type';
+import { IConnectionManager, IJupyterpackDocTracker } from './type';
 export declare const IConnectionManagerToken: Token<IConnectionManager>;
+export declare const IJupyterpackDocTrackerToken: Token<IJupyterpackDocTracker>;

package/lib/token.js

@@ -1,2 +1,3 @@
 import { Token } from '@lumino/coreutils';
 export const IConnectionManagerToken = new Token('jupyterpack:connection-manager');
+export const IJupyterpackDocTrackerToken = new Token('jupyterpack:dock-tracker');

package/lib/tools.d.ts

@@ -1,2 +1,11 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export declare const IS_LITE: boolean;
+export declare const logoIcon: LabIcon;
+export declare const autoReloadIcon: LabIcon;
+export declare const linkIcon: LabIcon;
 export declare function removePrefix(path: string, prefix: string): string;
 export declare function arrayBufferToBase64(buffer: ArrayBuffer): string;
+export declare function base64ToArrayBuffer(base64: string): Uint8Array;
+export declare function base64ToString(base64: string): string;
+export declare function stringOrNone(content?: string): string;
+export declare function isBinaryContentType(contentType?: string): boolean;

package/lib/tools.js

@@ -1,3 +1,20 @@
+import logoStr from '../style/icons/box.svg';
+import autoReloadStr from '../style/icons/autoreload.svg';
+import linkStr from '../style/icons/externallink.svg';
+import { LabIcon } from '@jupyterlab/ui-components';
+export const IS_LITE = !!document.getElementById('jupyter-lite-main');
+export const logoIcon = new LabIcon({
+    name: 'jupyterpack:logo',
+    svgstr: logoStr
+});
+export const autoReloadIcon = new LabIcon({
+    name: 'jupyterpack:autoReload',
+    svgstr: autoReloadStr
+});
+export const linkIcon = new LabIcon({
+    name: 'jupyterpack:externalLink',
+    svgstr: linkStr
+});
 export function removePrefix(path, prefix) {
     if (path.startsWith(prefix)) {
         return path.slice(prefix.length);
@@ -15,3 +32,61 @@ export function arrayBufferToBase64(buffer) {
     }
     return btoa(binary);
 }
+export function base64ToArrayBuffer(base64) {
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes;
+}
+export function base64ToString(base64) {
+    const bytes = base64ToArrayBuffer(base64);
+    return new TextDecoder('utf-8').decode(bytes);
+}
+export function stringOrNone(content) {
+    return content ? `"${content}"` : 'None';
+}
+export function isBinaryContentType(contentType) {
+    if (!contentType) {
+        // no Content-Type → assume binary for safety
+        return true;
+    }
+    contentType = contentType.toLowerCase().trim();
+    const textTypes = [
+        'text/',
+        'application/json',
+        'application/javascript',
+        'application/xml',
+        'application/xhtml+xml',
+        'application/x-www-form-urlencoded',
+        'application/sql',
+        'application/graphql',
+        'application/yaml'
+    ];
+    const binaryIndicators = [
+        'image/',
+        'audio/',
+        'video/',
+        'font/',
+        'application/octet-stream',
+        'application/pdf',
+        'application/zip',
+        'application/x-protobuf',
+        'application/vnd'
+    ];
+    // Starts with text/ or one of the textual types
+    if (textTypes.some(t => contentType.startsWith(t))) {
+        return false;
+    }
+    // Starts with binary-indicating prefix
+    if (binaryIndicators.some(t => contentType.startsWith(t))) {
+        return true;
+    }
+    // If charset is specified → text
+    if (contentType.includes('charset=')) {
+        return false;
+    }
+    // Default: assume binary
+    return true;
+}

package/lib/type.d.ts

@@ -1,17 +1,31 @@
+import { DocumentWidget } from '@jupyterlab/docregistry';
 import { KernelMessage } from '@jupyterlab/services';
 import { IDisposable } from '@lumino/disposable';
+import { IWidgetTracker } from '@jupyterlab/apputils';
+import { ISignal } from '@lumino/signaling';
 export interface IDict<T = any> {
     [key: string]: T;
 }
+export interface IBroadcastMessage {
+    action: 'message' | 'open' | 'close' | 'error' | 'send' | 'connected' | 'backend_message';
+    dest: string;
+    wsUrl: string;
+    payload?: any;
+}
 export declare enum JupyterPackFramework {
     REACT = "react",
-    DASH = "dash"
+    DASH = "dash",
+    STREAMLIT = "streamlit",
+    TORNADO = "tornado"
 }
 export interface IJupyterPackFileFormat {
     entry: string;
     framework: JupyterPackFramework;
     name?: string;
-    metadata?: IDict;
+    metadata?: {
+        autoreload?: boolean;
+    };
+    rootUrl?: string;
 }
 export declare enum MessageAction {
     INIT = "INIT"
@@ -25,7 +39,37 @@ export interface IKernelExecutorParams {
 }
 export interface IKernelExecutor extends IDisposable {
     getResponse(options: IKernelExecutorParams): Promise<IDict>;
-    executeCode(code: KernelMessage.IExecuteRequestMsg['content']): Promise<string>;
+    openWebsocket(options: {
+        instanceId: string;
+        kernelId: string;
+        wsUrl: string;
+        protocol?: string;
+    }): Promise<void>;
+    sendWebsocketMessage(options: {
+        instanceId: string;
+        kernelId: string;
+        wsUrl: string;
+        message: string;
+    }): Promise<void>;
+    executeCode(code: KernelMessage.IExecuteRequestMsg['content'], waitForResult?: boolean): Promise<string | null>;
+    init(options: {
+        entryPath?: string;
+        initCode?: string;
+        instanceId: string;
+        kernelClientId: string;
+    }): Promise<void>;
+    disposePythonServer(): Promise<void>;
+    reloadPythonServer(options: {
+        entryPath?: string;
+        initCode?: string;
+    }): Promise<void>;
+    getResponseFunctionFactory(options: {
+        urlPath: string;
+        method: string;
+        headers: IDict;
+        params?: string;
+        content?: string;
+    }): string;
 }
 export interface IConnectionManager {
     registerConnection(kernelExecutor: IKernelExecutor): Promise<{
@@ -36,3 +80,20 @@ export interface IConnectionManager {
         kernelClientId: string;
     } & IKernelExecutorParams): Promise<IDict | null>;
 }
+export type IJupyterpackDocTracker = IWidgetTracker<DocumentWidget>;
+export interface IPythonWidgetModel extends IDisposable {
+    connectionManager: IConnectionManager;
+    serverReloaded: ISignal<IPythonWidgetModel, void>;
+    kernelStatusChanged: ISignal<IPythonWidgetModel, 'started' | 'stopped'>;
+    reload(): Promise<void>;
+    initialize(): Promise<{
+        success: true;
+        instanceId: string;
+        kernelClientId: string;
+        rootUrl: string;
+        framework: JupyterPackFramework;
+    } | {
+        success: false;
+        error: string;
+    }>;
+}

package/lib/type.js

@@ -2,6 +2,8 @@ export var JupyterPackFramework;
 (function (JupyterPackFramework) {
     JupyterPackFramework["REACT"] = "react";
     JupyterPackFramework["DASH"] = "dash";
+    JupyterPackFramework["STREAMLIT"] = "streamlit";
+    JupyterPackFramework["TORNADO"] = "tornado";
 })(JupyterPackFramework || (JupyterPackFramework = {}));
 export var MessageAction;
 (function (MessageAction) {

package/lib/websocket/websocket.js

@@ -0,0 +1,152 @@
+"use strict";
+(() => {
+    const urlPath = new URL(window.location.href).pathname;
+    const pathAfterExtensionName = urlPath.split('/jupyterpack/static')[1];
+    const pathList = pathAfterExtensionName === null || pathAfterExtensionName === void 0 ? void 0 : pathAfterExtensionName.split('/').filter(Boolean);
+    const instanceId = pathList === null || pathList === void 0 ? void 0 : pathList[0];
+    const kernelClientId = pathList === null || pathList === void 0 ? void 0 : pathList[2];
+    if (!instanceId || !kernelClientId) {
+        throw new Error('Missing instance Id or kernelClient Id');
+    }
+    const sendTypedMessage = (msg) => {
+        bcWsChannel.postMessage({ ...msg, dest: kernelClientId });
+    };
+    function base64ToBinary(base64, dataType) {
+        const binary = atob(base64); // decode base64
+        const len = binary.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binary.charCodeAt(i);
+        }
+        if (dataType === 'arraybuffer') {
+            return bytes.buffer;
+        }
+        else if (dataType === 'blob') {
+            return new Blob([bytes], { type: 'application/octet-stream' });
+        }
+        else {
+            throw new Error("Unsupported type: use 'arraybuffer' or 'blob'");
+        }
+    }
+    const decodeServerMessage = (payload, binaryType) => {
+        const { data, isBinary } = payload;
+        if (isBinary) {
+            // Decode base64 string to array buffer or blob
+            return base64ToBinary(data, binaryType);
+        }
+        return data;
+    };
+    const bcWsChannel = new BroadcastChannel(`/jupyterpack/ws/${instanceId}`);
+    class BroadcastChannelWebSocket {
+        constructor(url, protocols) {
+            this.onclose = () => {
+                // no-op
+            };
+            this.onerror = () => {
+                // no-op
+            };
+            this.onmessage = () => {
+                // no-op
+            };
+            this.onopen = () => {
+                // no-op
+            };
+            this.CONNECTING = 0;
+            this.OPEN = 1;
+            this.CLOSING = 2;
+            this.CLOSED = 3;
+            this._eventHandlers = { message: [], open: [], close: [], error: [] };
+            this._bcMessageHandler = async (event) => {
+                const rawData = event.data;
+                let data;
+                if (typeof rawData === 'string') {
+                    data = JSON.parse(rawData);
+                }
+                else {
+                    data = rawData;
+                }
+                const { action, dest, wsUrl, payload } = data;
+                if (dest !== kernelClientId || wsUrl !== this.url) {
+                    return;
+                }
+                switch (action) {
+                    case 'connected': {
+                        this.readyState = this.OPEN;
+                        if (this.onopen) {
+                            this.onopen(event);
+                        }
+                        this._eventHandlers.open.forEach(handler => handler({ data: payload }));
+                        break;
+                    }
+                    case 'backend_message': {
+                        const decoded = decodeServerMessage(payload, this.binaryType);
+                        if (this.onmessage) {
+                            this.onmessage({ data: decoded });
+                        }
+                        this._eventHandlers.message.forEach(handler => handler({ data: decoded }));
+                        break;
+                    }
+                    default:
+                        break;
+                }
+            };
+            this._open = () => {
+                sendTypedMessage({
+                    action: 'open',
+                    payload: {
+                        protocol: this.protocol
+                    },
+                    wsUrl: this.url
+                });
+                bcWsChannel.addEventListener('message', this._bcMessageHandler);
+            };
+            const urlObj = new URL(url);
+            this.url = urlObj.pathname + urlObj.search + urlObj.hash;
+            if (protocols) {
+                this.protocol = Array.isArray(protocols)
+                    ? protocols.join(',')
+                    : protocols;
+            }
+            else {
+                this.protocol = '';
+            }
+            this.binaryType = 'blob';
+            this.bufferedAmount = 0;
+            this.extensions = '';
+            this.readyState = this.CONNECTING;
+            this._open();
+        }
+        close(code, reason) {
+            if (this.readyState === this.CLOSED) {
+                return;
+            }
+            if (this.onclose) {
+                this.onclose();
+            }
+            while (this._eventHandlers['close'].length) {
+                const cb = this._eventHandlers['close'].pop();
+                cb();
+            }
+            this._eventHandlers['close'] = [];
+            bcWsChannel.removeEventListener('message', this._bcMessageHandler);
+            this.readyState = this.CLOSED;
+        }
+        send(data) {
+            sendTypedMessage({
+                action: 'send',
+                payload: data,
+                wsUrl: this.url
+            });
+        }
+        addEventListener(type, listener, options) {
+            this._eventHandlers[type].push(listener);
+        }
+        removeEventListener(type, listener, options) {
+            this._eventHandlers[type] = this._eventHandlers[type].filter(handler => handler !== listener);
+        }
+        dispatchEvent(event) {
+            return true;
+        }
+    }
+    window.WebSocket = BroadcastChannelWebSocket;
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterpack",
-    "version": "0.2.1",
+    "version": "0.4.0",
     "description": "A JupyterLab extension for serving web app.",
     "keywords": [
         "jupyter",
@@ -29,7 +29,7 @@
         "url": "https://github.com/trungleduc/jupyterpack.git"
     },
     "scripts": {
-        "build:demo": "cd demo && rm -rf .jupyterlite.doit.db _output && jupyter lite build .",
+        "build:demo": "node script/build-demo.mjs",
         "update:demo": "node script/update-demo.mjs",
         "build:worker": "webpack --config sw.webpack.config.js --mode development",
         "build:worker:prod": "webpack --config sw.webpack.config.js --mode production",
@@ -61,7 +61,8 @@
     "dependencies": {
         "@codesandbox/sandpack-client": "^2.19.8",
         "@jupyterlab/application": "^4.0.0",
-        "comlink": "^4.4.2"
+        "comlink": "^4.4.2",
+        "strip-ansi": "^7.1.2"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",
@@ -78,7 +79,7 @@
         "eslint-plugin-prettier": "^5.0.0",
         "npm-run-all2": "^7.0.1",
         "prettier": "^3.0.0",
-        "rimraf": "^5.0.1",
+        "rimraf": "^6.1.0",
         "source-map-loader": "^1.0.2",
         "style-loader": "^3.3.1",
         "stylelint": "^15.10.1",
@@ -86,6 +87,7 @@
         "stylelint-config-standard": "^34.0.0",
         "stylelint-csstree-validator": "^3.0.0",
         "stylelint-prettier": "^4.0.0",
+        "tar": "^7.5.2",
         "ts-loader": "^9.2.6",
         "typescript": "~5.8.0",
         "webpack": "^5.76.3",
@@ -102,7 +104,8 @@
     },
     "jupyterlab": {
         "extension": true,
-        "outputDir": "jupyterpack/labextension"
+        "outputDir": "jupyterpack/labextension",
+        "webpackConfig": "./extension.webpack.config.js"
     },
     "eslintIgnore": [
         "node_modules",

package/src/document/commands.ts

@@ -0,0 +1,91 @@
+import { refreshIcon } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { Panel } from '@lumino/widgets';
+
+import { autoReloadIcon, linkIcon } from '../tools';
+import { IJupyterpackDocTracker } from '../type';
+import { IFramePanel } from './iframePanel';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+
+export const CommandIDs = {
+  RELOAD: 'jupyterpack:reload',
+  TOGGLE_AUTORELOAD: 'jupyterpack:toggleAutoreload',
+  OPEN_SPECTA: 'jupyterpack:openInSpecta'
+};
+
+const labBaseUrl = PageConfig.getOption('baseUrl');
+
+function getCurrentIframPanel(
+  tracker: IJupyterpackDocTracker
+): IFramePanel | undefined {
+  const current = tracker.currentWidget?.content as Panel | undefined;
+  if (!current) {
+    return;
+  }
+  const widget = current.widgets[0] as IFramePanel | undefined;
+  if (!widget) {
+    return;
+  }
+  return widget;
+}
+export function addCommands(
+  commands: CommandRegistry,
+  tracker: IJupyterpackDocTracker
+) {
+  commands.addCommand(CommandIDs.RELOAD, {
+    caption: 'Reload',
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    icon: refreshIcon,
+    execute: async () => {
+      const widget = getCurrentIframPanel(tracker);
+      if (widget) {
+        await widget.reload();
+      }
+    }
+  });
+  const commandState = { toggled: false };
+  commands.addCommand(CommandIDs.TOGGLE_AUTORELOAD, {
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    isToggled: () => {
+      const widget = getCurrentIframPanel(tracker);
+      return Boolean(widget?.autoreload);
+    },
+    icon: autoReloadIcon,
+    caption: e => {
+      return commandState.toggled
+        ? 'Auto-reload enabled'
+        : 'Auto-reload disabled';
+    },
+    execute: async () => {
+      const widget = getCurrentIframPanel(tracker);
+      if (widget) {
+        widget.autoreload = !widget?.autoreload;
+
+        commands.notifyCommandChanged(CommandIDs.TOGGLE_AUTORELOAD);
+      }
+    }
+  });
+  commands.addCommand(CommandIDs.OPEN_SPECTA, {
+    caption: 'Open in Specta',
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    icon: linkIcon,
+    execute: async () => {
+      const context = tracker.currentWidget?.context;
+      if (!context) {
+        return;
+      }
+      const spectaUrl = new URL(
+        URLExt.join(labBaseUrl, 'specta'),
+        window.location.origin
+      );
+      spectaUrl.searchParams.set('path', context.path);
+      window.open(spectaUrl.toString(), '_blank');
+    }
+  });
+}

package/src/document/iframePanel.ts

@@ -1,6 +1,6 @@
 import { Widget } from '@lumino/widgets';
 
-export class IFramePanel extends Widget {
+export abstract class IFramePanel extends Widget {
   constructor() {
     super();
     this.addClass('jupyterpack-iframe-panel');
@@ -20,6 +20,9 @@ export class IFramePanel extends Widget {
     }
   }
 
+  abstract reload(): Promise<void>;
+  abstract autoreload: boolean;
+  abstract isReady: Promise<void>;
   protected _iframe: HTMLIFrameElement;
   protected _spinner: HTMLDivElement;
 }