new htm

Author: egoist

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -2,15 +2,27 @@
 
 [![NPM version](https://img.shields.io/npm/v/vue-html.svg?style=flat-square)](https://npmjs.com/package/vue-html) [![NPM downloads](https://img.shields.io/npm/dm/vue-html.svg?style=flat-square)](https://npmjs.com/package/vue-html) [![Build Status](https://img.shields.io/circleci/project/egoist/vue-html/master.svg?style=flat-square)](https://circleci.com/gh/egoist/vue-html)
 
-> Use tagged template string in Vue.js
+> Use tagged template string in Vue.js render function
+
+## Why is this useful?
+
+If you want to use Vue without a bundler / transpiler, this library will (reasonably) make your app smaller:
+
+- Vue (runtime + template compiler): 32kB gzipped
+- Vue (runtime + vue-html): 23kB gzipped
+
+__What's the downside?__ No handy sugars like `v-model` support.
 
 ## Install
 
 ```bash
 $ npm install --save vue-html
 ```
 
-CDN version: https://unpkg.com/vue-html/dist/
+CDN versions: 
+
+- `UMD`: https://unpkg.com/vue-html/dist/html.js (exposed as `window.HTML`)
+- `ESM`: https://unpkg.com/vue-html/dist/html.es.js
 
 ## Usage
 
@@ -20,57 +32,48 @@ import HTML from 'vue-html'
 
 Vue.use(HTML)
 
+const Todos = {
+  props: ['todos'],
+  render(html) {
+    return html`
+    <ul>
+    ${this.todos.map((todo, index) => {
+      return html`<li key=${index}>${todo}</li>`
+    })}
+    </ul>
+    `
+  }
+}
+
 new Vue({
   el: '#app',
   data: {
-    count: 0
+    todos: [
+      'Conquer the world',
+      'Rewrite Peco'
+    ],
+    todo: ''
   },
   methods: {
-    handleClick() {
-      this.count++
+    add() {
+      this.todos.push(this.todo)
+      this.todo = ''
     }
   },
-  render() {
-    return this.$html`
-      <button onClick=${this.handleClick}>${this.count}</button>
-    `
-  }
-})
-```
-
-The syntax is exactly the same as Vue JSX despiting that we're using [tagged template string](https://github.com/substack/hyperx) here.
-
-### Component
-
-You still have to use the original `h` function:
-
-```js
-new Vue({
-  el: '#app',
-  render(h) {
-    return this.$html`
-      ${h(Counter, {props: {start: 0}})}
+  render(html) {
+    return html`
+    <div>
+      <input value=${this.todo} onInput=${e => this.todo = e.target.value} />
+      <button type="button" onClick=${this.add}>Add</button>
+      <hr />
+      <${Todos} todos=${this.todos} />
+    </div>
     `
   }
 })
-
-const Counter = {}
 ```
 
-### Mixed with `h`
-
-`this.$html` returns a vNode, it does the same thing that `h` function does, so you can use it with `h` function.
-
-```js
-new Vue({
-  el: '#app',
-  render(h) {
-    return h('div', null, [
-      this.$html`<span>foo</span>`
-    ])
-  }
-})
-```
+The usage is very similar to Vue JSX except for that the `html` function is powered by [HTM (Hyperscript Tagged Markup)](https://github.com/developit/htm).
 
 ## Contributing
 

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['poi/babel', 'power-assert']
+}

circle.yml

@@ -1,15 +1,24 @@
-machine:
-  node:
-      version: 7
-  environment:
-    PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
-
-dependencies:
-  override:
-    - yarn
-  cache_directories:
-    - ~/.cache/yarn
-
-test:
-  override:
-    - yarn test
+version: 2
+jobs:
+  build:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/node:latest-browsers
+    branches:
+      ignore:
+        - gh-pages # list of branches to ignore
+        - /release\/.*/ # or ignore regexes
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: install dependences
+          command: yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: test
+          command: yarn test

example.js

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import HTML from 'vue-html' // eslint-disable-line import/no-unresolved
+
+Vue.use(HTML)
+
+const Todos = {
+  props: ['todos'],
+  render(html) {
+    return html`
+      <ul>
+        ${
+          this.todos.map((todo, index) => {
+            return html`
+              <li key=${index}>${todo}</li>
+            `
+          })
+        }
+      </ul>
+    `
+  }
+}
+
+new Vue({
+  el: '#app',
+  data: {
+    todos: ['Conquer the world', 'Rewrite Peco'],
+    todo: ''
+  },
+  methods: {
+    add() {
+      this.todos.push(this.todo)
+      this.todo = ''
+    }
+  },
+  render(html) {
+    return html`
+      <div>
+        <input
+          value=${this.todo}
+          onInput=${
+            e => {
+              this.todo = e.target.value
+            }
+          }
+        />
+        <button type="button" onClick=${this.add}>Add</button>
+        <hr />
+        <${Todos} todos=${this.todos} />
+      </div>
+    `
+  }
+})

example/index.js

@@ -0,0 +1,11 @@
+const path = require('path')
+
+exports.entry = 'example/index'
+
+exports.configureWebpack = {
+  resolve: {
+    alias: {
+      'vue-html$': path.join(__dirname, '../src')
+    }
+  }
+}

example/poi.config.js

@@ -1,53 +1,54 @@
 {
   "name": "vue-html",
   "version": "0.3.0",
-  "description": "Use tagged template string in Vue.js",
+  "description": "Use tagged template string in Vue.js render function",
   "license": "MIT",
   "repository": "egoist/vue-html",
   "author": {
     "name": "EGOIST",
     "email": "0x142857@gmail.com",
-    "url": "github.com/egoist"
+    "url": "http://github.com/egoist"
   },
   "scripts": {
-    "test": "jest && xo test/*.js src/*.js && npm run build",
-    "build": "bili --format umd --format cjs --compress",
-    "example": "vue build example.js"
+    "test": "npm run lint && npm run test:unit",
+    "test:unit": "poi puppet --test --plugin @poi/puppet --framework mocha",
+    "lint": "xo",
+    "build": "bili --format umd,cjs,es,es-min,umd-min --js buble --module-name HTML --inline --name html",
+    "example": "poi -so --config example/poi.config.js"
   },
   "files": [
     "dist"
   ],
   "xo": {
-    "space": 2,
-    "semicolon": false,
-    "esnext": true,
+    "extends": ["rem", "plugin:prettier/recommended"],
     "envs": [
-      "jest",
-      "browser"
-    ]
+      "browser",
+      "mocha"
+    ],
+    "rules": {
+      "unicorn/filename-case": "off",
+      "no-new": "off"
+    }
   },
-  "main": "dist/vue-html.common.js",
+  "main": "dist/html.js",
+  "module": "dist/html.es.js",
   "keywords": [
     "vue",
-    "hyperx"
+    "htm",
+    "html"
   ],
   "devDependencies": {
-    "babel-preset-es2015": "^6.22.0",
-    "bili": "^0.14.0",
-    "jest-cli": "^15.1.1",
-    "vue": "latest",
-    "xo": "^0.17.1"
-  },
-  "dependencies": {
-    "hyperx": "^2.0.5"
-  },
-  "babel": {
-    "env": {
-      "test": {
-        "presets": [
-          "es2015"
-        ]
-      }
-    }
+    "@poi/plugin-puppet": "^0.1.3",
+    "babel-preset-power-assert": "^3.0.0",
+    "bili": "^3.4.2",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-config-rem": "^4.0.0",
+    "eslint-plugin-prettier": "^3.0.0",
+    "htm": "^2.0.0",
+    "poi": "^12.2.4",
+    "power-assert": "^1.6.1",
+    "prettier": "^1.15.3",
+    "vue": "^2.5.21",
+    "xo": "^0.23.0"
   }
 }