refactor: move context into its own file

Author: yyx990803

src/app.ts

@@ -1,7 +1,7 @@
 import { reactive } from '@vue/reactivity'
 import { Block } from './block'
 import { Directive } from './directives'
-import { createContext } from './walk'
+import { createContext } from './context'
 import { toDisplayString } from './directives/text'
 import { nextTick } from './scheduler'
 

src/block.ts

@@ -1,4 +1,5 @@
-import { Context, createContext, walk } from './walk'
+import { Context, createContext } from './context'
+import { walk } from './walk'
 import { remove } from '@vue/shared'
 import { stop } from '@vue/reactivity'
 

src/context.ts

@@ -0,0 +1,61 @@
+import { effect as rawEffect, reactive, ReactiveEffect } from '@vue/reactivity'
+import { Block } from './block'
+import { Directive } from './directives'
+import { queueJob } from './scheduler'
+import { inOnce } from './walk'
+
+export interface Context {
+  key?: any
+  scope: Record<string, any>
+  dirs: Record<string, Directive>
+  blocks: Block[]
+  effect: typeof rawEffect
+  effects: ReactiveEffect[]
+  cleanups: (() => void)[]
+}
+
+export const createContext = (parent?: Context): Context => {
+  const ctx: Context = {
+    ...parent,
+    scope: parent ? parent.scope : reactive({}),
+    dirs: parent ? parent.dirs : {},
+    effects: [],
+    blocks: [],
+    cleanups: [],
+    effect: (fn) => {
+      if (inOnce) {
+        queueJob(fn)
+        return fn as any
+      }
+      const e: ReactiveEffect = rawEffect(fn, {
+        scheduler: () => queueJob(e)
+      })
+      ctx.effects.push(e)
+      return e
+    }
+  }
+  return ctx
+}
+
+export const createScopedContext = (ctx: Context, data = {}): Context => {
+  const parentScope = ctx.scope
+  const mergedScope = Object.create(parentScope)
+  Object.defineProperties(mergedScope, Object.getOwnPropertyDescriptors(data))
+  mergedScope.$refs = Object.create(parentScope.$refs)
+  const reactiveProxy = reactive(
+    new Proxy(mergedScope, {
+      set(target, key, val, receiver) {
+        // when setting a property that doesn't exist on current scope,
+        // do not create it on the current scope and fallback to parent scope.
+        if (receiver === reactiveProxy && !target.hasOwnProperty(key)) {
+          return Reflect.set(parentScope, key, val)
+        }
+        return Reflect.set(target, key, val, receiver)
+      }
+    })
+  )
+  return {
+    ...ctx,
+    scope: reactiveProxy
+  }
+}

src/directives/for.ts

@@ -1,8 +1,7 @@
 import { isArray, isObject } from '@vue/shared'
 import { Block } from '../block'
 import { evaluate } from '../eval'
-import { Context } from '../walk'
-import { createScopedContext } from './scope'
+import { Context, createScopedContext } from '../context'
 
 const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/

src/directives/scope.ts

@@ -2,53 +2,18 @@ import { builtInDirectives, Directive } from './directives'
 import { _if } from './directives/if'
 import { _for } from './directives/for'
 import { bind } from './directives/bind'
-import { createScopedContext } from './directives/scope'
 import { on } from './directives/on'
 import { text } from './directives/text'
 import { evaluate } from './eval'
-import { effect as rawEffect, reactive, ReactiveEffect } from '@vue/reactivity'
-import { Block } from './block'
-import { queueJob } from './scheduler'
 import { checkAttr } from './utils'
 import { ref } from './directives/ref'
-
-export interface Context {
-  key?: any
-  scope: Record<string, any>
-  dirs: Record<string, Directive>
-  blocks: Block[]
-  effect: typeof rawEffect
-  effects: ReactiveEffect[]
-  cleanups: (() => void)[]
-}
-
-export const createContext = (parent?: Context): Context => {
-  const ctx: Context = {
-    ...parent,
-    scope: parent ? parent.scope : reactive({}),
-    dirs: parent ? parent.dirs : {},
-    effects: [],
-    blocks: [],
-    cleanups: [],
-    effect: (fn) => {
-      if (inOnce) {
-        queueJob(fn)
-        return fn as any
-      }
-      const e: ReactiveEffect = rawEffect(fn, {
-        scheduler: () => queueJob(e)
-      })
-      ctx.effects.push(e)
-      return e
-    }
-  }
-  return ctx
-}
+import { Context, createScopedContext } from './context'
 
 const dirRE = /^(?:v-|:|@)/
 const modifierRE = /\.([\w-]+)/g
 const interpolationRE = /\{\{([^]+?)\}\}/g
-let inOnce = false
+
+export let inOnce = false
 
 export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
   const type = node.nodeType