Fix #1804, make bundle scripts and raven activation async

mozilla-services · Nov 16, 2016 · e4ac283 · e4ac283
1 parent 6c34ecf
commit e4ac283
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 9 deletions.
diff --git a/server/src/pages/creating/view.js b/server/src/pages/creating/view.js
@@ -7,7 +7,7 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <script src={this.props.staticLink("/static/js/creating-bundle.js")}></script>
+        <script src={this.props.staticLink("/static/js/creating-bundle.js")} async></script>
         <link rel="stylesheet" href={this.props.staticLink("/static/css/simple.css")} />
       </reactruntime.HeadTemplate>
     );

diff --git a/server/src/pages/homepage/view.js b/server/src/pages/homepage/view.js
@@ -7,7 +7,7 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <script src={this.props.staticLink("/static/js/homepage-bundle.js")}></script>
+        <script src={this.props.staticLink("/static/js/homepage-bundle.js")} async></script>
         <link rel="stylesheet" href={this.props.staticLink("/static/css/styles.css")} />
         <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
         <meta name="description" content="Share anything on the web with anyone using Page Shot." />

diff --git a/server/src/pages/leave-page-shot/view.js b/server/src/pages/leave-page-shot/view.js
@@ -8,7 +8,7 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <script src={this.props.staticLink("/static/js/leave-bundle.js")}></script>
+        <script src={this.props.staticLink("/static/js/leave-bundle.js")} async></script>
         <link rel="stylesheet" href={ this.props.staticLink("/static/css/warning-page.css") } />
       </reactruntime.HeadTemplate>
     );

diff --git a/server/src/pages/metrics/view.js b/server/src/pages/metrics/view.js
@@ -7,7 +7,7 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <script src={this.props.staticLink("/static/js/metrics-bundle.js")}></script>
+        <script src={this.props.staticLink("/static/js/metrics-bundle.js")} async></script>
         <link rel="stylesheet" href={this.props.staticLink("/static/css/metrics.css")} />
       </reactruntime.HeadTemplate>
     );

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -102,15 +102,15 @@ class Head extends React.Component {
     if (expired) {
       return (
         <reactruntime.HeadTemplate {...this.props}>
-          <script src={ this.props.staticLink("/static/js/shot-bundle.js") } />
+          <script src={ this.props.staticLink("/static/js/shot-bundle.js") } async />
           <link rel="stylesheet" href={ this.props.staticLink("/static/css/frame.css") } />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </reactruntime.HeadTemplate>
       );
     } else {
       return (
         <reactruntime.HeadTemplate {...this.props}>
-          <script src={ this.props.staticLink("/static/js/shot-bundle.js") } />
+          <script src={ this.props.staticLink("/static/js/shot-bundle.js") } async />
           <link rel="stylesheet" href={ this.props.staticLink("/static/css/frame.css") } />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <link rel="alternate" type="application/json+oembed" href={this.props.shot.oembedUrl} title={`${this.props.shot.title} oEmbed`} />

diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -10,7 +10,7 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <script src={this.props.staticLink("/static/js/shotindex-bundle.js")}></script>
+        <script src={this.props.staticLink("/static/js/shotindex-bundle.js")} async></script>
         <link rel="stylesheet" href={this.props.staticLink("/static/css/shot-index.css")} />
       </reactruntime.HeadTemplate>
     );

diff --git a/server/src/reactrender.js b/server/src/reactrender.js
@@ -45,7 +45,15 @@ exports.render = function (req, res, page) {
     `.trim();
     if (! page.noBrowserJavascript) {
       // FIXME: we should just inline the addReactScripts functionality in this function:
-      doc = addReactScripts(doc, `controller.launch(${JSON.stringify(jsonModel)});`, req.cspNonce);
+      let script = `\
+window.initialModel = ${JSON.stringify(jsonModel)};
+window.initialModelLaunched = false;
+if (window.controller) {
+  window.controller.launch(window.initialModel);
+  window.initialModelLaunched = true;
+}
+`;
+      doc = addReactScripts(doc, script, req.cspNonce);
     }
     res.send(doc);
   }).catch((err) => {

diff --git a/server/src/reactruntime.js b/server/src/reactruntime.js
@@ -28,7 +28,7 @@ exports.HeadTemplate = class HeadTemplate extends React.Component {
         <link rel="shortcut icon" href={this.props.staticLink("/static/img/pageshot-icon-32.png")} />
         { analyticsScript }
         { activationScript }
-        { this.props.sentryPublicDSN ? <script src={this.props.staticLink("/install-raven.js")} /> : null }
+        { this.props.sentryPublicDSN ? <script src={this.props.staticLink("/install-raven.js")} async /> : null }
         {this.props.children}
       </head>
     );
@@ -108,3 +108,12 @@ exports.Page = class Page {
 exports.Page.prototype.ATTRS = `
 dir viewModule noBrowserJavascript
 `.split(/\s+/g);
+
+if (typeof window !== "undefined") {
+  setTimeout(() => {
+    if (window.initialModel !== undefined && ! window.initialModelLaunched) {
+      window.initialModelLaunched = true;
+      window.controller.launch(window.initialModel);
+    }
+  });
+}