Get it sorta working!

Author: MaddyGuthridge

src/lib/index.ts

@@ -1,12 +1,30 @@
-import { loadPyodide } from 'pyodide';
+import { loadPyodide, type PyodideInterface } from 'pyodide';
+
 
 /**
  * Set up Pyodide and install pyhtml-enhanced.
  */
-export async function pythonInit() {
-  let pyodide = await loadPyodide();
+async function pyodideInit() {
+  const pyodide = await loadPyodide();
   await pyodide.loadPackage("micropip");
   const micropip = pyodide.pyimport("micropip");
   await micropip.install('pyhtml-enhanced');
   return pyodide;
 }
+
+let pyodide: PyodideInterface;
+
+export async function getPyodide() {
+  if (pyodide) return pyodide;
+  pyodide = await pyodideInit();
+  return pyodide;
+}
+
+export async function evalPyHTML(pyhtml: string): Promise<string> {
+  const code = `import pyhtml as p
+document = ${pyhtml}
+str(document)
+`;
+  const pyodide = await getPyodide();
+  return pyodide.runPython(code) as string;
+}

src/routes/+page.svelte

@@ -1,13 +1,49 @@
 <script lang="ts">
-  import { pythonInit } from '$lib';
+  import { evalPyHTML, getPyodide } from '$lib';
+  import { onMount } from 'svelte';
 
-  const pyodide = pythonInit();
+  let pyhtmlCode = $state(`
+p.html(
+    p.head(
+        p.title("Hello, world!"),
+    ),
+    p.body(
+        p.h1("Hello, world!"),
+        p.p("This content is being dynamically generated using PyHTML!"),
+    ),
+)
+  `.trim());
+
+  let htmlCode = $state('');
+
+  async function renderHtml() {
+    htmlCode = await evalPyHTML(pyhtmlCode);
+  }
+
+  let pyodideReady = $state(false);
+
+  onMount(async () => {
+    await getPyodide();
+    console.log('Pyodide is ready');
+    renderHtml();
+    pyodideReady = true;
+  });
 </script>
 
 <h1>Test out PyHTML</h1>
 
-{#await pyodide}
-  <p>Pyodide is loading...</p>
-{:then pyodide}
+{#if pyodideReady}
   <p>Pyodide loaded successfully!</p>
-{/await}
+  <textarea name="" id="" bind:value={pyhtmlCode} oninput={renderHtml}>
+  </textarea>
+
+  <pre>
+  <code>
+{htmlCode}
+  </code>
+</pre>
+
+  <iframe srcdoc={htmlCode} title="PyHTML preview" frameborder="0"></iframe>
+{:else}
+  <p>Pyodide is loading...</p>
+{/if}