Add bare XML state to Redux

modern/src/Actions.ts

@@ -1,4 +1,4 @@
-import { MakiTree, ModernAction, ModernStore } from "./types";
+import { MakiTree, ModernAction, ModernStore, XmlTree } from "./types";
 import JSZip from "jszip";
 import * as Utils from "./utils";
 import initialize from "./initialize";
@@ -6,25 +6,32 @@ import { run } from "./maki-interpreter/virtualMachine";
 import System from "./runtime/System";
 import runtime from "./runtime";
 
-async function getMakiTreeFromUrl(skinUrl: string): Promise<MakiTree> {
+async function getZipFromUrl(skinUrl: string): Promise<JSZip> {
   const resp = await fetch(skinUrl);
   const blob = await resp.blob();
-  const zip = await JSZip.loadAsync(blob);
-  const skinXml = await Utils.inlineIncludes(
-    await Utils.readXml(zip, "skin.xml"),
-    zip
-  );
-
-  return await initialize(zip, skinXml);
+  return JSZip.loadAsync(blob);
 }
 
 export function setMakiTree(makiTree: MakiTree): ModernAction {
   return { type: "SET_MAKI_TREE", makiTree };
 }
 
+export function setXmlTree(xmlTree: XmlTree): ModernAction {
+  return { type: "SET_XML_TREE", xmlTree };
+}
+
 export function gotSkinUrl(skinUrl: string, store: ModernStore) {
   return async dispatch => {
-    const makiTree = await getMakiTreeFromUrl(skinUrl);
+    const zip = await getZipFromUrl(skinUrl);
+
+    const xmlTree = await Utils.inlineIncludes(
+      await Utils.readXml(zip, "skin.xml"),
+      zip
+    );
+
+    dispatch(setXmlTree(xmlTree));
+
+    const makiTree = await initialize(zip, xmlTree);
     // Execute scripts
     await Utils.asyncTreeFlatMap(makiTree, node => {
       switch (node.name) {

modern/src/store.ts

@@ -1,8 +1,9 @@
 import { ModernAppState, ModernAction } from "./types";
-import { createStore, applyMiddleware } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
+import { composeWithDevTools } from "redux-devtools-extension";
 import thunk from "redux-thunk";
 
-const defaultState = { makiTree: null, volume: 127 };
+const defaultState = { makiTree: null, volume: 127, xmlTree: null };
 
 function reducer(
   state: ModernAppState = defaultState,
@@ -11,6 +12,8 @@ function reducer(
   switch (action.type) {
     case "SET_MAKI_TREE":
       return { ...state, makiTree: action.makiTree };
+    case "SET_XML_TREE":
+      return { ...state, xmlTree: action.xmlTree };
     case "SET_VOLUME":
       return { ...state, volume: action.volume };
 
@@ -20,5 +23,5 @@ function reducer(
 }
 
 export function create() {
-  return createStore(reducer, applyMiddleware(thunk));
+  return createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
 }

modern/src/types.ts

@@ -1,12 +1,20 @@
 // TODO: Type the state tree
 export type MakiTree = any;
 
+export type XmlNode = {
+  children: XmlNode[];
+};
+
+export type XmlTree = XmlNode;
+
 export type ModernAppState = {
   makiTree: MakiTree | null;
+  xmlTree: XmlTree | null;
   volume: number;
 };
 export type ModernAction =
   | { type: "SET_MAKI_TREE"; makiTree: MakiTree }
+  | { type: "SET_XML_TREE"; xmlTree: XmlTree }
   | { type: "SET_VOLUME"; volume: number };
 
 export type ModernDispatch = (action: ModernAction) => void;