Merge pull request #44 from GoogleChrome/styles-seperation

Making it so that styles are added to the head of the document

Author: addyosmani

gulp-tasks/service-worker.js

@@ -24,7 +24,7 @@ var swPrecache = require('sw-precache');
 var packageName = JSON.parse(fs.readFileSync('./package.json', 'utf8')).name;
 
 gulp.task('service-worker:watch', function(cb) {
-  gulp.watch(GLOBAL.config.src + '/**/*.*', ['service-worker']);
+  gulp.watch(GLOBAL.config.dest + '/**/*.*', ['service-worker']);
   gulp.watch(GLOBAL.config.src + '/../server/views/**/*.*',
     ['service-worker']);
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-shell",
-  "version": "0.1.175",
+  "version": "0.1.177",
   "private": true,
   "license": "Apache Version 2.0",
   "engines": {

server/views/layouts/partial.handlebars

@@ -1,7 +1,9 @@
-<style type="text/css">{{{inlineStyles}}}</style>
+<style class="js-partial-styles" type="text/css">{{{inlineStyles}}}</style>
 
+<div class="js-partial-content">
 {{{ body }}}
 
 {{#each remoteScripts}}
 <script src="{{this}}" async></script>
 {{~/each}}
+</div>

src/scripts/controller/ActivityController.js

@@ -27,7 +27,26 @@ export default class ActivityController {
       })
       .then((responseText) => {
         if (responseText !== null) {
-          this.mainContainer.innerHTML = responseText;
+          /**
+           * NOTE: We could move the script tags in the partial to the
+           * bottom of the body, but I don't think it'll change browser
+           * behaviour so it should be fine to inline the script tag in
+           * the main element.
+           **/
+
+          // Parse the response string
+          var parser = new DOMParser();
+          var partialElement =
+            parser.parseFromString(responseText, 'text/html');
+
+          // Add style element to the document head
+          var styleElement = partialElement.querySelector('.js-partial-styles');
+          document.head.appendChild(styleElement);
+
+          // Add content from partial to page
+          var contentElement =
+            partialElement.querySelector('.js-partial-content');
+          this.mainContainer.innerHTML = contentElement.innerHTML;
         }
 
         // Hide loading dialog
@@ -39,7 +58,18 @@ export default class ActivityController {
   }
 
   onFinish() {
-    console.log('onFinish: ', this.path);
+    console.log('onFinish');
+    // Remove any existing styles
+    var insertedStyles =
+      document.querySelector('.js-partial-styles');
+    if (insertedStyles) {
+      document.head.removeChild(insertedStyles);
+    }
+
+    // Remove the current content
+    while (this.mainContainer.firstChild) {
+      this.mainContainer.removeChild(this.mainContainer.firstChild);
+    }
   }
 
   show404() {