├── .gitignore
├── .jscsrc
├── .jshintrc
├── Gruntfile.js
├── LICENSE
├── README.md
├── example
    ├── index.html
    ├── perf.html
    ├── react.html
    └── react
    │   ├── react.js
    │   └── reactdom.js
├── package.json
├── psuedo-code
    └── flow.md
├── src
    ├── Tembo.js
    ├── core
    │   └── Tembo.core.can.js
    ├── interface
    │   ├── Component.js
    │   └── Patch.js
    ├── render
    │   ├── NativeRoot.js
    │   ├── ShadowNode.js
    │   └── util.js
    ├── renderers
    │   ├── Blessed.js
    │   ├── DOM.js
    │   ├── String.js
    │   └── Test.js
    └── updaters
    │   ├── BatchUpdate.js
    │   └── SyncUpdate.js
└── tests
    ├── component
        ├── index.js
        ├── mount.js
        ├── unmount.js
        └── update.js
    ├── patch
        ├── component.js
        ├── falsy.js
        ├── index.js
        ├── native-element.js
        └── string.js
    └── util.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | dist
26 | 
27 | # Dependency directory
28 | node_modules
29 | 
30 | # Optional npm cache directory
31 | .npm
32 | 
33 | # Optional REPL history
34 | .node_repl_history
35 | 
36 | .DS_Store
37 | 


--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "preset": "airbnb",
 3 |   "disallowSpaceAfterKeywords": ["else", "function", "while", "for"],
 4 |   "requireSpaceAfterKeywords" : ["if", "return"],
 5 |   "requireSpaceBeforeBlockStatements": false,
 6 |   "disallowSpaceBeforeBlockStatements": true,
 7 | 
 8 |   "requireSpaceBetweenArguments": false,
 9 |   "disallowSpaceBetweenArguments": true,
10 | 
11 |   "requireSpaceAfterComma": false,
12 |   "disallowSpaceAfterComma": true,
13 | 
14 |   "requireTrailingComma": false,
15 |   "disallowTrailingComma": true,
16 | 
17 |   "disallowSpaceAfterObjectKeys": false,
18 |   "requireSpaceAfterObjectKeys": true,
19 | 
20 |   "requireSpaceBeforeBinaryOperators": false,
21 |   "requireSpaceAfterBinaryOperators": false,
22 | 
23 |   "requirePaddingNewLinesAfterBlocks": false,
24 |   "disallowMultipleVarDecl": false,
25 |   "requireCamelCaseOrUpperCaseIdentifiers": false,
26 |   "requireSpacesInAnonymousFunctionExpression": false,
27 |   "disallowSpacesInAnonymousFunctionExpression": {
28 |     "beforeOpeningRoundBrace": true,
29 |     "beforeOpeningCurlyBrace": true
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "globals":{
 3 |     "console": true
 4 |   },
 5 |   "browserify": true,
 6 |   "shadow": true,
 7 |   "forin": true,
 8 |   "funcscope": true,
 9 |   "latedef": true,
10 |   "unused": true,
11 |   "undef": true
12 | }
13 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | module.exports = function(grunt){
  2 |   'use strict';
  3 | 
  4 |   var tasks = [
  5 |     'grunt-contrib-jshint',
  6 |     'grunt-contrib-concat',
  7 |     'grunt-browserify',
  8 |     'grunt-tape',
  9 |     'grunt-contrib-jasmine',
 10 |     'grunt-contrib-watch',
 11 |     'grunt-contrib-uglify',
 12 |     'grunt-jscs'
 13 |   ];
 14 | 
 15 |   var config = {};
 16 | 
 17 |   // *********************************************
 18 |   // jshint
 19 |   config.jshint = {};
 20 |   config.jshint.src = ['src/core/*.js','src/helpers/*.js','src/interface/*.js','src/defaultProperties/*.js'];
 21 |   config.jshint.test = ['tests/**/*.js','Gruntfile.js'];
 22 |   config.jshint.options = {
 23 |     jshintrc : true
 24 |   };
 25 | 
 26 |   // *********************************************
 27 |   // tape
 28 |   config.tape = {
 29 |     options : {
 30 |       pretty : false,
 31 |       output : 'console'
 32 |     },
 33 |     files : ['tests/**/index.js']
 34 |   };
 35 | 
 36 |   // *********************************************
 37 |   // browserify
 38 |   config.browserify = {
 39 |     dist : {
 40 |       files : {
 41 |         'dist/tembo.js' : ['src/Tembo.js']
 42 |       },
 43 |       options : {
 44 |         standalone : true
 45 |       }
 46 |     }
 47 |   };
 48 | 
 49 |   // *********************************************
 50 |   // jscs
 51 |   config.jscs = {
 52 |     src  : 'src/**/*.js',
 53 |     test : ['tests/**/*.js','Gruntfile.js'],
 54 |     options : {
 55 |       config : '.jscsrc'
 56 |     }
 57 |   };
 58 | 
 59 |   // *********************************************
 60 |   // concat
 61 |   // config.concat = {
 62 |   //   dist: {
 63 |   //     src: [
 64 |   //       'src/Tembo.js',
 65 |   //       'src/core/*.js',
 66 |   //       'src/interface/*.js',
 67 |   //     ],
 68 |   //     dest: 'dist/tembo.js'
 69 |   //   }
 70 |   // }
 71 | 
 72 |   // *********************************************
 73 |   // uglify
 74 |   config.uglify = {};
 75 |   config.uglify.all = {
 76 |     files : {
 77 |       'dist/tembo.min.js' : ['dist/tembo.js']
 78 |     },
 79 |     options : {
 80 |       preserveComments : false,
 81 |       sourceMap : 'dist/tembo.min.map',
 82 |       sourceMappingURL : 'tembo.min.map',
 83 |       report : 'min',
 84 |       beautify : {
 85 |         ascii_only : true
 86 |       },
 87 |       compress : {
 88 |         hoist_funs : false,
 89 |         loops : false,
 90 |         unused : false
 91 |       }
 92 |     }
 93 |   };
 94 | 
 95 |   // *********************************************
 96 |   // watch
 97 |   config.watch = {};
 98 |   config.watch.scripts = {
 99 |     files : ['src/**/*.js','src/*.js'],
100 |     tasks : ['default'],
101 |     options : {
102 |       spawn : false
103 |     }
104 |   };
105 | 
106 |   grunt.initConfig(config);
107 | 
108 |   tasks.forEach(grunt.loadNpmTasks);
109 | 
110 |   grunt.registerTask('build',['browserify','uglify']);
111 | 
112 |   grunt.registerTask('hint',['jshint','jscs']);
113 | 
114 |   grunt.registerTask('test',['tape']);
115 | 
116 |   grunt.registerTask('default',['hint','test','browserify','uglify','watch']);
117 | 
118 | };
119 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Guilherme (Coder) de Souza
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Alt text](http://i.imgur.com/osPnYVh.png)
 2 | # Tembo
 3 | 
 4 | Tembo is my own react-like rendering engine implementation in 4kb.
 5 | 
 6 | # [Live Demo / Performance Test](https://s3-sa-east-1.amazonaws.com/tembojs/perf.html)
 7 | 
 8 | # API
 9 | 
10 | ##### Tembo.createClass(componentSpec)
11 | ```javascript
12 | const Message = Tembo.createClass({
13 |   getInitialState: function() {
14 |     return {
15 |       message: 'Hello Word'
16 |     }
17 |   },
18 |   render: function() {
19 |     return Tembo.createElement('div', {}, this.state.message)
20 |   }
21 | })
22 | ```
23 | ##### Tembo.createElement(temboComponentClass || domNodeName,props,children)
24 | ```javascript
25 |   Tembo.createElement('div', {}, 'hello world')
26 | ```
27 | ##### Tembo.render(temboComponent, DOMNode)
28 | ```javascript
29 |   const component = Tembo.createElement(myMessage, {}, false)
30 |   Tembo.render(component, document.getElementById('content'))
31 | ```
32 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <style media="screen">
 7 |       .teste{
 8 |         width: 5px;
 9 |         height: 5px;
10 |         display: block;
11 |         float: left;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <script type="text/javascript" src="../dist/tembo.min.js"></script>
17 |     <div id="content">
18 |     </div>
19 |     <script type="text/javascript">
20 | 
21 | 
22 |       var myElement = Tembo.createClass({
23 |         getInitialState : function(){
24 |           setInterval(function(){
25 |             this.setState({
26 |               red:(Math.round(Math.random()*255)).toString(),
27 |               green:(Math.round(Math.random()*255)).toString(),
28 |               blue:(Math.round(Math.random()*255)).toString()
29 |             })
30 |           }.bind(this),10)
31 |           return {
32 |             red : 255,
33 |             green : 0,
34 |             blue : 0
35 |           }
36 |         },
37 | 
38 |         render : function(){
39 |           return Tembo.createElement('div',{class:'teste',style:"background-color:rgb("+this.state.red+","+this.state.green+","+this.state.blue+");"},'')
40 |         }
41 |       })
42 | 
43 |       var myCollection = Tembo.createClass({
44 |       getInitialState : function(){
45 |         return {
46 |             limit : 500
47 |         }
48 |       },
49 |       add : function(){
50 |         limit = ++this.state.limit
51 |         this.setState({limit:limit})
52 |       },
53 |       remove : function(){
54 |         limit = --this.state.limit
55 |         this.setState({limit:limit})
56 |       },
57 |       render : function(){
58 |         this.els = [];
59 |         x = 0;
60 |         while(x<this.state.limit){
61 |           this.els.push(Tembo.createElement(myElement,{key : x}))
62 |           x++
63 |         }
64 |         return Tembo.createElement('div',{},this.els)
65 |       }
66 |     })
67 | 
68 |       Tembo.render(Tembo.createElement(myCollection,{},false), document.getElementById('content'));
69 | 
70 | 
71 |     </script>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/example/perf.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | 	<style>
 7 | 	iframe{
 8 | 		float: left;
 9 | 	}
10 | 	</style>
11 | </head>
12 | <body>
13 | 	<iframe src="index.html" width="400" frameborder="0"></iframe>
14 | 	<iframe src="react.html" width="400" frameborder="0"></iframe>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/example/react.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <style media="screen">
 7 |     .teste{
 8 |         width: 5px;
 9 |         height: 5px;
10 |       display: block;
11 |       float: left;
12 |     }
13 |     </style>
14 |   </head>
15 |   <body>
16 |   React
17 |     <div id="content">
18 | 
19 |     </div>
20 |     <script type="text/javascript" src="react/react.js"></script>
21 |     <script type="text/javascript" src="react/reactdom.js"></script>
22 |     <script type="text/javascript">
23 |     var myElement = React.createClass({
24 |       getInitialState : function(){
25 |         this.interval = setInterval(function(){
26 |           this.setState({
27 |             red:(Math.round(Math.random()*255)).toString(),
28 |             green:(Math.round(Math.random()*255)).toString(),
29 |             blue:(Math.round(Math.random()*255)).toString()
30 |           })
31 |         }.bind(this),10)
32 |         return {
33 |           red : 255,
34 |           green : 0,
35 |           blue : 0
36 |         }
37 |       },
38 | 
39 |       componentWillUnmount: function (){
40 |         clearInterval(this.interval);
41 |       },
42 | 
43 |       render : function(){
44 |         return React.createElement('div',{className:'teste',
45 |         style:{
46 |           backgroundColor : "rgb("+this.state.red+","+this.state.green+","+this.state.blue+")"
47 |         }
48 |       },'')
49 |       }
50 |     })
51 | 
52 |     var myCollection = React.createClass({
53 |       getInitialState : function(){
54 |         return {
55 |             limit : 500
56 |         }
57 |       },
58 |       add : function(){
59 |         limit = ++this.state.limit
60 |         this.setState({limit:limit})
61 |       },
62 |       remove : function(){
63 |         limit = --this.state.limit
64 |         this.setState({limit:limit})
65 |       },
66 |       render : function(){
67 |         this.els = [];
68 |         x = 0;
69 |         while(x<this.state.limit){
70 |           this.els.push(React.createElement(myElement,{key : x}))
71 |           x++
72 |         }
73 |         return React.createElement('div',{},this.els)
74 |       }
75 |     })
76 | 
77 |     ReactDOM.render(React.createElement(myCollection,{},false), document.getElementById('content'));
78 | 
79 |     </script>
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/example/react/reactdom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ReactDOM v0.14.2
 3 |  *
 4 |  * Copyright 2013-2015, Facebook, Inc.
 5 |  * All rights reserved.
 6 |  *
 7 |  * This source code is licensed under the BSD-style license found in the
 8 |  * LICENSE file in the root directory of this source tree. An additional grant
 9 |  * of patent rights can be found in the PATENTS file in the same directory.
10 |  *
11 |  */
12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
13 | ;(function(f) {
14 |   // CommonJS
15 |   if (typeof exports === "object" && typeof module !== "undefined") {
16 |     module.exports = f(require('react'));
17 | 
18 |   // RequireJS
19 |   } else if (typeof define === "function" && define.amd) {
20 |     define(['react'], f);
21 | 
22 |   // <script>
23 |   } else {
24 |     var g
25 |     if (typeof window !== "undefined") {
26 |       g = window;
27 |     } else if (typeof global !== "undefined") {
28 |       g = global;
29 |     } else if (typeof self !== "undefined") {
30 |       g = self;
31 |     } else {
32 |       // works providing we're not in "use strict";
33 |       // needed for Java 8 Nashorn
34 |       // see https://github.com/facebook/react/issues/3037
35 |       g = this;
36 |     }
37 |     g.ReactDOM = f(g.React);
38 |   }
39 | 
40 | })(function(React) {
41 |   return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
42 | });
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tambo",
 3 |   "version": "0.0.0",
 4 |   "description": "Tembo",
 5 |   "author": "Guilherme (Coder) de Souza",
 6 |   "homepage": "https://github.com/guisouza/tembo",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/guisouza/tembo.git"
11 |   },
12 |   "main": "src/Tembo.js",
13 |   "scripts": {
14 |     "test": "./node_modules/.bin/grunt"
15 |   },
16 |   "devDependencies": {
17 |     "browserify": "^13.0.0",
18 |     "grunt": "^0.4.5",
19 |     "grunt-browserify": "^4.0.1",
20 |     "grunt-cli": "^0.1.13",
21 |     "grunt-contrib-concat": "^0.4.0",
22 |     "grunt-contrib-jasmine": "^0.9.1",
23 |     "grunt-contrib-jshint": "0.11.0",
24 |     "grunt-contrib-uglify": "^0.4.0",
25 |     "grunt-contrib-watch": "^0.6.1",
26 |     "grunt-jscs": "^2.7.0",
27 |     "grunt-tape": "0.0.2",
28 |     "tap": "^5.7.0"
29 |   },
30 |   "dependencies": {
31 |     "setimmediate": "latest"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/psuedo-code/flow.md:
--------------------------------------------------------------------------------
 1 | ```
 2 | 
 3 | createElement(Parent, props, [
 4 |   createElement(Child, props, [Text])
 5 | ]);
 6 | 
 7 | 
 8 | ```
 9 | 
10 | What happens is
11 | - Text is rendered
12 | - Child is rendered
13 | - Parent is rendered
14 | 
15 | Heres the key though
16 | - setState Occurs
17 |   - nextAnimation frame (if the state has changed)
18 |     - This create all the elements again
19 | 
20 | compare
21 |   - if the Element has Children
22 |     -
23 |   - Compare the old elements to the new Elements
24 |     - If the ElementType is not the same
25 |       - componentWillUnmount(old)
26 |       - componentWillMount(new);
27 |       - RETURN - replace(old, new);
28 |     - If the Props are not the same
29 |       - componentWillUpdate(newProps);
30 |   - Do this for each child as well
31 |     - If a child is added - componentWillMount is called
32 |     - If a child is missing - componentWillUnmount is called
33 | ```
34 | If one of these elements is different
35 |   if(element.isTemboComponent && newElement.isTemboComponent){
36 |     return compare(element.rendered, newElement.render());
37 |   }
38 |   if(newElement.isTempoComponent){
39 | 
40 |   }
41 | ```
42 | 


--------------------------------------------------------------------------------
/src/Tembo.js:
--------------------------------------------------------------------------------
 1 | var Component = require('./interface/Component');
 2 | var Patch = require('./interface/Patch');
 3 | var NativeRoot = require('./render/NativeRoot');
 4 | 
 5 | var SyncUpdate = require('./updaters/SyncUpdate');
 6 | 
 7 | //File : src/Tembo.js
 8 | 
 9 | var TemboConstructor = function(renderer,updater){
10 |   updater = updater || new SyncUpdate();
11 | 
12 |   var tembo = {
13 |     _ : {},
14 |     components : {}
15 |   };
16 |   require('./core/Tembo.core.can.js')(tembo);
17 | 
18 |   tembo._.can('createClass',TemboConstructor.createClass);
19 | 
20 |   // File : src/Tembo.createElement.js
21 |   tembo._.can('createElement',TemboConstructor.createElement);
22 |   tembo._.can('getNative',TemboConstructor.getNative);
23 | 
24 |   tembo._.can('render',function(component,nativeParent){
25 |     var root = NativeRoot.makeTree(renderer,updater,nativeParent,component);
26 |     renderer.render(root);
27 |     return root[1].shadowHead.elem;
28 |   });
29 | 
30 |   return tembo;
31 | };
32 | 
33 | TemboConstructor.createClass = function(structure){
34 |   return Component.extend(structure);
35 | };
36 | 
37 | TemboConstructor.createElement = function(element,props,content){
38 |   if (!props) props = {};
39 | 
40 |   if (arguments.length > 3){
41 |     content = [];
42 |     var index = 2;
43 |     while(index < arguments.length){
44 |       content.push(arguments[index]);
45 |       index++;
46 |     }
47 |   }
48 | 
49 |   return new Patch(element,props,content);
50 | };
51 | 
52 | TemboConstructor.getNative = function(component){
53 |   return component.renderNode.native.elem;
54 | };
55 | 
56 | TemboConstructor.__spread = Object.assign.bind(Object);
57 | 
58 | module.exports = TemboConstructor;
59 | 
60 | if (!module.parent && typeof window === 'object'){
61 |   window.Tembo = TemboConstructor(require('./renderers/DOM.js'),new SyncUpdate());
62 | }
63 | 


--------------------------------------------------------------------------------
/src/core/Tembo.core.can.js:
--------------------------------------------------------------------------------
 1 | //File : src/Tembo._.can.js
 2 | 
 3 | module.exports = function(Tembo){
 4 |   'use strict';
 5 |   Tembo._.can = function(label,method){
 6 |     if (!Tembo[label])
 7 |       Tembo[label] = method;
 8 |   };
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/interface/Component.js:
--------------------------------------------------------------------------------
  1 | var eventFunctions = [
  2 |   'componentWillMount',
  3 |   'componentDidMount',
  4 |   'componentWillRecieveProps',
  5 |   'componentDidRecieveProps',
  6 |   'componentWillUpdate',
  7 |   'componentDidUpdate',
  8 |   'componentWillUnmount',
  9 |   'componentDidUnmount',
 10 |   'render'
 11 | ];
 12 | var TemboComponent;
 13 | var util = require('../render/util');
 14 | module.exports = TemboComponent = function(renderNode){
 15 |   if (!renderNode) throw new Error('renderNode required');
 16 |   this.renderNode = renderNode;
 17 |   this.state = void 0;
 18 |   this._newState = {};
 19 |   this._stateChanged = false;
 20 |   this._isUpdating = true;
 21 |   Object.keys(this).forEach(function(key){
 22 |     if (typeof this[key] === 'function') this[key] = this[key].bind(this);
 23 |   }.bind(this));
 24 | };
 25 | TemboComponent.extend = function(mixin){
 26 |   var personalMethods = [];
 27 |   var ExtendedComponent = function(renderNode){
 28 |     if (!(this instanceof ExtendedComponent)){
 29 |       return new ExtendedComponent(renderNode);
 30 |     }
 31 |     TemboComponent.call(this,renderNode);
 32 |     personalMethods.forEach(function(key){
 33 |       this[key] = this[key].bind(this);
 34 |     }.bind(this));
 35 |   };
 36 | 
 37 |   ExtendedComponent.prototype = Object.create(TemboComponent.prototype);
 38 |   ExtendedComponent.prototype.constructor = ExtendedComponent;
 39 |   Object.keys(mixin).forEach(function(key){
 40 |     var method = mixin[key];
 41 |     if (eventFunctions.indexOf(key) > -1){
 42 |       ExtendedComponent.prototype['__' + key + '__'] = method;
 43 |     }else{
 44 |       if (typeof method === 'function'){
 45 |         personalMethods.push(key);
 46 |       }
 47 |       ExtendedComponent.prototype[key] = method;
 48 |     }
 49 |   });
 50 | 
 51 |   if (mixin.displayName)
 52 |     ExtendedComponent.displayName = mixin.displayName;
 53 | 
 54 |   ExtendedComponent.isTemboComponent = true;
 55 |   return ExtendedComponent;
 56 | };
 57 | 
 58 | TemboComponent.prototype.attachProps = function(props,content){
 59 |   // var didUpdate = false;
 60 |   // var oldProps = this.props;
 61 |   var newProps = {};
 62 |   if (typeof props === 'object')
 63 |   Object.keys(props).forEach(function(prop){
 64 |     newProps[prop] = props[prop];
 65 |   });
 66 |   if (!(content instanceof Array)){
 67 |     content = [content];
 68 |   }
 69 |   newProps.children = content;
 70 | 
 71 |   this.props = newProps;
 72 | };
 73 | 
 74 | TemboComponent.prototype.isTemboComponent =
 75 | TemboComponent.isTemboComponent =
 76 | true;
 77 | 
 78 | eventFunctions.forEach(function(eventName){
 79 |   TemboComponent.prototype[eventName] = function(){
 80 |     if (typeof this['__' + eventName + '__'] === 'function'){
 81 |       return this['__' + eventName + '__'].apply(this,arguments);
 82 |     }
 83 |   };
 84 | });
 85 | 
 86 | TemboComponent.prototype.render = function(){
 87 |   if (!this.state || this._isUpdating){
 88 |     // component setState and all that
 89 |     this._isUpdating = false;
 90 |     if (this.state) util.merge(this.state,this._newState);
 91 |     else this.state = this._newState;
 92 |     this._newState = {};
 93 |   }
 94 |   var renderResult = this.__render__();
 95 | 
 96 |   // if (!this.oldInstance){
 97 | 
 98 |   // }
 99 |   // this.instance = renderResult;
100 | 
101 |   return renderResult;
102 | };
103 | 
104 | TemboComponent.prototype.setState = function(state){
105 |   var newState = this._newState;
106 |   var curState = this.state || {};
107 |   Object.keys(state).forEach(function(key){
108 |     newState[key] = state[key];
109 |     if (newState[key] === curState[key]){
110 |       delete newState[key];
111 |     }
112 |   });
113 | 
114 |   var shouldUpdate = Object.keys(newState).length;
115 |   if (this._isUpdating) return;
116 |   if (shouldUpdate){
117 |     this.renderNode.native.updater.add(this);
118 |   }else{
119 |     this.renderNode.native.updater.remove(this);
120 |   }
121 | };
122 | 


--------------------------------------------------------------------------------
/src/interface/Patch.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | module.exports = function Patch(type,props,content){
 4 |   if (typeof type === 'undefined'){
 5 |     throw new Error('A type needs to be provided when creating a component');
 6 |   }
 7 |   this.type = type;
 8 |   this.props = {};
 9 |   if (props)
10 |     this.props = props;
11 | 
12 |   this.children = content instanceof Array ? content : content ? [content] : [];
13 | };
14 | 


--------------------------------------------------------------------------------
/src/render/NativeRoot.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var UTIL = require('./util');
  3 | var ShadowNode = require('./ShadowNode');
  4 | var NativeRoot;
  5 | 
  6 | module.exports = NativeRoot = function(patch,options,i){
  7 |   this.updater = options.updater;
  8 |   this.renderer = options.renderer;
  9 |   this.parent = options.parent;
 10 |   this.children = [];
 11 |   this.setContent(patch,i);
 12 | };
 13 | 
 14 | NativeRoot.makeTree = function(Renderer,updater,container,patch){
 15 |   var root = new NativeRoot(container,{ renderer : Renderer,updater : updater });
 16 |   var rootComponent = new NativeRoot(patch,{ parent : root,updater : updater });
 17 |   return [root,rootComponent];
 18 | };
 19 | 
 20 | var proto = NativeRoot.prototype;
 21 | 
 22 | proto.resetID = function(i){
 23 |   this.index = i;
 24 |   if (this.elem && this.Render.isElement(this.elem)){
 25 |     this.Render.setID(this.elem,this.id);
 26 |   }
 27 | };
 28 | 
 29 | proto.setContent = function(patch,i){
 30 |   var oldPatch = this.oldPatch;
 31 |   this.oldPatch = patch;
 32 |   if (this.renderer) return (this.elem = patch);
 33 |   if (i === void 0) i = this.index;
 34 | 
 35 |   if (UTIL.differentTypes(oldPatch,patch)){
 36 |     if (this.shadowHead) this.shadowHead.remove();
 37 |     this.shadowHead = null;
 38 |     if (UTIL.isNative(patch)){
 39 |       return this.setPatch(patch);
 40 |     }else if (this.parent){
 41 |       this.shadowHead = new ShadowNode(patch,{ native : this });
 42 |     }
 43 |     return this.resetID(i);
 44 |   }
 45 | 
 46 |   if (!UTIL.differentPatch(oldPatch,patch)){
 47 |     if (i !== this.index) this.resetID(i);
 48 |     return;
 49 |   }
 50 | 
 51 |   if (this.shadowHead){
 52 |     this.shadowHead.setPatch(patch);
 53 |   }else{
 54 |     this.setProps(patch);
 55 |   }
 56 |   if (i !== this.index) this.resetID(i);
 57 | };
 58 | 
 59 | proto.setPatch = function(newPatch){
 60 |   var oldPatch = this.oldNative;
 61 |   this.oldNative = newPatch;
 62 |   if (!oldPatch && !newPatch) return;
 63 |   if (UTIL.differentTypes(oldPatch,newPatch)){
 64 |     this.differentTypeSet(oldPatch,newPatch);
 65 |     return this.setProps(newPatch);
 66 |   }
 67 |   if (UTIL.differentPatch(oldPatch,newPatch)){
 68 |     return this.setProps(newPatch);
 69 |   }
 70 | };
 71 | 
 72 | proto.setProps = function(newPatch){
 73 |   var $ = this.Render;
 74 |   var nativeContainer = this.elem;
 75 | 
 76 |   if (!newPatch){
 77 |     return;
 78 |   }
 79 | 
 80 |   if (typeof newPatch === 'string'){
 81 |     return $.setText(nativeContainer,newPatch);
 82 |   }
 83 | 
 84 |   var props = UTIL.clone(newPatch.props);
 85 |   var childrenPatches = newPatch.children;
 86 |   delete props.children;
 87 | 
 88 |   Object.keys(props).forEach(function(key){
 89 |     $.setProp(nativeContainer,key,props[key]);
 90 |   });
 91 |   var children = this.children;
 92 |   var childLength = children.length;
 93 |   var patchLength = childrenPatches.length;
 94 |   var min = Math.min(childLength,patchLength);
 95 |   var max = Math.max(childLength,patchLength);
 96 |   for(var i=0; i < max; i++){
 97 |     if (i < min)
 98 |       children[i].setContent(childrenPatches[i],i);
 99 |     else if (childLength < patchLength)
100 |       children.push(new NativeRoot(
101 |         childrenPatches[i],{
102 |           parent : this,
103 |           updater : this.updater
104 |         },i
105 |       ));
106 |     else
107 |       children.pop().remove();
108 |   }
109 |   return nativeContainer;
110 | };
111 | 
112 | proto.remove = function(){
113 |   if (this.shadowHead) this.shadowHead.remove();
114 |   this.Render.removeChild(this.parent.elem,this.elem);
115 | };
116 | 
117 | proto.renderPatch = function(patch){
118 |   if (!patch) return null;
119 |   if (typeof patch === 'string') return this.Render.createText(patch);
120 |   if (typeof patch !== 'object'){
121 |     throw new Error('Cannot make patch of ' + patch);
122 |   }
123 |   if (!patch.type.isTemboComponent){
124 |     return this.Render.createElement(patch.type);
125 |   }
126 | 
127 |   throw new Error('NativeRoot expects only native patches');
128 | };
129 | 
130 | proto.differentTypeSet = function(oldPatch,newPatch){
131 |   if (!this.parent) return;
132 |   var nativeParent = this.parent.elem;
133 | 
134 |   var oldNative = this.elem;
135 |   var newNative = this.renderPatch(newPatch);
136 |   this.elem = newNative;
137 |   if (!oldNative && !newNative) return;
138 | 
139 |   if (oldNative)
140 |   if (newNative){
141 |     return this.Render.replaceChild(nativeParent,oldNative,newNative);
142 |   }else{
143 |     return this.Render.removeChild(nativeParent,oldNative);
144 |   }
145 | 
146 |   var i = this.index;
147 |   if (i === -1){
148 |     return this.Render.appendChild(nativeParent,newNative);
149 |   }
150 | 
151 |   this.Render.insertChild(nativeParent,newNative,i);
152 | };
153 | 
154 | Object.defineProperty(proto,'Render',{
155 |   get : function(){
156 |     return this.parent ? this.parent.Render : this.renderer;
157 |   }
158 | });
159 | 
160 | Object.defineProperty(proto,'id',{
161 |   get : function(){
162 |     if (!this.parent) return;
163 |     var parentid = this.parent.id;
164 |     return parentid === void 0 ? '0' : parentid + '.' + this.index;
165 |   }
166 | });
167 | 
168 | Object.defineProperty(proto,'index',{
169 |   get : function(){
170 |     var children = this.parent.children;
171 | 
172 |     // Its possible to the two iterators below
173 |     // Also possible to cache this
174 |     var count = 0;
175 |     for(var i=0,l=children.length; i < l; i++){
176 |       if (children[i] == this) break;
177 |       if (children[i].elem) count++;
178 |     }
179 |     return count === l ? -1 : count;
180 |   }
181 | });
182 | 


--------------------------------------------------------------------------------
/src/render/ShadowNode.js:
--------------------------------------------------------------------------------
 1 | var UTIL = require('./util');
 2 | 
 3 | var ShadowNode;
 4 | 
 5 | module.exports = ShadowNode = function(patch,options){
 6 |   this.shadow = options.shadow;
 7 |   this.native = options.native;
 8 |   this.elem = new patch.type(this);
 9 |   this.elem.props = patch.props;
10 |   this.elem.props.children = patch.children;
11 |   this.elem.state = this.elem.getInitialState ? this.elem.getInitialState() : {};
12 | 
13 |   this.elem.componentWillMount();
14 |   this.render();
15 |   this.elem.componentDidMount();
16 | 
17 | };
18 | 
19 | var proto = ShadowNode.prototype;
20 | 
21 | Object.defineProperty(proto,'parent',{
22 |   get : function(){
23 |     return this.native.parent;
24 |   }
25 | });
26 | 
27 | proto.setPatch = function(patch){
28 |   var oldProps = this.elem.props;
29 |   this.elem._isUpdating = true;
30 |   var newProps = patch.props;
31 |   newProps.children = patch.children;
32 | 
33 |   this.elem.componentWillRecieveProps(newProps);
34 |   this.elem.props = newProps;
35 |   this.elem.componentDidRecieveProps(oldProps);
36 | 
37 |   this.update();
38 | };
39 | 
40 | proto.update = function(){
41 |   // This is called by set state and by props updating
42 |   this.elem.componentWillUpdate();
43 |   this.render();
44 |   this.elem.componentWillUpdate();
45 | };
46 | 
47 | proto.remove = function(){
48 |   this.elem.componentWillUnmount();
49 | 
50 |   this.destroyed = true;
51 |   if (this.figure){
52 |     return this.figure.remove();
53 |   }
54 |   this.shadow = void 0;
55 |   this.figure = void 0;
56 |   this.native = void 0;
57 |   this.elem.componentDidUnmount();
58 | };
59 | 
60 | proto.render = function(){
61 |   var newPatch = this.elem.render();
62 |   var lastPatch = this.lastPatch;
63 |   this.lastPatch = newPatch;
64 |   if (!lastPatch && !newPatch) return;
65 |   if (UTIL.isNative(newPatch)){
66 |     if (this.figure){
67 |       this.figure.remove();
68 |       this.figure = void 0;
69 |     }
70 |     this.native.shadowTail = this;
71 |     return this.native.setPatch(newPatch);
72 |   }
73 | 
74 |   if (UTIL.differentTypes(lastPatch,newPatch)){
75 |     if (this.figure) this.figure.remove();
76 |     this.figure = new ShadowNode(newPatch,{
77 |       shadow : this,native : this.native
78 |     });
79 |     return this.figure;
80 |   }
81 |   if (UTIL.differentPatch(lastPatch,newPatch)){
82 |     // component will update
83 |     this.figure.setPatch(newPatch);
84 | 
85 |     // component did update
86 |   }
87 | };
88 | 


--------------------------------------------------------------------------------
/src/render/util.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var isNative,differentTypes,differentPatch,clone,merge,deepCompare;
 3 | 
 4 | module.exports.isNative = isNative = function(patch){
 5 |   if (!patch) return true;
 6 |   if (typeof patch === 'string') return true;
 7 |   var type = patch.type;
 8 |   return !type.isTemboComponent;
 9 | };
10 | 
11 | module.exports.differentTypes = differentTypes = function(a,b){
12 |   //Check if one is null and the otherone isn't
13 |   var booA = !a,booB = !b;
14 |   if (booA || booB) return booA !== booB;
15 |   if (typeof a !== typeof b) return true;
16 |   if (typeof a === 'string') return false;
17 |   if (typeof a.type === 'string') return a.type !== b.type;
18 |   return a.type !== b.type;
19 | };
20 | 
21 | module.exports.differentPatch = differentPatch = function(a,b){
22 |   var booA = !a,booB = !b;
23 |   if (booA || booB) return booA !== booB;
24 |   if (typeof a === 'string') return a !== b;
25 |   if (!deepCompare(a.props,b.props)) return true;
26 |   if (!a.children && !b.children) return false;
27 |   if (!a.children || !b.children) return true;
28 |   if (a.children.length !== b.children.length) return true;
29 |   return a.children.some(function(aChild,index){
30 |     var bChild = b[index];
31 |     if (!aChild && !bChild) return false;
32 |     if (differentTypes(a,b)) return true;
33 |     return differentPatch(aChild,bChild);
34 |   });
35 | };
36 | 
37 | module.exports.clone = clone = function(obj){
38 |   return Object.keys(obj).reduce(function(ret,key){
39 |     ret[key] = obj[key];
40 |     return ret;
41 |   },{});
42 | };
43 | 
44 | module.exports.merge = merge = function(a,b){
45 |   Object.keys(b).forEach(function(key){
46 |     if (!(key in a)){
47 |       a[key] = b[key];
48 |       return;
49 |     }
50 |     if (typeof a[key] !== typeof b[key]){
51 |       a[key] = b[key];
52 |       return;
53 |     }
54 |     if (typeof a[key] !== 'object'){
55 |       a[key] = b[key];
56 |       return;
57 |     }
58 |     merge(a[key],b[key]);
59 |   });
60 | };
61 | 
62 | deepCompare = function(a,b){
63 |   if (a === b) return true;
64 |   var type = typeof a;
65 |   if (type !== typeof b) return false;
66 |   if (type !== 'object') return a === b;
67 |   if (a === null) return a === b;
68 |   var akeys = Object.keys(a);
69 |   var bkeys = Object.keys(b);
70 |   if (akeys.length !== bkeys.length) return false;
71 |   return !akeys.some(function(key){
72 |     if (!(key in b)) return true;
73 |     return !deepCompare(a[key],b[key]);
74 |   });
75 | };
76 | 


--------------------------------------------------------------------------------
/src/renderers/Blessed.js:
--------------------------------------------------------------------------------
 1 | module.exports.render = function(component,args){
 2 |   var parent = args[1];
 3 |   parent.append(component.instance);
 4 |   return component.instance;
 5 | };
 6 | 
 7 | module.exports.getId = function(element){
 8 |   return element._tamboId;
 9 | };
10 | 
11 | module.exports.setId = function(element,id){
12 |   return element._tamboId = id;
13 | };
14 | 
15 | module.exports.appendChild = function(parent,child){
16 |   return parent.append(child);
17 | };
18 | 
19 | module.exports.removeChild = function(parent,child){
20 |   return parent.remove(child);
21 | };
22 | 
23 | module.exports.replaceChild = function(parent,childA,childB){
24 |   parent.insertBefore(childB,childA);
25 |   parent.remove(childA);
26 | };
27 | 
28 | module.exports.createText = function(text){
29 |   return blessed.text({
30 |     content : text
31 |   });
32 | };
33 | 
34 | module.exports.createElement = function(tagName,props){
35 |   var events = Object.keys(props).filter(function(prop){
36 |     return /^on\W/.test(prop);
37 |   }).reduce(function(obj,key){
38 |     obj[key] = props[key];
39 |     delete props[key];
40 |     return obj;
41 |   },{});
42 | 
43 |   var element = createBlessed(tagName,props);
44 | 
45 |   Object.keys(events).forEach(function(ev){
46 |     ev = ev.replace('on','').toLowerCase();
47 |     element.on(ev,events[ev]);
48 |   });
49 | 
50 |   return element;
51 | };
52 | 
53 | function createBlessed(tagName,props){
54 | 
55 |   switch(tagName){
56 |     case 'text':
57 |     case 'line':
58 |     case 'bigtext':{
59 |       return blessed[tagName](props);
60 |     }
61 |     case 'list':
62 |     case 'filemanager':
63 |     case 'listtable':
64 |     case 'listbar':{
65 |       return blessed[tagName](props);
66 |     }
67 |     case 'form':
68 |     case 'textarea':
69 |     case 'textbox':
70 |     case 'button':
71 |     case 'checkbox':
72 |     case 'radioset':
73 |     case 'radiobutton':{
74 |       return blessed[tagName](props);
75 |     }
76 |     case 'prompt':
77 |     case 'question':
78 |     case 'message':
79 |     case 'loading':{
80 |       return blessed[tagName](props);
81 |     }
82 |     case 'progressbar':
83 |     case 'log':
84 |     case 'table':{
85 |       return blessed[tagName](props);
86 |     }
87 |     case 'terminal':
88 |     case 'image':
89 |     case 'ansiimage':
90 |     case 'overlayimage':
91 |     case 'video':
92 |     case 'layout':{
93 |       return blessed[tagName](props);
94 |     }
95 |     default:
96 |       throw new Error(tagName + ' does not exists');
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/renderers/DOM.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var DOM = document;
 3 | 
 4 | module.exports.setDOM = function(newDom){
 5 |   DOM = newDom;
 6 | };
 7 | 
 8 | if (typeof document === 'object'){
 9 |   module.exports.setDOM(document);
10 | }
11 | 
12 | module.exports.render = function(component){
13 |   return component.instance;
14 | };
15 | 
16 | module.exports.getID = function(element){
17 |   return element.getAttribute('data-tamboId');
18 | };
19 | 
20 | module.exports.setID = function(element,id){
21 |   return element.setAttribute('data-tamboId',id);
22 | };
23 | 
24 | var applyStyle;
25 | module.exports.setProp = function(element,key,value){
26 |   if (key.indexOf('on') === 0){
27 |     key = key.toLowerCase();
28 |     element[key] = value;
29 |   }else if (key === 'style'){
30 |     if (typeof value === 'string'){
31 |       element.style = value;
32 |       return;
33 |     }
34 |     Object.keys(value).forEach(applyStyle.bind(void 0,element.style,value));
35 |   }else if (key == 'className'){
36 |     element.className = value;
37 |   }else if (key !== 'children'){
38 |     element.setAttribute(key,value);
39 |   }
40 | };
41 | 
42 | applyStyle = function(obj,style,key){
43 |   switch(typeof style[key]){
44 |     case 'string' : obj[key] = style[key]; return;
45 |     case 'number' : obj[key] = style[key] + 'px'; return;
46 |     case 'undefined' : return;
47 |   }
48 | 
49 |   Object.keys(style[key]).forEach(applyStyle.bind(void 0,obj[key],style[key]));
50 | };
51 | 
52 | module.exports.appendChild = function(parent,child){
53 |   return parent.appendChild(child);
54 | };
55 | 
56 | module.exports.insertChild = function(parent,child,index){
57 |   return parent.insertBefore(child,parent.childNodes[index]);
58 | };
59 | 
60 | module.exports.removeChild = function(parent,child){
61 |   return parent.removeChild(child);
62 | };
63 | 
64 | module.exports.replaceChild = function(parent,oldChild,newChild){
65 |   return parent.replaceChild(newChild,oldChild);
66 | };
67 | 
68 | module.exports.isElement = function(textNode){
69 |   return textNode.nodeType === 1;
70 | };
71 | module.exports.isText = function(textNode){
72 |   return textNode.nodeType === 3;
73 | };
74 | module.exports.createElement = function(tagName){
75 |   return DOM.createElement(tagName);
76 | };
77 | module.exports.createText = function(text){
78 |   return DOM.createTextNode(text);
79 | };
80 | module.exports.setText = function(textNode,text){
81 |   textNode.textContent = text;
82 | };
83 | 


--------------------------------------------------------------------------------
/src/renderers/String.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | module.exports.render = function(component){
  4 |   return component.instance.toString();
  5 | };
  6 | 
  7 | module.exports.getId = function(element){
  8 |   return element._tamboID;
  9 | };
 10 | 
 11 | module.exports.setId = function(element,id){
 12 |   element._tamboID = id;
 13 | };
 14 | 
 15 | module.exports.setProp = function(element,key,value){
 16 |   element.props[key] = value;
 17 | };
 18 | 
 19 | module.exports.getChildren = function(parent){
 20 |   return parent.children;
 21 | };
 22 | 
 23 | module.exports.appendChild = function(parent,child){
 24 |   return parent.children.push(child);
 25 | };
 26 | 
 27 | module.exports.removeChild = function(parent,child){
 28 |   var children = parent.children;
 29 |   return children.splice(children.indexOf(child),1);
 30 | };
 31 | 
 32 | module.exports.replaceChild = function(parent,childA,childB){
 33 |   var children = parent.children;
 34 |   return children.splice(children.indexOf(childA),1,childB);
 35 | };
 36 | var TextWrapper;
 37 | module.exports.createText = function(text){
 38 |   return new TextWrapper(text);
 39 | };
 40 | TextWrapper = function(text){
 41 |   this.text = text;
 42 | };
 43 | 
 44 | TextWrapper.prototype.toString = function(){
 45 |   return this.text;
 46 | };
 47 | 
 48 | module.exports.getText = function(node){
 49 |   return node.children.length ? node.children[0] : '';
 50 | };
 51 | 
 52 | module.exports.setText = function(node,text){
 53 |   node.children = [text];
 54 | };
 55 | 
 56 | module.exports.isText = function(textNode){
 57 |   return textNode instanceof TextWrapper;
 58 | };
 59 | var FakeElem;
 60 | module.exports.createElement = function(tagName,props){
 61 |   return new FakeElem(tagName,props);
 62 | };
 63 | 
 64 | FakeElem = function(tagName,props){
 65 |   this.tagName = tagName;
 66 |   this.props = Object.create(props);
 67 |   delete this.props.children;
 68 |   this.children = [];
 69 | };
 70 | 
 71 | var proto = FakeElem.prototype;
 72 | var reduceProperties;
 73 | proto.toString = function(){
 74 |   var props = this.props;
 75 |   var tagName = this.tagName;
 76 |   var ID = this._tamboID;
 77 |   return '<' + tagName + ' ' +
 78 |     'data-tamboId=\"' + ID + '\" ' +
 79 |     Object.keys(props).reduce(reduceProperties.bind(void 0,props),'') +
 80 |     '>' + this.children.join('') + '<' + this.tagName + '>';
 81 | };
 82 | 
 83 | var reduceObject;
 84 | reduceProperties = function(props,str,key){
 85 |   var value = props[key];
 86 |   switch(typeof value){
 87 |     case 'undefined':
 88 |       return str;
 89 |     case 'function':
 90 |       console.log('It is possible to implement a json-rpc for events');
 91 |       return str;
 92 |     case 'object':
 93 |       if (value === null) return str;
 94 |       if (value instanceof Array){
 95 |         return str + ' ' + key + '=\"' + value.join(' ') + '\"';
 96 |       }
 97 |       return str + ' ' + key + '=\"' + Object.keys(value)
 98 |         .reduce(reduceObject.bind(void 0,value),'') + '\"';
 99 |   }
100 |   return str + ' ' + key + '=\"' + value + '\"';
101 | };
102 | 
103 | reduceObject = function(obj,str,key){
104 |   return str + ';' + key + ':' + obj[key];
105 | };
106 | 


--------------------------------------------------------------------------------
/src/renderers/Test.js:
--------------------------------------------------------------------------------
  1 | var EE = require('events').EventEmitter;
  2 | 
  3 | var TestRenderer;
  4 | 
  5 | var TreeNode = function(tagName){
  6 |   EE.call(this);
  7 |   if (typeof tagName !== 'string') throw new Error('not sure how to create non-string object');
  8 |   this.tagName = tagName;
  9 |   this.props = {};
 10 |   this.children = [];
 11 | };
 12 | 
 13 | TreeNode.prototype = Object.create(EE.prototype);
 14 | 
 15 | var TextNode = function(text){
 16 |   this.text = text;
 17 | };
 18 | 
 19 | TextNode.prototype = Object.create(EE.prototype);
 20 | 
 21 | module.exports = TestRenderer = function(){
 22 |   EE.call(this);
 23 | };
 24 | 
 25 | module.exports.TreeNode = TreeNode;
 26 | module.exports.TextNode = TextNode;
 27 | 
 28 | var proto = TestRenderer.prototype = Object.create(EE.prototype);
 29 | 
 30 | proto.render = function(component){
 31 |   return component;
 32 | };
 33 | 
 34 | proto.getID = function(node){
 35 |   return node.ID;
 36 | };
 37 | 
 38 | proto.setID = function(node,id){
 39 |   node.ID = id;
 40 | };
 41 | 
 42 | proto.setProp = function(node,key,value){
 43 |   node[key] = value;
 44 | };
 45 | 
 46 | proto.getChildren = function(parent){
 47 |   return parent.children.slice(0);
 48 | };
 49 | 
 50 | proto.appendChild = function(parent,child){
 51 |   this.insertChild(parent,child,parent.children.length);
 52 | };
 53 | 
 54 | proto.insertChild = function(parent,child,i){
 55 |   var found = parent.children.indexOf(child);
 56 |   if (found !== -1) throw 'insert: child already exists in parent';
 57 |   if (i >= parent.children.length) parent.children.push(child);
 58 |   else parent.children.splice(i,0,child);
 59 |   child.parent = parent;
 60 |   this.emit('insert',parent,child,parent.children.length);
 61 |   parent.emit('insertChild',child,parent.children.length);
 62 |   child.emit('insert',parent,parent.children.length);
 63 | };
 64 | 
 65 | proto.removeChild = function(parent,child){
 66 |   var i = parent.children.indexOf(child);
 67 |   if (i === -1) throw 'remove: old not found';
 68 |   parent.children.splice(i,1);
 69 |   child.parent = void 0;
 70 |   this.emit('remove',parent,child);
 71 |   parent.emit('removeChild',child);
 72 |   child.emit('remove',child);
 73 | };
 74 | 
 75 | proto.replaceChild = function(parent,oldNode,newNode){
 76 |   this.emit('replace',parent,oldNode,newNode);
 77 |   var i = parent.children.indexOf(oldNode);
 78 |   if (i === -1) throw 'replace: old not found';
 79 |   this.removeChild(parent,oldNode);
 80 |   this.insertChild(parent,newNode,i);
 81 | };
 82 | 
 83 | proto.createText = function(text){
 84 |   return new TextNode(text);
 85 | };
 86 | 
 87 | proto.getText = function(node){
 88 |   return node.text;
 89 | };
 90 | 
 91 | proto.setText = function(node,text){
 92 |   node.text = text;
 93 | };
 94 | 
 95 | proto.isText = function(node){
 96 |   return node instanceof TextNode;
 97 | };
 98 | 
 99 | proto.createElement = function(tagName){
100 |   return new TreeNode(tagName);
101 | };
102 | 
103 | proto.isElement = function(node){
104 |   return node instanceof TreeNode;
105 | };
106 | 


--------------------------------------------------------------------------------
/src/updaters/BatchUpdate.js:
--------------------------------------------------------------------------------
  1 | require('setimmediate');
  2 | 
  3 | var BatchUpdate,isAncestorOf,isShadowOf;
  4 | module.exports = BatchUpdate = function(){
  5 |   this.toRerender = new Set();
  6 |   this.immediateID = void 0;
  7 | };
  8 | 
  9 | var proto = BatchUpdate.prototype;
 10 | 
 11 | proto.rerender = function(){
 12 |   var nextNodes = Array.from(this.toRerender);
 13 |   this.toRerender = new Set();
 14 |   var _this = this;
 15 |   return this.renderNodes(nextNodes).then(function(){
 16 |     if (_this.toRerender.length) return _this.rerender();
 17 |     _this.immediateID = false;
 18 |     return true;
 19 |   },function(e){
 20 |     console.error(e);
 21 |   });
 22 | };
 23 | 
 24 | proto.renderNodes = function(nextNodes){
 25 |   /*
 26 |     its actually possible to rerender in parallel
 27 |     What would have to be done is to run siblings in a nested way
 28 |     For now just having them appropriately sorted is nice
 29 |   */
 30 | 
 31 |   var promised = new Map();
 32 |   var possiblyIndependent = nextNodes.map(function(component){
 33 |     return component.renderNode;
 34 |   });
 35 |   var offset = 0;
 36 |   return Promise.all(nextNodes.reduce(function(pending,component,i){
 37 |     var renderNode = component.renderNode;
 38 |     if (!component._isUpdating) return pending;
 39 |     if (renderNode.destroyed) return pending;
 40 |     var propProvider;
 41 |     if (possiblyIndependent.some(function(oRenderNode){
 42 |       var oComponent;
 43 |       if (renderNode === oRenderNode) return;
 44 |       if (isAncestorOf(renderNode,oRenderNode)){
 45 |         propProvider = oComponent;
 46 |         possiblyIndependent.splice(i-offset--,1);
 47 |         return true;
 48 |       }
 49 |       if (isShadowOf(renderNode,oRenderNode)){
 50 |         propProvider = oComponent;
 51 |         possiblyIndependent.splice(i-offset--,1);
 52 |         return true;
 53 |       }
 54 |     })){
 55 |       var waiting = promised.get(ancestor);
 56 |       if (!waiting){
 57 |         waiting = [];
 58 |         promised.set(ancestor,waiting);
 59 |       }
 60 |       waiting.push(component);
 61 |       return pending;
 62 |     }
 63 |     var ret = component.renderNode.setPatch(component.render());
 64 |     pending.push(Promise.resolve(ret || true).then(function(){
 65 |       var waiting = promised.get(component);
 66 |       if (!waiting) return;
 67 |       return this.renderNodes(waiting);
 68 |     }.bind(this)));
 69 |     return pending;
 70 |   },[]));
 71 | };
 72 | 
 73 | proto.add = function(component){
 74 |   if (component._isUpdating) return;
 75 |   component._isUpdating = true;
 76 |   if (this.toRerender.has(component)) return;
 77 |   this.toRerender.add(component);
 78 |   if (this.toRerender.length > 1) return;
 79 |   this.immediateID = setImmediate(this.rerender.bind(this));
 80 | };
 81 | 
 82 | proto.remove = function(component){
 83 |   if (!component._isUpdating) return;
 84 |   component._isUpdating = false;
 85 |   if (!this.toRerender.has(component)) return;
 86 |   this.toRerender.remove(component);
 87 |   if (this.toRerender.length > 0) return;
 88 |   clearImmediate(this.immediateID);
 89 |   this.immediateID = false;
 90 | };
 91 | 
 92 | isAncestorOf = function(possible,child){
 93 |   var parent = child.parent;
 94 |   while(parent){
 95 |     if (possible === parent) return true;
 96 |     parent = parent.parent;
 97 |   }
 98 |   return false;
 99 | };
100 | 
101 | isShadowOf = function(possible,figure){
102 |   var shadow = figure.shadow;
103 |   while(shadow){
104 |     if (possible === shadow) return true;
105 |     shadow = figure.shadow;
106 |   }
107 |   return false;
108 | };
109 | 


--------------------------------------------------------------------------------
/src/updaters/SyncUpdate.js:
--------------------------------------------------------------------------------
 1 | var SyncUpdate;
 2 | module.exports = SyncUpdate = function(){};
 3 | 
 4 | var proto = SyncUpdate.prototype;
 5 | 
 6 | proto.add = function(component){
 7 |   if (component.destroyed) return;
 8 |   if (component._isUpdating) return;
 9 |   component._isUpdating = true;
10 |   component.renderNode.update();
11 | };
12 | 
13 | proto.remove = function(component){
14 |   if (component.destroyed) return;
15 |   if (!component._isUpdating) return;
16 |   component._isUpdating = false;
17 | };
18 | 


--------------------------------------------------------------------------------
/tests/component/index.js:
--------------------------------------------------------------------------------
 1 | var tap = require('tap');
 2 | 
 3 | tap.test('Component',function(at){
 4 |   at.test('Lifecycle',function(aat){
 5 |     /*
 6 |     - mounting
 7 |       - when is created through `tEmbO.render(component, parentEl)` - will mount, did mount
 8 |       - When a shadow creates this as its figure - will mount, did mount
 9 |       - When a parent adds a child - will mount, did mount
10 |     */
11 |     aat.test('mount',require('./mount.js'));
12 |     /*
13 |     - updating
14 |       - when shadow provides it props - recieves props, should update, will update, did update
15 |       - when parent provides it props - recieves props, should update, will update, did update
16 |       - when set state is called - should update, will update, did update
17 |         - will not update parent
18 |         - will not update shadow if render returns the same patch
19 |         - will not update children if render returns the same patch
20 |         - will update shadow if render provides different props
21 |         - will update children if render provides different props
22 |       - can cancel update - should update -> return false
23 |     */
24 |     aat.test('update',require('./update.js'));
25 | 
26 |     /*
27 |     - unmounting
28 |       - provide a function that calls unmount?
29 |       - when shadow returns null instead of this component - will unmount
30 |       - when parent removes children - will unmount
31 |     */
32 |     aat.test('unmount',require('./unmount.js'));
33 | 
34 |     aat.end();
35 |   });
36 |   at.end();
37 | });
38 | 


--------------------------------------------------------------------------------
/tests/component/mount.js:
--------------------------------------------------------------------------------
  1 | var Tembo = require('../../src/Tembo');
  2 | var TestRender = require('../../src/renderers/Test');
  3 | 
  4 | var renderer = new TestRender();
  5 | var tembo = new Tembo(renderer);
  6 | 
  7 | var runMountTest,createMountListener;
  8 | module.exports = function(at){
  9 |   at.test('mounted by developer',function(t){
 10 |     var rInsert = false,pInsert = false;
 11 |     renderer.on('insert',function(){
 12 |       rInsert = true;
 13 |     });
 14 |     var root = new TestRender.TreeNode('root');
 15 |     root.on('insertChild',function(){
 16 |       pInsert = true;
 17 |     });
 18 |     var mountTriggers = {};
 19 |     var el = createMountListener(t,root,mountTriggers);
 20 |     tembo.render(tembo.createElement(el,{ type : 'string' },[]),root);
 21 |     runMountTest(t,root,mountTriggers);
 22 |     t.ok(rInsert,'insert happened in renderer');
 23 |     t.ok(pInsert,'insertChild happened in rootNode');
 24 |     renderer.removeAllListeners('insert');
 25 |     t.end();
 26 |   });
 27 |   at.test('mounted by shadow',function(t){
 28 |     var rInsert = false,pInsert = false;
 29 |     renderer.on('insert',function(){
 30 |       rInsert = true;
 31 |     });
 32 |     var root = new TestRender.TreeNode('root');
 33 |     root.on('insertChild',function(){
 34 |       pInsert = true;
 35 |     });
 36 |     var smt = {};
 37 |     var fmt = {};
 38 |     var sel = createMountListener(t,root,smt,'shadow');
 39 |     var fel = createMountListener(t,root,fmt,'figure');
 40 |     tembo.render(tembo.createElement(sel,{
 41 |       type : 'element',
 42 |       element : tembo.createElement(fel,{ type : 'string' },[])
 43 |     },[]),root);
 44 |     runMountTest(t,root,smt,'shadow');
 45 |     runMountTest(t,root,fmt,'figure');
 46 |     t.ok(smt.render <= fmt.beforeMount,'shadow renders before figure beforeMount');
 47 |     t.ok(fmt.afterMount <= smt.afterMount,'figure afterMount happens before shadow afterMount');
 48 |     t.ok(rInsert,'insert happened in renderer');
 49 |     t.ok(pInsert,'insertChild happened in rootNode');
 50 |     renderer.removeAllListeners('insert');
 51 |     t.end();
 52 |   });
 53 |   at.test('mounted by by parent',function(t){
 54 |     var rInsert = 0,pInsert = 0;
 55 |     renderer.on('insert',function(){
 56 |       rInsert++;
 57 |     });
 58 |     var root = new TestRender.TreeNode('root');
 59 |     root.on('insertChild',function(){
 60 |       pInsert++;
 61 |     });
 62 |     var pmt = {};
 63 |     var cmt = {};
 64 |     var pel = createMountListener(t,root,pmt,'parent');
 65 |     var cel = createMountListener(t,void 0,cmt,'child');
 66 |     tembo.render(tembo.createElement(pel,{
 67 |       type : 'element',
 68 |       element : tembo.createElement('container',{},[
 69 |         tembo.createElement(cel,{ type : 'string' },[])
 70 |       ])
 71 |     },[]),root);
 72 |     runMountTest(t,root,pmt,'parent');
 73 |     runMountTest(t,root,cmt,'child');
 74 |     t.ok(pmt.render <= cmt.beforeMount,'parent renders before child beforeMount');
 75 |     t.ok(cmt.afterMount <= pmt.afterMount,'child afterMount happens before parent afterMount');
 76 |     t.equal(rInsert,2,'insert happened twice in renderer');
 77 |     t.ok(pInsert,'insertChild happened in rootNode');
 78 |     renderer.removeAllListeners('insert');
 79 |     t.end();
 80 |   });
 81 |   at.end();
 82 | };
 83 | 
 84 | createMountListener = function(t,root,mountTriggers,prefix){
 85 |   if (!prefix) prefix = '';
 86 |   else prefix +=': ';
 87 |   return tembo.createClass({
 88 |     componentWillMount : function(){
 89 |       mountTriggers.beforeMount = Date.now();
 90 |       if (root){
 91 |         t.test('beforeMount',function(beforeMount){
 92 |           beforeMount.notOk(root.children.length,prefix+'no children exist');
 93 |           beforeMount.end();
 94 |         });
 95 |       }
 96 |     },componentDidMount : function(){
 97 |       mountTriggers.afterMount = Date.now();
 98 |       var _this = this;
 99 |       if (root){
100 |         t.test('afterMount',function(afterMount){
101 |           afterMount.ok(root.children.length,prefix+'children exist');
102 |           afterMount.equal(root.children.length,1,prefix+'one child exists');
103 |           afterMount.equal(root.children[0],tembo.getNative(_this),prefix+'The child is equal to the native element');
104 |           afterMount.end();
105 |         });
106 |       }
107 |     },render : function(){
108 |       mountTriggers.render = Date.now();
109 |       switch(this.props.type){
110 |         case 'string': return 'string';
111 |         case 'element': return this.props.element;
112 |       }
113 |     }
114 |   });
115 | };
116 | 
117 | runMountTest = function(t,root,mountTriggers,prefix){
118 |   if (!prefix) prefix = '';
119 |   else prefix +=': ';
120 | 
121 |   t.ok(mountTriggers.beforeMount,prefix+'componentWillMount triggered');
122 |   t.ok(mountTriggers.render,prefix+'render triggered');
123 |   t.ok(mountTriggers.afterMount,prefix+'componentDidMount triggered');
124 |   t.ok(mountTriggers.beforeMount <= mountTriggers.render,prefix+'beforeMount happened before render');
125 |   t.ok(mountTriggers.render <= mountTriggers.afterMount,prefix+'render happened before afterMount');
126 | };
127 | 


--------------------------------------------------------------------------------
/tests/component/unmount.js:
--------------------------------------------------------------------------------
  1 | var Tembo = require('../../src/Tembo');
  2 | var TestRender = require('../../src/renderers/Test');
  3 | var EE = require('events').EventEmitter;
  4 | 
  5 | var triggerer = new EE();
  6 | var renderer = new TestRender();
  7 | var tembo = new Tembo(renderer);
  8 | 
  9 | var createChildTest,createReturnReplacer,createUnmountListener,runUnmountTest,runReplacement;
 10 | module.exports = function(at){
 11 |   at.comment('by developer',function(){});
 12 |   at.test('replaced by null',{ bail : true },runReplacement.bind(void 0,null));
 13 |   at.test('replaced by text',{ bail : true },runReplacement.bind(void 0,'replacement'));
 14 |   at.test(
 15 |     'replaced by native-element',{ bail : true },
 16 |     runReplacement.bind(void 0,tembo.createElement('replacement',{}))
 17 |   );
 18 |   at.test(
 19 |     'replaced by component',{ bail : true },
 20 |     runReplacement.bind(void 0,tembo.createElement(
 21 |       tembo.createClass({
 22 |         render : function(){ return 'replacement'; }
 23 |       }),{}
 24 |     ))
 25 |   );
 26 |   at.end();
 27 | };
 28 | 
 29 | runReplacement = function(replacement,aat){
 30 |   aat.test('by shadow',function(t){
 31 |     var root = new TestRender.TreeNode('root');
 32 | 
 33 |     var fmt = {};
 34 |     var sel = createReturnReplacer();
 35 |     var fel = createUnmountListener(t,fmt);
 36 |     tembo.render(tembo.createElement(sel,{
 37 |       willNull : true,
 38 |       element : tembo.createElement(fel,{ prefix : 'self',type : 'string' },[])
 39 |     },[]),root);
 40 |     var expected = replacement ? [replacement] : [];
 41 |     runUnmountTest(t,fmt,replacement,['self'],expected);
 42 |     triggerer.removeAllListeners('replaceReturn');
 43 |     t.end();
 44 |   });
 45 |   aat.test('by parent',function(aaat){
 46 |     aaat.test('empty children',function(t){
 47 |       var root = new TestRender.TreeNode('root');
 48 |       var fmt = {};
 49 |       var pel = createReturnReplacer();
 50 |       var cel = createUnmountListener(t,fmt);
 51 |       tembo.render(tembo.createElement(pel,{
 52 |         element : tembo.createElement('container',{},[
 53 |           tembo.createElement(cel,{ prefix : 'child' },[])
 54 |         ])
 55 |       },[]),root);
 56 |       var expected = replacement ? [replacement] : [];
 57 |       runUnmountTest(t,fmt,tembo.createElement('container',{},replacement),['child'],expected);
 58 |       triggerer.removeAllListeners('replaceReturn');
 59 |       t.end();
 60 |     });
 61 | 
 62 |     aaat.test('first child',function(t){
 63 |       createChildTest(t,replacement,[
 64 |         { prefix : 'first' },
 65 |         'second',
 66 |         'third'
 67 |       ]);
 68 | 
 69 |       t.end();
 70 |     });
 71 |     aaat.test('second child',function(t){
 72 |       createChildTest(t,replacement,[
 73 |         'first',
 74 |         { prefix : 'second' },
 75 |         'third'
 76 |       ]);
 77 | 
 78 |       t.end();
 79 |     });
 80 |     aaat.test('third child',function(t){
 81 |       createChildTest(t,replacement,[
 82 |         'first',
 83 |         'second',
 84 |         { prefix : 'third' }
 85 |       ]);
 86 | 
 87 |       t.end();
 88 |     });
 89 |     aaat.test('top two children',function(t){
 90 |       createChildTest(t,replacement,[
 91 |         { prefix : 'first' },
 92 |         { prefix : 'second' },
 93 |         'third'
 94 |       ]);
 95 |       createChildTest(t,replacement,[
 96 |         'first',
 97 |         { prefix : 'second' },
 98 |         { prefix : 'third' }
 99 |       ]);
100 | 
101 |       t.end();
102 |     });
103 |     aaat.test('bottom two children',function(t){
104 |       createChildTest(t,replacement,[
105 |         'first',
106 |         { prefix : 'second' },
107 |         { prefix : 'third' }
108 |       ]);
109 | 
110 |       t.end();
111 |     });
112 |     aaat.test('middle of four children',function(t){
113 |       createChildTest(t,replacement,[
114 |         'first',
115 |         { prefix : 'second' },
116 |         { prefix : 'third' },
117 |         'fourth'
118 |       ]);
119 | 
120 |       t.end();
121 |     });
122 |     aaat.test('four children individually',function(t){
123 |       createChildTest(t,replacement,[
124 |         { prefix : 'first' },
125 |         { prefix : 'second' },
126 |         { prefix : 'third' },
127 |         { prefix : 'fourth' }
128 |       ]);
129 |       t.end();
130 |     });
131 |     aaat.end();
132 |   });
133 | 
134 |   aat.end();
135 | };
136 | 
137 | createChildTest = function(t,replacement,children){
138 |   var root = new TestRender.TreeNode('root');
139 |   var fmt = {};
140 |   var pel = createReturnReplacer();
141 |   var cel = createUnmountListener(t,fmt);
142 |   var expectedUnmount = [];
143 |   var newChildren = [];
144 |   var firstChildren = children.map(function(child){
145 |     if (typeof child === 'string'){
146 |       newChildren.push(child);
147 |       return child;
148 |     }
149 |     if (replacement) newChildren.push(replacement);
150 |     expectedUnmount.push(child.prefix);
151 |     return tembo.createElement(cel,child,[]);
152 |   });
153 | 
154 |   tembo.render(tembo.createElement(pel,{
155 |     element : tembo.createElement('container',{},firstChildren)
156 |   },[]),root);
157 |   runUnmountTest(t,fmt,tembo.createElement('container',{},newChildren),expectedUnmount,newChildren);
158 |   triggerer.removeAllListeners('replaceReturn');
159 | };
160 | 
161 | createReturnReplacer = function(){
162 |   return tembo.createClass({
163 |     componentDidMount : function(){
164 |       var _this = this;
165 |       triggerer.on('replaceReturn',function(newObj){
166 |         _this.setState({ ret : newObj });
167 |       });
168 |     },
169 |     render : function(){
170 |       return (this.state.ret !== void 0) ? this.state.ret : this.props.element;
171 |     }
172 |   });
173 | };
174 | 
175 | createUnmountListener = function(t,mountTriggers){
176 |   return tembo.createClass({
177 |     componentDidMount : function(){
178 |       mountTriggers.self = this;
179 |       mountTriggers.didUnmount = 0;
180 |     },
181 |     componentWillUnmount : function(){
182 |       if (!mountTriggers.didUnmount) mountTriggers.didUnmount = [];
183 |       mountTriggers.didUnmount.push(this.props.prefix);
184 |     },
185 |     render : function(){
186 |       return tembo.createElement('temporary',{});
187 |     }
188 |   });
189 | };
190 | 
191 | runUnmountTest = function(t,mountTriggers,replacement,expectedUnmount,expected){
192 | 
193 |   t.notOk(mountTriggers.beforeUnmount,'beforeUnmount should be false');
194 | 
195 |   var native,parent;
196 | 
197 |   var el = expected.length;
198 |   var l;
199 | 
200 |   t.test('beforeUnmount',function(beforeUnmount){
201 |     native = tembo.getNative(mountTriggers.self);
202 |     beforeUnmount.ok(native,'the obj has a native element');
203 |     parent = native.parent;
204 |     beforeUnmount.ok(parent,'the parent exists');
205 |     l = parent.children.length;
206 |     beforeUnmount.ok(parent.children.length,'has children');
207 |     beforeUnmount.notEqual(parent.children.indexOf(native),-1,'native is a member of those children');
208 |     beforeUnmount.end();
209 |   });
210 | 
211 |   triggerer.emit('replaceReturn',replacement);
212 |   t.test('afterUnmount',function(afterUnmount){
213 |     afterUnmount.equal(parent.children.length,el,'the number of children are predictable');
214 |     afterUnmount.equal(parent.children.indexOf(native),-1,'native is not a member of those children');
215 |     parent.children.forEach(function(child,i){
216 |       if (typeof expected[i] === 'string'){
217 |         afterUnmount.equal(child.text,expected[i],'all other children stay in tact');
218 |       }
219 |     });
220 |     afterUnmount.equal(
221 |       mountTriggers.didUnmount.length,expectedUnmount.length,
222 |       'componentWillUnmount triggered a predictable number of times'
223 |     );
224 |     mountTriggers.didUnmount.forEach(function(child,i){
225 |       var i = expectedUnmount.indexOf(child);
226 |       afterUnmount.notEqual(i,-1,'all removed children had component will mount triggered');
227 |     });
228 |     afterUnmount.end();
229 |   });
230 | };
231 | 


--------------------------------------------------------------------------------
/tests/component/update.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | - updating
 3 |   - when shadow provides it props - recieves props, should update, will update, did update
 4 |   - when parent provides it props - recieves props, should update, will update, did update
 5 |   - when set state is called - should update, will update, did update
 6 |     - will not update parent
 7 |     - will not update shadow if render returns the same patch
 8 |     - will not update children if render returns the same patch
 9 |     - will update shadow if render provides different props
10 |     - will update children if render provides different props
11 |   - can cancel update - should update -> return false
12 | */
13 | 
14 | module.exports = function(at){
15 |   at.comment('shadow provides props',function(){});
16 |   at.comment('parent provides props',function(){});
17 |   at.comment('set state called',function(){});
18 |   at.comment('can cancel update',function(){});
19 |   at.end();
20 | };
21 | 


--------------------------------------------------------------------------------
/tests/patch/component.js:
--------------------------------------------------------------------------------
 1 | 
 2 |   /*
 3 | - if the component returns null - parent should be empty
 4 |   - can pass String
 5 | - if the component returns text - parent should have a textNode
 6 |   - can pass Patch
 7 | - if the component returns NativeElement - parent should have a native Element
 8 |   - can pass NativeElement test
 9 | - if the component returns a component - that component decides what is rendered
10 |   - sub component can pass String
11 |   - sub Component can pass Patch
12 |   - sub Component can pass Falsy
13 |   - if passing children
14 |     - the other component gets direct references to the children
15 |     - the other component may not render the child
16 |     - the other component may create entirely new children
17 |     - the other component may add the children to their component
18 |   - when not passing children
19 |     - the other component may create children
20 |     - the other component may use a property as its children
21 |     - the other component may not have children
22 | */
23 | var createComponent,childrenAnomalies;
24 | module.exports = function(at){
25 |   at.comment('pass Falsy',function(t){
26 |     createComponent(t,'falsy',require('./falsy.js'));
27 |   });
28 |   at.comment('pass String',function(t){
29 |     createComponent(t,'string',require('./string.js'));
30 |   });
31 |   at.comment('pass Native',function(t){
32 |     createComponent(t,'native',require('./native-element.js'));
33 |   });
34 |   at.comment('pass Component',function(aat){
35 |     createComponent(aat,'component',function(aaat){
36 |       aaat.comment('pass Falsy',function(t){
37 |         createComponent(t,'falsy',require('./falsy.js'));
38 |       });
39 |       aaat.comment('pass String',function(t){
40 |         createComponent(t,'string',require('./string.js'));
41 |       });
42 |       aaat.comment('pass Native',function(t){
43 |         createComponent(t,'native',require('./native-element.js'));
44 |       });
45 |       aaat.comment('childrenAnomalies',childrenAnomalies);
46 |     });
47 |     aat.end();
48 |   });
49 | 
50 |   at.comment('Children Anomolies',childrenAnomalies);
51 |   at.end();
52 | };
53 | 
54 | childrenAnomalies = function(){};
55 | 


--------------------------------------------------------------------------------
/tests/patch/falsy.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | - removing values
 3 |   - when there was nothing, nothing changes
 4 |   - when text was inside its parent, it is removed
 5 |   - when an element was inside its parent, it is removed
 6 | - providing values
 7 |   - Should be in the correct sibling position
 8 |     - when first, have 2 and 3 - updating will make 1, 2, 3
 9 |     - when second, have 1 and 3 - updating will make 1, 2, 3
10 |     - when third, have 1, 2 - updating will make 1, 2, 3
11 | */
12 | 
13 | module.exports = function(at){
14 |   at.comment('nothing is updated for two false values',function(){});
15 |   at.comment('text gets removed',function(){});
16 |   at.comment('elments get removed',function(){});
17 |   at.comment('components get removed',function(){});
18 |   at.comment('children removal',function(){});
19 |   at.end();
20 | };
21 | 


--------------------------------------------------------------------------------
/tests/patch/index.js:
--------------------------------------------------------------------------------
 1 | var tap = require('tap');
 2 | 
 3 | tap.test('Patch',function(at){
 4 |   /*
 5 |   - when rendered, creates a textNode
 6 |   - When updated, updates textNode
 7 |   */
 8 |   at.test('string',require('./string.js'));
 9 |   /*
10 |   - when rendered - creates an Element
11 |   - when rendered with children - creates an element with children
12 |   - when rendered with grand children - creates an element with grandchildren
13 |   - when adding children - should have more children
14 |   - when removing children - should have less children
15 |     - first removed - have 2 and 3
16 |     - second gone - have 1 and 3
17 |     - third gone - have 1 and 2
18 |   */
19 |   at.test('native element',require('./native-element.js'));
20 |   /*
21 |   - removing values
22 |     - when there was nothing, nothing changes
23 |     - when text was inside its parent, it is removed
24 |     - when an element was inside its parent, it is removed
25 |   - providing values
26 |     - Should be in the correct sibling position
27 |       - when first, have 2 and 3 - updating will make 1, 2, 3
28 |       - when second, have 1 and 3 - updating will make 1, 2, 3
29 |       - when third, have 1, 2 - updating will make 1, 2, 3
30 |   */
31 |   at.test('falsy value',require('./falsy.js'));
32 | 
33 |   /*
34 |   - if the component returns null - parent should be empty
35 |     - can pass String
36 |   - if the component returns text - parent should have a textNode
37 |     - can pass Patch
38 |   - if the component returns NativeElement - parent should have a native Element
39 |     - can pass NativeElement test
40 |   - if the component returns a component - that component decides what is rendered
41 |     - sub component can pass String
42 |     - sub Component can pass Patch
43 |     - sub Component can pass Falsy
44 |     - if passing children
45 |       - the other component gets direct references to the children
46 |       - the other component may not render the child
47 |       - the other component may create entirely new children
48 |       - the other component may add the children to their component
49 |     - when not passing children
50 |       - the other component may create children
51 |       - the other component may use a property as its children
52 |       - the other component may not have children
53 |   */
54 | 
55 |   at.test('falsy value',require('./component.js'));
56 |   at.end();
57 | });
58 | 


--------------------------------------------------------------------------------
/tests/patch/native-element.js:
--------------------------------------------------------------------------------
 1 | var childTestIterator = require('../util').childTestIterator;
 2 | 
 3 | /*
 4 | - when rendered - creates an Element
 5 | - when rendered with children - creates an element with children
 6 | - when rendered with grand children - creates an element with grandchildren
 7 | - when adding children - should have more children
 8 | - when removing children - should have less children
 9 |   - first removed - have 2 and 3
10 |   - second gone - have 1 and 3
11 |   - third gone - have 1 and 2
12 | */
13 | var nativeTester;
14 | module.exports = function(at){
15 |   at.comment('when created');
16 |   at.comment('when created child');
17 |   at.comment('when created grand children');
18 |   at.comment('when adding children');
19 |   at.comment('when removing children');
20 |   childTestIterator(at,nativeTester);
21 |   at.end();
22 | };
23 | 
24 | nativeTester = function(){};
25 | 


--------------------------------------------------------------------------------
/tests/patch/string.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | /*
 4 | - when rendered, creates a textNode
 5 | - When updated, updates textNode
 6 | */
 7 | 
 8 | module.exports = function(at){
 9 |   at.comment('when created');
10 |   at.comment('when updated');
11 |   at.end();
12 | };
13 | 


--------------------------------------------------------------------------------
/tests/util.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports.childTestIterator = function(){};
 3 | 
 4 | /*
 5 | ---- - All exsist
 6 | 0000 - Non exsist
 7 | 
 8 | 0---, -0--, etc - one doesn't exist
 9 | 
10 | 00--, -00-, etc - two don't exist
11 | 
12 | 0-0-, -0-0, etc - two seperated don't exist
13 | 
14 | -000, 0-00, etc - all but one exist
15 | 
16 | */
17 | 


--------------------------------------------------------------------------------