Merge pull request #48 from dillonkearns/fix-missing-content-flash

Fix missing content flash
dillonkearns · Jan 21, 2020 · 446f114 · 446f114
2 parents acbf631 + 838b7c0
commit 446f114
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 37 deletions.
diff --git a/CHANGELOG-ELM.md b/CHANGELOG-ELM.md
@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.1.2] - 2020-01-20
+
+### Fixed
+- "Missing content" message no longer flashes between pre-rendered HTML and the Elm app hydrating and taking over the page. See [#48](https://github.com/dillonkearns/elm-pages/pull/48).
+
 ## [1.1.1] - 2020-01-04
 
 ### Fixed

diff --git a/CHANGELOG-NPM.md b/CHANGELOG-NPM.md
@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.1.8] - 2020-01-20
+
+### Fixed
+- "Missing content" message no longer flashes between pre-rendered HTML and the Elm app hydrating and taking over the page. See [#48](https://github.com/dillonkearns/elm-pages/pull/48).
+
 ## [1.1.7] - 2020-01-12
 
 ### Fixed

diff --git a/generator/src/develop.js b/generator/src/develop.js
@@ -2,6 +2,7 @@ const webpack = require("webpack");
 const middleware = require("webpack-dev-middleware");
 const path = require("path");
 const HTMLWebpackPlugin = require("html-webpack-plugin");
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
 const PrerenderSPAPlugin = require("prerender-spa-plugin");
 const merge = require("webpack-merge");
@@ -159,6 +160,10 @@ function webpackOptions(
         inject: "head",
         template: path.resolve(__dirname, "template.html")
       }),
+      new ScriptExtHtmlWebpackPlugin({
+        preload: /\.js$/,
+        defaultAttribute: 'defer'
+      }),
       new FaviconsWebpackPlugin({
         logo: path.resolve(process.cwd(), `./${manifestConfig.sourceIcon}`),
         favicons: {

diff --git a/generator/src/template.html b/generator/src/template.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="preload" href="content.json" as="fetch" crossorigin />
+    <link rel="preload" href="./content.json" as="fetch" crossorigin />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>

diff --git a/index.js b/index.js
@@ -7,9 +7,13 @@ module.exports = function pagesInit(
   let prefetchedPages = [window.location.pathname];
 
   document.addEventListener("DOMContentLoaded", function() {
+  httpGet(`${window.location.origin}${window.location.pathname}/content.json`, function (/** @type JSON */ contentJson) {
+
     let app = mainElmModule.init({
       flags: {
-        secrets: null
+        secrets: null,
+        isPrerendering: navigator.userAgent.indexOf("Headless") >= 0,
+        contentJson
       }
     });
 
@@ -33,6 +37,9 @@ module.exports = function pagesInit(
 
       document.dispatchEvent(new Event("prerender-trigger"));
     });
+
+  })
+
   });
 
   function setupLinkPrefetching() {
@@ -130,3 +137,14 @@ module.exports = function pagesInit(
     document.getElementsByTagName("head")[0].appendChild(meta);
   }
 };
+
+function httpGet(/** @type string */ theUrl, /** @type Function */ callback)
+{
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function() { 
+        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+            callback(JSON.parse(xmlHttp.responseText));
+    }
+    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
+    xmlHttp.send(null);
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "node-sass": "^4.12.0",
     "prerender-spa-plugin": "^3.4.0",
     "sass-loader": "^8.0.0",
+    "script-ext-html-webpack-plugin": "^2.1.4",
     "style-loader": "^1.0.0",
     "webpack": "^4.41.5",
     "webpack-dev-middleware": "^3.7.0",

diff --git a/src/Pages/ContentCache.elm b/src/Pages/ContentCache.elm
@@ -111,9 +111,10 @@ pagesWithErrors cache =
 init :
     Document metadata view
     -> Content
+    -> Maybe { contentJson : ContentJson String, initialUrl : Url }
     -> ContentCache metadata view
-init document content =
-    parseMetadata document content
+init document content maybeInitialPageContent =
+    parseMetadata maybeInitialPageContent document content
         |> List.map
             (\tuple ->
                 Tuple.mapSecond
@@ -149,39 +150,48 @@ createBuildError path decodeError =
 
 
 parseMetadata :
-    Document metadata view
+    Maybe { contentJson : ContentJson String, initialUrl : Url }
+    -> Document metadata view
     -> List ( List String, { extension : String, frontMatter : String, body : Maybe String } )
     -> List ( List String, Result String (Entry metadata view) )
-parseMetadata document content =
+parseMetadata maybeInitialPageContent document content =
     content
         |> List.map
-            (Tuple.mapSecond
-                (\{ frontMatter, extension, body } ->
-                    let
-                        maybeDocumentEntry =
-                            Document.get extension document
-                    in
-                    case maybeDocumentEntry of
-                        Just documentEntry ->
-                            frontMatter
-                                |> documentEntry.frontmatterParser
-                                |> Result.map
-                                    (\metadata ->
-                                        -- TODO do I need to handle this case?
-                                        --                                        case body of
-                                        --                                            Just presentBody ->
-                                        --                                                Parsed metadata
-                                        --                                                    { body = parseContent extension presentBody document
-                                        --                                                    , staticData = ""
-                                        --                                                    }
-                                        --
-                                        --                                            Nothing ->
-                                        NeedContent extension metadata
-                                    )
+            (\( path, { frontMatter, extension, body } ) ->
+                let
+                    maybeDocumentEntry =
+                        Document.get extension document
+                in
+                case maybeDocumentEntry of
+                    Just documentEntry ->
+                        frontMatter
+                            |> documentEntry.frontmatterParser
+                            |> Result.map
+                                (\metadata ->
+                                    let
+                                        renderer =
+                                            \value ->
+                                                parseContent extension value document
+                                    in
+                                    case maybeInitialPageContent of
+                                        Just { contentJson, initialUrl } ->
+                                            if initialUrl.path == ("/" ++ String.join "/" path) then
+                                                Parsed metadata
+                                                    { body = renderer contentJson.body
+                                                    , staticData = contentJson.staticData
+                                                    }
+
+                                            else
+                                                NeedContent extension metadata
+
+                                        Nothing ->
+                                            NeedContent extension metadata
+                                )
+                            |> Tuple.pair path
 
-                        Nothing ->
-                            Err ("Could not find extension '" ++ extension ++ "'")
-                )
+                    Nothing ->
+                        Err ("Could not find extension '" ++ extension ++ "'")
+                            |> Tuple.pair path
             )
 
 
@@ -327,8 +337,8 @@ lazyLoad document url cacheResult =
                                 |> Task.map
                                     (\downloadedContent ->
                                         update cacheResult
-                                            (\thing ->
-                                                parseContent extension thing document
+                                            (\value ->
+                                                parseContent extension value document
                                             )
                                             url
                                             downloadedContent

diff --git a/src/Pages/Internal/Platform.elm b/src/Pages/Internal/Platform.elm
@@ -217,6 +217,12 @@ type alias Flags =
     Decode.Value
 
 
+type alias ContentJson =
+    { body : String
+    , staticData : Dict String String
+    }
+
+
 init :
     pathKey
     -> String
@@ -249,11 +255,33 @@ init :
 init pathKey canonicalSiteUrl document toJsPort viewFn content initUserModel flags url key =
     let
         contentCache =
-            ContentCache.init document content
+            ContentCache.init document content (Maybe.map (\cj -> { contentJson = cj, initialUrl = url }) contentJson)
+
+        contentJson =
+            flags
+                |> Decode.decodeValue (Decode.field "contentJson" contentJsonDecoder)
+                |> Result.toMaybe
+
+        contentJsonDecoder : Decode.Decoder ContentJson
+        contentJsonDecoder =
+            Decode.map2 ContentJson
+                (Decode.field "body" Decode.string)
+                (Decode.field "staticData" (Decode.dict Decode.string))
     in
     case contentCache of
         Ok okCache ->
             let
+                phase =
+                    case Decode.decodeValue (Decode.field "isPrerendering" Decode.bool) flags of
+                        Ok True ->
+                            Prerender
+
+                        Ok False ->
+                            Client
+
+                        Err _ ->
+                            Client
+
                 ( userModel, userCmd ) =
                     initUserModel maybePagePath
 
@@ -284,6 +312,7 @@ init pathKey canonicalSiteUrl document toJsPort viewFn content initUserModel fla
               , url = url
               , userModel = userModel
               , contentCache = contentCache
+              , phase = phase
               }
             , cmd
             )
@@ -297,6 +326,7 @@ init pathKey canonicalSiteUrl document toJsPort viewFn content initUserModel fla
               , url = url
               , userModel = userModel
               , contentCache = contentCache
+              , phase = Client
               }
             , Cmd.batch
                 [ userCmd |> Cmd.map UserMsg
@@ -333,9 +363,15 @@ type alias ModelDetails userModel metadata view =
     , url : Url.Url
     , contentCache : ContentCache metadata view
     , userModel : userModel
+    , phase : Phase
     }
 
 
+type Phase
+    = Prerender
+    | Client
+
+
 update :
     String
     ->
@@ -524,7 +560,20 @@ application config =
             \msg outerModel ->
                 case outerModel of
                     Model model ->
-                        update config.canonicalSiteUrl config.view config.pathKey config.onPageChange config.toJsPort config.document config.update msg model
+                        let
+                            userUpdate =
+                                case model.phase of
+                                    Prerender ->
+                                        noOpUpdate
+
+                                    Client ->
+                                        config.update
+
+                            noOpUpdate =
+                                \userMsg userModel ->
+                                    ( userModel, Cmd.none )
+                        in
+                        update config.canonicalSiteUrl config.view config.pathKey config.onPageChange config.toJsPort config.document userUpdate msg model
                             |> Tuple.mapFirst Model
                             |> Tuple.mapSecond (Cmd.map AppMsg)
 

diff --git a/src/Pages/Internal/Platform/Cli.elm b/src/Pages/Internal/Platform/Cli.elm
@@ -160,7 +160,7 @@ cliApplication :
 cliApplication cliMsgConstructor narrowMsg toModel fromModel config =
     let
         contentCache =
-            ContentCache.init config.document config.content
+            ContentCache.init config.document config.content Nothing
 
         siteMetadata =
             contentCache