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

hbcarlos · hbcarlos · commit acd288d4f489 · 2022-06-14T19:34:05.000+02:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,27 @@
-node_modules
+**/node_modules
+**/lib
+**/package.json
+**/patches
 dist
 coverage
 **/*.d.ts
 tests
+
+.github
+binder
+jupyterlab_blockly/labextension
+.eslintignore
+.eslintrc.js
+.gitignore
+.pre-commit-config.yaml
+.prettierignore
+.prettierrc
+CHANGELOG.md
+install.json
+LICENSE
+MANIFEST.in
+pyproject.toml
+README.md
+RELEASE.md
+tsconfig.json
+yarn.lock
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,7 +3,8 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
+    'plugin:react/recommended'
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -15,11 +16,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
         }
       }
     ],
diff --git a/.github/workflows/binder-on-pr.yml b/.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 }}
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -0,0 +1,11 @@
+repos:
+  - repo: local
+    hooks:
+      - id: prettier
+        name: prettier
+        entry: 'npm run prettier'
+        language: node
+      - id: eslint
+        name: eslint
+        entry: 'npm run eslint'
+        language: node
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "none",
-  "arrowParens": "avoid"
-}
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}
diff --git a/README.md b/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,12 +52,14 @@ 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 pre-commit 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
 # Install package in development mode
 pip install -e .
+# Installing pre-commit to run command when adding commits
+pre-commit install
 # Link your development version of the extension with JupyterLab
 jupyter labextension develop . --overwrite
 # Rebuild extension Typescript source after making changes
diff --git a/RELEASE.md b/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
diff --git a/package.json b/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": "jlpm eslint:check --fix",
     "eslint:check": "eslint . --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}\"",
+    "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",
@@ -72,6 +79,7 @@
     "eslint": "^8.9.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
diff --git a/patches/@jupyterlab+codeeditor+3.4.3.patch b/patches/@jupyterlab+codeeditor+3.4.3.patch
diff --git a/src/factory.ts b/src/factory.ts
@@ -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;
   }
 }
diff --git a/src/index.ts b/src/index.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
diff --git a/src/layout.ts b/src/layout.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;
+    }
+  }
 }
diff --git a/src/manager.ts b/src/manager.ts
diff --git a/style/base.css b/style/base.css
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"singleQuote": true,`
`3`	`3`	`"trailingComma": "none",`
`4`		`- "arrowParens": "avoid"`
`5`		`-}`
	`4`	`+ "arrowParens": "avoid",`
	`5`	`+ "endOfLine": "auto"`
	`6`	`+}`