docs: update docs and demo for Value usage, fixes #568

demo/nodejs/index.js

@@ -1,4 +1,4 @@
-const { Liquid } = require('liquidjs')
+const { Liquid, Tag, Value } = require('liquidjs')
 
 const engine = new Liquid({
   extname: '.liquid',
@@ -11,13 +11,13 @@ const engine = new Liquid({
   partials: './partials'
 })
 
-engine.registerTag('header', {
-  parse: function (token) {
-    const [key, val] = token.args.split(':')
-    this[key] = val
-  },
-  render: async function (scope, emitter) {
-    const title = await this.liquid.evalValue(this.content, scope)
+engine.registerTag('header', class HeaderTag extends Tag {
+  constructor (token, remainTokens, liquid) {
+    super(token, remainTokens, liquid)
+    this.value = new Value(token.args, liquid)
+  }
+  * render (ctx, emitter) {
+    const title = yield this.value.value(ctx)
     emitter.write(`<h1>${title}</h1>`)
   }
 })

demo/nodejs/todolist.liquid

@@ -1,5 +1,5 @@
 {% layout 'html.liquid' %}
-{%header content: title | capitalize%}
+{%header title | capitalize%}
 <ul>
   {% for todo in todos %}
     {% render 'todo.liquid' with todo, index: forloop.index%}

demo/typescript/index.ts

@@ -1,24 +1,25 @@
-import { Liquid, TagToken, Context, Emitter } from 'liquidjs'
+import { Value, Liquid, TagToken, Context, Emitter, Tag, TopLevelToken } from 'liquidjs'
 
 const engine = new Liquid({
   root: __dirname,
   extname: '.liquid'
 })
 
-engine.registerTag('header', {
-  parse: function (token: TagToken) {
-    const [key, val] = token.args.split(':')
-    this[key] = val
-  },
-  render: async function (context: Context, emitter: Emitter) {
-    const title = await this.liquid.evalValue(this['content'], context)
+engine.registerTag('header', class HeaderTag extends Tag {
+  private value: Value
+  constructor (token: TagToken, remainTokens: TopLevelToken[], liquid: Liquid) {
+    super(token, remainTokens, liquid)
+    this.value = new Value(token.args, liquid)
+  }
+  * render (ctx: Context, emitter: Emitter) {
+    const title = yield this.value.value(ctx)
     emitter.write(`<h1>${title}</h1>`)
   }
 })
 
-const ctx = {
+const scope = {
   todos: ['fork and clone', 'make it better', 'make a pull request'],
   title: 'Welcome to liquidjs!'
 }
 
-engine.renderFile('todolist', ctx).then(console.log)
+engine.renderFile('todolist', scope).then(console.log)

demo/typescript/todolist.liquid

@@ -1,4 +1,4 @@
-{%header content: title | capitalize%}
+{%header title | capitalize%}
 
 <ul>
   {% for todo in todos %}

demo/typescript/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
-      "types": [
-        "node"
-      ]
+    "target": "es6",
+    "moduleResolution": "node",
+    "types": [
+      "node"
+    ]
   }
 }