Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
src
 
 
 
 
 
 

Hutimility

A source code transformation tool that translates "html literals" into real JS.

In a nutshell; this project uses ZeParser 2 (with html literal support) to parse input source code. It then goes through the results of the parser and translates all html tags to the actual JS code that would generate the intended html (using DOM api's).

This project requires my ZeParser 2 project on the html branch (!).

Example

...
document.body.appendChild(
  <div @container style="border: 1px solid red; margin: 5px;">
    <p>Please fill out this form:</p>
    <p><label>Name: <input @name style="width:100px;" /></label></p>
    <p><label>Title: <input @title style="width:100px;" /></label></p>
  </div>
);
this.container = container;
name.onkeyup = function(){ this.name = name.value; };
title.onkeyup = function(){ this.name = name.value; };
...

If you would give the above to translate, this would be the result:

document.body.appendChild(
  (function(){
	var dom = document.createElement('div');
	dom.setAttribute('style', 'border: 1px solid red; margin: 5px;');
	dom.appendChild(document.createTextNode('\n    '));
	dom.appendChild((function(){
		var dom = document.createElement('p');
		dom.appendChild(document.createTextNode('Please fill out this form:'));
		return dom;
	})());
	dom.appendChild(document.createTextNode('\n    '));
	dom.appendChild((function(){
		var dom = document.createElement('p');
		dom.appendChild((function(){
			var dom = document.createElement('label');
			dom.appendChild(document.createTextNode('Name: '));
			dom.appendChild((function(){
				var dom = document.createElement('input');
				dom.setAttribute('style', 'width:100px;');
				return dom;
			})());
			return dom;
		})());
		return dom;
	})());
	dom.appendChild(document.createTextNode('\n    '));
	dom.appendChild((function(){
		var dom = document.createElement('p');
		dom.appendChild((function(){
			var dom = document.createElement('label');
			dom.appendChild(document.createTextNode('Title: '));
			dom.appendChild((function(){
				var dom = document.createElement('input');
				dom.setAttribute('style', 'width:100px;');
				return dom;
			})());
			return dom;
		})());
		return dom;
	})());
	dom.appendChild(document.createTextNode('\n  '));
	return dom;
})()
);
this.container = container;
name.onkeyup = function(){ this.name = name.value; };
title.onkeyup = function(){ this.name = name.value; };

Which, as you can see, is fairly clean code, though very, very verbose.

Because of the multiple calls to setAttribute and/or appendChild, the code has to be wrapped in an anonymous function to prevent scope polution for the temporary variables (it's not like it would be cleaner otherwise...).

Note that the @name assignment syntax is not yet working. It's actually not that trivial to properly rewrite code for that one.

So yeah. Good luck :)

Name

My working dirname was htmllit, but every time I saw it I kind of read "humility". And then I wanted to be witty, so that's why I went for HuTiMiLityy... ;)

todos

  • Make the @name variable assignment work.
  • Generate sourcemap
  • Add more integration tests

About

Source code rewriter for custom HTML literal syntax in JS, using a custom version of ZeParser2

Resources

Releases

No releases published

Packages

No packages published