WIP: Migration to Maki 0.3

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Eric Martindale
+Copyright (c) 2016 Eric Martindale
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,7 +2,8 @@ Maki
 ==============
 [![Build Status](https://img.shields.io/travis/martindale/maki.svg?branch=master&style=flat-square)](https://travis-ci.org/martindale/maki)
 [![Coverage Status](https://img.shields.io/coveralls/martindale/maki.svg?style=flat-square)](https://coveralls.io/r/martindale/maki)
-[![Community](https://community.ericmartindale.com/badge.svg)](https://community.ericmartindale.com/)
+![Project Status](https://img.shields.io/badge/status-alpha-red.svg?style=flat-square)
+[![Community](https://chat.maki.io/badge.svg)](https://chat.maki.io/)
 
 The complete stack for building extensible apps, faster than ever.  Hand-roll your application by telling Maki what your application does, and it takes care of the rest – without getting in your way if you want to customize it.
 

components/404.jade

@@ -0,0 +1,17 @@
+dom-module#maki-undefined
+  template
+    .ui.text.container
+      h1 Nothing known.
+      p We're sorry, but we don't know anything about that.  Here are some alternative resources you might be interested in.
+
+      .ui.horizontal.segments
+        .ui.segment
+          p One
+        .ui.segment
+          p Two
+        .ui.segment
+          p Two
+  script.
+    Polymer({
+      is: 'maki-undefined'
+    });

components/application.jade

@@ -0,0 +1,169 @@
+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", async)
+  script(src="/js/jquery.js", async)
+  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
+        },
+        identity: {
+          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,127 @@
+dom-module#maki-channel
+  script(src="/js/uuid.js", async)
+  script(src="/js/jsonrpc.js", async)
+  script.
+    Polymer({
+      is: 'maki-channel',
+      properties: {
+        namespace: { 
+          type: String
+        },
+        autoconnect: {
+          type: Boolean
+        },
+        reconnect: {
+          type: Boolean
+        },
+        subscriptions: {
+          type: Array
+        },
+        ws: {
+          type: Object
+        },
+        src: {
+          type: String
+        },
+      },
+      _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);
+        }
+      },
+      _handleMessage: function(msg) {
+        var self = this;
+        console.log('[MAKI:CHANNEL]', '_handleMessage', msg);
+
+        try {
+          var data = JSON.parse( msg.data );
+        } catch (e) {
+          var data = {};
+        }
+
+        console.log('[MAKI:CHANNEL]', '_handleMessage', 'resulting data:', data);
+
+        // experimental JSON-RPC implementation
+        if (data.jsonrpc === '2.0') {
+          console.log('[MAKI:CHANNEL]', '_handleMessage', 'valid jsonrpc!');
+
+          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.querySelector('maki-datastore[name='+self.namespace+']');
+              var manager = document.querySelector('maki-peer-manager');
+
+              datastore._patch(channel, ops);
+              manager._relay(data);
+
+            break;
+            default:
+              console.error('[MAKI:CHANNEL]', 'unhandled jsonrpc method ' , data.method);
+            break;
+          }
+        } else {
+
+        }
+      },
+      _connect: function() {
+        var self = this;
+        var maki = document.querySelector('maki-application');
+        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 = self._handleMessage.bind(self);
+        self.ws.onopen = function onOpen() {
+          console.log('[MAKI:CHANNEL]', 'websocket open.');
+        }
+      },
+      ready: function() {
+        var self = this;
+        console.log('[MAKI:CHANNEL]', 'ready');
+        if (self.autoconnect === true) {
+          self._connect();
+        }
+      },
+    });