rename to mmmfs, add canvas on client

3 files changed, 401 insertions, 0 deletions

diff --git a/app/mmmfs/init.moon b/app/mmmfs/init.moon
new file mode 100644
index 0000000..0808aee
--- /dev/null
+++ b/app/mmmfs/init.moon
@@ -0,0 +1,149 @@
+export ^
+
+interps = {
+  {
+    name: 'moon',
+    transform: (method) => method @
+  },
+}
+
+split = (str, delim='->') ->
+  return {}, str if nil == str\find delim
+
+  -- @TODO interp chain?
+  interp, rest = str\match ' *(%w+) *-> *(.*)'
+  { interp }, rest
+
+class Key
+  new: (opts) =>
+    if 'string' == type opts
+      @name, rest = opts\match '(%w+): *(.+)'
+      if not @name
+        @name = ''
+        rest = opts
+      @interps, @type = split rest, '->'
+    elseif 'table' == type opts
+      @name = opts.name
+      @type = assert opts.type, 'no type given'
+      @interps = opts.interps or {}
+    else
+      error 'wrong argument type'
+
+  -- get a function that interpretes thi type according to @interps
+  get_interp: (overrides) =>
+    return ((val) => val) if #@interps == 0
+
+    assert #@interps == 1, 'not supported rn' -- @TODO
+    _name = @interps[1]
+
+    return overrides[_name] if overrides and overrides[_name]
+
+    for { :name, :transform } in *interps
+      if name == _name
+        return transform
+
+    error "interp not found: '#{_name}'"
+
+converts = {
+  {
+    inp: 'mmm/dom',
+    out: 'text/html',
+    transform: (node) -> if MODE == 'SERVER' then node else node.outerHTML
+  },
+  {
+    inp: 'mmm/component',
+    out: 'mmm/dom',
+    transform: (...) ->
+      import tohtml from require 'lib.component'
+      tohtml ...
+  },
+  {
+    -- @TODO this chained rule *should* be inferred, but that's way too hot rn
+    inp: 'mmm/component',
+    out: 'text/html',
+    transform: (node) ->
+      import tohtml from require 'lib.component'
+
+      node = tohtml node
+      if MODE == 'SERVER' then node else node.outerHTML
+  },
+}
+
+table.insert converts, {
+  inp: 'text/html',
+  out: 'mmm/dom',
+  transform: if MODE == 'SERVER'
+    (...) -> ...
+  else
+    (html) ->
+      tmp = document\createElement 'div'
+      tmp.innerHTML = html
+      tmp.firstChild
+  }
+
+do
+  local markdown
+  if MODE == 'SERVER'
+    success, discount = pcall require, 'discount'
+    markdown = discount if success
+  else
+    markdown = window and window\marked
+
+  if markdown
+    table.insert converts, {
+      inp: 'text/markdown',
+      out: 'text/html',
+      transform: markdown,
+    }
+
+    -- @TODO chained w above
+    table.insert converts, {
+     inp: 'text/markdown',
+      out: 'mmm/dom',
+      transform: if MODE == 'SERVER'
+        (md) -> markdown md
+      else
+        (md) ->
+          with document\createElement 'div'
+            .innerHTML = markdown md
+    }
+
+class Fileder
+  new: (props, @children) =>
+    if not @children
+      @children = for i, child in ipairs props
+        props[i] = nil
+        child
+
+    @props = { (Key k), v for k, v in pairs props }
+
+  gett: (...) => assert @get ...
+  get: (name='', type, overrides) =>
+    if not type
+      type = name
+      name = ''
+
+    -- first pass, interps only
+    for key, value in pairs @props
+      continue unless key.name == name and key.type == type
+
+      interp = key\get_interp overrides
+
+      return interp @, value
+
+    if not overrides
+      -- second pass, interps + converts
+      for key, value in pairs @props
+        continue unless key.name == name
+
+        interp = key\get_interp!
+
+        for { :inp, :out, :transform } in *converts
+          return transform interp @, value if inp == key.type and out == type
+
+    nil, "node doesn't have value for #{name}:#{type}"
+
+require = relative ...
+root = require '.tree'
+
+append root\gett 'mmm/dom'
diff --git a/app/mmmfs/tree.moon b/app/mmmfs/tree.moon
new file mode 100644
index 0000000..ee25490
--- /dev/null
+++ b/app/mmmfs/tree.moon
@@ -0,0 +1,215 @@
+require = relative ..., 1
+
+Fileder {
+  'moon -> mmm/dom': () =>
+    html = require 'lib.html'
+    import article, h1, h2, h3, p, div, a, sup, ol, li, span, code, pre, br from html
+
+    code = do
+      _code = code
+      (str) -> _code str\match '^ *(..-) *$'
+
+    center = (contents) ->
+      contents.style = { margin: 'auto', 'max-width': '750px' }
+      article contents
+
+    center with  _this = {}
+      append = (a) -> table.insert _this, a
+
+      footnote, getnotes = do
+        local *
+        notes = {}
+
+        id = (i) -> "footnote-#{i}"
+
+        footnote = (stuff) ->
+          i = #notes + 1
+          notes[i] = stuff
+          sup a "[#{i}]", style: { 'text-decoration': 'none' }, href: '#' .. id i
+
+        footnote, ->
+          args = for i, note in ipairs notes
+            li (span (tostring i), id: id i), ': ', note
+          notes = {}
+          table.insert args, style: { 'list-style': 'none', 'font-size': '0.8em' }
+          ol table.unpack args
+
+      append h1 'mmmfs', style: { 'margin-bottom': 0 }
+      append p "(it's a terrible name, isn't it)", style: { 'margin-top': 0, 'margin-bottom': '1em' }
+
+      append p do
+        fileder = footnote "fileder: file + folder. 'node', 'table' etc. are too general to be used all over."
+        child = footnote "fileders can have multiple values, like the mentioned script, but these are not considered
+          children of the fileder, as they are not fileders themselves. One fileder can have many values of different
+          types/keys associated, but these have unspecified schemas and don't nest. In addition it can have many
+          children, which are fileders themselves and can nest, but they are not labelled."
+
+        "in mmmfs, directories are files and files are directories, or something like that.
+        Listen, I don't really know yet either. The idea is that every node knows how to render it's contents;
+        so for example your 'Pictures' fileder", fileder, " contains a script within itself that renders
+        all the picture files you put into it at the children level", child, "."
+
+      append do
+        mmmdom = code ('mmm/dom'), footnote span (code 'mmm/dom'), " is a polymorphic content type;
+          on the server it is just an HTML string (like ", (code 'text/html'), "),
+          but on the client it is a JS DOM Element instance."
+        fengari = a 'fengari.io', href: 'https://fengari.io'
+        p "What you are viewing right now is a fileder that has a Lua/Moonscript function as a value which
+          is rendering all this text. It returns a value whose type interface is known as ", mmmdom, ", which is
+          basically an HTML subtree. The function can be run, and the results generated, statically on the server
+          (resulting in an HTML file), or dynamically on the client (via ", fengari, ").", br!,
+          "The function is passed the fileder itself (as a Lua table) and potentially also receives some other
+          helpers for accessing it's environment (parent fileders, functions for querying the tree etc) or info
+          specific to the function key/type, but I haven't built or thought about any of that yet. Sorry."
+
+      append do
+        github = footnote a 's-ol/mmm', href: 'https://github.com/s-ol/mmm'
+        p "Anyway, this node is set up as some sort of wiki/index thing and just lists its children-fileders' ", (code 'title: text/plain'),
+          " values and ", (code 'preview: mmm/dom'), " previews (if set). Oh and also everything is on github and stuff", github,
+          " if you care about that."
+
+      append p "Here's the Children:"
+
+      -- render a preview block
+      preview = (title, content) -> div {
+        h3 title, style: { margin: 0 },
+        content or span '(no renderable content)', style: { color: 'red' },
+        style: {
+          display: 'inline-block',
+          width: '300px',
+          height: '200px',
+          padding: '4px',
+          margin: '8px',
+          border: '4px solid #eeeeee',
+          overflow: 'hidden',
+        },
+      }
+
+      append div for child in *@children
+        title = child\gett 'title', 'text/plain'  -- get 'title' as 'text/plain' (error if no value or conversion possible)
+        content = child\get 'preview', 'mmm/dom'  -- get 'preview' as a DOM description (nil if no value or conversion possible)
+        preview title, content
+
+      append h2 "converts"
+      append p "Well actually it's a bit more complex. You see, the code that renders these previews ", (html.i "asks"), " for those
+        name/type pairs (", (code 'title: text/plain'), ' ', (code 'preview: mmm/dom'), "), but the values don't actually have to
+        be ", (html.i "defined"), " as these types."
+
+      append pre code [[
+-- render a preview block
+preview = (title, content) -> div {
+  h3 title, style: { ... },
+  content or span '(no renderable content)', style: { ... },
+  style: { ... }
+}
+
+append div for child in *@children
+  title = child\gett 'title', 'text/plain'  -- get 'title' as 'text/plain' (error if no value or conversion possible)
+  content = child\get 'preview', 'mmm/dom'  -- get 'preview' as a DOM description (nil if no value or conversion possible)
+  preview title, content
+      ]]
+
+      append p "For example, the markdown child below only provides ", (code 'preview'), " as ", (code 'text/markdown'), ":"
+
+      append pre code [[
+Fileder {
+  'title: text/plain': "I'm not even five lines of markdown but i render myself!",
+  'preview: text/markdown': "See I have like
+
+- a list of things
+- (two things)
+
+and some bold **text** and `code tags` with me.",
+}
+      ]]
+
+      append p "Then, globally, there are some conversion paths specified; such as one that maps from ",
+        (code 'text/markdown'), " to ", (code 'mmm/dom'), ":"
+
+      append pre code [[
+table.insert converts, {
+  inp: 'text/markdown',
+  out: 'mmm/dom',
+  transform: (md) ->
+    -- polymorphic client/serverside implementation here,
+    -- uses lua-discount on the server, marked.js on the client
+}
+      ]]
+
+      append h2 "interps"
+      append p "In addition, a property can be encoded using ", (code 'interps'), ". For example the root node you are viewing
+        currently is defined as ", (code 'moon -> mmm/dom'), ", meaning it is to be interpreted by the ", (code 'moon'),
+        " interp before being treated as a regular ", (code 'mmm/dom'), " value."
+
+      append p "The ", (code 'moon'), " interp takes a function value and calls it, passing the Fileder it is processing as ",
+        (code 'self'), ":"
+
+      append pre code [[
+{
+  name: 'moon',
+  transform: (method) => method @
+}
+      ]]
+
+      append p "Both interps and converts are resolved automatically when asking for values, so this page is being
+        rendered just using ", (code "append root\\get 'mmm/dom'"), " as well."
+
+      append h2 "interp overloading"
+      append p "The example with the image is curious as well. In mmmfs, you might want to save a link to an image,
+        without ever saving the actual image on your hard drive (or wherever the data may ever be stored - it is
+        quite transient currently). The image Fileder below has it's main (unnamed) value tagged as ",
+        (code 'URL -> image/png'), " - a png image, encoded as an URL. When accessed as ", (code 'image/png'), "
+        the URL should be resolved, and the binary data provided in it's place (yeah right - I haven't build that yet).
+        However, if a script is aware of URLs and knows a better way to handle them, then it can overload the URL
+        interp for it's fetch, to get at the raw data and use that URL instead. This is what the image demo does in
+        order to pass the URL to an ", (code 'img'), " tag's ", (code 'src'), " attribute:"
+
+      append pre code [[
+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.html'
+    img src: @gett nil,               -- look for: main content
+                   'image/png',       -- with image type, and
+                   URL: (url) => url  -- override URL interp to get raw URL
+}
+      ]]
+
+      append getnotes!
+
+  'text/markdown': "this is a markdown version or something.
+
+There's no content here so switch back to the real one!
+(Assuming there is a switching UI by the time you are reading this, which I am presupposing since you are reading this at all.
+If you are reading this in the source, then c'mon, just scroll past and give me a break.)"
+
+  Fileder {
+    'title: text/plain': "Hey I'm an ad-hoc child with no content for shit",
+  }
+
+  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.html'
+      img src: @gett nil,               -- look for: main content
+                     'image/png',       -- with image type, and
+                     URL: (url) => url  -- override URL interp to get raw URL
+  }
+
+  Fileder {
+    'title: text/plain': "I'm not even five lines of markdown but i render myself!",
+    'preview: text/markdown': "See I have like
+
+- a list of things
+- (two things)
+
+and some bold **text** and `code tags` with me.",
+  }
+
+  if MODE == 'CLIENT' then Fileder {
+    'title: text/plain': "canvas animation that doesn't quite fit",
+    'preview: moon -> mmm/component': => require '.twisted'
+  }
+}
diff --git a/app/mmmfs/twisted.moon b/app/mmmfs/twisted.moon
new file mode 100644
index 0000000..c2f805b
--- /dev/null
+++ b/app/mmmfs/twisted.moon
@@ -0,0 +1,37 @@
+Math = window.Math
+
+import CanvasApp from require 'lib.canvasapp'
+import hsl from require 'lib.color'
+
+class TwistedDemo extends CanvasApp
+  width: 500
+  height: 400
+  length: math.pi * 4
+  new: =>
+    super true
+    @background = {Math.random!, Math.random!/3+.2, Math.random!/4}
+    hue = Math.random!
+    @shades = setmetatable {}, __index: (key) =>
+      with val = { hue, .7, key * .3 + .1} do rawset @, key, val
+
+  draw: =>
+    @ctx.fillStyle = hsl @background
+    @ctx\fillRect 0, 0, @width, @height
+    @ctx\translate @width/2, @height/2 + 70
+
+    draw = (i) ->
+      @ctx\save!
+      @ctx\translate 0, -120*i
+      s = 1 - 0.1 * math.sin @time + i*2
+      s *= 0.8 - i * .4 * math.cos @time
+      @ctx\scale s, s/2
+      @ctx\rotate @time/4 + i * .6 * math.cos @time
+      @ctx.fillStyle = hsl table.unpack @shades[i]
+      @ctx\fillRect -80, -80, 160, 160
+      @ctx\restore!
+
+    for i=0,1,1/(20 + 19 * math.sin(@time / 2))
+      draw i
+    draw 1
+
+TwistedDemo!