Combine extracted script/style tags

app/assets/javascripts/web-dev-listener.js

@@ -52,8 +52,8 @@ function create({ dom, styles, scripts }) {
     virtualStyles = styles;
     virtualScripts = scripts;
     concreteDom = deku.dom.create(dom);
-    concreteStyles = styles.map(function(style){return deku.dom.create(style)});
-    concreteScripts = scripts.map(function(script){return deku.dom.create(script)});
+    concreteStyles = deku.dom.create(styles);
+    concreteScripts = deku.dom.create(scripts);
     // TODO: target the actual HTML tag and combine our initial structure for styles/scripts/tags with theirs
     // TODO: :after elements don't seem to work? (:before do)
     $('body').first().empty().append(concreteDom);
@@ -64,23 +64,19 @@ function create({ dom, styles, scripts }) {
 function update({ dom, styles, scripts }) {
     function dispatch() {}  // Might want to do something here in the future
     var context = {};  // Might want to use this to send shared state to every component
+
     var domChanges = deku.diff.diffNode(virtualDom, dom);
     domChanges.reduce(deku.dom.update(dispatch, context), concreteDom);  // Rerender
-    
-    var scriptChanges = virtualScripts.map(function(virtualScript, index){
-        return deku.diff.diffNode(virtualScripts[index], scripts[index]);
-    });
-    scriptChanges.forEach(function(scriptChange, index){
-        scriptChange.reduce(deku.dom.update(dispatch, context), concreteStyles[index])
-    });
-    
-    var styleChanges = virtualStyles.map(function(virtualStyle, index){
-        return deku.diff.diffNode(virtualStyles[index], styles[index]);
-    });
-    styleChanges.forEach(function(styleChange, index){
-        styleChange.reduce(deku.dom.update(dispatch, context), concreteStyles[index])
-    });
+
+    var scriptChanges = deku.diff.diffNode(virtualScripts, scripts);
+    scriptChanges.reduce(deku.dom.update(dispatch, context), concreteScripts);  // Rerender
+
+    var styleChanges = deku.diff.diffNode(virtualStyles, styles);
+    styleChanges.reduce(deku.dom.update(dispatch, context), concreteStyles);  // Rerender
+
     virtualDom = dom;
+    virtualStyles = styles;
+    virtualScripts = scripts;
 }
 
 function checkGoals(goals, source, origin) {

app/views/play/level/WebSurfaceView.coffee

@@ -46,25 +46,40 @@ module.exports = class WebSurfaceView extends CocoView
     deku.element(elem.name, elem.attribs, (@dekuify(c) for c in elem.children ? []))
   
   extractStylesAndScripts: (dekuTree) ->
-    #base case
-    if dekuTree.type is '#text'
-      return { virtualDom: dekuTree, styles: [], scripts: [] }
-    if dekuTree.type is 'style'
-      console.log 'Found a style: ', dekuTree
-      return { styles: [dekuTree], scripts: [] }
-    if dekuTree.type is 'script'
-      console.log 'Found a script: ', dekuTree
-      return { styles: [], scripts: [dekuTree] }
-    # recurse over children
-    childStyles = []
-    childScripts = []
-    dekuTree.children?.forEach (dekuChild, index) =>
-      { virtualDom, styles, scripts } = @extractStylesAndScripts(dekuChild)
-      dekuTree.children[index] = virtualDom
-      childStyles = childStyles.concat(styles)
-      childScripts = childScripts.concat(scripts)
-    dekuTree.children = _.filter dekuTree.children # Remove the nodes we extracted
-    return { virtualDom: dekuTree, scripts: childScripts, styles: childStyles }
+    recurse = (dekuTree) ->
+      #base case
+      if dekuTree.type is '#text'
+        return { virtualDom: dekuTree, styles: [], scripts: [] }
+      if dekuTree.type is 'style'
+        console.log 'Found a style: ', dekuTree
+        return { styles: [dekuTree], scripts: [] }
+      if dekuTree.type is 'script'
+        console.log 'Found a script: ', dekuTree
+        return { styles: [], scripts: [dekuTree] }
+      # recurse over children
+      childStyles = []
+      childScripts = []
+      dekuTree.children?.forEach (dekuChild, index) =>
+        { virtualDom, styles, scripts } = recurse(dekuChild)
+        dekuTree.children[index] = virtualDom
+        childStyles = childStyles.concat(styles)
+        childScripts = childScripts.concat(scripts)
+      dekuTree.children = _.filter dekuTree.children # Remove the nodes we extracted
+      return { virtualDom: dekuTree, scripts: childScripts, styles: childStyles }
+    
+    { virtualDom, scripts, styles } = recurse(dekuTree)
+    combinedScripts = @combineNodes('script', scripts)
+    combinedStyles = @combineNodes('style', styles)
+    return { virtualDom, scripts: combinedScripts, styles: combinedStyles }
+    
+  combineNodes: (type, nodes) ->
+    if _.any(nodes, (node) -> node.type isnt type)
+      throw new Error("Can't combine nodes of different types. (Got #{nodes.map (n) -> n.type})")
+    children = nodes.map((n) -> n.children).reduce(((a,b) -> a.concat(b)), [])
+    if _.isEmpty(children)
+      deku.element(type, {})
+    else
+      deku.element(type, {}, children)
 
   onIframeMessage: (event) =>
     origin = event.origin or event.originalEvent.origin