# weex-templater

> Weex transformer

Latest version **0.3.5** (published 2017-02-07) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install weex-templater
pnpm add weex-templater
yarn add weex-templater
bun add weex-templater
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2017-02-07 |
| First published | 2016-04-08 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | songsiqi |
| Maintainers | songsiqi |
| Keywords | weex |

## Links

- npm: https://www.npmjs.com/package/weex-templater
- Repository: https://github.com/weexteam/weex-templater
- Homepage: https://github.com/weexteam/weex-templater#readme
- Issues: https://github.com/weexteam/weex-templater/issues
- npm.io page: https://npm.io/package/weex-templater

## Dependencies (2)

- [parse5](https://npm.io/package/parse5.md) ~2.1.0
- [weex-styler](https://npm.io/package/weex-styler.md) ~0.1.0

## Recent versions

- 0.3.5 (latest) — 2017-02-07
- 0.3.4 — 2017-01-10
- 0.3.3 — 2017-01-09
- 0.3.2 — 2016-12-16
- 0.3.1 — 2016-12-16
- 0.3.0 — 2016-06-03
- 0.2.3 — 2016-05-27
- 0.2.2 — 2016-04-29
- 0.2.1 — 2016-04-26
- 0.2.0 — 2016-04-22
- 0.1.6 — 2016-04-19
- 0.1.5 — 2016-04-19
- 0.1.4 — 2016-04-12
- 0.1.3 — 2016-04-08

## README

# Weex `<template>` Transformer

[![NPM version][npm-image]][npm-url]
[![Build status][circle-image]][circle-url]
[![Downloads][downloads-image]][downloads-url]

[npm-image]: https://img.shields.io/npm/v/weex-templater.svg?style=flat-square
[npm-url]: https://npmjs.org/package/weex-templater
[circle-image]: https://circleci.com/gh/alibaba/weex_toolchain.svg?style=svg
[circle-url]: https://circleci.com/gh/alibaba/weex_toolchain/tree/master
[downloads-image]: https://img.shields.io/npm/dm/weex-templater.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/weex-templater

## 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)`

```javascript
/**
 * 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

```javascript
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}}'
      }
    }
  ]
}
```

---
_Source: https://npm.io/package/weex-templater · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._