WIP: Components

.nodemonignore

@@ -1,2 +1,6 @@
 public/*     # static files
 #/views/*
+data/*
+docs/*
+examples/*
+node_modules/*

components/404.jade

@@ -0,0 +1,8 @@
+dom-module#maki-undefined
+  template
+    .ui.container
+      h1 Not Found
+  script.
+    Polymer({
+      is: 'maki-undefined'
+    });

components/application.jade

@@ -0,0 +1,166 @@
+dom-module#maki-application
+  style.
+    #navigation {
+      width: 100%;
+    }
+
+  template
+    maki-datastore(name="#{config.service.namespace}")
+    maki-channel(autoconnect, reconnect="true")
+
+    .pusher
+      .ui.inverted.vertical.center.aligned.segment
+        .ui.container
+          maki-navbar
+
+      .content(for="viewport")
+        maki-index
+
+      .ui.inverted.vertical.footer.segment
+        .ui.container
+          .ui.stackable.inverted.divided.equal.height.stackable.grid
+            .six.wide.column
+              h4.ui.inverted.header About
+              p This website is powered by Maki, a full-stack framework that implements strong-typing at the network level.  You can see and engage with <a href="/api">the auto-generated API</a> to learn more.
+              p Maki is a labor of love, a result of several years of iterations and re-architectures in pursuit of a clean, hand-rolled framework for building clean, useful applications.  We hope you like it.
+              //-.ui.inverted.link.list
+                a.item(href="#") Protocol
+                a.item(href="#") Whitepaper
+                a.item(href="#") Roadmap
+                a.item(href="#") Contact Us
+            .seven.wide.column
+              h4.ui.inverted.header Copyleft
+              p #{config.service.name} has not supplied a LICENSE file in <code>config/index.json</code>.
+              p Maki is copyleft, and encourages you to copy, clone, and <em>create</em>.  After all, without a rich public domain, how else can we innovate?  Much to our chagrin, the software itself is more formally <a href="https://github.com/martindale/maki/blob/master/LICENSE">MIT licensed</a>, while our content is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a>.
+            .three.wide.column
+              h4.ui.inverted.header Elsewhere
+              .ui.inverted.link.list
+                a.item(href="https://github.com/martindale/maki", rel="me")
+                  i.icon.github
+                  |  GitHub
+                a.item(href="https://twitter.com/martindale", rel="me")
+                  i.icon.twitter
+                  |  Twitter
+                a.item(href="https://facebook.com/eric.martindale", rel="me")
+                  i.icon.facebook
+                  |  Facebook
+                //-a.item(href="#", rel="me")
+                  i.icon.medium
+                  |  Medium
+
+  script(src="/js/page.min.js")
+  script(src="/js/jquery.js")
+  script.
+    window.maki = Polymer({
+      is: 'maki-application',
+      properties: {
+        src: {
+          type: String
+        },
+        for: {
+          type: String
+        },
+        route: {
+          type: String
+        },
+        routes: {
+          type: Object,
+          value: {}
+        },
+        components: {
+          type: Object,
+          value: {}
+        },
+        resources: {
+          type: Object,
+          observer: '_resourcesUpdated'
+        },
+        datastore: {
+          type: Object
+        },
+        worker: { type: Object }
+      },
+      _route: function(ctx) {
+        var self = this;
+
+        var component = 'maki-undefined';
+        for (var route in self.routes) {
+          var regex = self.routes[route];
+          var viewport = document.querySelectorAll('[for=viewport]')[0];
+
+          console.log('[MAKI:APPLICATION]', 'testing', regex, 'against', ctx.path);
+
+          if (regex.test(ctx.path)) {
+            console.log('[MAKI:APPLICATION]', 'picking', route, 'from', ctx.path);
+            component = self.components[route];
+            view = document.createElement(component);
+            view.type = self.resourceMap[route];
+            view.type.route = route;
+            break;
+          }
+        }
+
+        console.log('[MAKI:APPLICATION]', 'settled on rendering:', view.type.route, view);
+        //console.log('[MAKI:APPLICATION]', 'type.static:', view.type.static);
+        //console.log('[MAKI:APPLICATION]', 'setting and appending...');
+
+        view.setAttribute('src', ctx.path);
+
+        while (viewport.hasChildNodes()) {
+          viewport.removeChild(viewport.lastChild);
+        }
+        viewport.appendChild(view);
+      },
+      _resourcesUpdated: function(resources) {
+        var self = this;
+        var _route = self._route.bind(self);
+
+        self.resourceMap = {};
+
+        console.log('[MAKI:APPLICATION]', '_resourcesUpdated', resources);
+
+        var order = ['Person', 'Post', 'Index'];
+        Object.keys(resources).forEach(function(name) {
+          var resource = resources[name];
+          console.log('[MAKI:APPLICATION]', 'initializing', name);
+          ['get', 'query'].forEach(function(action) {
+            console.log('[MAKI:APPLICATION]', 'looking for', action, 'in', resource.routes);
+            var route = resource.routes[action];
+            if (!route) return;
+
+            console.log('[MAKI:APPLICATION]', 'components are:', resource.components);
+
+            self.routes[route] = new RegExp(eval(resource.paths[action]));
+            self.components[route] = resource.components[action];
+            self.resourceMap[route] = resource;
+            page(route, _route);
+          });
+        });
+
+        self.routes['/'] = new RegExp(/^\/$/);
+        self.components['/'] = (resources.Index && resources.Index.components) ? resources.Index.components.query : 'maki-index';
+
+        page('/', _route);
+        page('*', _route);
+
+        page();
+      },
+      created: function() {
+        var self = this;
+
+        self.route = window.location.pathname;
+        //self.worker = new Worker('/worker.js');
+
+        $.ajax({
+          type: 'OPTIONS',
+          url: '/',
+          headers: {
+            'Accept': 'application/json'
+          },
+          success: function(data) {
+            self.config = data.config;
+            self.resources = data.resources;
+          }
+        });
+      }
+    });

components/channel.jade

@@ -0,0 +1,113 @@
+dom-module#maki-channel
+  script(src="/js/uuid.js")
+  script(src="/js/jsonrpc.js")
+  script.
+    Polymer({
+      is: 'maki-channel',
+      properties: {
+        autoconnect: {
+          type: Boolean
+        },
+        reconnect: {
+          type: Boolean
+        },
+        subscriptions: {
+          type: Array
+        },
+        ws: {
+          type: Object
+        },
+        src: {
+          type: String
+        },
+      },
+      ready: function() {
+        var self = this;
+        console.log('[MAKI:CHANNEL]', 'ready');
+        if (self.autoconnect === true) {
+          self._connect();
+        }
+      },
+      _send: function(method, params) {
+        var self = this;
+        self.ws.send(JSON.stringify({
+          'jsonrpc': '2.0',
+          'method': method,
+          'params': params,
+          'id': uuid.v4() // TODO: sequence?
+        }));
+      },
+      _subscribe: function(path) {
+        console.log('[MAKI:CHANNEL]', 'subscribing to:', path);
+        var self = this;
+        self._send('subscribe', {
+          channel: path
+        });
+      },
+      _consume: function() {
+        var self = this;
+        var elements = document.querySelectorAll('[src]');
+
+        console.log('[MAKI:CHANNEL]', '_consume', elements);
+
+        for (var i = 0; i < elements.length; i++) {
+          var element = elements[i];
+          self._subscribe(element.src);
+        }
+      },
+      _connect: function() {
+        var self = this;
+        var maki = document.querySelectorAll('maki-application')[0];
+        var protocol = (document.location.protocol === 'http:') ? 'ws://' : 'wss://';
+        var path = protocol + document.location.host; // + self.src;
+
+        console.log('[MAKI:CHANNEL]', 'websocket connecting to: ', path);
+
+        self.ws = new WebSocket(path);
+        self.ws.onclose = function onClose() {
+          if (self.reconnect === true) {
+            setTimeout(function() {
+              self._connect();
+            }, 500);
+          }
+        }
+        self.ws.onmessage = function onMessage(msg) {
+          try {
+            var data = JSON.parse( msg.data );
+          } catch (e) {
+            var data = {};
+          }
+          // experimental JSON-RPC implementation
+          if (data.jsonrpc === '2.0') {
+            switch (data.method) {
+              case 'ping':
+                console.log('[MAKI:CHANNEL]', 'received ping.  playing pong...');
+                self.ws.send(JSON.stringify({
+                  'jsonrpc': '2.0',
+                  'result': 'pong',
+                  'id': data.id
+                }));
+              break;
+              case 'patch':
+                // TODO: update in-memory data (two-way binding);
+                console.log('[MAKI:CHANNEL]', 'received `patch` event:', data.params.channel , data );
+                var channel = data.params.channel;
+                var ops = data.params.ops;
+                var datastore = document.querySelectorAll('maki-datastore')[0];
+
+                datastore._patch(channel, ops);
+
+              break;
+              default:
+                console.error('[MAKI:CHANNEL]', 'unhandled jsonrpc method ' , data.method);
+              break;
+            }
+          } else {
+
+          }
+        }
+        self.ws.onopen = function onOpen() {
+          console.log('[MAKI:CHANNEL]', 'websocket open.');
+        }
+      },
+    });

components/collection.jade

@@ -0,0 +1,91 @@
+dom-module#maki-collection
+  template
+    .ui.vertical.segment
+      .ui.container
+        h2
+          //-template(if$="{{type.options.icon}}")
+          i(class$="ui icon {{type.options.icon}}")
+          a(href="/{{type.names.query}}") {{type.plural}}
+        p {{type.description}}
+        code
+          pre {{resource}}
+
+        .ui.five.cards
+          template(is="dom-repeat", items="{{items}}")
+            .ui.card
+              template(if="{{item.image}}")
+                .image
+                  img(src="/img/maki-logo.png")
+              .content
+                a.header(href="/{{type.names.query}}/{{item.slug}}") {{item.name}} {{item.username}}
+                p.description {{item.description}}
+              template(if="{{item.action}}")
+                a.ui.bottom.attached.button(if="{{item.action}}", href="{{item.action.href}}") {{item.action.text}}
+            //-maki-item(src="/people/{{item.id}}", item="{{item}}")
+
+  script.
+    Polymer({
+      is: 'maki-collection',
+      listeners: {
+        'datastore:query':  '_handleQuery',
+        'state:change':     '_applyState'
+      },
+      properties: {
+        src: {
+          type: String,
+          observer: '_sourceChanged'
+        },
+        type: {
+          type: Object
+        },
+        items: {
+          type: Array,
+          notify: true
+        },
+      },
+      _handleQuery: function(e, key) {
+        var self = this;
+        var datastore = document.querySelectorAll('maki-datastore')[0];
+        console.log('[MAKI:COLLECTION]','_handleQuery:', e, key);
+        datastore._retrieve(key, function(err, data) {
+          if (!data) self.fire('datastore:miss', hash);
+          if (err) {
+            console.error('_handleQuery error:', err);
+            data = [];
+          }
+          self.fire('state:change', data);
+        });
+      },
+      _applyState: function(e) {
+        var self = this;
+        var state = e.detail;
+
+        if (!(state instanceof Array)) {
+          state = [state];
+        }
+
+        self.items = state;
+      },
+      _sourceChanged: function(source) {
+        var self = this;
+        var maki = document.querySelectorAll('maki-application')[0];
+        console.log('[MAKI:COLLECTION]', 'collection sourceChanged:', source);
+        //self.resource = maki.resourceMap[source];
+        self.fire('datastore:query', source);
+      },
+      _sync: function() {
+        var self = this;
+        console.log('[MAKI:COLLECTION]', '_sync');
+        self.fire('datastore:query', self.src);
+      },
+      ready: function() {
+        var self = this;
+        console.log('[MAKI:COLLECTION]', 'ready');
+      },
+      attached: function() {
+        var self = this;
+        var channel = document.querySelectorAll('maki-channel')[0];
+        console.log('[MAKI:COLLECTION]', 'collection is attached:', self.src);
+        channel._subscribe(self.src);
+      }
+    });