hello!
+``` + + +### 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! @@ -109,27 +120,40 @@ import njsx from 'njsx/njsx' // This is NJSX core. Booth React and ReactNative import Rules from 'njsx/rules' // This module exports some common rule examples. ``` -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] }} +} ``` So you could easily create, for example, a rule that can handle anything that defines a `toString()` function and adds its result as a child. ```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()] }} +} 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 diff --git a/package.json b/package.json index bd4501d..ff2c7b2 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "name": "njsx", - "version": "1.0.0", + "version": "2.0.0", "description": "No-JSX: A customizable interface for creating React and React-Native components without JSX syntax.", "repository": "uqbar-project/njsx", "scripts": { "test": "mocha --compilers js:babel-register", - "construct": "rm -r lib && babel --presets react-native src -d lib && cp ./package.json ./lib/ && cd lib && npm pack" + "release": "rm -r lib && babel --presets react-native src -d lib && cp -t ./lib/ ./package.json ./README.md && cd lib && npm publish ./" }, "dependencies": { "react": "^15.4.2" diff --git a/src/njsx.js b/src/njsx.js index 6e172b4..3e8b0a7 100644 --- a/src/njsx.js +++ b/src/njsx.js @@ -2,16 +2,20 @@ import {createElement} from 'react' const {isArray} = Array +const flatten = (array) => array.reduce((acum, elem) => [...acum, ...isArray(elem) ? elem : [elem]], []) +const asDynamic = (component) => !Proxy ? component : new Proxy(component, { + get(target, name) { + const {type, props: {children = [], ...props}} = component() + const next = njsx.dynamicSelectorHandler(name, {props, children}) + return asDynamic( njsx(type, next.props, next.children) ) + } +}) + export default function njsx(type, props={}, children=[]) { const component = (...args) => { - const [finalProps, finalChildren] = args - .reduce((acum, arg) => [...acum, ...isArray(arg) ? arg : [arg]], []) - .reduce(([oldProps, oldChildren], arg) => { - const [,materialize] = njsx.rules.find(([appliesTo,]) => appliesTo(arg)) - const [newProps, newChildren] = materialize(arg) - - return [{...oldProps, ...newProps}, [...oldChildren, ...newChildren]] - }, [props,children]) + const {props: finalProps, children: finalChildren} = flatten(args).reduce((previous, arg) => + njsx.rules.find(rule => rule.appliesTo(arg)).apply(arg, previous) + , {props,children}) return args.length === 0 ? createElement(type, finalProps, ...finalChildren) @@ -20,5 +24,5 @@ export default function njsx(type, props={}, children=[]) { component.isNJSXComponent = true - return component + return njsx.dynamicSelectorHandler ? asDynamic(component) : component } \ No newline at end of file diff --git a/src/react.js b/src/react.js index 04fd0db..47d5fe2 100644 --- a/src/react.js +++ b/src/react.js @@ -14,6 +14,8 @@ export const DEFAULT_REACT_RULES = [ ] njsx.rules = DEFAULT_REACT_RULES +njsx.dynamicSelectorHandler = RULES.STRING_AS_CLASS.apply + export const a = njsx('a') export const abbr = njsx('abbr') diff --git a/src/rules.js b/src/rules.js index 9d6802a..d1cba90 100644 --- a/src/rules.js +++ b/src/rules.js @@ -1,13 +1,48 @@ -export const Rule = (appliesTo) => (materialize) => [appliesTo, materialize] - export default { - HASH_AS_ATRIBUTES: Rule(a => typeof a === 'object')(a => [ a, [] ]), - STRING_AS_CLASS: Rule(a => typeof a === 'string' && a.trim().startsWith('.'))(a => [ {className: a.split('.').join(' ').trim()}, [] ]), - STRING_AS_CHILD: Rule(a => typeof a === 'string')(a => [ {}, [a] ]), - NUMBER_AS_CHILD: Rule(a => typeof a === 'number')(a => [ {}, [a.toString()] ]), - BOOLEAN_AS_CHILD: Rule(a => typeof a === 'boolean')(a => [ {}, [a.toString()] ]), - NJSX_COMPONENT_AS_CHILD: Rule(a => a.isNJSXComponent)(a => [ {}, [a()] ]), - REACT_COMPONENT_AS_CHILD: Rule(a => typeof a === 'object' && a.props)(a => [ {}, [a] ]), - IGNORE_NULL: Rule(a => a === null)(a => [ {}, [] ]), - IGNORE_UNDEFINED: Rule(a => a === undefined)(a => [ {}, [] ]) + + HASH_AS_ATRIBUTES: { + appliesTo(arg) { return typeof arg === 'object' }, + apply(arg, {props, children}) { return {props: {...props, ...arg}, children} } + }, + + STRING_AS_CLASS: { + appliesTo(arg) { return typeof arg === 'string' && arg.trim().startsWith('.') }, + apply(arg, {props: {className = '', otherProps}, children}) { return {props: {...otherProps, className: [...className.split(' '), ...arg.split('.')].map(c=> c.trim()).filter(String).join(' ')} , children } } + }, + + STRING_AS_CHILD: { + appliesTo(arg) { return typeof arg === 'string' }, + apply(arg, {props, children}) { return {props, children: [...children, arg] }} + }, + + NUMBER_AS_CHILD: { + appliesTo(arg) { return typeof arg === 'number' }, + apply(arg, {props, children}) { return { props, children: [...children, arg.toString()] }} + }, + + BOOLEAN_AS_CHILD: { + appliesTo(arg) { return typeof arg === 'boolean' }, + apply(arg, {props, children}) { return {props, children: [...children, arg.toString()] }} + }, + + NJSX_COMPONENT_AS_CHILD: { + appliesTo(arg) { return arg.isNJSXComponent }, + apply(arg, {props, children}) { return {props, children: [...children, arg()] }} + }, + + REACT_COMPONENT_AS_CHILD: { + appliesTo(arg) { return typeof arg === 'object' && arg.props }, + apply(arg, {props, children}) { return {props, children: [...children, arg] }} + }, + + IGNORE_NULL: { + appliesTo(arg) { return arg === null }, + apply(arg, previous) { return previous } + }, + + IGNORE_UNDEFINED: { + appliesTo(arg) { return arg === undefined }, + apply(arg, previous) { return previous } + } + } \ No newline at end of file diff --git a/test/njsx.test.js b/test/njsx.test.js index 1074e89..c895260 100644 --- a/test/njsx.test.js +++ b/test/njsx.test.js @@ -30,16 +30,16 @@ describe('NJSX', () => { it('should be refinable by passing attributes as a hash', () => { njsx.rules = [Rules.HASH_AS_ATRIBUTES] - const element = njsx('foo')({bar: 'meh'})() + const element = njsx('foo')({bar: 'baz'})() - expect(element).to.deep.equal(