@lernetz/gulp-typescript-template

    0.1.5 • Public • Published

    HTML Templates to Typescript

    This Gulp plugin converts HTML files with template definitions into TypeScript modules.

    With the preprocessing step, plain HTML templates can be used in TypeScript as regular imports. It reads files with the following structure:

    <template name="app.dashboard">
      <div class="app-dashboard">
        <h1>My Dashboard</h1>
        <p>[[ number ]] new messages</p>
      </div>
    </template>
    <template name="ui.tooltip">
      <div class="tooltip">
        My Tooltip
      </div>
    </template>

    And outputs the templates with their names into namespaced TypeScript modules:

    // app.ts
    export const dashboard = '<div class="app-dashboard"><h1>My Dashboard</h1><p>[[ number ]] new messages</p></div>';
    // ui.ts
    export const tooltip = '<div class="tooltip">My Tooltip</div>';

    Now the templates can be imported as regular strings:

    import { dashboard } from './templates/app';
    import { tooltip } from './templates/ui';

    Usage

    An example usage with Gulp:

    var gulp     = require('gulp');
    var template = require('@lernetz/gulp-typescript-template');
    
    gulp.task('template', function() {
        return gulp.src( 'src/**.html' )
                   .pipe( template() )
                   .pipe( gulp.dest( 'src/templates' ) );
    });

    Install

    npm i @lernetz/gulp-typescript-template

    DownloadsWeekly Downloads

    7

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    5.61 kB

    Total Files

    4

    Last publish

    Collaborators

    • lernetz-mich
    • stakx