add LeetCodeWidget

Author: Sorosliu1029

jupyterlab_leetcode/__init__.py

@@ -5,22 +5,18 @@
     # in editable mode with pip. It is highly recommended to install
     # the package from a stable release or in editable mode: https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs
     import warnings
+
     warnings.warn("Importing 'jupyterlab_leetcode' outside a proper installation.")
     __version__ = "dev"
 from .handlers import setup_handlers
 
 
 def _jupyter_labextension_paths():
-    return [{
-        "src": "labextension",
-        "dest": "jupyterlab-leetcode"
-    }]
+    return [{"src": "labextension", "dest": "jupyterlab-leetcode"}]
 
 
 def _jupyter_server_extension_points():
-    return [{
-        "module": "jupyterlab_leetcode"
-    }]
+    return [{"module": "jupyterlab_leetcode"}]
 
 
 def _load_jupyter_server_extension(server_app):

jupyterlab_leetcode/handlers.py

@@ -1,18 +1,23 @@
 import json
 
+import tornado
 from jupyter_server.base.handlers import APIHandler
 from jupyter_server.utils import url_path_join
-import tornado
+
 
 class RouteHandler(APIHandler):
     # The following decorator should be present on all verb methods (head, get, post,
     # patch, put, delete, options) to ensure only authorized user can request the
     # Jupyter server
     @tornado.web.authenticated
     def get(self):
-        self.finish(json.dumps({
-            "data": "This is /jupyterlab-leetcode/get-example endpoint!"
-        }))
+        self.finish(
+            json.dumps(
+                {
+                    "data": "This is /jupyterlab-leetcode/get-example endpoint!",
+                }
+            )
+        )
 
 
 def setup_handlers(web_app):

package.json

@@ -57,7 +57,8 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyterlab/application": "^4.0.0",
+        "@jupyterlab/application": "^4.4.3",
+        "@jupyterlab/apputils": "^4.5.3",
         "@jupyterlab/coreutils": "^6.0.0",
         "@jupyterlab/services": "^7.0.0",
         "@jupyterlab/settingregistry": "^4.0.0"

pyproject.toml

@@ -24,6 +24,7 @@ classifiers = [
 ]
 dependencies = [
     "jupyter_server>=2.4.0,<3"
+  # TODO: fill this
 ]
 dynamic = ["version", "description", "authors", "urls", "keywords"]
 

src/index.ts

@@ -3,9 +3,7 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { ISettingRegistry } from '@jupyterlab/settingregistry';
-
-import { requestAPI } from './handler';
+import LeetCodeWidget from './widget';
 
 /**
  * Initialization data for the jupyterlab-leetcode extension.
@@ -14,30 +12,13 @@ const plugin: JupyterFrontEndPlugin<void> = {
   id: 'jupyterlab-leetcode:plugin',
   description: 'Integrate LeetCode into beloved Jupyter.',
   autoStart: true,
-  optional: [ISettingRegistry],
-  activate: (app: JupyterFrontEnd, settingRegistry: ISettingRegistry | null) => {
+  requires: [],
+  optional: [],
+  activate: (app: JupyterFrontEnd) => {
     console.log('JupyterLab extension jupyterlab-leetcode is activated!');
 
-    if (settingRegistry) {
-      settingRegistry
-        .load(plugin.id)
-        .then(settings => {
-          console.log('jupyterlab-leetcode settings loaded:', settings.composite);
-        })
-        .catch(reason => {
-          console.error('Failed to load settings for jupyterlab-leetcode.', reason);
-        });
-    }
-
-    requestAPI<any>('get-example')
-      .then(data => {
-        console.log(data);
-      })
-      .catch(reason => {
-        console.error(
-          `The jupyterlab_leetcode server extension appears to be missing.\n${reason}`
-        );
-      });
+    const leetcodeWidget: LeetCodeWidget = new LeetCodeWidget();
+    app.shell.add(leetcodeWidget, 'right', { rank: 599 });
   }
 };
 

src/widget.tsx

@@ -0,0 +1,24 @@
+import { ReactWidget } from '@jupyterlab/ui-components';
+import React from 'react';
+
+const LeetCodeComponent = (): JSX.Element => {
+  return (
+    <div>
+      <p>Welcome to JupyterLab LeetCode Widget.</p>
+    </div>
+  );
+};
+
+class LeetCodeWidget extends ReactWidget {
+  constructor() {
+    super();
+    this.id = 'JupyterlabLeetcodeWidget';
+    this.addClass('jupyterlab-leetcode-widget');
+  }
+
+  protected render(): JSX.Element {
+    return <LeetCodeComponent />;
+  }
+}
+
+export default LeetCodeWidget;

yarn.lock

@@ -2007,7 +2007,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jupyterlab/application@npm:^4.0.0, @jupyterlab/application@npm:^4.4.3":
+"@jupyterlab/application@npm:^4.4.3":
   version: 4.4.3
   resolution: "@jupyterlab/application@npm:4.4.3"
   dependencies:
@@ -6810,7 +6810,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "jupyterlab-leetcode@workspace:."
   dependencies:
-    "@jupyterlab/application": ^4.0.0
+    "@jupyterlab/application": ^4.4.3
+    "@jupyterlab/apputils": ^4.5.3
     "@jupyterlab/builder": ^4.0.0
     "@jupyterlab/coreutils": ^6.0.0
     "@jupyterlab/services": ^7.0.0