feat: template refs

Author: yyx990803

README.md

@@ -2,7 +2,7 @@
 
 `petite-vue` is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework.
 
-- Only ~5.7kb
+- Only ~5.8kb
 - DOM-based, mutates in place
 - Driven by `@vue/reactivity`
 
@@ -332,13 +332,13 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main
 - `v-cloak`
 - `reactive()`
 - `nextTick()`
+- Template refs
 
 ### Not Supported
 
 Some features are dropped because they have a relatively low utility/size ratio in the context of progressive enhancement. If you need these features, you should probably just use standard Vue.
 
 - `ref()`, `computed()` etc.
-- Template refs (just use selectors)
 - Render functions (`petite-vue` has no virtual DOM)
 - Reactivity for Collection Types (Map, Set, etc., removed for smaller size)
 - Transition, KeepAlive, Teleport, Suspense
@@ -350,6 +350,6 @@ Some features are dropped because they have a relatively low utility/size ratio
 ## Relationship with Alpine
 
 - This is indeed addressing a similar scope to Alpine, but aims to be even more minimal.
-  - `petite-vue` is less than half the size of Alpine.
+  - `petite-vue` is only half the size of Alpine.
   - `petite-vue` has no transition system (maybe this can be an opt-in plugin).
 - Alpine is developing its own ecosystem and likely will diverge more from Vue in the future. `petite-vue` aligns with standard Vue behavior whenever possible, so it's less friction moving to standard Vue if needed. It's intended to cover the progressive enhancement use case where standard Vue is less optimized for nowadays.

src/app.ts

@@ -15,6 +15,7 @@ export const createApp = (initialData?: any) => {
   // global internal helpers
   ctx.scope.$s = toDisplayString
   ctx.scope.$nextTick = nextTick
+  ctx.scope.$refs = Object.create(null)
 
   let rootBlocks: Block[]
 

src/directives/ref.ts

@@ -0,0 +1,23 @@
+import { Directive } from '.'
+
+export const ref: Directive = ({
+  el,
+  ctx: {
+    scope: { $refs }
+  },
+  get,
+  effect
+}) => {
+  let prevRef: any
+  effect(() => {
+    const ref = get()
+    $refs[ref] = el
+    if (prevRef && ref !== prevRef) {
+      delete $refs[prevRef]
+    }
+    prevRef = ref
+  })
+  return () => {
+    prevRef && delete $refs[prevRef]
+  }
+}

src/walk.ts

@@ -10,6 +10,7 @@ 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 {
   scope: Record<string, any>
@@ -84,6 +85,11 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
       inOnce = true
     }
 
+    // ref
+    if ((exp = checkAttr(el, 'ref'))) {
+      applyDirective(el, ref, `"${exp}"`, ctx)
+    }
+
     // process children first before self attrs
     walkChildren(el, ctx)
 
@@ -167,6 +173,7 @@ const processDirective = (
     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)
   } else if (import.meta.env.DEV) {

tests/ref.html

@@ -0,0 +1,17 @@
+<script type="module">
+  import { createApp, reactive } from '../src'
+  createApp().mount()
+</script>
+
+<div
+  v-scope="{ dynamicRef: 'x', show: true }"
+  v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
+>
+  <input ref="input" />
+  <span v-if="show" :ref="dynamicRef">Span with dynamic ref</span>
+  <p>dynamicRef is {{ dynamicRef }}</p>
+  <button @click="dynamicRef = dynamicRef === 'x' ? 'y' : 'x'">
+    change dynamicRef
+  </button>
+  <button @click="show = !show">toggle</button>
+</div>