Ensure env is created before executing scripts

philippjfr · philippjfr · commit 60232bf91b6c · 2022-04-08T18:51:10.000+02:00
diff --git a/pyscriptjs/public/bokeh.html b/pyscriptjs/public/bokeh.html
@@ -19,41 +19,34 @@
         <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>
-from bokeh.plotting import figure
-from bokeh.resources import CDN
 import json
-from bokeh.embed import json_item
-from js import Bokeh
+import pyodide
 
+from js import Bokeh, console, JSON
 
-from bokeh.io import output_notebook, show
+from bokeh.embed import json_item
 from bokeh.plotting import figure
-import bokeh.sampledata
+from bokeh.resources import CDN
 
 # create a new plot with default tools, using figure
 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>
diff --git 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
@@ -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,39 +11,39 @@ let currentMode;
 pyodideLoaded.subscribe(value => {
   pyodideReadyPromise = value;
 });
+
 loadedEnvironments.subscribe(value => {
-    environments = value;
+  environments = value;
 });
 
 mode.subscribe(value => {
   currentMode = value;
 });
 
 export class PyEnv extends HTMLElement {
-    shadow: ShadowRoot;
-    wrapper: HTMLElement;
-    code: string;
-    environment: any;
-
-    constructor() {
-        super();
-
-        // attach shadow so we can preserve the element original innerHtml content
-        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...")
+  shadow: ShadowRoot;
+  wrapper: HTMLElement;
+  code: string;
+  environment: any;
+
+  constructor() {
+    super();
+
+    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;
+      await loadPackage(env, pyodide);
+      console.log("enviroment loaded")
     }
-  }
+    addInitializer(loadEnv);
+    console.log("enviroment loading...", env)
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`iconSize = 2;`
`23`	`23`	`}`
`24`	`24`
`25`		`- const initializePyodide = () =>{`
	`25`	`+ const initializePyodide = async () =>{`
`26`	`26`	`// @ts-ignore`
`27`	`27`	`pyodideReadyPromise = loadInterpreter();`
`28`	`28`	`// @ts-ignore`
`@@ -44,7 +44,7 @@`
`44`	`44`
`45`	`45`	`// now we call all initializers before we actually executed all page scripts`
`46`	`46`	`for (let initializer of $initializers){`
`47`		`- initializer();`
	`47`	`+ await initializer();`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`// now we can actually execute the page scripts if we are in play mode`