Improves the manager and adds a registry to register blocks, generators and toolboxes

Author: hbcarlos

README.md

@@ -13,18 +13,25 @@ Repo: https://github.com/google/blockly
 
 ## Requirements
 
-* JupyterLab >= 4.0.0a0
+* JupyterLab == 3.3
 
 ## Install
 
 To install the extension, execute:
 
 ```bash
-micromamba create -n blockly -c conda-forge python
+micromamba create -n blockly -c conda-forge python ipykernel xeus-python xeus-lua
 micromamba activate blockly
 pip install jupyterlab_blockly
 ```
 
+#### Kernels
+* ipykernel
+* xeus-python
+* xeus-lua
+* [JavaScript](https://github.com/n-riesco/ijavascript#installation)
+* [JavaScript](https://github.com/yunabe/tslab)
+
 ## Uninstall
 
 To remove the extension, execute:

package.json

@@ -48,9 +48,12 @@
   "dependencies": {
     "@jupyterlab/application": "^3.3",
     "@jupyterlab/apputils": "^3.3",
+    "@jupyterlab/coreutils": "^5.3",
     "@jupyterlab/docregistry": "^3.3",
     "@jupyterlab/outputarea": "^3.3",
     "@jupyterlab/rendermime": "^3.3",
+    "@jupyterlab/services": "^6.3",
+    "@jupyterlab/ui-components": "^3.3",
     "@lumino/algorithm": "^1.9.1",
     "@lumino/coreutils": "^1.12.0",
     "@lumino/messaging": "^1.10.1",

src/factory.ts

@@ -6,6 +6,7 @@ import {
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { BlocklyEditor, BlocklyPanel } from './widget';
+import { BlocklyRegistry } from './registry';
 import { BlocklyManager } from './manager';
 
 /**
@@ -15,7 +16,7 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
   BlocklyEditor,
   DocumentModel
 > {
-  private _manager: BlocklyManager;
+  private _registry: BlocklyRegistry;
   private _rendermime: IRenderMimeRegistry;
 
   /**
@@ -25,12 +26,12 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
    */
   constructor(options: BlocklyEditorFactory.IOptions) {
     super(options);
-    this._manager = new BlocklyManager();
+    this._registry = new BlocklyRegistry();
     this._rendermime = options.rendermime;
   }
 
-  get manager(): BlocklyManager {
-    return this._manager;
+  get registry(): BlocklyRegistry {
+    return this._registry;
   }
 
   /**
@@ -42,10 +43,9 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
   protected createNewWidget(
     context: DocumentRegistry.IContext<DocumentModel>
   ): BlocklyEditor {
-    return new BlocklyEditor({
-      context,
-      content: new BlocklyPanel(context, this._manager, this._rendermime)
-    });
+    const manager = new BlocklyManager(this._registry, context.sessionContext);
+    const content = new BlocklyPanel(context, manager, this._rendermime);
+    return new BlocklyEditor({ context, content, manager });
   }
 }
 

src/index.ts

@@ -3,11 +3,12 @@ import {
   JupyterFrontEndPlugin,
   ILayoutRestorer
 } from '@jupyterlab/application';
+import { jsonIcon } from '@jupyterlab/ui-components';
 import { WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { BlocklyEditorFactory } from './factory';
-import { IBlocklyManager } from './token';
+import { IBlocklyRegisty } from './token';
 import { BlocklyEditor } from './widget';
 
 /**
@@ -18,16 +19,16 @@ const FACTORY = 'Blockly editor';
 /**
  * Initialization data for the jupyterlab-blocky extension.
  */
-const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
+const plugin: JupyterFrontEndPlugin<IBlocklyRegisty> = {
   id: 'jupyterlab-blocky:plugin',
   autoStart: true,
   requires: [ILayoutRestorer, IRenderMimeRegistry],
-  provides: IBlocklyManager,
+  provides: IBlocklyRegisty,
   activate: (
     app: JupyterFrontEnd,
     restorer: ILayoutRestorer,
     rendermime: IRenderMimeRegistry
-  ): IBlocklyManager => {
+  ): IBlocklyRegisty => {
     console.log('JupyterLab extension jupyterlab-blocky is activated!');
 
     // Namespace for the tracker
@@ -51,8 +52,8 @@ const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
     const widgetFactory = new BlocklyEditorFactory({
       name: FACTORY,
       modelName: 'text',
-      fileTypes: ['json'],
-      defaultFor: ['json'],
+      fileTypes: ['blockly'],
+      defaultFor: ['blockly'],
 
       // Kernel options, in this case we need to execute the code generated
       // in the blockly editor. The best way would be to use kernels, for
@@ -75,10 +76,21 @@ const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
       });
       tracker.add(widget);
     });
+    // Registering the file type
+    app.docRegistry.addFileType({
+      name: 'blockly',
+      displayName: 'Blockly',
+      contentType: 'file',
+      fileFormat: 'json',
+      extensions: ['.jpblockly'],
+      mimeTypes: ['application/json'],
+      icon: jsonIcon,
+      iconLabel: 'JupyterLab-Blockly'
+    });
     // Registering the widget factory
     app.docRegistry.addWidgetFactory(widgetFactory);
 
-    return widgetFactory.manager;
+    return widgetFactory.registry;
   }
 };
 

src/layout.ts

@@ -1,6 +1,6 @@
 import { SimplifiedOutputArea, OutputAreaModel } from '@jupyterlab/outputarea';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { ISessionContext } from '@jupyterlab/apputils';
+import { ISessionContext, showErrorMessage } from '@jupyterlab/apputils';
 
 import { Message } from '@lumino/messaging';
 import { PartialJSONValue } from '@lumino/coreutils';
@@ -98,12 +98,21 @@ export class BlocklyLayout extends PanelLayout {
 
     // Execute the code using the kernel, by using a static method from the
     // same class to make an execution request.
-    SimplifiedOutputArea.execute(code, this._outputArea, this._sessionContext)
-      .then(resp => {
-        this.addWidget(this._outputArea);
-        this._resizeWorkspace();
-      })
-      .catch(e => console.error(e));
+    if (this._sessionContext.hasNoKernel) {
+      showErrorMessage(
+        'Select a valid kernel',
+        `There is not a valid kernel selected, select one from the dropdown menu in the toolbar.
+        If there isn't a valid kernel please install 'xeus-python' from Pypi.org or using mamba.
+        `
+      );
+    } else {
+      SimplifiedOutputArea.execute(code, this._outputArea, this._sessionContext)
+        .then(resp => {
+          this.addWidget(this._outputArea);
+          this._resizeWorkspace();
+        })
+        .catch(e => console.error(e));
+    }
   }
 
   /**

src/manager.ts

@@ -1,49 +1,93 @@
+import { ISessionContext } from '@jupyterlab/apputils';
+import { KernelSpec, KernelConnection } from '@jupyterlab/services';
+import { IChangedArgs } from '@jupyterlab/coreutils';
+
+import { ISignal, Signal } from '@lumino/signaling';
 import { JSONObject } from '@lumino/coreutils';
 
 import * as Blockly from 'blockly';
 
-import BlocklyPy from 'blockly/python';
-
-import { IBlocklyManager } from './token';
-import { TOOLBOX } from './utils';
+import { BlocklyRegistry } from './registry';
 
-export class BlocklyManager implements IBlocklyManager {
+/**
+ * BlocklyManager
+ */
+export class BlocklyManager {
   private _toolbox: JSONObject;
-  private _activeGenerator: Blockly.Generator;
-  private _generators: Map<string, Blockly.Generator>;
+  private _generator: Blockly.Generator;
+  private _registry: BlocklyRegistry;
+  private _selectedKernel: KernelSpec.ISpecModel;
+  private _sessionContext: ISessionContext;
+  private _changed: Signal<this, BlocklyManager.Change>;
 
   /**
-   * Constructor of BlocklyEditorFactory.
-   *
-   * @param options Constructor options
+   * Constructor of BlocklyManager.
    */
-  constructor() {
-    this._toolbox = TOOLBOX;
-    this._activeGenerator = BlocklyPy;
-    this._generators = new Map<string, Blockly.Generator>();
+  constructor(registry: BlocklyRegistry, sessionContext: ISessionContext) {
+    this._registry = registry;
+    this._sessionContext = sessionContext;
+
+    this._toolbox = this._registry.toolboxes.get('default');
+    this._generator = this._registry.generators.get('python');
+
+    this._changed = new Signal<this, BlocklyManager.Change>(this);
+    this._sessionContext.kernelChanged.connect(this._onKernelChanged, this);
   }
 
   get toolbox(): JSONObject {
     return this._toolbox;
   }
 
-  set activeGenerator(name: string) {
-    this._activeGenerator = this._generators.get(name);
+  get kernel(): string | undefined {
+    return this._selectedKernel?.name || 'No kernel';
   }
 
   get generator(): Blockly.Generator {
-    return this._activeGenerator;
+    return this._generator;
+  }
+
+  get changed(): ISignal<this, BlocklyManager.Change> {
+    return this._changed;
   }
 
-  registerToolbox(value: JSONObject): void {
-    this._toolbox = value;
+  dispose(): void {
+    this._sessionContext.kernelChanged.disconnect(this._onKernelChanged, this);
   }
 
-  registerBlocks(blocks: JSONObject[]): void {
-    Blockly.defineBlocksWithJsonArray(blocks);
+  setToolbox(name: string) {
+    this._toolbox = this._registry.toolboxes.get(name);
   }
 
-  registerGenerator(kernel: string, generator: Blockly.Generator): void {
-    this._generators.set(kernel, generator);
+  selectKernel(name: string) {
+    this._sessionContext.changeKernel({ name });
   }
+
+  listKernels(): { label: string; value: string }[] {
+    const specs = this._sessionContext.specsManager.specs.kernelspecs;
+    const list: { label: string; value: string }[] = [];
+    Object.keys(specs).forEach(key => {
+      const language = specs[key].language;
+      if (this._registry.generators.has(language)) {
+        list.push({ label: specs[key].display_name, value: specs[key].name });
+      }
+    });
+    return list;
+  }
+
+  private _onKernelChanged(
+    sender: ISessionContext,
+    args: IChangedArgs<KernelConnection, KernelConnection, 'kernel'>
+  ): void {
+    const specs = this._sessionContext.specsManager.specs.kernelspecs;
+    if (args.newValue && specs[args.newValue.name] !== undefined) {
+      this._selectedKernel = specs[args.newValue.name];
+      const language = specs[args.newValue.name].language;
+      this._generator = this._registry.generators.get(language);
+      this._changed.emit('kernel');
+    }
+  }
+}
+
+export namespace BlocklyManager {
+  export type Change = 'toolbox' | 'kernel';
 }

src/registry.ts

@@ -0,0 +1,87 @@
+import { JSONObject } from '@lumino/coreutils';
+
+import * as Blockly from 'blockly';
+
+import BlocklyPy from 'blockly/python';
+import BlocklyJS from 'blockly/javascript';
+import BlocklyLua from 'blockly/lua';
+
+import { IBlocklyRegisty } from './token';
+import { TOOLBOX } from './utils';
+
+/**
+ * BlocklyRegistry is the class that JupyterLab-Blockly exposes
+ * to other plugins. This registry allows other plugins to register
+ * new Toolboxes, Blocks and Generators that users can use in the
+ * Blockly editor.
+ */
+export class BlocklyRegistry implements IBlocklyRegisty {
+  private _toolboxes: Map<string, JSONObject>;
+  private _generators: Map<string, Blockly.Generator>;
+
+  /**
+   * Constructor of BlocklyRegistry.
+   */
+  constructor() {
+    this._toolboxes = new Map<string, JSONObject>();
+    this._toolboxes.set('default', TOOLBOX);
+
+    this._generators = new Map<string, Blockly.Generator>();
+    this._generators.set('python', BlocklyPy);
+    this._generators.set('javascript', BlocklyJS);
+    this._generators.set('lua', BlocklyLua);
+  }
+
+  /**
+   * Returns a map with all the toolboxes.
+   */
+  get toolboxes(): Map<string, JSONObject> {
+    return this._toolboxes;
+  }
+
+  /**
+   * Returns a map with all the generators.
+   */
+  get generators(): Map<string, Blockly.Generator> {
+    return this._generators;
+  }
+
+  /**
+   * Register a toolbox for the editor.
+   *
+   * @argument name Name of the toolbox.
+   *
+   * @argument value Toolbox to register.
+   */
+  registerToolbox(name: string, value: JSONObject): void {
+    this._toolboxes.set(name, value);
+  }
+
+  /**
+   * Register new blocks.
+   *
+   * @argument name Name of the toolbox.
+   *
+   * @argument value Toolbox to register.
+   */
+  registerBlocks(blocks: JSONObject[]): void {
+    Blockly.defineBlocksWithJsonArray(blocks);
+  }
+
+  /**
+   * Register new generators.
+   *
+   * @argument name Name of the toolbox.
+   *
+   * @argument value Toolbox to register.
+   *
+   * #### Notes
+   * When registering a generator, the name should correspond to the language
+   * used by a kernel.
+   *
+   * If you register a generator for an existing language this will be overwritten.
+   */
+  registerGenerator(name: string, generator: Blockly.Generator): void {
+    this._generators.set(name, generator);
+  }
+}