Make it possible and easy to pyscript editor with Panel

MarcSkovMadsen commented 1 month ago

I hope that one day it would be possible and easy to use pyscript editor with Panel for embedding on web pages etc.

Currently I cannot get it working.

Reproducible example

mini-coi.js

/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
/*! mini-coi - Andrea Giammarchi and contributors, licensed under MIT */
(({ document: d, navigator: { serviceWorker: s } }) => {
    if (d) {
      const { currentScript: c } = d;
      s.register(c.src, { scope: c.getAttribute('scope') || '.' }).then(r => {
        r.addEventListener('updatefound', () => location.reload());
        if (r.active && !s.controller) location.reload();
      });
    }
    else {
      addEventListener('install', () => skipWaiting());
      addEventListener('activate', e => e.waitUntil(clients.claim()));
      addEventListener('fetch', e => {
        const { request: r } = e;
        if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') return;
        e.respondWith(fetch(r).then(r => {
          const { body, status, statusText } = r;
          if (!status || status > 399) return r;
          const h = new Headers(r.headers);
          h.set('Cross-Origin-Opener-Policy', 'same-origin');
          h.set('Cross-Origin-Embedder-Policy', 'require-corp');
          h.set('Cross-Origin-Resource-Policy', 'cross-origin');
          return new Response(body, { status, statusText, headers: h });
        }));
      });
    }
  })(self);

config.toml

packages = [
    "https://cdn.holoviz.org/panel/1.4.4/dist/wheels/bokeh-3.4.1-py3-none-any.whl",
    "https://cdn.holoviz.org/panel/1.4.4/dist/wheels/panel-1.4.4-py3-none-any.whl"
]

script.html

<!DOCTYPE html>
<html>
  <head>
    <script src="./mini-coi.js" scope="./"></script>   
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>🦜 Panel Editor Template</title>
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.7.1/core.css">  
    <script type="module" src="https://pyscript.net/releases/2024.7.1/core.js"></script>
  </head>
  <body>
    <script type="py-editor" config="./config.toml">
        import panel as pn

        pn.extension(sizing_mode="stretch_width")

        slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')

        def callback(new):
           return f'Amplitude is: {new}'

        pn.Row(slider, pn.bind(callback, slider)).servable(target="out");
    </script>
    <div id="out"></div>
  </body>
</html>

At first I don't see any output in the web page or errors in the console.

After click the run button multiple times I see

Additional Context

I've tried without target="out". I've tried without .servable(target="out"). But I cannot get it to display the Panel app.

I would really like the version without .servable(target="out") to work as that would be the easiest code to explain to users.

MarcSkovMadsen commented 1 month ago

Just for info. Some related issues and feature requests that might be worth discussing too @philippjfr

MarcSkovMadsen commented 1 month ago

I will update the crosspost on pyscript. Please check that out https://github.com/pyscript/pyscript/issues/2118.

Forgot to add panel and bokeh .js. But then I get other error.

philippjfr commented 1 month ago

The problem is that you currently have to manually add Bokeh and Panel.js scripts.

MarcSkovMadsen commented 1 month ago

Thx. Have done that. See lots of investigating in PyScript crosspost mentioned above.

holoviz / panel

Make it possible and easy to pyscript editor with Panel #6991

Reproducible example

Additional Context