REHYDRATION

3 files changed, 61 insertions, 34 deletions

diff --git a/lib/component.client.moon b/lib/component.client.moon
index 7357f50..6e0e8d8 100644
--- a/lib/component.client.moon
+++ b/lib/component.client.moon
@@ -65,7 +65,10 @@ class ReactiveElement
   @isinstance: (val) -> 'table' == (type val) and val.node
 
   new: (element, ...) =>
-    @node = document\createElement element
+    if 'userdata' == type element
+      @node = element
+    else
+      @node = document\createElement element
     @_subscriptions = {}
 
     children = { ... }
@@ -105,7 +108,8 @@ class ReactiveElement
 
     @node[attr] = value
 
-  append: (child, last) =>
+  prepend: (child, last) => @append child, last, 'prepend'
+  append: (child, last, mode='append') =>
     if ReactiveVar.isinstance child
       table.insert @_subscriptions, child\subscribe (...) -> @append ...
       child = child\get!
@@ -123,7 +127,9 @@ class ReactiveElement
     if ok
       @node\replaceChild child, last
     else
-      @node\appendChild child
+      switch mode
+        when 'append' then @node\appendChild child
+        when 'prepend' then @node\insertBefore child, @node.firstChild
 
   remove: (child) =>
     @node\removeChild tohtml child
diff --git a/lib/component.server.moon b/lib/component.server.moon
index 91858c0..85d97eb 100644
--- a/lib/component.server.moon
+++ b/lib/component.server.moon
@@ -32,7 +32,7 @@ class ReactiveVar
   get: => @value
 
   subscribe: (callback) =>
-    error "attempting to subscribe to ReactiveVar serverside"
+    warn "attempting to subscribe to ReactiveVar serverside"
 
   map: (transform) =>
     ReactiveVar transform @value
diff --git a/lib/mmmfs/browser.moon b/lib/mmmfs/browser.moon
index 1a9bca9..a4080c2 100644
--- a/lib/mmmfs/browser.moon
+++ b/lib/mmmfs/browser.moon
@@ -1,15 +1,15 @@
 require = relative ..., 1
 import Key from require '.fileder'
 import get_conversions from require '.conversion'
-import ReactiveVar, text, elements from require 'lib.component'
+import ReactiveVar, ReactiveElement, text, elements from require 'lib.component'
 import div, span, a, select, option from elements
 
 limit = (list, num) -> [v for i,v in ipairs list when i <= num]
 
 class Browser
-  new: (@root) =>
-    @path = ReactiveVar {}
-    @path\subscribe (path) -> window.location.hash = '/' .. table.concat path, '/'
+  new: (@root, @path={}, rehydrate=false) =>
+    @path = ReactiveVar @path
+    -- @path\subscribe (path) -> window.location.hash = '/' .. table.concat path, '/'
     @prop = ReactiveVar (@root\find 'mmm/dom') or next @root.props
     @active = @path\map (path) ->
       fileder = @root
@@ -29,7 +29,11 @@ class Browser
 
     @active\subscribe (fileder) -> @prop\set (fileder\find 'mmm/dom') or next fileder.props
 
-    @tree = div {
+    -- retrieve or create the root
+    root = 'div'
+    root = document\getElementById 'browser-root' if rehydrate
+    @dom = ReactiveElement root, {
+      id: 'browser-root'
       style: {
         position: 'absolute',
         top: 0,
@@ -40,8 +44,12 @@ class Browser
         overflow: 'hidden',
         'flex-direction': 'column',
         'justify-content': 'space-between',
-      },
-      div {
+      }
+    }
+
+    -- add or prepend the navbar
+    if MODE == 'CLIENT'
+      @dom\prepend div {
         style: {
           padding: '1em',
           flex: '0 0 auto',
@@ -72,34 +80,47 @@ class Browser
                 \append option value, :value, selected: value == current
       }
 
-      div {
-        style: {
-          flex: '1 0 0',
-          overflow: 'auto',
-          padding: '1em 2em',
-        },
-        @prop\map (prop) ->
-          active = @active\get!
+    -- append or patch #browser-content
+    node = 'div'
+    node = document\getElementById 'browser-content' if rehydrate
+    @dom\append ReactiveElement node, {
+      id: 'browser-content',
+      style: {
+        flex: '1 0 0',
+        overflow: 'auto',
+        padding: '1em 2em',
+      },
+      @get_content rehydrate and node
+    }
 
-          ok, res = pcall ->
-            conversions = assert (get_conversions 'mmm/dom', prop.type), "no conversion path"
-            value = assert (active\get prop), "value went missing?"
+    @node = @dom.node
+    @render = @dom\render
 
-            for i=#conversions,1,-1
-              { :inp, :out, :transform } = conversions[i]
-              value = transform value, active
+  get_content: (wrapper) =>
+    var = @prop\map (prop) ->
+      active = @active\get!
 
-            value
+      ok, res = pcall ->
+        conversions = assert (get_conversions 'mmm/dom', prop.type), "no conversion path"
+        value = assert (active\get prop), "value went missing?"
 
-          if ok and res
-            res
-          else
-            warn "error: ", res unless ok
-            span "cannot display!", style: { color: '#f00' }
-      }
-    }
+        for i=#conversions,1,-1
+          { :inp, :out, :transform } = conversions[i]
+          value = transform value, active
+
+        value
+
+      if ok and res
+        res
+      else
+        warn "error: ", res unless ok
+        span "cannot display!", style: { color: '#f00' }
+
+    -- wrapper was built already so take over the old value
+    if wrapper
+      var\set wrapper.lastElementChild
 
-    @node = @tree.node
+    var
 
   navigate: (new) => @path\set new