Giter Club home page Giter Club logo

html2template-hs's Introduction

html2template-hs

converted html into the handlebars like template hyperscript and virtual-hyperscript !

This is still during the experiment therefore Possibility of change without notice

demo

var html2ths = require('html2template-hs');
var h = require('hyperscript');
var obj = {
  greeting: "hello!"
};

var hscript = html2ths.compile(
  '<span>{{greeting}}</span>',
  h);
  console.log(hscript(obj).outerHTML);
   // <span>hello!</span>

docs

simple specification

(i will omit the "require" of api)

api

registe helper

var obj = {
  greeting: {
    morning: 'good morning',
    noon: 'hello',
    evening: 'good evening',
    night: 'good night'
  }
};

html2ths.registerHelper("with", function (object, html) {
  return html(object);
});

var hscript = html2ths.compile(
  '<div>' +
    '{{#with greeting}}' +
      '<span>{{this.morning}}</span>' +
      '<span>{{this.noon}}</span>' +
      '<span>{{this.evening}}</span>' +
      '<span>{{this.night}}</span>' +
    '{{/with}}' +
  '</div>',
  h);
  console.log(hscript(obj).outerHTML);
  // <div>
  //   <span>good morning</span>
  //   <span>hello</span>
  //   <span>good evening</span>
  //   <span>good night</span>
  // </div>

another sample

var obj = {
  items: 3
};

html2ths.registerHelper("for", function (number, html) {
  var results = [];
  for (var i = 0; i < number; i++) {
    results.push(html(i));
  }
  return results;
});

var hscript = html2ths.compile(
  '<div>' +
    '{{#for number}}' +
      '<span>{{this}}</span>' +
    '{{/for}}' +
  '</div>',
  h);
  console.log(hscript(obj).outerHTML);
  // <div>
  //   <span>0</span>
  //   <span>1</span>
  //   <span>2</span>
  // </div>

jsdoc

/**
 * @param {String} html
 * @param {Function} h hyperscript
 * @return {Function} template 
*/
html2ths.compile(html, h)

/**
 * @param {String} html
 * @return {String} template 
*/
html2ths.convert(html)

/**
 * @param {String} name
 * @param {Function} helper
*/
html2ths.registerHelper(name, helper)

/**
 * @param {String} name
*/
html2ths.unregisterHelper(name)

virtual-hyperscript

var html2tvd = require('html2template-hs/virtual-dom');

api

/**
 * @param {Array} notAttributes sample > ['ev-', 'hook']
*/
html2vd.setNotAttributes(notAttributes)

thanks

handlebars MIT

Copyright (C) 2011-2015 by Yehuda Katz

html2template-hs's People

Contributors

rail-rain avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.