Transpile (optional) TypeScript, support imports (package and relative) and schema

.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
         }
       }
     ],
@@ -33,7 +33,7 @@ module.exports = {
       { avoidEscape: true, allowTemplateLiterals: false }
     ],
     curly: ['error', 'all'],
-    eqeqeq: 'error',
+    eqeqeq: ['error', 'smart'],
     'prefer-arrow-callback': 'error'
   }
 };

README.md

@@ -1,10 +1,10 @@
 # JupyterLab Plugin Playground
 
-[![Github Actions Status](https://github.com/jupyterlab/jupyterlab-plugin-playground/workflows/Build/badge.svg)](https://github.com/jupyterlab/jupyterlab-plugin-playground/actions/workflows/build.yml)[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/jupyterlab/jupyterlab-plugin-playground/master?urlpath=lab)
+[![Github Actions Status](https://github.com/jupyterlab/jupyterlab-plugin-playground/workflows/Build/badge.svg)](https://github.com/jupyterlab/jupyterlab-plugin-playground/actions/workflows/build.yml)
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/jupyterlab/jupyterlab-plugin-playground/master?urlpath=lab)
 
 A JupyterLab extension to write and load simple JupyterLab plugins inside JupyterLab.
 
-
 ## Install
 
 This extension requires JupyterLab 3. Install this extension with pip:
@@ -19,20 +19,22 @@ This extension provides a new command, `Load Current File As Extension`, availab
 
 As an example, open the text editor by creating a new text file and paste this small JupyterLab plugin into it. This plugin will create a simple command `My Super Cool Toggle` in the command palette that can be toggled on and off.
 
-```js
-{
-  id: 'MySuperCoolTogglePlugin',
+```typescript
+import { ICommandPalette } from '@jupyterlab/apputils';
+
+const plugin = {
+  id: 'my-super-cool-toggle:plugin',
   autoStart: true, // Activate this plugin immediately
-  requires: ["@jupyterlab/apputils:ICommandPalette"],
-  activate: function(app, palette) {
-    let commandID = "MySuperCoolToggle";
+  requires: [ICommandPalette],
+  activate: function (app, palette) {
+    let commandID = 'my-super-cool-toggle:toggle';
     let toggle = true; // The current toggle state
     app.commands.addCommand(commandID, {
       label: 'My Super Cool Toggle',
-      isToggled: function() {
+      isToggled: function () {
         return toggle;
       },
-      execute: function() {
+      execute: function () {
         // Toggle the state
         toggle = !toggle;
       }
@@ -41,50 +43,55 @@ As an example, open the text editor by creating a new text file and paste this s
     palette.addItem({
       command: commandID,
       // Sort to the top for convenience
-      category: "AAA"
+      category: 'AAA'
     });
   }
-}
+};
+
+export default plugin;
 ```
+
 While in the text editor, load this plugin in JupyterLab by invoking the Command Palette and executing `Load Current File As Extension`. Invoke the Command Palette again and you will see a new command "My Super Cool Toggle". Executing this new command will toggle the checkbox next to the command.
 
 As another more advanced example, we load the [bqplot](https://bqplot.readthedocs.io) Jupyter Widget library from the cloud using RequireJS. This assumes you have the [ipywidgets JupyterLab extension](https://ipywidgets.readthedocs.io/en/stable/user_install.html#installing-in-jupyterlab-3-0) installed.
 
-```js
-{
+```typescript
+// IJupyterWidgetRegistry token is provided with Plugin Playground
+import { IJupyterWidgetRegistry } from '@jupyter-widgets/base';
+// Use RequireJS to load the AMD module. '@*' selects the latest version
+// and `/dist/index.js` loads the corresponding module containing bqplot
+// from the CDN configured in Settings (`packageRegistryBaseUrl`).
+import bqplot from "bqplot@*/dist/index";
+
+const plugin = {
   id: 'mydynamicwidget',
   autoStart: true,
-  requires: ["jupyter.extensions.jupyterWidgetRegistry"],
-  activate: function(app, widgets) {
-    // Set up RequireJS to pull packages from the jsdelivr CDN.
-    require.config({
-      baseUrl: "https://cdn.jsdelivr.net/npm"
-    });
-    // Use RequireJS to load the AMD module. '@*' selects the latest version
-    // and `/dist/index.js` loads the corresponding module containing bqplot.
-    require(["bqplot@*/dist/index"], function(plugin) {
-      widgets.registerWidget({
-          name: 'bqplot',
-          version: plugin.version,
-          exports: plugin
-      });
+  requires: [IJupyterWidgetRegistry],
+  activate: function(app, widgets: IJupyterWidgetRegistry) {
+    widgets.registerWidget({
+        name: 'bqplot',
+        version: bqplot.version,
+        exports: bqplot
     });
   }
 }
+export default plugin;
 ```
 
 There are a few differences in how to write plugins in the Plugin Playground compared to writing plugins in a JupyterLab extension:
 
-* Plugins cannot import tokens from other packages, so we use the token names as strings in the `requires` and `optional` plugin fields rather than imported tokens. For example, we used the [ICommandPalette](https://github.com/jupyterlab/jupyterlab/blob/4169b7b684f6160b5a9ab093391ec531399dfa82/packages/apputils/src/tokens.ts#L16-L18) token name in the `requires` field above. The Plugin Playground will automatically change the token names to the corresponding tokens registered with the current JupyterLab when it loads the plugin. This means you can use token names for any extension currently loaded in JupyterLab, including non-core extensions.
-* To load code from a separate package, you can use RequireJS as in the example above to load bqplot. RequireJS comes with the Plugin Playground and can be used to load any AMD module.
-* You can only load a plugin with a given id once. If you make changes to your plugin, save it and refresh the JupyterLab page to be able to load it again.
+- The playground is more understanding: you can use JavaScript-like code rather than fully typed TypeScript and it will still compile.
+- You can only load a plugin with a given id more than once, but the previous version will not be unloaded. If you make changes to your plugin, save it and refresh the JupyterLab page to be able to load it afresh again.
+- ES6 modules and other modules compiled for consumption by Webpack/Node cannot be imported. An attempt to load such modules will result in `Uncaught SyntaxError: Unexpected token 'export'`.
+- To load code from a separate package, RequireJS is used which means that the import statments need to be slightly modified to point to appropriate version or file in the package.
 
 ## Advanced Settings
 
 The Advanced Settings for the Plugin Playground enable you to configure plugins to load every time JupyterLab starts up. Automatically loaded plugins can be configured in two ways:
 
-* `urls` is a list of URLs that will be fetched and loaded as plugins automatically when JupyterLab starts up. For example, you can point to a GitHub gist or a file you host on a local server that serves text files like the above examples.
-* `plugins` is a list of strings of plugin text, like the examples above, that are loaded automatically when JupyterLab starts up. Since JSON strings cannot have multiple lines, you will need to encode any newlines in your plugin text directly as `\n\` (the second backslash is to allow the string to continue on the next line). For example, here is a user setting to encode a small plugin to run at startup:
+- `packageRegistryBaseUrl` is the URL for a CDN to be used by the requirejs to load external packages.
+- `urls` is a list of URLs that will be fetched and loaded as plugins automatically when JupyterLab starts up. For example, you can point to a GitHub gist or a file you host on a local server that serves text files like the above examples.
+- `plugins` is a list of strings of plugin text, like the examples above, that are loaded automatically when JupyterLab starts up. Since JSON strings cannot have multiple lines, you will need to encode any newlines in your plugin text directly as `\n\` (the second backslash is to allow the string to continue on the next line). For example, here is a user setting to encode a small plugin to run at startup:
   ```json5
   {
     plugins: [

RELEASE.md

@@ -2,6 +2,8 @@
 
 The extension can be published to `PyPI` and `npm` manually or using the [Jupyter Releaser](https://github.com/jupyter-server/jupyter_releaser).
 
+To refresh the packages list run `python scripts/modules.py` with the target version of JupyterLab installed.
+
 ## Manual release
 
 ### Python package

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jupyterlab/plugin-playground",
   "version": "0.3.0",
-  "description": "A JupyterLab extension.",
+  "description": "A JupyterLab Plugin Playground.",
   "keywords": [
     "jupyter",
     "jupyterlab",
@@ -37,6 +37,8 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:labextension": "rimraf jupyterlab_plugin_playground/labextension",
     "clean:all": "jlpm run clean:lib && jlpm run clean:labextension",
+    "prettier": "prettier --list-different --write \"**/*{.ts,.tsx,.css,.json}\"",
+    "lint": "jlpm prettier && jlpm eslint",
     "eslint": "eslint . --ext .ts,.tsx --fix",
     "eslint:check": "eslint . --ext .ts,.tsx",
     "install:extension": "jlpm run build",
@@ -45,19 +47,43 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
+    "@jupyter-widgets/base": "^4.0.0",
     "@jupyterlab/application": "^3.0.0",
     "@jupyterlab/apputils": "^3.0.0",
     "@jupyterlab/fileeditor": "^3.0.0",
     "@jupyterlab/settingregistry": "^3.0.0",
-    "@jupyter-widgets/base": "^4.0.0"
+    "typescript": "~4.1.3"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.0.0",
+    "@jupyterlab/completer": "^3.2.5",
+    "@jupyterlab/console": "^3.2.5",
+    "@jupyterlab/debugger": "^3.2.5",
+    "@jupyterlab/docmanager": "^3.2.5",
+    "@jupyterlab/documentsearch": "^3.2.5",
+    "@jupyterlab/extensionmanager": "^3.2.5",
+    "@jupyterlab/filebrowser": "^3.2.5",
+    "@jupyterlab/imageviewer": "^3.2.5",
+    "@jupyterlab/inspector": "^3.2.5",
+    "@jupyterlab/launcher": "^3.2.5",
+    "@jupyterlab/logconsole": "^3.2.5",
+    "@jupyterlab/mainmenu": "^3.2.5",
+    "@jupyterlab/markdownviewer": "^3.2.5",
+    "@jupyterlab/notebook": "^3.2.5",
+    "@jupyterlab/settingeditor": "^3.2.5",
+    "@jupyterlab/terminal": "^3.2.5",
+    "@jupyterlab/toc": "^5.2.5",
+    "@jupyterlab/tooltip": "^3.2.5",
+    "@lumino/datagrid": "^0.34.1",
+    "@types/codemirror": "^5.6.20",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/requirejs": "^2.1.34",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4", 
+    "eslint-plugin-prettier": "^3.1.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.1",
     "rimraf": "^3.0.2",
@@ -68,7 +94,8 @@
     "style/index.js"
   ],
   "styleModule": "style/index.js",
-  "jupyterlab": { 
+  "jupyterlab": {
+    "webpackConfig": "./webpack.config.js",
     "extension": true,
     "outputDir": "jupyterlab_plugin_playground/labextension",
     "schemaDir": "schema"

schema/plugin.json

@@ -1,6 +1,12 @@
 {
   "title": "Plugin Playground",
   "properties": {
+    "packageRegistryBaseUrl": {
+      "title": "Base URL of a CDN for requirejs",
+      "description": "URL from which the unknown packages should be loaded, e.g. https://unpkg.com/",
+      "default": "https://cdn.jsdelivr.net/npm/",
+      "type": "string"
+    },
     "urls": {
       "title": "Plugin URLs",
       "description": "List of URL strings that will be fetched and loaded as plugins automatically on startup.",
@@ -18,8 +24,81 @@
       "items": {
         "type": "string"
       }
+    },
+    "toolbar": {
+      "title": "Toolbar items",
+      "items": {
+        "$ref": "#/definitions/toolbarItem"
+      },
+      "type": "array",
+      "default": []
     }
   },
-  "additionalProperties": false,
-  "type": "object"
-}
+  "jupyter.lab.transform": false,
+  "jupyter.lab.toolbars": {
+    "Editor": [
+      {
+        "name": "insert",
+        "command": "plugin-playground:load-as-extension",
+        "rank": 20
+      }
+    ]
+  },
+  "jupyter.lab.shortcuts": [
+    {
+      "command": "plugin-playground:load-as-extension",
+      "keys": ["Alt C"],
+      "selector": ".jp-Editor"
+    }
+  ],
+  "additionalProperties": true,
+  "type": "object",
+  "definitions": {
+    "toolbarItem": {
+      "properties": {
+        "name": {
+          "title": "Unique name",
+          "type": "string"
+        },
+        "args": {
+          "title": "Command arguments",
+          "type": "object"
+        },
+        "command": {
+          "title": "Command id",
+          "type": "string",
+          "default": ""
+        },
+        "disabled": {
+          "title": "Whether the item is ignored or not",
+          "type": "boolean",
+          "default": false
+        },
+        "icon": {
+          "title": "Item icon id",
+          "description": "If defined, it will override the command icon",
+          "type": "string"
+        },
+        "label": {
+          "title": "Item label",
+          "description": "If defined, it will override the command label",
+          "type": "string"
+        },
+        "type": {
+          "title": "Item type",
+          "type": "string",
+          "enum": ["command", "spacer"]
+        },
+        "rank": {
+          "title": "Item rank",
+          "type": "number",
+          "minimum": 0,
+          "default": 50
+        }
+      },
+      "required": ["name"],
+      "additionalProperties": false,
+      "type": "object"
+    }
+  }
+}

scripts/modules.py

@@ -0,0 +1,61 @@
+import jupyterlab
+
+
+def to_identifier(package_name: str):
+    return (
+        package_name
+        .replace('@', '')
+        .replace('-', '_')
+        .replace('/', '_')
+    )
+
+
+# packages not used in core, but required for examples
+EXTRA_MODULES = {
+    '@jupyter-widgets/base',
+    '@lumino/datagrid'
+}
+
+# modules which are implementation detail and unlikely to be used directly in playground
+IGNORED_MODULES = {
+    'yjs'
+}
+
+TEMPLATE = """\
+{imports_string}
+
+export const modules = {{
+  {key_map_string}
+}};
+"""
+
+
+def create_modules_map(core_modules, extra_modules, ignored_modules):
+    modules_to_export = sorted({
+        *core_modules,
+        *extra_modules
+    } - set(ignored_modules))
+    imports = [
+        f"import * as {to_identifier(module)} from '{module}';"
+        for module in modules_to_export
+    ]
+
+    key_map = [
+        f"'{module}': {to_identifier(module)}"
+        for module in modules_to_export
+    ]
+
+    modules_dot_ts = TEMPLATE.format(
+        imports_string='\n'.join(imports),
+        key_map_string=',\n  '.join(key_map)
+    )
+    return modules_dot_ts
+
+
+if __name__ == '__main__':
+    print(f'Creating module map against JupyterLab {jupyterlab.__version__}')
+    config = jupyterlab.coreconfig.CoreConfig()
+    core_modules = config.singletons.keys()
+    modules_map = create_modules_map(core_modules, EXTRA_MODULES, IGNORED_MODULES)
+    with open('src/modules.ts', 'w') as f:
+        f.write(modules_map)