Build pyodide wheels and load from CDN (#3858)

holoviz · Sep 18, 2022 · 1a2be00 · 1a2be00
1 parent 11d5833
commit 1a2be00
Show file tree

Hide file tree

Showing 18 changed files with 141 additions and 71 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -52,11 +52,9 @@ jobs:
           conda install "pip<21.2.1"
           conda install -c pyviz "pyctdev>=0.5"
           doit ecosystem_setup
-      - name: build wheel for CDN
+      - name: build pyodide wheels for CDN
         run: |
-          PANEL_LITE=1 pip wheel . --no-build-isolation -w ./build
-          mkdir panel/dist/wheels/
-          cp build/panel-*-py3-none-any.whl panel/dist/wheels/
+          python ./scripts/build_pyodide_wheels.py
       - name: conda build
         run: doit package_build $CHANS_DEV $PKG_TEST_PYTHON --test-group=unit_deploy
       - name: npm setup

diff --git a/doc/user_guide/Overview.md b/doc/user_guide/Overview.md
@@ -165,6 +165,7 @@ The `pn.config` object allows setting various configuration variables, the confi
 > - `embed_load_path` (`PANEL_EMBED_LOAD_PATH`): Where to load json files for embedded state.
 > - `embed_save_path` (`PANEL_EMBED_SAVE_PATH`): Where to save json files for embedded state.
 > - `inline` (`PANEL_INLINE`): Whether to inline JS and CSS resources. If disabled, resources are loaded from CDN if one is available.
+> - `npm_cdn` (`PANEL_NPM_CDN`): The CDN to load NPM packages from if resources are served from CDN. Allows switching between 'https://unpkg.com' (default) and 'https://cdn.jsdelivr.net/npm' for most resources.
 
 ##### `pn.state`
 

diff --git a/panel/config.py b/panel/config.py
@@ -20,7 +20,6 @@
 )
 
 from .io.logging import panel_log_handler
-from .io.notebook import load_notebook
 from .io.state import state
 
 __version__ = str(param.version.Version(
@@ -193,6 +192,12 @@ class _config(_base_config):
         default='WARNING', objects=['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'],
         doc="Log level of Panel loggers")
 
+    _npm_cdn = param.Selector(default='https://unpkg.com',
+        objects=['https://unpkg.com', 'https://cdn.jsdelivr.net/npm'],  doc="""
+        The CDN to load NPM packages from if resources are served from
+        CDN. Allows switching between https://unpkg.com and
+        https://cdn.jsdelivr.net/npm for most resources.""")
+
     _nthreads = param.Integer(default=None, doc="""
         When set to a non-None value a thread pool will be started.
         Whenever an event arrives from the frontend it will be
@@ -232,7 +237,7 @@ class _config(_base_config):
         'admin_plugins', 'autoreload', 'comms', 'cookie_secret',
         'nthreads', 'oauth_provider', 'oauth_expiry', 'oauth_key',
         'oauth_secret', 'oauth_jwt_user', 'oauth_redirect_uri',
-        'oauth_encryption_key', 'oauth_extra_params',
+        'oauth_encryption_key', 'oauth_extra_params', 'npm_cdn'
     ]
 
     _truthy = ['True', 'true', '1', True, 1]
@@ -393,6 +398,10 @@ def log_level(self):
         log_level = os.environ.get('PANEL_LOG_LEVEL', self._log_level)
         return log_level.upper() if log_level else None
 
+    @property
+    def npm_cdn(self):
+        return os.environ.get('PANEL_NPM_CDN', _config._npm_cdn)
+
     @property
     def nthreads(self):
         nthreads = os.environ.get('PANEL_NUM_THREADS', self._nthreads)
@@ -581,6 +590,8 @@ def __call__(self, *args, **params):
         except Exception:
             return
 
+        from .io.notebook import load_notebook
+
         newly_loaded = [arg for arg in args if arg not in panel_extension._loaded_extensions]
         if loaded and newly_loaded:
             self.param.warning(

diff --git a/panel/io/convert.py b/panel/io/convert.py
@@ -39,9 +39,11 @@
 WEB_WORKER_TEMPLATE = _pn_env.get_template('pyodide_worker.js')
 
 PANEL_ROOT = pathlib.Path(__file__).parent.parent
+BOKEH_VERSION = '2.4.3'
 PY_VERSION = base_version(__version__)
 JS_VERSION = json.loads((PANEL_ROOT / 'package.json').read_text())['version']
-PANEL_CDN_WHL = f'https://unpkg.com/@holoviz/panel@{JS_VERSION}/dist/wheels/panel-{PY_VERSION}-py3-none-any.whl'
+PANEL_CDN_WHL = f'{config.npm_cdn}/@holoviz/panel@{JS_VERSION}/dist/wheels/panel-{PY_VERSION}-py3-none-any.whl'
+BOKEH_CDN_WHL = f'{config.npm_cdn}/@holoviz/panel@{JS_VERSION}/dist/wheels/bokeh-{BOKEH_VERSION}-py3-none-any.whl'
 PYODIDE_URL = 'https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js'
 PYSCRIPT_CSS = '<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />'
 PYSCRIPT_JS = '<script defer src="https://pyscript.net/latest/pyscript.js"></script>'
@@ -331,10 +333,12 @@ def script_to_html(
     # Environment
     if panel_version == 'auto':
         panel_req = PANEL_CDN_WHL
+        bokeh_req = BOKEH_CDN_WHL
     else:
         panel_req = f'panel=={panel_version}'
-    reqs = [panel_req] + [
-        req for req in requirements if req != 'panel'
+        bokeh_req = f'bokeh=={BOKEH_VERSION}'
+    reqs = [panel_req, bokeh_req] + [
+        req for req in requirements if req not in ('panel', 'bokeh')
     ]
 
     # Execution

diff --git a/panel/io/notifications.py b/panel/io/notifications.py
@@ -4,6 +4,7 @@
 
 import param
 
+from ..config import config
 from ..reactive import ReactiveHTML
 from ..util import classproperty
 from .datamodel import _DATA_MODELS, construct_data_model
@@ -129,7 +130,7 @@ class NotificationArea(NotificationAreaBase):
         },
     ])
 
-    __javascript_raw__ = ["https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"]
+    __javascript_raw__ = [f"{config.npm_cdn}/notyf@3/notyf.min.js"]
 
     @classproperty
     def __javascript__(cls):
@@ -144,7 +145,7 @@ def __js_skip__(cls):
     }
 
     __css_raw__ = [
-        "https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css",
+        f"{config.npm_cdn}/notyf@3/notyf.min.css",
         CSS_URLS['font-awesome']
     ]
 

diff --git a/panel/io/resources.py b/panel/io/resources.py
@@ -25,6 +25,7 @@
 from jinja2.loaders import FileSystemLoader
 from markupsafe import Markup
 
+from ..config import config
 from ..util import isurl, url_path
 from .state import state
 
@@ -59,19 +60,19 @@ def conffilter(value):
 ERROR_TEMPLATE = _env.get_template('error.html')
 DEFAULT_TITLE = "Panel Application"
 JS_RESOURCES = _env.get_template('js_resources.html')
-CDN_DIST = f"https://unpkg.com/@holoviz/panel@{js_version}/dist/"
+CDN_DIST = f"{config.npm_cdn}/@holoviz/panel@{js_version}/dist/"
 DOC_DIST = "https://panel.holoviz.org/_static/"
 LOCAL_DIST = "static/extensions/panel/"
 COMPONENT_PATH = "components/"
 
 CSS_URLS = {
     'font-awesome': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css',
-    'bootstrap4': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'
+    'bootstrap4': f'{config.npm_cdn}/[email protected]/dist/css/bootstrap.min.css'
 }
 
 JS_URLS = {
-    'jQuery': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js',
-    'bootstrap4': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'
+    'jQuery': f'{config.npm_cdn}/[email protected]/dist/jquery.slim.min.js',
+    'bootstrap4': f'{config.npm_cdn}/[email protected]/dist/js/bootstrap.bundle.min.js'
 }
 
 extension_dirs['panel'] = str(DIST_DIR)
@@ -318,8 +319,6 @@ def js_modules(self):
         from ..config import config
         modules = list(config.js_modules.values())
         self.extra_resources(modules, '__javascript_modules__')
-
-
         return modules
 
     @property
@@ -365,6 +364,9 @@ def __init__(self, **kwargs):
         self.js_modules = kwargs.pop("js_modules", js_modules)
         super().__init__(**kwargs)
 
+    def _replace_cdn(self, resources):
+        return [resource.replace('https://unpkg.com', config.npm_cdn) for resource in resources]
+
     @classmethod
     def from_bokeh(cls, bk_bundle):
         return cls(
@@ -377,6 +379,6 @@ def from_bokeh(cls, bk_bundle):
 
     def _render_js(self):
         return JS_RESOURCES.render(
-            js_raw=self.js_raw, js_files=self.js_files,
-            js_modules=self.js_modules, hashes=self.hashes
+            js_raw=self.js_raw, js_files=self._replace_cdn(self.js_files),
+            js_modules=self._replace_cdn(self.js_modules), hashes=self.hashes
         )
diff --git a/panel/layout/gridstack.py b/panel/layout/gridstack.py
@@ -5,6 +5,7 @@
 
 import param
 
+from ..config import config
 from ..io.resources import bundled_files
 from ..reactive import ReactiveHTML
 from ..util import classproperty
@@ -103,17 +104,17 @@ class GridStack(ReactiveHTML, GridSpec):
     }
 
     __css_raw__ = [
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css',
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.min.css'
+        f'{config.npm_cdn}/[email protected]/dist/gridstack.min.css',
+        f'{config.npm_cdn}/[email protected]/dist/gridstack-extra.min.css'
     ]
 
     __javascript_raw__ = [
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-h5.js'
+        f'{config.npm_cdn}/[email protected]/dist/gridstack-h5.js'
     ]
 
     __js_require__ = {
         'paths': {
-            'gridstack': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-h5'
+            'gridstack': f'{config.npm_cdn}/[email protected]/dist/gridstack-h5'
         },
         'exports': {
             'gridstack': 'GridStack'

diff --git a/panel/models/deckgl.py b/panel/models/deckgl.py
@@ -16,6 +16,7 @@
 )
 from bokeh.models import ColumnDataSource, HTMLBox
 
+from ..config import config
 from ..io.resources import bundled_files
 from ..util import classproperty
 
@@ -30,12 +31,12 @@ def __css__(cls):
         return bundled_files(cls, 'css')
 
     __javascript_raw__ = [
-        "https://unpkg.com/[email protected]/dist/h3-js.umd.js",
-        "https://cdn.jsdelivr.net/npm/[email protected]/dist.min.js",
-        "https://cdn.jsdelivr.net/npm/@deck.gl/[email protected]/dist.min.js",
-        "https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js",
-        "https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js",
-        "https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js",
+        f"{config.npm_cdn}/[email protected]/dist/h3-js.umd.js",
+        f"{config.npm_cdn}/[email protected]/dist.min.js",
+        f"{config.npm_cdn}/@deck.gl/[email protected]/dist.min.js",
+        f"{config.npm_cdn}/@loaders.gl/[email protected]/dist/dist.min.js",
+        f"{config.npm_cdn}/@loaders.gl/[email protected]/dist/dist.min.js",
+        f"{config.npm_cdn}/@loaders.gl/[email protected]/dist/dist.min.js",
         "https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js",
     ]
 
@@ -52,13 +53,13 @@ def __js_skip__(cls):
 
     __js_require__ = {
         'paths': OrderedDict([
-            ("h3", "https://unpkg.com/[email protected]/dist/h3-js.umd"),
-            ("deck-gl", "https://cdn.jsdelivr.net/npm/[email protected]/dist.min"),
-            ("deck-json", "https://cdn.jsdelivr.net/npm/@deck.gl/[email protected]/dist.min"),
-            ("loader-csv", "https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min"),
-            ("loader-json", "https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min"),
-            ("loader-tiles", "https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min"),
-            ("mapbox-gl", 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl.min'),
+            ("h3", f"{config.npm_cdn}/[email protected]/dist/h3-js.umd"),
+            ("deck-gl", f"{config.npm_cdn}/[email protected]/dist.min"),
+            ("deck-json", f"{config.npm_cdn}/@deck.gl/[email protected]/dist.min"),
+            ("loader-csv", f"{config.npm_cdn}/@loaders.gl/[email protected]/dist/dist.min"),
+            ("loader-json", f"{config.npm_cdn}/@loaders.gl/[email protected]/dist/dist.min"),
+            ("loader-tiles", f"{config.npm_cdn}/@loaders.gl/[email protected]/dist/dist.min"),
+            ("mapbox-gl", f"{config.npm_cdn}/[email protected]/dist/mapbox-gl.min"),
         ]),
         'exports': {"deck-gl": "deck", "mapbox-gl": "mapboxgl", "h3": "h3"},
         'shim': {

diff --git a/panel/models/echarts.py b/panel/models/echarts.py
@@ -6,6 +6,7 @@
 )
 from bokeh.models import LayoutDOM
 
+from ..config import config
 from ..io.resources import bundled_files
 from ..util import classproperty
 
@@ -17,8 +18,8 @@ class ECharts(LayoutDOM):
     """
 
     __javascript_raw__ = [
-        "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js",
-        "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"
+        f"{config.npm_cdn}/[email protected]/dist/echarts.min.js",
+        f"{config.npm_cdn}/[email protected]/dist/echarts-gl.min.js"
     ]
 
     @classproperty
@@ -33,8 +34,8 @@ def __js_skip__(cls):
 
     __js_require__ = {
         'paths': {
-            "echarts":  "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min",
-            "echarts-gl": "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"
+            "echarts":  f"{config.npm_cdn}/[email protected]/dist/echarts.min",
+            "echarts-gl": f"{config.npm_cdn}/[email protected]/dist/echarts-gl.min.js"
         },
         'exports': {}
     }

diff --git a/panel/models/json_editor.py b/panel/models/json_editor.py
@@ -7,6 +7,7 @@
 from bokeh.events import ModelEvent
 from bokeh.models import HTMLBox
 
+from ..config import config
 from ..io.resources import bundled_files
 from ..util import classproperty
 
@@ -40,15 +41,15 @@ class JSONEditor(HTMLBox):
     templates = List(Any)
 
     __javascript_raw__ = [
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/jsoneditor.min.js'
+        f"{config.npm_cdn}/[email protected]/dist/jsoneditor.min.js"
     ]
 
     __css_raw__ = [
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/jsoneditor.min.css'
+        f"{config.npm_cdn}/[email protected]/dist/jsoneditor.min.css"
     ]
 
     __resources__ = [
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/img/jsoneditor-icons.svg'
+        f"{config.npm_cdn}/[email protected]/dist/img/jsoneditor-icons.svg"
     ]
 
     @classproperty

diff --git a/panel/models/katex.py b/panel/models/katex.py
@@ -3,6 +3,8 @@
 """
 from bokeh.models import Markup
 
+from ..config import config
+
 
 class KaTeX(Markup):
     """
@@ -13,7 +15,7 @@ class KaTeX(Markup):
 
     __javascript__ = [
         "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
-        "https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
+        f"{config.npm_cdn}/[email protected]/dist/contrib/auto-render.min.js"
     ]
 
     __js_skip__ = {
@@ -23,7 +25,8 @@ class KaTeX(Markup):
 
     __js_require__ = {
         'paths': {
-            'katex': 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min',
-            'autoLoad': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min'},
+            'katex': "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min",
+            'autoLoad': f"{config.npm_cdn}/[email protected]/dist/contrib/auto-render.min"
+        },
         'exports': {'katex': 'katex', 'autoLoad': 'renderMathInElement'}
     }
diff --git a/panel/models/perspective.py b/panel/models/perspective.py
@@ -3,6 +3,8 @@
 )
 from bokeh.models import ColumnDataSource, HTMLBox
 
+from ..config import config
+
 
 class Perspective(HTMLBox):
 
@@ -38,10 +40,10 @@ class Perspective(HTMLBox):
 
     # pylint: disable=line-too-long
     __javascript__ = [
-        "https://unpkg.com/@finos/[email protected]/dist/umd/perspective.js",
-        "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer.js",
-        "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-datagrid.js",
-        "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-d3fc.js",
+        f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective.js",
+        f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective-viewer.js",
+        f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective-viewer-datagrid.js",
+        f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective-viewer-d3fc.js",
     ]
 
     __js_skip__ = {
@@ -50,10 +52,10 @@ class Perspective(HTMLBox):
 
     __js_require__ = {
         "paths": {
-            "perspective": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective",
-            "perspective-viewer": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer",
-            "perspective-viewer-datagrid": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-datagrid",
-            "perspective-viewer-d3fc": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-d3fc",
+            "perspective": f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective",
+            "perspective-viewer": f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective-viewer",
+            "perspective-viewer-datagrid": f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective-viewer-datagrid",
+            "perspective-viewer-d3fc": f"{config.npm_cdn}/@finos/[email protected]/dist/umd/perspective-viewer-d3fc",
         },
         "exports": {
             "perspective": "perspective",
@@ -63,4 +65,4 @@ class Perspective(HTMLBox):
         },
     }
 
-    __css__ = ["https://unpkg.com/@finos/[email protected]/dist/css/themes.css"]
+    __css__ = [f"{config.npm_cdn}/@finos/[email protected]/dist/css/themes.css"]