+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 87.24% | +294/337 | +82.05% | +160/195 | +70.76% | +46/65 | +86.72% | +281/324 | +
| src/directives | +
+
+ |
+ 99.75% | +413/414 | +94.94% | +244/257 | +100% | +80/80 | +100% | +388/388 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 | + + + + + + +5x +2x + +5x + +119x +119x +108x +108x + + +108x +1x +1x + + + + + + + +119x +119x +119x + + + +119x + +5x +3x +3x + +2x + + + + +3x +3x + + + +110x +4x +4x +4x +1x + +1x + + + +109x + +110x +1x + +108x +6x + + +109x +104x + + +109x + + + + +2x + + + + +110x +109x + + + +4x + + + +8x + + + +28x + + + + | import { reactive } from '@vue/reactivity'
+import { Block } from './block'
+import { Directive } from './directives'
+import { bindContextMethods, 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)
+ bindContextMethods(ctx.scope)
+
+ // 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
+ ctx.scope.$s = toDisplayString
+ ctx.scope.$nextTick = nextTick
+ ctx.scope.$refs = Object.create(null)
+
+ let rootBlocks: Block[]
+
+ return {
+ directive(name: string, def?: Directive) {
+ if (def) {
+ ctx.dirs[name] = def
+ return this
+ } else {
+ return ctx.dirs[name]
+ }
+ },
+
+ use(plugin: any, options = {}) {
+ plugin.install(this, options)
+ return this
+ },
+
+ mount(el?: string | Element | null) {
+ if (typeof el === 'string') {
+ const selector = el
+ el = document.querySelector(el)
+ if (!el) {
+ import.meta.env.DEV &&
+ console.error(`selector ${selector} has no matching element.`)
+ return
+ }
+ }
+
+ el = el ?? document.documentElement
+ let roots: Element[]
+ if (el.hasAttribute('v-scope')) {
+ roots = [el]
+ } else {
+ roots = [...el.querySelectorAll(`[v-scope]`)].filter(
+ (root) => !root.matches(`[v-scope] [v-scope]`)
+ )
+ }
+ if (!roots.length) {
+ roots = [el]
+ }
+
+ if (
+ import.meta.env.DEV &&
+ roots.length === 1 &&
+ roots[0] === document.documentElement
+ ) {
+ console.warn(
+ `Mounting on documentElement - this is non-optimal as pocket-vue will be forced to crawl the entire page's DOM. Consider explicitly marking elements controlled by pocket-vue with \`v-scope\`.`
+ )
+ }
+
+ rootBlocks = roots.map((el) => new Block(el, ctx, true))
+ return this
+ },
+
+ unmount() {
+ rootBlocks.forEach((block) => block.teardown())
+ },
+
+ get rootBlocks() {
+ return rootBlocks
+ },
+
+ get scope() {
+ return ctx.scope
+ }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 | + + + + + + + + + + + + + + + +60x + + + +10197x + +10197x +112x +10085x +4x + + + +10081x + + +10197x +112x + + +10085x +10085x +10085x + + +10197x + + + +10088x +4x + +1x +1x +1x +3x +3x +2x + + +1x +3x + + +3x +3x +3x +3x +3x + + +10084x + + + + +12x +11x + +12x +1x +1x + +1x +3x +3x +3x +2x + + +11x + +12x + + + + + + + + +18x +1x +1x + + + + + + + + +18x +12x +12x + + + + + + + + +18x +3x +3x + + + + + + + + +18x +18x +18x + + + | import { Context, createContext } from './context'
+import { walk } from './walk'
+import { remove } from '@vue/shared'
+import { stop } from '@vue/reactivity'
+
+export class Block {
+ template: Element | DocumentFragment
+ ctx: Context
+ key?: any
+ parentCtx?: Context
+
+ isFragment: boolean
+ start?: Text
+ end?: Text
+
+ get el() {
+ return this.start ?? (this.template as Element)
+ }
+
+ constructor(template: Element, parentCtx: Context, isRoot = false) {
+ this.isFragment = template instanceof HTMLTemplateElement
+
+ if (isRoot) {
+ this.template = template
+ } else if (this.isFragment) {
+ this.template = (template as HTMLTemplateElement).content.cloneNode(
+ true
+ ) as DocumentFragment
+ } else {
+ this.template = template.cloneNode(true) as Element
+ }
+
+ if (isRoot) {
+ this.ctx = parentCtx
+ } else {
+ // create child context
+ this.parentCtx = parentCtx
+ parentCtx.blocks.push(this)
+ this.ctx = createContext(parentCtx)
+ }
+
+ walk(this.template, this.ctx)
+ }
+
+ insert(parent: Element | DocumentFragment | Document, anchor: Node | null = null) {
+ if (this.isFragment) {
+ if (this.start) {
+ // already inserted, moving
+ const nodesToMove: Node[] = []
+ let node: Node | null = this.start
+ while (node) {
+ nodesToMove.push(node)
+ if (node === this.end) break
+ node = node.nextSibling
+ }
+ // Insert them in reverse order to maintain visual order
+ for (let i = nodesToMove.length - 1; i >= 0; i--) {
+ parent.insertBefore(nodesToMove[i], anchor)
+ }
+ } else {
+ this.start = new Text('')
+ this.end = new Text('')
+ parent.insertBefore(this.end, anchor)
+ parent.insertBefore(this.start, this.end)
+ parent.insertBefore(this.template, this.end)
+ }
+ } else {
+ parent.insertBefore(this.template, anchor)
+ }
+ }
+
+ remove() {
+ if (this.parentCtx) {
+ remove(this.parentCtx.blocks, this)
+ }
+ if (this.start) {
+ const parent = this.start.parentNode!
+ let node: Node | null = this.start
+ let next: Node | null
+ while (node) {
+ next = node.nextSibling
+ parent.removeChild(node)
+ if (node === this.end) break
+ node = next
+ }
+ } else {
+ this.template.parentNode!.removeChild(this.template)
+ }
+ this.teardown()
+ }
+
+ /**
+ * Cleanup all effects and child blocks
+ * Enhanced with better error handling and cleanup callbacks
+ */
+ teardown() {
+ // Teardown child blocks first (depth-first cleanup)
+ this.ctx.blocks.forEach((child) => {
+ try {
+ child.teardown()
+ } catch (e) {
+ if (import.meta.env.DEV) {
+ console.warn('Error tearing down child block:', e)
+ }
+ }
+ })
+
+ // Stop all reactive effects
+ this.ctx.effects.forEach((effect) => {
+ try {
+ stop(effect)
+ } catch (e) {
+ if (import.meta.env.DEV) {
+ console.warn('Error stopping effect:', e)
+ }
+ }
+ })
+
+ // Run cleanup callbacks
+ this.ctx.cleanups.forEach((cleanup) => {
+ try {
+ cleanup()
+ } catch (e) {
+ if (import.meta.env.DEV) {
+ console.warn('Error in cleanup callback:', e)
+ }
+ }
+ })
+
+ // Clear arrays to free memory
+ this.ctx.blocks.length = 0
+ this.ctx.effects.length = 0
+ this.ctx.cleanups.length = 0
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 | + + + + + + + + + + + + + + + + + + + + + +9x +10281x + + + + + + + + + +10223x +1x +1x + +10222x +1087x + +10222x +10222x + + +10281x + + +9x +10107x +10107x +10107x +10107x +10107x + + + + +53x +1x + +52x + + + + +10107x +10107x + + + + + +9x +10218x +20360x +14x + + + + | 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'
+import { hasOwn } from '@vue/shared'
+export interface Context {
+ key?: any
+ scope: Record<string, any>
+ dirs: Record<string, Directive>
+ blocks: Block[]
+ effect: typeof rawEffect
+ effects: ReactiveEffectRunner[]
+ cleanups: (() => void)[]
+ delimiters: [string, string]
+ delimitersRE: RegExp
+}
+
+export const createContext = (parent?: Context): Context => {
+ const ctx: Context = {
+ delimiters: ['{{', '}}'],
+ delimitersRE: /\{\{([^]+?)\}\}/g,
+ ...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: ReactiveEffectRunner = 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 && !hasOwn(target, key)) {
+ return Reflect.set(parentScope, key, val)
+ }
+ return Reflect.set(target, key, val, receiver)
+ }
+ })
+ )
+
+ bindContextMethods(reactiveProxy)
+ return {
+ ...ctx,
+ scope: reactiveProxy
+ }
+}
+
+export const bindContextMethods = (scope: Record<string, any>) => {
+ for (const key of Object.keys(scope)) {
+ if (typeof scope[key] === 'function') {
+ scope[key] = scope[key].bind(scope)
+ }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /** + * Development utilities that can be tree-shaken in production + * Part of Phase 3: Bundle Size Optimization + */ + +/** + * Development mode utilities + * These will be completely removed in production builds through tree-shaking + */ +export const createDevUtils = () => { + if (import.meta.env.DEV) { + return { + /** + * Log a warning message in development mode + */ + warn: (msg: string, ...args: any[]) => { + console.warn(`[pocket-vue] ${msg}`, ...args) + }, + + /** + * Log an error message in development mode + */ + error: (msg: string, ...args: any[]) => { + console.error(`[pocket-vue] ${msg}`, ...args) + }, + + /** + * Log a debug message in development mode + */ + debug: (msg: string, ...args: any[]) => { + console.debug(`[pocket-vue] ${msg}`, ...args) + } + } + } + + // Return no-op functions in production + return { + warn: () => { }, + error: () => { }, + debug: () => { } + } +} + +/** + * Singleton instance of dev utils + * Created once and reused throughout the application + */ +export const devUtils = createDevUtils() + +/** + * Type-safe wrapper for console.warn that only runs in dev mode + */ +export const warn = (msg: string, ...args: any[]) => { + if (import.meta.env.DEV) { + console.warn(`[pocket-vue] ${msg}`, ...args) + } +} + +/** + * Type-safe wrapper for console.error that only runs in dev mode + */ +export const error = (msg: string, ...args: any[]) => { + if (import.meta.env.DEV) { + console.error(`[pocket-vue] ${msg}`, ...args) + } +} + +/** + * Assert a condition in development mode only + */ +export const assert = (condition: boolean, msg: string) => { + if (import.meta.env.DEV && !condition) { + throw new Error(`[pocket-vue] Assertion failed: ${msg}`) + } +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 | + + + + + + + + + + +9x + +9x + + + + + + + + + +31x +3x +3x + + +31x +44x +44x +38x +1x + +38x + +6x +9x + +6x +6x +3x + + + +44x + + + +9x + + + + + + +50x +4x +46x +9x +37x +15x + +22x + + + +9x +4x +4x +4x +4x + + +9x +9x +9x +1x +8x +3x + +5x +6x + +5x +1x +2x +1x + + + + + + +9x +37x + + + + + + +9x + +9x +15x +11x +1x + +10x + + +4x +4x +2x + + + + +9x +22x +2x +20x +2x +18x +14x + +4x + + + +9x + + +9x +9x +2x +8x +1x +7x + +1x + + + + + +6x + + + | import { Directive } from "."
+import {
+ normalizeClass,
+ normalizeStyle,
+ isString,
+ isArray,
+ hyphenate,
+ camelize,
+} from "@vue/shared"
+import { getElementMetadata } from "../metadata"
+
+const forceAttrRE = /^(spellcheck|draggable|form|list|type)$/
+
+export const bind: Directive<Element> = ({
+ el,
+ get,
+ effect,
+ arg,
+ modifiers,
+}) => {
+ let prevValue: any
+
+ // Record static class in metadata instead of on element
+ if (arg === "class") {
+ const metadata = getElementMetadata(el)
+ metadata.originalClass = el.className
+ }
+
+ effect(() => {
+ let value = get();
+ if (arg) {
+ if (modifiers?.camel) {
+ arg = camelize(arg);
+ }
+ setProp(el, arg, value, prevValue, modifiers?.camel);
+ } else {
+ for (const key in value) {
+ setProp(el, key, value[key], prevValue?.[key]);
+ }
+ for (const key in prevValue) {
+ if (!value || !(key in value)) {
+ setProp(el, key, null);
+ }
+ }
+ }
+ prevValue = value;
+ });
+};
+
+const setProp = (
+ el: Element & { _class?: string },
+ key: string,
+ value: any,
+ prevValue?: any,
+ isCamel?: boolean,
+) => {
+ if (key === "class") {
+ handleClass(el, value);
+ } else if (key === "style") {
+ handleStyle(el as HTMLElement, value, prevValue);
+ } else if (shouldSetProperty(el, key, isCamel)) {
+ setElementProperty(el, key, value);
+ } else {
+ setElementAttribute(el, key, value);
+ }
+};
+
+const handleClass = (el: Element, value: any) => {
+ const metadata = getElementMetadata(el)
+ const originalClass = metadata.originalClass
+ const newClass = normalizeClass(originalClass ? [originalClass, value] : value) ?? ""
+ el.setAttribute("class", newClass)
+}
+
+const handleStyle = (el: HTMLElement, value: any, prevValue?: any) => {
+ value = normalizeStyle(value);
+ if (!value) {
+ el.removeAttribute("style");
+ } else if (isString(value)) {
+ Eif (value !== prevValue) el.style.cssText = value;
+ } else {
+ for (const key in value) {
+ setStyle(el.style, key, value[key]);
+ }
+ if (prevValue && !isString(prevValue)) {
+ for (const key in prevValue) {
+ if (value[key] == null) {
+ setStyle(el.style, key, "");
+ }
+ }
+ }
+ }
+};
+
+const shouldSetProperty = (el: Element, key: string, isCamel?: boolean) =>
+ key !== "class" &&
+ key !== "style" &&
+ !(el instanceof SVGElement) &&
+ (key in el || isCamel) &&
+ !forceAttrRE.test(key);
+
+// Properties that should be set as attributes for consistency
+const DOM_ATTR_PROPS = new Set(['id', 'title', 'lang', 'dir'])
+
+const setElementProperty = (el: Element, key: string, value: any) => {
+ if (DOM_ATTR_PROPS.has(key)) {
+ if (value == null) {
+ el.removeAttribute(key)
+ } else {
+ el.setAttribute(key, value)
+ }
+ } else {
+ (el as any)[key] = value
+ if (key === 'value') {
+ (el as any)._value = value
+ }
+ }
+}
+
+const setElementAttribute = (el: Element, key: string, value: any) => {
+ if (key === "true-value") {
+ (el as any)._trueValue = value;
+ } else if (key === "false-value") {
+ (el as any)._falseValue = value;
+ } else if (value != null) {
+ el.setAttribute(key, value);
+ } else {
+ el.removeAttribute(key);
+ }
+};
+
+const importantRE = /\s*!important$/;
+
+// Use modern CSS custom properties API
+const setStyle = (style: CSSStyleDeclaration, name: string, val: string | string[]) => {
+ if (isArray(val)) {
+ val.forEach((v) => setStyle(style, name, v))
+ } else if (name.startsWith('--')) {
+ style.setProperty(name, val)
+ } else if (importantRE.test(val)) {
+ // !important
+ style.setProperty(
+ hyphenate(name),
+ val.replace(importantRE, ''),
+ 'important',
+ )
+ } else {
+ style[name as any] = val
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 | + + + +9x +5x + + | import { Directive } from '.'
+import { execute } from '../eval'
+import { nextTick } from '../scheduler'
+
+export const effect: Directive = ({ el, ctx, exp, effect }) => {
+ nextTick(() => effect(() => execute(ctx.scope, exp, el)))
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 | + + + + + + +9x +9x +9x +9x + + + +9x + + + + + + + + + +11x +11x + + +11x +29x +29x + + + + +11x +31x +31x + + +31x + +31x +31x + +23x +23x + + + +31x + +8x +8x + +31x + + + +11x + + + +11x +31x +31x +31x + + + + +31x +31x + + +31x +15x + + + +11x + + +9x +28x +28x +1x +1x + + +27x + +27x +27x +27x +27x + +27x +27x + +27x + + + +27x + +27x + + +28x +20x +20x + + + +27x +9x +9x +9x +1x + + + +27x +6x +3x + + +27x + + + + +27x +38x +38x + +38x +29x +10072x + +9x +1x +3x + +8x +6x +6x +12x + + + +38x + + +27x + + + + + +10087x +10087x +6x +12x + + +10081x + +10087x +12x +12x + +10075x + +10087x +10087x +10087x +10087x +10087x + + +27x +10056x +10056x +10056x +10056x + + +27x +38x +38x +38x +38x +10056x +27x + +11x + + + +27x + + | import { isArray, isObject } from '@vue/shared'
+import { Block } from '../block'
+import { evaluate } from '../eval'
+import { Context, createScopedContext } from '../context'
+import { DIRECTIVE_PATTERNS } from '../utils'
+
+// Use centralized regex patterns
+const forAliasRE = DIRECTIVE_PATTERNS.FOR_ALIAS_RE
+const forIteratorRE = DIRECTIVE_PATTERNS.FOR_ITERATOR_RE
+const stripParensRE = DIRECTIVE_PATTERNS.STRIP_PARENS_RE
+const destructureRE = DIRECTIVE_PATTERNS.DESTRUCTURE_RE
+
+export type KeyToIndexMap = Map<any, number>
+
+const updateBlocks = (
+ newChildCtxs: Context[],
+ oldBlocks: Block[],
+ newKeyToIndexMap: KeyToIndexMap,
+ prevKeyToIndexMap: KeyToIndexMap,
+ anchor: Node,
+ parent: Element,
+ el: Element,
+ ctx: Context
+): Block[] => {
+ const newBlocks: Block[] = new Array(newChildCtxs.length)
+ const oldKeyToBlockMap: Map<any, Block> = new Map()
+
+ // Map old blocks by key for efficient lookup
+ oldBlocks.forEach(block => {
+ Eif (block.key != null) {
+ oldKeyToBlockMap.set(block.key, block)
+ }
+ })
+
+ // Iterate new children, trying to reuse or create blocks
+ for (let i = 0; i < newChildCtxs.length; i++) {
+ const newChildCtx = newChildCtxs[i]
+ const newKey = newChildCtx.key
+ let block: Block | undefined
+
+ Eif (newKey != null) {
+ // Try to find an old block with the same key
+ block = oldKeyToBlockMap.get(newKey)
+ if (block) {
+ // Reuse existing block
+ Object.assign(block.ctx.scope, newChildCtx.scope)
+ oldKeyToBlockMap.delete(newKey) // Mark as used
+ }
+ }
+
+ if (!block) {
+ // No reusable block found, create a new one
+ block = new Block(el, newChildCtx)
+ block.key = newKey
+ }
+ newBlocks[i] = block
+ }
+
+ // Remove old blocks that were not reused
+ oldKeyToBlockMap.forEach(block => block.remove())
+
+ // Perform DOM operations (insert/move) to match the new order
+ // We need to insert blocks in reverse order to ensure the anchor points are valid
+ for (let i = newBlocks.length - 1; i >= 0; i--) {
+ const block = newBlocks[i]
+ const nextBlock = newBlocks[i + 1]
+ const expectedNextEl = nextBlock ? nextBlock.el : anchor
+
+ // Check if block needs to be moved
+ // For fragments, we check the end marker's nextSibling
+ // For regular elements, we check the element's nextSibling
+ const blockEnd = block.isFragment ? block.end : block.el
+ const actualNextEl = blockEnd?.nextSibling
+
+ // Only move if not already in the correct position
+ if (actualNextEl !== expectedNextEl) {
+ block.insert(parent, expectedNextEl)
+ }
+ }
+
+ return newBlocks
+}
+
+export const _for = (el: Element, exp: string, ctx: Context) => {
+ const inMatch = exp.match(forAliasRE)
+ if (!inMatch) {
+ import.meta.env.DEV && console.warn(`invalid v-for expression: ${exp}`)
+ return
+ }
+
+ const nextNode = el.nextSibling
+
+ const parent = el.parentElement!
+ const anchor = new Text('')
+ parent.insertBefore(anchor, el)
+ parent.removeChild(el)
+
+ const sourceExp = inMatch[2].trim()
+ let valueExp = inMatch[1].trim().replace(stripParensRE, '').trim()
+ let destructureBindings: string[] | undefined
+ let isArrayDestructure = false
+ let indexExp: string | undefined
+ let objIndexExp: string | undefined
+
+ let keyAttr = 'key'
+ let keyExp =
+ el.getAttribute(keyAttr) ||
+ el.getAttribute((keyAttr = ':key')) ||
+ el.getAttribute((keyAttr = 'v-bind:key'))
+ if (keyExp) {
+ el.removeAttribute(keyAttr)
+ Iif (keyAttr === 'key') keyExp = JSON.stringify(keyExp)
+ }
+
+ let match
+ if ((match = valueExp.match(forIteratorRE))) {
+ valueExp = valueExp.replace(forIteratorRE, '').trim()
+ indexExp = match[1].trim()
+ if (match[2]) {
+ objIndexExp = match[2].trim()
+ }
+ }
+
+ if ((match = valueExp.match(destructureRE))) {
+ destructureBindings = match[1].split(',').map((s) => s.trim())
+ isArrayDestructure = valueExp[0] === '['
+ }
+
+ let mounted = false
+ let blocks: Block[]
+ let childCtxs: Context[]
+ let keyToIndexMap: Map<any, number>
+
+ const createChildContexts = (source: unknown): [Context[], KeyToIndexMap] => {
+ const map: KeyToIndexMap = new Map()
+ const ctxs: Context[] = []
+
+ if (isArray(source)) {
+ for (let i = 0; i < source.length; i++) {
+ ctxs.push(createChildContext(map, source[i], i))
+ }
+ } else if (typeof source === 'number') {
+ for (let i = 0; i < source; i++) {
+ ctxs.push(createChildContext(map, i + 1, i))
+ }
+ } else if (isObject(source)) {
+ let i = 0
+ for (const key in source) {
+ ctxs.push(createChildContext(map, source[key], i++, key))
+ }
+ }
+
+ return [ctxs, map]
+ }
+
+ const createChildContext = (
+ map: KeyToIndexMap,
+ value: any,
+ index: number,
+ objKey?: string
+ ): Context => {
+ const data: any = {}
+ if (destructureBindings) {
+ destructureBindings.forEach(
+ (b, i) => (data[b] = value[isArrayDestructure ? i : b])
+ )
+ } else {
+ data[valueExp] = value
+ }
+ if (objKey) {
+ indexExp && (data[indexExp] = objKey)
+ objIndexExp && (data[objIndexExp] = index)
+ } else {
+ indexExp && (data[indexExp] = index)
+ }
+ const childCtx = createScopedContext(ctx, data)
+ const key = keyExp ? evaluate(childCtx.scope, keyExp, el) : index
+ map.set(key, index)
+ childCtx.key = key
+ return childCtx
+ }
+
+ const mountBlock = (ctx: Context, ref: Node) => {
+ const block = new Block(el, ctx)
+ block.key = ctx.key
+ block.insert(parent, ref)
+ return block
+ }
+
+ ctx.effect(() => {
+ const source = evaluate(ctx.scope, sourceExp, el)
+ const prevKeyToIndexMap = keyToIndexMap
+ ;[childCtxs, keyToIndexMap] = createChildContexts(source)
+ if (!mounted) {
+ blocks = childCtxs.map((s) => mountBlock(s, anchor))
+ mounted = true
+ } else {
+ blocks = updateBlocks(childCtxs, blocks, keyToIndexMap, prevKeyToIndexMap, anchor, parent, el, ctx)
+ }
+ })
+
+ return nextNode
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 | + +9x +3x +4x + + + | import { Directive } from '.'
+
+export const html: Directive = ({ el, get, effect }) => {
+ effect(() => {
+ el.innerHTML = get()
+ })
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 | + + + + + + + + + +9x +8x +1x + + +8x +8x + +7x +7x + +7x + + + + + + + + + +7x +4x +4x + + + +3x +3x + +1x + + + +7x +7x + + +7x + +7x +10x +2x +2x +2x + + + +7x +10x +12x +12x +6x +6x +6x +6x +6x +6x + +6x + + + +4x +4x + + +7x + + | import { Block } from '../block'
+import { evaluate } from '../eval'
+import { checkAttr } from '../utils'
+import { Context } from '../context'
+
+interface Branch {
+ exp?: string | null
+ el: Element
+}
+
+export const _if = (el: Element, exp: string, ctx: Context) => {
+ if (import.meta.env.DEV && !exp.trim()) {
+ console.warn(`v-if expression cannot be empty.`)
+ }
+
+ const parent = el.parentElement ?? (el.parentNode as Element | DocumentFragment)
+ if (!parent) return
+
+ const anchor = new Comment('v-if')
+ parent.insertBefore(anchor, el)
+
+ const branches: Branch[] = [
+ {
+ exp,
+ el
+ }
+ ]
+
+ // locate else branch
+ let elseEl: Element | null
+ let elseExp: string | null
+ while ((elseEl = el.nextElementSibling)) {
+ elseExp = null
+ if (
+ checkAttr(elseEl, 'v-else') === '' ||
+ (elseExp = checkAttr(elseEl, 'v-else-if'))
+ ) {
+ parent.removeChild(elseEl)
+ branches.push({ exp: elseExp, el: elseEl })
+ } else {
+ break
+ }
+ }
+
+ const nextNode = el.nextSibling
+ parent.removeChild(el)
+
+ let block: Block | undefined
+ let activeBranchIndex: number = -1
+
+ const removeActiveBlock = () => {
+ if (block) {
+ parent.insertBefore(anchor, block.el)
+ block.remove()
+ block = undefined
+ }
+ }
+
+ ctx.effect(() => {
+ for (let i = 0; i < branches.length; i++) {
+ const { exp, el } = branches[i]
+ if (exp == null || evaluate(ctx.scope, exp, el)) {
+ Eif (i !== activeBranchIndex) {
+ removeActiveBlock()
+ block = new Block(el, ctx)
+ block.insert(parent, anchor)
+ parent.removeChild(anchor)
+ activeBranchIndex = i
+ }
+ return
+ }
+ }
+ // no matched branch.
+ activeBranchIndex = -1
+ removeActiveBlock()
+ })
+
+ return nextNode
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| bind.ts | +
+
+ |
+ 100% | +72/72 | +96.42% | +54/56 | +100% | +10/10 | +100% | +70/70 | +
| effect.ts | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +3/3 | +100% | +2/2 | +
| for.ts | +
+
+ |
+ 99.09% | +109/110 | +92.45% | +49/53 | +100% | +11/11 | +100% | +102/102 | +
| html.ts | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +2/2 | +100% | +3/3 | +
| if.ts | +
+
+ |
+ 100% | +38/38 | +95% | +19/20 | +100% | +3/3 | +100% | +36/36 | +
| index.ts | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
| model.ts | +
+
+ |
+ 100% | +115/115 | +94.2% | +65/69 | +100% | +27/27 | +100% | +107/107 | +
| on.ts | +
+
+ |
+ 100% | +45/45 | +97.29% | +36/37 | +100% | +15/15 | +100% | +41/41 | +
| ref.ts | +
+
+ |
+ 100% | +11/11 | +100% | +12/12 | +100% | +3/3 | +100% | +11/11 | +
| show.ts | +
+
+ |
+ 100% | +7/7 | +83.33% | +5/6 | +100% | +2/2 | +100% | +7/7 | +
| text.ts | +
+
+ |
+ 100% | +8/8 | +100% | +4/4 | +100% | +4/4 | +100% | +8/8 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 | + + + + + + + + + + + + + + + + + + + + + + + + + + +9x + + + + + + + + + + | import { Context } from '../context'
+import { effect as rawEffect } from '@vue/reactivity'
+import { bind } from './bind'
+import { on } from './on'
+import { show } from './show'
+import { text } from './text'
+import { html } from './html'
+import { model } from './model'
+import { effect } from './effect'
+import { ref } from './ref'
+import { _for } from './for'
+import { _if } from './if'
+
+export interface Directive<T = Element> {
+ (ctx: DirectiveContext<T>): (() => void) | void
+}
+
+export interface DirectiveContext<T = Element> {
+ el: T
+ get: (exp?: string) => any
+ effect: typeof rawEffect
+ exp: string
+ arg?: string
+ modifiers?: Record<string, true>
+ ctx: Context
+}
+
+export const builtInDirectives: Record<string, Directive<any>> = {
+ bind,
+ on,
+ show,
+ text,
+ html,
+ model,
+ effect,
+ ref
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 | + + + + +9x +23x +15x +12x + + +9x +14x +44x + + + + + +9x +34x +34x +34x + +34x +7x +7x +3x +8x + +7x + +3x + +7x +10x +10x +10x +10x +22x +22x +22x +14x +12x + +2x + + +8x +4x +4x + + + +6x +1x + + +27x +8x +8x + + + +8x +20x +20x + +19x +5x +2x + + +5x +10x +10x +10x + + + + +14x +12x +10x +6x + + +14x +14x + + + +13x + + +14x +2x +1x + + + +14x + +14x +24x + + + + +61x + + +9x + + + +14x +14x + + +9x +2x + + +9x +4x +4x +3x +3x + + + +9x + + + +3x + + +9x + + + + +22x +22x +13x +9x +9x + + + + +9x + +9x + + + + +11x +11x +11x +6x +6x +6x +6x +3x +3x +3x +3x +3x + + +5x + + + +9x + + + + +27x +2x + +25x +25x +25x +1x + +24x +17x + + + +9x +3x +3x +3x + + | import { isArray, looseEqual, looseIndexOf, toNumber } from '@vue/shared'
+import { Directive } from '.'
+import { listen } from '../utils'
+
+// Consolidated value handling utilities
+const createValueHandler = (resolveValue: (val: string) => any) =>
+ (el: HTMLInputElement | HTMLTextAreaElement, assign: (val: any) => void) => {
+ if ((el as any).composing) return
+ assign(resolveValue(el.value))
+ }
+
+const setupInputHandlers = (el: Element, handlers: Record<string, EventListener>) => {
+ Object.entries(handlers).forEach(([event, handler]) => {
+ listen(el, event, handler)
+ })
+}
+
+export const model: Directive<
+ HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+> = ({ el, exp, get, effect, modifiers }) => {
+ const type = el.type
+ const assign = get(`(val) => { ${exp} = val }`)
+ const { trim, number = type === 'number' || type === 'range' } = modifiers ?? {}
+
+ if (el.tagName === 'SELECT') {
+ const sel = el as HTMLSelectElement
+ listen(el, 'change', () => {
+ const selectedVal = Array.from(sel.options)
+ .filter((o: HTMLOptionElement) => o.selected)
+ .map((o: HTMLOptionElement) =>
+ number ? toNumber(getValue(o)) : getValue(o)
+ )
+ assign(sel.multiple ? [...selectedVal] : selectedVal[0])
+ })
+ effect(() => {
+ const value = get()
+ const isMultiple = sel.multiple
+ const options = sel.options
+ for (let i = 0, l = options.length; i < l; i++) {
+ const option = options[i]
+ const optionValue = getValue(option)
+ if (isMultiple) {
+ if (isArray(value)) {
+ option.selected = looseIndexOf(value, optionValue) > -1
+ } else {
+ option.selected = false
+ }
+ } else {
+ if (looseEqual(optionValue, value)) {
+ if (sel.selectedIndex !== i) sel.selectedIndex = i
+ return
+ }
+ }
+ }
+ if (!isMultiple && sel.selectedIndex !== -1) {
+ sel.selectedIndex = -1
+ }
+ })
+ } else if (type === 'checkbox') {
+ listen(el, 'change', () => {
+ handleCheckboxChange(el as HTMLInputElement, get, assign)
+ })
+
+ let oldValue: any
+ effect(() => {
+ updateCheckboxValue(el as HTMLInputElement, get, oldValue)
+ oldValue = get()
+ })
+ } else if (type === 'radio') {
+ listen(el, 'change', () => {
+ handleRadioChange(el as HTMLInputElement, assign)
+ })
+ let oldValue: any
+ effect(() => {
+ const value = get()
+ Eif (value !== oldValue) {
+ ; (el as HTMLInputElement).checked = looseEqual(value, getValue(el))
+ }
+ })
+ } else {
+ // text-like
+ const resolveValue = (val: string) => {
+ if (trim) return val.trim()
+ if (number) return toNumber(val)
+ return val
+ }
+
+ const handleInput = createValueHandler(resolveValue)
+ const handlers: Record<string, EventListener> = {
+ compositionstart: onCompositionStart,
+ compositionend: onCompositionEnd,
+ [modifiers?.lazy ? 'change' : 'input']: () =>
+ handleInput(el as HTMLInputElement | HTMLTextAreaElement, assign)
+ }
+
+ if (trim) {
+ handlers.change = () => {
+ el.value = el.value.trim()
+ }
+ }
+
+ setupInputHandlers(el, handlers)
+
+ effect(() => {
+ updateTextValue(el as HTMLInputElement | HTMLTextAreaElement, get, resolveValue)
+ })
+ }
+}
+
+const getValue = (el: any) => ('_value' in el ? el._value : el.value)
+
+// retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
+const getCheckboxValue = (
+ el: HTMLInputElement & { _trueValue?: any; _falseValue?: any },
+ checked: boolean
+) => {
+ const key = checked ? '_trueValue' : '_falseValue'
+ return key in el ? el[key] : checked
+}
+
+export const onCompositionStart = (e: Event) => {
+ ; (e.target as any).composing = true
+}
+
+export const onCompositionEnd = (e: Event) => {
+ const target = e.target as any
+ if (target.composing) {
+ target.composing = false
+ trigger(target, 'input')
+ }
+}
+
+export const handleRadioChange = (
+ el: HTMLInputElement,
+ assign: (val: any) => void
+) => {
+ assign(getValue(el))
+}
+
+export const updateCheckboxValue = (
+ el: HTMLInputElement,
+ get: () => any,
+ oldValue: any
+) => {
+ const value = get()
+ if (isArray(value)) {
+ el.checked = looseIndexOf(value, getValue(el)) > -1
+ E} else if (value !== oldValue) {
+ el.checked = looseEqual(value, getCheckboxValue(el, true))
+ }
+}
+
+// Re-export for backward compatibility with tests
+export const handleTextInput = createValueHandler((val: string) => val)
+
+export const handleCheckboxChange = (
+ el: HTMLInputElement,
+ get: () => any,
+ assign: (val: any) => void
+) => {
+ const modelValue = get()
+ const checked = el.checked
+ if (isArray(modelValue)) {
+ const elementValue = getValue(el)
+ const index = looseIndexOf(modelValue, elementValue)
+ const found = index !== -1
+ if (checked && !found) {
+ assign(modelValue.concat(elementValue))
+ E} else if (!checked && found) {
+ const filtered = [...modelValue]
+ filtered.splice(index, 1)
+ assign(filtered)
+ }
+ } else {
+ assign(getCheckboxValue(el, checked))
+ }
+}
+
+export const updateTextValue = (
+ el: HTMLInputElement | HTMLTextAreaElement,
+ get: () => any,
+ resolveValue: (val: string) => any
+) => {
+ if ((el as any).composing) {
+ return
+ }
+ const curVal = el.value
+ const newVal = get()
+ if (document.activeElement === el && resolveValue(curVal) === newVal) {
+ return
+ }
+ if (curVal !== newVal) {
+ el.value = newVal
+ }
+}
+
+const trigger = (el: HTMLElement, type: string) => {
+ const e = document.createEvent('HTMLEvents')
+ e.initEvent(type, true, true)
+ el.dispatchEvent(e)
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 | + + + + + + +9x + +9x + + + + + + +9x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x + +5x + + +9x +33x +2x +2x + +2x + + +31x + + + + +33x +2x + + + +31x +1x +1x +30x +1x + + +29x + +15x +14x +14x + + +15x +15x +23x +1x + +22x +22x +22x +7x + + +15x + + + +29x + + | import { Directive } from '.'
+import { hyphenate } from '@vue/shared'
+import { listen } from '../utils'
+import { nextTick } from '../scheduler'
+
+// same as vue 2
+const simplePathRE =
+ /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
+
+const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
+
+type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent
+
+const modifierGuards: Record<
+ string,
+ (e: Event, modifiers: Record<string, true>) => void | boolean
+> = {
+ stop: (e) => e.stopPropagation(),
+ prevent: (e) => e.preventDefault(),
+ self: (e) => e.target !== e.currentTarget,
+ ctrl: (e) => !(e as KeyedEvent).ctrlKey,
+ shift: (e) => !(e as KeyedEvent).shiftKey,
+ alt: (e) => !(e as KeyedEvent).altKey,
+ meta: (e) => !(e as KeyedEvent).metaKey,
+ left: (e) => 'button' in e && (e as MouseEvent).button !== 0,
+ middle: (e) => 'button' in e && (e as MouseEvent).button !== 1,
+ right: (e) => 'button' in e && (e as MouseEvent).button !== 2,
+ exact: (e, modifiers) =>
+ systemModifiers.some((m) => (e as any)[`${m}Key`] && !modifiers[m])
+}
+
+export const on: Directive = ({ el, get, exp, arg, modifiers }) => {
+ if (!arg) {
+ Eif (import.meta.env.DEV) {
+ console.error(`v-on="obj" syntax is not supported in pocket-vue.`)
+ }
+ return
+ }
+
+ let handler = simplePathRE.test(exp)
+ ? get(`(e => ${exp}(e))`)
+ : get(`($event => { ${exp} })`)
+
+ // special lifecycle events
+ if (import.meta.env.DEV && (arg === 'mounted' || arg === 'unmounted')) {
+ console.error(
+ `mounted and unmounted hooks now need to be prefixed with vue: - use @vue:${arg}="handler" instead.`
+ )
+ }
+ if (arg === 'vue:mounted') {
+ nextTick(handler)
+ return
+ } else if (arg === 'vue:unmounted') {
+ return () => handler()
+ }
+
+ if (modifiers) {
+ // map modifiers
+ if (arg === 'click') {
+ if (modifiers.right) arg = 'contextmenu'
+ if (modifiers.middle) arg = 'mouseup'
+ }
+
+ const raw = handler
+ handler = (e: Event) => {
+ if ('key' in e && !(hyphenate((e as KeyboardEvent).key) in modifiers)) {
+ return
+ }
+ for (const key in modifiers) {
+ const guard = modifierGuards[key]
+ if (guard?.(e, modifiers)) {
+ return
+ }
+ }
+ return raw(e)
+ }
+ }
+
+ listen(el, arg, handler, modifiers)
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | + +9x + + + + + + + + + +10x +12x + +12x +8x + +12x +12x +2x + +12x + +10x +1x + + + | import { Directive } from '.'
+
+export const ref: Directive = ({
+ el,
+ ctx: {
+ scope: { $refs }
+ },
+ get,
+ effect,
+ exp
+}) => {
+ let prevRef: any
+ effect(() => {
+ let ref = get()
+ // If get() returns undefined and exp is a simple string, use exp directly
+ if (ref === undefined && exp && !exp.includes('${') && !exp.includes('}')) {
+ ref = exp
+ }
+ $refs[ref] = el
+ if (prevRef && ref !== prevRef) {
+ delete $refs[prevRef]
+ }
+ prevRef = ref
+ })
+ return () => {
+ prevRef && delete $refs[prevRef]
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 | + + + + + + +9x + + +2x +2x +2x + + +2x +3x +3x + + + | import { Directive } from '.'
+import { getElementMetadata } from '../metadata'
+
+/**
+ * v-show directive implementation
+ * Uses WeakMap-based metadata storage for automatic memory cleanup
+ */
+export const show: Directive<HTMLElement> = ({ el, get, effect }) => {
+ // Store original display value in metadata (WeakMap)
+ // This will be automatically garbage collected when the element is removed
+ const metadata = getElementMetadata(el)
+ Eif (metadata.originalDisplay === undefined) {
+ metadata.originalDisplay = el.style.display || ''
+ }
+
+ effect(() => {
+ const shouldShow = get()
+ el.style.display = shouldShow ? metadata.originalDisplay! : 'none'
+ })
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | + + +9x +10103x +10124x + + + +9x +20235x + + +1x +1x + +1x + + + + + | import { isObject } from '@vue/shared'
+import { Directive } from '.'
+
+export const text: Directive<Text | Element> = ({ el, get, effect }) => {
+ effect(() => {
+ el.textContent = toDisplayString(get())
+ })
+}
+
+export const toDisplayString = (value: any) =>
+value != null
+? isObject(value)
+? (() => {
+try {
+return JSON.stringify(value, null, 2)
+} catch (e) {
+return '[Object]'
+}
+})()
+: String(value)
+: ''
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 | 10x + + +10x + + + + + +10x +10526x +31566x + + +10x +10510x +5x +5x + +5x + + +10505x +10505x + +13x +13x + +13x + + + +10x +16x +2x +2x + +2x + + +14x +16x +16x + +3x +3x + + +3x +3x + + + +10x +9x +9x + +1x +1x + +1x + + + | const evalCache: Record<string, Function> = Object.create(null)
+
+// Expression validation patterns - more conservative to avoid blocking legitimate code
+const DANGEROUS_PATTERNS = [
+ /\b(eval|Function|setTimeout|setInterval|XMLHttpRequest|fetch|WebSocket|Worker)\b/,
+ /\b(window|document|globalThis|global|process|require|import|export)\b/,
+ /\b(delete|void|typeof|instanceof)\b.*\(/,
+]
+
+const validateExpression = (exp: string): boolean => {
+ if (exp == null || exp === '' || exp.length > 1000) return false
+ return !DANGEROUS_PATTERNS.some(pattern => pattern.test(exp))
+}
+
+export const evaluate = (scope: object, exp: string, _el: Element) => {
+ if (!validateExpression(exp)) {
+ Eif (import.meta.env.DEV) {
+ console.warn(`Potentially unsafe expression rejected: "${exp}"`)
+ }
+ return undefined
+ }
+
+ try {
+ return new Function(`with (this) { return ${exp} }`).call(scope)
+ } catch (e) {
+ Eif (import.meta.env.DEV) {
+ console.error(`Error evaluating expression "${exp}":`, e)
+ }
+ return undefined
+ }
+}
+
+export const execute = (scope: any, exp: string, el?: Node) => {
+ if (!validateExpression(exp)) {
+ Eif (import.meta.env.DEV) {
+ console.warn(`Potentially unsafe expression rejected: "${exp}"`)
+ }
+ return undefined
+ }
+
+ const fn = evalCache[exp] ?? (evalCache[exp] = toFunction(exp))
+ try {
+ return fn(scope, el)
+ } catch (e) {
+ Eif (import.meta.env.DEV) {
+ console.error(`Error executing expression "${exp}":`, e)
+ }
+ // Remove from cache on error to prevent future failures
+ delete evalCache[exp]
+ return undefined
+ }
+}
+
+const toFunction = (exp: string): Function => {
+ try {
+ return new Function(`$data`, `$el`, `with($data){${exp}}`)
+ } catch (e) {
+ Eif (import.meta.env.DEV) {
+ console.error(`Invalid expression: ${exp}`, e)
+ }
+ return () => { }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| app.ts | +
+
+ |
+ 100% | +42/42 | +100% | +24/24 | +100% | +11/11 | +100% | +40/40 | +
| block.ts | +
+
+ |
+ 90.32% | +56/62 | +78.57% | +22/28 | +100% | +8/8 | +89.83% | +53/59 | +
| context.ts | +
+
+ |
+ 100% | +25/25 | +100% | +13/13 | +100% | +6/6 | +100% | +25/25 | +
| dev.ts | +
+
+ |
+ 0% | +0/17 | +0% | +0/10 | +0% | +0/10 | +0% | +0/17 | +
| eval.ts | +
+
+ |
+ 100% | +35/35 | +76.19% | +16/21 | +100% | +6/6 | +100% | +33/33 | +
| index.ts | +
+
+ |
+ 100% | +5/5 | +100% | +2/2 | +100% | +1/1 | +100% | +5/5 | +
| metadata.ts | +
+
+ |
+ 66.66% | +6/9 | +100% | +2/2 | +33.33% | +1/3 | +66.66% | +6/9 | +
| scheduler.ts | +
+
+ |
+ 100% | +16/16 | +100% | +4/4 | +100% | +4/4 | +100% | +14/14 | +
| types.ts | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| utils.ts | +
+
+ |
+ 41.37% | +12/29 | +14.28% | +2/14 | +22.22% | +2/9 | +39.28% | +11/28 | +
| walk.ts | +
+
+ |
+ 100% | +97/97 | +97.4% | +75/77 | +100% | +7/7 | +100% | +94/94 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + + + +2x +4x +4x +1x + + + +2x + | export { createApp } from './app'
+export { nextTick } from './scheduler'
+export { reactive, effect as watchEffect } from '@vue/reactivity'
+
+import { createApp } from './app'
+
+export const autoMount = () => {
+ const s = document.currentScript
+ if (s?.hasAttribute('init')) {
+ createApp().mount()
+ }
+}
+
+autoMount()
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 | + + + + + + + + + + + + + + + + + + + + + + + + + + + +9x + + + + + +9x +9x +4x +4x + +9x + + + + + + + + + + + + + + + + + + + + + | /**
+ * Element metadata storage using WeakMap for automatic memory management
+ * Part of Phase 3: Advanced Optimizations
+ */
+
+/**
+ * Metadata structure for storing element-related information
+ * This allows us to store additional data without polluting the DOM
+ */
+export interface ElementMetadata {
+ /** Original display value for v-show directive */
+ originalDisplay?: string
+
+ /** Event listeners attached to this element */
+ eventListeners?: Map<string, EventListener[]>
+
+ /** Custom properties stored on this element */
+ customProperties?: Map<string, any>
+
+ /** Original class value for bind directive */
+ originalClass?: string
+}
+
+/**
+ * WeakMap for storing element metadata
+ * Using WeakMap ensures automatic garbage collection when elements are removed
+ * This prevents memory leaks in long-running applications
+ */
+export const elementMetadata = new WeakMap<Element, ElementMetadata>()
+
+/**
+ * Get metadata for an element, creating it if needed
+ */
+export function getElementMetadata(el: Element): ElementMetadata {
+ let metadata = elementMetadata.get(el)
+ if (!metadata) {
+ metadata = {}
+ elementMetadata.set(el, metadata)
+ }
+ return metadata
+}
+
+/**
+ * Set a specific metadata property for an element
+ */
+export function setElementMetadata<K extends keyof ElementMetadata>(
+ el: Element,
+ key: K,
+ value: ElementMetadata[K]
+): void {
+ const metadata = getElementMetadata(el)
+ metadata[key] = value
+}
+
+/**
+ * Clear metadata for an element
+ */
+export function clearElementMetadata(el: Element): void {
+ elementMetadata.delete(el)
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 | 10x +10x + +10x +1101x +1101x +68x +68x + + + +10x +80x + + +10x +68x +95x + +68x +68x + + | let queued = false
+const queue: Function[] = []
+
+export const queueJob = (job: Function) => {
+ if (!queue.includes(job)) queue.push(job)
+ if (!queued) {
+ queued = true
+ queueMicrotask(flushJobs)
+ }
+}
+
+export const nextTick = (fn?: () => void) => {
+ return queueMicrotask(() => fn?.())
+}
+
+const flushJobs = () => {
+ for (const job of queue) {
+ job()
+ }
+ queue.length = 0
+ queued = false
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /**
+ * Type definitions for directive system
+ * Part of Phase 2 TypeScript improvements
+ */
+
+import type { Context } from './context'
+import type { ReactiveEffectRunner } from '@vue/reactivity'
+
+/**
+ * Enhanced directive context with stricter types
+ */
+export interface DirectiveContext<T extends Element = Element> {
+ /** The element the directive is bound to */
+ el: T
+
+ /** Expression evaluation function */
+ get: (exp?: string) => any
+
+ /** Effect creation function */
+ effect: (fn: () => void) => ReactiveEffectRunner
+
+ /** The original expression string */
+ exp: string
+
+ /** Directive argument (e.g., 'click' in @click) */
+ arg?: string
+
+ /** Directive modifiers (e.g., {lazy: true} in v-model.lazy) */
+ modifiers?: Record<string, true>
+
+ /** The context object */
+ ctx: Context
+}
+
+/**
+ * HTML input-like elements that support v-model
+ */
+export type HTMLInputLike = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+
+/**
+ * HTML element with potential class tracking
+ */
+export type HTMLElementWithClass = Element & { _class?: string }
+
+/**
+ * Checkbox/Radio element with custom value tracking
+ */
+export type HTMLInputWithValue = HTMLInputElement & {
+ _value?: any
+ _trueValue?: any
+ _falseValue?: any
+}
+
+/**
+ * Directive definition function
+ */
+export type Directive<T extends Element = Element> = (
+ ctx: DirectiveContext<T>
+) => (() => void) | void
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 | + + + +10x +62687x +62687x +62687x + + + + + + +10x + + + + + +95x + + + + + + + + + + +10x + + + + + + + + + + + + + + + + + + + + + + + + + + + +10x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +10x + + + + + +10x + + + + + +10x + + | // ============================================================================
+// Attribute Utilities
+// ============================================================================
+
+export const checkAttr = (el: Element, name: string): string | null => {
+ const val = el.getAttribute(name)
+ if (val != null) el.removeAttribute(name)
+ return val
+}
+
+// ============================================================================
+// Event Handling Utilities
+// ============================================================================
+
+export const listen = (
+ el: Element,
+ event: string,
+ handler: EventListener,
+ options?: AddEventListenerOptions
+) => {
+ el.addEventListener(event, handler, options)
+}
+
+// ============================================================================
+// Shared Regex Patterns
+// ============================================================================
+
+/**
+ * Centralized regex patterns used across directives
+ * These are defined once to improve performance and maintainability
+ */
+export const DIRECTIVE_PATTERNS = {
+ /** Matches directive prefixes: v-, :, @ */
+ DIR_RE: /^(?:v-|:|@)/,
+
+ /** Matches modifiers like .camel, .lazy, etc. */
+ MODIFIER_RE: /\.([\w-]+)/g,
+
+ /** Matches v-for alias pattern: "item in items" or "item of items" */
+ FOR_ALIAS_RE: /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,
+
+ /** Matches v-for iterators: ", index" or ", key, index" */
+ FOR_ITERATOR_RE: /,([^,\}\]]*)(?:,([^,\}\]]*))?$/,
+
+ /** Matches parentheses to strip from expressions */
+ STRIP_PARENS_RE: /^\(|\)$/g,
+
+ /** Matches destructuring patterns: [a, b] or {a, b} */
+ DESTRUCTURE_RE: /^[{[]\s*((?:[\w_$]+\s*,?\s*)+)[\]}]$/
+} as const
+
+// ============================================================================
+// DOM Utilities
+// ============================================================================
+
+/**
+ * Centralized DOM manipulation utilities
+ * Provides safe, consistent DOM operations across the codebase
+ */
+export const DOMUtils = {
+ /**
+ * Set multiple attributes on an element at once
+ * Automatically removes attributes when value is null/undefined
+ */
+ setAttributes: (el: Element, attrs: Record<string, string | null | undefined>) => {
+ Object.entries(attrs).forEach(([key, value]) => {
+ value != null ? el.setAttribute(key, value) : el.removeAttribute(key)
+ })
+ },
+
+ /**
+ * Safely insert a node before a reference node
+ * Returns true if insertion was successful
+ */
+ insertBefore: (parent: Node, newNode: Node, referenceNode: Node | null): boolean => {
+ try {
+ parent.insertBefore(newNode, referenceNode)
+ return true
+ } catch (e) {
+ if (import.meta.env.DEV) {
+ console.warn('Failed to insert node:', e)
+ }
+ return false
+ }
+ },
+
+ /**
+ * Safely remove a node from its parent
+ * Returns true if removal was successful
+ */
+ removeNode: (node: Node): boolean => {
+ try {
+ node.parentNode?.removeChild(node)
+ return true
+ } catch (e) {
+ if (import.meta.env.DEV) {
+ console.warn('Failed to remove node:', e)
+ }
+ return false
+ }
+ }
+}
+
+// ============================================================================
+// Type Guards
+// ============================================================================
+
+/**
+ * Type guard for HTMLInputElement
+ */
+export const isHTMLInput = (el: Element): el is HTMLInputElement =>
+ el.tagName === 'INPUT' && el instanceof HTMLInputElement
+
+/**
+ * Type guard for HTMLSelectElement
+ */
+export const isSelectElement = (el: Element): el is HTMLSelectElement =>
+ el.tagName === 'SELECT' && el instanceof HTMLSelectElement
+
+/**
+ * Type guard for HTMLTextAreaElement
+ */
+export const isTextAreaElement = (el: Element): el is HTMLTextAreaElement =>
+ el.tagName === 'TEXTAREA' && el instanceof HTMLTextAreaElement
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 | + + + + + + + + + + + +9x +9x + +9x + +9x +20779x +20779x +20779x + +10466x +10466x +1x + + +10465x + + + + +10465x +7x + + + +10458x +28x + + + +10430x +17x +17x +17x +17x +3x + + + + +10430x +10430x +1x + + + +10430x +3x +2x + +3x + + + +10430x + + +10430x +10430x +197x +95x + + +27x +68x +11x + +57x + + + +10430x +38x + + +10430x +1x + +10313x + +10308x +10308x +10101x +10101x + +10101x +10123x +10123x +10123x +10123x + +10101x +37x + +10101x + +5x +5x + + + +9x +10435x +10435x +10548x + + + +9x + + + + + + + + + + +95x +9x +9x + + +95x +26x +26x +69x +10x +10x + +59x +59x +59x +59x + +95x +94x +94x +94x +1x +1x + + + +9x + + + + + + + +10323x +10200x + + + + + + + + +10200x +11x + + + +9x +3x +2x +2x +1x + + + +2x +1x + +2x + +1x + + | import { builtInDirectives, Directive } from './directives'
+import { _if } from './directives/if'
+import { _for } from './directives/for'
+import { bind } from './directives/bind'
+import { on } from './directives/on'
+import { text } from './directives/text'
+import { evaluate } from './eval'
+import { checkAttr, DIRECTIVE_PATTERNS } from './utils'
+import { ref } from './directives/ref'
+import { Context, createScopedContext } from './context'
+
+// Use centralized regex patterns from utils
+const dirRE = DIRECTIVE_PATTERNS.DIR_RE
+const modifierRE = DIRECTIVE_PATTERNS.MODIFIER_RE
+
+export let inOnce = false
+
+export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
+ const parentCtx = ctx
+ const type = node.nodeType
+ if (type === 1) {
+ // Element
+ const el = node as Element
+ if (el.hasAttribute('v-pre')) {
+ return
+ }
+
+ checkAttr(el, 'v-cloak')
+
+ let exp: string | null
+
+ // v-if
+ if ((exp = checkAttr(el, 'v-if'))) {
+ return _if(el, exp, ctx)
+ }
+
+ // v-for
+ if ((exp = checkAttr(el, 'v-for'))) {
+ return _for(el, exp, ctx)
+ }
+
+ // v-scope
+ if ((exp = checkAttr(el, 'v-scope')) != null) {
+ const scope = exp ? evaluate(ctx.scope, exp, el) : {}
+ scope.$root = el
+ ctx = createScopedContext(ctx, scope)
+ if (scope.$template) {
+ resolveTemplate(el, scope.$template)
+ }
+ }
+
+ // v-once
+ const hasVOnce = checkAttr(el, 'v-once') != null
+ if (hasVOnce) {
+ inOnce = true
+ }
+
+ // ref
+ if ((exp = checkAttr(el, 'ref'))) {
+ if (ctx !== parentCtx) {
+ applyDirective(el, ref, exp, parentCtx)
+ }
+ applyDirective(el, ref, exp, ctx)
+ }
+
+ // process children first before self attrs
+ walkChildren(el, ctx)
+
+ // other directives
+ const deferred: [string, string][] = []
+ for (const { name, value } of Array.from(el.attributes)) {
+ if (dirRE.test(name) && name !== 'v-cloak') {
+ if (name === 'v-model') {
+ // defer v-model since it relies on :value bindings to be processed
+ // first, but also before v-on listeners (#73)
+ deferred.unshift([name, value])
+ } else if (name[0] === '@' || /^v-on\b/.test(name)) {
+ deferred.push([name, value])
+ } else {
+ processDirective(el, name, value, ctx)
+ }
+ }
+ }
+ for (const [name, value] of deferred) {
+ processDirective(el, name, value, ctx)
+ }
+
+ if (hasVOnce) {
+ inOnce = false
+ }
+ } else if (type === 3) {
+ // Text
+ const data = (node as Text).data
+ if (data.includes(ctx.delimiters[0])) {
+ let segments: string[] = []
+ let lastIndex = 0
+ let match
+ 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]})`)
+ lastIndex = match.index + match[0].length
+ }
+ if (lastIndex < data.length) {
+ segments.push(JSON.stringify(data.slice(lastIndex)))
+ }
+ applyDirective(node, text, segments.join('+'), ctx)
+ }
+ E} else if (type === 11) {
+ walkChildren(node as DocumentFragment, ctx)
+ }
+}
+
+const walkChildren = (node: Element | DocumentFragment, ctx: Context) => {
+ let child = node.firstChild
+ while (child) {
+ child = walk(child, ctx) ?? child.nextSibling
+ }
+}
+
+const processDirective = (
+ el: Element,
+ raw: string,
+ exp: string,
+ ctx: Context
+) => {
+ let dir: Directive
+ let arg: string | undefined
+ let modifiers: Record<string, true> | undefined
+
+ // modifiers
+ raw = raw.replace(modifierRE, (_, m) => {
+ (modifiers ??= {})[m] = true
+ return ''
+ })
+
+ if (raw[0] === ':') {
+ dir = bind
+ arg = raw.slice(1)
+ } else if (raw[0] === '@') {
+ dir = on
+ arg = raw.slice(1)
+ } else {
+ const argIndex = raw.indexOf(':')
+ const dirName = argIndex > 0 ? raw.slice(2, argIndex) : raw.slice(2)
+ dir = builtInDirectives[dirName] ?? ctx.dirs[dirName]
+ arg = argIndex > 0 ? raw.slice(argIndex + 1) : undefined
+ }
+ if (dir) {
+ if (dir === bind && arg === 'ref') dir = ref
+ applyDirective(el, dir, exp, ctx, arg, modifiers)
+ el.removeAttribute(raw)
+ E} else if (import.meta.env.DEV) {
+ console.error(`unknown custom directive ${raw}.`)
+ }
+}
+
+const applyDirective = (
+ el: Node,
+ dir: Directive<any>,
+ exp: string,
+ ctx: Context,
+ arg?: string,
+ modifiers?: Record<string, true>
+) => {
+ const get = (e = exp) => evaluate(ctx.scope, e, el as Element)
+ const cleanup = dir({
+ el,
+ get,
+ effect: ctx.effect,
+ ctx,
+ exp,
+ ...(arg !== undefined && { arg }),
+ ...(modifiers && { modifiers })
+ })
+ if (cleanup) {
+ ctx.cleanups.push(cleanup)
+ }
+}
+
+const resolveTemplate = (el: Element, template: string) => {
+ if (template[0] === '#') {
+ const templateEl = document.querySelector(template)
+ if (import.meta.env.DEV && !templateEl) {
+ console.error(
+ `template selector ${template} has no matching <template> element.`
+ )
+ }
+ if (templateEl) {
+ el.appendChild((templateEl as HTMLTemplateElement).content.cloneNode(true))
+ }
+ return
+ }
+ el.innerHTML = template.replace(/<[\/\s]*template\s*>/ig, '')
+}
+ |