move mmm code from lib to mmm etc

14 files changed, 325 insertions, 31 deletions

diff --git a/root/animations/init.moon b/root/animations/init.moon
index ba8cb91..c968cfd 100644
--- a/root/animations/init.moon
+++ b/root/animations/init.moon
@@ -1,5 +1,5 @@
-import div, h3, ul, li, a from require 'lib.dom'
-import define_fileders from require 'lib.mmmfs'
+import div, h3, ul, li, a from require 'mmm.dom'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 require = relative ...
 
diff --git a/root/animations/koch.moon b/root/animations/koch.moon
index 9b8217d..4d16b8a 100644
--- a/root/animations/koch.moon
+++ b/root/animations/koch.moon
@@ -1,4 +1,4 @@
-import define_fileders from require 'lib.mmmfs'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 
 with Fileder {
@@ -9,8 +9,8 @@ with Fileder {
   if MODE == 'CLIENT'
     Math = window.Math
 
-    import CanvasApp from require 'lib.canvasapp'
-    import hsl from require 'lib.color'
+    import CanvasApp from require 'mmm.canvasapp'
+    import hsl from require 'mmm.color'
 
     class KochDemo extends CanvasApp
       width: 600
diff --git a/root/animations/twisted.moon b/root/animations/twisted.moon
index 9e97738..68bdac6 100644
--- a/root/animations/twisted.moon
+++ b/root/animations/twisted.moon
@@ -1,4 +1,4 @@
-import define_fileders from require 'lib.mmmfs'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 
 with Fileder {
@@ -7,8 +7,8 @@ with Fileder {
   }
 
   if MODE == 'CLIENT'
-    import CanvasApp from require 'lib.canvasapp'
-    import hsl from require 'lib.color'
+    import CanvasApp from require 'mmm.canvasapp'
+    import hsl from require 'mmm.color'
 
     Math = window.Math
 
diff --git a/root/articles/init.moon b/root/articles/init.moon
index b706f7c..483aa32 100644
--- a/root/articles/init.moon
+++ b/root/articles/init.moon
@@ -1,5 +1,5 @@
-import div, h3, ul, li, a from require 'lib.dom'
-import define_fileders from require 'lib.mmmfs'
+import div, h3, ul, li, a from require 'mmm.dom'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 require = relative ...
 
diff --git a/root/articles/mmmfs/gallery.moon b/root/articles/mmmfs/gallery.moon
index e132f42..3abad43 100644
--- a/root/articles/mmmfs/gallery.moon
+++ b/root/articles/mmmfs/gallery.moon
@@ -1,5 +1,5 @@
-import define_fileders from require 'lib.mmmfs'
-import div, h1, a, img, br from require 'lib.dom'
+import define_fileders from require 'mmm.mmmfs'
+import div, h1, a, img, br from require 'mmm.dom'
 
 Fileder = define_fileders ...
 
@@ -23,7 +23,7 @@ with Fileder {
         div content
 
       'slideshow: moon -> mmm/dom': =>
-        import ReactiveVar, text, elements from require 'lib.component'
+        import ReactiveVar, text, elements from require 'mmm.component'
 
         index = ReactiveVar 1
 
diff --git a/root/articles/mmmfs/init.moon b/root/articles/mmmfs/init.moon
index 2b3ef5e..8b1ce01 100644
--- a/root/articles/mmmfs/init.moon
+++ b/root/articles/mmmfs/init.moon
@@ -1,4 +1,4 @@
-import define_fileders from require 'lib.mmmfs'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 require = relative ...
 
@@ -11,7 +11,7 @@ Fileder {
   -- uses the 'moon ->' conversion to execute the lua/pre moon function on get
   -- resolves to a value of type mmm/dom
   'moon -> mmm/dom': () =>
-    html = require 'lib.dom'
+    html = require 'mmm.dom'
     import article, h1, h2, h3, p, div, a, sup, ol, li, span, code, pre, br from html
 
     moon = if MODE == 'SERVER'
@@ -235,7 +235,7 @@ Fileder {
   'title: text/plain': "Hey I'm like a link to picture or smth",
   'URL -> image/png': 'https://picsum.photos/200?random',
   'preview: moon -> mmm/dom': =>
-    import img from require 'lib.dom'
+    import img from require 'mmm.dom'
     img src: @gett 'URL -> image/png' -- look for main content with 'URL to png' type
 }
       ]]
@@ -264,7 +264,7 @@ If you are reading this in the source, then c'mon, just scroll past and give me
 
     -- preview is a lua/pre moon function that neturns an mmm/dom value
     'preview: moon -> mmm/dom': =>
-      import img from require 'lib.dom'
+      import img from require 'mmm.dom'
       img src: @gett 'URL -> image/png' -- look for main content with 'URL to png' type
   }
 
diff --git a/root/articles/realities.moon b/root/articles/realities.moon
index 05c0c03..78d7bae 100644
--- a/root/articles/realities.moon
+++ b/root/articles/realities.moon
@@ -1,11 +1,11 @@
-import define_fileders from require 'lib.mmmfs'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 
 Fileder {
   'name: alpha': 'realities'
   'description: text/plain': 'exploring the nesting relationships of virtual and other realities'
   'moon -> mmm/component': =>
-    import elements from require 'lib.component'
+    import elements from require 'mmm.component'
     import h1, h2, p, a, i, div, ol, li, br, hr, span, button, section, article from elements
 
     _content = div!
diff --git a/root/experiments/center_of_mass.moon b/root/experiments/center_of_mass.moon
index 641fc5a..3d0e924 100644
--- a/root/experiments/center_of_mass.moon
+++ b/root/experiments/center_of_mass.moon
@@ -1,4 +1,4 @@
-import define_fileders from require 'lib.mmmfs'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 
 with Fileder {
@@ -7,9 +7,9 @@ with Fileder {
 }
 
   if MODE == 'CLIENT'
-    import CanvasApp from require 'lib.canvasapp'
-    import rgb from require 'lib.color'
-    import article, h1, p, div, span, input, button from require 'lib.dom'
+    import CanvasApp from require 'mmm.canvasapp'
+    import rgb from require 'mmm.color'
+    import article, h1, p, div, span, input, button from require 'mmm.dom'
 
     fast = true
     center = true
diff --git a/root/experiments/init.moon b/root/experiments/init.moon
index d9f4938..65f3852 100644
--- a/root/experiments/init.moon
+++ b/root/experiments/init.moon
@@ -1,5 +1,5 @@
-import div, h3, ul, li, a from require 'lib.dom'
-import define_fileders from require 'lib.mmmfs'
+import div, h3, ul, li, a from require 'mmm.dom'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 require = relative ...
 
diff --git a/root/experiments/tags/init.moon b/root/experiments/tags/init.moon
index f113e74..611d722 100644
--- a/root/experiments/tags/init.moon
+++ b/root/experiments/tags/init.moon
@@ -1,5 +1,5 @@
-import div, h3, ul, li, a from require 'lib.dom'
-import define_fileders from require 'lib.mmmfs'
+import div, h3, ul, li, a from require 'mmm.dom'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 require = relative ...
 
@@ -8,7 +8,7 @@ Fileder {
   'description: text/plain': 'defining toggles, categories etc. with only tags and functional hooks',
   'moon -> mmm/component': if MODE == 'CLIENT' then =>
     import add_tag, rmv_tag, Node, Hierarchy, Toggle, NamespacedToggle from require '.tags'
-    import ReactiveVar, tohtml, text, elements from require 'lib.component'
+    import ReactiveVar, tohtml, text, elements from require 'mmm.component'
     import article, div, form, span, h3, a, input, textarea, button from elements
 
     clone = (set) ->
diff --git a/root/init.moon b/root/init.moon
index a2eab3b..8639f50 100644
--- a/root/init.moon
+++ b/root/init.moon
@@ -1,12 +1,12 @@
-import define_fileders from require 'lib.mmmfs'
+import define_fileders from require 'mmm.mmmfs'
 Fileder = define_fileders ...
 require = relative ...
 
 Fileder {
   'name: alpha': '',
   'moon -> mmm/dom': =>
-    import article, h1, h3, div, b, p, a, br, ul, tt, li, img from require 'lib.dom'
-    import opairs from require 'lib.ordered'
+    import article, h1, h3, div, b, p, a, br, ul, tt, li, img from require 'mmm.dom'
+    import opairs from require 'mmm.ordered'
 
     append, finish = do
       content = {}
@@ -65,4 +65,5 @@ Fileder {
   require '.articles'
   require '.animations'
   require '.experiments'
+  require '.meta'
 }
diff --git a/root/meta/init.moon b/root/meta/init.moon
new file mode 100644
index 0000000..cd2baed
--- /dev/null
+++ b/root/meta/init.moon
@@ -0,0 +1,27 @@
+import div, h3, ul, li, a from require 'mmm.dom'
+import define_fileders from require 'mmm.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
+
+Fileder {
+  'name: alpha': 'meta',
+  'title: text/plain': 'about mmm',
+  'moon -> mmm/dom': (path) => div {
+      h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+      ul for child in *@children
+        name = child\gett 'name: alpha'
+        desc = child\gett 'description: text/plain'
+        li {
+          a name, {
+            href: child.path,
+            onclick: (e) =>
+              e\preventDefault!
+              BROWSER\navigate child.path
+          },
+          ': ', desc
+        }
+    }
+
+  require '.todo'
+  require '.test_component'
+}
diff --git a/root/meta/test_component.moon b/root/meta/test_component.moon
new file mode 100644
index 0000000..c1c766e
--- /dev/null
+++ b/root/meta/test_component.moon
@@ -0,0 +1,224 @@
+import define_fileders from require 'mmm.mmmfs'
+Fileder = define_fileders ...
+
+Fileder {
+  'name: alpha': 'mmm.component_test'
+  'description: text/plain': 'Tests for mmm.component'
+  'moon -> mmm/dom': =>
+    import article, div, h1, ul, li, pre from require 'mmm.dom'
+
+    _content = {}
+    append = (stuff) -> table.insert _content, stuff
+
+    last = nil
+    test_group = (name) ->
+      if last
+        append div (h1 name), ul last
+
+      last = {}
+      (name, test) ->
+        ok, err = pcall test
+        table.insert last, li if ok
+          "passed '#{name}'"
+        else
+          "failed '#{name}'", pre err
+
+    expect = (expected, note, ...) ->
+      ok, msg = pcall ...
+      print ok, msg\find expected
+      if ok or not msg\find expected
+        error note
+
+    run_test = test_group 'component.moon'
+
+    local ReactiveVar, ReactiveElement
+    run_test "exports ReactiveVar, ReactiveElement", ->
+      import ReactiveVar, ReactiveElement from require 'mmm.component'
+      assert ReactiveVar, "ReactiveVar not exported"
+      assert ReactiveElement, "ReactiveElement not exported"
+
+    run_test "exports tohtml helper", ->
+      import tohtml from require 'mmm.component'
+      assert 'function' == (type tohtml), "tohtml not exported"
+
+    -- @TODO: get_or_create
+
+    run_test "exports text helper", ->
+      import text from require 'mmm.component'
+      assert 'function' == (type text), "text not exported"
+
+      node = text 'a test string'
+      assert (js.instanceof node, js.global.Node), "expected text to generate a Node"
+      assert node.data == 'a test string', "expected text to store the string"
+
+    run_test "text joins multiple arguments", ->
+      import text from require 'mmm.component'
+
+      node = text 'a', 'test', 'string'
+      assert node.data == 'a test string', "expected text to join arguments with spaces"
+
+    run_test "exports elements table", ->
+      import elements from require 'mmm.component'
+
+      assert (type elements.div!) == 'table', "expected to build element with elements.div!"
+      assert (type elements.madeup!) == 'table', "expected to build element with elements.madeup!"
+
+    run_test = test_group 'ReactiveVar'
+
+    run_test "stores a value", ->
+      reactive = ReactiveVar 'test'
+      assert 'test' == reactive\get!, "expected x to be 'test'"
+
+    run_test "propagates updates", ->
+      local done
+
+      reactive = ReactiveVar 'test'
+      reactive\subscribe coroutine.wrap (next) ->
+        assert next == 'toast', "expected next to be 'toast'"
+        assert coroutine.yield! == 'cheese', "expected next to be 'cheese'"
+        done = true
+
+      reactive\set 'toast'
+      assert 'toast' == reactive\get!, "expected #get to return 'toast'"
+      reactive\set 'cheese'
+      assert done, "expected to reach the end"
+
+    run_test "passed old value as well", ->
+      local done
+
+      reactive = ReactiveVar 1
+      reactive\subscribe coroutine.wrap (next, last) ->
+        assert last == 1, "expected last:1 to be 1"
+        next, last = coroutine.yield!
+        assert last == 2, "expected last:2 to be 2"
+        done = true
+
+      reactive\set 2
+      reactive\set 3
+      assert done, "expected to reach the end"
+
+    run_test "provides transform shorthand", ->
+      local done
+
+      reactive = ReactiveVar 1
+      reactive\subscribe coroutine.wrap (next, last) ->
+        assert last == 1, "expected last:1 to be 1"
+        next, last = coroutine.yield!
+        assert last == 2, "expected last:2 to be 2"
+        done = true
+
+      add_one = (a) -> a + 1
+      reactive\transform add_one
+      reactive\transform add_one
+      assert done, "expected to reach the end"
+
+    run_test "#subscribe returns function to unsubscribe", ->
+      calls = 0
+
+      reactive = ReactiveVar 1
+      unsub = reactive\subscribe coroutine.wrap () ->
+        calls += 1
+        coroutine.yield!
+        calls += 1
+        coroutine.yield!
+        calls += 1
+
+      assert 'function' == (type unsub), "expected to receive a function"
+
+      reactive\set 2
+      reactive\set 3
+      assert calls == 2, "wat"
+
+      unsub!
+      reactive\set 4
+      assert calls == 2, "expected to stop receiving updates"
+
+    run_test "tracks multiple subscriptions at once", ->
+      reactive = ReactiveVar 'test'
+      unsub = reactive\subscribe coroutine.wrap (next) ->
+        assert next == 'toast', "expected next to be toast"
+        next = coroutine.yield!
+        assert next == 'cheese', "expected next to be cheese"
+        coroutine.yield!
+        error "expected not to get here"
+
+      reactive\set 'toast'
+
+      local done
+      reactive\subscribe coroutine.wrap (next) ->
+        assert next == 'cheese', "expected next to be cheese"
+        next = coroutine.yield!
+        assert next == 'test', "expected next to be test"
+        done = true
+
+      reactive\set 'cheese'
+      unsub!
+      reactive\set 'test'
+      assert done, "expected to reach the end"
+
+    run_test = test_group 'ReactiveElement'
+
+    run_test "creates a HTML element", ->
+      elem = ReactiveElement 'span'
+      assert elem.node and elem.node.localName == 'span', "expected Node to be a <span>"
+
+    -- @TODO: can take over a DOM Node
+
+    run_test "sets attributes from a table arg", ->
+      elem = ReactiveElement 'span', class: 'never'
+      assert elem.node.class == 'never', "expected class to be 'never'"
+
+    run_test "appends Nodes from arguments", ->
+      e_div, e_pre = div!, pre!
+      elem = ReactiveElement 'span', e_div, e_pre
+      assert elem.node.firstElementChild == e_div, "expected div to be the first child of elem"
+      assert elem.node.lastElementChild == e_pre, "expected pre to be the last child of elem"
+
+    run_test "can append ReactiveElements and text", ->
+      e_div = ReactiveElement 'div'
+      elem = ReactiveElement 'div', e_div, 'testtext'
+      assert elem.node.firstElementChild == e_div.node, "expected div to be the first child of elem"
+      assert elem.node.lastChild.data == 'testtext', "expected last child of elem to be 'testtext'"
+
+    run_test "accepts attributes after children", ->
+      e_div = div!
+      elem = ReactiveElement 'div', e_div, class: 'test'
+      assert elem.node.firstElementChild == e_div, "expected div to be the first child of elem"
+      assert elem.node.class == 'test', "expected class to be 'test'"
+
+    run_test "allows mixing attributes and children in a single table", ->
+      e_div, e_pre = div!, pre!
+      elem = ReactiveElement 'div', { class: 'test', e_div, e_pre }
+      assert elem.node.firstElementChild == e_div, "expected div to be the first child of elem"
+      assert elem.node.lastElementChild == e_pre, "expected pre to be the last child of elem"
+      assert elem.node.class == 'test', "expected class to be 'test'"
+
+    run_test "can unwrap and track attributes from ReactiveVars", ->
+      klass = ReactiveVar 'test'
+      elem = ReactiveElement 'div', class: klass
+      assert elem.node.class == 'test', "expected class to be 'test'"
+      klass\set 'toast'
+      assert elem.node.class == 'toast', "expected class to be 'toast'"
+
+    run_test "can unwrap and track children from ReactiveVars", ->
+      child = ReactiveVar h1 'test'
+      elem = ReactiveElement 'div', child, pre 'fixed'
+      assert elem.node.firstElementChild.localName == 'h1', "expected first child to be h1"
+      assert elem.node.childElementCount == 2, "expected node to have two children"
+      child\set div 'toast'
+      assert elem.node.firstElementChild.localName == 'div', "expected first child to be div"
+      assert elem.node.childElementCount == 2, "expected node to have two children"
+
+    run_test "warns when appending a string from a ReactiveVar", ->
+      import text from require 'mmm.component'
+
+      str = ReactiveVar 'test'
+      elem = ReactiveElement 'div', str
+      expect 'cannot replace string node', 'expected error', str\set, 'string too'
+      elem\destroy!
+
+      elem = ReactiveElement 'div', str\map text
+      str\set 'this is text'
+
+    article _content
+}
diff --git a/root/meta/todo.moon b/root/meta/todo.moon
new file mode 100644
index 0000000..eb6fc0d
--- /dev/null
+++ b/root/meta/todo.moon
@@ -0,0 +1,42 @@
+import define_fileders from require 'mmm.mmmfs'
+Fileder = define_fileders ...
+
+Fileder {
+  'name: alpha': 'todo'
+  'description: text/plain': 'TodoMVC using mmm.component'
+  'moon -> mmm/component': =>
+    import ReactiveVar, text, elements from require 'mmm.component'
+    import article, div, form, span, h3, a, input, textarea, button from elements
+
+    parent = div!
+    todoItem = (desc, done) ->
+      -- convert into reactive data sources
+      desc, done = (ReactiveVar desc), ReactiveVar done
+      with me = div style:
+          margin: '8px'
+          padding: '8px'
+          background: '#eeeeee'
+        \append h3 (desc\map text), style: 'margin: 0;'
+        \append span done\map (done) -> text if done then 'done' else 'not done yet'
+        \append input type: 'checkbox', checked: done, onchange: (e) => done\set e.target.checked
+        \append a (text 'delete'), href: '#', onclick: (e) => parent\remove me
+
+    parent\append todoItem 'write a Component System', true
+    parent\append todoItem 'eat Lasagna', true
+    parent\append todoItem 'do other things'
+
+    desc = ReactiveVar 'start'
+    form = with form {
+        action: ''
+        style:
+          margin: '2px'
+        onsubmit: (e) =>
+          e\preventDefault!
+          parent\append todoItem desc\get!
+          desc\set ''
+      }
+      \append input type: 'text', value: desc, onchange: (e) => desc\set e.target.value
+      \append input type: 'submit', value: 'add'
+
+    article parent, form
+}