Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alias phosphor packages to lumino #7893

Merged
merged 1 commit into from Feb 20, 2020

Conversation

blink1073
Copy link
Member

@blink1073 blink1073 commented Feb 17, 2020

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.

@blink1073 blink1073 added this to the 2.0 milestone Feb 17, 2020
@jupyterlab-dev-mode
Copy link

jupyterlab-dev-mode bot commented Feb 17, 2020

Thanks for making a pull request to JupyterLab!

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

@blink1073 blink1073 changed the title Alias phosphor packages to lumino [WIP] Alias phosphor packages to lumino Feb 17, 2020
@blink1073 blink1073 changed the title [WIP] Alias phosphor packages to lumino Alias phosphor packages to lumino Feb 17, 2020
@jasongrout
Copy link
Contributor

jasongrout commented Feb 18, 2020

Thanks for exploring this!

@meeseeksmachine
Copy link
Contributor

meeseeksmachine commented Feb 20, 2020

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
Copy link
Contributor

jasongrout commented Feb 20, 2020

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
Copy link
Contributor

jasongrout commented Feb 20, 2020

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 jasongrout merged commit 520a6da into jupyterlab:master Feb 20, 2020
@jasongrout
Copy link
Contributor

jasongrout commented Feb 20, 2020

Thanks!

@lock lock bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Mar 21, 2020
@lock lock bot locked as resolved and limited conversation to collaborators Mar 21, 2020
@blink1073 blink1073 deleted the alias-phosphor branch Mar 29, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. tag:Extensions
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants