improve v-effect + expose $nextTick in expressions

- v-effect support arbitrary statements including `if` conditions
- v-effect now fire after DOM updates

Author: yyx990803

examples/todomvc.html

@@ -9,7 +9,7 @@
 </style>
 
 <script type="module">
-  import { createApp, reactive } from '../src'
+  import { createApp } from '../src'
 
   const STORAGE_KEY = 'todos-petite-vue'
   const todoStorage = {
@@ -42,7 +42,7 @@
     }
   }
 
-  const state = reactive({
+  createApp({
     todos: todoStorage.fetch(),
     newTodo: '',
     editedTodo: null,
@@ -129,15 +129,7 @@
     pluralize(n) {
       return n === 1 ? 'item' : 'items'
     }
-  })
-
-  createApp(state)
-    .directive('todo-focus', ({ el, get, effect }) => {
-      effect(() => {
-        if (get()) el.focus()
-      })
-    })
-    .mount('#app')
+  }).mount('#app')
 </script>
 
 <div id="app" @mounted="setupRouting" v-effect="save()" v-cloak>
@@ -177,7 +169,7 @@ <h1>todos</h1>
             class="edit"
             type="text"
             v-model="todo.title"
-            v-todo-focus="todo === editedTodo"
+            v-effect="if (todo === editedTodo) $el.focus()"
             @blur="doneEdit(todo)"
             @keyup.enter="doneEdit(todo)"
             @keyup.escape="cancelEdit(todo)"

src/app.ts

@@ -3,6 +3,7 @@ import { Block } from './block'
 import { Directive } from './directives'
 import { createContext } from './walk'
 import { toDisplayString } from './directives/text'
+import { nextTick } from './scheduler'
 
 export const createApp = (initialData?: any) => {
   // root context
@@ -13,6 +14,7 @@ export const createApp = (initialData?: any) => {
 
   // global internal helpers
   ctx.scope.$s = toDisplayString
+  ctx.scope.$nextTick = nextTick
 
   let rootBlocks: Block[]
 

src/directives/effect.ts

@@ -1,5 +1,7 @@
 import { Directive } from '.'
+import { execute } from '../eval'
+import { nextTick } from '../scheduler'
 
-export const effect: Directive = ({ get, effect }) => {
-  effect(get)
+export const effect: Directive = ({ el, ctx, exp, effect }) => {
+  nextTick(() => effect(() => execute(ctx.scope, exp, el)))
 }

src/eval.ts

@@ -1,6 +1,9 @@
 const evalCache: Record<string, Function> = Object.create(null)
 
-export const evaluate = (scope: any, exp: string, el?: Node) => {
+export const evaluate = (scope: any, exp: string, el?: Node) =>
+  execute(scope, `return(${exp})`, el)
+
+export const execute = (scope: any, exp: string, el?: Node) => {
   const fn = evalCache[exp] || (evalCache[exp] = toFunction(exp))
   try {
     return fn(scope, el)
@@ -14,7 +17,7 @@ export const evaluate = (scope: any, exp: string, el?: Node) => {
 
 const toFunction = (exp: string): Function => {
   try {
-    return new Function(`$data`, `$el`, `with ($data) { return (${exp}) }`)
+    return new Function(`$data`, `$el`, `with($data){${exp}}`)
   } catch (e) {
     console.error(`${e.message} in expression: ${exp}`)
     return () => {}

src/walk.ts

@@ -183,7 +183,15 @@ const applyDirective = (
   modifiers?: Record<string, true>
 ) => {
   const get = (e = exp) => evaluate(ctx.scope, e, el)
-  const cleanup = dir({ el, get, effect: ctx.effect, ctx, exp, arg, modifiers })
+  const cleanup = dir({
+    el,
+    get,
+    effect: ctx.effect,
+    ctx,
+    exp,
+    arg,
+    modifiers
+  })
   if (cleanup) {
     ctx.cleanups.push(cleanup)
   }