10703984895

Committed 04 Sep 2024 02:39PM UTC coverage: 62.329% (+0.2%) from 62.114%

Build # 10703984895

Build Type

push

github

Committed by

jclo

Commit Message

Prefixed the RView.Component init, postRender, onChange and render methods with $, replaced listen with $listenDOM, and added a warning log to encourage the use of the new methods.

Run Details

115 of 115 branches covered (100.0%)

Branch coverage included in aggregate %.

97 of 153 new or added lines in 6 files covered. (63.4%)

17 existing lines in 1 file now uncovered.

2486 of 4058 relevant lines covered (61.26%)

0.63 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

55.79

/src/component/hyperscript.js

/** ************************************************************************
 *
 * Converts an hyperscript object to a node element.
 *
 * hyperscript.js is just a literal object that contains a set of functions.
 * It can't be intantiated.
 *
 * Private Functions:
 *  . _reshuffle                  rebuilds the component tags,
 *  . _stringify                  returns the attribute value converted to a string,
 *  . _render                     converts an hyperscript object to a node element,
 *
 *
 * Public Static Methods:
 *  . format                      converts the passed-in arguments to an object,
 *  . render                      converts an hyperscript object to an XMLString,
 *
 *
 *
 * @namespace    -
 * @dependencies none
 * @exports      -
 * @author       -
 * @since        0.0.0
 * @version      -
 * ********************************************************************** */
/* global */
/* eslint-disable one-var, semi-style, no-underscore-dangle */


// -- Vendor Modules


// -- Local Modules
import _ from '../lib/_';


// -- Local Constants


// -- Local Variables


// -- Private Functions ----------------------------------------------------

/**
 * Rebuilds the component tags.
 *
 * Nota:
 * When serialized the component tags become '<cxx></cxx>'. We reformat them
 * as it should be, i.e. '<Cxx />'. Besides, we update 'cList' to link
 * the component tag to the component object ({ '<Cxx />': Cxx }).
 *
 * @function (arg1, arg2, arg3)
 * @private
 * @param {String}          the serialized node,
 * @param {Object}          the cList object,
 * @param {Object}          the local cList object,
 * @returns {String}        returns the reformatted serialized node,
 * @since 0.0.0
 */
/* eslint-disable no-param-reassign */
function _reshuffle(node, cList, locList) {
  const keys = Object.keys(locList)
      ;

  for (let i = 0; i < keys.length; i++) {
    node = node
      .replace(`</${keys[i].toLowerCase()}>`, '')
      .replace(keys[i].toLowerCase(), `${keys[i]} /`);

    cList[`<${keys[i]} />`] = locList[keys[i]];
  }
  return node;
}
/* eslint-enable no-param-reassign */

/**
 * Returns the attribute value converted to a string.
 *
 * Nota:
 * This function converts a style attribute like this:
 *  . style: { 'font-family': 'helvetica', 'font-size': '20px' }
 *
 * @function (arg1)
 * @private
 * @param {Object}          the attribute value,
 * @returns {String}        returns a string of the attribute value,
 * @since 0.0.0
 */
function _stringify(attr) {
  const keys = Object.keys(attr)
      ;

  let s = '';
  for (let i = 0; i < keys.length; i++) {
    s += i < keys.length - 1
      ? `${keys[i]}: ${attr[keys[i]]}; `
      : `${keys[i]}: ${attr[keys[i]]};`;
  }
  return s;
}

/**
 * Converts an hyperscript object to a node element.
 *
 * @function (arg1, arg2)
 * @private
 * @param {Object}          the hyperscript object,
 * @param {Object}          the local version of cList to link a tag to a component,
 * @returns {Object}        the node representation,
 * @since 0.0.0
 */
function _render(vnode, locList) {
  const { nodeName } = vnode
      , { attributes } = vnode
      , { children } = vnode
      ;

  let el
    , keys
    , value
    , obj
    , id
    , i
    ;

  // Checks if vnode is a string. If it is the case, it means that this node
  // is in fact a text node. So, we return the created element text node.
  if (_.isString(vnode)) {
    return document.createTextNode(vnode);
  }

  // nodeName could be an HTML tag, an hyperscript node or a Component.
  switch (typeof nodeName) {
    // nodeName is an HTML tag. We create a node element from this tag and
    // we attach the attributes defined by 'attributes'. The 'attributes'
    // could be a value or an object if this attribute is a style.
    case 'string':
      el = document.createElement(nodeName);
      keys = attributes ? Object.keys(attributes) : [];
      for (i = 0; i < keys.length; i++) {
        value = _.isObject(attributes[keys[i]])
          ? _stringify(attributes[keys[i]])
          : attributes[keys[i]];
        el.setAttribute(keys[i], value);
      }
      break;

    // 'nodeName' is a function. It could be an hyperscript object or a sub
    // 'component'. If the object returned by the executed function nodeName
    // has the method 'render', it is a component otherwise it is an
    // hyperscript object.
    case 'function':
      obj = nodeName();
      if (obj._intRender) {
        // We do not process subcomponents otherwise they are merged with
        // the current node and we can't access them independently. Thus,
        // we create a tag ('<Cxx />') instead and this Component is processed
        // independently so it inherits of an unique id and a reference in cList.
        // If the name isn't provided, we create an unique identifier for this
        // subcomponent but it becomes then difficult to access it.
        id = attributes && attributes.name
          ? attributes.name
          : `C${Math.random().toString(36).substr(2, 7)}`;
        /* eslint-disable-next-line no-param-reassign */
        locList[id] = {
          fn: nodeName,
          state: attributes.state ? attributes.state : null,
          props: attributes.props ? attributes.props : null,
        };
        el = _render({ nodeName: id, attributes: null, children: [] }, locList);
      } else {
        // We process recursively the hyperscript objects.
        el = _render(obj, locList);
      }
      break;

    default:
      throw new Error(
        `hypserscript._render: nodeName is a ${typeof nodeName} ???`,
      );
  }

  // Recursively processes all of its children:
  for (i = 0; i < children.length; i++) {
    el.appendChild(_render(children[i], locList));
  }

  return el;
}


// -- Public Static Methods ------------------------------------------------

const Hyperscript = {

  /**
   * Converts the passed-in arguments to an object.
   *
   * @method (...args)
   * @public
   * @param {...args}       arguments like { tag, attributes, value },
   * @returns {Object}      returns the object,
   * @since 0.0.0
   */
  format(...args) {
    const [nodeName, attributes, ...children] = args;
    return { nodeName, attributes, children };
  },

  /**
   * Converts an hyperscript object to a node and returns its string representation.
   *
   * @method (arg1, arg2)
   * @public
   * @param {Object}        the hyperscript object,
   * @param {Object}        the cList object,
   * @returns {String}      returns the string represention of the hyperscript object,
   * @since 0.0.0
   */
  render(vnode, cList) {
    const s = new XMLSerializer()
        , locList = {}
        ;

    const node = s.serializeToString(_render(vnode, locList))
      .replace('xmlns="http://www.w3.org/1999/xhtml"', '');
    return _reshuffle(node, cList, locList);
  },
};


// -- Export
export default Hyperscript;

/* eslint-enable one-var, semi-style, no-underscore-dangle */

1	/ **********************************************************************	1✔
2	*	1✔
3	* Converts an hyperscript object to a node element.	1✔
4	*	1✔
5	* hyperscript.js is just a literal object that contains a set of functions.	1✔
6	* It can't be intantiated.	1✔
7	*	1✔
8	* Private Functions:	1✔
9	* . _reshuffle rebuilds the component tags,	1✔
10	* . _stringify returns the attribute value converted to a string,	1✔
11	* . _render converts an hyperscript object to a node element,	1✔
12	*	1✔
13	*	1✔
14	* Public Static Methods:	1✔
15	* . format converts the passed-in arguments to an object,	1✔
16	* . render converts an hyperscript object to an XMLString,	1✔
17	*	1✔
18	*	1✔
19	*	1✔
20	* @namespace -	1✔
21	* @dependencies none	1✔
22	* @exports -	1✔
23	* @author -	1✔
24	* @since 0.0.0	1✔
25	* @version -	1✔
26	* ********************************************************************** */	1✔
27	/* global */	1✔
28	/* eslint-disable one-var, semi-style, no-underscore-dangle */	1✔
29		1✔
30		1✔
31	// -- Vendor Modules	1✔
32		1✔
33		1✔
34	// -- Local Modules	1✔
35	import _ from '../lib/_';	1✔
36		1✔
37		1✔
38	// -- Local Constants	1✔
39		1✔
40		1✔
41	// -- Local Variables	1✔
42		1✔
43		1✔
44	// -- Private Functions ----------------------------------------------------	1✔
45		1✔
46	/**	1✔
47	* Rebuilds the component tags.	1✔
48	*	1✔
49	* Nota:	1✔
50	* When serialized the component tags become '<cxx></cxx>'. We reformat them	1✔
51	* as it should be, i.e. '<Cxx />'. Besides, we update 'cList' to link	1✔
52	* the component tag to the component object ({ '<Cxx />': Cxx }).	1✔
53	*	1✔
54	* @function (arg1, arg2, arg3)	1✔
55	* @private	1✔
56	* @param {String} the serialized node,	1✔
57	* @param {Object} the cList object,	1✔
58	* @param {Object} the local cList object,	1✔
59	* @returns {String} returns the reformatted serialized node,	1✔
60	* @since 0.0.0	1✔
61	*/	1✔
62	/* eslint-disable no-param-reassign */	1✔
63	function _reshuffle(node, cList, locList) {	1✔
64	const keys = Object.keys(locList)	1✔
65	;	1✔
66		1✔
67	for (let i = 0; i < keys.length; i++) {	1✔
68	node = node	1✔
69	.replace(`</${keys[i].toLowerCase()}>`, '')	1✔
70	.replace(keys[i].toLowerCase(), `${keys[i]} /`);	1✔
71		×
72	cList[`<${keys[i]} />`] = locList[keys[i]];	×
73	}	×
74	return node;	×
75	}	×
76	/* eslint-enable no-param-reassign */	×
77		×
78	/**	×
79	* Returns the attribute value converted to a string.	×
80	*	×
81	* Nota:	×
82	* This function converts a style attribute like this:	×
83	* . style: { 'font-family': 'helvetica', 'font-size': '20px' }	1✔
84	*	1✔
85	* @function (arg1)	1✔
86	* @private	1✔
87	* @param {Object} the attribute value,	1✔
88	* @returns {String} returns a string of the attribute value,	1✔
89	* @since 0.0.0	1✔
90	*/	1✔
91	function _stringify(attr) {	1✔
92	const keys = Object.keys(attr)	1✔
93	;	1✔
94		1✔
95	let s = '';	1✔
96	for (let i = 0; i < keys.length; i++) {	1✔
97	s += i < keys.length - 1	1✔
98	? `${keys[i]}: ${attr[keys[i]]}; `	1✔
99	: `${keys[i]}: ${attr[keys[i]]};`;	1✔
100	}	×
101	return s;	×
102	}	×
103		×
104	/**	×
105	* Converts an hyperscript object to a node element.	×
106	*	×
107	* @function (arg1, arg2)	×
108	* @private	×
109	* @param {Object} the hyperscript object,	×
110	* @param {Object} the local version of cList to link a tag to a component,	1✔
111	* @returns {Object} the node representation,	1✔
112	* @since 0.0.0	1✔
113	*/	1✔
114	function _render(vnode, locList) {	1✔
115	const { nodeName } = vnode	1✔
116	, { attributes } = vnode	1✔
117	, { children } = vnode	1✔
118	;	1✔
119		1✔
120	let el	1✔
121	, keys	1✔
122	, value	1✔
123	, obj	1✔
124	, id	1✔
125	, i	1✔
126	;	1✔
127		1✔
128	// Checks if vnode is a string. If it is the case, it means that this node	1✔
129	// is in fact a text node. So, we return the created element text node.	×
130	if (_.isString(vnode)) {	×
131	return document.createTextNode(vnode);	×
132	}	×
133		×
134	// nodeName could be an HTML tag, an hyperscript node or a Component.	×
135	switch (typeof nodeName) {	×
136	// nodeName is an HTML tag. We create a node element from this tag and	×
137	// we attach the attributes defined by 'attributes'. The 'attributes'	×
138	// could be a value or an object if this attribute is a style.	×
139	case 'string':	×
140	el = document.createElement(nodeName);	×
141	keys = attributes ? Object.keys(attributes) : [];	×
142	for (i = 0; i < keys.length; i++) {	×
143	value = _.isObject(attributes[keys[i]])	×
144	? _stringify(attributes[keys[i]])	×
145	: attributes[keys[i]];	×
146	el.setAttribute(keys[i], value);	×
147	}	×
148	break;	×
149		×
150	// 'nodeName' is a function. It could be an hyperscript object or a sub	×
151	// 'component'. If the object returned by the executed function nodeName	×
152	// has the method 'render', it is a component otherwise it is an	×
153	// hyperscript object.	×
154	case 'function':	×
155	obj = nodeName();	×
NEW 156	if (obj._intRender) {	×
157	// We do not process subcomponents otherwise they are merged with	×
158	// the current node and we can't access them independently. Thus,	×
159	// we create a tag ('<Cxx />') instead and this Component is processed	×
160	// independently so it inherits of an unique id and a reference in cList.	×
161	// If the name isn't provided, we create an unique identifier for this	×
162	// subcomponent but it becomes then difficult to access it.	×
163	id = attributes && attributes.name	×
164	? attributes.name	×
165	: `C${Math.random().toString(36).substr(2, 7)}`;	×
166	/* eslint-disable-next-line no-param-reassign */	×
167	locList[id] = {	×
168	fn: nodeName,	×
169	state: attributes.state ? attributes.state : null,	×
170	props: attributes.props ? attributes.props : null,	×
171	};	×
172	el = _render({ nodeName: id, attributes: null, children: [] }, locList);	×
173	} else {	×
174	// We process recursively the hyperscript objects.	×
175	el = _render(obj, locList);	×
176	}	×
177	break;	×
178		×
179	default:	×
180	throw new Error(	×
181	`hypserscript._render: nodeName is a ${typeof nodeName} ???`,	×
182	);	×
183	}	×
184		×
185	// Recursively processes all of its children:	×
186	for (i = 0; i < children.length; i++) {	×
187	el.appendChild(_render(children[i], locList));	×
188	}	×
189		×
190	return el;	×
191	}	×
192		×
193		×
194	// -- Public Static Methods ------------------------------------------------	×
195		×
196	const Hyperscript = {	×
197		×
198	/**	×
199	* Converts the passed-in arguments to an object.	×
200	*	×
201	* @method (...args)	×
202	* @public	×
203	* @param {...args} arguments like { tag, attributes, value },	1✔
204	* @returns {Object} returns the object,	1✔
205	* @since 0.0.0	1✔
206	*/	1✔
207	format(...args) {	1✔
208	const [nodeName, attributes, ...children] = args;	1✔
209	return { nodeName, attributes, children };	1✔
210	},	1✔
211		1✔
212	/**	1✔
213	* Converts an hyperscript object to a node and returns its string representation.	1✔
214	*	1✔
215	* @method (arg1, arg2)	×
216	* @public	×
217	* @param {Object} the hyperscript object,	×
218	* @param {Object} the cList object,	1✔
219	* @returns {String} returns the string represention of the hyperscript object,	1✔
220	* @since 0.0.0	1✔
221	*/	1✔
222	render(vnode, cList) {	1✔
223	const s = new XMLSerializer()	1✔
224	, locList = {}	1✔
225	;	1✔
226		1✔
227	const node = s.serializeToString(_render(vnode, locList))	1✔
228	.replace('xmlns="http://www.w3.org/1999/xhtml"', '');	1✔
229	return _reshuffle(node, cList, locList);	1✔
230	},	×
231	};	×
232		×
233		×
234	// -- Export	×
235	export default Hyperscript;	×
236		×
237	/* eslint-enable one-var, semi-style, no-underscore-dangle */	×

jclo / rview / 10703984895

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous