Alias phosphor packages to lumino

[blink1073]

References

Addresses #7230 (comment)

Extension authors can continue to use phosphor packages if desired during this major release cycle.

Verification:

• Created an extension that creates a Phosphor widget and logs the instance
• Updated webpack config using the above changes
• Launched JupyerLab
• Console output has node: <div class="lm-Widget p-Widget">
• Verified that there were no @phosphor modules in vendor.bundle or main.bundle.

Note:
Extension authors using TypeScript would still have to switch to Lumino if they want to interact with core JupyterLab components such as adding content to a MainAreaWidget.

Code changes

Aliases phosphor packages to lumino packages in webpack.

User-facing changes

None.

Backwards-incompatible changes

None.

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[jasongrout]

Thanks for exploring this!

[meeseeksmachine]

This pull request has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/how-to-write-extension-that-supports-both-jupyterlab-1-0-2-0/3386/2

[jasongrout]

I just tested this, and this change allows, for example, bqplot to support both jlab 1 and jlab 2 with a simple change, even though bqplot internally uses phosphor messages, etc.

[jasongrout]

I tested a bit more by generating a 1.0 extension using the cookie cutter:

cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts --checkout v1.0

Then I made the following changes (notice the strategic uses of as any - since jlab 2.0 requires widget titles to have the icon rendering fields, typescript complains a bit because it doesn't know we are actually substituting in the lumino packages):

diff --git a/package.json b/package.json
index 95c6095..2d7b01c 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,13 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.0"
+    "@jupyterlab/application": "^2.0.0-rc.0",
+    "@jupyterlab/apputils": "^2.0.0-rc.0",
+    "@phosphor/widgets": "^1.9.3"
   },
   "devDependencies": {
     "rimraf": "^2.6.1",
-    "typescript": "~3.5.2"
+    "typescript": "~3.7.2"
   },
   "sideEffects": [
     "style/*.css"
diff --git a/src/index.ts b/src/index.ts
index 8952150..600acb0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,16 +1,45 @@
 import {
-  JupyterFrontEnd, JupyterFrontEndPlugin
-} from '@jupyterlab/application';
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin,
+  ILabShell,
+} from "@jupyterlab/application";
 
+import {
+  MainAreaWidget
+} from "@jupyterlab/apputils";
+
+import { Widget } from "@phosphor/widgets";
 
 /**
  * Initialization data for the myextension extension.
  */
 const extension: JupyterFrontEndPlugin<void> = {
-  id: 'myextension',
+  id: "myextension",
   autoStart: true,
-  activate: (app: JupyterFrontEnd) => {
-    console.log('JupyterLab extension myextension is activated!');
+  requires: [ILabShell],
+  activate: (app: JupyterFrontEnd, labShell: ILabShell) => {
+    const w = new Widget();
+    w.id = 'My widget';
+    w.title.label = 'My Widget';
+    w.node.textContent = "My widget!";
+    const mw = new MainAreaWidget({content: w as any});
+    app.restored.then(() => {
+      labShell.add(mw, 'main');
+    })
+
+    const w2 = new Widget();
+    w2.id = 'My widget2';
+    w2.title.label = 'My Widget2';

[jasongrout]

Thanks!