fix(labextension) + kernelTransfer (#327)

* fix: lab extension

* fix: lab extension

* lint

* chore: export codemirror

* fix: webpack federation

* chore: kernel transfer

* Automatic application of license header

* fix: sharedpackage

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: echarles

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "0.18.11",
+  "version": "0.18.12",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -264,6 +264,16 @@
     "extension": "./lib/jupyter/lab/plugin.js",
     "outputDir": "jupyter_react/labextension",
     "schemaDir": "schema",
+    "sharedPackages": {
+      "react": {
+        "bundled": false,
+        "singleton": true
+      },
+      "react-dom": {
+        "bundled": false,
+        "singleton": true
+      }
+    },
     "webpackConfig": "./webpack.lab-config.js"
   },
   "jupyter-releaser": {

packages/react/src/app/JupyterReact.tsx

@@ -12,8 +12,8 @@ import { ReactJsIcon, RingedPlanetIcon } from '@datalayer/icons-react';
 import { ServerConnection } from '@jupyterlab/services';
 import { JupyterReactTheme } from '../theme';
 import { requestAPI } from '../jupyter/JupyterHandlers';
-import AboutTab from './tabs/AboutTab';
-import ComponentsTab from './tabs/ComponentsTab';
+import { AboutTab } from './tabs/AboutTab';
+import { ComponentsTab } from './tabs/ComponentsTab';
 
 export type JupyterFrontEndProps = {
   app?: JupyterFrontEnd;
@@ -37,7 +37,7 @@ const JupyterReact = (props: JupyterFrontEndProps): JSX.Element => {
   return (
     <>
       <JupyterReactTheme loadJupyterLabCss={false}>
-        <Box mb={3}>
+        <Box mb={3} style={{minWidth: 200}}>
           <UnderlineNav aria-label="jupyter-react">
             <UnderlineNav.Item
               aria-current={tab === 1 ? "page" : undefined}

packages/react/src/app/tabs/AboutTab.tsx

@@ -12,7 +12,7 @@ type Props = {
   version: string;
 };
 
-const AboutTab = (props: Props): JSX.Element => {
+export const AboutTab = (props: Props): JSX.Element => {
   const { version } = props;
   const [egg, setEgg] = useState(false);
   return (

packages/react/src/app/tabs/ComponentsTab.tsx

@@ -7,13 +7,13 @@
 import { useState } from 'react';
 import { Box, NavList } from '@primer/react';
 import { JupyterFrontEndProps } from '../JupyterReact';
-import FileBrowserComponent from './components/FileBrowserComponent';
-// import CellComponent from './components/CellComponent';
-// import NotebookComponent from './components/NotebookComponent';
-import IPyWidgetsComponent from './components/IPyWidgetsComponent';
-import ViewerComponent from './components/ViewerComponent';
+import { FileBrowserComponent } from './components/FileBrowserComponent';
+import { CellComponent } from './components/CellComponent';
+import { NotebookComponent } from './components/NotebookComponent';
+import { IPyWidgetsComponent } from './components/IPyWidgetsComponent';
+import { ViewerComponent } from './components/ViewerComponent';
 
-const MainTab = (props: JupyterFrontEndProps) => {
+export const ComponentsTab = (props: JupyterFrontEndProps) => {
   const [nav, setNav] = useState(1);
   return (
     <>
@@ -60,16 +60,14 @@ const MainTab = (props: JupyterFrontEndProps) => {
         </Box>
         <Box ml={3} sx={{ width: '100%' }}>
             {nav === 1 && <FileBrowserComponent />}
-            {nav === 4 && <IPyWidgetsComponent />}
-            {nav === 5 && <ViewerComponent />}
-            {/*
             {nav === 2 && <CellComponent />}
             {nav === 3 && <NotebookComponent />}
-            */}
+            {nav === 4 && <IPyWidgetsComponent />}
+            {nav === 5 && <ViewerComponent />}
         </Box>
       </Box>
     </>
   );
 };
 
-export default MainTab;
+export default ComponentsTab;

packages/react/src/app/tabs/components/CellComponent.tsx

@@ -6,7 +6,7 @@
 
 import Cell from '../../../components/cell/Cell';
 
-const CellComponent = () => {
+export const CellComponent = () => {
   return (
     <>
       <Cell source="print('Hello 🪐 ⚛️ Jupyter React')" />

packages/react/src/app/tabs/components/FileBrowserComponent.tsx

@@ -7,7 +7,7 @@
 import { useJupyter } from './../../../jupyter/JupyterContext';
 import { FileBrowser } from '../../../components/filebrowser/FileBrowser';
 
-const FileBrowserComponent = () => {
+export const FileBrowserComponent = () => {
   const { serviceManager } = useJupyter();
   return (
     serviceManager

packages/react/src/app/tabs/components/IPyWidgetsComponent.tsx

@@ -4,14 +4,10 @@
  * MIT License
  */
 
-import OutputIPyWidgets from '../../../components/output/OutputIPyWidgets';
+import { OutputIPyWidgets}  from '../../../components/output';
+import { view, state } from './../../../examples/notebooks/OutputIPyWidgetsExample';
 
-import {
-  view,
-  state,
-} from './../../../examples/notebooks/OutputIPyWidgetsExample';
-
-const IPyWidgetsComponent = () => {
+export const IPyWidgetsComponent = () => {
   return (
     <>
       <OutputIPyWidgets view={view} state={state} />

packages/react/src/app/tabs/components/NotebookComponent.tsx

@@ -7,12 +7,13 @@
 import Notebook from '../../../components/notebook/Notebook';
 import CellSidebarNew from './../../../components/notebook/cell/sidebar/CellSidebarButton';
 
-import nbformat from './../../..//examples/notebooks/IPyWidgetsExample.ipynb.json';
+import nbformat from './../../..//examples/notebooks/NotebookExample1.ipynb.json';
 
-const NotebookComponent = () => {
+export const NotebookComponent = () => {
   return (
     <>
       <Notebook
+        startDefaultKernel={true}
         nbformat={nbformat}
         id="notebook-id"
         cellSidebarMargin={60}

packages/react/src/app/tabs/components/ViewerComponent.tsx

@@ -6,9 +6,9 @@
 
 import Viewer from '../../../components/viewer/Viewer';
 
-// import nbformat from '../../..//examples/notebooks/IPyWidgetsExample.ipynb.json';
+// import nbformat from '../../../examples/notebooks/IPyWidgetsExample.ipynb.json';
 
-const ViewerComponent = () => {
+export const ViewerComponent = () => {
   return (
     <>
       <Viewer

packages/react/src/components/cell/Cell.tsx

@@ -7,43 +7,50 @@
 import { useState, useEffect } from 'react';
 import { CodeCell, MarkdownCell } from '@jupyterlab/cells';
 import { Box } from '@primer/react';
-import { useJupyter } from './../../jupyter/JupyterContext';
+import { useJupyter } from './../../jupyter';
 import { newUuid } from '../../utils';
 import { Lumino } from '../lumino';
-import CellAdapter from './CellAdapter';
-import useCellsStore from './CellState';
+import { CellAdapter } from './CellAdapter';
+import { useCellsStore } from './CellState';
 
 export type ICellProps = {
   /**
-   * An id that can be provided to identify unique cell
+   * Whether to execute directly the code cell or not.
    */
-  id: string;
+  autoStart?: boolean;
   /**
-   * Cell type
+   * An id that can be provided to identify unique cell
    */
-  type: 'code' | 'markdown' | 'raw';
+  id: string;
   /**
    * Cell source
    */
   source?: string;
   /**
-   * Whether to execute directly the code cell or not.
+   * Whether to start the default kernel or not
    */
-  autoStart?: boolean;
+  startDefaultKernel?: boolean;
   /**
    * Whether to show the toolbar for cell or not
    */
   showToolbar?: boolean;
+  /**
+   * Cell type
+   */
+  type: 'code' | 'markdown' | 'raw';
 };
 
 export const Cell = (props: ICellProps) => {
   const {
     autoStart,
-    showToolbar=true,
+    showToolbar,
     source = '',
-    type='code',
+    startDefaultKernel,
+    type,
   } = props;
-  const { defaultKernel, serverSettings } = useJupyter();
+  const { defaultKernel, serverSettings } = useJupyter({
+    startDefaultKernel,
+  });
   const [id] = useState(props.id || newUuid());
   const [adapter, setAdapter] = useState<CellAdapter>();
   const cellsStore = useCellsStore();
@@ -155,8 +162,10 @@ export const Cell = (props: ICellProps) => {
 };
 
 Cell.defaultProps = {
-  source: '',
   autoStart: true,
+  showToolbar:true,
+  startDefaultKernel: true,
+  type: 'code',
 } as Partial<ICellProps>;
 
 export default Cell;