Moar migration

Author: goanpeca

CLAUDE.md

@@ -1,13 +1,14 @@
 # CLAUDE.md
 
-Jupyter React UI - React components and utilities for building Jupyter-based applications.
+Jupyter React UI - Generic React components and utilities for building Jupyter-based applications.
 
 ## Architecture
 
 **IMPORTANT**: Dependency direction is `@datalayer/core` depends on `@datalayer/jupyter-react`. 
 - Core imports from jupyter-ui (NOT the other way around)
-- When migrating code, ensure jupyter-ui core is adapted so that it no longer depends on datalyer code.
+- When migrating code, ensure jupyter-ui core is adapted so that it no longer depends on datalayer code.
 - Backward compatibility does not need to be preserved when migrating things from `@datalayer/jupyter-react` to `@datalayer/core`
+- **Jupyter-ui is completely generic** - no Datalayer-specific functionality should remain
 
 ## Development Commands
 
@@ -18,12 +19,40 @@ Jupyter React UI - React components and utilities for building Jupyter-based app
 
 ## Key Components
 
-- Jupyter components: Cell, Console, Notebook, Terminal, Viewer
-- Service providers: ServiceManagerProvider, utility functions for creating ServiceManagers
-- State management: Zustand stores for component state
-- JupyterLab integration: Support for extensions and themes
+- **Jupyter components**: Cell, Console, Notebook, Terminal, Viewer (all generic)
+- **Service providers**: ServiceManagerProvider, ServiceManagerLess (generic implementations)
+- **State management**: JupyterReactState (generic Zustand store)
+- **Collaboration system**: Extensible plugin-based collaboration with built-in Jupyter provider
+- **JupyterLab integration**: Support for extensions and themes
+
+## Collaboration System
+
+**Plugin-based extensible architecture:**
+- `CollaborationProviderRegistry` - Global registry for collaboration providers
+- `ICollaborationProviderImpl` - Interface all providers must implement
+- `JupyterCollaborationProvider` - Built-in provider for Jupyter Lab/Server collaboration
+- Built-in providers auto-registered on import
+
+**Usage:**
+```typescript
+// Use built-in Jupyter collaboration
+<Notebook collaborative="jupyter" ... />
+
+// Extensions can register custom providers
+collaborationProviderRegistry.register('custom', new CustomProvider());
+<Notebook collaborative="custom" ... />
+```
 
 ## Migration Notes
 
-When migrating functionality:
-1. Core should import what it needs from jupyter-ui
+**Completed Migration (v1.0.7):**
+1. ✅ Removed all Datalayer-specific configuration from JupyterConfig
+2. ✅ Made JupyterReactState completely generic (no datalayerConfig)
+3. ✅ Moved DatalayerCollaboration to core package
+4. ✅ Created extensible collaboration system with plugin pattern
+5. ✅ Removed hardcoded collaboration logic from Notebook component
+
+**Extension Points:**
+- Core can extend JupyterReactState with DatalayerReactState
+- Core can register additional collaboration providers
+- Core can extend ServiceManagerLess with Datalayer-specific managers

packages/react/src/components/codemirror/CodeMirrorDatalayerEditor.tsx renamed to packages/react/src/components/codemirror/CodeMirrorEditor.tsx

@@ -16,7 +16,7 @@ import useOutputsStore from '../output/OutputState';
 import codeMirrorTheme from './CodeMirrorTheme';
 import CodeMirrorOutputToolbar from './CodeMirrorOutputToolbar';
 
-export const CodeMirrorDatalayerEditor = (props: {
+export const CodeMirrorEditor = (props: {
   code: string;
   codePre?: string;
   outputAdapter: OutputAdapter;
@@ -147,4 +147,4 @@ export const CodeMirrorDatalayerEditor = (props: {
   );
 };
 
-export default CodeMirrorDatalayerEditor;
+export default CodeMirrorEditor;

packages/react/src/components/codemirror/index.ts

@@ -4,6 +4,6 @@
  * MIT License
  */
 
-export * from './CodeMirrorDatalayerEditor';
+export * from './CodeMirrorEditor';
 export * from './CodeMirrorOutputToolbar';
 export * from './CodeMirrorTheme';

packages/react/src/components/notebook/Notebook.tsx

@@ -6,7 +6,6 @@
 
 import { YNotebook } from '@jupyter/ydoc';
 import { Cell, ICellModel } from '@jupyterlab/cells';
-import { URLExt } from '@jupyterlab/coreutils';
 import { createGlobalStyle } from 'styled-components';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { NotebookModel } from '@jupyterlab/notebook';
@@ -20,15 +19,17 @@ import { WebsocketProvider as YWebsocketProvider } from 'y-websocket';
 import { jupyterReactStore, KernelTransfer, OnSessionConnection, } from '../../state';
 import { newUuid, sleep } from '../../utils';
 import { asObservable, Lumino } from '../lumino';
-import { COLLABORATION_ROOM_URL_PATH, ICollaborationProvider, Kernel, Lite, requestJupyterCollaborationSession, useJupyter } from './../../jupyter';
+import { collaborationProviderRegistry, ICollaborationProvider, Kernel, Lite, useJupyter } from './../../jupyter';
+// Import to register built-in providers
+import './../../jupyter/collaboration/registerBuiltinProviders';
 import { CellMetadataEditor } from './cell/metadata';
 import { NotebookAdapter } from './NotebookAdapter';
 import { useNotebookStore } from './NotebookState';
 import { INotebookToolbarProps } from './toolbar';
 import { Loader } from '../utils';
 
 import './Notebook.css';
-import { DatalayerNotebookExtension } from './NotebookExtensions';
+import { NotebookExtension } from './NotebookExtensions';
 
 export type ExternalIPyWidgets = {
   name: string;
@@ -53,7 +54,7 @@ export type INotebookProps = {
   cellMetadataPanel?: boolean;
   cellSidebarMargin?: number;
   collaborative?: ICollaborationProvider;
-  extensions?: DatalayerNotebookExtension[];
+  extensions?: NotebookExtension[];
   height?: string;
   id: string;
   kernel?: Kernel;
@@ -285,32 +286,25 @@ export const Notebook = (props: INotebookProps) => {
       if (adapter?.notebookPanel && isMounted) {
         sharedModel = new YNotebook();
         const { ydoc, awareness } = sharedModel;
-        // Setup Collaboration.
-        if (collaborative == 'jupyter') {
-          const token =
-            jupyterReactStore.getState().jupyterConfig?.jupyterServerToken;
-          const session = await requestJupyterCollaborationSession('json', 'notebook', path!);
-          const documentURL = URLExt.join(
-            serviceManager?.serverSettings.wsUrl!,
-            COLLABORATION_ROOM_URL_PATH
-          );
-          const documentName = `${session.format}:${session.type}:${session.fileId}`;
-          provider = new YWebsocketProvider(documentURL, documentName, ydoc, {
-            disableBc: true,
-            params: {
-              sessionId: session.sessionId,
-              token: token!,
-            },
+        // Setup Collaboration using the provider registry.
+        try {
+          const token = jupyterReactStore.getState().jupyterConfig?.jupyterServerToken;
+          provider = await collaborationProviderRegistry.createProvider(collaborative!, {
+            ydoc,
             awareness,
+            path: path!,
+            serviceManager,
+            token,
           });
-        } else {
-          // Other collaboration types can be handled by extensions
-          console.warn(`Unsupported collaboration type: ${collaborative}`);
+        } catch (error) {
+          console.error(`Failed to create collaboration provider '${collaborative}':`, error);
+          return;
         }
+        
         if (provider) {
           provider.on('sync', onSync);
           provider.on('connection-close', onConnectionClose);
-          console.log('Collaboration is setup with websocket provider.');
+          console.log(`Collaboration is setup with '${collaborative}' provider.`);
           // Create a new model using the one synchronize with the collaboration document
           const model = new NotebookModel({
             collaborationEnabled: true,

packages/react/src/components/notebook/Notebook2.tsx

@@ -15,7 +15,7 @@ import { Box } from '@primer/react';
 import type { OnSessionConnection } from '../../state';
 import { Loader } from '../utils';
 import { useKernelId, useNotebookModel, Notebook2Base } from './Notebook2Base';
-import type { DatalayerNotebookExtension } from './NotebookExtensions';
+import type { NotebookExtension } from './NotebookExtensions';
 import type { INotebookToolbarProps } from './toolbar';
 
 import './Notebook.css';
@@ -48,7 +48,7 @@ export interface INotebook2Props {
   /**
    * Notebook extensions.
    */
-  extensions?: DatalayerNotebookExtension[];
+  extensions?: NotebookExtension[];
   /**
    * Notebook ID.
    */

packages/react/src/components/notebook/Notebook2Base.tsx

@@ -37,12 +37,12 @@ import type { OnSessionConnection } from '../../state';
 import { newUuid, remoteUserCursors } from '../../utils';
 import { Lumino } from '../lumino';
 import { Loader } from '../utils';
-import type { DatalayerNotebookExtension } from './NotebookExtensions';
+import type { NotebookExtension } from './NotebookExtensions';
 import { addNotebookCommands } from './NotebookCommands';
 
 const COMPLETER_TIMEOUT_MILLISECONDS = 1000;
 
-const DEFAULT_EXTENSIONS = new Array<DatalayerNotebookExtension>();
+const DEFAULT_EXTENSIONS = new Array<NotebookExtension>();
 
 const FALLBACK_NOTEBOOK_PATH = '.datalayer/ping.ipynb';
 
@@ -64,7 +64,7 @@ export interface INotebook2BaseProps {
   /**
    * Notebook extensions
    */
-  extensions?: DatalayerNotebookExtension[];
+  extensions?: NotebookExtension[];
   /**
    * Kernel ID to connect to
    */

packages/react/src/components/notebook/NotebookExtensions.ts

@@ -9,14 +9,14 @@ import { INotebookModel, NotebookPanel } from "@jupyterlab/notebook";
 import { CommandRegistry } from '@lumino/commands';
 import { NotebookAdapter } from './NotebookAdapter';
 
-export type IDatalayerNotebookExtensionProps = {
+export type INotebookExtensionProps = {
   notebookId: string;
   commands: CommandRegistry;
   panel: NotebookPanel;
   adapter?: NotebookAdapter;
 };
 
-export type DatalayerNotebookExtension = DocumentRegistry.IWidgetExtension<NotebookPanel,INotebookModel> & {
-  init(props: IDatalayerNotebookExtensionProps): void;
+export type NotebookExtension = DocumentRegistry.IWidgetExtension<NotebookPanel,INotebookModel> & {
+  init(props: INotebookExtensionProps): void;
   get component(): JSX.Element | null;
 };

packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx

@@ -15,7 +15,7 @@ import type { PanelLayout, Widget } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
 import { JupyterReactTheme } from '../../../../theme';
 import { CellSidebar, type ICellSidebarProps } from './CellSidebar';
-import { DatalayerNotebookExtension, IDatalayerNotebookExtensionProps } from '../../NotebookExtensions';
+import { NotebookExtension, INotebookExtensionProps } from '../../NotebookExtensions';
 
 class CellSidebarFactory implements IDisposable {
   private _isDisposed = false;
@@ -127,7 +127,7 @@ type ICellSidebarExtensionOptions = {
 /**
  * Cell sidebar extension for notebook panels.
  */
-export class CellSidebarExtension implements DatalayerNotebookExtension {
+export class CellSidebarExtension implements NotebookExtension {
   protected factory: React.JSXElementConstructor<ICellSidebarProps>;
   protected commands?: CommandRegistry;
   protected nbgrader?: boolean;
@@ -162,7 +162,7 @@ export class CellSidebarExtension implements DatalayerNotebookExtension {
     return sidebar;
   }
 
-  init(props: IDatalayerNotebookExtensionProps): void {
+  init(props: INotebookExtensionProps): void {
     this.commands = props.commands;
   }
 }

packages/react/src/components/output/Output.tsx

@@ -15,13 +15,13 @@ import { useJupyter } from '../../jupyter/JupyterContext';
 import { IExecutionPhaseOutput, Kernel } from '../../jupyter/kernel';
 import { newUuid } from '../../utils';
 import { KernelActionMenu, KernelProgressBar } from '../kernel';
-// import { CodeMirrorDatalayerEditor } from '../codemirror';
+// import { CodeMirrorEditor } from '../codemirror';
 import { OutputAdapter } from './OutputAdapter';
 import { OutputRenderer } from './OutputRenderer';
 import { useOutputsStore } from './OutputState';
 
 import './Output.css';
-import { CodeMirrorDatalayerEditor } from '../codemirror';
+import { CodeMirrorEditor } from '../codemirror';
 
 export type IOutputProps = {
   adapter?: OutputAdapter;
@@ -170,7 +170,7 @@ export const Output = (props: IOutputProps) => {
             },
           }}
         >
-            <CodeMirrorDatalayerEditor
+            <CodeMirrorEditor
               autoRun={autoRun}
               code={code}
               codePre={codePre}

packages/react/src/examples/extensions/celltoolbar/CellToolbar.tsx

@@ -6,16 +6,16 @@
 
 import { ReactWidget } from '@jupyterlab/apputils';
 import { CodeCell } from '@jupyterlab/cells';
-import { IDatalayerNotebookExtensionProps } from '../../../components';
+import { INotebookExtensionProps } from '../../../components';
 import { CellToolbarComponent } from './CellToolbarComponent';
 
 export const DATALAYER_CELL_TOOLBAR_CLASS = 'dla-CellToolbar-Container';
 
 export class CellToolbar extends ReactWidget {
   private _cell: CodeCell;
-  private _props: IDatalayerNotebookExtensionProps;
+  private _props: INotebookExtensionProps;
 
-  constructor(cell: CodeCell, props: IDatalayerNotebookExtensionProps) {
+  constructor(cell: CodeCell, props: INotebookExtensionProps) {
     super();
     this._cell = cell;
     this._props = props;