feat: add notebook module

.gitignore

@@ -94,3 +94,6 @@ iteration-plan.md
 tools/electron/app
 tools/electron/extensions
 tools/workspace
+
+# jupyter
+.ipynb_checkpoints

configs/ts/tsconfig.resolve.json

@@ -124,7 +124,9 @@
       "@opensumi/ide-design": ["../packages/design/src/index.ts"],
       "@opensumi/ide-design/lib/*": ["../packages/design/src/*"],
       "@opensumi/ide-ai-native": ["../packages/ai-native/src/index.ts"],
-      "@opensumi/ide-ai-native/lib/*": ["../packages/ai-native/src/*"]
+      "@opensumi/ide-ai-native/lib/*": ["../packages/ai-native/src/*"],
+      "@opensumi/notebook": ["../packages/notebook/src/index.ts"],
+      "@opensumi/notebook/lib/*": ["../packages/notebook/src/*"]
     }
   }
 }

package.json

@@ -1,71 +1,76 @@
 {
   "name": "@opensumi/core",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:opensumi/core.git"
+  },
   "license": "MIT",
+  "workspaces": [
+    "packages/*",
+    "tools/dev-tool",
+    "tools/playwright",
+    "tools/cli-engine"
+  ],
   "scripts": {
-    "preinstall": "node scripts/preinstall.js && husky install",
-    "clean": "rimraf \"./packages/*/lib\" && lerna run clean",
-    "check:dep": "tsx ./scripts/depcheck",
-    "init": "yarn run clean && yarn run build:all",
-    "start": "yarn run rebuild:node && cross-env HOST=127.0.0.1 WS_PATH=ws://127.0.0.1:8000 NODE_ENV=development tsx ./scripts/start",
-    "start:remote": "yarn run rebuild:node && cross-env NODE_ENV=development tsx ./scripts/start",
-    "start:electron": "cross-env NODE_ENV=development tsx ./scripts/start-electron",
-    "build:components": "cd packages/components && yarn run build:dist",
-    "start:lite": "cross-env NODE_ENV=development tsx ./scripts/start --script=start:lite",
-    "bundle:lite": "tsx ./scripts/start --script=bundle:lite",
-    "bundle:preview": "tsx ./scripts/start --script=bundle:preview",
-    "start:pty-service": "KTLOG_SHOW_DEBUG=1 npx tsx packages/terminal-next/src/node/pty.proxy.remote.exec.ts",
-    "create": "tsx ./scripts/create",
-    "add:node": "tsx ./scripts/add-node",
     "add:browser": "tsx ./scripts/add-browser",
+    "add:node": "tsx ./scripts/add-node",
     "build": "yarn run compile",
-    "build:all": "yarn run build && yarn run build:worker-host && yarn run build:ext-host && yarn run build:components && yarn build:monaco-worker",
-    "compile": "cross-env NODE_ENV=production tsx ./scripts/build",
-    "build:worker-host": "cd packages/extension && yarn run compile:worker",
-    "build:ext-host": "cd packages/extension && yarn run build:ext-host",
+    "build:all": "yarn run build && yarn run build:notebook && yarn run build:worker-host && yarn run build:ext-host && yarn run build:components && yarn build:monaco-worker",
     "build:cli-engine": "cd tools/cli-engine && yarn run build",
+    "build:components": "cd packages/components && yarn run build:dist",
+    "build:ext-host": "cd packages/extension && yarn run build:ext-host",
     "build:monaco-worker": "cd packages/monaco && yarn run build:worker",
-    "watch:ext-host": "cd packages/extension && yarn run watch:ext-host",
-    "watch:worker-host": "cd packages/extension && yarn run watch:worker",
-    "watch": "yarn run rebuild:node && cross-env NODE_ENV=production tsx ./scripts/watch",
-    "publish": "yarn run build:all && tsx ./scripts/publish",
-    "publish:snapshot": "yarn run publish --rollback --type=snapshot",
-    "publish:next": "yarn run publish --rollback --type=next",
-    "update-version": "tsx ./scripts/publish --versionOnly",
-    "update-disttag": "tsx ./scripts/dist-tag",
+    "build:notebook": "cd packages/notebook && yarn run build",
+    "build:worker-host": "cd packages/extension && yarn run compile:worker",
+    "bundle:lite": "tsx ./scripts/start --script=bundle:lite",
+    "bundle:preview": "tsx ./scripts/start --script=bundle:preview",
+    "changelog": "tsx -P scripts/tsconfig.scripts.json scripts/changelog/index.ts",
+    "changelog-old": "node scripts/changelog/index.js",
+    "check:dep": "tsx ./scripts/depcheck",
+    "ci": "yarn run init && yarn run test:cov",
+    "clean": "rimraf \"./packages/*/lib\" && lerna run clean",
+    "compile": "cross-env NODE_ENV=production tsx ./scripts/build",
+    "create": "tsx ./scripts/create",
+    "download-extension": "cross-env DEBUG=InstallExtension MARKETPLACE=openvsx node scripts/download.js",
+    "format": "yarn run lint:fix && prettier \"**/*.{js,jsx,ts,tsx,html,css,less}\" --write",
+    "init": "yarn run clean && yarn run build:all",
+    "preinstall": "node scripts/preinstall.js && husky install",
+    "iteration": "tsx -P scripts/tsconfig.scripts.json scripts/iteration-plan.ts",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "yarn run lint --fix",
-    "format": "yarn run lint:fix && prettier \"**/*.{js,jsx,ts,tsx,html,css,less}\" --write",
+    "manifest": "tsx ./scripts/generate-manifest-json",
+    "prepare:test": "yarn && yarn run compile && yarn run build:worker-host",
+    "publish": "yarn run build:all && tsx ./scripts/publish",
+    "publish:next": "yarn run publish --rollback --type=next",
+    "publish:snapshot": "yarn run publish --rollback --type=snapshot",
     "rebuild:node": "sumi rebuild",
-    "test:module": "cross-env NODE_OPTIONS=--max-old-space-size=5120 tsx ./scripts/module-jest",
+    "start": "yarn run rebuild:node && cross-env HOST=127.0.0.1 WS_PATH=ws://127.0.0.1:8000 NODE_ENV=development tsx ./scripts/start",
     "start:e2e": "yarn start --script=start:e2e",
+    "start:electron": "cross-env NODE_ENV=development tsx ./scripts/start-electron",
+    "start:lite": "cross-env NODE_ENV=development tsx ./scripts/start --script=start:lite",
+    "start:pty-service": "KTLOG_SHOW_DEBUG=1 npx tsx packages/terminal-next/src/node/pty.proxy.remote.exec.ts",
+    "start:remote": "yarn run rebuild:node && cross-env NODE_ENV=development tsx ./scripts/start",
+    "start:umi": "yarn run rebuild:node && tsx ./scripts/start-umi",
+    "test": "node --expose-gc ./node_modules/.bin/jest --forceExit --detectOpenHandles",
+    "test:cov": "cross-env NODE_OPTIONS=--max-old-space-size=32768 yarn run test:heap --coverage",
+    "test:heap": "yarn test --logHeapUsage",
+    "test:module": "cross-env NODE_OPTIONS=--max-old-space-size=5120 tsx ./scripts/module-jest",
     "test:ui": "tsx ./scripts/run-ui-tests",
     "test:ui-ci": "tsx ./scripts/run-ui-tests --ci=true",
     "test:ui-headful": "tsx ./scripts/run-ui-tests --headful=true",
     "test:ui-report": "tsx ./scripts/run-ui-tests --report=true",
-    "test": "node --expose-gc ./node_modules/.bin/jest --forceExit --detectOpenHandles",
-    "test:heap": "yarn test --logHeapUsage",
-    "prepare:test": "yarn && yarn run compile && yarn run build:worker-host",
-    "test:cov": "cross-env NODE_OPTIONS=--max-old-space-size=32768 yarn run test:heap --coverage",
-    "ci": "yarn run init && yarn run test:cov",
-    "download-extension": "cross-env DEBUG=InstallExtension node scripts/download.js",
+    "update-disttag": "tsx ./scripts/dist-tag",
+    "update-version": "tsx ./scripts/publish --versionOnly",
     "update:iconfont": "tsx ./scripts/download-iconfont.ts",
-    "changelog-old": "node scripts/changelog/index.js",
-    "changelog": "tsx -P scripts/tsconfig.scripts.json scripts/changelog/index.ts",
-    "iteration": "tsx -P scripts/tsconfig.scripts.json scripts/iteration-plan.ts",
-    "manifest": "tsx ./scripts/generate-manifest-json"
-  },
-  "engines": {
-    "node": ">=18.12.0"
+    "watch": "yarn run rebuild:node && cross-env NODE_ENV=production tsx ./scripts/watch",
+    "watch:ext-host": "cd packages/extension && yarn run watch:ext-host",
+    "watch:worker-host": "cd packages/extension && yarn run watch:worker"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,md,html,css,less,json,yml}": "prettier --write",
     "*.{js,jsx,ts,tsx}": "eslint --fix --quiet"
   },
-  "repository": {
-    "type": "git",
-    "url": "[email protected]:opensumi/core.git"
-  },
   "devDependencies": {
     "@ast-grep/napi": "^0.17.1",
     "@commitlint/cli": "^19.2.1",
@@ -138,11 +143,8 @@
     "webpack": "^5.90.0",
     "webpack-manifest-plugin": "^5.0.0"
   },
-  "workspaces": [
-    "packages/*",
-    "tools/dev-tool",
-    "tools/playwright",
-    "tools/cli-engine"
-  ],
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=18.12.0"
+  }
 }

packages/components/src/menu/MenuItem.tsx

@@ -21,6 +21,7 @@ export interface MenuItemProps
   onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
   onMouseEnter?: (e: { key: string; domEvent: React.MouseEvent<HTMLElement> }) => void;
   onMouseLeave?: (e: { key: string; domEvent: React.MouseEvent<HTMLElement> }) => void;
+  ref?: React.Ref<HTMLElement> | undefined;
 }
 
 export default class MenuItem extends React.Component<MenuItemProps> {

packages/components/src/menu/SubMenu.tsx

@@ -19,6 +19,7 @@ export interface SubMenuProps extends RCSubMenuProps {
   onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
   popupOffset?: [number, number];
   popupClassName?: string;
+  ref?: React.Ref<HTMLLIElement> | undefined;
 }
 
 class SubMenu extends React.Component<SubMenuProps, any> {

packages/core-browser/src/bootstrap/app.view.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDom from 'react-dom/client';
 
 import { ComponentContextProvider, IIconResourceOptions } from '@opensumi/ide-components';
-import { IEventBus, URI, getDebugLogger, localize } from '@opensumi/ide-core-common';
+import { ContributionProvider, IEventBus, URI, getDebugLogger, localize } from '@opensumi/ide-core-common';
 
 import { IClientApp } from '../browser-module';
 import { DefaultLayout } from '../components/layout/default-layout';
@@ -12,6 +12,8 @@ import { allSlot } from '../react-providers/slot';
 import { LabelService } from '../services';
 import { getIcon } from '../style/icon/icon';
 
+import { ClientAppContextContribution } from './context-contribution';
+
 export interface AppProps {
   app: IClientApp;
   main: React.ComponentType<{ callback?: () => void }>;
@@ -67,7 +69,7 @@ const defaultAppRender =
   };
 
 export function renderClientApp(app: IClientApp, container: HTMLElement | IAppRenderer) {
-  const Layout = app.config.layoutComponent || DefaultLayout;
+  let Layout = app.config.layoutComponent || DefaultLayout;
   const overlayComponents = app.browserModules
     .filter((module) => module.isOverlay)
     .map((module) => {
@@ -78,6 +80,12 @@ export function renderClientApp(app: IClientApp, container: HTMLElement | IAppRe
       return module.component;
     });
 
+  const injector = app.injector;
+  const clientAppContextContribution: ContributionProvider<ClientAppContextContribution> =
+    injector.get(ClientAppContextContribution);
+  const contextContrib = clientAppContextContribution.getContributions();
+  contextContrib.forEach((contextProvider) => (Layout = contextProvider.registerClientAppContext(Layout, injector)));
+
   const IdeApp = (props) => <App {...props} app={app} main={Layout} overlays={overlayComponents} />;
 
   const render = typeof container === 'function' ? container : defaultAppRender(container);

packages/core-browser/src/bootstrap/context-contribution.tsx

@@ -0,0 +1,7 @@
+import { Injector } from '@opensumi/di';
+
+export const ClientAppContextContribution = Symbol('ClientAppContextContribution');
+
+export interface ClientAppContextContribution {
+  registerClientAppContext: (layout: React.FC, injector: Injector) => React.FC;
+}

packages/core-browser/src/bootstrap/index.ts

@@ -1,3 +1,4 @@
 export * from './app.interface';
 export * from './app.view';
 export * from './connection';
+export * from './context-contribution';

packages/core-browser/src/bootstrap/inner-providers.ts

@@ -80,6 +80,7 @@ import { VariableContribution, VariableRegistry, VariableRegistryImpl } from '..
 import { IWindowService } from '../window';
 import { WindowService } from '../window/window.service';
 
+import { ClientAppContextContribution } from './context-contribution';
 import { AppLifeCycleService } from './lifecycle.service';
 
 export function injectInnerProviders(injector: Injector) {
@@ -96,6 +97,7 @@ export function injectInnerProviders(injector: Injector) {
   createContributionProvider(injector, TabBarToolbarContribution);
   createContributionProvider(injector, ToolBarActionContribution);
   createContributionProvider(injector, StaticResourceContribution);
+  createContributionProvider(injector, ClientAppContextContribution);
 
   // 一些内置抽象实现
   const providers: Provider[] = [

packages/core-common/src/const/application.ts

@@ -10,4 +10,4 @@ export namespace DEFAULT_ALIPAY_CLOUD_REGISTRY {
   export const MASTER_KEY = 'i6rkupqyvC6Bc6CiO0yVLNqq';
 }
 
-export const DEFAULT_VSCODE_ENGINE_VERSION = '1.68.0';
+export const DEFAULT_VSCODE_ENGINE_VERSION = '1.90.0';

packages/notebook/.fatherrc.ts

@@ -0,0 +1,16 @@
+export default {
+  platform: 'browser',
+  cjs: {
+    output: 'lib',
+  },
+  extraBabelPlugins: [
+    // ['babel-plugin-transform-typescript-metadata'],
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-transform-flow-strip-types'],
+    ['@babel/plugin-transform-class-properties', { loose: true }],
+    ['@babel/plugin-transform-private-methods', { loose: true }],
+    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+    ['babel-plugin-parameter-decorator'],
+  ],
+  extraBabelPresets: [['@babel/preset-typescript']],
+};

packages/notebook/.gitignore

@@ -0,0 +1 @@
+es

packages/notebook/README.md

@@ -0,0 +1 @@
+# Notebook

packages/notebook/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@opensumi/ide-notebook",
+  "version": "3.2.3",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "worker"
+  ],
+  "scripts": {
+    "build": "rm -rf lib && rm -rf es && father build",
+    "postbuild": "npm run copy-files",
+    "copy-files": "copyfiles -u 1 src/**/**/*.less lib",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.6.4",
+    "@difizen/libro-jupyter": "^0.2.18",
+    "@difizen/libro-toc": "^0.2.18",
+    "@opensumi/ide-core-browser": "workspace:*",
+    "@opensumi/ide-core-common": "workspace:*",
+    "@opensumi/ide-editor": "workspace:*",
+    "@opensumi/ide-monaco": "workspace:*",
+    "@opensumi/ide-theme": "workspace:*",
+    "@opensumi/monaco-editor-core": "0.47.0-patch.15",
+    "antd": "^5.20.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-flow-strip-types": "^7.24.1",
+    "@babel/plugin-transform-private-methods": "^7.24.1",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@babel/runtime": "^7.24.1",
+    "babel-plugin-parameter-decorator": "^1.0.16",
+    "babel-plugin-transform-typescript-metadata": "^0.3.2",
+    "copyfiles": "^2.4.1",
+    "father": "^4.1.0"
+  }
+}

packages/notebook/src/browser/index.ts

@@ -0,0 +1,28 @@
+import { Injectable, Provider } from '@opensumi/di';
+import { BrowserModule } from '@opensumi/ide-core-browser';
+
+import { LibroCommandContribution } from './libro.command';
+import { LibroContribution } from './libro.contribution';
+import { ILibroOpensumiService, LibroOpensumiService } from './libro.service';
+import { LibroTracker } from './libro.view.tracker';
+import { TocContribution } from './toc/toc.contribution';
+export * from './kernel-panel';
+export * from './libro.color.tokens';
+export * from './libro.contribution';
+export * from './libro.protocol';
+export * from './libro.service';
+export * from './toc/index';
+
+@Injectable()
+export class NotebookModule extends BrowserModule {
+  providers: Provider[] = [
+    LibroContribution,
+    LibroCommandContribution,
+    TocContribution,
+    LibroTracker,
+    {
+      token: ILibroOpensumiService,
+      useClass: LibroOpensumiService,
+    },
+  ];
+}

packages/notebook/src/browser/kernel-panel/collapse/collapse-content.tsx

@@ -0,0 +1,51 @@
+import { CloseOutlined } from '@ant-design/icons';
+import React from 'react';
+
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { IMessageService } from '@opensumi/ide-overlay';
+
+import { LibroPanelCollapseItem, LibroPanelCollapseItemType } from '../kernel.panel.protocol';
+
+import { OpenedPage, RunningKernel } from './icon';
+
+export const getIcon = (type: LibroPanelCollapseItemType) => {
+  switch (type) {
+    case LibroPanelCollapseItemType.PAGE:
+      return <OpenedPage></OpenedPage>;
+    case LibroPanelCollapseItemType.KERNEL:
+      return <RunningKernel></RunningKernel>;
+  }
+};
+
+interface Props {
+  type: LibroPanelCollapseItemType;
+  items: LibroPanelCollapseItem[];
+}
+
+export const LibroCollapseContent: React.FC<Props> = (props: Props) => {
+  const messageService: IMessageService = useInjectable(IMessageService);
+  return (
+    <>
+      {props.items.map((item) => (
+        <div className='libro-panel-collapse-item' key={item.id}>
+          <div className='libro-panel-collapse-item-icon'>{getIcon(props.type)}</div>
+          <div className='libro-panel-collapse-item-label'>{item.name}</div>
+          <div
+            className='libro-panel-collapse-item-close'
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (item.shutdown) {
+                item.shutdown().catch((error) => {
+                  messageService.error(`shutdown ${props.type} failed: ${error}`);
+                });
+              }
+            }}
+          >
+            <CloseOutlined />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};