README
DOMER
========
A tool that helps you create TypeScript modules from plain HTML!
Install
npm install domer -g
Getting Started
- Go to the directory where you put your HTML files.
- Run domer
domer -s **/*.html
- You'll see generated Typescript files in the same directory with the same name as the HTML file!
From this:
.
├── Todo.html
└── users
└── UserProfile.html
To this:
.
├── Todo.html
├── Todo.ts
└── users
├── UserProfile.html
└── UserProfile.ts
From HTML:
<div>
<input type="checkbox" id="checkboxDisplay"/>
<label id="title" class="header, important"></label>
<data id="attachment"></data>
</div>
To Typescript:
class Todo {
rootNodes: HTMLElement[];
parent: HTMLElement;
checkboxDisplay: HTMLInputElement;
title: HTMLLabelElement;
attachment: any;
constructor() {
this.rootNodes = [];
var n0 = document.createElement('div');
this.checkboxDisplay = document.createElement('input');
this.checkboxDisplay.setAttribute('type', 'checkbox');
this.title = document.createElement('label');
this.title.setAttribute('class', 'header, important');
this.attachment = document.createElement('data');
var n4 = document.createElement('button');
this.rootNodes.push(n0);
n0.appendChild(this.checkboxDisplay);
n0.appendChild(this.title);
n0.appendChild(this.attachment);
n0.appendChild(n4);
}
appendTo(parent:HTMLElement): void {
this.remove();
this.parent = parent;
this.rootNodes.forEach((node:HTMLElement) => {
this.parent.appendChild(node);
});
}
remove(): void {
if(!this.parent)
return;
this.rootNodes.forEach((node:HTMLElement) => {
this.parent.removeChild(node);
});
this.parent = null;
}
}
export = Todo;
Then you can use this class and load it on runtime:
import Todo = require('./views/Todo');
var myTodo:Todo = new Todo();
myTodo.appendTo(todoList);
Specifying a source
Domer accepts globbing patterns.
To generate Typescript files for all your HTML files (including files in subdirectory)
domer -s views/**/*.html
You can even specify other file types as long as their content are in HTML.
domer -s views/**/*.partial
DOM ID treatment
strip
By default, domer will strip the ID from each HTML element. To avoid DOM ID conflicts, domer will not set the id on each HTML. By eliminating the DOM ID, you can have multiple instances of the element without conflicting with other elements' id but still be able to reference to it via class variable.
domer -s views/**/*.html -m strip
resolve
This mode will set the DOM ID on each HTML element but also auto resolves it every time it's instantiated.
domer -s views/**/*.html -m resolve
retain
This mode will set the DOM ID on each HTML element without modification. You also have to remember or ensure that the IDs that you set on each element will not conflict with other elements even if those elements reside on other partials.
domer -s views/**/*.html -m retain