Integrate extension examples and add Extension Examples sidebar in Playground

.github/workflows/build.yml

@@ -13,6 +13,8 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@v4
+      with:
+        submodules: true
 
     - name: Base Setup
       uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
@@ -26,6 +28,11 @@ jobs:
         jlpm
         jlpm run lint:check
 
+    - name: Validate extension examples compile
+      run: |
+        set -eux
+        jlpm run check:extension-examples
+
     - name: Build the extension
       run: |
         set -eux

.gitignore

@@ -74,6 +74,7 @@ coverage.xml
 
 # Sphinx documentation
 docs/_build/
+docs/content/extension-examples/
 
 # PyBuilder
 target/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "extension-examples"]
+	path = extension-examples
+	url = https://github.com/jupyterlab/extension-examples.git

.prettierignore

@@ -4,4 +4,5 @@ node_modules
 **/package.json
 jupyterlab_plugin_playground
 src/modules.ts
-docs/content
+docs/content
+extension-examples

.readthedocs.yaml

@@ -8,5 +8,9 @@ build:
 conda:
   environment: docs/environment.yml
 
+submodules:
+  include: all
+  recursive: true
+
 sphinx:
    configuration: docs/conf.py

README.md

@@ -18,7 +18,17 @@ pip install jupyterlab-plugin-playground
 
 This extension provides a new command, `Load Current File As Extension`, available in the text editor.
 
-It also adds a right sidebar panel listing token string IDs you can use in plugin `requires` and `optional` arrays, with search, copy, and import actions.
+It also adds a single right sidebar panel with two collapsible sections:
+
+- **Service Tokens**: token string IDs you can use in plugin `requires` and `optional` arrays, with search, copy, and import actions.
+- **Extension Examples**: discovered examples from a local checkout of [`jupyterlab/extension-examples`](https://github.com/jupyterlab/extension-examples), so you can open them directly from the panel.
+
+If examples are missing:
+
+- For source checkouts: run `git submodule update --init --recursive`.
+- For PyPI installs: clone `https://github.com/jupyterlab/extension-examples` into an `extension-examples/` folder in your working directory.
+
+When reloading a plugin with the same `id`, the playground attempts to deactivate the previously loaded plugin first. Defining `deactivate()` in examples is recommended for clean reruns.
 
 As an example, open the text editor by creating a new text file and paste this small JupyterLab plugin into it. This plugin will create a simple command `My Super Cool Toggle` in the command palette that can be toggled on and off.
 

binder/postBuild

@@ -52,8 +52,27 @@ SETTINGS = Path(sys.prefix) / "share/jupyter/lab/settings"
 SETTINGS.mkdir(parents=True, exist_ok=True)
 shutil.copy2("binder/overrides.json", SETTINGS / "overrides.json")
 
-# download examples
-_("git", "clone", "https://github.com/jupyterlab/extension-examples.git")
+# ensure examples are available (from submodule checkout or fallback clone)
+EXAMPLES = ROOT / "extension-examples"
+if (EXAMPLES / "README.md").exists():
+    print("Using extension examples from repository checkout/submodule.")
+else:
+    if EXAMPLES.exists() and (ROOT / ".git").exists():
+        print("Attempting to initialize extension examples submodule.")
+        subprocess.call(
+            [
+                "git",
+                "submodule",
+                "update",
+                "--init",
+                "--recursive",
+                "extension-examples",
+            ]
+        )
+    if EXAMPLES.exists() and not (EXAMPLES / "README.md").exists():
+        shutil.rmtree(EXAMPLES)
+    if not EXAMPLES.exists():
+        _("git", "clone", "https://github.com/jupyterlab/extension-examples.git")
 
 print("JupyterLab with @jupyterlab/plugin-playground is ready to run with:\n")
 print("\tjupyter lab\n")

docs/conf.py

@@ -21,13 +21,89 @@
 html_css_files = ["custom.css"]
 
 
+def _ensure_extension_examples(root):
+    import subprocess
+
+    examples = root / "extension-examples"
+    if (examples / "README.md").exists():
+        return examples
+
+    if (root / ".git").exists():
+        try:
+            subprocess.check_call(
+                [
+                    "git",
+                    "submodule",
+                    "update",
+                    "--init",
+                    "--recursive",
+                    "extension-examples",
+                ],
+                cwd=str(root),
+            )
+        except subprocess.CalledProcessError as exc:
+            raise RuntimeError(
+                "Failed to initialize the 'extension-examples' submodule."
+            ) from exc
+
+        if (examples / "README.md").exists():
+            return examples
+
+        raise RuntimeError(
+            "Submodule update completed but 'extension-examples' was not found."
+        )
+
+    raise RuntimeError(
+        "Missing 'extension-examples'. Build from a git checkout with submodules "
+        "initialized."
+    )
+
+
+def _sync_examples_to_lite_contents(root):
+    import shutil
+
+    examples = _ensure_extension_examples(root)
+    lite_examples_root = root / "docs" / "content" / "extension-examples"
+    if lite_examples_root.exists():
+        shutil.rmtree(lite_examples_root)
+    lite_examples_root.mkdir(parents=True, exist_ok=True)
+
+    ignored = shutil.ignore_patterns(
+        ".git",
+        "node_modules",
+        "lib",
+        "dist",
+        ".ipynb_checkpoints",
+    )
+
+    copied_count = 0
+    for example_dir in sorted(examples.iterdir()):
+        if not example_dir.is_dir() or example_dir.name.startswith("."):
+            continue
+
+        src_dir = example_dir / "src"
+        if not ((src_dir / "index.ts").exists() or (src_dir / "index.js").exists()):
+            continue
+
+        shutil.copytree(
+            example_dir,
+            lite_examples_root / example_dir.name,
+            ignore=ignored,
+        )
+        copied_count += 1
+
+    print(f"Copied {copied_count} extension examples into docs/content for Lite.")
+
+
 def on_config_inited(*args):
     import sys
     import subprocess
     from pathlib import Path
 
     HERE = Path(__file__)
     ROOT = HERE.parent.parent
+    _sync_examples_to_lite_contents(ROOT)
+
     subprocess.check_call(["jlpm"], cwd=str(ROOT))
     subprocess.check_call(["jlpm", "build"], cwd=str(ROOT))
 

eslint.config.js

@@ -20,6 +20,7 @@ module.exports = [
       'src/modules.ts',
       'docs/content/**',
       'docs/_build/**',
+      'extension-examples/**',
       'ui-tests/test-results/**'
     ]
   },

package.json

@@ -43,6 +43,7 @@
     "eslint:check": "eslint . --cache",
     "lint": "jlpm prettier && jlpm eslint",
     "lint:check": "jlpm prettier:check && jlpm eslint:check",
+    "check:extension-examples": "node scripts/check-extension-examples.js",
     "prettier": "jlpm prettier:base --write --list-different",
     "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
     "prettier:check": "jlpm prettier:base --check",
@@ -65,6 +66,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.3",
+    "@jupyter-notebook/application": "^7.0.0",
     "@jupyter/collaborative-drive": "^4.2.1",
     "@jupyter/docprovider": "^4.1.1",
     "@jupyter/eslint-plugin": "^0.0.1",
@@ -97,6 +99,7 @@
     "@jupyterlab/tooltip": "^4.5.5",
     "@jupyterlab/workspaces": "^4.5.5",
     "@lumino/datagrid": "^2.0.0",
+    "@rjsf/utils": "^5.13.4",
     "@types/codemirror": "^5.6.20",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -108,7 +111,8 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.0",
     "rimraf": "^3.0.2",
-    "typescript": "~5.5.4"
+    "typescript": "~5.5.4",
+    "yjs": "^13.5.40"
   },
   "resolutions": {
     "globals": "13.24.0",