+ Update directive handler.

Author: LancerComet

README.md

@@ -78,21 +78,66 @@ Please read the section below.
 
 ### Passing Value
 
+#### Setup
+
 ```tsx
-// In setup.
-<button disabled={isDisabledRef.value}>Wow such a button</button>
+defineComponent({
+  setup () {
+    const isDisabledRef = ref(false)
+    return () => (
+      <button disabled={isDisabledRef.value}>Wow such a button</button>
+    )
+  }
+})
+```
+
+#### Render function
+
+```tsx
+Vue.extend({
+  data () {
+    return {
+      isDisabled: false
+    }
+  },
+  render () {
+    return (
+      <button disabled={this.isDisabled}>Very button</button>
+    )
+  }
+})
 
-// In render function.
-<button disabled={this.isDisable}>Very button</button>
 ```
 
 ### On
 
+#### Setup
+
+```tsx
+setup () {
+  const onClick = () => {}
+  return () => (
+    <button onClick={onClick}>Click me</button>
+  )
+}
+```
+
+#### Render function
+
 ```tsx
-<button onClick={onClick}>Click me</button>
-<MyComponent onTrigger={onTrigger} />
+Vue.extend({
+  methods: {
+    onClick () {}
+  },
+  render () {
+    return <button onClick={this.onClick}>Click me</button>
+  }
+})
+```
+
+#### Using "on" object to assign multiple events for once
 
-// Using "on" to assign multiple events for once.
+```tsx
 <div on={{
   click: onClick,
   focus: onFocus,
@@ -108,10 +153,16 @@ Please read the section below.
 
 Native is only available for Vue components.
 
-### Rendering HTML
+### Rendering HTML or text
 
 ```tsx
-<div innerHTML={'<h1>Title</h1>'}></div>
+// Setting HTML.
+<div v-html={htmlStrRef.value}></div>   // Using Vue directive.
+<div innerHTML='<h1>Title</h1>'></div>  // Using dom prop.
+
+// Setting text.
+<div v-text={this.displayText}></div>   // Using Vue directive.
+<div textContent={'Very Vue'}></div>    // Using dom prop.
 ```
 
 ### HTML / Component ref
@@ -226,6 +277,51 @@ Output:
 </div>
 ```
 
+### Built-in directives
+
+#### Setup
+
+```tsx
+defineComponent({
+  setup () {
+    const isDisplayRef = ref(false)
+    const textContentRef = ref('John Smith')
+    const htmlContentRef = ref('<h1>John Smith</h1>')
+
+    return () => (
+      <div>
+        <div v-show={isDisabledRef.value}>Page content</div>
+        <div v-text={textContentRef.value}></div>
+        <div v-html={htmlContentRef.value}></div>
+      </div>
+    )
+  }
+})
+```
+
+#### Render function
+
+```tsx
+Vue.extend({
+  data () {
+    return {
+      isDisplay: false,
+      textContent: 'John Smith',
+      htmlContent: '<h1>John Smith</h1>'
+    }
+  },
+  render () {
+    return (
+      <div>
+        <div v-show={this.isDisplay}>Page content</div>
+        <div v-text={this.textContent}></div>
+        <div v-html={this.htmlContent}></div>
+      </div>
+    )
+  }
+})
+```
+
 ### v-model
 
 It only supports using `v-model` on **HTML elements**, for now you cannot use v-model on Vue component. So please use `value` and `onUpdate` separately.
@@ -236,9 +332,9 @@ It only supports using `v-model` on **HTML elements**, for now you cannot use v-
 import ref from '@vue/composition-api'
 import Vue from 'vue'
 
-// In composition API
+// Setup.
 const Example = defineComponent({
-  setup (_, { refs }) {
+  setup () {
     const nameRef = ref('')
     return () => (
       <div>

lib/modules/directive.tsx lib/directives/index.tsxlib/modules/directive.tsx renamed to lib/directives/index.tsx

@@ -3,12 +3,24 @@ import type { Ref } from '@vue/composition-api'
 import { paramCase } from 'change-case'
 import { checkIsRefObj, isBoolean, isNumber, isString } from '../utils'
 import { getCurrentInstance } from '../runtime'
+import { dealWithVModel } from './v-model'
+import { TagType } from '../type'
+import { dealWithVText } from './v-text'
+import { dealWithVHTML } from './v-html'
 
-// v-xxx-xxx:a.b.c => {
-//   name: 'xxx-xxx',
-//   argument: 'a',
-//   modifiers: { a: true, b: true, c: true }
-// }
+const checkIsVModel = (key: string): key is 'v-model' | 'vModel' => /^v(-m|M)odel$/.test(key)
+const checkIsVText = (key: string): key is 'v-text' | 'vText' => /^v(-t|T)ext$/.test(key)
+const checkIsVHTML = (key: string): key is 'v-html' | 'vHtml' => /^v(-h|H)tml$/.test(key)
+
+/**
+ * v-show:a.b.c => {
+ *   name: 'show',
+ *   argument: 'a',
+ *   modifiers: { a: true, b: true, c: true }
+*  }
+ *
+ * @param key
+ */
 const getDirectiveInfo = (key: string) => {
   key = key.replace(/^v-?/, '') // xxx-xxx, xxxXxx:a.b.c
   const [name, args] = key.split(':') // ['xxx-xxx', 'a.b.c']
@@ -35,46 +47,42 @@ const getDirectiveInfo = (key: string) => {
   }
 }
 
-const getDirValue = (directiveRawValue: string | Ref<string>) => {
-  if (checkIsRefObj(directiveRawValue)) {
-    return directiveRawValue.value
-  }
-
-  if (isBoolean(directiveRawValue) || isNumber(directiveRawValue)) {
-    return directiveRawValue
-  }
-
-  const isVariableName = /^[a-zA-Z_$]([\d\w$]+)?$/.test(directiveRawValue)
-  if (isVariableName) {
-    const vm = getCurrentInstance()
-    return vm[directiveRawValue]
-  }
-
-  const floatValue = parseFloat(directiveRawValue)
-  if (!isNaN(floatValue)) {
-    return floatValue
-  }
-
-  // Array, function, object, null, undefined, ect.
-  return directiveRawValue
-}
-
 const dealWithDirective = (
+  tag: TagType,
   key: string, // v-xxx-xxx, vXxxXxx:a.b.c
   vNodeData: VNodeData,
   config: {
     children?: VNodeChildren
     [props: string]: any
-  } = {}
+  } = {},
+  isHTMLElement: boolean
 ) => {
   vNodeData.directives = vNodeData.directives || []
 
+  // v-model.
+  if (checkIsVModel(key)) {
+    dealWithVModel(tag, config[key], config, vNodeData, isHTMLElement)
+    return
+  }
+
+  // v-text.
+  if (checkIsVText(key)) {
+    dealWithVText(vNodeData, config[key])
+    return
+  }
+
+  // v-html.
+  if (checkIsVHTML(key)) {
+    dealWithVHTML(vNodeData, config[key])
+    return
+  }
+
   const directiveInfo = getDirectiveInfo(key)
   const directiveRawValue = config[key] as string | Ref<string>
 
   const directive: VNodeDirective = {
     name: directiveInfo.name,
-    value: getDirValue(directiveRawValue),
+    value: directiveRawValue,
     expression: isString(directiveRawValue) ? directiveRawValue : undefined,
     arg: directiveInfo.argument,
     modifiers: directiveInfo.modifiers

lib/directives/v-html.ts

@@ -0,0 +1,12 @@
+import { VNodeData } from 'vue'
+
+const dealWithVHTML = (
+  vNodeData: VNodeData,
+  bindingValue: unknown
+) => {
+  vNodeData.domProps.innerHTML = bindingValue
+}
+
+export {
+  dealWithVHTML
+}

lib/modules/v-model.ts lib/directives/v-model.tslib/modules/v-model.ts renamed to lib/directives/v-model.ts

@@ -14,12 +14,11 @@ type vModelBinding = string |
 
 const dealWithVModel = (
   tag: TagType,
-  key: 'v-model' | 'vModel',
+  bindingExpression: vModelBinding,
   config: ConfigType,
   vNodeData: VNodeData,
   isHTMLElement: boolean
 ) => {
-  const bindingExpression = config[key] as vModelBinding
   let bindingTarget: string | Ref<unknown>
   // let argument: string | undefined
   let modifiers: string[] = []

lib/directives/v-text.ts

@@ -0,0 +1,12 @@
+import { VNodeData } from 'vue'
+
+const dealWithVText = (
+  vNodeData: VNodeData,
+  bindingValue: unknown
+) => {
+  vNodeData.domProps.textContent = bindingValue
+}
+
+export {
+  dealWithVText
+}

lib/jsx.ts

@@ -12,14 +12,12 @@ import {
   checkKeyIsScopedSlots,
   checkKeyIsSlot,
   checkKeyIsStyle,
-  checkKeyIsVModel,
   isArray,
   isUndefined,
   removeNativeOn,
   removeOn, checkKeyIsRef
 } from './utils'
-import { dealWithVModel } from './modules/v-model'
-import { dealWithDirective } from './modules/directive'
+import { dealWithDirective } from './directives'
 import { ConfigType, TagType } from './type'
 import { getCurrentInstance } from './runtime'
 
@@ -105,21 +103,15 @@ const jsx = function (
       continue
     }
 
-    // v-model, vModel.
-    if (checkKeyIsVModel(key)) {
-      dealWithVModel(tag, key, config, vNodeData, isHTMLElement)
-      continue
-    }
-
     // ref.
     if (checkKeyIsRef(key)) {
       vNodeData.ref = value
       continue
     }
 
-    // v-dir, vDir
+    // v-xxx, vXxx
     if (checkKeyIsVueDirective(key)) {
-      dealWithDirective(key, vNodeData, config)
+      dealWithDirective(tag, key, vNodeData, config, isHTMLElement)
       continue
     }
 
@@ -139,15 +131,17 @@ const jsx = function (
     }
   }
 
+  const children = isArray(config.children) ? config.children : [config.children]
+
   // Check if it is JSXS function.
   const isJsxsFunc = typeof tag === 'function' && isUndefined((tag as any).cid)
   if (isJsxsFunc) {
     return h({
       render: tag as any
-    })
+    }, vNodeData, children)
   }
 
-  return h(tag, vNodeData, isArray(config.children) ? config.children : [config.children])
+  return h(tag, vNodeData, children)
 }
 
 export {

lib/utils.ts

@@ -44,7 +44,6 @@ const checkKeyIsSlot = (key: string) => key === 'slot'
 const checkKeyIsScopedSlots = (key: string) => key === 'scopedSlots'
 const checkKeyIsKey = (key: string) => key === 'key'
 const checkKeyIsNativeOn = (key: string) => NATIVE_ON_REGEXP.test(key)
-const checkKeyIsVModel = (key: string): key is 'v-model' | 'vModel' => /^v(-m|M)odel$/.test(key)
 const checkKeyIsVueDirective = (key: string) => /^v(-|[A-Z])/.test(key)
 const checkKeyIsRef = (key: string) => key === 'ref'
 const checkIsInputOrTextarea = (target: unknown): target is 'input' | 'textarea' => target === 'input' || target === 'textarea'
@@ -87,7 +86,6 @@ export {
   checkKeyIsRef,
   checkIsRefObj,
 
-  checkKeyIsVModel,
   checkKeyIsVueDirective,
   checkIsInputOrTextarea,