Interpolate variables into HTML graph described as JSON - return String for Node.js and HTMLElement in the browser.
npm install ctxifyClientside, presents a simple global function that converts deep objects into DOM trees
Also every child created from this tree has a props property that offers easy getting and setting of HTML attributes.
``js`
ctxify({div: {
id: 'whateverYouWant',
textContent: 'This becomes a text node'
}})
// This becomes a text node
You can provide a second argument which will serve as an object to search for keys referenced in {{curly.bracket.delimited.dot.notation}} in any string in your HTMLX graph.
`js
let prefixStyle = fs.readFileSync('./conf/prefixConfig.css')
ctxify({"style": {
"textContent": "{{prefixStyle}}"
}}, { prefixStyle })
`
Here, an object with a single key, prefixStyle, with the property of the contents of .conf/prefixConfig.css`, will be transformed into a style tag with the file contents.
Serverside, provides a module for server side rendering, interpolating data objects into your HTMLX objects and returning the HTML string.
This is presently syncronous, but it doesn't have to be...
I'll admit that bin/validateGraph is a pretty amatuer attempt at keeping a stack: I thought it would be nice to give a position.subposition.subsubposition path to where the validation failed (ran into unexpected value or type), so all my functions are redefined on every recursion with the position value passed in to the new scope. There's a better way to do this or maybe a better way to use error.stack than re-implementing it, but I haven't dug into it enough.
Serverside interpolates context with htmlx
No weird this binding, just pass optional context as 2nd argument.
If you want to pass in text of some file to the textContent of some object, instead of having to read the file inside of the mergectx function, make sure you have the file read before you start: pass in the text as a JS object property.
More documentation for serverside & clientside
Clientside context interpolation is coming up next
ChildNodes is an array including {tagName: {props}} objects and strings: strings should be filepaths --> I'll try to require that path, assuming its a JSON file, in which case it will be used as the sub graph for that child