diff --git a/doc/how_to/wasm/convert.md b/doc/how_to/wasm/convert.md index f34beb3cc5..cbe1807cea 100644 --- a/doc/how_to/wasm/convert.md +++ b/doc/how_to/wasm/convert.md @@ -27,6 +27,7 @@ The ``panel convert`` command has the following options: This example will demonstrate how to *convert* and *serve* a basic data app locally. +- install the dependencies `pip install panel scikit-learn xgboost`. - Create a `script.py` file with the following content ```python @@ -88,7 +89,8 @@ Using the `--to` argument on the CLI you can control the format of the file that - **`pyodide`** (default): Run application using Pyodide running in the main thread. This option is less performant than pyodide-worker but produces completely standalone HTML files that do not have to be hosted on a static file server (e.g. Github Pages). - **`pyodide-worker`**: Generates an HTML file and a JS file containing a Web Worker that runs in a separate thread. This is the most performant option, but files have to be hosted on a static file server. -- **`pyscript`**: Generates an HTML leveraging PyScript. This produces standalone HTML files containing `` and `` tags containing the dependencies and the application code. This output is the most readable, and should have equivalent performance to the `pyodide` option. +- **`pyscript`**: Generates an HTML leveraging PyScript. This produces standalone HTML files containing ` @@ -44,7 +46,7 @@ To get started with Pyodide simply follow their [Getting started guide](https:// return f'Amplitude is: {new}' pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app'); - `); + `); } main(); @@ -64,44 +66,30 @@ const bk_whl = "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/boke const pn_whl = "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl" await micropip.install(bk_whl, pn_whl) ``` + ::: ### PyScript -PyScript makes it even easier to manage your dependencies, with a `` HTML tag. Simply include `panel` in the list of dependencies and PyScript will install it automatically: - -```html - -packages = [ - "panel", - ... -] - -``` - -Once installed you will be able to `import panel` in your `` tag. Again, make sure you also load Bokeh.js and Panel.js: +A basic, single file pyscript example looks like ```html + + - - + + - - packages = [ - "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl", - "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl" - ] -
- + ``` -The app should look identical to the one above but show a loading spinner while Pyodide is initializing. +The app should look identical to the one above. + +The [PyScript](https://docs.pyscript.net) documentation recommends you put your configuration and python code into separate files. You can find such examples in the [PyScript Examples Gallery](https://pyscript.com/@examples?q=panel). ## Rendering Panel components in Pyodide or Pyscript diff --git a/panel/io/convert.py b/panel/io/convert.py index c5f1480e8d..aac95542d6 100644 --- a/panel/io/convert.py +++ b/panel/io/convert.py @@ -41,8 +41,8 @@ PANEL_ROOT = pathlib.Path(__file__).parent.parent BOKEH_VERSION = base_version(bokeh.__version__) PY_VERSION = base_version(__version__) -PYODIDE_VERSION = 'v0.25.0' -PYSCRIPT_VERSION = '2024.2.1' +PYODIDE_VERSION = 'v0.26.2' +PYSCRIPT_VERSION = '2024.8.1' WHL_PATH = DIST_DIR / 'wheels' PANEL_LOCAL_WHL = WHL_PATH / f'panel-{__version__.replace("-dirty", "")}-py3-none-any.whl' BOKEH_LOCAL_WHL = WHL_PATH / f'bokeh-{BOKEH_VERSION}-py3-none-any.whl' @@ -272,7 +272,6 @@ def script_to_html( reqs = base_reqs + [ req for req in requirements if req not in ('panel', 'bokeh') ] - print(reqs) for name, min_version in MINIMUM_VERSIONS.items(): if any(name in req for req in reqs): reqs = [f'{name}>={min_version}' if name in req else req for req in reqs] @@ -290,12 +289,12 @@ def script_to_html( css_resources = [PYSCRIPT_CSS, PYSCRIPT_CSS_OVERRIDES] elif not css_resources: css_resources = [] - pyconfig = json.dumps({'packages': reqs, 'plugins': ["!error"]}) + pyconfig = json.dumps({'packages': reqs}) if 'worker' in runtime: plot_script = f'' web_worker = code else: - plot_script = f'{code}' + plot_script = f'' else: if css_resources == 'auto': css_resources = [] diff --git a/panel/io/pyodide.py b/panel/io/pyodide.py index 58dab86054..4cbbd4c6ca 100644 --- a/panel/io/pyodide.py +++ b/panel/io/pyodide.py @@ -343,7 +343,8 @@ def pysync(event): return json_patch, buffer_map = _process_document_events(doc, [event]) json_patch = pyodide.ffi.to_js(json_patch, dict_converter=_dict_converter) - dispatch_fn(json_patch, pyodide.ffi.to_js(buffer_map), msg_id) + buffers = js.Map.new(pyodide.ffi.to_js(buffer_map)) + dispatch_fn(json_patch, buffers, msg_id) doc.on_change(pysync) doc.unhold()