jupyterpack 0.2.0

package/package.json

@@ -0,0 +1,199 @@
+{
+    "name": "jupyterpack",
+    "version": "0.2.0",
+    "description": "A JupyterLab extension for serving web app.",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/trungleduc/jupyterpack",
+    "bugs": {
+        "url": "https://github.com/trungleduc/jupyterpack/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Trung Le",
+        "email": "leductrungxf@gmail.com"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/trungleduc/jupyterpack.git"
+    },
+    "scripts": {
+        "build:demo": "cd demo && rm -rf .jupyterlite.doit.db _output && jupyter lite build .",
+        "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",
+        "build": "jlpm build:lib && jlpm build:labextension:dev && jlpm build:worker",
+        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension && jlpm build:worker:prod",
+        "build:labextension": "jupyter labextension build .",
+        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:labextension": "rimraf jupyterpack/labextension jupyterpack/_version.py",
+        "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "install:extension": "jlpm build",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "watch": "run-p watch:src watch:labextension",
+        "watch:src": "tsc -w --sourceMap",
+        "watch:labextension": "jupyter labextension watch ."
+    },
+    "dependencies": {
+        "@codesandbox/sandpack-client": "^2.19.8",
+        "@jupyterlab/application": "^4.0.0",
+        "comlink": "^4.4.2"
+    },
+    "devDependencies": {
+        "@jupyterlab/builder": "^4.0.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@types/serviceworker": "^0.0.152",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "copy-webpack-plugin": "^13.0.1",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "npm-run-all2": "^7.0.1",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "ts-loader": "^9.2.6",
+        "typescript": "~5.8.0",
+        "webpack": "^5.76.3",
+        "webpack-cli": "^6.0.1",
+        "yjs": "^13.5.0"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "jupyterpack/labextension"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "demo",
+        "dist",
+        "coverage",
+        "**/*.d.ts"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/document/iframePanel.ts

@@ -0,0 +1,25 @@
+import { Widget } from '@lumino/widgets';
+
+export class IFramePanel extends Widget {
+  constructor() {
+    super();
+    this.addClass('jupyterpack-iframe-panel');
+
+    this._iframe = document.createElement('iframe');
+    this._spinner = document.createElement('div');
+    this._spinner.classList.add('jupyterpack-spinner');
+    this.node.appendChild(this._spinner);
+    this.node.appendChild(this._iframe);
+  }
+
+  toggleSpinner(show: boolean): void {
+    if (show) {
+      this._spinner.style.display = 'unset';
+    } else {
+      this._spinner.style.display = 'none';
+    }
+  }
+
+  protected _iframe: HTMLIFrameElement;
+  protected _spinner: HTMLDivElement;
+}

package/src/document/jupyterpackDocWidget.ts

@@ -0,0 +1,19 @@
+import { DocumentWidget } from '@jupyterlab/docregistry';
+
+export class JupyterPackDocWidget extends DocumentWidget {
+  constructor(options: DocumentWidget.IOptions) {
+    super(options);
+  }
+
+  /**
+   * Dispose of the resources held by the widget.
+   */
+  dispose(): void {
+    this.content.dispose();
+    super.dispose();
+  }
+
+  onResize = (msg: any): void => {
+    window.dispatchEvent(new Event('resize'));
+  };
+}

package/src/document/plugin.ts

@@ -0,0 +1,44 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { JupyterPackWidgetFactory } from './widgetFactory';
+import { IConnectionManager } from '../type';
+import { IConnectionManagerToken } from '../token';
+
+const FACTORY = 'jupyterpack';
+const CONTENT_TYPE = 'jupyterpack';
+
+export const spkPlugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterpack:spkplugin',
+  requires: [IConnectionManagerToken],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    connectionManager: IConnectionManager
+  ): void => {
+    const widgetFactory = new JupyterPackWidgetFactory({
+      name: FACTORY,
+      modelName: 'text',
+      fileTypes: [CONTENT_TYPE],
+      defaultFor: [CONTENT_TYPE],
+      commands: app.commands,
+      manager: app.serviceManager,
+      connectionManager
+    });
+
+    // Registering the widget factory
+    app.docRegistry.addWidgetFactory(widgetFactory);
+
+    // register the filetype
+    app.docRegistry.addFileType({
+      name: CONTENT_TYPE,
+      displayName: 'SPK',
+      mimeTypes: ['text/json'],
+      extensions: ['.spk', '.SPK'],
+      fileFormat: 'json',
+      contentType: CONTENT_TYPE
+    });
+  }
+};

package/src/document/widgetFactory.ts

@@ -0,0 +1,79 @@
+import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
+import { Contents, ServiceManager } from '@jupyterlab/services';
+import { CommandRegistry } from '@lumino/commands';
+import { Panel } from '@lumino/widgets';
+
+import {
+  IConnectionManager,
+  IJupyterPackFileFormat,
+  JupyterPackFramework
+} from '../type';
+import { SandpackPanel } from '../sandpackWidget/sandpackPanel';
+import { JupyterPackDocWidget } from './jupyterpackDocWidget';
+import { PythonWidgetModel } from '../pythonWidget/pythonWidgetModel';
+import { UUID } from '@lumino/coreutils';
+import { PythonWidget } from '../pythonWidget/pythonWidget';
+
+interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
+  commands: CommandRegistry;
+  manager: ServiceManager.IManager;
+  connectionManager: IConnectionManager;
+}
+
+export class JupyterPackWidgetFactory extends ABCWidgetFactory<JupyterPackDocWidget> {
+  constructor(private options: IOptions) {
+    super(options);
+    this._contentsManager = options.manager.contents;
+  }
+
+  /**
+   * Create a new widget given a context.
+   *
+   * @param context Contains the information of the file
+   * @returns The widget
+   */
+  protected createNewWidget(
+    context: DocumentRegistry.IContext<DocumentRegistry.IModel>
+  ): JupyterPackDocWidget {
+    const content = new Panel();
+    content.addClass('jp-jupyterpack-document-panel');
+    context.ready.then(() => {
+      const jpackModel =
+        context.model.toJSON() as any as IJupyterPackFileFormat;
+      switch (jpackModel.framework) {
+        case JupyterPackFramework.REACT: {
+          const jpContent = new SandpackPanel({
+            context,
+            contentsManager: this._contentsManager
+          });
+          content.addWidget(jpContent);
+          break;
+        }
+        case JupyterPackFramework.DASH: {
+          const model = new PythonWidgetModel({
+            context,
+            manager: this.options.manager,
+            contentsManager: this._contentsManager,
+            connectionManager: this.options.connectionManager
+          });
+          const pythonWidget = new PythonWidget({
+            model,
+            id: UUID.uuid4()
+          });
+          content.addWidget(pythonWidget);
+          break;
+        }
+        default: {
+          console.error('Unsupported framework');
+          break;
+        }
+      }
+    });
+    return new JupyterPackDocWidget({
+      context,
+      content
+    });
+  }
+
+  private _contentsManager: Contents.IManager;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import { spkPlugin } from './document/plugin';
+import { swPlugin } from './swConnection';
+
+export default [swPlugin, spkPlugin];

package/src/pythonWidget/connectionManager.ts

@@ -0,0 +1,43 @@
+import { IConnectionManager, IDict, IKernelExecutor } from '../type';
+import { UUID } from '@lumino/coreutils';
+
+export class ConnectionManager implements IConnectionManager {
+  constructor(public instanceId: string) {}
+
+  async registerConnection(
+    kernelExecutor: IKernelExecutor
+  ): Promise<{ instanceId: string; kernelClientId: string }> {
+    const uuid = UUID.uuid4();
+
+    this._kernelExecutors.set(uuid, kernelExecutor);
+
+    return { instanceId: this.instanceId, kernelClientId: uuid };
+  }
+
+  async generateResponse(options: {
+    kernelClientId: string;
+    urlPath: string;
+    method: string;
+    headers: IDict;
+    requestBody?: ArrayBuffer;
+    params?: string;
+  }): Promise<IDict | null> {
+    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;
+  }
+
+  private _kernelExecutors = new Map<string, IKernelExecutor>();
+}

package/src/pythonWidget/kernelExecutor.ts

@@ -0,0 +1,140 @@
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+import { KernelMessage, Session } from '@jupyterlab/services';
+
+import { arrayBufferToBase64 } from '../tools';
+import { IDict, IKernelExecutor } from '../type';
+
+export class KernelExecutor implements IKernelExecutor {
+  constructor(options: KernelExecutor.IOptions) {
+    this._sessionConnection = options.sessionConnection;
+  }
+
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+  async init(options: {
+    initCode?: string;
+    instanceId: string;
+    kernelClientId: string;
+  }) {
+    const { initCode, instanceId, kernelClientId } = options;
+    const labBaseUrl = PageConfig.getOption('baseUrl');
+    const baseURL = URLExt.join(
+      labBaseUrl,
+      'extensions/jupyterpack/static',
+      instanceId,
+      'dash',
+      kernelClientId,
+      '/'
+    );
+
+    const osCode = `
+    import os
+    os.environ['DASH_URL_BASE_PATHNAME'] = '${baseURL}'
+    `;
+    await this.executeCode({ code: osCode });
+    if (initCode) {
+      await this.executeCode({ code: initCode });
+    }
+    const serverCode = `
+    import httpx, json, base64
+    __monstra_transport = httpx.WSGITransport(app=app.server)
+    def __monstra_get_response(method, url, headers, content=None, params=None):
+      decoded_content = None
+      if content is not None:
+        content = base64.b64decode(content)
+        decoded_content = content.decode()
+      with httpx.Client(transport=__monstra_transport, base_url="http://testserver") as client:
+        r = client.request(method, url, headers=headers, content=content, params=params)
+        response = {
+          "headers": dict(r.headers),
+          "content": r.text,
+          "status_code": r.status_code,
+          "original_request": {"method": method, "url": url, "content": decoded_content, "params": params, "headers": headers},
+        }
+        json_str = json.dumps(response)
+        b64_str = base64.b64encode(json_str.encode("utf-8")).decode("utf-8")
+        return b64_str
+    `;
+    await this.executeCode({ code: serverCode });
+  }
+  async getResponse(options: {
+    method: string;
+    urlPath: string;
+    headers: IDict;
+    requestBody?: ArrayBuffer;
+    params?: string;
+  }): Promise<IDict> {
+    const { method, urlPath, requestBody, params, headers } = options;
+    const content = requestBody ? arrayBufferToBase64(requestBody) : undefined;
+    const code = `__monstra_get_response("${method}", "${urlPath}", headers=${JSON.stringify(headers)} , content=${content ? `"${content}"` : 'None'}, params=${params ? `"${params}"` : 'None'})`;
+    const raw = await this.executeCode({ code });
+    const jsonStr = atob(raw.slice(1, -1));
+    const obj = JSON.parse(jsonStr);
+
+    return obj;
+  }
+  async executeCode(
+    code: KernelMessage.IExecuteRequestMsg['content']
+  ): Promise<string> {
+    const kernel = this._sessionConnection?.kernel;
+    if (!kernel) {
+      throw new Error('Session has no kernel.');
+    }
+    return new Promise<string>((resolve, reject) => {
+      const future = kernel.requestExecute(code, false, undefined);
+      const parentMsgid = future.msg.header.msg_id;
+      let executeResult = '';
+      future.onIOPub = (msg: KernelMessage.IIOPubMessage): void => {
+        const msgType = msg.header.msg_type;
+        switch (msgType) {
+          case 'execute_result': {
+            const content = (msg as KernelMessage.IExecuteResultMsg).content
+              .data['text/plain'] as string;
+            executeResult += content;
+            break;
+          }
+          case 'status': {
+            if (
+              (msg as KernelMessage.IStatusMsg).content.execution_state ===
+                'idle' &&
+              msg.parent_header.msg_id === parentMsgid
+            ) {
+              resolve(executeResult);
+            }
+            break;
+          }
+          case 'stream': {
+            const content = (msg as KernelMessage.IStreamMsg).content.text;
+            executeResult += content;
+            break;
+          }
+          case 'error': {
+            console.error('Kernel operation failed', msg.content);
+            reject(msg.content);
+            break;
+          }
+          default:
+            break;
+        }
+      };
+    });
+  }
+
+  dispose(): void {
+    if (this._isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this._sessionConnection.dispose();
+  }
+
+  private _isDisposed: boolean = false;
+  private _sessionConnection: Session.ISessionConnection;
+}
+
+export namespace KernelExecutor {
+  export interface IOptions {
+    sessionConnection: Session.ISessionConnection;
+  }
+}

package/src/pythonWidget/pythonWidget.ts

@@ -0,0 +1,34 @@
+import { PythonWidgetModel } from './pythonWidgetModel';
+import { PageConfig } from '@jupyterlab/coreutils';
+import { IFramePanel } from '../document/iframePanel';
+
+export class PythonWidget extends IFramePanel {
+  constructor(options: PythonWidget.IOptions) {
+    super();
+    this._model = options.model;
+    this._model.initialize().then(connectionData => {
+      if (!connectionData) {
+        return;
+      }
+      const iframe = this._iframe;
+      const fullLabextensionsUrl = PageConfig.getOption('fullLabextensionsUrl');
+      iframe.src = `${fullLabextensionsUrl}/jupyterpack/static/${connectionData.instanceId}/dash/${connectionData.kernelClientId}/`;
+      iframe.addEventListener('load', () => {
+        this.toggleSpinner(false);
+      });
+    });
+  }
+
+  get model(): PythonWidgetModel {
+    return this._model;
+  }
+
+  private _model: PythonWidgetModel;
+}
+
+export namespace PythonWidget {
+  export interface IOptions {
+    id: string;
+    model: PythonWidgetModel;
+  }
+}