wip(mp): mp-alipay

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

@@ -2,8 +2,9 @@ export * from './fs'
 export * from './mp'
 export * from './env'
 export * from './hbx'
-export * from './logs'
 export * from './ssr'
+export * from './vue'
+export * from './logs'
 export * from './i18n'
 export * from './deps'
 export * from './json'
@@ -16,7 +17,6 @@ export * from './postcss'
 export * from './filter'
 export * from './esbuild'
 
-export * from './vue/transforms'
 export { M } from './messages'
 
 export * from './exports'

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

+export * from './transforms'
+export * from './utils'

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

-import { isComponentTag } from '@dcloudio/uni-shared'
 import {
   createSimpleExpression,
-  ElementTypes,
-  isCoreComponent,
   locStub,
   NodeTypes,
   RootNode,
@@ -10,6 +7,7 @@ import {
   TransformContext,
 } from '@vue/compiler-core'
 import { COMPONENT_BIND_LINK, COMPONENT_ON_LINK } from '../../mp/constants'
+import { isUserComponent } from '../utils'
 
 export function createTransformComponentLink(
   name: typeof COMPONENT_BIND_LINK | typeof COMPONENT_ON_LINK
@@ -18,26 +16,16 @@ export function createTransformComponentLink(
     node: RootNode | TemplateChildNode,
     context: TransformContext
   ) {
-    if (
-      node.type === NodeTypes.ELEMENT &&
-      node.tagType === ElementTypes.COMPONENT
-    ) {
-      const { tag } = node
-      if (
-        isComponentTag(tag) ||
-        isCoreComponent(tag) ||
-        context.isBuiltInComponent(tag)
-      ) {
-        return
-      }
-      node.props.push({
-        type: NodeTypes.DIRECTIVE,
-        name: 'on',
-        modifiers: [],
-        loc: locStub,
-        arg: createSimpleExpression(name, true),
-        exp: createSimpleExpression('__l', true),
-      })
+    if (!isUserComponent(node, context)) {
+      return
     }
+    node.props.push({
+      type: NodeTypes.DIRECTIVE,
+      name: 'on',
+      modifiers: [],
+      loc: locStub,
+      arg: createSimpleExpression(name, true),
+      exp: createSimpleExpression('__l', true),
+    })
   }
 }

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

+import { isComponentTag } from '@dcloudio/uni-shared'
+import {
+  ComponentNode,
+  ElementTypes,
+  isCoreComponent,
+  NodeTypes,
+  RootNode,
+  TemplateChildNode,
+  TransformContext,
+} from '@vue/compiler-core'
+
+export function isUserComponent(
+  node: RootNode | TemplateChildNode,
+  context: TransformContext
+): node is ComponentNode {
+  return (
+    node.type === NodeTypes.ELEMENT &&
+    node.tagType === ElementTypes.COMPONENT &&
+    !isComponentTag(node.tag) &&
+    !isCoreComponent(node.tag) &&
+    !context.isBuiltInComponent(node.tag)
+  )
+}

packages/uni-mp-alipay/build.json

-{
-  "input": {
-    "src/runtime/index.ts": "dist/uni.mp.esm.js",
-    "src/api/index.ts": "dist/uni.api.esm.js"
+[
+  {
+    "input": {
+      "src/compiler/index.ts": "dist/uni.compiler.js"
+    },
+    "output": {
+      "format": "cjs"
+    },
+    "external": ["@dcloudio/uni-cli-shared", "@dcloudio/uni-mp-vite"]
   },
-  "alias": {
-    "entries": [
-      {
-        "find": "@dcloudio/uni-platform",
-        "replacement": "packages/uni-mp-alipay/src/platform/index.ts"
-      },
-      {
-        "find": "@dcloudio/uni-mp-platform",
-        "replacement": "packages/uni-mp-core/src/platform/index.ts"
-      }
-    ]
-  },
-  "replacements": {
-    "__GLOBAL__": "my",
-    "__PLATFORM__": "\"mp-alipay\"",
-    "__PLATFORM_TITLE__": "支付宝小程序"
-  },
-  "external": ["@dcloudio/uni-i18n", "@vue/shared", "vue"]
-}
+  {
+    "input": {
+      "src/runtime/index.ts": "dist/uni.mp.esm.js",
+      "src/api/index.ts": "dist/uni.api.esm.js"
+    },
+    "alias": {
+      "entries": [
+        {
+          "find": "@dcloudio/uni-platform",
+          "replacement": "packages/uni-mp-alipay/src/platform/index.ts"
+        },
+        {
+          "find": "@dcloudio/uni-mp-platform",
+          "replacement": "packages/uni-mp-core/src/platform/index.ts"
+        }
+      ]
+    },
+    "replacements": {
+      "__GLOBAL__": "my",
+      "__PLATFORM__": "\"mp-alipay\"",
+      "__PLATFORM_TITLE__": "支付宝小程序"
+    },
+    "external": ["@dcloudio/uni-i18n", "@vue/shared", "vue"]
+  }
+]

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

+'use strict';
+
+var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
+var path = require('path');
+var uniCliShared = require('@dcloudio/uni-cli-shared');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var initMiniProgramPlugin__default = /*#__PURE__*/_interopDefaultLegacy(initMiniProgramPlugin);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
+var component2 = true;
+var enableAppxNg = true;
+var source = {
+	component2: component2,
+	enableAppxNg: enableAppxNg
+};
+
+const projectConfigFilename = 'mini.project.json';
+const options = {
+    vite: {
+        inject: {
+            uni: [path__default["default"].resolve(__dirname, 'uni.api.esm.js'), 'default'],
+        },
+        alias: {
+            'uni-mp-runtime': path__default["default"].resolve(__dirname, 'uni.mp.esm.js'),
+        },
+        copyOptions: {
+            assets: ['mycomponents'],
+        },
+    },
+    global: 'my',
+    app: {
+        darkmode: false,
+        subpackages: true,
+    },
+    project: {
+        filename: projectConfigFilename,
+        source,
+    },
+    template: {
+        class: {
+            array: false,
+        },
+        filter: {
+            extname: '.sjs',
+            lang: 'sjs',
+            generate(filter, filename) {
+                if (filename) {
+                    return `<sjs src="${filename}.sjs" module="${filter.name}"/>`;
+                }
+                return `<sjs module="${filter.name}">
+${filter.code}
+</sjs>`;
+            },
+        },
+        slot: {
+            fallback: true,
+        },
+        extname: '.axml',
+        directive: 'a:',
+        compilerOptions: {
+            nodeTransforms: [uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_ON_LINK)],
+        },
+    },
+    style: {
+        extname: '.acss',
+    },
+};
+
+const uniMiniProgramAlipayPlugin = {
+    name: 'vite:uni-mp-alipay',
+    config() {
+        return {
+            define: {
+                __VUE_CREATED_DEFERRED__: false,
+            },
+            build: {
+                assetsInlineLimit: 0,
+            },
+        };
+    },
+};
+var index = [uniMiniProgramAlipayPlugin, ...initMiniProgramPlugin__default["default"](options)];
+
+module.exports = index;

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

+import { Plugin } from 'vite'
+import initMiniProgramPlugin from '@dcloudio/uni-mp-vite'
+
+import { options } from './options'
+
+const uniMiniProgramAlipayPlugin: Plugin = {
+  name: 'vite:uni-mp-alipay',
+  config() {
+    return {
+      define: {
+        __VUE_CREATED_DEFERRED__: false,
+      },
+      build: {
+        assetsInlineLimit: 0,
+      },
+    }
+  },
+}
+
+export default [uniMiniProgramAlipayPlugin, ...initMiniProgramPlugin(options)]

packages/uni-mp-alipay/src/compiler/mini.project.json

+{
+  "component2": true,
+  "enableAppxNg": true
+}

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

+import path from 'path'
+import {
+  COMPONENT_ON_LINK,
+  createTransformComponentLink,
+} from '@dcloudio/uni-cli-shared'
+import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
+
+import source from './mini.project.json'
+
+const projectConfigFilename = 'mini.project.json'
+
+export const options: UniMiniProgramPluginOptions = {
+  vite: {
+    inject: {
+      uni: [path.resolve(__dirname, 'uni.api.esm.js'), 'default'],
+    },
+    alias: {
+      'uni-mp-runtime': path.resolve(__dirname, 'uni.mp.esm.js'),
+    },
+    copyOptions: {
+      assets: ['mycomponents'],
+    },
+  },
+  global: 'my',
+  app: {
+    darkmode: false,
+    subpackages: true,
+  },
+  project: {
+    filename: projectConfigFilename,
+    source,
+  },
+  template: {
+    class: {
+      array: false,
+    },
+    filter: {
+      extname: '.sjs',
+      lang: 'sjs',
+      generate(filter, filename) {
+        if (filename) {
+          return `<sjs src="${filename}.sjs" module="${filter.name}"/>`
+        }
+        return `<sjs module="${filter.name}">
+${filter.code}
+</sjs>`
+      },
+    },
+    slot: {
+      fallback: true,
+    },
+    extname: '.axml',
+    directive: 'a:',
+    compilerOptions: {
+      nodeTransforms: [createTransformComponentLink(COMPONENT_ON_LINK)],
+    },
+  },
+  style: {
+    extname: '.acss',
+  },
+}

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

@@ -3,6 +3,7 @@
 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 compilerCore = require('@vue/compiler-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -66,7 +67,7 @@ const transformOn = (dir, node, context, augmentor) => {
         !exp ||
         !compilerCore.isStaticExp(arg) ||
         !isCustomEvent(arg.content) ||
-        !uniMpCompiler.isUserComponent(node, context)) {
+        !uniCliShared.isUserComponent(node, context)) {
         return res;
     }
     const value = res.props[0].value;
@@ -134,7 +135,7 @@ function isCustomEvent(name) {
 const transformModel = (dir, node, context, augmentor) => {
     const res = uniMpCompiler.transformModel(dir, node, context, augmentor);
     const props = res.props;
-    if (props.length < 2 || !uniMpCompiler.isUserComponent(node, context)) {
+    if (props.length < 2 || !uniCliShared.isUserComponent(node, context)) {
         return res;
     }
     const { arg, exp } = props[1];

packages/uni-mp-baidu/src/compiler/transforms/vModel.ts

+import { isUserComponent } from '@dcloudio/uni-cli-shared'
 import {
   DirectiveNode,
   DirectiveTransform,
-  isUserComponent,
   SimpleExpressionNode,
   transformModel as baseTransformModel,
 } from '@dcloudio/uni-mp-compiler'

packages/uni-mp-baidu/src/compiler/transforms/vOn.ts

+import { isUserComponent } from '@dcloudio/uni-cli-shared'
 import {
   DirectiveTransform,
-  isUserComponent,
   transformOn as baseTransformOn,
 } from '@dcloudio/uni-mp-compiler'
 import {

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

@@ -38,10 +38,10 @@ function assert(
 describe('compiler', () => {
   test('scope', () => {
     assert(
-      `<unicloud-db v-slot:default="{data, loading, error, options}" collection=""><view v-if="error">{{error.message}}</view><view v-else></view></unicloud-db>`,
-      `<unicloud-db v-s="{{['default']}}" collection="" v-i="2a9ec0b0-0" slot="default"><block wx:for="{{a}}" wx:for-item="v0" wx:key="c"><view wx:if="{{v0.a}}">{{v0.b}}</view><view wx:else></view></block></unicloud-db>`,
+      `<custom :ref="custom"/>`,
+      `<custom class="v-r" data-ref="{{a}}" v-i="2a9ec0b0-0"/>`,
       `(_ctx, _cache) => {
-  return { a: _w(({ data, loading, error, options }, s0, i0) => { return _e({ a: error }, error ? { b: _t(error.message) } : {}, { c: s0 }); }, { name: 'default', vueId: '2a9ec0b0-0' }) }
+  return { a: _ctx.custom }
 }`
     )
   })

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

@@ -22,7 +22,6 @@ export type {
 
 export { genExpr } from './codegen'
 export { isForElementNode } from './transforms/vFor'
-export { isUserComponent } from './transforms/utils'
 export { transformOn } from './transforms/vOn'
 export { transformModel } from './transforms/vModel'
 export * from './runtimeHelpers'

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

-import { ComponentNode, findProp } from '@vue/compiler-core'
+import {
+  ComponentNode,
+  findProp,
+  NodeTypes,
+  SimpleExpressionNode,
+} from '@vue/compiler-core'
+import { 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,
-  isUserComponent,
-} from './utils'
+import { ATTR_VUE_ID, CLASS_VUE_REF, CLASS_VUE_REF_IN_FOR } from './utils'
 import { CodegenScope } from '../options'
 import { isScopedSlotVFor } from './vSlot'
 
 export const transformComponent: NodeTransform = (node, context) => {
-  if (!isUserComponent(node, context)) {
+  if (!isUserComponent(node, context as any)) {
     return
   }
   addVueRef(node, context)
@@ -62,9 +63,16 @@ function addVueId(node: ComponentNode, context: TransformContext) {
 
 function addVueRef(node: ComponentNode, context: TransformContext) {
   // 仅配置了 ref 属性的，才需要增补 vue-ref
-  if (!findProp(node, '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

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

@@ -202,12 +202,7 @@ export function processProps(
 
   for (let i = 0; i < props.length; i++) {
     const prop = props[i]
-    if (prop.type === NodeTypes.ATTRIBUTE) {
-      // <custom ref="c"/> => <custom data-ref="c"/>
-      if (prop.name === 'ref') {
-        prop.name = 'data-ref'
-      }
-    } else {
+    if (prop.type === NodeTypes.DIRECTIVE) {
       // directives
       const { name, arg, loc } = prop
       const isVBind = name === 'bind'
@@ -264,16 +259,6 @@ export function processProps(
         }
       }
 
-      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 (name !== 'model' && directiveTransform) {
         const { props } = directiveTransform(prop, node, context as any)

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

@@ -11,18 +11,11 @@ import {
   SpreadElement,
   stringLiteral,
 } from '@babel/types'
-import { isComponentTag } from '@dcloudio/uni-shared'
 import {
-  ComponentNode,
   createSimpleExpression,
-  ElementTypes,
   ExpressionNode,
-  isCoreComponent,
   NodeTypes,
-  RootNode,
   SourceLocation,
-  TemplateChildNode,
-  TransformContext as VueTransformContext,
 } from '@vue/compiler-core'
 import { walk, BaseNode } from 'estree-walker'
 import { isUndefined, parseExpr } from '../ast'
@@ -36,19 +29,6 @@ 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 isUserComponent(
-  node: RootNode | TemplateChildNode,
-  context: TransformContext | VueTransformContext
-): node is ComponentNode {
-  return (
-    node.type === NodeTypes.ELEMENT &&
-    node.tagType === ElementTypes.COMPONENT &&
-    !isComponentTag(node.tag) &&
-    !isCoreComponent(node.tag) &&
-    !context.isBuiltInComponent(node.tag)
-  )
-}
-
 export function rewriteSpreadElement(
   name: symbol,
   expr: SpreadElement,

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

@@ -25,6 +25,7 @@ import {
   TemplateChildNode,
   TemplateNode,
 } from '@vue/compiler-core'
+import { isUserComponent } from '@dcloudio/uni-cli-shared'
 import { WITH_SCOPED_SLOT } from '../runtimeHelpers'
 import { createBindDirectiveNode, parseExpr } from '../ast'
 import { genExpr } from '../codegen'
@@ -33,14 +34,13 @@ import { isVForScope, NodeTransform, TransformContext } from '../transform'
 import {
   ATTR_VUE_ID,
   ATTR_VUE_SLOTS,
-  isUserComponent,
   rewriteExpressionWithoutProperty,
   SCOPED_SLOT_IDENTIFIER,
 } from './utils'
 import { createVForArrowFunctionExpression } from './vFor'
 
 export const transformSlot: NodeTransform = (node, context) => {
-  if (!isUserComponent(node, context)) {
+  if (!isUserComponent(node, context as any)) {
     return
   }