funclate - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/funclate.js

@@ -19,5 +19,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId])
+/******/ 		if(installedModules[moduleId]) {
 /******/ 			return installedModules[moduleId].exports;
-/******/
+/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
@@ -47,5 +47,2 @@ /******/ 		var module = installedModules[moduleId] = {
 /******/
-/******/ 	// identity function for calling harmony imports with the correct context
-/******/ 	__webpack_require__.i = function(value) { return value; };
-/******/
 /******/ 	// define getter function for harmony exports
@@ -78,3 +75,3 @@ /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
@@ -92,134 +89,2 @@ /************************************************************************/
 });
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-exports.toArray = toArray;
-exports.sanitize = sanitize;
-exports.fromArrayToObject = fromArrayToObject;
-exports.findNodeFromKey = findNodeFromKey;
-exports.updateAttributes = updateAttributes;
-exports.updateProperties = updateProperties;
-/**
- * Convert a value to an array.
- * @param {*} value the value to convert
- * @returns {Array} the array
- * @private
- */
-function toArray(value) {
-    return value ? Array.prototype.slice.call(value) : [];
-}
-
-/**
- * Convert undefined and null value to empty string.
- * @param {string} value the value to sanitize
- * @returns {string} the sanitized value
- * @private
- */
-function sanitize(value) {
-    return value === undefined || value === null ? '' : value;
-}
-
-/**
- * Transform an array to an object.
- * The first value is the key, the second its value and so one.
- * @param {Array} array the array
- * @returns {object} the object
- * @private
- */
-function fromArrayToObject(array) {
-    var object = {};
-    if (!array) {
-        return object;
-    }
-    var max = array.length;
-    for (var i = 0; i < max; i = i + 2) {
-        object[array[i]] = array[i + 1];
-    }
-    return object;
-}
-
-/**
- * According to the given parent, try to find a node matching with the given key.
- * @param {!Element} parent the parent element
- * @param {!number} from the index of the starting node
- * @param {!string} key the key to find
- * @returns {Node}
- * @private
- */
-function findNodeFromKey(parent, from, key) {
-    var end = parent.childNodes.length;
-    for (var i = from; i < end; i++) {
-        var child = parent.childNodes.item(i);
-        if (child.dataset && child.dataset.fcKey === key) {
-            return child;
-        }
-    }
-}
-
-/**
- * Update the given element's attributes according to the new one.
- * @param {!Element} element the element
- * @param {Array.<undefined|null|string|number|boolean>} [attributes] the new attributes
- * @private
- */
-function updateAttributes(element, attributes) {
-    attributes = attributes ? attributes : [];
-    var updatedAttributes = {};
-    var max = attributes.length;
-    for (var i = 0; i < max; i = i + 2) {
-        var name = attributes[i];
-        var value = attributes[i + 1];
-        var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
-        if (type === 'boolean') {
-            if (value) {
-                element.setAttribute(name, '');
-                updatedAttributes[name] = true;
-            }
-        } else if (type === 'number') {
-            element.setAttribute(name, value);
-            updatedAttributes[name] = true;
-        } else if (value) {
-            element.setAttribute(name, sanitize(value));
-            updatedAttributes[name] = true;
-        }
-    }
-    toArray(element.attributes).filter(function (attr) {
-        return !updatedAttributes[attr.name];
-    }).forEach(function (attr) {
-        return element.removeAttribute(attr.name);
-    });
-}
-/**
- * Update the given element's properties according to the new one.
- * @param {!Element} element the element
- * @param {Array} [properties] the new attributes
- * @private
- */
-function updateProperties(element, properties) {
-    properties = properties ? properties : [];
-    var updatedProperties = {};
-    var max = properties.length;
-    for (var i = 0; i < max; i = i + 2) {
-        var name = properties[i];
-        element[name] = properties[i + 1];
-        updatedProperties[name] = true;
-    }
-    toArray(element.updatedProperties).filter(function (name) {
-        return !updatedProperties[name];
-    }).forEach(function (name) {
-        return element[name] = undefined;
-    });
-    element.updatedProperties = Object.keys(updatedProperties);
-}
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
 exports.createThenUpdate = createThenUpdate;
@@ -234,3 +99,3 @@ exports.updateElement = updateElement;
 
-var _utils = __webpack_require__(0);
+var _utils = __webpack_require__(1);
 
@@ -420,9 +285,12 @@ /**
  * Update the sub tree of the given root according to a given factory of the render function.
+ * @param {!function(fc: object)} factory the render function
  * @param {!HTMLElement} root the root element
- * @param {!function(fc: object)} factory the render function
  * @return {function(el: HTMLElement)}  the render function
+ * @param {object} context an optional context
  */
-function createThenUpdate(root, factory) {
+function createThenUpdate(factory, root) {
+    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
     var render = factory(METHODS);
-    updateElement(root, factory(METHODS));
+    updateElement(factory(METHODS), root, context);
     return render;
@@ -433,6 +301,9 @@ }
  * Update the sub tree of the given root according to the given render function.
+ * @param {!function(el: HTMLElement)} render the render function
  * @param {!HTMLElement} root the root element
- * @param {!function(el: HTMLElement)} render the render function
+ * @param {object} context an optional context
  */
-function updateElement(root, render) {
+function updateElement(render, root) {
+    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
     var ctx = getCtx();
@@ -452,3 +323,3 @@
 
-    render(root);
+    render(root, context);
 
@@ -564,4 +435,136 @@ cleanRemainingNodes();
 
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.toArray = toArray;
+exports.sanitize = sanitize;
+exports.fromArrayToObject = fromArrayToObject;
+exports.findNodeFromKey = findNodeFromKey;
+exports.updateAttributes = updateAttributes;
+exports.updateProperties = updateProperties;
+/**
+ * Convert a value to an array.
+ * @param {*} value the value to convert
+ * @returns {Array} the array
+ * @private
+ */
+function toArray(value) {
+    return value ? Array.prototype.slice.call(value) : [];
+}
+
+/**
+ * Convert undefined and null value to empty string.
+ * @param {string} value the value to sanitize
+ * @returns {string} the sanitized value
+ * @private
+ */
+function sanitize(value) {
+    return value === undefined || value === null ? '' : value;
+}
+
+/**
+ * Transform an array to an object.
+ * The first value is the key, the second its value and so one.
+ * @param {Array} array the array
+ * @returns {object} the object
+ * @private
+ */
+function fromArrayToObject(array) {
+    var object = {};
+    if (!array) {
+        return object;
+    }
+    var max = array.length;
+    for (var i = 0; i < max; i = i + 2) {
+        object[array[i]] = array[i + 1];
+    }
+    return object;
+}
+
+/**
+ * According to the given parent, try to find a node matching with the given key.
+ * @param {!Element} parent the parent element
+ * @param {!number} from the index of the starting node
+ * @param {!string} key the key to find
+ * @returns {Node}
+ * @private
+ */
+function findNodeFromKey(parent, from, key) {
+    var end = parent.childNodes.length;
+    for (var i = from; i < end; i++) {
+        var child = parent.childNodes.item(i);
+        if (child.dataset && child.dataset.fcKey === key) {
+            return child;
+        }
+    }
+}
+
+/**
+ * Update the given element's attributes according to the new one.
+ * @param {!Element} element the element
+ * @param {Array.<undefined|null|string|number|boolean>} [attributes] the new attributes
+ * @private
+ */
+function updateAttributes(element, attributes) {
+    attributes = attributes ? attributes : [];
+    var updatedAttributes = {};
+    var max = attributes.length;
+    for (var i = 0; i < max; i = i + 2) {
+        var name = attributes[i];
+        var value = attributes[i + 1];
+        var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
+        if (type === 'boolean') {
+            if (value) {
+                element.setAttribute(name, '');
+                updatedAttributes[name] = true;
+            }
+        } else if (type === 'number') {
+            element.setAttribute(name, value);
+            updatedAttributes[name] = true;
+        } else if (value) {
+            element.setAttribute(name, sanitize(value));
+            updatedAttributes[name] = true;
+        }
+    }
+    toArray(element.attributes).filter(function (attr) {
+        return !updatedAttributes[attr.name];
+    }).forEach(function (attr) {
+        return element.removeAttribute(attr.name);
+    });
+}
+/**
+ * Update the given element's properties according to the new one.
+ * @param {!Element} element the element
+ * @param {Array} [properties] the new attributes
+ * @private
+ */
+function updateProperties(element, properties) {
+    properties = properties ? properties : [];
+    var updatedProperties = {};
+    var max = properties.length;
+    for (var i = 0; i < max; i = i + 2) {
+        var name = properties[i];
+        element[name] = properties[i + 1];
+        updatedProperties[name] = true;
+    }
+    toArray(element.updatedProperties).filter(function (name) {
+        return !updatedProperties[name];
+    }).forEach(function (name) {
+        return element[name] = undefined;
+    });
+    element.updatedProperties = Object.keys(updatedProperties);
+}
+
 /***/ })
 /******/ ]);
 });

dist/funclate.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.funclate=t():e.funclate=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){"use strict";function r(e){return e?Array.prototype.slice.call(e):[]}function o(e){return void 0===e||null===e?"":e}function u(e){var t={};if(!e)return t;for(var n=e.length,r=0;r<n;r+=2)t[e[r]]=e[r+1];return t}function i(e,t,n){for(var r=e.childNodes.length,o=t;o<r;o++){var u=e.childNodes.item(o);if(u.dataset&&u.dataset.fcKey===n)return u}}function c(e,t){t=t?t:[];for(var n={},u=t.length,i=0;i<u;i+=2){var c=t[i],f=t[i+1],l=void 0===f?"undefined":d(f);"boolean"===l?f&&(e.setAttribute(c,""),n[c]=!0):"number"===l?(e.setAttribute(c,f),n[c]=!0):f&&(e.setAttribute(c,o(f)),n[c]=!0)}r(e.attributes).filter(function(e){return!n[e.name]}).forEach(function(t){return e.removeAttribute(t.name)})}function f(e,t){t=t?t:[];for(var n={},o=t.length,u=0;u<o;u+=2){var i=t[u];e[i]=t[u+1],n[i]=!0}r(e.updatedProperties).filter(function(e){return!n[e]}).forEach(function(t){return e[t]=void 0}),e.updatedProperties=Object.keys(n)}Object.defineProperty(t,"__esModule",{value:!0});var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.toArray=r,t.sanitize=o,t.fromArrayToObject=u,t.findNodeFromKey=i,t.updateAttributes=c,t.updateProperties=f},function(e,t,n){"use strict";function r(){return{root:N,parent:j,document:O}}function o(e){N=e.root,j=e.parent,O=e.document}function u(){if(N.__content__!==j)for(;j.childNodes.length>c();)j.removeChild(j.lastChild)}function i(){j.fcIndex||(j.fcIndex=0);var e=j.fcIndex;return j.fcIndex=j.fcIndex+1,e}function c(){return j.fcIndex||0}function f(){delete j.fcIndex}function d(e,t,n){var r=i(),o=j.childNodes.item(r);return o?o.nodeType!==t?j.insertBefore(n(e),o):o.nodeValue=e:j.appendChild(n(e)),o}function l(e,t){var n=t?t.indexOf("is"):-1;return n>-1?O.createElement(e,t[n+1]):O.createElement(e)}function a(e,t,n,r){var o=i(),u=j.childNodes.item(o),f=r.found?r.found:null;return!f&&r.key&&(f=(0,C.findNodeFromKey)(j,c(),r.key)),f?u!==f&&(u=j.insertBefore(f,u)):u?e.toLowerCase()!==(u.tagName||"").toLowerCase()&&(u=j.insertBefore(l(e,t),u)):u=j.appendChild(l(e,t)),(0,C.updateAttributes)(u,t),(0,C.updateProperties)(u,n),r.key&&(u.dataset.fcKey=r.key),r.content&&(N.__content__=u),r.skipChildren||(j=u),u}function s(e,t){var n=t(A);return p(e,t(A)),n}function p(e,t){var n=r();N=e,O=e.ownerDocument,j=e;var i=null;if(!e.__visited__)for(i=O.createDocumentFragment();e.childNodes.length>0;)i.appendChild(e.removeChild(e.firstChild));t(e),u(),f(),e.__visited__=!0,i&&e.__content__&&e.__content__.appendChild(i),o(n)}function m(e,t,n,r){return a(e,t,n,(0,C.fromArrayToObject)(r))}function _(){u(),f(),j=j.parentElement}function y(e,t,n,r){return a(e,t,n,(0,C.fromArrayToObject)(["skipChildren",!0].concat(r)))}function v(){N.__content__=a("fc-content",null,null,{skipChildren:!0,found:N.__content__})}function b(e){return O.createTextNode((0,C.sanitize)(e))}function h(e){return O.createComment((0,C.sanitize)(e))}function x(e){return d(e,N.TEXT_NODE,b)}function E(e){return d(e,N.COMMENT_NODE,h)}Object.defineProperty(t,"__esModule",{value:!0}),t.createThenUpdate=s,t.updateElement=p,t.openElement=m,t.closeElement=_,t.voidElement=y,t.content=v,t.text=x,t.comment=E;var C=n(0),N=null,O=null,j=null,A={closeElement:_,openElement:m,comment:E,content:v,text:x,voidElement:y}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.funclate=t():e.funclate=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(){return{root:N,parent:g,document:O}}function o(e){N=e.root,g=e.parent,O=e.document}function i(){if(N.__content__!==g)for(;g.childNodes.length>c();)g.removeChild(g.lastChild)}function u(){g.fcIndex||(g.fcIndex=0);var e=g.fcIndex;return g.fcIndex=g.fcIndex+1,e}function c(){return g.fcIndex||0}function f(){delete g.fcIndex}function d(e,t,n){var r=u(),o=g.childNodes.item(r);return o?o.nodeType!==t?g.insertBefore(n(e),o):o.nodeValue=e:g.appendChild(n(e)),o}function l(e,t){var n=t?t.indexOf("is"):-1;return n>-1?O.createElement(e,t[n+1]):O.createElement(e)}function a(e,t,n,r){var o=u(),i=g.childNodes.item(o),f=r.found?r.found:null;return!f&&r.key&&(f=(0,C.findNodeFromKey)(g,c(),r.key)),f?i!==f&&(i=g.insertBefore(f,i)):i?e.toLowerCase()!==(i.tagName||"").toLowerCase()&&(i=g.insertBefore(l(e,t),i)):i=g.appendChild(l(e,t)),(0,C.updateAttributes)(i,t),(0,C.updateProperties)(i,n),r.key&&(i.dataset.fcKey=r.key),r.content&&(N.__content__=i),r.skipChildren||(g=i),i}function s(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=e(j);return p(e(j),t,n),r}function p(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},u=r();N=t,O=t.ownerDocument,g=t;var c=null;if(!t.__visited__)for(c=O.createDocumentFragment();t.childNodes.length>0;)c.appendChild(t.removeChild(t.firstChild));e(t,n),i(),f(),t.__visited__=!0,c&&t.__content__&&t.__content__.appendChild(c),o(u)}function m(e,t,n,r){return a(e,t,n,(0,C.fromArrayToObject)(r))}function _(){i(),f(),g=g.parentElement}function y(e,t,n,r){return a(e,t,n,(0,C.fromArrayToObject)(["skipChildren",!0].concat(r)))}function v(){N.__content__=a("fc-content",null,null,{skipChildren:!0,found:N.__content__})}function h(e){return O.createTextNode((0,C.sanitize)(e))}function b(e){return O.createComment((0,C.sanitize)(e))}function x(e){return d(e,N.TEXT_NODE,h)}function E(e){return d(e,N.COMMENT_NODE,b)}Object.defineProperty(t,"__esModule",{value:!0}),t.createThenUpdate=s,t.updateElement=p,t.openElement=m,t.closeElement=_,t.voidElement=y,t.content=v,t.text=x,t.comment=E;var C=n(1),N=null,O=null,g=null,j={closeElement:_,openElement:m,comment:E,content:v,text:x,voidElement:y}},function(e,t,n){"use strict";function r(e){return e?Array.prototype.slice.call(e):[]}function o(e){return void 0===e||null===e?"":e}function i(e){var t={};if(!e)return t;for(var n=e.length,r=0;r<n;r+=2)t[e[r]]=e[r+1];return t}function u(e,t,n){for(var r=e.childNodes.length,o=t;o<r;o++){var i=e.childNodes.item(o);if(i.dataset&&i.dataset.fcKey===n)return i}}function c(e,t){t=t||[];for(var n={},i=t.length,u=0;u<i;u+=2){var c=t[u],f=t[u+1],l=void 0===f?"undefined":d(f);"boolean"===l?f&&(e.setAttribute(c,""),n[c]=!0):"number"===l?(e.setAttribute(c,f),n[c]=!0):f&&(e.setAttribute(c,o(f)),n[c]=!0)}r(e.attributes).filter(function(e){return!n[e.name]}).forEach(function(t){return e.removeAttribute(t.name)})}function f(e,t){t=t||[];for(var n={},o=t.length,i=0;i<o;i+=2){var u=t[i];e[u]=t[i+1],n[u]=!0}r(e.updatedProperties).filter(function(e){return!n[e]}).forEach(function(t){return e[t]=void 0}),e.updatedProperties=Object.keys(n)}Object.defineProperty(t,"__esModule",{value:!0});var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.toArray=r,t.sanitize=o,t.fromArrayToObject=i,t.findNodeFromKey=u,t.updateAttributes=c,t.updateProperties=f}])});

esdoc.json

 {
   "source": "./src",
   "destination": "./esdoc",
-  "title": "funclate",
-  "index": "./doc/README.md",
-  "test": {
-    "type": "mocha",
-    "source": "./test"
-  },
-  "manual": {
-    "globalIndex": true,
-    "index": "./manual/README.md",
-    "installation": [
-      "./manual/installation.md"
-    ],
-    "overview": [
-      "./manual/overview.md"
-    ],
-    "usage": [
-      "./manual/usage_templating.md",
-      "./manual/usage_runtime.md"
-    ],
-    "advanced": [
-      "./manual/advanced.md"
-    ],
-    "changelog": [
-      "./CHANGELOG.md"
-    ]
-  },
   "plugins": [
     {
+      "name": "esdoc-standard-plugin",
+      "option": {
+        "title": "funclate",
+        "index": "./doc/README.md",
+        "test": {
+          "type": "mocha",
+          "source": "./test"
+        },
+        "manual": {
+          "index": "./manual/README.md",
+          "globalIndex": true,
+          "files": [
+            "./manual/installation.md",
+            "./manual/usage_templating.md",
+            "./manual/usage_runtime.md",
+            "./manual/overview.md",
+            "./manual/advanced.md",
+            "./CHANGELOG.md"
+          ]
+        }
+      }
+    },
+    {
       "name": "esdoc-importpath-plugin",
@@ -33,0 +30,0 @@ "option": {

lib/parser/Factory.js

@@ -18,2 +18,6 @@ 'use strict';
 var Factory = exports.Factory = function () {
+
+    /**
+     * @param {ParserOptions} [options] the options
+     */
     function Factory(options) {
@@ -23,3 +27,3 @@ _classCallCheck(this, Factory);
         this.options = options;
-        this.render = _Statements.Statements.get(this.options).append('var ' + (options.elVarName || 'el') + ' = __el__;');
+        this.render = _Statements.Statements.get(this.options).append('var ' + (options.elVarName || 'el') + ' = __el__;').append('var ' + (options.ctxVarName || 'ctx') + ' = __ctx__;');
         this.wrapper = _Statements.Statements.get(this.options).append('var fcOpenElement = funclate.openElement;').append('var fcCloseElement = funclate.closeElement;').append('var fcVoidElement = funclate.voidElement;').append('var fcContent = funclate.content;').append('var fcText = funclate.text;').append('var fcComment = funclate.comment;');
@@ -73,3 +77,3 @@ }
         value: function toFunction() {
-            var wrapper = this.wrapper.append('return function (__el__) {').append(this.render.join()).append('}').join();
+            var wrapper = this.wrapper.append('return function (__el__, __ctx__) {').append(this.render.join()).append('}').join();
             if (this.options.output === 'string') {
@@ -76,0 +80,0 @@ return 'function (funclate) {' + wrapper + '}';

lib/parser/FcContentTag.js

@@ -21,3 +21,3 @@ 'use strict';
  * @example
- * <fc-content></fc-each>
+ * <fc-content></fc-content>
  */
@@ -24,0 +24,0 @@ var FcContentTag = exports.FcContentTag = function (_FcTag) {

lib/parser/index.js

@@ -12,2 +12,4 @@ 'use strict';
 
+var _FcCallTag = require('./FcCallTag');
+
 var _FcContentTag = require('./FcContentTag');
@@ -40,2 +42,3 @@
  */
+
 var tags = {
@@ -46,3 +49,4 @@ 'fc-each': new _FcEachTag.FcEachTag(),
     'fc-else-if': new _FcElseIfTag.FcElseIfTag(),
-    'fc-content': new _FcContentTag.FcContentTag()
+    'fc-content': new _FcContentTag.FcContentTag(),
+    'fc-call': new _FcCallTag.FcCallTag()
 };
@@ -57,5 +61,11 @@
  * @property {string} propNamePrefix the prefix value of attribute name to identified properties
+ * @property {string} elVarName the variable name for the element
+ * @property {string} ctxVarName the variable name for the context
  * @property {Array<string>} selfClosingElements The list of self closing elements. (http://www.w3.org/TR/html5/syntax.html#void-elements)
  * @property {BUILT_IN_TAGS} tags The built in and custom tags.
  */
+
+/**
+ * @type ParserOptions
+ */
 var DEFAULT_OPTIONS = {
@@ -66,2 +76,4 @@ output: 'function',
     propNamePrefix: '#',
+    elVarName: 'el',
+    ctxVarName: 'ctx',
     selfClosingElements: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'],
@@ -109,3 +121,3 @@ tags: tags
         },
-        onclosetag: function onclosetag(name, toto) {
+        onclosetag: function onclosetag(name) {
             if (options.tags[name]) {
@@ -112,0 +124,0 @@ options.tags[name].endTag(factory, name);

lib/runtime/index.js

@@ -200,9 +200,12 @@ 'use strict';
  * Update the sub tree of the given root according to a given factory of the render function.
+ * @param {!function(fc: object)} factory the render function
  * @param {!HTMLElement} root the root element
- * @param {!function(fc: object)} factory the render function
  * @return {function(el: HTMLElement)}  the render function
+ * @param {object} context an optional context
  */
-function createThenUpdate(root, factory) {
+function createThenUpdate(factory, root) {
+    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
     var render = factory(METHODS);
-    updateElement(root, factory(METHODS));
+    updateElement(factory(METHODS), root, context);
     return render;
@@ -213,6 +216,9 @@ }
  * Update the sub tree of the given root according to the given render function.
+ * @param {!function(el: HTMLElement)} render the render function
  * @param {!HTMLElement} root the root element
- * @param {!function(el: HTMLElement)} render the render function
+ * @param {object} context an optional context
  */
-function updateElement(root, render) {
+function updateElement(render, root) {
+    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
     var ctx = getCtx();
@@ -232,3 +238,3 @@
 
-    render(root);
+    render(root, context);
 
@@ -235,0 +241,0 @@ cleanRemainingNodes();

manual/advanced.md

@@ -9,7 +9,7 @@ # Advanced
 
-`fcOpenVoidElement()` has to be used for element like 'input', 'br', 'hr' and so one.
+`openVoidElement()` has to be used for element like 'input', 'br', 'hr' and so one.
 
 `text()` has to be used to insert texts.
 
-`fcComment()` has to be used to insert HTML comments.
+`comment()` has to be used to insert HTML comments.
 
@@ -16,0 +16,0 @@ ## Shadow DOM and light DOM

manual/usage_templating.md

@@ -41,2 +41,10 @@ # Templating
 
+## call another render function
+
+```html
+<ul>
+    <fc-call name="anotherRenderFunction" />
+</ul>
+```
+
 ## element's key
@@ -43,0 +51,0 @@

package.json

 {
   "name": "funclate",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "A 'build time' HTML parser + a 'runtime' template engine to patch the DOM incrementally.",
@@ -62,10 +62,11 @@ "keywords": [
     "babel-core": "^6.24.0",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.2.2",
     "browserify-transform-tools": "^1.7.0",
-    "chai": "^3.5.0",
-    "coveralls": "^2.12.0",
-    "esdoc": "^0.5.2",
-    "esdoc-importpath-plugin": "^0.1.1",
-    "istanbul-instrumenter-loader": "^2.0.0",
+    "chai": "^4.1.2",
+    "coveralls": "^3.0.0",
+    "esdoc": "^1.0.3",
+    "esdoc-importpath-plugin": "^1.0.1",
+    "esdoc-standard-plugin": "^1.0.0",
+    "istanbul-instrumenter-loader": "^3.0.0",
     "jshint": "^2.9.4",
@@ -84,8 +85,8 @@ "jshint-stylish": "^2.2.1",
     "karma-webpack": "^2.0.3",
-    "mocha": "^3.2.0",
+    "mocha": "^4.0.1",
     "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.1",
-    "sinon": "^2.1.0",
+    "sinon": "^4.0.1",
     "sinon-chai": "^2.9.0",
-    "webpack": "^2.2.1"
+    "webpack": "^3.7.1"
   },
@@ -92,0 +93,0 @@ "babel": {

src/parser/Factory.js

@@ -8,6 +8,10 @@ import {Statements} from './Statements';
 
+    /**
+     * @param {ParserOptions} [options] the options
+     */
     constructor(options) {
         this.options = options;
         this.render = Statements.get(this.options)
-            .append(`var ${options.elVarName || 'el'} = __el__;`);
+            .append(`var ${options.elVarName || 'el'} = __el__;`)
+            .append(`var ${options.ctxVarName || 'ctx'} = __ctx__;`);
         this.wrapper = Statements.get(this.options)
@@ -59,3 +63,3 @@ .append('var fcOpenElement = funclate.openElement;')
         const wrapper = this.wrapper
-            .append('return function (__el__) {')
+            .append('return function (__el__, __ctx__) {')
             .append(this.render.join()).append('}')
@@ -62,0 +66,0 @@ .join();

src/parser/FcContentTag.js

@@ -6,3 +6,3 @@ import {FcTag} from './FcTag';
  * @example
- * <fc-content></fc-each>
+ * <fc-content></fc-content>
  */
@@ -9,0 +9,0 @@ export class FcContentTag extends FcTag {

src/parser/index.js

 import htmlparser2 from 'htmlparser2';
+import {FcCallTag} from './FcCallTag';
 import {FcContentTag} from './FcContentTag';
@@ -20,2 +21,3 @@ import {FcEachTag} from './FcEachTag';
  */
+
 const tags = {
@@ -26,3 +28,4 @@ 'fc-each': new FcEachTag(),
     'fc-else-if': new FcElseIfTag(),
-    'fc-content': new FcContentTag()
+    'fc-content': new FcContentTag(),
+    'fc-call': new FcCallTag()
 };
@@ -37,5 +40,11 @@
  * @property {string} propNamePrefix the prefix value of attribute name to identified properties
+ * @property {string} elVarName the variable name for the element
+ * @property {string} ctxVarName the variable name for the context
  * @property {Array<string>} selfClosingElements The list of self closing elements. (http://www.w3.org/TR/html5/syntax.html#void-elements)
  * @property {BUILT_IN_TAGS} tags The built in and custom tags.
  */
+
+/**
+ * @type ParserOptions
+ */
 const DEFAULT_OPTIONS = {
@@ -46,2 +55,4 @@ output: 'function',
     propNamePrefix: '#',
+    elVarName: 'el',
+    ctxVarName: 'ctx',
     selfClosingElements: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'],
@@ -89,3 +100,3 @@ tags: tags
         },
-        onclosetag(name, toto) {
+        onclosetag(name) {
             if (options.tags[name]) {
@@ -97,6 +108,6 @@ options.tags[name].endTag(factory, name);
         },
-        ontext(text){
+        ontext(text) {
             factory.appendText(interpolate(text, options));
         },
-        oncomment(text){
+        oncomment(text) {
             factory.appendComment(interpolate(text, options));
@@ -103,0 +114,0 @@ }

src/runtime/index.js

@@ -191,9 +191,10 @@ import {findNodeFromKey, fromArrayToObject, sanitize, updateAttributes, updateProperties} from './utils';
  * Update the sub tree of the given root according to a given factory of the render function.
+ * @param {!function(fc: object)} factory the render function
  * @param {!HTMLElement} root the root element
- * @param {!function(fc: object)} factory the render function
  * @return {function(el: HTMLElement)}  the render function
+ * @param {object} context an optional context
  */
-export function createThenUpdate(root, factory) {
+export function createThenUpdate(factory, root, context = {}) {
     const render = factory(METHODS);
-    updateElement(root, factory(METHODS));
+    updateElement(factory(METHODS), root, context);
     return render;
@@ -204,6 +205,7 @@ }
  * Update the sub tree of the given root according to the given render function.
+ * @param {!function(el: HTMLElement)} render the render function
  * @param {!HTMLElement} root the root element
- * @param {!function(el: HTMLElement)} render the render function
+ * @param {object} context an optional context
  */
-export function updateElement(root, render) {
+export function updateElement(render, root, context = {}) {
     const ctx = getCtx();
@@ -223,3 +225,3 @@
 
-    render(root);
+    render(root, context);
 
@@ -226,0 +228,0 @@ cleanRemainingNodes();

No alert changes

Improved metrics

Total package byte prevSize

558646

increased by2.87%

Number of package files

53

increased by1.92%

Worsened metrics

Dev dependency count

30

increased by3.45%

Lines of code

10703

decreased by-13.53%

No dependency changes