Clean up and use a CodeCell to render and execute the code

Author: hbcarlos

.eslintrc.js

@@ -15,11 +15,11 @@ module.exports = {
     '@typescript-eslint/naming-convention': [
       'error',
       {
-        'selector': 'interface',
-        'format': ['PascalCase'],
-        'custom': {
-          'regex': '^I[A-Z]',
-          'match': true
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true
         }
       }
     ],

.github/workflows/binder-on-pr.yml

@@ -0,0 +1,28 @@
+# Reference https://mybinder.readthedocs.io/en/latest/howto/gh-actions-badges.html
+name: Binder Badge
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions:
+  pull-requests: write
+jobs:
+  binder:
+    runs-on: ubuntu-latest
+    steps:
+      - name: comment on PR with Binder link
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            var PR_HEAD_USERREPO = process.env.PR_HEAD_USERREPO;
+            var PR_HEAD_REF = process.env.PR_HEAD_REF;
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/${PR_HEAD_USERREPO}/${PR_HEAD_REF}?urlpath=lab) :point_left: Launch a Binder on branch _${PR_HEAD_USERREPO}/${PR_HEAD_REF}_`
+            })
+        env:
+          PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
+          PR_HEAD_USERREPO: ${{ github.event.pull_request.head.repo.full_name }}

.github/workflows/pre-commit-config.yaml

@@ -0,0 +1,5 @@
+- repo: https://github.com/pre-commit/mirrors-prettier
+  rev: "" # Use the sha or tag you want to point at
+  hooks:
+    - id: prettier
+    

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "none",
-  "arrowParens": "avoid"
-}
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

README.md

@@ -5,32 +5,33 @@
 Blockly extension for JupyterLab.
 
 ## Blockly
+
 Blockly is a library from Google for building beginner-friendly block-based programming languages.
 
 Docs: https://developers.google.com/blockly/guides/overview
 Repo: https://github.com/google/blockly
 
-
 ## Requirements
 
-* JupyterLab == 3.4
+- JupyterLab == 3.4
 
 ## Install
 
 To install the extension, execute:
 
 ```bash
-micromamba create -n blockly -c conda-forge python ipykernel xeus-python xeus-lua
+micromamba create -n blockly -c conda-forge python jupyterlab==3.4 ipykernel xeus-python xeus-lua jupyterlab-language-pack-es-ES jupyterlab-language-pack-fr-FR
 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)
+
+- ipykernel
+- xeus-python
+- xeus-lua
+- [JavaScript](https://github.com/n-riesco/ijavascript#installation)
+- [JavaScript](https://github.com/yunabe/tslab)
 
 ## Uninstall
 
@@ -40,7 +41,6 @@ To remove the extension, execute:
 pip uninstall jupyterlab_blockly
 ```
 
-
 ## Contributing
 
 ### Development install
@@ -52,7 +52,7 @@ The `jlpm` command is JupyterLab's pinned version of
 `yarn` or `npm` in lieu of `jlpm` below.
 
 ```bash
-micromamba create -n blockly -c conda-forge python nodejs yarn jupyterlab==3.4 jupyter-packaging
+micromamba create -n blockly -c conda-forge python nodejs yarn jupyterlab==3.4 jupyter-packaging jupyterlab-language-pack-es-ES jupyterlab-language-pack-fr-FR ipykernel xeus-python xeus-lua
 micromamba activate blockly
 # Clone the repo to your local environment
 # Change directory to the jupyterlab_blockly directory

RELEASE.md

@@ -15,7 +15,7 @@ Python package. Before generating a package, we first need to install `build`.
 pip install build twine
 ```
 
-To create a Python source package (``.tar.gz``) and the binary package (`.whl`) in the `dist/` directory, do:
+To create a Python source package (`.tar.gz`) and the binary package (`.whl`) in the `dist/` directory, do:
 
 ```bash
 python -m build

package.json

@@ -37,9 +37,14 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:labextension": "rimraf jupyterlab_blockly/labextension",
     "clean:all": "jlpm run clean:lib && jlpm run clean:labextension",
-    "eslint": "eslint . --ext .ts,.tsx --fix",
-    "eslint:check": "eslint . --ext .ts,.tsx",
+    "eslint": "jlpm eslint:check --fix",
+    "eslint:check": "eslint . --cache --ext .ts,.tsx",
     "install:extension": "jlpm run 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",
     "watch": "run-p watch:src watch:labextension",
     "watch:src": "tsc -w",
     "watch:labextension": "jupyter labextension watch .",
@@ -48,6 +53,8 @@
   "dependencies": {
     "@jupyterlab/application": "^3.4",
     "@jupyterlab/apputils": "^3.4",
+    "@jupyterlab/cells": "^3.4",
+    "@jupyterlab/codeeditor": "^3.4",
     "@jupyterlab/coreutils": "^5.4",
     "@jupyterlab/docregistry": "^3.4",
     "@jupyterlab/filebrowser": "^3.4",

patches/@jupyterlab+codeeditor+3.4.2.patch renamed to patches/@jupyterlab+codeeditor+3.4.3.patch

@@ -4,6 +4,7 @@ import {
   DocumentModel
 } from '@jupyterlab/docregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
 
 import { BlocklyEditor, BlocklyPanel } from './widget';
 import { BlocklyRegistry } from './registry';
@@ -18,6 +19,7 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
 > {
   private _registry: BlocklyRegistry;
   private _rendermime: IRenderMimeRegistry;
+  private _mimetypeService: IEditorMimeTypeService;
 
   /**
    * Constructor of BlocklyEditorFactory.
@@ -28,6 +30,7 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
     super(options);
     this._registry = new BlocklyRegistry();
     this._rendermime = options.rendermime;
+    this._mimetypeService = options.mimetypeService;
   }
 
   get registry(): BlocklyRegistry {
@@ -43,7 +46,11 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
   protected createNewWidget(
     context: DocumentRegistry.IContext<DocumentModel>
   ): BlocklyEditor {
-    const manager = new BlocklyManager(this._registry, context.sessionContext);
+    const manager = new BlocklyManager(
+      this._registry,
+      context.sessionContext,
+      this._mimetypeService
+    );
     const content = new BlocklyPanel(context, manager, this._rendermime);
     return new BlocklyEditor({ context, content, manager });
   }
@@ -55,5 +62,9 @@ export namespace BlocklyEditorFactory {
      * A rendermime instance.
      */
     rendermime: IRenderMimeRegistry;
+    /*
+     * A mimeType service instance.
+     */
+    mimetypeService: IEditorMimeTypeService;
   }
 }

src/factory.ts

@@ -6,6 +6,7 @@ import {
 import { jsonIcon } from '@jupyterlab/ui-components';
 import { WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IEditorServices } from '@jupyterlab/codeeditor';
 import { ICommandPalette } from '@jupyterlab/apputils';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { ILauncher } from '@jupyterlab/launcher';
@@ -43,6 +44,7 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegisty> = {
   requires: [
     ILayoutRestorer,
     IRenderMimeRegistry,
+    IEditorServices,
     IFileBrowserFactory,
     ISettingRegistry,
     ITranslator
@@ -53,6 +55,7 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegisty> = {
     app: JupyterFrontEnd,
     restorer: ILayoutRestorer,
     rendermime: IRenderMimeRegistry,
+    editorServices: IEditorServices,
     browserFactory: IFileBrowserFactory,
     settings: ISettingRegistry,
     translator: ITranslator,
@@ -97,8 +100,10 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegisty> = {
       shutdownOnClose: true,
 
       // The rendermime instance, necessary to render the outputs
-      // after a code execution.
+      // after a code execution. And the mimeType service to get the
+      // mimeType from the kernel language
       rendermime: rendermime,
+      mimetypeService: editorServices.mimeTypeService,
 
       // The translator instance, used for the internalization of the plugin.
       translator: translator

src/index.ts

@@ -1,6 +1,6 @@
-import { SimplifiedOutputArea, OutputAreaModel } from '@jupyterlab/outputarea';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISessionContext, showErrorMessage } from '@jupyterlab/apputils';
+import { CodeCell, CodeCellModel } from '@jupyterlab/cells';
 
 import { Message } from '@lumino/messaging';
 import { PartialJSONValue } from '@lumino/coreutils';
@@ -21,7 +21,7 @@ export class BlocklyLayout extends PanelLayout {
   private _manager: BlocklyManager;
   private _workspace: Blockly.WorkspaceSvg;
   private _sessionContext: ISessionContext;
-  private _outputArea: SimplifiedOutputArea;
+  private _cell: CodeCell;
 
   /**
    * Construct a `BlocklyLayout`.
@@ -40,12 +40,18 @@ export class BlocklyLayout extends PanelLayout {
     // and the output area to render the execution replies.
     this._host = document.createElement('div');
 
-    // Creating a SimplifiedOutputArea widget to render the
+    // Creating a CodeCell widget to render the code and
     // outputs from the execution reply.
-    this._outputArea = new SimplifiedOutputArea({
-      model: new OutputAreaModel({ trusted: true }),
+    this._cell = new CodeCell({
+      model: new CodeCellModel({}),
       rendermime
     });
+    // Trust the outputs and set the mimeType for the code
+    this._cell.readOnly = true;
+    this._cell.model.trusted = true;
+    this._cell.model.mimeType = this._manager.mimeType;
+
+    this._manager.changed.connect(this._onManagerChanged, this);
   }
 
   get workspace(): PartialJSONValue {
@@ -99,6 +105,9 @@ export class BlocklyLayout extends PanelLayout {
   run(): void {
     // Serializing our workspace into the chosen language generator.
     const code = this._manager.generator.workspaceToCode(this._workspace);
+    this._cell.model.sharedModel.setSource(code);
+    this.addWidget(this._cell);
+    this._resizeWorkspace();
 
     // Execute the code using the kernel, by using a static method from the
     // same class to make an execution request.
@@ -111,11 +120,8 @@ export class BlocklyLayout extends PanelLayout {
         `
       );
     } else {
-      SimplifiedOutputArea.execute(code, this._outputArea, this._sessionContext)
-        .then(resp => {
-          this.addWidget(this._outputArea);
-          this._resizeWorkspace();
-        })
+      CodeCell.execute(this._cell, this._sessionContext)
+        .then(() => this._resizeWorkspace())
         .catch(e => console.error(e));
     }
   }
@@ -155,19 +161,30 @@ export class BlocklyLayout extends PanelLayout {
   private _resizeWorkspace(): void {
     //Resize logic.
     const rect = this.parent.node.getBoundingClientRect();
-    const { height } = this._outputArea.node.getBoundingClientRect();
-    this._host.style.width = rect.width + 'px';
+    const { height } = this._cell.node.getBoundingClientRect();
     const margin = rect.height / 3;
 
     if (height > margin) {
       this._host.style.height = rect.height - margin + 'px';
-      this._outputArea.node.style.height = margin + 'px';
-      this._outputArea.node.style.overflowY = 'scroll';
+      this._cell.node.style.height = margin + 'px';
+      this._cell.node.style.overflowY = 'scroll';
     } else {
       this._host.style.height = rect.height - height + 'px';
-      this._outputArea.node.style.overflowY = 'hidden';
+      this._cell.node.style.overflowY = 'scroll';
     }
 
     Blockly.svgResize(this._workspace);
   }
+
+  private _onManagerChanged(
+    sender: BlocklyManager,
+    change: BlocklyManager.Change
+  ) {
+    if (change === 'kernel') {
+      // Serializing our workspace into the chosen language generator.
+      const code = this._manager.generator.workspaceToCode(this._workspace);
+      this._cell.model.sharedModel.setSource(code);
+      this._cell.model.mimeType = this._manager.mimeType;
+    }
+  }
 }

src/layout.ts

@@ -1,4 +1,5 @@
 import { ISessionContext } from '@jupyterlab/apputils';
+import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
 import { KernelSpec, KernelConnection } from '@jupyterlab/services';
 import { IChangedArgs } from '@jupyterlab/coreutils';
 
@@ -20,14 +21,20 @@ export class BlocklyManager {
   private _registry: BlocklyRegistry;
   private _selectedKernel: KernelSpec.ISpecModel;
   private _sessionContext: ISessionContext;
+  private _mimetypeService: IEditorMimeTypeService;
   private _changed: Signal<this, BlocklyManager.Change>;
 
   /**
    * Constructor of BlocklyManager.
    */
-  constructor(registry: BlocklyRegistry, sessionContext: ISessionContext) {
+  constructor(
+    registry: BlocklyRegistry,
+    sessionContext: ISessionContext,
+    mimetypeService: IEditorMimeTypeService
+  ) {
     this._registry = registry;
     this._sessionContext = sessionContext;
+    this._mimetypeService = mimetypeService;
 
     this._toolbox = this._registry.toolboxes.get('default');
     this._generator = this._registry.generators.get('python');
@@ -43,6 +50,22 @@ export class BlocklyManager {
     return this._toolbox;
   }
 
+  /**
+   * Returns the mimeType for the selected kernel.
+   *
+   * Note: We need the mimeType for the syntax highlighting
+   * when rendering the code.
+   */
+  get mimeType(): string {
+    if (this._selectedKernel) {
+      return this._mimetypeService.getMimeTypeByLanguage({
+        name: this._selectedKernel.language
+      });
+    } else {
+      return 'text/plain';
+    }
+  }
+
   /**
    * Returns the name of the selected kernel.
    */