feat: convert Deepnote file to Jupyter on the frontend

.github/workflows/build.yml

@@ -29,11 +29,15 @@ jobs:
           set -eux
           jlpm
           jlpm run lint:check
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Test the extension
         run: |
           set -eux
           jlpm run test
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build the extension
         run: |
@@ -47,6 +51,8 @@ jobs:
           jupyter labextension list
           jupyter labextension list 2>&1 | grep -ie "jupyterlab-deepnote.*OK"
           python -m jupyterlab.browser_check
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Package the extension
         run: |
@@ -55,6 +61,8 @@ jobs:
           pip install build
           python -m build
           pip uninstall -y "jupyterlab_deepnote" jupyterlab
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload extension packages
         uses: actions/upload-artifact@v4

.github/workflows/check-release.yml

@@ -1,9 +1,9 @@
 name: Check Release
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
   pull_request:
-    branches: ["*"]
+    branches: ['*']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -15,13 +15,21 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Configure npm registry for GitHub Packages
+        run: |
+          echo "@deepnote:registry=https://npm.pkg.github.com" >> ~/.npmrc
+          echo "//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}" >> ~/.npmrc
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Base Setup
         uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
       - name: Check Release
         uses: jupyter-server/jupyter_releaser/.github/actions/check-release@v2
         with:
-
           token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload Distributions
         uses: actions/upload-artifact@v4

.yarnrc.yml

@@ -1 +1,6 @@
 nodeLinker: node-modules
+npmScopes:
+  deepnote:
+    npmRegistryServer: 'https://npm.pkg.github.com'
+    npmAlwaysAuth: true
+    npmAuthToken: '${GITHUB_TOKEN}'

README.md

@@ -72,6 +72,22 @@ Install `jupyterlab`. The extension package itself doesn’t depend on `jupyterl
 uv pip install jupyterlab
 ```
 
+**Configure Access to @deepnote/blocks Package**
+
+The `@deepnote/blocks` package is published on GitHub Packages. To install it, you'll need to authenticate with GitHub:
+
+1. Create a GitHub Personal Access Token (classic) with `read:packages` scope:
+   - Go to https://github.com/settings/tokens
+   - Click "Generate new token (classic)"
+   - Select the `read:packages` scope
+   - Generate and copy the token
+
+2. Set the `GITHUB_TOKEN` environment variable to ensure `jlpm` (which is a wrapper around Yarn) can download the `@deepnote/blocks` package from the GitHub package registry. You can set the variable in `.zshrc` or manually like:
+   ```shell
+   export GITHUB_TOKEN=your_token_here
+   ```
+   Replace `YOUR_TOKEN_HERE` with your actual token.
+
 Install the extension package in editable mode. It installs the package’s dependencies, too:
 
 ```shell

jupyterlab_deepnote/contents.py

@@ -2,63 +2,7 @@
 from jupyter_server.services.contents.filemanager import FileContentsManager
 from typing import cast
 
-import yaml
-from nbformat.v4 import new_notebook, new_code_cell, new_markdown_cell
-
-
-def yaml_to_ipynb(yaml_text: str):
-    """Convert Deepnote YAML into a minimal Jupyter nbformat v4 notebook."""
-    try:
-        data = yaml.safe_load(yaml_text)
-    except Exception:
-        return new_notebook(cells=[])
-
-    notebooks = (
-        data.get("project", {}).get("notebooks", []) if isinstance(data, dict) else []
-    )
-
-    if not notebooks:
-        return new_notebook(cells=[])
-
-    # Collect notebook names
-    notebook_names = [nb.get("name", "") for nb in notebooks]
-
-    # Build all_notebooks dict: name -> full nbformat notebook JSON
-    all_notebooks = {}
-    for nb in notebooks:
-        nb_blocks = nb.get("blocks", [])
-        nb_cells = []
-        for block in sorted(nb_blocks, key=lambda b: b.get("sortingKey", "")):
-            btype = block.get("type", "code")
-            content = block.get("content", "")
-            if btype == "code":
-                nb_cells.append(new_code_cell(content))
-            else:
-                nb_cells.append(new_markdown_cell(content))
-        # Use the notebook name as key
-        nb_name = nb.get("name", "")
-        all_notebooks[nb_name] = new_notebook(cells=nb_cells)
-
-    # Use first notebook's cells to render initially
-    nb0 = notebooks[0]
-    blocks = nb0.get("blocks", [])
-    cells = []
-    for block in sorted(blocks, key=lambda b: b.get("sortingKey", "")):
-        btype = block.get("type", "code")
-        content = block.get("content", "")
-        if btype == "code":
-            cells.append(new_code_cell(content))
-        else:
-            cells.append(new_markdown_cell(content))
-
-    metadata = {
-        "deepnote": {"notebook_names": notebook_names, "notebooks": all_notebooks}
-    }
-    return new_notebook(cells=cells, metadata=metadata)
-
-
-def yaml_to_ipynb_dummy(yaml_text: str) -> dict:
-    return {"nbformat": 4, "nbformat_minor": 5, "metadata": {}, "cells": []}
+from nbformat.v4 import new_notebook
 
 
 class DeepnoteContentsManager(FileContentsManager):
@@ -74,15 +18,13 @@ def get(self, path, content=True, type=None, format=None, require_hash=False):
             else:
                 yaml_text = cast(str, _content)
 
-            nb_node = yaml_to_ipynb(yaml_text)
-
             model = self._base_model(path)
             model["type"] = "notebook"
             model["format"] = "json"
-            model["content"] = nb_node
+            model["content"] = new_notebook(
+                cells=[], metadata={"deepnote": {"rawYamlString": yaml_text}}
+            )
             model["writable"] = False
-            self.mark_trusted_cells(nb_node, path)
-            self.validate_notebook_model(model, validation_error={})
 
             if require_hash:
                 # Accept 2- or 3-tuple; we only need the bytes

package.json

@@ -58,18 +58,23 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
+        "@deepnote/blocks": "^1.1.0",
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/coreutils": "^6.0.0",
         "@jupyterlab/notebook": "^4.4.7",
         "@jupyterlab/services": "^7.0.0",
         "@jupyterlab/settingregistry": "^4.0.0",
-        "@lumino/widgets": "^2.7.1"
+        "@lumino/widgets": "^2.7.1",
+        "lodash": "^4.17.21",
+        "yaml": "^2.8.1",
+        "zod": "^4.1.11"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",
         "@jupyterlab/testutils": "^4.0.0",
         "@types/jest": "^29.2.0",
         "@types/json-schema": "^7.0.11",
+        "@types/lodash": "^4.17.20",
         "@types/react": "^18.0.26",
         "@types/react-addons-linked-state-mixin": "^0.14.22",
         "@typescript-eslint/eslint-plugin": "^6.1.0",
@@ -141,19 +146,6 @@
             "@typescript-eslint"
         ],
         "rules": {
-            "@typescript-eslint/naming-convention": [
-                "error",
-                {
-                    "selector": "interface",
-                    "format": [
-                        "PascalCase"
-                    ],
-                    "custom": {
-                        "regex": "^I[A-Z]",
-                        "match": true
-                    }
-                }
-            ],
             "@typescript-eslint/no-unused-vars": [
                 "warn",
                 {

src/index.tsx → src/components/NotebookPicker.tsx

@@ -1,59 +1,9 @@
-import {
-  JupyterFrontEnd,
-  JupyterFrontEndPlugin
-} from '@jupyterlab/application';
 import React from 'react';
-import { IToolbarWidgetRegistry, ReactWidget } from '@jupyterlab/apputils';
-import {
-  INotebookWidgetFactory,
-  NotebookPanel,
-  NotebookWidgetFactory
-} from '@jupyterlab/notebook';
-import { Widget } from '@lumino/widgets';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { NotebookPanel } from '@jupyterlab/notebook';
 import { HTMLSelect } from '@jupyterlab/ui-components';
 
-const plugin: JupyterFrontEndPlugin<void> = {
-  id: 'jupyterlab-deepnote:plugin',
-  description: 'Open .deepnote files as notebooks.',
-  autoStart: true,
-  requires: [INotebookWidgetFactory, IToolbarWidgetRegistry],
-  activate: (
-    app: JupyterFrontEnd,
-    notebookWidgetFactory: NotebookWidgetFactory,
-    toolbarRegistry: IToolbarWidgetRegistry
-  ) => {
-    app.docRegistry.addFileType(
-      {
-        name: 'deepnote',
-        displayName: 'Deepnote Notebook',
-        extensions: ['.deepnote'],
-        mimeTypes: ['text/yaml', 'application/x-yaml'],
-        fileFormat: 'text',
-        contentType: 'file'
-      },
-      [notebookWidgetFactory.name]
-    );
-
-    app.docRegistry.setDefaultWidgetFactory(
-      'deepnote',
-      notebookWidgetFactory.name
-    );
-
-    toolbarRegistry.addFactory<NotebookPanel>(
-      notebookWidgetFactory.name,
-      'deepnote:switch-notebook',
-      panel => {
-        if (!panel.context.path.endsWith('.deepnote')) {
-          return new Widget(); // don’t render for .ipynb or others
-        }
-
-        return new NotebookPicker(panel);
-      }
-    );
-  }
-};
-
-class NotebookPicker extends ReactWidget {
+export class NotebookPicker extends ReactWidget {
   private selected: string | null = null;
 
   constructor(private panel: NotebookPanel) {
@@ -68,7 +18,7 @@ class NotebookPicker extends ReactWidget {
           ? metadataNames
           : [];
 
-      this.selected = names.length > 0 ? names[0] : null;
+      this.selected = names.length === 0 ? null : (names[0] ?? null);
       this.update();
     });
   }
@@ -115,7 +65,6 @@ class NotebookPicker extends ReactWidget {
 
     return (
       <HTMLSelect
-        id="deepnote-notebook-picker"
         value={this.selected ?? '-'}
         onChange={this.handleChange}
         onKeyDown={() => {}}
@@ -141,5 +90,3 @@ class NotebookPicker extends ReactWidget {
     );
   }
 }
-
-export default plugin;

src/convert-deepnote-block-to-jupyter-cell.ts

@@ -0,0 +1,44 @@
+import {
+  createMarkdown,
+  createPythonCode,
+  DeepnoteBlock
+} from '@deepnote/blocks';
+import _cloneDeep from 'lodash/cloneDeep';
+import { ICodeCell, IMarkdownCell } from '@jupyterlab/nbformat';
+import { convertDeepnoteBlockTypeToJupyter } from './convert-deepnote-block-type-to-jupyter';
+
+export function convertDeepnoteBlockToJupyterCell(block: DeepnoteBlock) {
+  const blockCopy = _cloneDeep(block);
+  const jupyterCellMetadata = { ...blockCopy.metadata, cell_id: blockCopy.id };
+  const jupyterCellType = convertDeepnoteBlockTypeToJupyter(blockCopy.type);
+
+  if (jupyterCellType === 'code') {
+    const blockOutputs = blockCopy.outputs ?? [];
+
+    if (Array.isArray(blockOutputs)) {
+      blockOutputs.forEach(output => {
+        delete output.truncated;
+      });
+    }
+
+    const source = createPythonCode(blockCopy);
+
+    const jupyterCell: ICodeCell = {
+      cell_type: 'code',
+      metadata: jupyterCellMetadata,
+      execution_count: blockCopy.executionCount ?? null,
+      outputs: blockOutputs,
+      source
+    };
+    return jupyterCell;
+  } else {
+    // Markdown cell
+    const source = createMarkdown(blockCopy);
+    const jupyterCell: IMarkdownCell = {
+      cell_type: 'markdown',
+      metadata: {},
+      source
+    };
+    return jupyterCell;
+  }
+}

src/convert-deepnote-block-type-to-jupyter.ts

@@ -0,0 +1,32 @@
+export function convertDeepnoteBlockTypeToJupyter(blockType: string) {
+  switch (blockType) {
+    case 'big-number':
+    case 'code':
+    case 'sql':
+    case 'notebook-function':
+    case 'input-text':
+    case 'input-checkbox':
+    case 'input-textarea':
+    case 'input-file':
+    case 'input-select':
+    case 'input-date-range':
+    case 'input-date':
+    case 'input-slider':
+    case 'visualization':
+      return 'code';
+
+    case 'markdown':
+    case 'text-cell-h1':
+    case 'text-cell-h3':
+    case 'text-cell-h2':
+    case 'text-cell-p':
+    case 'text-cell-bullet':
+    case 'text-cell-todo':
+    case 'text-cell-callout':
+    case 'image':
+    case 'button':
+    case 'separator':
+    default:
+      return 'markdown';
+  }
+}