keep persistent EditorSession on demo page

6 files changed, 49 insertions, 24 deletions

diff --git a/web/pw-server/package.json b/web/pw-server/package.json
index cce4a25..54a9580 100644
--- a/web/pw-server/package.json
+++ b/web/pw-server/package.json
@@ -29,6 +29,7 @@
     "svelte-preprocess": "^4.9.4",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3",
+    "vite-plugin-iso-import": "^0.1.3",
     "vite-plugin-wasm-pack": "^0.1.9"
   },
   "dependencies": {
diff --git a/web/pw-server/src/global.d.ts b/web/pw-server/src/global.d.ts
index 63908c6..8591444 100644
--- a/web/pw-server/src/global.d.ts
+++ b/web/pw-server/src/global.d.ts
@@ -1 +1,5 @@
 /// <reference types="@sveltejs/kit" />
+
+// fallback
+declare module "*?client";
+declare module "*?server";
diff --git a/web/pw-server/src/lib/components/Editor.svelte b/web/pw-server/src/lib/components/Editor.svelte
new file mode 100644
index 0000000..5acbca5
--- /dev/null
+++ b/web/pw-server/src/lib/components/Editor.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Ace } from "ace-builds";
+  import ace from "ace-builds/src-noconflict/ace?client";
+  import * as aceGithubTheme from "ace-builds/src-noconflict/theme-github?client";
+
+  import { onMount } from "svelte";
+
+  export let editSession: Ace.EditSession;
+
+  let editorDiv: HTMLDivElement | undefined;
+  let editor: Ace.Editor | undefined;
+
+  onMount(async () => {
+    let renderer = new ace.VirtualRenderer(editorDiv);
+    editor = new ace.Editor(renderer, editSession);
+    editor.setTheme(aceGithubTheme);
+  });
+</script>
+
+<div bind:this={editorDiv} class="editor" />
+
+<style>
+  .editor {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index bd9a597..76f6295 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -4,38 +4,35 @@
   import { onMount } from "svelte";
   import "./style.css";
 
-  let editor;
+  import ace from "ace-builds/src-noconflict/ace?client";
+  import Editor from "$lib/components/Editor.svelte";
+  import type { Ace } from "ace-builds";
+
   let matches = [];
 
   let selectedMatchId: string | undefined = undefined;
   let selectedMatchLog: string | undefined = undefined;
 
+  let editSession: Ace.EditSession;
+
   onMount(async () => {
-    await load_editor();
+    await init_editor();
   });
 
-  async function load_editor() {
-    const ace = await import("ace-builds");
-    const python_mode = await import("ace-builds/src-noconflict/mode-python");
-    const gh_theme = await import("ace-builds/src-noconflict/theme-github");
-
-    editor = ace.edit("editor");
-    editor.getSession().setMode(new python_mode.Mode());
-    editor.setTheme(gh_theme);
+  async function init_editor() {
+    const AcePythonMode = await import("ace-builds/src-noconflict/mode-python");
+    editSession = new ace.EditSession("");
+    editSession.setMode(new AcePythonMode.Mode());
   }
 
   async function submitCode() {
-    if (editor === undefined) {
-      return;
-    }
-
     let response = await fetch("/api/submit_bot", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        code: editor.getValue(),
+        code: editSession.getDocument().getValue(),
       }),
     });
 
@@ -46,7 +43,7 @@
     let responseData = await response.json();
 
     let matchId = responseData["match_id"];
-    // goto(`/submission_matches/${matchId}`);
+
     matches.push({ matchId: matchId });
     matches = matches;
   }
@@ -72,7 +69,6 @@
   function selectEditor() {
     selectedMatchId = undefined;
     selectedMatchLog = undefined;
-    load_editor();
   }
 </script>
 
@@ -99,7 +95,7 @@
       {#if selectedMatchLog !== undefined}
         <Visualizer matchLog={selectedMatchLog} />
       {:else}
-        <div id="editor" />
+        <Editor {editSession} />
       {/if}
     </div>
     <div class="sidebar-right">
@@ -144,11 +140,6 @@
     overflow: hidden;
   }
 
-  #editor {
-    width: 100%;
-    height: 100%;
-  }
-
   .editor-container {
     height: 100%;
   }
diff --git a/web/pw-server/src/routes/style.css b/web/pw-server/src/routes/style.css
index 699a279..293d3b1 100644
--- a/web/pw-server/src/routes/style.css
+++ b/web/pw-server/src/routes/style.css
@@ -1,3 +1,3 @@
 body {
-    margin: 0;
+  margin: 0;
 }
diff --git a/web/pw-server/svelte.config.js b/web/pw-server/svelte.config.js
index b6a2cf8..f0e3c27 100644
--- a/web/pw-server/svelte.config.js
+++ b/web/pw-server/svelte.config.js
@@ -2,6 +2,7 @@ import adapter from "@sveltejs/adapter-auto";
 import preprocess from "svelte-preprocess";
 import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
 import wasmPack from "vite-plugin-wasm-pack";
+import { isoImport } from "vite-plugin-iso-import";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -17,6 +18,7 @@ const config = {
     ssr: false,
     vite: {
       plugins: [
+        isoImport(),
         wasmPack([], ["planetwars-rs"]),
         viteCommonjs({
           transformMixedEsModules: true,