Migrate splitpanes to grid-uikit GridSplitpanes/GridPane

package.json

@@ -42,7 +42,6 @@
     "firebase": "^12.2.1",
     "marked": "^12.0.2",
     "semver-parser": "^4.1.4",
-    "svelte-splitpanes": "^8.0.9",
     "uuid": "^9.0.0",
     "ws": "^8.18.3",
     "zod": "^3.21.4"

src/routes/EditorLayout.svelte

@@ -39,9 +39,13 @@
   import { loginToProfileCloud } from "./user_account";
   import Filter from "./Filter.svelte";
   import ConfigCardDisplay from "./ConfigCardDisplay.svelte";
-  import { Pane, Splitpanes } from "svelte-splitpanes";
   import configuration from "../../Configuration.json";
-  import { MeltCheckbox, MoltenPushButton } from "@intechstudio/grid-uikit";
+  import {
+    GridPane,
+    GridSplitpanes,
+    MeltCheckbox,
+    MoltenPushButton,
+  } from "@intechstudio/grid-uikit";
   import { compatible_config_types } from "./EditorLayout";
   import { dragTarget } from "../lib/actions/drag.action";
   import {
@@ -745,17 +749,17 @@
   {/if}
 
   <div class="splitpanes-wrapper">
-    <Splitpanes horizontal={true} theme="modern-theme" pushOtherPanes={false}>
-      <Pane size={60}>
+    <GridSplitpanes horizontal={true} pushOtherPanes={false}>
+      <GridPane size={60}>
         <div class="tree-pane">
           <ConfigTree
             {configs}
             scrollToSelectionTrigger={scrollToSelectedConfigTrigger}
             on:create-copy={(e) => handleSyncConfig(e.detail, true)}
           />
-        </div></Pane
+        </div></GridPane
       >
-      <Pane size={40}>
+      <GridPane size={40}>
         <div class="detail-pane">
           <ConfigCardDisplay
             on:delete-config={handleDeleteConfig}
@@ -895,8 +899,8 @@
             </span>
           </ConfigCardDisplay>
         </div>
-      </Pane>
-    </Splitpanes>
+      </GridPane>
+    </GridSplitpanes>
   </div>
   <UserLogin {usernameInput} />
 </div>

vite.config.webcomponent.ts

@@ -1,9 +1,32 @@
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { sveltePreprocess } from "svelte-preprocess";
 import { notifyEditorAfterBuildPlugin } from "./vite.postbuild";
 import path from "path";
 
+// The host editor only loads components.js, so any CSS vite extracts into a
+// separate file (e.g. grid-uikit's splitpanes theme) never reaches the page.
+function injectCssIntoJsPlugin(): Plugin {
+  return {
+    name: "inject-css-into-js",
+    apply: "build",
+    enforce: "post",
+    generateBundle(_, bundle) {
+      const cssFiles = Object.keys(bundle).filter((k) => k.endsWith(".css"));
+      const css = cssFiles
+        .map((k) => (bundle[k] as { source: string }).source)
+        .join("\n");
+      if (!css) return;
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type === "chunk" && chunk.isEntry) {
+          chunk.code += `\n;(function(){try{var s=document.createElement("style");s.textContent=${JSON.stringify(css)};document.head.appendChild(s);}catch(e){}})();`;
+        }
+      }
+      cssFiles.forEach((k) => delete bundle[k]);
+    },
+  };
+}
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -46,6 +69,7 @@ export default defineConfig({
       },
       emitCss: false,
     }),
+    injectCssIntoJsPlugin(),
     notifyEditorAfterBuildPlugin(),
   ],
   build: {