README
xml-light
Simple functions to generate XML/HTML in JavaScript.
Super compact package at less than 40 lines of code.
Virtual Hypertext
Use the Virtual Hypertext _
method.
_(tag: string, attributes: {}, ...children: string[]): string;
Example:
var xml = require('xml-light');
var _ = xml._;
var html =
_('div', {'class': 'wrapper'},
_('div', {'class': 'avatar'},
_('img', {src: '...'}),
_('span', {},
'Hello there'
),
_('br')
)
);
console.log(html);
//<div class="wrapper"><div class="avatar"><img src="..."/><span>Hello there</span><br/></div></div>
POJO
Create XML from a plain JavaScript Array object, where first element is the name of XML tag, the second is an object of attributes and the rest of the elements of the array are its children nodes.
type VNode = [tag: string, attributes: {}, ...children: VNode[]];
xml(root: VNode, h = _);
Example:
var xml = require('xml-light').xml;
var pojo =
['div', {'class': 'wrapper'},
['div', {'class': 'avatar'},
['img', {src: '...'}],
['span', null,
'Hello there'
],
['br'],
],
];
console.log(xml(pojo));
// <div class="wrapper"><div class="avatar"><img src="..."/><span>Hello there</span><br/></div></div>
React
The second argument to the xml
function is a virtual hypertext generator function, you can provide
React.createElement.bind(React)
to it to generate React virtual DOM.
Generate React Virtual DOM representations from POJO lists instead of using React.createElement
or .jsx
files and compiling them to .js
.
var xml = require('xml-light').xml;
var react_dom = xml(
['div', {className: 'test'},
['span', null,
'Hello world!'
]
], React.createElement.bind(React)
);
This is equivalent to:
var react_dom = React.createElement('div', {className: 'test'},
React.createElement('span', null, 'Hello world!'));
You might consider creating a React Virtual Hypertext method for convenience:
React.h = React.createElement.bind(React);
var react_dom = xml(
['div', {className: 'test'},
['span', null,
'Hello world!'
]
], React.h
);
Or even:
React.xml = function(pojo) {
return xml(pojo, React.h);
};
So now, instead installing .jsx
to .js
compiler and writing your components in some weird xml-js
mix language:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
You can do everything in 100% JavaScript:
var CommentBox = React.createClass({
render: function() {
React.xml(
// BONUS:
// You can now add plain comments to your React templates,
// without the required {/* */} syntax (in some places).
['div', {className: 'commentBox'},
'Hello, world! I am a CommentBox.'
]
);
}
});
TypeScript definitions for your extension:
declare namespace __React {
export var h: (...pojo: any[]) => React.ReactElement<any>;
export var xml: (pojo: any[]) => React.ReactElement<any>;
}