Add a pyp5js kernel backed by pyodide

src/app/plugins/notebook/commands.ts

@@ -96,10 +96,18 @@ export const addCommands = (
   });
 
   commands.addCommand(CommandIDs.new, {
-    label: 'New Notebook',
-    execute: async () => {
+    label: (args: any) => {
+      const kernelName = args['kernelName'];
+      if (args['isLauncher'] && kernelName) {
+        return kernelName;
+      }
+      return 'New Notebook';
+    },
+    execute: (args: any) => {
+      const kernelName = args['kernelName'] as string;
       commands.execute(CommandIDs.open, {
-        name: 'untitled.ipynb'
+        name: 'untitled.ipynb',
+        kernelName
       });
     }
   });
@@ -108,13 +116,16 @@ export const addCommands = (
     label: (args: any) => {
       const name = args['name'] as string;
       if (name) {
-        return `Open ${name}`;
+        return `${name}`;
       }
       return 'Open Example';
     },
     execute: async args => {
       const name = args['name'] as string;
-      const notebook = docManager.open(name) as NotebookPanel;
+      const kernelName = args['kernelName'] as string;
+      const notebook = docManager.open(name, 'default', {
+        name: kernelName
+      }) as NotebookPanel;
       const sessionContext = notebook.sessionContext;
       await sessionContext.ready;
 

src/server/contents.ts

@@ -116,23 +116,7 @@ namespace Private {
    */
   const EMPTY_NB: INotebookContent = {
     metadata: {
-      orig_nbformat: 4,
-      kernelspec: {
-        name: 'p5.js',
-        display_name: 'p5.js'
-      },
-      language_info: {
-        codemirror_mode: {
-          name: 'javascript',
-          version: 3
-        },
-        file_extension: '.js',
-        mimetype: 'text/javascript',
-        name: 'javascript',
-        nbconvert_exporter: 'javascript',
-        pygments_lexer: 'javascript',
-        version: 'es2017'
-      }
+      orig_nbformat: 4
     },
     nbformat_minor: 4,
     nbformat: 4,
@@ -149,7 +133,7 @@ namespace Private {
     created: '2020-03-18T18:41:01.243007Z',
     content: EMPTY_NB,
     format: 'json',
-    mimetype: '',
+    mimetype: 'application/json',
     size: JSON.stringify(EMPTY_NB).length,
     writable: true,
     type: 'notebook'

src/server/kernels.ts

@@ -9,9 +9,10 @@ import {
 
 import { Server as WebSocketServer } from 'mock-socket';
 
-import { KernelIFrame } from './kernel';
+import { KernelIFrame } from './kernels/kernel';
 
 import { IJupyterServer } from '../tokens';
+import { PyP5KernelIFrame } from './kernels/pyp5Kernel';
 
 /**
  * A class to handle requests to /api/kernels
@@ -20,10 +21,10 @@ export class Kernels implements IJupyterServer.IRoutable {
   /**
    * Start a new kernel.
    *
-   * @param sessionId The session id.
+   * @param options The kernel start options.
    */
-  startNew(sessionId: string): Kernel.IModel {
-    const id = sessionId;
+  startNew(options: Kernels.IStartOptions): Kernel.IModel {
+    const { id, name } = options;
     const kernelUrl = `${Kernels.WS_BASE_URL}/api/kernels/${id}/channels`;
     const wsServer = new WebSocketServer(kernelUrl);
 
@@ -34,7 +35,14 @@ export class Kernels implements IJupyterServer.IRoutable {
         socket.send(message);
       };
 
-      const kernel = new KernelIFrame({ id, sendMessage, sessionId });
+      let kernel: IJupyterServer.IKernelIFrame;
+
+      // TODO: more generic kernel instantiation
+      if (name === 'pyp5') {
+        kernel = new PyP5KernelIFrame({ id, sendMessage, sessionId: id });
+      } else {
+        kernel = new KernelIFrame({ id, sendMessage, sessionId: id });
+      }
       this._kernels.set(id, kernel);
 
       socket.on('message', (message: string | ArrayBuffer) => {
@@ -53,7 +61,7 @@ export class Kernels implements IJupyterServer.IRoutable {
 
     const model = {
       id,
-      name: 'p5.js'
+      name: name ?? 'p5.js'
     };
     return model;
   }
@@ -81,13 +89,28 @@ export class Kernels implements IJupyterServer.IRoutable {
     return new Response(null);
   }
 
-  private _kernels = new ObservableMap<KernelIFrame>();
+  private _kernels = new ObservableMap<IJupyterServer.IKernelIFrame>();
 }
 
 /**
  * A namespace for Kernels statics.
  */
 export namespace Kernels {
+  /**
+   * Options to start a new options.
+   */
+  export interface IStartOptions {
+    /**
+     * The kernel id.
+     */
+    id: string;
+
+    /**
+     * The kernel name.
+     */
+    name?: string;
+  }
+
   /**
    * The base url for the Kernels manager
    */

src/server/kernel.ts → src/server/kernels/kernel.ts

@@ -8,7 +8,7 @@ import p5 from '!!raw-loader!p5/lib/p5.min.js';
 
 import p5Sound from '!!raw-loader!p5/lib/addons/p5.sound.min.js';
 
-import { IJupyterServer } from '../tokens';
+import { IJupyterServer } from '../../tokens';
 
 /**
  * A kernel that executes code in an IFrame.