ui: add cordis

packages/ui-default/components/scratchpad/ScratchpadEditorContainer.tsx

@@ -2,6 +2,7 @@ import type * as monaco from 'monaco-editor';
 import React from 'react';
 import { connect } from 'react-redux';
 import { load } from 'vj/components/monaco/loader';
+import { ctx } from 'vj/context';
 
 interface ScratchpadOptions {
   value?: string;
@@ -59,7 +60,7 @@ export default connect((state: any) => ({
       );
       (window as any).editor = this.editor;
       (window as any).monaco = monaco;
-      window.Hydro.bus.emit('scratchpadEditorCreate', this.editor, monaco);
+      ctx.scratchpad.init(this.editor, monaco);
     }
   }
 

packages/ui-default/components/scratchpad/index.tsx

@@ -1,11 +1,13 @@
 import ProblemIcon from '@vscode/codicons/src/icons/file.svg?react';
 import $ from 'jquery';
 import _ from 'lodash';
+import type * as monaco from 'monaco-editor';
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 import SplitPane from 'react-split-pane';
 import Dom from 'vj/components/react/DomComponent';
 import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
+import { Context, ctx, Service } from 'vj/context';
 import ScratchpadEditor from './ScratchpadEditorContainer';
 import ScratchpadPretest from './ScratchpadPretestContainer';
 import ScratchpadRecords from './ScratchpadRecordsContainer';
@@ -40,23 +42,51 @@ const pages = {
 };
 
 let rerenderCallback = null;
-export function addPage(key, icon, component) {
-  pages[key] = {
-    icon,
-    component,
-  };
-  rerenderCallback?.();
+class ScratchpadService extends Service {
+  constructor(public store) {
+    super(ctx, 'scratchpad', true);
+    this.load = new Promise((resolve) => {
+      this.loadCallback = resolve;
+    });
+  }
+
+  pages = pages;
+  load: Promise<void>;
+  loadCallback: () => void;
+  editor: monaco.editor.IStandaloneCodeEditor;
+  monaco: typeof import('monaco-editor');
+
+  init(editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) {
+    this.editor = editor;
+    this.monaco = monaco;
+    this.loadCallback();
+  }
+
+  addPage(key, icon, component) {
+    pages[key] = {
+      icon,
+      component,
+    };
+    rerenderCallback?.();
+  }
+}
+Context.service('scratchpad', ScratchpadService);
+declare module '../../context' {
+  interface Context {
+    scratchpad: ScratchpadService;
+  }
 }
-window.Hydro.scratchpad = { addPage, pages };
 
 export default function ScratchpadContainer() {
-  const [, updateState] = React.useState();
+  const store = useStore();
+  ctx.scratchpad ||= new ScratchpadService(store);
+  const [, updateState] = React.useState<any>();
   const forceUpdate = React.useCallback(() => updateState({}), []);
   React.useEffect(() => {
     rerenderCallback = forceUpdate;
   }, []);
   const dispatch = useDispatch();
-  const ui = useSelector((state) => state.ui, _.isEqual);
+  const ui = useSelector<any, any>((state) => state.ui, _.isEqual);
 
   const handleChangeSize = _.debounce((uiElement, size) => {
     dispatch({