weex-templater jscs circleci gulp npm

weex <template> transformer

Weex <template> Transformer

NPM version Build status Downloads

Features

  • convert a <template> element to JSON-like object
  • autofix common mistakes & friendly warnings
    • tag name
    • attr
    • text content
  • parse data binding and expressions
  • make sure only one root node

API

  • parse(code, done)
  • validate(json, done)
/**
 * Parse `<template>` code to a JSON-like Object and log errors & warnings
 * 
 * @param {string} code
 * @param {function} done
 */
function parse(code, done) {}

/**
 * Validate a JSON-like Object and log errors & warnings
 * 
 * @param {object} json
 * @param {function} done
 */
function validate(json, done) {}

/**
 * Result callback
 *
 * data
 * - jsonTemplate{type, attr, style, events, shown, repeat}
 * - deps[tagname]
 * - log[{line, column, reason}]
 * 
 * @param {Error} err
 * @param {object} data
 */
function done(err, data) {}

Validation

  • root check: only one root element (ignore others)
  • tagname check: native or hyphenated (autofix or warn non-hyphenated custom tagname)
  • child/parent check: elements required certain child/parent (error)
  • attr value check: special tag[attr] value (error or autofix or warn)
  • text content check: only text element allows text content (error)
  • data binding check:
    • normal value (exp converting)
    • event: non-mustache -> mustache (autofix)
    • style: k: {{v}}; ... (styler.validate needed)
    • class: a {{v}} c

Demo

var templater = require('weex-templater')

var code = '<template><container><text>Hello</text><img class="a {{x}} c" src="{{y}}" /><image style="opacity: {{z}}"></image></container></template>'

templater.parse(code, function (err, data) {
  // syntax error
  // format: {line, column, reason, ...}
  err
  // result
  // {
  //   type: 'container',
  //   children: [
  //     {
  //       type: 'text',
  //       value: 'Hello'
  //     },
  //     {
  //       type: 'img',
  //       class: function () {return ['a', this.x, 'c']},
  //       attr: {
  //         src: function () {return this.y}
  //       }
  //     },
  //     {
  //       type: 'img',
  //       style: {
  //         opacity: function () {return this.z}
  //       }
  //     }
  //   ]
  // }
  data.jsonTemplate
  // ['container', 'text', 'img']
  data.deps[]
  // format: {line, column, reason}
  // - Error: `image` tag should have a `src` attr
  // - NOTE: autofixed `image` tag name to `img`
  data.log[]
})

var json = {
  type: 'container',
  children: [
    {
      type: 'text',
      value: 'Hello'
    },
    {
      type: 'image',
      class: 'a {{x}} c',
      attr: {
        src: '{{y}}'
      }
    },
    {
      type: 'img',
      style: {
        opacity: '{{z}}'
      }
    }
  ]
}

styler.validate(json, function (err, data) {
  err
  data.jsonTemplate
  data.deps[]
  data.log[]
})

Related Repositories

weex-templater

weex-templater

weex <template> transformer ...


Top Contributors

songsiqi Hanks10100

Releases

-   v0.3.3 zip tar
-   v0.3.2 zip tar
-   v0.3.1 zip tar