I use pug-vdom to enable Pug templates to be used with the Hyperapp framework. This worked great, until the framework added a new function text() in parallel with h() to separately process virtual text nodes. As per this snippet h("h1", {}, text("To do list")). I generated a work-around in this repo with a local copy of pug-vdom.
So now the following simple template fails
div
// receives the <greet> variable from the supplied state object
- var greeting = "Hello " + greet
p(style={color: "red"}) #{greeting}
input(size="60" placeholder=placeholder onchange=handler.updateMe)
button(id='clickMe' onclick=handler.clickMe) Click Me
p #{userText}
Because the greeting in n2Child is represented by a string in the following rather than what's returned from h().
var n0Child = []
var n1Child = []
var greeting = "Hello " + greet
var n2Child = []
n2Child = n2Child.concat(greeting)
var props = {attributes: runtime.compileAttrs([{name:'style', val: {color: "red"}}], [])};
if (props.attributes.id) props.key = props.attributes.id;
var n2 = h('p', props, n2Child)
For Hyperapp, I need to call text(greeting), making it a virtual textNode as follows:
var n0Child = []
var n1Child = []
var greeting = "Hello " + greet
var n2Child = []
n2Child = n2Child.concat(text(greeting))
var props = {attributes: runtime.compileAttrs([{name:'style', val: {color: "red"}}], [])};
if (props.attributes.id) props.key = props.attributes.id;
var n2 = h('p', props, n2Child)
So I would like to change pug-vdom.js to optionally support a text() function as follows, where the generated render(context, h) has a new optional function arg that is used by visitText and visitCode:
Compiler.prototype.bootstrap = function () {
this.addI(`function render(context, h, text = (string) => string) {\r\n`)
...
Compiler.prototype.visitText = function (node, parent) {
var val = node.val;
var s = JSON.stringify(val)
if (val[0] === '<') {
this.addI(`n${this.parentTagId}Child = n${this.parentTagId}Child.concat(runtime.makeHtmlNode(${s}))\r\n`)
} else {
this.addI(`n${this.parentTagId}Child.push(text(${s}))\r\n`)
}
}
Compiler.prototype.visitCode = function (node, parent) {
if (node.buffer) {
this.addI(`n${this.parentTagId}Child = n${this.parentTagId}Child.concat(${node.mustEscape ? `text(${node.val})` : `runtime.makeHtmlNode(${node.val})`})\r\n`)
} else {
this.addI(node.val + '\r\n')
}
if(node.block){
this.addI('{\r\n')
this.indent++
this.visitBlock(node.block, node)
this.indent--
this.addI('}\r\n')
}
}
I use pug-vdom to enable Pug templates to be used with the Hyperapp framework. This worked great, until the framework added a new function
text()
in parallel withh()
to separately process virtual text nodes. As per this snippeth("h1", {}, text("To do list"))
. I generated a work-around in this repo with a local copy of pug-vdom.So now the following simple template fails
Because the
greeting
inn2Child
is represented by a string in the following rather than what's returned fromh()
.For Hyperapp, I need to call
text(greeting)
, making it a virtual textNode as follows:So I would like to change pug-vdom.js to optionally support a
text()
function as follows, where the generatedrender(context, h)
has a new optional function arg that is used byvisitText
andvisitCode
: