diff --git a/pyscriptjs/public/bokeh.html b/pyscriptjs/public/bokeh.html index 4cb70ee..92e7526 100644 --- a/pyscriptjs/public/bokeh.html +++ b/pyscriptjs/public/bokeh.html @@ -19,23 +19,20 @@ - bokeh - numpy -- pandas

Bokeh Example

- + +import json +import pyodide + +from js import Bokeh, console, JSON + +from bokeh.embed import json_item from bokeh.plotting import figure from bokeh.resources import CDN -import json -from bokeh.embed import json_item -from js import Bokeh - - -from bokeh.io import output_notebook, show -from bokeh.plotting import figure -import bokeh.sampledata # create a new plot with default tools, using figure p = figure(plot_width=400, plot_height=400) @@ -43,17 +40,13 @@ p = figure(plot_width=400, plot_height=400) # add a circle renderer with x and y coordinates, size, color, and alpha p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5) p_json = json.dumps(json_item(p, "myplot")) -print(p_json) -async def show(item): - print("about to embed") - Bokeh.embed.embed_item(item) - print ("Done embedding...") +print("about to embed") -pyscript.run_until_complete(show(p_json)) -#show(p) # show the results +Bokeh.embed.embed_item(JSON.parse(p_json)) +print ("Done embedding...") - \ No newline at end of file + diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index c98e357..fa4290d 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -22,7 +22,7 @@ iconSize = 2; } - const initializePyodide = () =>{ + const initializePyodide = async () =>{ // @ts-ignore pyodideReadyPromise = loadInterpreter(); // @ts-ignore @@ -44,7 +44,7 @@ // now we call all initializers before we actually executed all page scripts for (let initializer of $initializers){ - initializer(); + await initializer(); } // now we can actually execute the page scripts if we are in play mode diff --git a/pyscriptjs/src/components/pyenv.ts b/pyscriptjs/src/components/pyenv.ts index 91b203c..e12d6f5 100644 --- a/pyscriptjs/src/components/pyenv.ts +++ b/pyscriptjs/src/components/pyenv.ts @@ -1,6 +1,6 @@ import * as jsyaml from 'js-yaml'; -import { pyodideLoaded, loadedEnvironments, mode, addPostInitializer } from '../stores'; +import { pyodideLoaded, loadedEnvironments, mode, addInitializer } from '../stores'; import { loadPackage } from '../interpreter'; // Premise used to connect to the first available pyodide interpreter @@ -11,8 +11,9 @@ let currentMode; pyodideLoaded.subscribe(value => { pyodideReadyPromise = value; }); + loadedEnvironments.subscribe(value => { - environments = value; + environments = value; }); mode.subscribe(value => { @@ -20,30 +21,29 @@ mode.subscribe(value => { }); export class PyEnv extends HTMLElement { - shadow: ShadowRoot; - wrapper: HTMLElement; - code: string; - environment: any; + shadow: ShadowRoot; + wrapper: HTMLElement; + code: string; + environment: any; - constructor() { - super(); + constructor() { + super(); - // attach shadow so we can preserve the element original innerHtml content - this.shadow = this.attachShadow({ mode: 'open'}); - this.wrapper = document.createElement('slot'); - } + this.shadow = this.attachShadow({ mode: 'open'}); + this.wrapper = document.createElement('slot'); + } - connectedCallback() { - this.code = this.innerHTML; - this.innerHTML = ''; - - let env = this.environment = jsyaml.load(this.code); - async function loadEnv(){ - let pyodide = await pyodideReadyPromise; - loadPackage(env, pyodide); - console.log("enviroment loaded") - } - addPostInitializer(loadEnv); - console.log("enviroment loading...") + connectedCallback() { + this.code = this.innerHTML; + this.innerHTML = ''; + + let env = this.environment = jsyaml.load(this.code); + async function loadEnv() { + let pyodide = await pyodideReadyPromise; + await loadPackage(env, pyodide); + console.log("enviroment loaded") } - } \ No newline at end of file + addInitializer(loadEnv); + console.log("enviroment loading...", env) + } +}