support elements dynamically added that do not require loading.

googlearchive · Jun 5, 2014 · aa287e4 · aa287e4
1 parent 1d35085
commit aa287e4
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 0 deletions.
diff --git a/src/Observer.js b/src/Observer.js
@@ -9,6 +9,7 @@ license that can be found in the LICENSE file.
 var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE;
 var importSelector = 'link[rel=' + IMPORT_LINK_TYPE + ']';
 var importer = scope.importer;
+var parser = scope.parser;
 
 // we track mutations for addedNodes, looking for imports
 function handler(mutations) {
@@ -21,14 +22,19 @@ function handler(mutations) {
 
 // find loadable elements and add them to the importer
 function addedNodes(nodes) {
+  var owner;
   for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
+    owner = owner || n.ownerDocument;
     if (shouldLoadNode(n)) {
       importer.loadNode(n);
     }
     if (n.children && n.children.length) {
       addedNodes(n.children);
     }
   }
+  if (owner) {
+    parser.invalidateParse(owner);
+  }
 }
 
 function shouldLoadNode(node) {

diff --git a/src/Parser.js b/src/Parser.js
@@ -75,6 +75,21 @@ var importParser = {
     this.parsingElement = null;
     flags.parse && console.log('completed', elt);
   },
+  invalidateParse: function(doc) {
+    if (doc && doc.__importLink) {
+      doc.__importParsed = doc.__importLink.__importParsed = false;
+      this.parseSoon();
+    }
+  },
+  parseSoon: function() {
+    if (this._parseSoon) {
+      cancelAnimationFrame(this._parseDelay);
+    }
+    var parser = this;
+    this._parseSoon = requestAnimationFrame(function() {
+      parser.parseNext();
+    });
+  },
   parseImport: function(elt) {
     // TODO(sorvell): consider if there's a better way to do this;
     // expose an imports parsing hook; this is needed, for example, by the

diff --git a/test/html/dynamic-elements.html b/test/html/dynamic-elements.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+  <title>HTML Imports Dynamic Elements</title>
+  <script src="../../../tools/test/htmltest.js"></script>
+  <script src="../../../tools/test/chai/chai.js"></script>
+  <script src="../../html-imports.js"></script>
+  <link rel="import" href="imports/dynamic-elements-import.html">
+</head>
+<body>
+  <div id="asyncStyled">red?</div>
+
+  <script>
+    document.addEventListener('asyncElementsAdded', function() {
+      HTMLImports.whenImportsReady(function() {
+        chai.assert.isTrue(window.asyncScript, 'async added script ran');
+        var computed = getComputedStyle(document.querySelector('#asyncStyled'));
+        chai.assert.equal(computed.backgroundColor, 'rgb(255, 0, 0)', 'async added style applied');
+        done();
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/test/html/imports/dynamic-elements-import.html b/test/html/imports/dynamic-elements-import.html
@@ -0,0 +1,19 @@
+<script>
+(function() {
+  var doc = document._currentScript.ownerDocument;
+  setTimeout(function() {
+    var script = doc.createElement('script')
+    script.textContent = 'window.asyncScript = true;';
+    doc.body.appendChild(script);
+
+    var style = doc.createElement('style');
+    style.textContent = '#asyncStyled { background: red; }';
+    doc.body.appendChild(style);
+
+    // async for MO.
+    requestAnimationFrame(function() {
+      document.dispatchEvent(new CustomEvent('asyncElementsAdded', {bubbles: true}));
+    });
+  }, 100);
+})();
+</script>
diff --git a/test/js/tests.js b/test/js/tests.js
@@ -14,5 +14,6 @@ htmlSuite('HTMLImports', function() {
   htmlTest('html/currentScript.html');
   htmlTest('html/dedupe.html');
   htmlTest('html/dynamic.html');
+  htmlTest('html/dynamic-elements.html');
   htmlTest('html/csp.html');
 });