jupyterpack 0.5.3 → 0.5.5

package/README.md

@@ -7,7 +7,7 @@
 
 ## Features
 
-- **Python Web Apps**: Serve Python web applications directly in the browser using JupyterLite's in-browser Python kernel. `jupyterpack` currently supports Dash, Streamlit and Shiny for Python. You can also use `jupyterpack` to serve any `asgi` or `wsgi` Python web application.
+- **Python Web Apps**: Serve Python web applications directly in the browser using JupyterLite's in-browser Python kernel. `jupyterpack` currently supports Dash, Streamlit and Shiny for Python. You can also use `jupyterpack` to serve any `Starlette` or `Tornado` application.
   .
 - **JavaScript Web Apps**: Bundle and serve JavaScript web applications using in-browser bundlers.
 
@@ -25,6 +25,86 @@ pip install jupyterpack
 conda install -c conda-forge jupyterpack
 ```
 
+## Set up JupyterLite deployment
+
+`jupyterpack` currently supports only `xeus-python` kernel and does **not** support `pyodide-kernel`. You can refer to the `xeus-python` [official documentation](https://jupyterlite-xeus.readthedocs.io/en/stable/deploy.html) for the base setup of JupyterLite with `xeus-python` kernel.
+
+### Framework-specific setup
+
+At runtime, `jupyterpack` can automatically install the dependencies required by the supported frameworks.
+Alternatively, you can preinstall framework dependencies directly into your JupyterLite build. When dependencies are preinstalled, runtime installation can be skipped by setting `disableDependencies` to `true` in your `.spk` file.
+
+Below are example environment.yml files for each supported framework.
+
+- **Dash**
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - dash
+  - werkzeug>=2.2,<3.0
+  - blinker>=1.5.0,<2
+  - cachetools>=4.0,<7
+  - pip:
+      - pyodide_http
+```
+
+- **Streamlit**
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - blinker>=1.5.0,<2
+  - cachetools>=4.0,<7
+  - protobuf
+  - altair
+  - pyarrow
+  - pip:
+      - streamlit>=1.50.0
+      - pyodide_http
+```
+
+- **Shiny**
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - pip:
+      - shiny
+      - shinychat
+      - pyodide_http
+```
+
+- **Panel**
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - panel
+  - pip:
+      - pyodide_http
+```
+
 ## Usage
 
 To use `jupyterpack`, you need to create a `.spk` file that defines your web application. Here's an example structure of a React application:
@@ -126,7 +206,8 @@ interface IJupyterPackFileFormat {
   "dependencies": {
     "mamba": ["numpy", "pandas"],
     "pip": []
-  }
+  },
+  "disableDependencies": false
 }
 ```
 

package/lib/document/plugin.d.ts

@@ -1,3 +1,4 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import { IJupyterpackDocTracker } from '../type';
 export declare const spkPlugin: JupyterFrontEndPlugin<IJupyterpackDocTracker>;
+export declare const launcherPlugin: JupyterFrontEndPlugin<void>;

package/lib/document/plugin.js

@@ -1,8 +1,11 @@
-import { JupyterPackWidgetFactory } from './widgetFactory';
-import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
+import { JupyterPackFramework } from './../type';
 import { WidgetTracker } from '@jupyterlab/apputils';
-import { logoIcon } from '../tools';
+import { ILauncher } from '@jupyterlab/launcher';
+import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
+import { dashIcon, logoIcon, panelIcon, shinyIcon, streamlitIcon } from '../tools';
 import { addCommands } from './commands';
+import { JupyterPackWidgetFactory } from './widgetFactory';
+import { generateAppFiles } from './templates';
 const FACTORY = 'jupyterpack';
 const CONTENT_TYPE = 'jupyterpack';
 export const spkPlugin = {
@@ -47,3 +50,132 @@ export const spkPlugin = {
         return tracker;
     }
 };
+export const launcherPlugin = {
+    id: 'jupyterpack:spklauncher',
+    optional: [ILauncher],
+    autoStart: true,
+    provides: IJupyterpackDocTrackerToken,
+    activate: (app, launcher) => {
+        if (!launcher) {
+            return;
+        }
+        const { commands } = app;
+        const commandId = 'jupyterpack:create-new-file';
+        const dashCommandId = 'jupyterpack:create-dash-app';
+        const streamlitCommandId = 'jupyterpack:create-streamlit-app';
+        const shinyCommandId = 'jupyterpack:create-shiny-app';
+        const panelCommandId = 'jupyterpack:create-panel-app';
+        commands.addCommand(commandId, {
+            label: 'New SPK File',
+            icon: logoIcon,
+            caption: 'Create a new SPK fike',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                const contentsManager = app.serviceManager.contents;
+                let model = await contentsManager.newUntitled({
+                    path: cwd,
+                    type: 'file',
+                    ext: '.spk'
+                });
+                const spkContent = `
+{
+  "name": "${model.name}",
+  "entry": "",
+  "framework": "",
+  "rootUrl": "/",
+  "metadata": {
+    "autoreload": true
+  },
+  "dependencies": {
+    "mamba": [],
+    "pip": []
+  }
+}  
+`;
+                model = await contentsManager.save(model.path, {
+                    ...model,
+                    format: 'text',
+                    size: undefined,
+                    content: spkContent
+                });
+            }
+        });
+        commands.addCommand(dashCommandId, {
+            label: 'Dash App',
+            icon: dashIcon,
+            caption: 'Create a new Dash Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.DASH
+                });
+            }
+        });
+        commands.addCommand(streamlitCommandId, {
+            label: 'Streamlit App',
+            icon: streamlitIcon,
+            caption: 'Create a new Streamlit Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.STREAMLIT
+                });
+            }
+        });
+        commands.addCommand(shinyCommandId, {
+            label: 'Shiny App',
+            icon: shinyIcon,
+            caption: 'Create a new Shiny Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.SHINY
+                });
+            }
+        });
+        commands.addCommand(panelCommandId, {
+            label: 'Panel App',
+            icon: panelIcon,
+            caption: 'Create a new Panel Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.PANEL
+                });
+            }
+        });
+        launcher.add({
+            command: commandId,
+            category: 'JupyterPack',
+            rank: 1
+        });
+        launcher.add({
+            command: dashCommandId,
+            category: 'JupyterPack',
+            rank: 2
+        });
+        launcher.add({
+            command: streamlitCommandId,
+            category: 'JupyterPack',
+            rank: 3
+        });
+        launcher.add({
+            command: shinyCommandId,
+            category: 'JupyterPack',
+            rank: 4
+        });
+        launcher.add({
+            command: panelCommandId,
+            category: 'JupyterPack',
+            rank: 5
+        });
+    }
+};

package/lib/document/templates/dash.d.ts

@@ -0,0 +1 @@
+export declare const DASH_APP = "\n# This example is taken from the Dash official documentation (https://dash.plotly.com/layout)\n\nimport plotly.express as px\nimport pandas as pd\nfrom dash import Dash, html, dcc\napp = Dash()\n\n# assume you have a \"long-form\" data frame\n# see https://plotly.com/python/px-arguments/ for more options\ndf = pd.DataFrame({\n    \"Fruit\": [\"Apples\", \"Oranges\", \"Bananas\", \"Apples\", \"Oranges\", \"Bananas\"],\n    \"Amount\": [4, 1, 2, 2, 4, 5],\n    \"City\": [\"SF\", \"SF\", \"SF\", \"Montreal\", \"Montreal\", \"Montreal\"]\n})\n\nfig = px.bar(df, x=\"Fruit\", y=\"Amount\", color=\"City\", barmode=\"group\")\n\napp.layout = html.Div(children=[\n    html.H1(children='Hello Dash'),\n\n    html.Div(children='''\n        Dash: A web application framework for your data.\n    '''),\n\n    dcc.Graph(\n        id='example-graph',\n        figure=fig\n    )\n])";

package/lib/document/templates/dash.js

@@ -0,0 +1,30 @@
+export const DASH_APP = `
+# This example is taken from the Dash official documentation (https://dash.plotly.com/layout)
+
+import plotly.express as px
+import pandas as pd
+from dash import Dash, html, dcc
+app = Dash()
+
+# assume you have a "long-form" data frame
+# see https://plotly.com/python/px-arguments/ for more options
+df = pd.DataFrame({
+    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
+    "Amount": [4, 1, 2, 2, 4, 5],
+    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
+})
+
+fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
+
+app.layout = html.Div(children=[
+    html.H1(children='Hello Dash'),
+
+    html.Div(children='''
+        Dash: A web application framework for your data.
+    '''),
+
+    dcc.Graph(
+        id='example-graph',
+        figure=fig
+    )
+])`;

package/lib/document/templates/index.d.ts

@@ -0,0 +1,7 @@
+import { Contents } from '@jupyterlab/services';
+import { JupyterPackFramework } from '../../type';
+export declare function generateAppFiles(options: {
+    contentsManager: Contents.IManager;
+    framework: JupyterPackFramework;
+    cwd: string;
+}): Promise<void>;

package/lib/document/templates/index.js

@@ -0,0 +1,70 @@
+import { JupyterPackFramework } from '../../type';
+import { DASH_APP } from './dash';
+import { STREAMLIT_APP } from './streamlit';
+import { SHINY_APP } from './shiny';
+import { newDirectory } from '../../tools';
+import { PathExt } from '@jupyterlab/coreutils';
+import { PANEL_APP } from './panel';
+export async function generateAppFiles(options) {
+    const { contentsManager, framework, cwd } = options;
+    const newPath = await newDirectory({
+        dirName: `${framework} app`,
+        contentsManager,
+        cwd
+    });
+    let pyModel = await contentsManager.newUntitled({
+        path: newPath,
+        type: 'file',
+        ext: '.py'
+    });
+    let appContent = '';
+    switch (framework) {
+        case JupyterPackFramework.DASH: {
+            appContent = DASH_APP;
+            break;
+        }
+        case JupyterPackFramework.STREAMLIT: {
+            appContent = STREAMLIT_APP;
+            break;
+        }
+        case JupyterPackFramework.SHINY: {
+            appContent = SHINY_APP;
+            break;
+        }
+        case JupyterPackFramework.PANEL: {
+            appContent = PANEL_APP;
+            break;
+        }
+        default:
+            break;
+    }
+    await contentsManager.save(pyModel.path, {
+        ...pyModel,
+        format: 'text',
+        size: undefined,
+        content: appContent
+    });
+    pyModel = await contentsManager.rename(pyModel.path, PathExt.join(newPath, 'app.py'));
+    let model = await contentsManager.newUntitled({
+        path: newPath,
+        type: 'file',
+        ext: '.spk'
+    });
+    const spkContent = `
+{
+  "name": "entrypoint.spk",
+  "entry": "${pyModel.name}",
+  "framework": "${framework}",
+  "dependencies": {
+    "mamba": []
+  }
+}  
+`;
+    model = await contentsManager.save(model.path, {
+        ...model,
+        format: 'text',
+        size: undefined,
+        content: spkContent
+    });
+    await contentsManager.rename(model.path, PathExt.join(newPath, 'entrypoint.spk'));
+}

package/lib/document/templates/panel.d.ts

@@ -0,0 +1 @@
+export declare const PANEL_APP = "\n# This example is taken from the Panel official documentation (https://github.com/holoviz/panel?tab=readme-ov-file#interactive-data-apps)\n\nimport panel as pn\n\n\ndef model(n=5):\n    return \"\u2B50\" * n\n\n\npn.extension(template=\"fast\")\n\nslider = pn.widgets.IntSlider(value=5, start=1, end=5)\n\ninteractive_model = pn.bind(model, n=slider)\n\nlayout = pn.Column(slider, interactive_model).servable()\n";

package/lib/document/templates/panel.js

@@ -0,0 +1,18 @@
+export const PANEL_APP = `
+# This example is taken from the Panel official documentation (https://github.com/holoviz/panel?tab=readme-ov-file#interactive-data-apps)
+
+import panel as pn
+
+
+def model(n=5):
+    return "⭐" * n
+
+
+pn.extension(template="fast")
+
+slider = pn.widgets.IntSlider(value=5, start=1, end=5)
+
+interactive_model = pn.bind(model, n=slider)
+
+layout = pn.Column(slider, interactive_model).servable()
+`;

package/lib/document/templates/shiny.d.ts

@@ -0,0 +1 @@
+export declare const SHINY_APP = "\n# This example is taken from the shinylive official playground (https://shinylive.io/py/examples/#modules)\n\nfrom shiny import App, module, reactive, render, ui\n\n\n# ============================================================\n# Counter module\n# ============================================================\n@module.ui\ndef counter_ui(label: str = \"Increment counter\") -> ui.TagChild:\n    return ui.card(\n        ui.h2(\"This is \" + label),\n        ui.input_action_button(id=\"button\", label=label),\n        ui.output_code(id=\"out\"),\n    )\n\n\n@module.server\ndef counter_server(input, output, session, starting_value: int = 0):\n    count: reactive.value[int] = reactive.value(starting_value)\n\n    @reactive.effect\n    @reactive.event(input.button)\n    def _():\n        count.set(count() + 1)\n\n    @render.code\n    def out() -> str:\n        return f\"Click count is {count()}\"\n\n\n# =============================================================================\n# App that uses module\n# =============================================================================\napp_ui = ui.page_fluid(\n    counter_ui(\"counter1\", \"Counter 1\"),\n    counter_ui(\"counter2\", \"Counter 2\"),\n)\n\n\ndef server(input, output, session):\n    counter_server(\"counter1\")\n    counter_server(\"counter2\")\n\n\napp = App(app_ui, server)\n\n";

package/lib/document/templates/shiny.js

@@ -0,0 +1,49 @@
+export const SHINY_APP = `
+# This example is taken from the shinylive official playground (https://shinylive.io/py/examples/#modules)
+
+from shiny import App, module, reactive, render, ui
+
+
+# ============================================================
+# Counter module
+# ============================================================
+@module.ui
+def counter_ui(label: str = "Increment counter") -> ui.TagChild:
+    return ui.card(
+        ui.h2("This is " + label),
+        ui.input_action_button(id="button", label=label),
+        ui.output_code(id="out"),
+    )
+
+
+@module.server
+def counter_server(input, output, session, starting_value: int = 0):
+    count: reactive.value[int] = reactive.value(starting_value)
+
+    @reactive.effect
+    @reactive.event(input.button)
+    def _():
+        count.set(count() + 1)
+
+    @render.code
+    def out() -> str:
+        return f"Click count is {count()}"
+
+
+# =============================================================================
+# App that uses module
+# =============================================================================
+app_ui = ui.page_fluid(
+    counter_ui("counter1", "Counter 1"),
+    counter_ui("counter2", "Counter 2"),
+)
+
+
+def server(input, output, session):
+    counter_server("counter1")
+    counter_server("counter2")
+
+
+app = App(app_ui, server)
+
+`;

package/lib/document/templates/streamlit.d.ts

@@ -0,0 +1 @@
+export declare const STREAMLIT_APP = "\n# This example is taken from the streamlit official playground (https://streamlit.io/playground?example=charts)\n\nimport streamlit as st\nimport pandas as pd\nimport numpy as np\n\nst.write(\n    \"Streamlit supports a wide range of data visualizations, including [Plotly, Altair, and Bokeh charts](https://docs.streamlit.io/develop/api-reference/charts). \uD83D\uDCCA And with over 20 input widgets, you can easily make your data interactive!\"\n)\n\nall_users = [\"Alice\", \"Bob\", \"Charly\"]\nwith st.container(border=True):\n    users = st.multiselect(\"Users\", all_users, default=all_users)\n    rolling_average = st.toggle(\"Rolling average\")\n\nnp.random.seed(42)\ndata = pd.DataFrame(np.random.randn(20, len(users)), columns=users)\nif rolling_average:\n    data = data.rolling(7).mean().dropna()\n\ntab1, tab2 = st.tabs([\"Chart\", \"Dataframe\"])\ntab1.line_chart(data, height=250)\ntab2.dataframe(data, height=250, width=True)\n\n";

package/lib/document/templates/streamlit.js

@@ -0,0 +1,26 @@
+export const STREAMLIT_APP = `
+# This example is taken from the streamlit official playground (https://streamlit.io/playground?example=charts)
+
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+st.write(
+    "Streamlit supports a wide range of data visualizations, including [Plotly, Altair, and Bokeh charts](https://docs.streamlit.io/develop/api-reference/charts). 📊 And with over 20 input widgets, you can easily make your data interactive!"
+)
+
+all_users = ["Alice", "Bob", "Charly"]
+with st.container(border=True):
+    users = st.multiselect("Users", all_users, default=all_users)
+    rolling_average = st.toggle("Rolling average")
+
+np.random.seed(42)
+data = pd.DataFrame(np.random.randn(20, len(users)), columns=users)
+if rolling_average:
+    data = data.rolling(7).mean().dropna()
+
+tab1, tab2 = st.tabs(["Chart", "Dataframe"])
+tab1.line_chart(data, height=250)
+tab2.dataframe(data, height=250, width=True)
+
+`;

package/lib/document/widgetFactory.js

@@ -37,7 +37,8 @@ export class JupyterPackWidgetFactory extends ABCWidgetFactory {
                 case JupyterPackFramework.STREAMLIT:
                 case JupyterPackFramework.TORNADO:
                 case JupyterPackFramework.STARLETTE:
-                case JupyterPackFramework.SHINY: {
+                case JupyterPackFramework.SHINY:
+                case JupyterPackFramework.PANEL: {
                     const model = new PythonWidgetModel({
                         jpackModel,
                         context,

package/lib/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IJupyterpackDocTracker> | import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IConnectionManager>)[];
+declare const _default: (import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IJupyterpackDocTracker> | import("@jupyterlab/application").JupyterFrontEndPlugin<void> | import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IConnectionManager>)[];
 export default _default;

package/lib/index.js

@@ -1,3 +1,3 @@
-import { spkPlugin } from './document/plugin';
+import { launcherPlugin, spkPlugin } from './document/plugin';
 import { swPlugin } from './swConnection';
-export default [swPlugin, spkPlugin];
+export default [swPlugin, spkPlugin, launcherPlugin];

package/lib/pythonServer/baseServer.d.ts

@@ -23,11 +23,13 @@ export declare abstract class BasePythonServer implements IBasePythonServer {
         kernelId: string;
         wsUrl: string;
         protocol?: string;
+        broadcastChannelSuffix?: string;
     }): string;
     closeWebsocketFunctionFactory(options: {
         instanceId: string;
         kernelId: string;
         wsUrl: string;
+        broadcastChannelSuffix?: string;
     }): string;
     sendWebsocketMessageFunctionFactory(options: {
         instanceId: string;
@@ -40,11 +42,13 @@ export declare abstract class BasePythonServer implements IBasePythonServer {
         kernelId: string;
         wsUrl: string;
         protocol?: string;
+        broadcastChannelSuffix?: string;
     }): Promise<void>;
     closeWebsocket(options: {
         instanceId: string;
         kernelId: string;
         wsUrl: string;
+        broadcastChannelSuffix?: string;
     }): Promise<void>;
     sendWebsocketMessage(options: {
         instanceId: string;
@@ -70,6 +74,7 @@ export declare abstract class BasePythonServer implements IBasePythonServer {
         instanceId: string;
         kernelId: string;
         wsUrl: string;
+        broadcastChannelSuffix?: string;
     }[];
     protected readonly _server_var = "__jupyterpack_python_server";
     private _kernelExecutor;

package/lib/pythonServer/baseServer.js

@@ -35,7 +35,7 @@ export class BasePythonServer {
         await this._kernelExecutor.executeCode({ code: patchCode });
         if (!options.disableDependencies) {
             const { dependencies } = options;
-            if (dependencies === null || dependencies === void 0 ? void 0 : dependencies.mamba) {
+            if ((dependencies === null || dependencies === void 0 ? void 0 : dependencies.mamba) && dependencies.mamba.length > 0) {
                 const mambaDeps = `
       %mamba install ${dependencies.mamba.join(' ')}
       True
@@ -44,7 +44,7 @@ export class BasePythonServer {
                     code: mambaDeps
                 }, true);
             }
-            if (dependencies === null || dependencies === void 0 ? void 0 : dependencies.pip) {
+            if ((dependencies === null || dependencies === void 0 ? void 0 : dependencies.pip) && dependencies.pip.length > 0) {
                 const pipDeps = `
         %pip install ${dependencies.pip.join(' ')}
         True
@@ -69,13 +69,13 @@ export class BasePythonServer {
         return code;
     }
     openWebsocketFunctionFactory(options) {
-        const { instanceId, kernelId, wsUrl, protocol } = options;
-        const code = `await ${this._server_var}.open_ws("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(protocol)})`;
+        const { instanceId, kernelId, wsUrl, protocol, broadcastChannelSuffix } = options;
+        const code = `await ${this._server_var}.open_ws("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(protocol)}, ${stringOrNone(broadcastChannelSuffix)})`;
         return code;
     }
     closeWebsocketFunctionFactory(options) {
-        const { instanceId, kernelId, wsUrl } = options;
-        const code = `await ${this._server_var}.close_ws("${instanceId}", "${kernelId}", "${wsUrl}")`;
+        const { instanceId, kernelId, wsUrl, broadcastChannelSuffix } = options;
+        const code = `await ${this._server_var}.close_ws("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(broadcastChannelSuffix)})`;
         return code;
     }
     sendWebsocketMessageFunctionFactory(options) {

package/lib/pythonServer/index.js

@@ -1,5 +1,6 @@
 import { JupyterPackFramework } from '../type';
 import { DashServer } from './dash/dashServer';
+import { PanelServer } from './panel/panelServer';
 import { ShinyServer } from './shiny/shinyServer';
 import { StarletteServer } from './starlette/starletteServer';
 import { StreamlitServer } from './streamlit/streamlitServer';
@@ -9,5 +10,6 @@ export const PYTHON_SERVER = new Map([
     [JupyterPackFramework.STREAMLIT, StreamlitServer],
     [JupyterPackFramework.TORNADO, TornadoServer],
     [JupyterPackFramework.SHINY, ShinyServer],
-    [JupyterPackFramework.STARLETTE, StarletteServer]
+    [JupyterPackFramework.STARLETTE, StarletteServer],
+    [JupyterPackFramework.PANEL, PanelServer]
 ]);

package/lib/pythonServer/panel/deps.d.ts

@@ -0,0 +1,2 @@
+import { IDependencies } from '../../type';
+export declare const DEPENDENCIES: IDependencies;

package/lib/pythonServer/panel/deps.js

@@ -0,0 +1,4 @@
+export const DEPENDENCIES = {
+    mamba: ['panel'],
+    pip: []
+};

package/lib/pythonServer/panel/panelServer.d.ts

@@ -0,0 +1,9 @@
+import { IPythonServerInitOptions } from '../../type';
+import { BasePythonServer } from '../baseServer';
+export declare class PanelServer extends BasePythonServer {
+    init(options: IPythonServerInitOptions): Promise<void>;
+    reloadPythonServer(options: {
+        entryPath?: string;
+        initCode?: string;
+    }): Promise<void>;
+}

package/lib/pythonServer/panel/panelServer.js

@@ -0,0 +1,46 @@
+import { JupyterPackFramework } from '../../type';
+import { BasePythonServer } from '../baseServer';
+import { DEPENDENCIES } from './deps';
+export class PanelServer extends BasePythonServer {
+    async init(options) {
+        const mergedOptions = {
+            ...options,
+            dependencies: this.mergeDependencies(options.dependencies, DEPENDENCIES)
+        };
+        await super.init(mergedOptions);
+        const { instanceId, kernelClientId, entryPath } = options;
+        if (!entryPath) {
+            throw new Error('Missing Panel entry path, please check your SPK file');
+        }
+        const baseURL = this.buildBaseURL({
+            instanceId,
+            kernelClientId,
+            framework: JupyterPackFramework.PANEL
+        });
+        const patchCode = `
+      from jupyterpack.common import set_base_url_env, patch_tornado
+      patch_tornado()
+      set_base_url_env("${baseURL}")
+    `;
+        await this.kernelExecutor.executeCode({ code: patchCode });
+        const stCode = `
+      from jupyterpack.panel import PanelServer, patch_panel
+      patch_panel()
+      ${this._server_var} = PanelServer("${entryPath}", "${baseURL}")
+      `;
+        await this.kernelExecutor.executeCode({ code: stCode });
+    }
+    async reloadPythonServer(options) {
+        const { entryPath } = options;
+        if (!entryPath || !this._baseUrl) {
+            return;
+        }
+        const reloadCode = `
+      ${this._server_var}.dispose()
+      ${this._server_var}.reload("${entryPath}")
+      `;
+        await this.kernelExecutor.executeCode({
+            code: reloadCode
+        }, true);
+    }
+}