feat: custom delimiters

Author: yyx990803

index.html

@@ -24,6 +24,7 @@ <h2>Tests</h2>
   <li><a href="/tests/pre.html">v-pre</a></li>
   <li><a href="/tests/reactive.html">reactive</a></li>
   <li><a href="/tests/multi-mount.html">Multi mount</a></li>
+  <li><a href="/tests/custom-delimiters.html">Custom delimiters</a></li>
 </ul>
 
 <style>

src/app.ts

@@ -5,11 +5,23 @@ import { createContext } from './context'
 import { toDisplayString } from './directives/text'
 import { nextTick } from './scheduler'
 
+const escapeRegex = (str: string) =>
+  str.replace(/[-.*+?^${}()|[\]\/\\]/g, '\\$&')
+
 export const createApp = (initialData?: any) => {
   // root context
   const ctx = createContext()
   if (initialData) {
     ctx.scope = reactive(initialData)
+
+    // handle custom delimiters
+    if (initialData.$delimiters) {
+      const [open, close] = (ctx.delimiters = initialData.$delimiters)
+      ctx.delimitersRE = new RegExp(
+        escapeRegex(open) + '([^]+?)' + escapeRegex(close),
+        'g'
+      )
+    }
   }
 
   // global internal helpers

src/context.ts

@@ -1,17 +1,22 @@
-import { effect as rawEffect, reactive, ReactiveEffect } from '@vue/reactivity'
+import {
+  effect as rawEffect,
+  reactive,
+  ReactiveEffectRunner
+} 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[]
+  effects: ReactiveEffectRunner[]
   cleanups: (() => void)[]
+  delimiters: [string, string]
+  delimitersRE: RegExp
 }
 
 export const createContext = (parent?: Context): Context => {
@@ -22,12 +27,14 @@ export const createContext = (parent?: Context): Context => {
     effects: [],
     blocks: [],
     cleanups: [],
+    delimiters: ['{{', '}}'],
+    delimitersRE: /\{\{([^]+?)\}\}/g,
     effect: (fn) => {
       if (inOnce) {
         queueJob(fn)
         return fn as any
       }
-      const e: ReactiveEffect = rawEffect(fn, {
+      const e: ReactiveEffectRunner = rawEffect(fn, {
         scheduler: () => queueJob(e)
       })
       ctx.effects.push(e)

src/walk.ts

@@ -11,7 +11,6 @@ import { Context, createScopedContext } from './context'
 
 const dirRE = /^(?:v-|:|@)/
 const modifierRE = /\.([\w-]+)/g
-const interpolationRE = /\{\{([^]+?)\}\}/g
 
 export let inOnce = false
 
@@ -82,11 +81,11 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
   } else if (type === 3) {
     // Text
     const data = (node as Text).data
-    if (data.includes('{{')) {
+    if (data.includes(ctx.delimiters[0])) {
       let segments: string[] = []
       let lastIndex = 0
       let match
-      while ((match = interpolationRE.exec(data))) {
+      while ((match = ctx.delimitersRE.exec(data))) {
         const leading = data.slice(lastIndex, match.index)
         if (leading) segments.push(JSON.stringify(leading))
         segments.push(`$s(${match[1]})`)

tests/custom-delimiters.html

@@ -0,0 +1,11 @@
+<script type="module">
+  import { createApp } from '../src'
+  createApp({
+    $delimiters: ['${', '}']
+  }).mount()
+</script>
+
+<div v-scope="{ count: 1 }">
+  <p>count is ${ count }!</p>
+  <button @click="count++">increase</button>
+</div>