njsx - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

njsx.js

@@ -1,16 +0,20 @@
-Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[typeof Symbol==='function'?Symbol.iterator:'@@iterator'](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"])_i["return"]();}finally{if(_d)throw _e;}}return _arr;}return function(arr,i){if(Array.isArray(arr)){return arr;}else if((typeof Symbol==='function'?Symbol.iterator:'@@iterator')in Object(arr)){return sliceIterator(arr,i);}else{throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();exports.default=
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=
 
 
 
-njsx;var _react=require('react');function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}var isArray=Array.isArray;function njsx(type){var props=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var children=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];
-var component=function component(){for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}var _args$reduce$reduce=
-args.
-reduce(function(acum,arg){return[].concat(_toConsumableArray(acum),_toConsumableArray(isArray(arg)?arg:[arg]));},[]).
-reduce(function(_ref,arg){var _ref2=_slicedToArray(_ref,2),oldProps=_ref2[0],oldChildren=_ref2[1];var _njsx$rules$find=
-njsx.rules.find(function(_ref3){var _ref4=_slicedToArray(_ref3,1),appliesTo=_ref4[0];return appliesTo(arg);}),_njsx$rules$find2=_slicedToArray(_njsx$rules$find,2),materialize=_njsx$rules$find2[1];var _materialize=
-materialize(arg),_materialize2=_slicedToArray(_materialize,2),newProps=_materialize2[0],newChildren=_materialize2[1];
 
-return[_extends({},oldProps,newProps),[].concat(_toConsumableArray(oldChildren),_toConsumableArray(newChildren))];
-},[props,children]),_args$reduce$reduce2=_slicedToArray(_args$reduce$reduce,2),finalProps=_args$reduce$reduce2[0],finalChildren=_args$reduce$reduce2[1];
 
+
+
+
+
+
+
+
+njsx;var _react=require('react');function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}var isArray=Array.isArray;var flatten=function flatten(array){return array.reduce(function(acum,elem){return[].concat(_toConsumableArray(acum),_toConsumableArray(isArray(elem)?elem:[elem]));},[]);};var asDynamic=function asDynamic(component){return!Proxy?component:new Proxy(component,{get:function get(target,name){var _component=component(),type=_component.type,_component$props=_component.props,_component$props$chil=_component$props.children,children=_component$props$chil===undefined?[]:_component$props$chil,props=_objectWithoutProperties(_component$props,['children']);var next=njsx.dynamicSelectorHandler(name,{props:props,children:children});return asDynamic(njsx(type,next.props,next.children));}});};function njsx(type){var props=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var children=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];
+var component=function component(){for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}var _flatten$reduce=
+flatten(args).reduce(function(previous,arg){return(
+njsx.rules.find(function(rule){return rule.appliesTo(arg);}).apply(arg,previous));},
+{props:props,children:children}),finalProps=_flatten$reduce.props,finalChildren=_flatten$reduce.children;
+
 return args.length===0?
@@ -23,3 +27,3 @@ _react.createElement.apply(undefined,[type,finalProps].concat(_toConsumableArray(finalChildren))):
 
-return component;
+return njsx.dynamicSelectorHandler?asDynamic(component):component;
 }

package.json

 {
   "name": "njsx",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "No-JSX: A customizable interface for creating React and React-Native components without JSX syntax.",
@@ -8,3 +8,3 @@ "repository": "uqbar-project/njsx",
     "test": "mocha --compilers js:babel-register",
-    "construct": "rm -r lib && babel --presets react-native src -d lib && cp -t ./lib/ ./package.json ./README.md && cd lib && npm publish ./"
+    "release": "rm -r lib && babel --presets react-native src -d lib && cp -t ./lib/ ./package.json ./README.md && cd lib && npm publish ./"
   },
@@ -11,0 +11,0 @@ "dependencies": {

react.js

@@ -17,3 +17,5 @@ Object.defineProperty(exports,"__esModule",{value:true});exports.tspan=exports.text=exports.svg=exports.stop=exports.rect=exports.radialGradient=exports.polyline=exports.polygon=exports.pattern=exports.path=exports.mask=exports.linearGradient=exports.line=exports.image=exports.g=exports.ellipse=exports.defs=exports.clipPath=exports.circle=exports.wbr=exports.video=exports.variable=exports.ul=exports.u=exports.track=exports.tr=exports.title=exports.time=exports.thead=exports.th=exports.tfoot=exports.textarea=exports.td=undefined;exports.tbody=exports.table=exports.sup=exports.summary=exports.sub=exports.style=exports.strong=exports.span=exports.source=exports.small=exports.select=exports.section=exports.script=exports.samp=exports.s=exports.ruby=exports.rt=exports.rp=exports.q=exports.progress=exports.pre=exports.picture=exports.param=exports.p=exports.output=exports.option=exports.optgroup=exports.ol=exports.object=exports.noscript=exports.nav=exports.meter=exports.meta=exports.menuitem=exports.menu=exports.mark=exports.map=exports.main=exports.link=exports.li=exports.legend=exports.label=exports.keygen=exports.kbd=exports.ins=exports.input=exports.img=exports.iframe=exports.i=exports.html=exports.hr=exports.hgroup=exports.header=exports.head=exports.h6=exports.h5=exports.h4=exports.h3=exports.h2=exports.h1=exports.form=exports.footer=exports.figure=exports.figcaption=exports.fieldset=exports.embed=exports.em=exports.dt=exports.dl=exports.div=exports.dialog=exports.dfn=exports.details=exports.del=exports.dd=exports.datalist=exports.data=exports.colgroup=exports.col=exports.code=exports.cite=exports.caption=exports.canvas=exports.button=exports.br=exports.body=exports.blockquote=exports.big=exports.bdo=exports.bdi=exports.base=exports.b=exports.audio=exports.aside=exports.article=exports.area=exports.address=exports.abbr=exports.a=exports.DEFAULT_REACT_RULES=undefined;var _njsx=require('./njsx');var _njsx2=_interopRequireDefault(_njsx);
 _njsx2.default.rules=DEFAULT_REACT_RULES;
+_njsx2.default.dynamicSelectorHandler=_rules2.default.STRING_AS_CLASS.apply;
 
+
 var a=exports.a=(0,_njsx2.default)('a');
@@ -20,0 +22,0 @@ var abbr=exports.abbr=(0,_njsx2.default)('abbr');

README.md

@@ -69,3 +69,3 @@ No-JSX
 
-    ```jsx
+    ```js
     img({src: somePath, onClick: someCallback})
@@ -76,3 +76,3 @@ ```
 
-    ```jsx
+    ```js
     img({src: thisWillBeLost, onClick: thisWillRemain})({src: thisWillOverrideThePreviousPath})
@@ -83,3 +83,3 @@ ```
 
-    ```jsx
+    ```js
     div(
@@ -106,4 +106,15 @@ div('the answer is ', 42)  // <- No need for building
 
-## Advanced Customization
+If the running environment [supports ES6's Proxy](https://kangax.github.io/compat-table/es6/#test-Proxy), component's property access can be used to further refine an existing component. By default, in *react* projects, this is set to make each property access yield a new component with the property name as a class:
 
+```jsx
+//all these yield the same component
+p('.highlighted.small')("hello!")
+p.highlighted.small("hello!")
+p("hello!").highlighted.small
+<p className="highlighted small">hello!</p>
+```
+
+
+### Advanced Customization
+
 You don't like the way arguments are being handled? No problem! You can customize the rules *NJSX* uses for interpreting arguments to fine tune it to your needs. Add or remove supported argument applications, change the way they are processed or throw all away and start from scratch!
@@ -116,9 +127,14 @@
 
-Each *rule* is just an array with two functions. The first one tells if the rule can handle an argument, the other one extracts any property or child from it.
+Each *rule* is just an object with two methods:
+  - `appliesTo(argument)`: Tells if the rule can handle an argument applied to a component builder.
+  - `apply(argument, {props,children})`: Takes the argument applied to a component builder and the curent state of the builder (denoted by an object containing a `props` hash and a `children` array) and returns the next builder state.
 
 ```js
-Rules.STRING_AS_CHILD = [
-  arg => typeof arg === 'string', // This rule only applies to arguments of type string.
-  arg => [ {}, [arg] ]            // Applying this rule adds the string to the children array (but it doesn't change the properties).
-]
+Rules.STRING_AS_CHILD = {
+  // This rule only applies to arguments of type string.
+  appliesTo(arg) { return typeof arg === 'string' },
+  
+  // Applying this rule adds the string to the children array (but it doesn't change the properties).
+  apply(arg, {props, children}) { return {props, children: [...children, arg] }}
+}
 ```
@@ -129,6 +145,6 @@
 ```js
-const strigableAsChild = [
-  arg => arg.toString && typeof(arg.toString) === 'function',
-  arg => [ {}, [arg.toString()] ]
-]
+const strigableAsChild = {
+  appliesTo(arg) { return arg.toString && typeof(arg.toString) === 'function' },
+  apply(arg, {props, children}) { return {props, children: [...children, arg.toString()] }}
+}
 
@@ -138,5 +154,13 @@ njsx.rules.push(stringableAsChild) // From now on, all builders will support this rule.
 
-Take into account that **only one** rule will be applied to each argument, and each rule will be tried in same order as it appears in the `njsx.rules` array, so be carefull to leave the more generic rules at the bottom.
+Take into account that **only one** rule will be applied to each argument, and each rule will be tested for applicability in the same order as it appears in the `njsx.rules` array, so be carefull to leave the more generic rules at the bottom.
 
+Finally, if you want to change how property access is handled by the builders, you can do so by setting the `njsx.dynamicSelectorHandler` property to a function that takes the accessed property name and the current builder state and returns the next state. For example, if you want the accesses to be treated as class names in a *react-native* project, you can do so by adding this line:
 
+```js
+  njsx.dynamicSelectorHandler = Rules.STRING_AS_CLASS.apply
+```
+
+You can also set this property to a *falsy* value to disable the whole property access behavior for builders.
+
+
 ## Contributions
@@ -143,0 +167,0 @@

rules.js

@@ -1,12 +0,45 @@
-Object.defineProperty(exports,"__esModule",{value:true});var Rule=exports.Rule=function Rule(appliesTo){return function(materialize){return[appliesTo,materialize];};};exports.default=
+Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}exports.default={
 
-{
-HASH_AS_ATRIBUTES:Rule(function(a){return typeof a==='object';})(function(a){return[a,[]];}),
-STRING_AS_CLASS:Rule(function(a){return typeof a==='string'&&a.trim().startsWith('.');})(function(a){return[{className:a.split('.').join(' ').trim()},[]];}),
-STRING_AS_CHILD:Rule(function(a){return typeof a==='string';})(function(a){return[{},[a]];}),
-NUMBER_AS_CHILD:Rule(function(a){return typeof a==='number';})(function(a){return[{},[a.toString()]];}),
-BOOLEAN_AS_CHILD:Rule(function(a){return typeof a==='boolean';})(function(a){return[{},[a.toString()]];}),
-NJSX_COMPONENT_AS_CHILD:Rule(function(a){return a.isNJSXComponent;})(function(a){return[{},[a()]];}),
-REACT_COMPONENT_AS_CHILD:Rule(function(a){return typeof a==='object'&&a.props;})(function(a){return[{},[a]];}),
-IGNORE_NULL:Rule(function(a){return a===null;})(function(a){return[{},[]];}),
-IGNORE_UNDEFINED:Rule(function(a){return a===undefined;})(function(a){return[{},[]];})};
+HASH_AS_ATRIBUTES:{
+appliesTo:function appliesTo(arg){return typeof arg==='object';},
+apply:function apply(arg,_ref){var props=_ref.props,children=_ref.children;return{props:_extends({},props,arg),children:children};}},
+
+
+STRING_AS_CLASS:{
+appliesTo:function appliesTo(arg){return typeof arg==='string'&&arg.trim().startsWith('.');},
+apply:function apply(arg,_ref2){var _ref2$props=_ref2.props,_ref2$props$className=_ref2$props.className,className=_ref2$props$className===undefined?'':_ref2$props$className,otherProps=_ref2$props.otherProps,children=_ref2.children;return{props:_extends({},otherProps,{className:[].concat(_toConsumableArray(className.split(' ')),_toConsumableArray(arg.split('.'))).map(function(c){return c.trim();}).filter(String).join(' ')}),children:children};}},
+
+
+STRING_AS_CHILD:{
+appliesTo:function appliesTo(arg){return typeof arg==='string';},
+apply:function apply(arg,_ref3){var props=_ref3.props,children=_ref3.children;return{props:props,children:[].concat(_toConsumableArray(children),[arg])};}},
+
+
+NUMBER_AS_CHILD:{
+appliesTo:function appliesTo(arg){return typeof arg==='number';},
+apply:function apply(arg,_ref4){var props=_ref4.props,children=_ref4.children;return{props:props,children:[].concat(_toConsumableArray(children),[arg.toString()])};}},
+
+
+BOOLEAN_AS_CHILD:{
+appliesTo:function appliesTo(arg){return typeof arg==='boolean';},
+apply:function apply(arg,_ref5){var props=_ref5.props,children=_ref5.children;return{props:props,children:[].concat(_toConsumableArray(children),[arg.toString()])};}},
+
+
+NJSX_COMPONENT_AS_CHILD:{
+appliesTo:function appliesTo(arg){return arg.isNJSXComponent;},
+apply:function apply(arg,_ref6){var props=_ref6.props,children=_ref6.children;return{props:props,children:[].concat(_toConsumableArray(children),[arg()])};}},
+
+
+REACT_COMPONENT_AS_CHILD:{
+appliesTo:function appliesTo(arg){return typeof arg==='object'&&arg.props;},
+apply:function apply(arg,_ref7){var props=_ref7.props,children=_ref7.children;return{props:props,children:[].concat(_toConsumableArray(children),[arg])};}},
+
+
+IGNORE_NULL:{
+appliesTo:function appliesTo(arg){return arg===null;},
+apply:function apply(arg,previous){return previous;}},
+
+
+IGNORE_UNDEFINED:{
+appliesTo:function appliesTo(arg){return arg===undefined;},
+apply:function apply(arg,previous){return previous;}}};

No alert changes

Improved metrics

Total package byte prevSize

26124

increased by11.36%

Lines of code

245

increased by6.99%

Number of lines in readme file

167

increased by16.78%

No dependency changes