Build with lab 4

.gitignore

@@ -154,6 +154,7 @@ ipyflex/labextension/*.tgz
 
 # Packed lab extensions
 ipyflex/labextension
+ipyflex/nbextension
 
 .vscode/
 docs/source/_static/*.txt
@@ -166,4 +167,7 @@ MANIFEST
 
 #Galata 
 ui-tests/playwright-report
-ui-tests/test-results
+ui-tests/test-results
+
+.yarn/
+/docs/source/_static

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -52,20 +52,19 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@jupyter-widgets/base": "^2 || ^3 || ^4 || ^5 || ^6",
-    "@jupyterlab/apputils": " ^2.0.0 || ^3.0.0 || ^4.0.0",
+    "@jupyterlab/application": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "@jupyterlab/apputils": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "@mui/material": "^5.0.4",
     "flexlayout-react": "^0.5.20"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
-    "@jupyterlab/builder": "^3.0.0",
-    "@phosphor/application": "^1.6.0",
-    "@phosphor/widgets": "^1.6.0",
+    "@jupyterlab/builder": "^4.0.0",
     "@types/jest": "^26.0.0",
     "@types/webpack-env": "^1.13.6",
-    "@typescript-eslint/eslint-plugin": "^3.6.0",
-    "@typescript-eslint/parser": "^3.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "acorn": "^7.2.0",
     "css-loader": "^3.2.0",
     "eslint": "^7.4.0",
@@ -84,9 +83,10 @@
     "style-loader": "^1.0.0",
     "ts-jest": "^26.0.0",
     "ts-loader": "^9.2.6",
-    "typescript": "~4.1.3",
+    "typescript": "~5.0.2",
+    "url-loader": "^4.1.0",
     "webpack": "^5.0.0",
-    "webpack-cli": "^4.0.0"
+    "webpack-cli": "^5.0.0"
   },
   "jupyterlab": {
     "extension": "lib/plugin",

src/menuWidget.tsx

@@ -13,7 +13,7 @@ interface IProps {
   factoryDict: IDict<IDict>;
   addTabToTabset: (name: string, extraData?: IDict) => void;
   model: any;
-  send_msg: ({ action: string, payload: any }) => void;
+  send_msg: (args: { action: string; payload: any }) => void;
 }
 interface IState {
   anchorEl: HTMLElement;

src/plugin.ts

@@ -1,9 +1,10 @@
 // Copyright (c) Trung Le
 // Distributed under the terms of the Modified BSD License.
 
-import { Application, IPlugin } from '@phosphor/application';
-
-import { Widget } from '@phosphor/widgets';
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin,
+} from '@jupyterlab/application';
 
 import { IJupyterWidgetRegistry } from '@jupyter-widgets/base';
 
@@ -13,20 +14,20 @@ import { MODULE_NAME, MODULE_VERSION } from './version';
 
 const EXTENSION_ID = 'ipyflex:plugin';
 
-const examplePlugin: IPlugin<Application<Widget>, void> = {
+const examplePlugin: JupyterFrontEndPlugin<void> = {
   id: EXTENSION_ID,
   requires: [IJupyterWidgetRegistry],
   activate: activateWidgetExtension,
   autoStart: true,
-} as unknown as IPlugin<Application<Widget>, void>;
+};
 
 export default examplePlugin;
 
 /**
  * Activate the widget extension.
  */
 function activateWidgetExtension(
-  app: Application<Widget>,
+  app: JupyterFrontEnd,
   registry: IJupyterWidgetRegistry
 ): void {
   registry.registerWidget({

src/reactWidget.tsx

@@ -23,7 +23,7 @@ import { CommandRegistry } from '@lumino/commands';
 import { uuid } from '@jupyter-widgets/base';
 
 interface IProps {
-  send_msg: ({ action: string, payload: any }) => void;
+  send_msg: (args: { action: string; payload: any }) => void;
   model: any;
   style: IDict;
   editable: boolean;

ui-tests/playwright.config.js

@@ -3,7 +3,7 @@ var baseConfig = require('@jupyterlab/galata/lib/playwright-config');
 module.exports = {
   ...baseConfig,
   expect: {
-    toMatchSnapshot: { threshold: 0.33 },
+    toMatchSnapshot: { threshold: 0.03 },
   },
   preserveOutput: 'failures-only', 
   retries: 0