Ensure env is created before executing scripts

pyscriptjs/public/bokeh.html

@@ -19,23 +19,20 @@
         <py-env>
 - bokeh
 - numpy
-- pandas
         </py-env>
         <h1>Bokeh Example</h1>
         <div id="myplot"></div>
-        <py-repl></py-repl>
+        <py-repl id="my-repl"></py-repl>
     
     <py-script>
+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...")
     </py-script>
     
 </body>
-</html>
+</html>

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

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")
     }
-  }
+    addInitializer(loadEnv);
+    console.log("enviroment loading...", env)
+  }
+}