jupyterpack 0.2.0

package/lib/sandpackWidget/sandpackFilesModel.js

@@ -0,0 +1,114 @@
+import { Signal } from '@lumino/signaling';
+import { removePrefix } from '../tools';
+export class SandpackFilesModel {
+    constructor(options) {
+        this._fileChanged = new Signal(this);
+        this._contentManager = options.contentsManager;
+        this._path = options.path;
+        this._contentManager.fileChanged.connect(this._onFileChanged, this);
+    }
+    async getAllFiles() {
+        if (!this._allFiles) {
+            const files = await this._contentManager.get(this._path, {
+                content: true
+            });
+            this._allFiles = await this.flattenDirectory(files);
+        }
+        return this._allFiles;
+    }
+    get fileChanged() {
+        return this._fileChanged;
+    }
+    async flattenDirectory(dirContent) {
+        const flatDict = {};
+        const content = dirContent.content;
+        for (const item of content) {
+            if (item.type === 'file') {
+                const pathWithoutRoot = this._removeRoot(item.path);
+                let itemContent = item;
+                if (!itemContent.content) {
+                    itemContent = await this._getContent(item.path);
+                }
+                if (itemContent.mimetype === 'application/json' &&
+                    typeof itemContent.content !== 'string') {
+                    flatDict[pathWithoutRoot] = {
+                        code: JSON.stringify(itemContent.content)
+                    };
+                }
+                else {
+                    flatDict[pathWithoutRoot] = { code: itemContent.content };
+                }
+            }
+            else if (item.type === 'directory') {
+                // If it's a directory, recursively flatten its content
+                const nestedContent = await this._getContent(item.path);
+                const nestedDict = await this.flattenDirectory(nestedContent);
+                Object.assign(flatDict, nestedDict);
+            }
+        }
+        return flatDict;
+    }
+    async _onFileChanged(sender, args) {
+        var _a, _b, _c, _d, _e;
+        switch (args.type) {
+            case 'save': {
+                if ((_a = args.newValue) === null || _a === void 0 ? void 0 : _a.path) {
+                    const newContent = await this._getContent(args.newValue.path);
+                    const pathWithoutRoot = this._removeRoot(args.newValue.path);
+                    if (this._allFiles) {
+                        this._allFiles[pathWithoutRoot] = {
+                            code: newContent.content
+                        };
+                    }
+                }
+                break;
+            }
+            case 'delete': {
+                if ((_b = args.oldValue) === null || _b === void 0 ? void 0 : _b.path) {
+                    const pathWithoutRoot = this._removeRoot(args.oldValue.path);
+                    if (this._allFiles) {
+                        delete this._allFiles[pathWithoutRoot];
+                    }
+                }
+                break;
+            }
+            case 'rename': {
+                if (((_c = args.oldValue) === null || _c === void 0 ? void 0 : _c.path) && ((_d = args.newValue) === null || _d === void 0 ? void 0 : _d.path)) {
+                    const oldPathWithoutRoot = this._removeRoot(args.oldValue.path);
+                    const newPathWithoutRoot = this._removeRoot(args.newValue.path);
+                    if (this._allFiles) {
+                        this._allFiles[newPathWithoutRoot] =
+                            this._allFiles[oldPathWithoutRoot];
+                        delete this._allFiles[newPathWithoutRoot];
+                    }
+                }
+                break;
+            }
+            case 'new': {
+                if ((_e = args.newValue) === null || _e === void 0 ? void 0 : _e.path) {
+                    const newContent = await this._getContent(args.newValue.path);
+                    const pathWithoutRoot = this._removeRoot(args.newValue.path);
+                    if (this._allFiles) {
+                        this._allFiles[pathWithoutRoot] = {
+                            code: newContent.content
+                        };
+                    }
+                }
+                break;
+            }
+            default:
+                break;
+        }
+        if (this._allFiles) {
+            this._fileChanged.emit({
+                allFiles: this._allFiles
+            });
+        }
+    }
+    _removeRoot(path) {
+        return removePrefix(path, this._path);
+    }
+    _getContent(path) {
+        return this._contentManager.get(path, { content: true });
+    }
+}

package/lib/sandpackWidget/sandpackPanel.d.ts

@@ -0,0 +1,16 @@
+import { SandpackClient } from '@codesandbox/sandpack-client';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Contents } from '@jupyterlab/services';
+import { IFramePanel } from '../document/iframePanel';
+import { SandpackFilesModel } from './sandpackFilesModel';
+export declare class SandpackPanel extends IFramePanel {
+    constructor(options: {
+        context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
+        contentsManager: Contents.IManager;
+    });
+    init(localPath: string): Promise<void>;
+    connectSignals(filesModel: SandpackFilesModel, sandpackClient: SandpackClient): Promise<void>;
+    private _onFileChanged;
+    private _spClient?;
+    private _contentsManager;
+}

package/lib/sandpackWidget/sandpackPanel.js

@@ -0,0 +1,52 @@
+import { loadSandpackClient } from '@codesandbox/sandpack-client';
+import { IFramePanel } from '../document/iframePanel';
+import { SandpackFilesModel } from './sandpackFilesModel';
+export class SandpackPanel extends IFramePanel {
+    constructor(options) {
+        super();
+        this._contentsManager = options.contentsManager;
+        options.context.ready.then(async () => {
+            await this.init(options.context.localPath);
+        });
+    }
+    async init(localPath) {
+        const currentDir = localPath.split('/').slice(0, -1).join('/');
+        const filesModel = new SandpackFilesModel({
+            contentsManager: this._contentsManager,
+            path: currentDir
+        });
+        const allFiles = await filesModel.getAllFiles();
+        const options = {
+            showLoadingScreen: true,
+            showOpenInCodeSandbox: false
+        };
+        this._spClient = await loadSandpackClient(this._iframe, {
+            files: allFiles
+        }, options);
+        await this.connectSignals(filesModel, this._spClient);
+    }
+    async connectSignals(filesModel, sandpackClient) {
+        filesModel.fileChanged.connect(this._onFileChanged, this);
+        sandpackClient.listen(msg => {
+            switch (msg.type) {
+                case 'start': {
+                    this.toggleSpinner(true);
+                    break;
+                }
+                case 'success': {
+                    this.toggleSpinner(false);
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+    }
+    _onFileChanged(sender, { allFiles }) {
+        if (this._spClient) {
+            this._spClient.updateSandbox({
+                files: allFiles
+            });
+        }
+    }
+}

package/lib/swConnection/comm_manager.d.ts

@@ -0,0 +1,6 @@
+export declare class CommManager {
+    constructor();
+    registerComm(instanceId: string, port: MessagePort): void;
+    generateResponse(request: Request): Promise<Response>;
+    private _commIds;
+}

package/lib/swConnection/comm_manager.js

@@ -0,0 +1,46 @@
+import { wrap, transfer } from 'comlink';
+export class CommManager {
+    constructor() {
+        this._commIds = new Map();
+    }
+    registerComm(instanceId, port) {
+        const comm = wrap(port);
+        this._commIds.set(instanceId, comm);
+    }
+    async generateResponse(request) {
+        const url = new URL(request.url);
+        const urlPath = url.pathname;
+        const method = request.method;
+        const requestHeaders = {};
+        for (const pair of request.headers.entries()) {
+            if (!pair[0].startsWith('sec-ch-ua')) {
+                requestHeaders[pair[0]] = pair[1];
+            }
+        }
+        const params = url.searchParams.toString();
+        const pathAfterExtensionName = urlPath.split('/jupyterpack/static')[1];
+        const pathList = pathAfterExtensionName.split('/').filter(Boolean);
+        const instanceId = pathList[0];
+        const kernelClientId = pathList[2];
+        const comm = this._commIds.get(instanceId);
+        if (!comm) {
+            throw new Error('Missing comm');
+        }
+        const requestBody = request.body ? await request.arrayBuffer() : undefined;
+        const data = await comm.generateResponse({
+            kernelClientId,
+            urlPath,
+            method,
+            headers: requestHeaders,
+            requestBody: requestBody
+                ? transfer(requestBody, [requestBody])
+                : undefined,
+            params
+        });
+        if (data) {
+            const { headers, content, status_code } = data;
+            return new Response(content, { status: status_code, headers });
+        }
+        return await fetch(url, { method });
+    }
+}

package/lib/swConnection/connection_manager.d.ts

@@ -0,0 +1,18 @@
+import { IConnectionManager, IDict, IKernelExecutor } from '../type';
+export declare class ConnectionManager implements IConnectionManager {
+    instanceId: string;
+    constructor(instanceId: string);
+    registerConnection(kernelExecutor: IKernelExecutor): Promise<{
+        instanceId: string;
+        kernelClientId: string;
+    }>;
+    generateResponse(options: {
+        kernelClientId: string;
+        urlPath: string;
+        method: string;
+        headers: IDict;
+        requestBody?: ArrayBuffer;
+        params?: string;
+    }): Promise<IDict | null>;
+    private _kernelExecutors;
+}

package/lib/swConnection/connection_manager.js

@@ -0,0 +1,27 @@
+import { UUID } from '@lumino/coreutils';
+export class ConnectionManager {
+    constructor(instanceId) {
+        this.instanceId = instanceId;
+        this._kernelExecutors = new Map();
+    }
+    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;
+    }
+}

package/lib/swConnection/index.d.ts

@@ -0,0 +1,3 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { IConnectionManager } from '../type';
+export declare const swPlugin: JupyterFrontEndPlugin<IConnectionManager>;

package/lib/swConnection/index.js

@@ -0,0 +1,68 @@
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+import { UUID } from '@lumino/coreutils';
+import { expose } from 'comlink';
+import { IConnectionManagerToken } from '../token';
+import { MessageAction } from '../type';
+import { ConnectionManager } from './connection_manager';
+const fullLabextensionsUrl = PageConfig.getOption('fullLabextensionsUrl');
+const SCOPE = `${fullLabextensionsUrl}/jupyterpack/static`;
+async function initServiceWorker() {
+    if (!('serviceWorker' in navigator)) {
+        console.error('Cannot start extension without service worker');
+        return;
+    }
+    const fullWorkerUrl = `${SCOPE}/service-worker.js`;
+    try {
+        const reg = await navigator.serviceWorker.register(fullWorkerUrl);
+        if (!reg) {
+            console.error('Missing service worker registration');
+            return;
+        }
+        await reg.update();
+        if (reg.installing) {
+            const sw = reg.installing || reg.waiting;
+            sw.onstatechange = () => {
+                if (sw.state === 'installed') {
+                    window.location.reload();
+                }
+            };
+        }
+        if (reg.active) {
+            return reg.active;
+        }
+        console.log('Service worker newly registered', await navigator.serviceWorker.getRegistration(fullWorkerUrl));
+        return reg.active;
+    }
+    catch (e) {
+        console.error('Failed to register service worker', e);
+        return;
+    }
+}
+function createPingFrame() {
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.src = URLExt.join(SCOPE, '__jupyterpack__', 'ping.html');
+    document.body.appendChild(iframe);
+}
+export const swPlugin = {
+    id: 'jupyterpack:service-worker-plugin',
+    description: 'jupyterpack service worker plugin',
+    autoStart: true,
+    provides: IConnectionManagerToken,
+    activate: async (app) => {
+        console.log('Activating jupyterpack service worker');
+        const serviceWorker = await initServiceWorker();
+        if (!serviceWorker) {
+            throw new Error('Failed to register the Service Worker, please make sure to use a browser that supports this feature.');
+        }
+        const instanceId = UUID.uuid4();
+        const { port1: mainToServiceWorker, port2: serviceWorkerToMain } = new MessageChannel();
+        const connectionManager = new ConnectionManager(instanceId);
+        expose(connectionManager, mainToServiceWorker);
+        serviceWorker.postMessage({ type: MessageAction.INIT, data: { instanceId } }, [serviceWorkerToMain]);
+        setTimeout(() => {
+            createPingFrame();
+        }, 10000);
+        return connectionManager;
+    }
+};

package/lib/swConnection/sw.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/swConnection/sw.js

@@ -0,0 +1,49 @@
+// import { expose } from 'comlink';
+import { MessageAction } from '../type';
+import { CommManager } from './comm_manager';
+const COMM_MANAGER = new CommManager();
+/**
+ * Install event listeners
+ */
+self.addEventListener('install', onInstall);
+self.addEventListener('activate', onActivate);
+self.addEventListener('fetch', onFetch);
+self.addEventListener('message', onMessage);
+/**
+ * Handle installation
+ */
+async function onInstall(event) {
+    await self.skipWaiting();
+}
+/**
+ * Handle activation.
+ */
+async function onActivate(event) {
+    event.waitUntil(self.clients.claim());
+}
+/**
+ * Handle fetching a single resource.
+ */
+async function onFetch(event) {
+    const url = event.request.url;
+    if (url.endsWith('__jupyterpack__/ping')) {
+        return event.respondWith(new Response('pong'));
+    }
+    if (url.endsWith('__jupyterpack__/ping.html')) {
+        return;
+    }
+    event.respondWith(COMM_MANAGER.generateResponse(event.request));
+}
+function onMessage(msg) {
+    const { type, data } = msg.data;
+    switch (type) {
+        case MessageAction.INIT: {
+            const { instanceId } = data;
+            const serviceWorkerToMain = msg.ports[0];
+            COMM_MANAGER.registerComm(instanceId, serviceWorkerToMain);
+            break;
+        }
+        default:
+            break;
+    }
+}

package/lib/token.d.ts

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

package/lib/token.js

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

package/lib/tools.d.ts

@@ -0,0 +1,2 @@
+export declare function removePrefix(path: string, prefix: string): string;
+export declare function arrayBufferToBase64(buffer: ArrayBuffer): string;

package/lib/tools.js

@@ -0,0 +1,17 @@
+export function removePrefix(path, prefix) {
+    if (path.startsWith(prefix)) {
+        return path.slice(prefix.length);
+    }
+    // If the prefix doesn't match, return the original path
+    return path;
+}
+export function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const chunkSize = 32768; // process in chunks for large buffers
+    for (let i = 0; i < bytes.length; i += chunkSize) {
+        const chunk = bytes.subarray(i, i + chunkSize);
+        binary += String.fromCharCode(...chunk);
+    }
+    return btoa(binary);
+}

package/lib/type.d.ts

@@ -0,0 +1,38 @@
+import { KernelMessage } from '@jupyterlab/services';
+import { IDisposable } from '@lumino/disposable';
+export interface IDict<T = any> {
+    [key: string]: T;
+}
+export declare enum JupyterPackFramework {
+    REACT = "react",
+    DASH = "dash"
+}
+export interface IJupyterPackFileFormat {
+    entry: string;
+    framework: JupyterPackFramework;
+    name?: string;
+    metadata?: IDict;
+}
+export declare enum MessageAction {
+    INIT = "INIT"
+}
+export interface IKernelExecutorParams {
+    method: string;
+    urlPath: string;
+    headers: IDict;
+    params?: string;
+    requestBody?: ArrayBuffer;
+}
+export interface IKernelExecutor extends IDisposable {
+    getResponse(options: IKernelExecutorParams): Promise<IDict>;
+    executeCode(code: KernelMessage.IExecuteRequestMsg['content']): Promise<string>;
+}
+export interface IConnectionManager {
+    registerConnection(kernelExecutor: IKernelExecutor): Promise<{
+        instanceId: string;
+        kernelClientId: string;
+    }>;
+    generateResponse(option: {
+        kernelClientId: string;
+    } & IKernelExecutorParams): Promise<IDict | null>;
+}

package/lib/type.js

@@ -0,0 +1,9 @@
+export var JupyterPackFramework;
+(function (JupyterPackFramework) {
+    JupyterPackFramework["REACT"] = "react";
+    JupyterPackFramework["DASH"] = "dash";
+})(JupyterPackFramework || (JupyterPackFramework = {}));
+export var MessageAction;
+(function (MessageAction) {
+    MessageAction["INIT"] = "INIT";
+})(MessageAction || (MessageAction = {}));