Merge pull request #11 from InDIOS/development

Bump to version 0.2.3

CHANGELOG.md

@@ -1,3 +1,7 @@
+0.2.3
+- Added ability to add or remove boolean attributes.
+- Fixed some bugs on context assignment with Sequence and Assignment expressions.
+
 0.2.2
 - Added Sequence expression to context generation.
 - Fixed missing attributes generating elements in slots.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "trebor",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"description": "A node js module to make standalone web components.",
 	"main": "./build/index.js",
 	"bin": {

spec/components/bind.umd.js

@@ -125,7 +125,7 @@ function _$CompCtr(attrs, template, options, parent) {
   for (var key in data) {
     _loop_1(key);
   }
-  var tpl = template(self, opts.children);
+  var tpl = template(self);
   _$e(tpl, function(value, key) {
     _$def(self, key, {
       value: function(key) {
@@ -456,8 +456,8 @@ function _$a(parent, child, sibling) {
 function _$ce(tagName) {
   return document.createElement(tagName || 'div');
 }
-function _$sa(el, attrOrBind) {
-  var attr = attrOrBind[0], value = attrOrBind[1];
+function _$sa(el, attrAndValue) {
+  var attr = attrAndValue[0], value = attrAndValue[1];
   el.setAttribute(attr, _$toStr(value));
   if (_$isValueAttr(attr) && !_$isStr(value))
     el[PROP_MAP._] = value;
@@ -474,6 +474,10 @@ function _$al(el, event, handler) {
 function _$rl(el, event, handler) {
   el.removeEventListener(event, handler, false);
 }
+function _$bba(el, attrAndValue) {
+  var _a = attrAndValue.concat([el.hasAttribute(attrAndValue[0])]), attr = _a[0], value = _a[1], hasAttr = _a[2];
+  value == null || value === false ? hasAttr && el.removeAttribute(attr) : _$sa(el, [attr, '']);
+}
 function _$bu(el, binding) {
   var attr = binding[0], value = binding[1];
   var _value = attr === 'checked' ? !!value : _$toStr(value);
@@ -548,35 +552,35 @@ function _$tplBind(_$state) {
       _$al(input_2, 'change', handlerChangeEvent_1 = function(event) {
         changeEvent_1(_$state, event, input_2);
       });
-      input_2.checked = !!bindCheckedInput_2(_$state)[1];
+      _$bba(input_2, bindCheckedInput_2(_$state));
       _$sa(input_2, ['id', 'checkbox_1']);
       _$sa(input_2, ['type', 'checkbox']);
       _$sa(input_2, ['value', 'Yes']);
       _$al(input_3, 'change', handlerChangeEvent_2 = function(event) {
         changeEvent_2(_$state, event, input_3);
       });
-      input_3.checked = !!bindCheckedInput_3(_$state)[1];
+      _$bba(input_3, bindCheckedInput_3(_$state));
       _$sa(input_3, ['id', 'checkbox_2']);
       _$sa(input_3, ['type', 'checkbox']);
       _$sa(input_3, ['value', 'No']);
       _$al(input_4, 'change', handlerChangeEvent_3 = function(event) {
         changeEvent_3(_$state, event, input_4);
       });
-      input_4.checked = !!bindCheckedInput_4(_$state)[1];
+      _$bba(input_4, bindCheckedInput_4(_$state));
       _$sa(input_4, ['id', 'radio_1']);
       _$sa(input_4, ['type', 'radio']);
       _$sa(input_4, ['value', 'radio 1']);
       _$al(input_5, 'change', handlerChangeEvent_4 = function(event) {
         changeEvent_4(_$state, event, input_5);
       });
-      input_5.checked = !!bindCheckedInput_5(_$state)[1];
+      _$bba(input_5, bindCheckedInput_5(_$state));
       _$sa(input_5, ['id', 'radio_2']);
       _$sa(input_5, ['type', 'radio']);
       _$sa(input_5, ['value', 'radio 2']);
       _$al(input_6, 'change', handlerChangeEvent_5 = function(event) {
         changeEvent_5(_$state, event, input_6);
       });
-      input_6.checked = !!bindCheckedInput_6(_$state)[1];
+      _$bba(input_6, bindCheckedInput_6(_$state));
       _$sa(input_6, ['id', 'radio_3']);
       _$sa(input_6, ['type', 'radio']);
       _$sa(input_6, ['value', 'radio 3']);
@@ -591,11 +595,11 @@ function _$tplBind(_$state) {
 
     $update: function(_$state) {
       _$bu(input_1, bindValueInput_1(_$state));
-      _$bu(input_2, bindCheckedInput_2(_$state));
-      _$bu(input_3, bindCheckedInput_3(_$state));
-      _$bu(input_4, bindCheckedInput_4(_$state));
-      _$bu(input_5, bindCheckedInput_5(_$state));
-      _$bu(input_6, bindCheckedInput_6(_$state));
+      _$bba(input_2, bindCheckedInput_2(_$state));
+      _$bba(input_3, bindCheckedInput_3(_$state));
+      _$bba(input_4, bindCheckedInput_4(_$state));
+      _$bba(input_5, bindCheckedInput_5(_$state));
+      _$bba(input_6, bindCheckedInput_6(_$state));
     },
 
     $unmount: function() {

spec/components/condition.umd.js

@@ -125,7 +125,7 @@ function _$CompCtr(attrs, template, options, parent) {
   for (var key in data) {
     _loop_1(key);
   }
-  var tpl = template(self, opts.children);
+  var tpl = template(self);
   _$e(tpl, function(value, key) {
     _$def(self, key, {
       value: function(key) {

spec/components/html.umd.js

@@ -125,7 +125,7 @@ function _$CompCtr(attrs, template, options, parent) {
   for (var key in data) {
     _loop_1(key);
   }
-  var tpl = template(self, opts.children);
+  var tpl = template(self);
   _$e(tpl, function(value, key) {
     _$def(self, key, {
       value: function(key) {
@@ -469,8 +469,8 @@ function _$ce(tagName) {
 function _$ct(content) {
   return document.createTextNode(content || '');
 }
-function _$sa(el, attrOrBind) {
-  var attr = attrOrBind[0], value = attrOrBind[1];
+function _$sa(el, attrAndValue) {
+  var attr = attrAndValue[0], value = attrAndValue[1];
   el.setAttribute(attr, _$toStr(value));
   if (_$isValueAttr(attr) && !_$isStr(value))
     el[PROP_MAP._] = value;

spec/components/init.umd.js

@@ -125,7 +125,7 @@ function _$CompCtr(attrs, template, options, parent) {
   for (var key in data) {
     _loop_1(key);
   }
-  var tpl = template(self, opts.children);
+  var tpl = template(self);
   _$e(tpl, function(value, key) {
     _$def(self, key, {
       value: function(key) {

spec/components/loop.umd.js

@@ -125,7 +125,7 @@ function _$CompCtr(attrs, template, options, parent) {
   for (var key in data) {
     _loop_1(key);
   }
-  var tpl = template(self, opts.children);
+  var tpl = template(self);
   _$e(tpl, function(value, key) {
     _$def(self, key, {
       value: function(key) {
@@ -454,8 +454,8 @@ function _$ce(tagName) {
 function _$ct(content) {
   return document.createTextNode(content || '');
 }
-function _$sa(el, attrOrBind) {
-  var attr = attrOrBind[0], value = attrOrBind[1];
+function _$sa(el, attrAndValue) {
+  var attr = attrAndValue[0], value = attrAndValue[1];
   el.setAttribute(attr, _$toStr(value));
   if (_$isValueAttr(attr) && !_$isStr(value))
     el[PROP_MAP._] = value;

src/generators/bindings.ts

@@ -2,31 +2,44 @@ import { ctx } from '../utilities/context';
 import { BlockAreas } from '../utilities/classes';
 import { capitalize, filterParser } from '../utilities/tools';
 
+const isBooleanAttr = toMap(`allowfullscreen,async,autofocus,autoplay,checked,compact,controls,
+declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,
+hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,
+nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,
+truespeed,typemustmatch,visible`);
+
 export function genBind(variable: string, attr: string, expression: string, areas: BlockAreas, scope: string, type: string, classes: string) {
-	[scope] = scope.split(', ');
-	const globals = [variable, '_$ga'];
-	const bindFuncName = `bind${capitalize(attr)}${capitalize(variable)}`;
-	const isSelMulti = /select/.test(variable) && type === 'multiple';
-	let params = areas.globals.length > 0 ? `, ${areas.globals.join(', ')}` : '';
-	let bindExp = expression === null ? 'true' : `${ctx(filterParser(expression), scope, areas.globals.concat(globals))}`;
-	if (attr === 'class' || attr === 'style') {
-		bindExp = attr === 'style' ?
-			`_$bs(${bindExp})` : `(${classes ? `'${classes} ' + ` : ''}_$bc(${bindExp})).trim()`;
-	}
-	areas.variables.push(bindFuncName);
+  [scope] = scope.split(', ');
+  const globals = [variable, '_$ga'];
+  const bindFuncName = `bind${capitalize(attr)}${capitalize(variable)}`;
+  const isSelMulti = /select/.test(variable) && type === 'multiple';
+  let params = areas.globals.length > 0 ? `, ${areas.globals.join(', ')}` : '';
+  let bindExp = expression === null ? 'true' : `${ctx(filterParser(expression), scope, areas.globals.concat(globals))}`;
+  if (attr === 'class' || attr === 'style') {
+    bindExp = attr === 'style' ?
+      `_$bs(${bindExp})` : `(${classes ? `'${classes} ' + ` : ''}_$bc(${bindExp})).trim()`;
+  }
+  areas.variables.push(bindFuncName);
   areas.extras.push(`${bindFuncName} = (${scope}${params}) => (['${attr}', ${bindExp}]);`);
   let bindFunc = `${bindFuncName}(${scope}${params})`;
-	if (attr === 'value' && /input|select|textarea/.test(variable) && !/checkbox|radio/.test(type)) {
-		if (isSelMulti) {
-			areas.update.push(`_$bindMultiSelect(${variable}, ${bindFunc}[1]);`);
-			areas.unmount.push(`_$bindMultiSelect(${variable}, ${bindFunc}[1]);`);
-		} else {
-			areas.hydrate.push(`${variable}.value = _$toStr(${bindFunc}[1]);`);
-		}
-	} else if (attr === 'checked' && /input/.test(variable) && /checkbox|radio/.test(type)) {
-    areas.hydrate.push(`${variable}.checked = !!${bindFunc}[1];`);
-	} else {
-		areas.hydrate.push(`_$sa(${variable}, ${bindFunc});`);
-	}
-	!isSelMulti && areas.update.push(`_$bu(${variable}, ${bindFunc});`);
-}
+  if (attr === 'value' && /input|select|textarea/.test(variable) && !/checkbox|radio/.test(type)) {
+    if (isSelMulti) {
+      areas.update.push(`_$bindMultiSelect(${variable}, ${bindFunc}[1]);`);
+      areas.unmount.push(`_$bindMultiSelect(${variable}, ${bindFunc}[1]);`);
+    } else {
+      areas.hydrate.push(`${variable}.value = _$toStr(${bindFunc}[1]);`);
+    }
+  } else if (isBooleanAttr(attr)) {
+    areas.update.push(`_$bba(${variable}, ${bindFunc});`);
+    areas.hydrate.push(`_$bba(${variable}, ${bindFunc});`);
+  } else {
+    areas.hydrate.push(`_$sa(${variable}, ${bindFunc});`);
+  }
+  !isSelMulti && !isBooleanAttr(attr) && areas.update.push(`_$bu(${variable}, ${bindFunc});`);
+}
+
+function toMap(str: string) {
+  const map: Record<string, boolean> = str
+    .split(',').reduce((map, val) => (map[val.trim()] = 1, map), {});
+  return (val: string) => !!map[val];
+}

src/index.ts

@@ -11,7 +11,7 @@ import { kebabToCamelCases, capitalize, camelToKebabCase } from './utilities/too
 
 const dest = `{ _$CompCtr, _$, _$d, _$a, _$add, _$remove, _$as, _$r, _$ce, _$cse, _$ct, _$bu, _$tu, _$nu,
  _$cm, _$sa, _$ga, _$al, _$ul, _$rl, _$bc, _$bs, _$f, _$e, _$is, _$ds, _$toStr, _$bindMultiSelect, _$gv,
- _$setRef, _$noop, _$isType, _$isKey, _$bindGroup, _$cu, _$emptyElse, _$extends, _$updateMultiSelect }`;
+ _$setRef, _$noop, _$isType, _$isKey, _$bindGroup, _$cu, _$bba, _$emptyElse, _$extends, _$updateMultiSelect }`;
 const esDeps = `import ${dest} from 'trebor/tools';`;
 const cjsDeps = `const ${dest} = require('trebor/tools');`;
 const tools = readFileSync(join(__dirname, '../tools/index.js'), 'utf8');

src/types/recast.d.ts

@@ -26,10 +26,13 @@ interface BlockStatementType extends NamedType {
 interface UnaryExpressionType extends NamedType {
   name: 'UnaryExpression'
 }
+interface MemberExpressionType extends NamedType {
+  name: 'MemberExpression'
+}
 interface UpdateExpressionType extends NamedType {
   name: 'UpdateExpression'
 }
-interface AssignmentExpressionType extends NamedType { 
+interface AssignmentExpressionType extends NamedType {
   name: 'AssignmentExpression'
 }
 
@@ -40,6 +43,7 @@ interface NamedTypes {
   IfStatement: IfStatementType;
   BlockStatement: BlockStatementType;
   UnaryExpression: UnaryExpressionType;
+  MemberExpression: MemberExpressionType;
   UpdateExpression: UpdateExpressionType;
   AssignmentExpression: AssignmentExpressionType;
 }