jupyterpack 0.2.0

package/src/pythonWidget/pythonWidgetModel.ts

@@ -0,0 +1,107 @@
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { IDisposable } from '@lumino/disposable';
+import {
+  ServiceManager,
+  Session,
+  Kernel,
+  Contents
+} from '@jupyterlab/services';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { IConnectionManager, IJupyterPackFileFormat } from '../type';
+import { KernelExecutor } from './kernelExecutor';
+import { PathExt } from '@jupyterlab/coreutils';
+
+export class PythonWidgetModel implements IDisposable {
+  constructor(options: PythonWidgetModel.IOptions) {
+    this._context = options.context;
+    this._manager = options.manager;
+    this._connectionManager = options.connectionManager;
+    this._contentsManager = options.contentsManager;
+  }
+
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+  get connectionManager(): IConnectionManager {
+    return this._connectionManager;
+  }
+  async initialize(): Promise<{
+    instanceId: string;
+    kernelClientId: string;
+  } | null> {
+    if (this._kernelStarted) {
+      return null;
+    }
+    const filePath = this._context.localPath;
+    const spkContent =
+      this._context.model.toJSON() as any as IJupyterPackFileFormat;
+
+    const entryPath = PathExt.join(PathExt.dirname(filePath), spkContent.entry);
+
+    const entryContent = await this._contentsManager.get(entryPath, {
+      content: true,
+      format: 'text'
+    });
+    const sessionManager = this._manager.sessions;
+    await sessionManager.ready;
+    await this._manager.kernelspecs.ready;
+    const specs = this._manager.kernelspecs.specs;
+    if (!specs) {
+      return null;
+    }
+    const { kernelspecs } = specs;
+    let kernelName = Object.keys(kernelspecs)[0];
+    if (kernelspecs[specs.default]) {
+      kernelName = specs.default;
+    }
+
+    this._sessionConnection = await sessionManager.startNew({
+      name: filePath,
+      path: filePath,
+      kernel: {
+        name: kernelName
+      },
+      type: 'notebook'
+    });
+    const executor = new KernelExecutor({
+      sessionConnection: this._sessionConnection
+    });
+    const data = await this._connectionManager.registerConnection(executor);
+    await executor.init({
+      initCode: entryContent.content,
+      ...data
+    });
+    const finish = new PromiseDelegate<void>();
+    const cb = (_: Kernel.IKernelConnection, status: Kernel.Status) => {
+      if (status === 'idle') {
+        this._sessionConnection!.kernel?.statusChanged.disconnect(cb);
+        finish.resolve();
+      }
+    };
+    this._sessionConnection.kernel?.statusChanged.connect(cb);
+
+    await finish.promise;
+    this._kernelStarted = true;
+    return data;
+  }
+  dispose(): void {
+    this._isDisposed = true;
+  }
+
+  private _isDisposed = false;
+  private _kernelStarted = false;
+  private _sessionConnection: Session.ISessionConnection | undefined;
+  private _manager: ServiceManager.IManager;
+  private _context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
+  private _connectionManager: IConnectionManager;
+  private _contentsManager: Contents.IManager;
+}
+
+export namespace PythonWidgetModel {
+  export interface IOptions {
+    context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
+    manager: ServiceManager.IManager;
+    connectionManager: IConnectionManager;
+    contentsManager: Contents.IManager;
+  }
+}

package/src/sandpackWidget/sandpackFilesModel.ts

@@ -0,0 +1,141 @@
+import { Contents } from '@jupyterlab/services';
+import { ISignal, Signal } from '@lumino/signaling';
+
+import { IDict } from '../type';
+import { removePrefix } from '../tools';
+
+export class SandpackFilesModel {
+  constructor(options: { contentsManager: Contents.IManager; path: string }) {
+    this._contentManager = options.contentsManager;
+    this._path = options.path;
+    this._contentManager.fileChanged.connect(this._onFileChanged, this);
+  }
+
+  async getAllFiles(): Promise<IDict<{ code: string }>> {
+    if (!this._allFiles) {
+      const files = await this._contentManager.get(this._path, {
+        content: true
+      });
+      this._allFiles = await this.flattenDirectory(files);
+    }
+
+    return this._allFiles;
+  }
+
+  get fileChanged(): ISignal<
+    SandpackFilesModel,
+    { allFiles: IDict<{ code: string }> }
+  > {
+    return this._fileChanged;
+  }
+
+  async flattenDirectory(
+    dirContent: Contents.IModel
+  ): Promise<IDict<{ code: string }>> {
+    const flatDict: IDict<{ code: string }> = {};
+    const content = dirContent.content as Contents.IModel[];
+
+    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;
+  }
+
+  private async _onFileChanged(
+    sender: Contents.IManager,
+    args: Contents.IChangedArgs
+  ) {
+    switch (args.type) {
+      case 'save': {
+        if (args.newValue?.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 (args.oldValue?.path) {
+          const pathWithoutRoot = this._removeRoot(args.oldValue.path);
+          if (this._allFiles) {
+            delete this._allFiles[pathWithoutRoot];
+          }
+        }
+        break;
+      }
+      case 'rename': {
+        if (args.oldValue?.path && args.newValue?.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 (args.newValue?.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
+      });
+    }
+  }
+
+  private _removeRoot(path: string): string {
+    return removePrefix(path, this._path);
+  }
+  private _getContent(path: string): Promise<Contents.IModel> {
+    return this._contentManager.get(path, { content: true });
+  }
+  private _path: string;
+  private _fileChanged = new Signal<
+    this,
+    { allFiles: IDict<{ code: string }> }
+  >(this);
+
+  private _contentManager: Contents.IManager;
+
+  private _allFiles?: IDict<{ code: string }>;
+}

package/src/sandpackWidget/sandpackPanel.ts

@@ -0,0 +1,82 @@
+import {
+  ClientOptions,
+  loadSandpackClient,
+  SandpackClient
+} from '@codesandbox/sandpack-client';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Contents } from '@jupyterlab/services';
+
+import { IFramePanel } from '../document/iframePanel';
+import { IDict } from '../type';
+import { SandpackFilesModel } from './sandpackFilesModel';
+
+export class SandpackPanel extends IFramePanel {
+  constructor(options: {
+    context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
+    contentsManager: Contents.IManager;
+  }) {
+    super();
+    this._contentsManager = options.contentsManager;
+    options.context.ready.then(async () => {
+      await this.init(options.context.localPath);
+    });
+  }
+
+  async init(localPath: string) {
+    const currentDir = localPath.split('/').slice(0, -1).join('/');
+    const filesModel = new SandpackFilesModel({
+      contentsManager: this._contentsManager,
+      path: currentDir
+    });
+    const allFiles = await filesModel.getAllFiles();
+
+    const options: ClientOptions = {
+      showLoadingScreen: true,
+      showOpenInCodeSandbox: false
+    };
+
+    this._spClient = await loadSandpackClient(
+      this._iframe,
+      {
+        files: allFiles
+      },
+      options
+    );
+    await this.connectSignals(filesModel, this._spClient);
+  }
+
+  async connectSignals(
+    filesModel: SandpackFilesModel,
+    sandpackClient: 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;
+      }
+    });
+  }
+
+  private _onFileChanged(
+    sender: SandpackFilesModel,
+    { allFiles }: { allFiles: IDict<{ code: string }> }
+  ) {
+    if (this._spClient) {
+      this._spClient.updateSandbox({
+        files: allFiles
+      });
+    }
+  }
+
+  private _spClient?: SandpackClient;
+  private _contentsManager: Contents.IManager;
+}

package/src/swConnection/comm_manager.ts

@@ -0,0 +1,53 @@
+import { IConnectionManager, IDict } from '../type';
+import { wrap, transfer } from 'comlink';
+export class CommManager {
+  constructor() {}
+  registerComm(instanceId: string, port: MessagePort): void {
+    const comm = wrap<Omit<IConnectionManager, 'registerConnection'>>(port);
+
+    this._commIds.set(instanceId, comm);
+  }
+  async generateResponse(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+    const urlPath = url.pathname;
+    const method = request.method;
+    const requestHeaders: IDict = {};
+
+    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 });
+  }
+
+  private _commIds: Map<
+    string,
+    Omit<IConnectionManager, 'registerConnection'>
+  > = new Map();
+}

package/src/swConnection/connection_manager.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/swConnection/index.ts

@@ -0,0 +1,93 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+import { UUID } from '@lumino/coreutils';
+import { expose } from 'comlink';
+
+import { IConnectionManagerToken } from '../token';
+import { IConnectionManager, MessageAction } from '../type';
+import { ConnectionManager } from './connection_manager';
+
+const fullLabextensionsUrl = PageConfig.getOption('fullLabextensionsUrl');
+const SCOPE = `${fullLabextensionsUrl}/jupyterpack/static`;
+async function initServiceWorker(): Promise<ServiceWorker | undefined | null> {
+  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: JupyterFrontEndPlugin<IConnectionManager> = {
+  id: 'jupyterpack:service-worker-plugin',
+  description: 'jupyterpack service worker plugin',
+  autoStart: true,
+  provides: IConnectionManagerToken,
+  activate: async (app: JupyterFrontEnd): Promise<IConnectionManager> => {
+    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/src/swConnection/sw.ts

@@ -0,0 +1,57 @@
+// 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: ExtendableEvent): Promise<void> {
+  await self.skipWaiting();
+}
+
+/**
+ * Handle activation.
+ */
+async function onActivate(event: ExtendableEvent): Promise<void> {
+  event.waitUntil(self.clients.claim());
+}
+
+/**
+ * Handle fetching a single resource.
+ */
+async function onFetch(event: FetchEvent): Promise<void> {
+  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: MessageEvent<{ type: MessageAction; data: any }>
+): void {
+  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/src/token.ts

@@ -0,0 +1,6 @@
+import { Token } from '@lumino/coreutils';
+import { IConnectionManager } from './type';
+
+export const IConnectionManagerToken = new Token<IConnectionManager>(
+  'jupyterpack:connection-manager'
+);

package/src/tools.ts

@@ -0,0 +1,18 @@
+export function removePrefix(path: string, prefix: string): string {
+  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: ArrayBuffer) {
+  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/src/type.ts

@@ -0,0 +1,44 @@
+import { KernelMessage } from '@jupyterlab/services';
+import { IDisposable } from '@lumino/disposable';
+
+export interface IDict<T = any> {
+  [key: string]: T;
+}
+
+export enum JupyterPackFramework {
+  REACT = 'react',
+  DASH = 'dash'
+}
+export interface IJupyterPackFileFormat {
+  entry: string;
+  framework: JupyterPackFramework;
+  name?: string;
+  metadata?: IDict;
+}
+
+export 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/style/base.css

@@ -0,0 +1,51 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+.jp-jupyterpack-document-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.jupyterpack-iframe-panel {
+  display: flex;
+  flex-grow: 1;
+}
+
+.jupyterpack-iframe-panel iframe {
+  flex-grow: 1;
+  border: 0;
+}
+
+.jupyterpack-spinner {
+  top: calc(50% - 4px);
+  left: calc(50% - 4px);
+  width: 8px;
+  height: 8px;
+  position: relative;
+  border-radius: 50%;
+  background: rgb(212 72 13 / 100%);
+  animation: wave 1.5s ease-in infinite;
+}
+
+@keyframes wave {
+  0% {
+    box-shadow:
+      0 0 0 0 rgb(212 72 13 / 0%),
+      0 0 0 10px rgb(212 72 13 / 20%),
+      0 0 0 20px rgb(212 72 13 / 60%),
+      0 0 0 30px rgb(212 72 13 / 40%),
+      0 0 0 40px rgb(212 72 13 / 20%);
+  }
+
+  100% {
+    box-shadow:
+      0 0 0 40px rgb(212 72 13 / 0%),
+      0 0 0 30px rgb(212 72 13 / 20%),
+      0 0 0 20px rgb(212 72 13 / 40%),
+      0 0 0 10px rgb(212 72 13 / 60%),
+      0 0 0 0 rgb(212 72 13 / 100%);
+  }
+}

package/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');