keep last content and display nice errors when problems occur

4 files changed, 64 insertions, 13 deletions

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..9414382
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+Dockerfile
diff --git a/Tupfile b/Tupfile
index 5c17a0e..ae63873 100644
--- a/Tupfile
+++ b/Tupfile
@@ -1,7 +1,7 @@
 include_rules
 
 !download = |> ^ DOWNLOAD %O^ curl -L https://github.com/fengari-lua/fengari-web/releases/download/@(FENGARI_VERSION)/`basename %o` > %o |>
-!sassc    = |> ^ SCSS %b^ sassc -m %f %o |> | %o.map
+!sassc    = |> ^ SCSS %b^ sassc -m auto %f %o |> | %o.map
 
 # download fengari dependencies
 : |> !download |> root/fengari-web.js
diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index f05850c..ca77b9c 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -5,6 +5,12 @@ import ReactiveVar, get_or_create, text, elements from require 'mmm.component'
 import pre, div, nav, span, button, a, select, option from elements
 import languages from require 'mmm.highlighting'
 
+keep = (var) ->
+  last = var\get!
+  var\map (val) ->
+    last = val or last
+    last
+
 code_cast = (lang) ->
   {
     inp: "text/#{lang}.*",
@@ -121,13 +127,18 @@ class Browser
           if not enabled
             button 'inspect', onclick: (_, e) -> @inspect\set true
 
+    @error = ReactiveVar!
+    main\append with get_or_create 'div', 'browser-error', class: @error\map (e) -> if e then 'error-wrap' else 'error-wrap empty'
+      \append (span "an error occured while rendering this view:"), (rehydrate and .node.firstChild)
+      \append @error
+
     -- append or patch #browser-content
     main\append with get_or_create 'div', 'browser-content', class: 'content'
-      content = ReactiveVar @get_content @facet\get!
+      content = ReactiveVar if rehydrate then .node.lastChild else @get_content @facet\get!
+      \append keep content
       if MODE == 'CLIENT'
         @facet\subscribe (p) ->
           window\setTimeout (-> content\set @get_content p), 150
-      \append content, (rehydrate and .node.lastChild)
 
     if rehydrate
       -- force one rerender to set onclick handlers etc
@@ -144,8 +155,15 @@ class Browser
   default_convert = (key) => @get key.name, 'mmm/dom'
 
   -- render #browser-content
-  get_content: (prop, convert=default_convert) =>
-    disp_error = (msg) -> pre msg, style: { color: '#f00' }
+  get_content: (prop, err=@error, convert=default_convert) =>
+    clear_error = ->
+      err\set! if MODE == 'CLIENT'
+    disp_error = (msg) ->
+      if MODE == 'CLIENT'
+        err\set pre msg
+      warn "ERROR rendering content: #{msg}"
+      nil
+
     active = @active\get!
 
     return disp_error "fileder not found!" unless active
@@ -155,14 +173,17 @@ class Browser
 
     document.body.classList\remove 'loading' if MODE == 'CLIENT'
 
-    if ok
-      res or disp_error "[no conversion path to #{prop.type}]"
+    if ok and res
+      clear_error!
+      res
+    elseif ok
+      div "[no conversion path to #{prop.type}]"
     elseif res and res.match and res\match '%[nossr%]$'
-      warn '(SSR disabled)'
-      div!
+      div "[this page could not be pre-renderer on the server]"
     else
-      warn "error: #{res}", trace
-      disp_error "error: #{res}\n#{trace}"
+      if trace
+        res = "#{res}\n#{trace}"
+      disp_error res
 
   get_inspector: =>
     -- active facet in inspect tab
@@ -173,6 +194,8 @@ class Browser
       key = key.original if key and key.original
       key
 
+    @inspect_err = ReactiveVar!
+
     with div class: 'view inspector'
       \append nav {
         span 'inspector'
@@ -195,9 +218,12 @@ class Browser
           if enabled
             button 'close', onclick: (_, e) -> @inspect\set false
       }
+      \append with div class: @inspect_err\map (e) -> if e then 'error-wrap' else 'error-wrap empty'
+        \append span "an error occured while rendering this view:"
+        \append @inspect_err
       \append with pre class: 'content'
-        \append @inspect_prop\map (prop) ->
-          @get_content prop, (prop) =>
+        \append keep @inspect_prop\map (prop, old) ->
+          @get_content prop, @inspect_err, (prop) =>
             value, key = @get prop
             assert key, "couldn't @get #{prop}"
 
diff --git a/scss/_browser.scss b/scss/_browser.scss
index 6a0d78b..4d4a260 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -67,6 +67,30 @@
       }
     }
 
+    .error-wrap {
+      flex: 0 0 auto;
+      padding: 1em 2em;
+      overflow: hidden;
+
+      background: $gray-fail;
+
+      &.empty {
+        display: none;
+      }
+
+      > span {
+        display: inline-block;
+        margin-bottom: 0.5em;
+
+        font-weight: bold;
+        color: #f00;
+      }
+
+      > pre {
+        margin: 0;
+      }
+    }
+
     .content {
       flex: 1 1 auto;
       overflow: auto;