marko-js / htmljs-parser

An HTML parser recognizes content and string placeholders and allows JavaScript expressions as attribute values
MIT License
136 stars 20 forks source link

Support vdom output (react or others). #1

Closed DylanPiercey closed 8 years ago

DylanPiercey commented 8 years ago

I haven't had a ton of time to dig into this library but it looks like a pretty solid templating language. I was wondering if there are any effort to support virtual DOM Esq output similar to JSX?

philidem commented 8 years ago

@DylanPiercey I hadn't thought about compiling HTML to JavaScript code that builds a DOM but that would be possible and you could use htmljs-parser to do that. That's an interesting use case. This parser is generic enough such that it could be used by other libraries to compile to different output formats.

For example, if you wanted to compile HTML to React JS code you could take something like this:

<Person name=(window.isLoggedIn ? window.name : '') />

and compile it to:

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

You could also compile the HTML string into DOM creation code.

For example, you could compile:

<div class=(data.getClassName()) />

to:

var el = document.createElement('div');
el.className = (data.getClassName());

htmljs-parser will be used by http://markojs.com/ to compile Marko templates in the next major version (work in progress). Marko currently supports pure HTML-based templates but we want to enhance it to recognize JavaScript expressions. See https://github.com/marko-js/marko/issues/90

Marko templates basically compile to a function that produces an HTML string but it would be interesting to considering creating an alternate compiled output that creates the DOM elements via JavaScript code.

patrick-steele-idem commented 8 years ago

@DylanPiercey Just doing some issue cleanup. Since this is just a parser you could definitely use it as part of a compiler that produce virtual DOM output. I'm closing this issue, but if you have any thoughts or questions please feel free to add them here or open another issue.