Tree View Hot Reload! (Demo)

I don't plan to show them both at the same time, because of performance for rebuilding the whole Tree View each time, but we'll see. Maybe SolidJS is nice at handling that? Not completely sure. Maybe that's where the VDOM may actually help out a bunch, since it would only change parts that it needs to. How can I move the NBTify object-based structure for NBT representation, over to using something more UI-based? Looping over all of the keys and values each time doesn't seem the most reactive. I think it should be more declarative, but I'm not sure how to do that yet. This is at least for demoing how often the tree should be rebuilt, I was probably going to do it when `getShowTreeView()` changes, then rebuild it only when changing view states. It does seem really cool to have a live tree view for real-time SNBT editing too though, so we'll see. Would be great to have! STE can do it with rebuilding your whole site from the editor each time, maybe this isn't *that* performance-heavy. There are still probably some optimizations that can tighten things up here and there though, which likely make all the difference. That's usually how things go, the smallest changes make the biggest improvements.

#4

src/App.tsx

@@ -1,11 +1,11 @@
-import { createSignal } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 import { parse, stringify, NBTData } from "nbtify";
 import { openFile, readFile, saveFile, shareFile, writeFile } from "./file.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
 import { FormatOptions } from "./FormatOptions.js";
 
-import type { RootName, Endian, Compression, BedrockLevel, Format } from "nbtify";
+import type { RootName, Endian, Compression, BedrockLevel, Format, RootTag } from "nbtify";
 
 export interface AppProps {
   isiOSDevice: boolean;
@@ -21,7 +21,7 @@ const [getShowFormatDialog,setShowFormatDialog] = createSignal<boolean>(false);
 const [getName,setName] = createSignal<string>("");
 const [getFileHandle,setFileHandle] = createSignal<FileSystemFileHandle | null>(null);
 const [getEditorValue,setEditorValue] = createSignal<string>("");
-const [getEditorDisabled,setEditorDisabled] = createSignal<boolean>(true);
+const [getEditorDisabled,setEditorDisabled] = createSignal<boolean>(false);
 const [getRootName,setRootName] = createSignal<RootName>("");
 const [getEndian,setEndian] = createSignal<Endian>("big");
 const [getCompression,setCompression] = createSignal<Compression>(null);
@@ -47,6 +47,21 @@ const setFormat = (format: Format): Format => {
   return format;
 }
 
+createEffect(() => {
+  let rootTag: RootTag;
+  console.clear();
+  try {
+    rootTag = getEditorValue() === ""
+      ? {}
+      : parse(getEditorValue());
+  } catch (error){
+    console.warn(error);
+    return;
+  }
+  const nbt = new NBTData(rootTag,getFormat());
+  setTreeViewValue(nbt);
+});
+
 // refs
 // let saver: HTMLButtonElement;
 // let fileOpener: HTMLInputElement;
@@ -112,11 +127,11 @@ const handleDrop: NonNullable<typeof document.ondrop> = async event => {
 
 document.addEventListener("drop",handleDrop);
 
-const demo = fetch("./bigtest.nbt")
-  .then(response => response.blob())
-  .then(blob => new File([blob],"bigtest.nbt"));
-demo.then(console.log);
-demo.then(openNBTFile);
+// const demo = fetch("./bigtest.nbt")
+//   .then(response => response.blob())
+//   .then(blob => new File([blob],"bigtest.nbt"));
+// demo.then(console.log);
+// demo.then(openNBTFile);
 
 /**
  * Opens an NBT file in the editor.

src/Main.tsx

@@ -15,10 +15,8 @@ export interface MainProps {
 export function Main(props: MainProps){
   return (
     <main>
-      {
-        props.getShowTreeView()
-          ? <NBTTree name={props.getRootName} value={props.getTreeViewValue}/>
-          : <textarea
+            <NBTTree name={props.getRootName} value={props.getTreeViewValue}/>
+            <textarea
               disabled={props.getEditorDisabled()}
               placeholder="NBT data will show here..."
               wrap="off"
@@ -29,7 +27,6 @@ export function Main(props: MainProps){
               value={props.getEditorValue()}
               oninput={event => props.setEditorValue(event.currentTarget.value)}
             />
-      }
     </main>
   );
 }

src/index.scss

@@ -78,6 +78,7 @@ main {
 
 textarea {
   padding: 8px;
+  height: 50%;
   flex-grow: 1;
   font-size: 13px;
   font-family: ui-monospace, "Noto Sans Mono", "Cousine", monospace;
@@ -102,7 +103,8 @@ textarea[disabled] {
   padding: 8px 12px;
   position: absolute;
   inset: 0;
-  height: 100%;
+  top: 50%;
+  height: 50%;
   display: flex;
   gap: 1em;
   flex-direction: column;