From 2dde43ec7d60377e04a3d48ab0bf0185d4ec26ac Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Fri, 6 May 2022 17:08:36 -0500
Subject: [PATCH 01/10] add PyLoader class

---
 pyscriptjs/src/components/pyloader.ts | 34 +++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 pyscriptjs/src/components/pyloader.ts

diff --git a/pyscriptjs/src/components/pyloader.ts b/pyscriptjs/src/components/pyloader.ts
new file mode 100644
index 00000000000..20258f03a67
--- /dev/null
+++ b/pyscriptjs/src/components/pyloader.ts
@@ -0,0 +1,34 @@
+import { BaseEvalElement } from './base';
+
+export class PyLoader extends BaseEvalElement {
+    shadow: ShadowRoot;
+    wrapper: HTMLElement;
+    theme: string;
+    widths: Array<string>;
+    label: string;
+    mount_name: string;
+    details: HTMLElement;
+    operation: HTMLElement;
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `<div id="pyscript_loading_splash" class="fixed top-0 left-0 right-0 bottom-0 w-full h-screen z-50 overflow-hidden bg-gray-600 opacity-75 flex flex-col items-center justify-center">
+        <span class="smooth spinner"></span>
+        <div id="pyscript-loading-label" class="label">
+          <p id="pyscript-operation">Loading..</p>
+          <div id="pyscript-operation-details">
+            <p>Smooth Spinner 3</p>
+          </div>
+        </div>
+      </div>`;
+        this.mount_name = this.id.split('-').join('_');
+        this.operation = document.getElementById('pyscript-operation');
+        this.details = document.getElementById('pyscript-operation-details');
+    }
+
+    close() {
+        this.remove();
+    }
+}

From 5266c994c086cf8321b87bb1989d2d1acb1e20e0 Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Fri, 6 May 2022 17:09:54 -0500
Subject: [PATCH 02/10] create global loader during app creation time and
 remove it when pyscript loading operations are done

---
 pyscriptjs/src/App.svelte | 42 ++++++++++++++++++++++++++++++++++++++-
 pyscriptjs/src/main.ts    |  8 ++++++++
 pyscriptjs/src/stores.ts  |  1 +
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
index 6fd83ba1641..62b5d897db8 100644
--- a/pyscriptjs/src/App.svelte
+++ b/pyscriptjs/src/App.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
     import Tailwind from './Tailwind.svelte';
     import { loadInterpreter } from './interpreter';
-    import { initializers, loadedEnvironments, mode, postInitializers, pyodideLoaded, scriptsQueue } from './stores';
+    import { initializers, loadedEnvironments, mode, postInitializers, pyodideLoaded, scriptsQueue, globalLoader } from './stores';
 
     let pyodideReadyPromise;
 
+    let loader;
+
+    globalLoader.subscribe(value => {
+        loader = value;
+    });
+
     const initializePyodide = async () => {
         pyodideReadyPromise = loadInterpreter();
         const pyodide = await pyodideReadyPromise;
@@ -38,10 +44,44 @@
             for (let initializer of $postInitializers) {
                 initializer();
             }
+            loader.remove();
         }, 3000);
     };
 </script>
 
+<style global>
+    .spinner::after {
+      content: '';
+      box-sizing: border-box;
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: calc(50% - 20px);
+      left: calc(50% - 20px);
+      border-radius: 50%;
+    }
+
+    .spinner.smooth::after {
+      border-top: 4px solid rgba(255, 255, 255, 1.0);
+      border-left: 4px solid rgba(255, 255, 255, 1.0);
+      border-right: 4px solid rgba(255, 255, 255, 0.0);
+      animation: spinner .6s linear infinite;
+    }
+    @keyframes spinner {
+      to {transform: rotate(360deg);}
+    }
+
+    .label {
+      text-align: center;
+      width: 100%;
+      display: block;
+      color: rgba(255, 255, 255, 0.8);
+      text-transform: uppercase;
+      font-size: 0.8rem;
+      margin-top: 6rem;
+    }
+  </style>
+
 <svelte:head>
     <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js" on:load={initializePyodide}></script>
 </svelte:head>
diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
index 9f8badf4415..5feaf671cf3 100644
--- a/pyscriptjs/src/main.ts
+++ b/pyscriptjs/src/main.ts
@@ -8,6 +8,8 @@ import { PyButton } from './components/pybutton';
 import { PyTitle } from './components/pytitle';
 import { PyInputBox } from './components/pyinputbox';
 import { PyWidget } from './components/base';
+import { PyLoader } from './components/pyloader';
+import { globalLoader } from './stores';
 
 const xPyScript = customElements.define('py-script', PyScript);
 const xPyRepl = customElements.define('py-repl', PyRepl);
@@ -17,6 +19,12 @@ const xPyButton = customElements.define('py-button', PyButton);
 const xPyTitle = customElements.define('py-title', PyTitle);
 const xPyInputBox = customElements.define('py-inputbox', PyInputBox);
 const xPyWidget = customElements.define('py-register-widget', PyWidget);
+const xPyLoader = customElements.define('py-loader', PyLoader);
+
+// add loader to the page body
+const loader = document.createElement('py-loader');
+document.body.append(loader);
+globalLoader.set(loader);
 
 const app = new App({
     target: document.body,
diff --git a/pyscriptjs/src/stores.ts b/pyscriptjs/src/stores.ts
index 094be993fbd..bafcb2cfff7 100644
--- a/pyscriptjs/src/stores.ts
+++ b/pyscriptjs/src/stores.ts
@@ -20,6 +20,7 @@ export const mode = writable(DEFAULT_MODE);
 export const scriptsQueue = writable<PyScript[]>([]);
 export const initializers = writable<Initializer[]>([]);
 export const postInitializers = writable<Initializer[]>([]);
+export const globalLoader = writable();
 
 let scriptsQueue_: PyScript[] = [];
 let initializers_: Initializer[] = [];

From a8e00c7a15d481807962da279f9cd60d259d5891 Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Sat, 7 May 2022 10:18:20 -0500
Subject: [PATCH 03/10] make the loader global and open/close when apps is
 starting. Also add concept of app config so users can set if they want to
 autoclose the loader of handle it themselves

---
 pyscriptjs/examples/simple_clock.html |  6 +++++-
 pyscriptjs/src/App.svelte             | 30 +++++++++++++++++++++++----
 pyscriptjs/src/components/pyloader.ts | 10 ++++++---
 pyscriptjs/src/main.ts                |  4 ++++
 pyscriptjs/src/stores.ts              |  1 +
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html
index 8077a73c0de..a76acbfbf37 100644
--- a/pyscriptjs/examples/simple_clock.html
+++ b/pyscriptjs/examples/simple_clock.html
@@ -14,6 +14,9 @@
     - paths:
       - ./utils.py
     </py-env>
+    <py-config>
+      - autoclose_loader: false
+    </py-config>
   </head>
 
   <body>
@@ -21,6 +24,7 @@
     <div id="outputDiv2" class="font-mono"></div>
     <div id="outputDiv3" class="font-mono"></div>
     <py-script output="outputDiv">
+pyscript_loader.log("HI")
 import utils
 utils.now()
     </py-script>
@@ -40,7 +44,7 @@
       out3.write("It's espresso time!")
     else:
       out3.clear()
-
+#pyscript_loader.close()
 pyscript.run_until_complete(foo())
     </py-script>
   </body>
diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
index 62b5d897db8..038871cad07 100644
--- a/pyscriptjs/src/App.svelte
+++ b/pyscriptjs/src/App.svelte
@@ -1,17 +1,29 @@
 <script lang="ts">
     import Tailwind from './Tailwind.svelte';
     import { loadInterpreter } from './interpreter';
-    import { initializers, loadedEnvironments, mode, postInitializers, pyodideLoaded, scriptsQueue, globalLoader } from './stores';
+    import type { AppConfig } from './components/pyconfig';
+    import { initializers, loadedEnvironments, mode, postInitializers, pyodideLoaded, scriptsQueue, globalLoader, appConfig } from './stores';
 
     let pyodideReadyPromise;
 
     let loader;
+    let appConfig_: AppConfig = {
+        autoclose_loader: true,
+    };
 
     globalLoader.subscribe(value => {
         loader = value;
     });
 
+    appConfig.subscribe( (value:AppConfig) => {
+        if (value){
+            appConfig_ = value;
+        }
+        console.log("config set!")
+    });
+
     const initializePyodide = async () => {
+        loader.log("Loading runtime...")
         pyodideReadyPromise = loadInterpreter();
         const pyodide = await pyodideReadyPromise;
         let newEnv = {
@@ -22,16 +34,22 @@
         };
         pyodideLoaded.set(pyodide);
 
+        // Inject the loader into the runtime namespace
+        pyodide.globals.set("pyscript_loader", loader);
+
+        loader.log("Runtime created...")
         loadedEnvironments.update((value: any): any => {
             value[newEnv['id']] = newEnv;
         });
 
         // now we call all initializers before we actually executed all page scripts
+        loader.log("Initializing components...")
         for (let initializer of $initializers) {
             await initializer();
         }
 
         // now we can actually execute the page scripts if we are in play mode
+        loader.log("Initializing scripts...")
         if ($mode == 'play') {
             for (let script of $scriptsQueue) {
                 script.evaluate();
@@ -40,11 +58,16 @@
         }
 
         // now we call all post initializers AFTER we actually executed all page scripts
+        loader.log("Running post initializers...")
+
+        if (appConfig_ && appConfig_.autoclose_loader) {
+            loader.remove();
+        }
+
         setTimeout(() => {
             for (let initializer of $postInitializers) {
                 initializer();
             }
-            loader.remove();
         }, 3000);
     };
 </script>
@@ -56,7 +79,7 @@
       width: 40px;
       height: 40px;
       position: absolute;
-      top: calc(50% - 20px);
+      top: calc(40% - 20px);
       left: calc(50% - 20px);
       border-radius: 50%;
     }
@@ -76,7 +99,6 @@
       width: 100%;
       display: block;
       color: rgba(255, 255, 255, 0.8);
-      text-transform: uppercase;
       font-size: 0.8rem;
       margin-top: 6rem;
     }
diff --git a/pyscriptjs/src/components/pyloader.ts b/pyscriptjs/src/components/pyloader.ts
index 20258f03a67..7fef7f62bcd 100644
--- a/pyscriptjs/src/components/pyloader.ts
+++ b/pyscriptjs/src/components/pyloader.ts
@@ -15,11 +15,9 @@ export class PyLoader extends BaseEvalElement {
 
     connectedCallback() {
         this.innerHTML = `<div id="pyscript_loading_splash" class="fixed top-0 left-0 right-0 bottom-0 w-full h-screen z-50 overflow-hidden bg-gray-600 opacity-75 flex flex-col items-center justify-center">
-        <span class="smooth spinner"></span>
+        <div class="smooth spinner"></div>
         <div id="pyscript-loading-label" class="label">
-          <p id="pyscript-operation">Loading..</p>
           <div id="pyscript-operation-details">
-            <p>Smooth Spinner 3</p>
           </div>
         </div>
       </div>`;
@@ -28,6 +26,12 @@ export class PyLoader extends BaseEvalElement {
         this.details = document.getElementById('pyscript-operation-details');
     }
 
+    log(msg: string){
+        const newLog = document.createElement('p');
+        newLog.innerText = msg;
+        this.details.appendChild(newLog);
+    }
+
     close() {
         this.remove();
     }
diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
index 5feaf671cf3..f43266fa15d 100644
--- a/pyscriptjs/src/main.ts
+++ b/pyscriptjs/src/main.ts
@@ -10,6 +10,8 @@ import { PyInputBox } from './components/pyinputbox';
 import { PyWidget } from './components/base';
 import { PyLoader } from './components/pyloader';
 import { globalLoader } from './stores';
+import { PyConfig } from './components/pyconfig';
+
 
 const xPyScript = customElements.define('py-script', PyScript);
 const xPyRepl = customElements.define('py-repl', PyRepl);
@@ -20,6 +22,8 @@ const xPyTitle = customElements.define('py-title', PyTitle);
 const xPyInputBox = customElements.define('py-inputbox', PyInputBox);
 const xPyWidget = customElements.define('py-register-widget', PyWidget);
 const xPyLoader = customElements.define('py-loader', PyLoader);
+const xPyConfig = customElements.define('py-config', PyConfig);
+
 
 // add loader to the page body
 const loader = document.createElement('py-loader');
diff --git a/pyscriptjs/src/stores.ts b/pyscriptjs/src/stores.ts
index bafcb2cfff7..b3c6cfbc341 100644
--- a/pyscriptjs/src/stores.ts
+++ b/pyscriptjs/src/stores.ts
@@ -21,6 +21,7 @@ export const scriptsQueue = writable<PyScript[]>([]);
 export const initializers = writable<Initializer[]>([]);
 export const postInitializers = writable<Initializer[]>([]);
 export const globalLoader = writable();
+export const appConfig = writable();
 
 let scriptsQueue_: PyScript[] = [];
 let initializers_: Initializer[] = [];

From 25da2ea648ed33e5a3e0b238b081028236101a26 Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Sat, 7 May 2022 10:18:49 -0500
Subject: [PATCH 04/10] add pyconfig file

---
 pyscriptjs/src/components/pyconfig.ts | 54 +++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 pyscriptjs/src/components/pyconfig.ts

diff --git a/pyscriptjs/src/components/pyconfig.ts b/pyscriptjs/src/components/pyconfig.ts
new file mode 100644
index 00000000000..97ae4bc5794
--- /dev/null
+++ b/pyscriptjs/src/components/pyconfig.ts
@@ -0,0 +1,54 @@
+import * as jsyaml from 'js-yaml';
+import { BaseEvalElement } from './base';
+import { appConfig } from '../stores';
+
+let appConfig_;
+
+appConfig.subscribe(value => {
+    appConfig_ = value;
+});
+
+export type AppConfig = {
+    autoclose_loader: boolean;
+    name?: string;
+    version?: string;
+  };
+
+export class PyConfig extends BaseEvalElement {
+    shadow: ShadowRoot;
+    wrapper: HTMLElement;
+    theme: string;
+    widths: Array<string>;
+    label: string;
+    mount_name: string;
+    details: HTMLElement;
+    operation: HTMLElement;
+    code: string;
+    values: AppConfig;
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.code = this.innerHTML;
+        this.innerHTML = '';
+
+        this.values = jsyaml.load(this.code);
+        if (this.values === undefined){
+            this.values = {
+                autoclose_loader: true,
+            };
+        }
+        appConfig.set(this.values);
+    }
+
+    log(msg: string){
+        const newLog = document.createElement('p');
+        newLog.innerText = msg;
+        this.details.appendChild(newLog);
+    }
+
+    close() {
+        this.remove();
+    }
+}

From 271024a41f23719f4c73262ae1237f03a110dd2b Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Sat, 7 May 2022 11:02:31 -0500
Subject: [PATCH 05/10] auto add global config if there's no config set in the
 page

---
 pyscriptjs/examples/simple_clock.html | 6 +++++-
 pyscriptjs/src/App.svelte             | 5 +++--
 pyscriptjs/src/components/pyconfig.ts | 1 +
 pyscriptjs/src/main.ts                | 8 +++++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html
index a76acbfbf37..bca755a6006 100644
--- a/pyscriptjs/examples/simple_clock.html
+++ b/pyscriptjs/examples/simple_clock.html
@@ -24,6 +24,8 @@
     <div id="outputDiv2" class="font-mono"></div>
     <div id="outputDiv3" class="font-mono"></div>
     <py-script output="outputDiv">
+# demonstrates how use the global PyScript pyscript_loader
+# to send operation log messages to it
 pyscript_loader.log("HI")
 import utils
 utils.now()
@@ -44,7 +46,9 @@
       out3.write("It's espresso time!")
     else:
       out3.clear()
-#pyscript_loader.close()
+
+# close the global PyScript pyscript_loader
+pyscript_loader.close()
 pyscript.run_until_complete(foo())
     </py-script>
   </body>
diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
index 038871cad07..91103533b31 100644
--- a/pyscriptjs/src/App.svelte
+++ b/pyscriptjs/src/App.svelte
@@ -58,10 +58,11 @@
         }
 
         // now we call all post initializers AFTER we actually executed all page scripts
-        loader.log("Running post initializers...")
+        loader.log("Running post initializers...");
 
         if (appConfig_ && appConfig_.autoclose_loader) {
-            loader.remove();
+            loader.close();
+            console.log("------ loader closed ------");
         }
 
         setTimeout(() => {
diff --git a/pyscriptjs/src/components/pyconfig.ts b/pyscriptjs/src/components/pyconfig.ts
index 97ae4bc5794..6b928d89152 100644
--- a/pyscriptjs/src/components/pyconfig.ts
+++ b/pyscriptjs/src/components/pyconfig.ts
@@ -40,6 +40,7 @@ export class PyConfig extends BaseEvalElement {
             };
         }
         appConfig.set(this.values);
+        console.log("config set", this.values);
     }
 
     log(msg: string){
diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
index f43266fa15d..d04778b6ffa 100644
--- a/pyscriptjs/src/main.ts
+++ b/pyscriptjs/src/main.ts
@@ -12,7 +12,6 @@ import { PyLoader } from './components/pyloader';
 import { globalLoader } from './stores';
 import { PyConfig } from './components/pyconfig';
 
-
 const xPyScript = customElements.define('py-script', PyScript);
 const xPyRepl = customElements.define('py-repl', PyRepl);
 const xPyEnv = customElements.define('py-env', PyEnv);
@@ -25,6 +24,13 @@ const xPyLoader = customElements.define('py-loader', PyLoader);
 const xPyConfig = customElements.define('py-config', PyConfig);
 
 
+// As first thing, loop for application configs
+const config = document.querySelector('py-config');
+if (!config){
+    const loader = document.createElement('py-config');
+    document.body.append(loader);
+}
+
 // add loader to the page body
 const loader = document.createElement('py-loader');
 document.body.append(loader);

From 48fed33d057d7e84790440e07ca0488579322ece Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Mon, 9 May 2022 19:13:05 -0500
Subject: [PATCH 06/10] export initializer type

---
 pyscriptjs/src/stores.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyscriptjs/src/stores.ts b/pyscriptjs/src/stores.ts
index b3c6cfbc341..065d2e96da4 100644
--- a/pyscriptjs/src/stores.ts
+++ b/pyscriptjs/src/stores.ts
@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 import type { PyScript } from './components/pyscript';
 
-type Initializer = () => Promise<void>;
+export type Initializer = () => Promise<void>;
 
 export const pyodideLoaded = writable({
     loaded: false,

From e5e6b7473d8b3c74ae9b4b29d9c332dbe4f6e61b Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Mon, 9 May 2022 19:13:51 -0500
Subject: [PATCH 07/10] define type for config

---
 pyscriptjs/src/main.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
index d04778b6ffa..21c6c9a82e0 100644
--- a/pyscriptjs/src/main.ts
+++ b/pyscriptjs/src/main.ts
@@ -23,9 +23,8 @@ const xPyWidget = customElements.define('py-register-widget', PyWidget);
 const xPyLoader = customElements.define('py-loader', PyLoader);
 const xPyConfig = customElements.define('py-config', PyConfig);
 
-
 // As first thing, loop for application configs
-const config = document.querySelector('py-config');
+const config: PyConfig = document.querySelector('py-config');
 if (!config){
     const loader = document.createElement('py-config');
     document.body.append(loader);

From b03e7a92b64a1757644171d5d026c96ed5434fa0 Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Mon, 9 May 2022 19:14:18 -0500
Subject: [PATCH 08/10] move initialization out of svelte file, into app config

---
 pyscriptjs/examples/simple_clock.html |   2 +
 pyscriptjs/src/App.svelte             |  75 --------------
 pyscriptjs/src/components/pyconfig.ts | 137 ++++++++++++++++++++++++--
 pyscriptjs/src/interpreter.ts         |   3 +-
 4 files changed, 134 insertions(+), 83 deletions(-)

diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html
index bca755a6006..4393ba3b989 100644
--- a/pyscriptjs/examples/simple_clock.html
+++ b/pyscriptjs/examples/simple_clock.html
@@ -16,6 +16,8 @@
     </py-env>
     <py-config>
       - autoclose_loader: false
+      - runtimes:
+        - "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
     </py-config>
   </head>
 
diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
index 91103533b31..b257500ec1c 100644
--- a/pyscriptjs/src/App.svelte
+++ b/pyscriptjs/src/App.svelte
@@ -1,76 +1,5 @@
 <script lang="ts">
     import Tailwind from './Tailwind.svelte';
-    import { loadInterpreter } from './interpreter';
-    import type { AppConfig } from './components/pyconfig';
-    import { initializers, loadedEnvironments, mode, postInitializers, pyodideLoaded, scriptsQueue, globalLoader, appConfig } from './stores';
-
-    let pyodideReadyPromise;
-
-    let loader;
-    let appConfig_: AppConfig = {
-        autoclose_loader: true,
-    };
-
-    globalLoader.subscribe(value => {
-        loader = value;
-    });
-
-    appConfig.subscribe( (value:AppConfig) => {
-        if (value){
-            appConfig_ = value;
-        }
-        console.log("config set!")
-    });
-
-    const initializePyodide = async () => {
-        loader.log("Loading runtime...")
-        pyodideReadyPromise = loadInterpreter();
-        const pyodide = await pyodideReadyPromise;
-        let newEnv = {
-            id: 'a',
-            promise: pyodideReadyPromise,
-            runtime: pyodide,
-            state: 'loading',
-        };
-        pyodideLoaded.set(pyodide);
-
-        // Inject the loader into the runtime namespace
-        pyodide.globals.set("pyscript_loader", loader);
-
-        loader.log("Runtime created...")
-        loadedEnvironments.update((value: any): any => {
-            value[newEnv['id']] = newEnv;
-        });
-
-        // now we call all initializers before we actually executed all page scripts
-        loader.log("Initializing components...")
-        for (let initializer of $initializers) {
-            await initializer();
-        }
-
-        // now we can actually execute the page scripts if we are in play mode
-        loader.log("Initializing scripts...")
-        if ($mode == 'play') {
-            for (let script of $scriptsQueue) {
-                script.evaluate();
-            }
-            scriptsQueue.set([]);
-        }
-
-        // now we call all post initializers AFTER we actually executed all page scripts
-        loader.log("Running post initializers...");
-
-        if (appConfig_ && appConfig_.autoclose_loader) {
-            loader.close();
-            console.log("------ loader closed ------");
-        }
-
-        setTimeout(() => {
-            for (let initializer of $postInitializers) {
-                initializer();
-            }
-        }, 3000);
-    };
 </script>
 
 <style global>
@@ -105,8 +34,4 @@
     }
   </style>
 
-<svelte:head>
-    <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js" on:load={initializePyodide}></script>
-</svelte:head>
-
 <Tailwind />
diff --git a/pyscriptjs/src/components/pyconfig.ts b/pyscriptjs/src/components/pyconfig.ts
index 6b928d89152..8ba9a7ebd36 100644
--- a/pyscriptjs/src/components/pyconfig.ts
+++ b/pyscriptjs/src/components/pyconfig.ts
@@ -1,19 +1,124 @@
 import * as jsyaml from 'js-yaml';
 import { BaseEvalElement } from './base';
-import { appConfig } from '../stores';
+import { initializers, loadedEnvironments, mode, postInitializers, pyodideLoaded, scriptsQueue, globalLoader, appConfig, Initializer }  from '../stores';
+import { loadInterpreter } from '../interpreter';
+import type { PyScript } from './pyscript';
 
-let appConfig_;
 
-appConfig.subscribe(value => {
-    appConfig_ = value;
-});
+const DEFAULT_RUNTIME = "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js";
 
 export type AppConfig = {
     autoclose_loader: boolean;
     name?: string;
     version?: string;
+    runtimes?: Array<string>;
   };
 
+let appConfig_: AppConfig = {
+    autoclose_loader: true,
+};
+
+appConfig.subscribe( (value:AppConfig) => {
+    if (value){
+        appConfig_ = value;
+    }
+    console.log("config set!")
+});
+
+let initializers_: Initializer[];
+initializers.subscribe( (value:Initializer[]) => {
+    initializers_ = value;
+    console.log("initializers set")
+});
+
+let postInitializers_: Initializer[];
+postInitializers.subscribe( (value:Initializer[]) => {
+    postInitializers_ = value;
+    console.log("post initializers set")
+});
+
+let scriptsQueue_: PyScript[];
+scriptsQueue.subscribe( (value: PyScript[]) => {
+    scriptsQueue_ = value;
+    console.log("post initializers set")
+});
+
+let mode_: string;
+mode.subscribe( (value:string) => {
+    mode_ = value;
+    console.log("post initializers set")
+});
+
+
+let pyodideReadyPromise;
+let loader;
+
+
+globalLoader.subscribe(value => {
+    loader = value;
+});
+
+
+export class PyodideRuntime extends Object{
+    src: string;
+
+    constructor(url:string) {
+        super();
+        this.src = url;
+    }
+
+    async initialize(){
+        loader.log("Loading runtime...")
+    pyodideReadyPromise = loadInterpreter(this.src);
+    const pyodide = await pyodideReadyPromise;
+    let newEnv = {
+        id: 'a',
+        promise: pyodideReadyPromise,
+        runtime: pyodide,
+        state: 'loading',
+    };
+    pyodideLoaded.set(pyodide);
+
+    // Inject the loader into the runtime namespace
+    pyodide.globals.set("pyscript_loader", loader);
+
+    loader.log("Runtime created...")
+    loadedEnvironments.update((value: any): any => {
+        value[newEnv['id']] = newEnv;
+    });
+
+    // now we call all initializers before we actually executed all page scripts
+    loader.log("Initializing components...")
+    for (let initializer of initializers_) {
+        await initializer();
+    }
+
+    // now we can actually execute the page scripts if we are in play mode
+    loader.log("Initializing scripts...")
+    if (mode_ == 'play') {
+        for (let script of scriptsQueue_) {
+            script.evaluate();
+        }
+        scriptsQueue.set([]);
+    }
+
+    // now we call all post initializers AFTER we actually executed all page scripts
+    loader.log("Running post initializers...");
+
+    if (appConfig_ && appConfig_.autoclose_loader) {
+        loader.close();
+        console.log("------ loader closed ------");
+    }
+
+    setTimeout(() => {
+        for (let initializer of postInitializers_) {
+            initializer();
+        }
+    }, 3000);
+    }
+}
+
+
 export class PyConfig extends BaseEvalElement {
     shadow: ShadowRoot;
     wrapper: HTMLElement;
@@ -33,14 +138,21 @@ export class PyConfig extends BaseEvalElement {
         this.code = this.innerHTML;
         this.innerHTML = '';
 
-        this.values = jsyaml.load(this.code);
-        if (this.values === undefined){
+        const loadedValues = jsyaml.load(this.code);
+        if (loadedValues === undefined){
             this.values = {
                 autoclose_loader: true,
             };
+        }else{
+            this.values = Object.assign({}, ...loadedValues);
+        };
+        if (this.values.runtimes === undefined){
+            this.values.runtimes = [DEFAULT_RUNTIME];
         }
         appConfig.set(this.values);
         console.log("config set", this.values);
+
+        this.loadRuntimes();
     }
 
     log(msg: string){
@@ -52,4 +164,15 @@ export class PyConfig extends BaseEvalElement {
     close() {
         this.remove();
     }
+
+    loadRuntimes(){
+        console.log("Initializing runetimes...")
+        for (let runtime of this.values.runtimes) {
+            var script = document.createElement("script");  // create a script DOM node
+            const runtimeSpec = new PyodideRuntime(runtime);
+            script.src = runtime;  // set its src to the provided URL
+            script.onload = runtimeSpec.initialize;
+            document.head.appendChild(script);
+        }
+    }
 }
diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts
index 918625f570a..22f5b78567b 100644
--- a/pyscriptjs/src/interpreter.ts
+++ b/pyscriptjs/src/interpreter.ts
@@ -3,11 +3,12 @@ import { getLastPath } from './utils';
 let pyodideReadyPromise;
 let pyodide;
 
-const loadInterpreter = async function (): Promise<any> {
+const loadInterpreter = async function (indexUrl:string): Promise<any> {
     console.log('creating pyodide runtime');
     // eslint-disable-next-line
     // @ts-ignore
     pyodide = await loadPyodide({
+        // indexURL: indexUrl,
         stdout: console.log,
         stderr: console.log,
         fullStdLib: false

From a3771ea0bc5fb7822174747e2c89eb825ed3556c Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Wed, 11 May 2022 12:43:34 -0500
Subject: [PATCH 09/10] change runtimes from strings to objects

---
 pyscriptjs/examples/simple_clock.html |  5 ++++-
 pyscriptjs/src/components/pyconfig.ts | 20 +++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html
index 1d373005b99..fa3f937d325 100644
--- a/pyscriptjs/examples/simple_clock.html
+++ b/pyscriptjs/examples/simple_clock.html
@@ -17,7 +17,10 @@
     <py-config>
       - autoclose_loader: false
       - runtimes:
-        - "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
+        -
+          src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
+          name: pyodide-0.20
+          lang: python
     </py-config>
   </head>
 
diff --git a/pyscriptjs/src/components/pyconfig.ts b/pyscriptjs/src/components/pyconfig.ts
index fa78cd3afc9..f1b6df56571 100644
--- a/pyscriptjs/src/components/pyconfig.ts
+++ b/pyscriptjs/src/components/pyconfig.ts
@@ -5,14 +5,24 @@ import { loadInterpreter } from '../interpreter';
 import type { PyScript } from './pyscript';
 
 
-const DEFAULT_RUNTIME = "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js";
+const DEFAULT_RUNTIME = {
+    src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js",
+    name: "pyodide-default",
+    lang: "python"
+}
+
+export type Runtime = {
+    src: string;
+    name?: string;
+    lang?: string;
+};
 
 export type AppConfig = {
     autoclose_loader: boolean;
     name?: string;
     version?: string;
-    runtimes?: Array<string>;
-  };
+    runtimes?: Array<Runtime>;
+};
 
 let appConfig_: AppConfig = {
     autoclose_loader: true,
@@ -169,8 +179,8 @@ export class PyConfig extends BaseEvalElement {
         console.log("Initializing runetimes...")
         for (const runtime of this.values.runtimes) {
             const script = document.createElement("script");  // create a script DOM node
-            const runtimeSpec = new PyodideRuntime(runtime);
-            script.src = runtime;  // set its src to the provided URL
+            const runtimeSpec = new PyodideRuntime(runtime.src);
+            script.src = runtime.src;  // set its src to the provided URL
             script.onload = () => {
                 runtimeSpec.initialize();
             }

From c4a25a13ff009c41a53451f49a4883a7b9e85f70 Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Wed, 11 May 2022 16:18:18 -0500
Subject: [PATCH 10/10] fix typo

---
 pyscriptjs/src/components/pyconfig.ts | 2 +-
 pyscriptjs/tsconfig.json              | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/pyscriptjs/src/components/pyconfig.ts b/pyscriptjs/src/components/pyconfig.ts
index f1b6df56571..f6657ed5015 100644
--- a/pyscriptjs/src/components/pyconfig.ts
+++ b/pyscriptjs/src/components/pyconfig.ts
@@ -176,7 +176,7 @@ export class PyConfig extends BaseEvalElement {
     }
 
     loadRuntimes(){
-        console.log("Initializing runetimes...")
+        console.log("Initializing runtimes...")
         for (const runtime of this.values.runtimes) {
             const script = document.createElement("script");  // create a script DOM node
             const runtimeSpec = new PyodideRuntime(runtime.src);
diff --git a/pyscriptjs/tsconfig.json b/pyscriptjs/tsconfig.json
index 31509cef1a9..5b80dad3746 100644
--- a/pyscriptjs/tsconfig.json
+++ b/pyscriptjs/tsconfig.json
@@ -22,7 +22,6 @@
     "sourceMap": true,
     /** Requests the runtime types from the svelte modules by default. Needed for TS files or else you get errors. */
     "types": ["svelte"],
-
     "strict": false,
     "esModuleInterop": true,
     "skipLibCheck": true,