Skip to content

A tool that helps you create TypeScript modules from plain HTML!

License

Notifications You must be signed in to change notification settings

staticfunction/domer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#DOMER

See how Domer output code performs here

A tool that helps you create TypeScript modules from plain HTML!

Build Status Coverage Status

##Install

npm install domer -g

##Getting Started

  1. Go to the directory where you put your HTML files.
  2. Run domer
domer -s **/*.html
  1. 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

About

A tool that helps you create TypeScript modules from plain HTML!

Resources

License

Stars

Watchers

Forks

Packages

No packages published