bytecode vs blockly json viz & tooling

index.html

@@ -12,8 +12,9 @@
       <div id="menu-pane">
         <button id="button-clear">Clear</button>
 
-        <button id="button-json">JSON</button>
-        <pre id="json-output-container"><code id="json-output"></code></pre>
+        <button id="button-reload">Reload via Bytecode</button>
+        <pre id="bytecode-json-container"><code id="bytecode-json"></code></pre>
+        <pre id="blockly-json-container"><code id="blockly-json"></code></pre>
       </div>
 
       <div id="blocklyDiv"></div>

src/bytecode_serialization.js

@@ -28,10 +28,7 @@ export const clear = function(workspace) {
  * @param {Blockly.Workspace} workspace Blockly workspace to save.
  */
 export const save = function(workspace) {
-  const workspaceObject = Blockly.serialization.workspaces.save(workspace)
   const workspaceBytecode = workspaceToBytecode(workspace)
-  console.log("Saving Workspace:\n", JSON.stringify(workspaceObject, null, 2))
-  // console.log("Workspace-to-Bytecode:\n", workspaceBytecode)
   window.localStorage?.setItem(storageKey, workspaceBytecode)
 }
 
@@ -41,17 +38,13 @@ export const save = function(workspace) {
  */
 export const load = function(workspace) {
   const bytecodeString = window.localStorage?.getItem(storageKey)
-  // console.log("Loaded Bytecode String:", bytecodeString)
   const bytecode = JSON.parse(bytecodeString)
-  // console.log("Loaded Bytecode:", bytecode)
   if (!bytecode) return
 
   // Don't emit events during loading.
   Blockly.Events.disable()
   try {
-    // TODO: reverse generator, bytecode-to-workspace object
     const workspaceData = bytecodeToWorkspace(bytecode)
-    console.log("Bytecode-to-Workspace:", JSON.stringify(workspaceData, null, 2))
     Blockly.serialization.workspaces.load(workspaceData, workspace, false)
   } catch(e) {
     console.error("Failed to load a stored Blockly state, Blockly system may have changed incompatibly.")

src/index.css

@@ -29,7 +29,7 @@ pre, code {
     margin: 1rem;
 }
 
-#json-output-container {
+#blockly-json-container, #bytecode-json-container {
     background-color: rgb(247, 240, 228);
     width: 400px;
 }

src/index.js

@@ -5,9 +5,9 @@ import extensions from "./extensions"
 import "./mutators"
 import { customBlocksJson } from './blocks'
 import allGenerators from './blocks/generators'
+import allRegenerators from './blocks/regenerators'
 import toolbox from './toolboxes'
-// import { clear, load, save } from './serialization'
-import { clear, load, save } from './bytecode_serialization'
+import { clear, load, save } from './serialization'
 import initialWorkspace from './workspaces/workspace.json'
 
 import './index.css'
@@ -41,7 +41,8 @@ Blockly.VerticalFlyout.prototype.getFlyoutScale = () => 1
 Blockly.serialization.workspaces.load(initialWorkspace, workspace)
 
 // prepare generators and their dom targets
-const jsonOutputDiv = document.getElementById('json-output')
+const blocklyJsonOutputDiv = document.getElementById('blockly-json')
+const bytecodeJsonOutputDiv = document.getElementById('bytecode-json')
 const regenerate = () => {
   const json = allGenerators.json.workspaceToCode(workspace)
 
@@ -53,15 +54,19 @@ const regenerate = () => {
       console.error('Failed to JSON.parse:', json)
       console.error(e)
     }
-    const validation = `JSON is ${valid ? 'valid ✅' : 'invalid ❌'}`
-    jsonOutputDiv.innerText = `${validation}\n\n${json}`
-    if(valid) { return }
-    console.log(validation)
-    console.log(json)
+    const validation = `Bytecode JSON is ${valid ? 'valid ✅' : 'invalid ❌'}`
+    bytecodeJsonOutputDiv.innerText = `${validation}\n\n${json}`
+    // if(valid) { return }
+    // console.log(validation)
+    // console.log(json)
   } catch(e) {
-    jsonOutputDiv.innerText = `JSON Generation Failed for:\n${json}\n\n Failed with ${e}`
+    blocklyJsonOutputDiv.innerText = `JSON Generation Failed for:\n${json}\n\n Failed with ${e}`
     console.error(e)
+    return
   }
+
+  const bytecode = allRegenerators.json.codeToWorkspace(JSON.parse(json))
+  blocklyJsonOutputDiv.innerText = JSON.stringify(bytecode, null, 2)
 }
 
 // register listeners
@@ -92,12 +97,29 @@ const
   }
 clearButton.addEventListener('click', clearAndInitialize)
 
-const jsonButton = document.getElementById('button-json')
-const jsonOutputContainer = document.getElementById('json-output-container')
-jsonButton.addEventListener('click', () => {
-  jsonOutputContainer.style.visibility = (jsonOutputContainer.style.visibility !== "visible")
-    ? "visible"
-    : "hidden"
+const reloadButton = document.getElementById('button-reload')
+reloadButton.addEventListener('click', () => {
+  // export bytecode
+  const bytecodeJson = allGenerators.json.workspaceToCode(workspace)
+  // convert bytecode to workspace json
+  const workspaceJson = allRegenerators.json.codeToWorkspace(JSON.parse(bytecodeJson))
+
+  // disable events while we're working
+  Blockly.Events.disable()
+  try {
+    // clear workspace
+    workspace.clear()
+    // load workspace json
+    Blockly.serialization.workspaces.load(workspaceJson, workspace)
+
+  } catch(e) {
+    console.error(e)
+    console.log('reloading stored workspace...')
+
+    load(workspace)
+  } finally {
+    Blockly.Events.enable()
+  }
 })
 
 // load last sketch from storage