wip(mp): mp-alipay

package.json

@@ -85,7 +85,7 @@
     "module-alias": "^2.2.2",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.4.1",
     "rollup": "^2.35.1",
     "rollup-plugin-jscc": "^2.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",

packages/uni-cli-shared/package.json

@@ -21,6 +21,7 @@
     "@babel/parser": "^7.15.0",
     "@babel/types": "^7.15.0",
     "@rollup/pluginutils": "^4.1.1",
+    "@vue/compiler-core": "^3.2.20",
     "chokidar": "^3.5.2",
     "compare-versions": "^3.6.0",
     "debug": "^4.3.1",

packages/uni-cli-shared/src/vue/transforms/index.ts

-export * from './transformComponent'
+export * from './transformRef'
 export * from './transformPageHead'
+export * from './transformComponent'

packages/uni-cli-shared/src/vue/transforms/transformComponent.ts

@@ -7,10 +7,11 @@ import {
   TransformContext,
 } from '@vue/compiler-core'
 import { COMPONENT_BIND_LINK, COMPONENT_ON_LINK } from '../../mp/constants'
-import { isUserComponent } from '../utils'
+import { isUserComponent, createAttributeNode } from '../utils'
 
 export function createTransformComponentLink(
-  name: typeof COMPONENT_BIND_LINK | typeof COMPONENT_ON_LINK
+  name: typeof COMPONENT_BIND_LINK | typeof COMPONENT_ON_LINK,
+  type: NodeTypes.ATTRIBUTE | NodeTypes.DIRECTIVE = NodeTypes.DIRECTIVE
 ) {
   return function transformComponentLink(
     node: RootNode | TemplateChildNode,
@@ -19,13 +20,17 @@ export function createTransformComponentLink(
     if (!isUserComponent(node, context)) {
       return
     }
-    node.props.push({
-      type: NodeTypes.DIRECTIVE,
-      name: 'on',
-      modifiers: [],
-      loc: locStub,
-      arg: createSimpleExpression(name, true),
-      exp: createSimpleExpression('__l', true),
-    })
+    if (type === NodeTypes.DIRECTIVE) {
+      node.props.push({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        modifiers: [],
+        loc: locStub,
+        arg: createSimpleExpression(name, true),
+        exp: createSimpleExpression('__l', true),
+      })
+    } else {
+      node.props.push(createAttributeNode(name, '__l'))
+    }
   }
 }

packages/uni-cli-shared/src/vue/transforms/transformRef.ts

+import {
+  ComponentNode,
+  findProp,
+  NodeTypes,
+  RootNode,
+  SimpleExpressionNode,
+  TemplateChildNode,
+  TransformContext,
+} from '@vue/compiler-core'
+import {
+  addStaticClass,
+  VUE_REF,
+  VUE_REF_IN_FOR,
+  isUserComponent,
+} from '../utils'
+
+export function transformRef(
+  node: RootNode | TemplateChildNode,
+  context: TransformContext
+) {
+  if (!isUserComponent(node, context)) {
+    return
+  }
+  addVueRef(node, context)
+}
+
+function addVueRef(node: ComponentNode, context: TransformContext) {
+  // 仅配置了 ref 属性的，才需要增补 vue-ref
+  const refProp = findProp(node, 'ref')
+  if (!refProp) {
+    return
+  }
+  if (refProp.type === NodeTypes.ATTRIBUTE) {
+    refProp.name = 'data-' + VUE_REF
+  } else {
+    ;(refProp.arg as SimpleExpressionNode).content = 'data-' + VUE_REF
+  }
+
+  return addStaticClass(
+    node,
+    // ref-in-for
+    // ref
+    (context as unknown as { inVFor: boolean }).inVFor
+      ? VUE_REF_IN_FOR
+      : VUE_REF
+  )
+}

packages/uni-cli-shared/src/vue/utils.ts

 import { isComponentTag } from '@dcloudio/uni-shared'
 import {
+  AttributeNode,
   ComponentNode,
+  ElementNode,
   ElementTypes,
   isCoreComponent,
+  locStub,
   NodeTypes,
   RootNode,
   TemplateChildNode,
   TransformContext,
 } from '@vue/compiler-core'
 
+export const VUE_REF = 'r'
+export const VUE_REF_IN_FOR = 'r-i-f'
+
 export function isUserComponent(
   node: RootNode | TemplateChildNode,
   context: TransformContext
@@ -21,3 +27,42 @@ export function isUserComponent(
     !context.isBuiltInComponent(node.tag)
   )
 }
+
+export function createAttributeNode(
+  name: string,
+  content: string
+): AttributeNode {
+  return {
+    type: NodeTypes.ATTRIBUTE,
+    loc: locStub,
+    name,
+    value: {
+      type: NodeTypes.TEXT,
+      loc: locStub,
+      content,
+    },
+  }
+}
+
+function createClassAttribute(clazz: string): AttributeNode {
+  return createAttributeNode('class', clazz)
+}
+
+export function addStaticClass(node: ElementNode, clazz: string) {
+  const classProp = node.props.find(
+    (prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === 'class'
+  ) as AttributeNode | undefined
+
+  if (!classProp) {
+    return node.props.unshift(createClassAttribute(clazz))
+  }
+
+  if (classProp.value) {
+    return (classProp.value.content = classProp.value.content + ' ' + clazz)
+  }
+  classProp.value = {
+    type: NodeTypes.TEXT,
+    loc: locStub,
+    content: clazz,
+  }
+}

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

+import { assert } from './testUtils'
+
+describe('compiler: transform ref', () => {
+  test('without ref', () => {
+    assert(
+      `<custom/>`,
+      `<custom v-i="2a9ec0b0-0" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<custom/><custom/><custom1/>`,
+      `<custom v-i="2a9ec0b0-0" onVI="__l"/><custom v-i="2a9ec0b0-1" onVI="__l"/><custom1 v-i="2a9ec0b0-2" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+  test('static ref', () => {
+    assert(
+      `<custom ref="custom"/>`,
+      `<custom ref="__r" data-r="custom" v-i="2a9ec0b0-0" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<custom v-for="item in items" ref="custom"/>`,
+      `<custom a:for="{{a}}" a:for-item="item" ref="__r" data-r-i-f="custom" v-i="{{item.a}}" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return { a: _f(_ctx.items, (item, k0, i0) => { return { a: '2a9ec0b0-0' + '-' + i0 }; }) }
+}`
+    )
+  })
+  test('dynamic ref', () => {
+    assert(
+      `<custom :ref="custom"/>`,
+      `<custom ref="__r" data-r="{{a}}" v-i="2a9ec0b0-0" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.custom }
+}`
+    )
+    assert(
+      `<custom v-for="item in items" :ref="custom"/>`,
+      `<custom a:for="{{a}}" a:for-item="item" ref="__r" data-r-i-f="{{b}}" v-i="{{item.a}}" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return { a: _f(_ctx.items, (item, k0, i0) => { return { a: '2a9ec0b0-0' + '-' + i0 }; }), b: _ctx.custom }
+}`
+    )
+  })
+})

packages/uni-mp-alipay/__tests__/testUtils.ts

+import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared'
+import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler'
+
+import { miniProgram, nodeTransforms } from '../src/compiler/options'
+
+export function assert(
+  template: string,
+  templateCode: string,
+  renderCode: string,
+  options: CompilerOptions = {}
+) {
+  const res = compile(template, {
+    mode: 'module',
+    filename: 'foo.vue',
+    prefixIdentifiers: true,
+    inline: true,
+    isNativeTag,
+    isCustomElement,
+    generatorOpts: {
+      concise: true,
+    },
+    nodeTransforms,
+    miniProgram: {
+      ...miniProgram,
+      emitFile({ source }) {
+        // console.log(source)
+        if (!options.onError) {
+          expect(source).toBe(templateCode)
+        }
+        return ''
+      },
+    },
+    ...options,
+  })
+  if (!options.onError) {
+    expect(res.code).toBe(renderCode)
+  }
+}

packages/uni-mp-alipay/src/compiler/options.ts

@@ -2,13 +2,27 @@ import path from 'path'
 import {
   COMPONENT_ON_LINK,
   createTransformComponentLink,
+  MiniProgramCompilerOptions,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
-
+import { NodeTypes } from '@vue/compiler-core'
 import source from './mini.project.json'
+import { transformRef } from './transforms/transformRef'
 
 const projectConfigFilename = 'mini.project.json'
-
+export const miniProgram: MiniProgramCompilerOptions = {
+  class: {
+    array: false,
+  },
+  slot: {
+    fallback: true,
+  },
+  directive: 'a:',
+}
+export const nodeTransforms = [
+  transformRef,
+  createTransformComponentLink(COMPONENT_ON_LINK, NodeTypes.ATTRIBUTE),
+]
 export const options: UniMiniProgramPluginOptions = {
   vite: {
     inject: {
@@ -31,9 +45,8 @@ export const options: UniMiniProgramPluginOptions = {
     source,
   },
   template: {
-    class: {
-      array: false,
-    },
+    /* eslint-disable no-restricted-syntax */
+    ...miniProgram,
     filter: {
       extname: '.sjs',
       lang: 'sjs',
@@ -46,13 +59,9 @@ ${filter.code}
 </sjs>`
       },
     },
-    slot: {
-      fallback: true,
-    },
     extname: '.axml',
-    directive: 'a:',
     compilerOptions: {
-      nodeTransforms: [createTransformComponentLink(COMPONENT_ON_LINK)],
+      nodeTransforms,
     },
   },
   style: {

packages/uni-mp-alipay/src/compiler/transforms/transformRef.ts

+import {
+  createAttributeNode,
+  isUserComponent,
+  VUE_REF,
+  VUE_REF_IN_FOR,
+} from '@dcloudio/uni-cli-shared'
+import {
+  ComponentNode,
+  findProp,
+  NodeTypes,
+  RootNode,
+  SimpleExpressionNode,
+  TemplateChildNode,
+  TransformContext,
+} from '@vue/compiler-core'
+
+export function transformRef(
+  node: RootNode | TemplateChildNode,
+  context: TransformContext
+) {
+  if (!isUserComponent(node, context)) {
+    return
+  }
+  addVueRef(node, context)
+}
+
+function addVueRef(node: ComponentNode, context: TransformContext) {
+  // 仅配置了 ref 属性的，才需要增补 vue-ref
+  const refProp = findProp(node, 'ref')
+  if (!refProp) {
+    return
+  }
+  const dataRef =
+    'data-' +
+    ((context as unknown as { inVFor: boolean }).inVFor
+      ? VUE_REF_IN_FOR
+      : VUE_REF)
+  if (refProp.type === NodeTypes.ATTRIBUTE) {
+    refProp.name = dataRef
+  } else {
+    ;(refProp.arg as SimpleExpressionNode).content = dataRef
+  }
+  const { props } = node
+  props.splice(props.indexOf(refProp), 0, createAttributeNode('ref', '__r'))
+}

packages/uni-mp-baidu/__tests__/testUtils.ts

@@ -4,6 +4,7 @@ import { transformFor } from '../src/compiler/transforms/vFor'
 import { transformOn } from '../src/compiler/transforms/vOn'
 import { transformModel } from '../src/compiler/transforms/vModel'
 import { miniProgram } from '../src/compiler/options'
+import { transformRef } from '@dcloudio/uni-cli-shared'
 
 export function assert(
   template: string,
@@ -21,7 +22,7 @@ export function assert(
     generatorOpts: {
       concise: true,
     },
-    nodeTransforms: [transformFor],
+    nodeTransforms: [transformRef, transformFor],
     directiveTransforms: {
       on: transformOn,
       model: transformModel,

packages/uni-mp-baidu/dist/uni.compiler.js

@@ -2,8 +2,8 @@
 
 var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
 var path = require('path');
-var uniMpCompiler = require('@dcloudio/uni-mp-compiler');
 var uniCliShared = require('@dcloudio/uni-cli-shared');
+var uniMpCompiler = require('@dcloudio/uni-mp-compiler');
 var compilerCore = require('@vue/compiler-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -187,7 +187,7 @@ const options = {
   </import-sjs>`;
             },
         }, extname: '.swan', compilerOptions: {
-            nodeTransforms: [transformFor],
+            nodeTransforms: [uniCliShared.transformRef, transformFor],
             directiveTransforms: {
                 on: transformOn,
                 model: transformModel,

packages/uni-mp-baidu/dist/uni.mp.esm.js

@@ -367,7 +367,7 @@ function initWxsCallMethods(methods, wxsCallMethods) {
 function selectAllComponents(mpInstance, selector, $refs) {
     const components = mpInstance.selectAllComponents(selector);
     components.forEach((component) => {
-        const ref = component.dataset.ref;
+        const ref = component.dataset.r;
         $refs[ref] = component.$vm || component;
     });
 }
@@ -375,10 +375,10 @@ function initRefs(instance, mpInstance) {
     Object.defineProperty(instance, 'refs', {
         get() {
             const $refs = {};
-            selectAllComponents(mpInstance, '.v-r', $refs);
-            const forComponents = mpInstance.selectAllComponents('.v-r-i-f');
+            selectAllComponents(mpInstance, '.r', $refs);
+            const forComponents = mpInstance.selectAllComponents('.r-i-f');
             forComponents.forEach((component) => {
-                const ref = component.dataset.ref;
+                const ref = component.dataset.r;
                 if (!$refs[ref]) {
                     $refs[ref] = [];
                 }

packages/uni-mp-baidu/src/compiler/options.ts

 import path from 'path'
-import { MiniProgramCompilerOptions } from '@dcloudio/uni-cli-shared'
+import {
+  MiniProgramCompilerOptions,
+  transformRef,
+} from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 
 import source from './project.swan.json'
@@ -57,7 +60,7 @@ export const options: UniMiniProgramPluginOptions = {
     },
     extname: '.swan',
     compilerOptions: {
-      nodeTransforms: [transformFor],
+      nodeTransforms: [transformRef, transformFor],
       directiveTransforms: {
         on: transformOn,
         model: transformModel,

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

+import { transformRef } from '@dcloudio/uni-cli-shared'
 import { assert } from './testUtils'
 
+const nodeTransforms = [transformRef]
 describe('compiler: transform ref', () => {
   test('without ref', () => {
     assert(
@@ -7,46 +9,64 @@ describe('compiler: transform ref', () => {
       `<custom v-i="2a9ec0b0-0"/>`,
       `(_ctx, _cache) => {
   return {}
-}`
+}`,
+      {
+        nodeTransforms,
+      }
     )
     assert(
       `<custom/><custom/><custom1/>`,
       `<custom v-i="2a9ec0b0-0"/><custom v-i="2a9ec0b0-1"/><custom1 v-i="2a9ec0b0-2"/>`,
       `(_ctx, _cache) => {
   return {}
-}`
+}`,
+      {
+        nodeTransforms,
+      }
     )
   })
   test('static ref', () => {
     assert(
       `<custom ref="custom"/>`,
-      `<custom class="v-r" data-ref="custom" v-i="2a9ec0b0-0"/>`,
+      `<custom class="r" data-r="custom" v-i="2a9ec0b0-0"/>`,
       `(_ctx, _cache) => {
   return {}
-}`
+}`,
+      {
+        nodeTransforms,
+      }
     )
     assert(
       `<custom v-for="item in items" ref="custom"/>`,
-      `<custom wx:for="{{a}}" wx:for-item="item" class="v-r-i-f" data-ref="custom" v-i="{{item.a}}"/>`,
+      `<custom wx:for="{{a}}" wx:for-item="item" class="r-i-f" data-r="custom" v-i="{{item.a}}"/>`,
       `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return { a: '2a9ec0b0-0' + '-' + i0 }; }) }
-}`
+}`,
+      {
+        nodeTransforms,
+      }
     )
   })
   test('dynamic ref', () => {
     assert(
       `<custom :ref="custom"/>`,
-      `<custom class="v-r" data-ref="{{a}}" v-i="2a9ec0b0-0"/>`,
+      `<custom class="r" data-r="{{a}}" v-i="2a9ec0b0-0"/>`,
       `(_ctx, _cache) => {
   return { a: _ctx.custom }
-}`
+}`,
+      {
+        nodeTransforms,
+      }
     )
     assert(
       `<custom v-for="item in items" :ref="custom"/>`,
-      `<custom wx:for="{{a}}" wx:for-item="item" class="v-r-i-f" data-ref="{{b}}" v-i="{{item.a}}"/>`,
+      `<custom wx:for="{{a}}" wx:for-item="item" class="r-i-f" data-r="{{b}}" v-i="{{item.a}}"/>`,
       `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return { a: '2a9ec0b0-0' + '-' + i0 }; }), b: _ctx.custom }
-}`
+}`,
+      {
+        nodeTransforms,
+      }
     )
   })
 })

packages/uni-mp-compiler/src/ast.ts

@@ -26,7 +26,6 @@ import {
   isNullLiteral,
 } from '@babel/types'
 import {
-  AttributeNode,
   createCompilerError,
   createSimpleExpression,
   DirectiveNode,
@@ -174,19 +173,3 @@ export function createOnDirectiveNode(name: string, value: string) {
 export function createBindDirectiveNode(name: string, value: string) {
   return createDirectiveNode('bind', name, value)
 }
-
-export function createAttributeNode(
-  name: string,
-  content: string
-): AttributeNode {
-  return {
-    type: NodeTypes.ATTRIBUTE,
-    loc: locStub,
-    name,
-    value: {
-      type: NodeTypes.TEXT,
-      loc: locStub,
-      content,
-    },
-  }
-}

packages/uni-mp-compiler/src/transform.ts

@@ -57,6 +57,7 @@ import {
 } from './options'
 import { EXTEND } from './runtimeHelpers'
 import { createObjectExpression } from './ast'
+import { SCOPED_SLOT_IDENTIFIER } from './transforms/utils'
 
 export interface ImportItem {
   exp: string | ExpressionNode
@@ -114,6 +115,7 @@ export interface TransformContext
   currentVueId: string
   vueIds: string[]
   inVOnce: boolean
+  inVFor: boolean
   helper<T extends symbol>(name: T): T
   removeHelper<T extends symbol>(name: T): void
   helperString(name: symbol): string
@@ -140,6 +142,17 @@ export function isVForScope(scope: CodegenScope): scope is CodegenVForScope {
   return !!(scope as CodegenVForScope).source
 }
 
+export function isScopedSlotVFor({ source }: CodegenVForScope) {
+  if (source.type !== NodeTypes.COMPOUND_EXPRESSION) {
+    return false
+  }
+  const first = source.children[0] as ExpressionNode
+  return (
+    first.type === NodeTypes.SIMPLE_EXPRESSION &&
+    first.content.includes(SCOPED_SLOT_IDENTIFIER)
+  )
+}
+
 export function transform(root: CodegenRootNode, options: TransformOptions) {
   const context = createTransformContext(root, options)
   traverseNode(root, context)
@@ -346,6 +359,16 @@ export function createTransformContext(
       return vueIds[vueIds.length - 1]
     },
     inVOnce: false,
+    get inVFor() {
+      let parent: CodegenScope | null = scopes[scopes.length - 1]
+      while (parent) {
+        if (isVForScope(parent) && !isScopedSlotVFor(parent)) {
+          return true
+        }
+        parent = parent.parent
+      }
+      return false
+    },
     // methods
     popScope() {
       return scopes.pop()

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

-import {
-  ComponentNode,
-  findProp,
-  NodeTypes,
-  SimpleExpressionNode,
-} from '@vue/compiler-core'
-import { isUserComponent } from '@dcloudio/uni-cli-shared'
+import { ComponentNode } from '@vue/compiler-core'
+import { createAttributeNode, isUserComponent } from '@dcloudio/uni-cli-shared'
 import { isVForScope, NodeTransform, TransformContext } from '../transform'
-import { createAttributeNode, createBindDirectiveNode } from '../ast'
-import { addStaticClass } from './transformElement'
-import { ATTR_VUE_ID, CLASS_VUE_REF, CLASS_VUE_REF_IN_FOR } from './utils'
-import { CodegenScope } from '../options'
-import { isScopedSlotVFor } from './vSlot'
+import { createBindDirectiveNode } from '../ast'
+import { ATTR_VUE_ID } from './utils'
 
 export const transformComponent: NodeTransform = (node, context) => {
   if (!isUserComponent(node, context as any)) {
     return
   }
-  addVueRef(node, context)
   addVueId(node, context)
   return function postTransformComponent() {
     context.vueIds.pop()
@@ -60,34 +51,3 @@ function addVueId(node: ComponentNode, context: TransformContext) {
   }
   return node.props.push(createAttributeNode(ATTR_VUE_ID, value))
 }
-
-function addVueRef(node: ComponentNode, context: TransformContext) {
-  // 仅配置了 ref 属性的，才需要增补 vue-ref
-  const refProp = findProp(node, 'ref')
-  if (!refProp) {
-    return
-  }
-  if (refProp.type === NodeTypes.ATTRIBUTE) {
-    refProp.name = 'data-ref'
-  } else {
-    ;(refProp.arg as SimpleExpressionNode).content = 'data-ref'
-  }
-
-  return addStaticClass(
-    node,
-    // vue-ref-in-for
-    // vue-ref
-    isInVFor(context.currentScope) ? CLASS_VUE_REF_IN_FOR : CLASS_VUE_REF
-  )
-}
-
-function isInVFor(scope: CodegenScope) {
-  let parent: CodegenScope | null = scope
-  while (parent) {
-    if (isVForScope(parent) && !isScopedSlotVFor(parent)) {
-      return true
-    }
-    parent = parent.parent
-  }
-  return false
-}

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

@@ -14,8 +14,6 @@ import {
   UNREF,
   toValidAssetId,
   findDir,
-  locStub,
-  AttributeNode,
   DirectiveNode,
   ComponentNode,
 } from '@vue/compiler-core'
@@ -29,8 +27,8 @@ import {
   NodeTransform,
   TransformContext,
 } from '../transform'
-import { createAttributeNode } from '../ast'
 import { transformModel } from './vModel'
+import { addStaticClass } from '@dcloudio/uni-cli-shared'
 
 export interface DirectiveTransformResult {
   props: Property[]
@@ -63,29 +61,6 @@ export const transformElement: NodeTransform = (node, context) => {
   }
 }
 
-function createClassAttribute(clazz: string): AttributeNode {
-  return createAttributeNode('class', clazz)
-}
-
-export function addStaticClass(node: ElementNode, clazz: string) {
-  const classProp = node.props.find(
-    (prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === 'class'
-  ) as AttributeNode | undefined
-
-  if (!classProp) {
-    return node.props.unshift(createClassAttribute(clazz))
-  }
-
-  if (classProp.value) {
-    return (classProp.value.content = classProp.value.content + ' ' + clazz)
-  }
-  classProp.value = {
-    type: NodeTypes.TEXT,
-    loc: locStub,
-    content: clazz,
-  }
-}
-
 function addScopeId(node: ElementNode, scopeId: string) {
   return addStaticClass(node, scopeId)
 }

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

@@ -25,8 +25,6 @@ import { isVForScope, isVIfScope, TransformContext } from '../transform'
 
 export const ATTR_VUE_ID = 'v-i'
 export const ATTR_VUE_SLOTS = 'v-s'
-export const CLASS_VUE_REF = 'v-r'
-export const CLASS_VUE_REF_IN_FOR = 'v-r-i-f'
 export const SCOPED_SLOT_IDENTIFIER = '__SCOPED_SLOT__'
 
 export function rewriteSpreadElement(

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

@@ -17,6 +17,7 @@ import {
 import { parseExpr, parseParam } from '../ast'
 import {
   createStructuralDirectiveTransform,
+  isScopedSlotVFor,
   NodeTransform,
   TransformContext,
 } from '../transform'
@@ -39,7 +40,7 @@ import {
 import { rewriteExpression } from './utils'
 import { CodegenVForScope } from '../options'
 import { V_FOR } from '../runtimeHelpers'
-import { createVSlotCallExpression, isScopedSlotVFor } from './vSlot'
+import { createVSlotCallExpression } from './vSlot'
 
 export type VForOptions = Omit<ForParseResult, 'tagType'> & {
   sourceExpr?: Expression
@@ -62,6 +63,7 @@ export type ForElementNode = ElementNode & {
 export function isForElementNode(node: unknown): node is ForElementNode {
   return !!(node as ForElementNode).vFor
 }
+
 export const transformFor = createStructuralDirectiveTransform(
   'for',
   (node, dir, context) => {

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

@@ -164,17 +164,6 @@ export function findSlotName(slotDir: DirectiveNode) {
   }
 }
 
-export function isScopedSlotVFor({ source }: CodegenVForScope) {
-  if (source.type !== NodeTypes.COMPOUND_EXPRESSION) {
-    return false
-  }
-  const first = source.children[0] as ExpressionNode
-  return (
-    first.type === NodeTypes.SIMPLE_EXPRESSION &&
-    first.content.includes(SCOPED_SLOT_IDENTIFIER)
-  )
-}
-
 function findCurrentVForValueAlias(context: TransformContext) {
   let scope: CodegenScope | null = context.currentScope
   while (scope) {

packages/uni-mp-core/src/runtime/util.ts

@@ -63,7 +63,7 @@ function selectAllComponents(
 ) {
   const components = mpInstance.selectAllComponents(selector)
   components.forEach((component) => {
-    const ref = component.dataset.ref
+    const ref = component.dataset.r
     $refs[ref] = component.$vm || component
     if (__PLATFORM__ === 'mp-weixin') {
       if (component.dataset.vueGeneric === 'scoped') {
@@ -88,10 +88,10 @@ export function initRefs(
   Object.defineProperty(instance, 'refs', {
     get() {
       const $refs: Record<string, any> = {}
-      selectAllComponents(mpInstance, '.v-r', $refs)
-      const forComponents = mpInstance.selectAllComponents('.v-r-i-f')
+      selectAllComponents(mpInstance, '.r', $refs)
+      const forComponents = mpInstance.selectAllComponents('.r-i-f')
       forComponents.forEach((component) => {
-        const ref = component.dataset.ref
+        const ref = component.dataset.r
         if (!$refs[ref]) {
           $refs[ref] = []
         }

packages/uni-mp-kuaishou/dist/uni.mp.esm.js

@@ -364,7 +364,7 @@ function initWxsCallMethods(methods, wxsCallMethods) {
 function selectAllComponents(mpInstance, selector, $refs) {
     const components = mpInstance.selectAllComponents(selector);
     components.forEach((component) => {
-        const ref = component.dataset.ref;
+        const ref = component.dataset.r;
         $refs[ref] = component.$vm || component;
     });
 }
@@ -372,10 +372,10 @@ function initRefs(instance, mpInstance) {
     Object.defineProperty(instance, 'refs', {
         get() {
             const $refs = {};
-            selectAllComponents(mpInstance, '.v-r', $refs);
-            const forComponents = mpInstance.selectAllComponents('.v-r-i-f');
+            selectAllComponents(mpInstance, '.r', $refs);
+            const forComponents = mpInstance.selectAllComponents('.r-i-f');
             forComponents.forEach((component) => {
-                const ref = component.dataset.ref;
+                const ref = component.dataset.r;
                 if (!$refs[ref]) {
                     $refs[ref] = [];
                 }

packages/uni-mp-qq/dist/uni.compiler.js

@@ -82,6 +82,10 @@ var source = {
 	condition: condition
 };
 
+const nodeTransforms = [
+    uniCliShared.transformRef,
+    uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
+];
 const options = {
     vite: {
         inject: {
@@ -133,7 +137,7 @@ const options = {
         extname: '.qml',
         directive: 'qq:',
         compilerOptions: {
-            nodeTransforms: [uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK)],
+            nodeTransforms,
         },
     },
     style: {

packages/uni-mp-qq/dist/uni.mp.esm.js

@@ -364,7 +364,7 @@ function initWxsCallMethods(methods, wxsCallMethods) {
 function selectAllComponents(mpInstance, selector, $refs) {
     const components = mpInstance.selectAllComponents(selector);
     components.forEach((component) => {
-        const ref = component.dataset.ref;
+        const ref = component.dataset.r;
         $refs[ref] = component.$vm || component;
     });
 }
@@ -372,10 +372,10 @@ function initRefs(instance, mpInstance) {
     Object.defineProperty(instance, 'refs', {
         get() {
             const $refs = {};
-            selectAllComponents(mpInstance, '.v-r', $refs);
-            const forComponents = mpInstance.selectAllComponents('.v-r-i-f');
+            selectAllComponents(mpInstance, '.r', $refs);
+            const forComponents = mpInstance.selectAllComponents('.r-i-f');
             forComponents.forEach((component) => {
-                const ref = component.dataset.ref;
+                const ref = component.dataset.r;
                 if (!$refs[ref]) {
                     $refs[ref] = [];
                 }

packages/uni-mp-qq/src/compiler/options.ts

@@ -3,11 +3,16 @@ import path from 'path'
 import {
   COMPONENT_BIND_LINK,
   createTransformComponentLink,
+  transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 
 import source from './project.config.json'
 
+export const nodeTransforms = [
+  transformRef,
+  createTransformComponentLink(COMPONENT_BIND_LINK),
+]
 export const options: UniMiniProgramPluginOptions = {
   vite: {
     inject: {
@@ -59,7 +64,7 @@ export const options: UniMiniProgramPluginOptions = {
     extname: '.qml',
     directive: 'qq:',
     compilerOptions: {
-      nodeTransforms: [createTransformComponentLink(COMPONENT_BIND_LINK)],
+      nodeTransforms,
     },
   },
   style: {

packages/uni-mp-toutiao/dist/uni.compiler.js

@@ -74,7 +74,10 @@ ${filter.code}
         extname: '.ttml',
         directive: 'tt:',
         compilerOptions: {
-            nodeTransforms: [uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK)],
+            nodeTransforms: [
+                uniCliShared.transformRef,
+                uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
+            ],
         },
     },
     style: {

packages/uni-mp-toutiao/dist/uni.mp.esm.js

@@ -367,7 +367,7 @@ function initWxsCallMethods(methods, wxsCallMethods) {
 function selectAllComponents(mpInstance, selector, $refs) {
     const components = mpInstance.selectAllComponents(selector);
     components.forEach((component) => {
-        const ref = component.dataset.ref;
+        const ref = component.dataset.r;
         $refs[ref] = component.$vm || component;
     });
 }
@@ -375,10 +375,10 @@ function initRefs(instance, mpInstance) {
     Object.defineProperty(instance, 'refs', {
         get() {
             const $refs = {};
-            selectAllComponents(mpInstance, '.v-r', $refs);
-            const forComponents = mpInstance.selectAllComponents('.v-r-i-f');
+            selectAllComponents(mpInstance, '.r', $refs);
+            const forComponents = mpInstance.selectAllComponents('.r-i-f');
             forComponents.forEach((component) => {
-                const ref = component.dataset.ref;
+                const ref = component.dataset.r;
                 if (!$refs[ref]) {
                     $refs[ref] = [];
                 }

packages/uni-mp-toutiao/src/compiler/options.ts

@@ -2,6 +2,7 @@ import path from 'path'
 import {
   COMPONENT_BIND_LINK,
   createTransformComponentLink,
+  transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 
@@ -52,7 +53,10 @@ ${filter.code}
     extname: '.ttml',
     directive: 'tt:',
     compilerOptions: {
-      nodeTransforms: [createTransformComponentLink(COMPONENT_BIND_LINK)],
+      nodeTransforms: [
+        transformRef,
+        createTransformComponentLink(COMPONENT_BIND_LINK),
+      ],
     },
   },
   style: {

packages/uni-mp-weixin/dist/uni.compiler.js

@@ -120,7 +120,10 @@ ${filter.code}
             isCustomElement: (tag) => {
                 return ['page-meta', 'navigation-bar', 'match-media'].includes(tag);
             },
-            nodeTransforms: [uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK)],
+            nodeTransforms: [
+                uniCliShared.transformRef,
+                uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
+            ],
         },
     },
     style: {

packages/uni-mp-weixin/dist/uni.mp.esm.js

@@ -301,7 +301,7 @@ function initWxsCallMethods(methods, wxsCallMethods) {
 function selectAllComponents(mpInstance, selector, $refs) {
     const components = mpInstance.selectAllComponents(selector);
     components.forEach((component) => {
-        const ref = component.dataset.ref;
+        const ref = component.dataset.r;
         $refs[ref] = component.$vm || component;
         {
             if (component.dataset.vueGeneric === 'scoped') {
@@ -318,10 +318,10 @@ function initRefs(instance, mpInstance) {
     Object.defineProperty(instance, 'refs', {
         get() {
             const $refs = {};
-            selectAllComponents(mpInstance, '.v-r', $refs);
-            const forComponents = mpInstance.selectAllComponents('.v-r-i-f');
+            selectAllComponents(mpInstance, '.r', $refs);
+            const forComponents = mpInstance.selectAllComponents('.r-i-f');
             forComponents.forEach((component) => {
-                const ref = component.dataset.ref;
+                const ref = component.dataset.r;
                 if (!$refs[ref]) {
                     $refs[ref] = [];
                 }

packages/uni-mp-weixin/src/compiler/options.ts

@@ -3,6 +3,7 @@ import path from 'path'
 import {
   COMPONENT_BIND_LINK,
   createTransformComponentLink,
+  transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 
@@ -71,7 +72,10 @@ ${filter.code}
       isCustomElement: (tag) => {
         return ['page-meta', 'navigation-bar', 'match-media'].includes(tag)
       },
-      nodeTransforms: [createTransformComponentLink(COMPONENT_BIND_LINK)],
+      nodeTransforms: [
+        transformRef,
+        createTransformComponentLink(COMPONENT_BIND_LINK),
+      ],
     },
   },
   style: {

packages/uni-quickapp-webview/dist/uni.mp.esm.js

@@ -364,7 +364,7 @@ function initWxsCallMethods(methods, wxsCallMethods) {
 function selectAllComponents(mpInstance, selector, $refs) {
     const components = mpInstance.selectAllComponents(selector);
     components.forEach((component) => {
-        const ref = component.dataset.ref;
+        const ref = component.dataset.r;
         $refs[ref] = component.$vm || component;
     });
 }
@@ -372,10 +372,10 @@ function initRefs(instance, mpInstance) {
     Object.defineProperty(instance, 'refs', {
         get() {
             const $refs = {};
-            selectAllComponents(mpInstance, '.v-r', $refs);
-            const forComponents = mpInstance.selectAllComponents('.v-r-i-f');
+            selectAllComponents(mpInstance, '.r', $refs);
+            const forComponents = mpInstance.selectAllComponents('.r-i-f');
             forComponents.forEach((component) => {
-                const ref = component.dataset.ref;
+                const ref = component.dataset.r;
                 if (!$refs[ref]) {
                     $refs[ref] = [];
                 }

yarn.lock

@@ -8462,7 +8462,7 @@ prettier@^1.18.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-prettier@^2.2.1:
+prettier@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
   integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==