wip(mp): ref

packages/uni-mp-compiler/__tests__/ref.spec.ts

@@ -7,6 +7,13 @@ describe('compiler: transform ref', () => {
       `<custom class="vue-ref"/>`,
       `(_ctx, _cache) => {
   return {}
+}`
+    )
+    assert(
+      `<custom/><custom/>`,
+      `<custom class="vue-ref"/><custom class="vue-ref"/>`,
+      `(_ctx, _cache) => {
+  return {}
 }`
     )
   })
@@ -16,6 +23,24 @@ describe('compiler: transform ref', () => {
       `<custom wx:for="{{a}}" wx:for-item="item" class="vue-ref-in-for"/>`,
       `(_ctx, _cache) => {
   return { a: _vFor(_ctx.items, item => { return {}; }) }
+}`
+    )
+  })
+  test('static ref', () => {
+    assert(
+      `<custom ref="custom"/>`,
+      `<custom class="vue-ref" data-ref="custom"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+  test('dynamic ref', () => {
+    assert(
+      `<custom :ref="custom"/>`,
+      `<custom class="vue-ref" data-ref="{{a}}"/>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.custom }
 }`
     )
   })

packages/uni-mp-compiler/__tests__/test.spec.ts

@@ -37,10 +37,10 @@ function assert(
 describe('compiler', () => {
   test('scope', () => {
     assert(
-      `<template v-if="ok"><view/>hello<view/></template>`,
+      `<view :style="{ color: \`\${green}px\` }"/>`,
       `<view style="{{'color:' + a}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.ok, ...(_ctx.ok ? {} : {}) }
+  return { a: \`\${_ctx.green}px\` }
 }`
     )
   })

packages/uni-mp-compiler/src/transforms/transformElement.ts

@@ -95,7 +95,7 @@ function addVueRef(node: ElementNode, context: TransformContext) {
 function processComponent(node: ElementNode, context: TransformContext) {
   const { tag } = node
   if (context.bindingComponents[tag]) {
-    return
+    return addVueRef(node, context)
   }
 
   // 1. dynamic component
@@ -217,7 +217,12 @@ function processProps(node: ElementNode, context: TransformContext) {
 
   for (let i = 0; i < props.length; i++) {
     const prop = props[i]
-    if (prop.type === NodeTypes.DIRECTIVE) {
+    if (prop.type === NodeTypes.ATTRIBUTE) {
+      // <custom ref="c"/> => <custom data-ref="c"/>
+      if (prop.name === 'ref') {
+        prop.name = 'data-ref'
+      }
+    } else {
       // directives
       const { name, arg, loc } = prop
       const isVBind = name === 'bind'
@@ -276,6 +281,16 @@ function processProps(node: ElementNode, context: TransformContext) {
         }
       }
 
+      if (isVBind) {
+        // <custom :ref="c"/> => <custom :data-ref="c" />
+        if (
+          arg?.type === NodeTypes.SIMPLE_EXPRESSION &&
+          arg.content === 'ref'
+        ) {
+          arg.content = 'data-ref'
+        }
+      }
+
       const directiveTransform = context.directiveTransforms[name]
       if (directiveTransform) {
         prop.exp = directiveTransform(prop, node, context).props[0]

packages/uni-mp-compiler/src/transforms/vFor.ts

@@ -131,6 +131,7 @@ export const transformFor = createStructuralDirectiveTransform(
     scopes.vFor++
 
     return () => {
+      scopes.vFor--
       if (isTemplateNode(node)) {
         node.children.some((c) => {
           if (c.type === NodeTypes.ELEMENT && !isForElementNode(c)) {