fix(ssr): match-media

packages/uni-app-vite/src/plugin/uni/index.ts

@@ -4,6 +4,8 @@ import {
   UniVitePlugin,
   initI18nOptions,
   transformPageHead,
+  transformMatchMedia,
+  transformTapToClick,
 } from '@dcloudio/uni-cli-shared'
 
 export function uniOptions(): UniVitePlugin['uni'] {
@@ -32,10 +34,11 @@ export function uniOptions(): UniVitePlugin['uni'] {
     compilerOptions: {
       isNativeTag,
       isCustomElement,
-      nodeTransforms: [transformPageHead],
-    },
-    transformEvent: {
-      tap: 'click',
+      nodeTransforms: [
+        transformTapToClick,
+        transformMatchMedia,
+        transformPageHead,
+      ],
     },
   }
 }

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

@@ -23,7 +23,6 @@ interface UniVitePluginUniOptions {
     directiveTransforms?: CompilerOptions['directiveTransforms']
     nodeTransforms?: CompilerOptions['nodeTransforms']
   }
-  transformEvent?: Record<string, string>
   copyOptions?: CopyOptions | (() => CopyOptions)
 }
 export interface UniVitePlugin extends Plugin {

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

+import { createTransformTag } from './transformTag'
+import { createTransformEvent } from './transformEvent'
+import { createTransformComponentLink } from './transformComponent'
+import { COMPONENT_BIND_LINK } from '../../mp/constants'
+
 export * from './transformRef'
 export * from './transformPageHead'
 export * from './transformComponent'
+export * from './transformEvent'
+export * from './transformTag'
+
+export const transformMatchMedia = createTransformTag({
+  'match-media': 'uni-match-media',
+})
+
+export const transformTapToClick = createTransformEvent({
+  tap: 'click',
+})
+
+export const transformComponentLink =
+  createTransformComponentLink(COMPONENT_BIND_LINK)

packages/vite-plugin-uni/src/vue/transforms/transformEvent.ts → packages/uni-cli-shared/src/vue/transforms/transformEvent.ts

 import { DirectiveNode, NodeTransform } from '@vue/compiler-core'
-import { isElementNode, isSimpleExpressionNode } from '../../utils'
+import { isElementNode, isSimpleExpressionNode } from '../../vite/utils/ast'
 
-export function createTransformEvent(options: Record<string, string>) {
-  const transformEvent: NodeTransform = (node) => {
+export function createTransformEvent(
+  options: Record<string, string>
+): NodeTransform {
+  return function transformEvent(node) {
     if (!isElementNode(node)) {
       return
     }
@@ -17,5 +19,4 @@ export function createTransformEvent(options: Record<string, string>) {
       }
     })
   }
-  return transformEvent
 }

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

+import { CodegenContext, NodeTransform } from '@vue/compiler-core'
+import { isElementNode } from '../../vite/utils/ast'
+
+export function createTransformTag(
+  opts: Record<string, string>
+): NodeTransform {
+  return function transformTag(node, context) {
+    if (!isElementNode(node)) {
+      return
+    }
+    const oldTag = node.tag
+    const newTag = opts[oldTag]
+    if (!newTag) {
+      return
+    }
+    node.tag = newTag
+    // SSR 时，已被提前添加到 components 中
+    if (context.ssr && context.components.has(oldTag)) {
+      context.components.delete(oldTag)
+      context.components.add(newTag)
+    }
+  }
+}
+
+const easycoms: Record<string, string> = {
+  _component_uni_match_media: '_component_match_media',
+  _component_page_head_meta: '_component_head',
+}
+const easycomKeys = Object.keys(easycoms)
+
+export const onContextCreated: (context: CodegenContext) => void = (
+  context
+) => {
+  if (!context.ssr) {
+    return
+  }
+  // 替换生成的 easycom 变量名
+  const push = context.push
+  context.push = (code, node) => {
+    if (code.includes('_resolveComponent(')) {
+      const name = easycomKeys.find((name) => code.includes(name))
+      if (name) {
+        code = code.replace(name, easycoms[name])
+      }
+    }
+    return push(code, node)
+  }
+}

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

@@ -69,7 +69,7 @@ export function addStaticClass(node: ElementNode, clazz: string) {
   }
 }
 
-function createDirectiveNode(
+export function createDirectiveNode(
   name: string,
   arg: string,
   exp: string

packages/uni-h5-vite/src/plugin/index.ts

@@ -4,6 +4,8 @@ import { isH5CustomElement, isH5NativeTag } from '@dcloudio/uni-shared'
 import {
   isInHBuilderX,
   resolveMainPathOnce,
+  transformMatchMedia,
+  transformTapToClick,
   UniVitePlugin,
 } from '@dcloudio/uni-cli-shared'
 import { createHandleHotUpdate } from './handleHotUpdate'
@@ -21,13 +23,14 @@ export const UniH5Plugin: UniVitePlugin = {
     copyOptions: {
       assets: ['hybrid/html'],
     },
-    transformEvent: {
-      tap: 'click',
-    },
     compilerOptions: {
       isNativeTag: isH5NativeTag,
       isCustomElement: isH5CustomElement,
-      nodeTransforms: [transformPageHead],
+      nodeTransforms: [
+        transformTapToClick,
+        transformMatchMedia,
+        transformPageHead,
+      ],
     },
   },
   config(config, env) {

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

@@ -9,6 +9,15 @@ describe('mp-alipay: transform component', () => {
       code,
       `(_ctx, _cache) => {
   return {}
+}`
+    )
+  })
+  test(`match-media`, () => {
+    assert(
+      `<match-media/>`,
+      `<uni-match-media v-i="2a9ec0b0-0" onVI="__l"/>`,
+      `(_ctx, _cache) => {
+  return {}
 }`
     )
   })

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

-import { isNativeTag } from '@dcloudio/uni-shared'
 import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler'
 
-import {
-  isCustomElement,
-  miniProgram,
-  nodeTransforms,
-} from '../src/compiler/options'
+import { compilerOptions, miniProgram } from '../src/compiler/options'
 
 export function assert(
   template: string,
@@ -18,12 +13,9 @@ export function assert(
     filename: 'foo.vue',
     prefixIdentifiers: true,
     inline: true,
-    isNativeTag,
-    isCustomElement,
     generatorOpts: {
       concise: true,
     },
-    nodeTransforms,
     miniProgram: {
       ...miniProgram,
       emitFile({ source }) {
@@ -34,6 +26,7 @@ export function assert(
         return ''
       },
     },
+    ...compilerOptions,
     ...options,
   })
   if (!options.onError) {

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

@@ -2,15 +2,70 @@
 
 var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
 var path = require('path');
+var shared = require('@vue/shared');
 var uniCliShared = require('@dcloudio/uni-cli-shared');
 var compilerCore = require('@vue/compiler-core');
-var shared = require('@vue/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);
 
+const BUILT_IN_TAGS = [
+    'ad',
+    'ad-content-page',
+    'ad-draw',
+    'audio',
+    'button',
+    'camera',
+    'canvas',
+    'checkbox',
+    'checkbox-group',
+    'cover-image',
+    'cover-view',
+    'editor',
+    'form',
+    'functional-page-navigator',
+    'icon',
+    'image',
+    'input',
+    'label',
+    'live-player',
+    'live-pusher',
+    'map',
+    'movable-area',
+    'movable-view',
+    'navigator',
+    'official-account',
+    'open-data',
+    'picker',
+    'picker-view',
+    'picker-view-column',
+    'progress',
+    'radio',
+    'radio-group',
+    'rich-text',
+    'scroll-view',
+    'slider',
+    'swiper',
+    'swiper-item',
+    'switch',
+    'text',
+    'textarea',
+    'video',
+    'view',
+    'web-view',
+].map((tag) => 'uni-' + tag);
+function isBuiltInComponent(tag) {
+    return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1;
+}
+function isNativeTag(tag) {
+    return shared.isHTMLTag(tag) || shared.isSVGTag(tag) || isBuiltInComponent(tag);
+}
+function isCustomElement$1(_tag) {
+    return false;
+}
+
 var component2 = true;
 var enableAppxNg = true;
 var source = {
@@ -137,12 +192,17 @@ const miniProgram = {
     },
     directive: 'a:',
 };
-// TODO getPhoneNumber 等事件
 const nodeTransforms = [
     transformRef,
     transformOpenType,
+    uniCliShared.transformMatchMedia,
     uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_ON_LINK, 6 /* ATTRIBUTE */),
 ];
+const compilerOptions = {
+    isNativeTag,
+    isCustomElement,
+    nodeTransforms,
+};
 const tags = [
     'lifestyle',
     'life-follow',
@@ -157,7 +217,7 @@ const tags = [
     'mkt',
 ];
 function isCustomElement(tag) {
-    return tags.includes(tag);
+    return tags.includes(tag) || isCustomElement$1();
 }
 const options = {
     vite: {
@@ -215,10 +275,7 @@ const options = {
                 // 暂不处理，让开发者自己全部使用 src 引入
                 return `<import-sjs name="${filter.name}" from="${filename}.sjs"/>`;
             },
-        }, extname: '.axml', compilerOptions: {
-            isCustomElement,
-            nodeTransforms,
-        } }),
+        }, extname: '.axml', compilerOptions }),
     style: {
         extname: '.acss',
     },

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

 import path from 'path'
-import { NodeTypes } from '@vue/compiler-core'
+import { CompilerOptions, NodeTypes } from '@vue/compiler-core'
+import {
+  isNativeTag,
+  isCustomElement as baseIsCustomElement,
+} from '@dcloudio/uni-shared'
 import {
   COMPONENT_ON_LINK,
   createTransformComponentLink,
   MiniProgramCompilerOptions,
+  transformMatchMedia,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 import source from './mini.project.json'
@@ -25,12 +30,18 @@ export const miniProgram: MiniProgramCompilerOptions = {
   },
   directive: 'a:',
 }
-// TODO getPhoneNumber 等事件
-export const nodeTransforms = [
+const nodeTransforms = [
   transformRef,
   transformOpenType,
+  transformMatchMedia,
   createTransformComponentLink(COMPONENT_ON_LINK, NodeTypes.ATTRIBUTE),
 ]
+export const compilerOptions: CompilerOptions = {
+  isNativeTag,
+  isCustomElement,
+  nodeTransforms,
+}
+
 export const tags = [
   'lifestyle',
   'life-follow',
@@ -44,9 +55,11 @@ export const tags = [
   'ix-native-list',
   'mkt',
 ]
-export function isCustomElement(tag: string) {
-  return tags.includes(tag)
+
+function isCustomElement(tag: string) {
+  return tags.includes(tag) || baseIsCustomElement(tag)
 }
+
 export const options: UniMiniProgramPluginOptions = {
   vite: {
     inject: {
@@ -108,10 +121,7 @@ export const options: UniMiniProgramPluginOptions = {
       },
     },
     extname: '.axml',
-    compilerOptions: {
-      isCustomElement,
-      nodeTransforms,
-    },
+    compilerOptions,
   },
   style: {
     extname: '.acss',

packages/uni-mp-baidu/__tests__/component.spec.ts

+import { assert } from './testUtils'
+
+describe('mp-baidu: transform component', () => {
+  test(`match-media`, () => {
+    assert(
+      `<match-media/>`,
+      `<uni-match-media v-i="2a9ec0b0-0"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+})

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

 import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared'
 import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler'
-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'
+import { miniProgram, compilerOptions } from '../src/compiler/options'
 
 export function assert(
   template: string,
@@ -22,11 +18,6 @@ export function assert(
     generatorOpts: {
       concise: true,
     },
-    nodeTransforms: [transformRef, transformFor],
-    directiveTransforms: {
-      on: transformOn,
-      model: transformModel,
-    },
     miniProgram: {
       ...miniProgram,
       emitFile({ source }) {
@@ -37,6 +28,7 @@ export function assert(
         return ''
       },
     },
+    ...compilerOptions,
     ...options,
   })
   if (!options.onError) {

packages/uni-mp-baidu/build.json

@@ -7,10 +7,11 @@
       "format": "cjs"
     },
     "external": [
+      "@vue/compiler-core",
+      "@dcloudio/uni-shared",
       "@dcloudio/uni-cli-shared",
-      "@dcloudio/uni-mp-compiler",
       "@dcloudio/uni-mp-vite",
-      "@vue/compiler-core"
+      "@dcloudio/uni-mp-compiler"
     ]
   },
   {

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

@@ -2,6 +2,7 @@
 
 var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
 var path = require('path');
+var uniShared = require('@dcloudio/uni-shared');
 var uniCliShared = require('@dcloudio/uni-cli-shared');
 var uniMpCompiler = require('@dcloudio/uni-mp-compiler');
 var compilerCore = require('@vue/compiler-core');
@@ -144,6 +145,11 @@ const transformModel = (dir, node, context, augmentor) => {
     return res;
 };
 
+const nodeTransforms = [uniCliShared.transformRef, transformFor, uniCliShared.transformMatchMedia];
+const directiveTransforms = {
+    on: transformOn,
+    model: transformModel,
+};
 const miniProgram = {
     class: {
         array: true,
@@ -153,6 +159,12 @@ const miniProgram = {
     },
     directive: 's-',
 };
+const compilerOptions = {
+    isNativeTag: uniShared.isNativeTag,
+    isCustomElement: uniShared.isCustomElement,
+    nodeTransforms,
+    directiveTransforms,
+};
 const projectConfigFilename = 'project.swan.json';
 const options = {
     vite: {
@@ -186,13 +198,7 @@ const options = {
   ${filter.code}
   </import-sjs>`;
             },
-        }, extname: '.swan', compilerOptions: {
-            nodeTransforms: [uniCliShared.transformRef, transformFor],
-            directiveTransforms: {
-                on: transformOn,
-                model: transformModel,
-            },
-        } }),
+        }, extname: '.swan', compilerOptions }),
     style: {
         extname: '.css',
     },

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

 import path from 'path'
+import type { CompilerOptions } from '@vue/compiler-core'
+import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared'
 import {
   MiniProgramCompilerOptions,
+  transformMatchMedia,
   transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
@@ -10,6 +13,11 @@ import { transformFor } from './transforms/vFor'
 import { transformOn } from './transforms/vOn'
 import { transformModel } from './transforms/vModel'
 
+const nodeTransforms = [transformRef, transformFor, transformMatchMedia]
+const directiveTransforms = {
+  on: transformOn,
+  model: transformModel,
+}
 export const miniProgram: MiniProgramCompilerOptions = {
   class: {
     array: true,
@@ -20,6 +28,13 @@ export const miniProgram: MiniProgramCompilerOptions = {
   directive: 's-',
 }
 
+export const compilerOptions: CompilerOptions = {
+  isNativeTag,
+  isCustomElement,
+  nodeTransforms,
+  directiveTransforms,
+}
+
 const projectConfigFilename = 'project.swan.json'
 
 export const options: UniMiniProgramPluginOptions = {
@@ -59,13 +74,7 @@ export const options: UniMiniProgramPluginOptions = {
       },
     },
     extname: '.swan',
-    compilerOptions: {
-      nodeTransforms: [transformRef, transformFor],
-      directiveTransforms: {
-        on: transformOn,
-        model: transformModel,
-      },
-    },
+    compilerOptions,
   },
   style: {
     extname: '.css',

packages/uni-mp-qq/__tests__/component.spec.ts

+import { assert } from './testUtils'
+
+describe('mp-baidu: transform component', () => {
+  test(`match-media`, () => {
+    assert(
+      `<match-media/>`,
+      `<uni-match-media v-i="2a9ec0b0-0" bind:__l="__l"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+})

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

+import { isNativeTag } from '@dcloudio/uni-shared'
+import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler'
+
+import { compilerOptions, miniProgram } 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,
+    generatorOpts: {
+      concise: true,
+    },
+    miniProgram: {
+      ...miniProgram,
+      emitFile({ source }) {
+        // console.log(source)
+        if (!options.onError) {
+          expect(source).toBe(templateCode)
+        }
+        return ''
+      },
+    },
+    ...compilerOptions,
+    ...options,
+  })
+  if (!options.onError) {
+    expect(res.code).toBe(renderCode)
+  }
+}

packages/uni-mp-qq/build.json

@@ -8,8 +8,11 @@
     },
     "external": [
       "fs-extra",
+      "@vue/compiler-core",
+      "@dcloudio/uni-shared",
       "@dcloudio/uni-cli-shared",
-      "@dcloudio/uni-mp-vite"
+      "@dcloudio/uni-mp-vite",
+      "@dcloudio/uni-mp-compiler"
     ]
   },
   {

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

@@ -3,6 +3,7 @@
 var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
 var path = require('path');
 var fs = require('fs-extra');
+var uniShared = require('@dcloudio/uni-shared');
 var uniCliShared = require('@dcloudio/uni-cli-shared');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -84,8 +85,23 @@ var source = {
 
 const nodeTransforms = [
     uniCliShared.transformRef,
-    uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
+    uniCliShared.transformMatchMedia,
+    uniCliShared.transformComponentLink,
 ];
+const compilerOptions = {
+    isNativeTag: uniShared.isNativeTag,
+    isCustomElement: uniShared.isCustomElement,
+    nodeTransforms,
+};
+const miniProgram = {
+    class: {
+        array: true,
+    },
+    slot: {
+        fallback: false,
+    },
+    directive: 'qq:',
+};
 const options = {
     vite: {
         inject: {
@@ -115,11 +131,7 @@ const options = {
         filename: 'project.config.json',
         source,
     },
-    template: {
-        class: {
-            array: true,
-        },
-        filter: {
+    template: Object.assign(Object.assign({}, miniProgram), { filter: {
             extname: '.qs',
             lang: 'wxs',
             generate(filter, filename) {
@@ -130,16 +142,7 @@ const options = {
   ${filter.code}
   </qs>`;
             },
-        },
-        slot: {
-            fallback: false,
-        },
-        extname: '.qml',
-        directive: 'qq:',
-        compilerOptions: {
-            nodeTransforms,
-        },
-    },
+        }, extname: '.qml', compilerOptions }),
     style: {
         extname: '.qss',
     },

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

 import path from 'path'
-
+import type { CompilerOptions } from '@vue/compiler-core'
+import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared'
 import {
-  COMPONENT_BIND_LINK,
-  createTransformComponentLink,
+  MiniProgramCompilerOptions,
+  transformComponentLink,
+  transformMatchMedia,
   transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 
 import source from './project.config.json'
 
-export const nodeTransforms = [
+const nodeTransforms = [
   transformRef,
-  createTransformComponentLink(COMPONENT_BIND_LINK),
+  transformMatchMedia,
+  transformComponentLink,
 ]
+
+export const compilerOptions: CompilerOptions = {
+  isNativeTag,
+  isCustomElement,
+  nodeTransforms,
+}
+
+export const miniProgram: MiniProgramCompilerOptions = {
+  class: {
+    array: true,
+  },
+  slot: {
+    fallback: false,
+  },
+  directive: 'qq:',
+}
+
 export const options: UniMiniProgramPluginOptions = {
   vite: {
     inject: {
@@ -43,9 +63,8 @@ export const options: UniMiniProgramPluginOptions = {
     source,
   },
   template: {
-    class: {
-      array: true,
-    },
+    /* eslint-disable no-restricted-syntax */
+    ...miniProgram,
     filter: {
       extname: '.qs',
       lang: 'wxs',
@@ -58,14 +77,8 @@ export const options: UniMiniProgramPluginOptions = {
   </qs>`
       },
     },
-    slot: {
-      fallback: false,
-    },
     extname: '.qml',
-    directive: 'qq:',
-    compilerOptions: {
-      nodeTransforms,
-    },
+    compilerOptions,
   },
   style: {
     extname: '.qss',

packages/uni-mp-toutiao/__tests__/component.spec.ts

+import { assert } from './testUtils'
+
+describe('mp-baidu: transform component', () => {
+  test(`match-media`, () => {
+    assert(
+      `<match-media/>`,
+      `<uni-match-media v-i="2a9ec0b0-0" bind:__l="__l"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+})

packages/uni-mp-toutiao/__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'
+import { miniProgram, compilerOptions } from '../src/compiler/options'
 
 export function assert(
   template: string,
@@ -14,12 +13,9 @@ export function assert(
     filename: 'foo.vue',
     prefixIdentifiers: true,
     inline: true,
-    isNativeTag,
-    isCustomElement,
     generatorOpts: {
       concise: true,
     },
-    nodeTransforms,
     miniProgram: {
       ...miniProgram,
       emitFile({ source }) {
@@ -30,6 +26,7 @@ export function assert(
         return ''
       },
     },
+    ...compilerOptions,
     ...options,
   })
   if (!options.onError) {

packages/uni-mp-toutiao/build.json

@@ -8,6 +8,7 @@
     },
     "external": [
       "@vue/compiler-core",
+      "@dcloudio/uni-shared",
       "@dcloudio/uni-cli-shared",
       "@dcloudio/uni-mp-vite",
       "@dcloudio/uni-mp-compiler"

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

@@ -2,9 +2,6 @@
 
 var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
 var path = require('path');
-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 }; }
 
@@ -32,42 +29,7 @@ var source = {
 	condition: condition
 };
 
-function transformSwiper(node) {
-    if (node.type !== 1 /* ELEMENT */ || node.tag !== 'swiper') {
-        return;
-    }
-    const disableTouchProp = compilerCore.findProp(node, 'disable-touch', false, true);
-    if (!disableTouchProp) {
-        return;
-    }
-    const { props } = node;
-    if (disableTouchProp.type === 6 /* ATTRIBUTE */) {
-        // <swiper disable-touch/> => <swiper :touchable="false"/>
-        props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', 'false'));
-    }
-    else {
-        if (disableTouchProp.exp) {
-            // <swiper :disable-touch="true"/> => <swiper :touchable="!(true)"/>
-            let touchable = '';
-            if (disableTouchProp.exp.type === 4 /* SIMPLE_EXPRESSION */) {
-                if (disableTouchProp.exp.content === 'true') {
-                    touchable = 'false';
-                }
-                else if (disableTouchProp.exp.content === 'false') {
-                    touchable = 'true';
-                }
-            }
-            props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', touchable || `!(${uniMpCompiler.genExpr(disableTouchProp.exp)})`));
-        }
-    }
-}
-
 const projectConfigFilename = 'project.config.json';
-const nodeTransforms = [
-    uniCliShared.transformRef,
-    transformSwiper,
-    uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
-];
 const miniProgram = {
     class: {
         array: false,
@@ -109,9 +71,7 @@ const options = {
 ${filter.code}
 </sjs>`;
             },
-        }, extname: '.ttml', compilerOptions: {
-            nodeTransforms,
-        } }),
+        }, extname: '.ttml' }),
     style: {
         extname: '.ttss',
     },

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

 import path from 'path'
+import type { CompilerOptions } from '@vue/compiler-core'
+import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared'
 import {
-  COMPONENT_BIND_LINK,
-  createTransformComponentLink,
   MiniProgramCompilerOptions,
+  transformComponentLink,
+  transformMatchMedia,
   transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
@@ -12,11 +14,18 @@ import { transformSwiper } from './transforms/transformSwiper'
 
 const projectConfigFilename = 'project.config.json'
 
-export const nodeTransforms = [
+const nodeTransforms = [
   transformRef,
   transformSwiper,
-  createTransformComponentLink(COMPONENT_BIND_LINK),
+  transformMatchMedia,
+  transformComponentLink,
 ]
+
+export const compilerOptions: CompilerOptions = {
+  isNativeTag,
+  isCustomElement,
+  nodeTransforms,
+}
 export const miniProgram: MiniProgramCompilerOptions = {
   class: {
     array: false,
@@ -64,9 +73,6 @@ ${filter.code}
       },
     },
     extname: '.ttml',
-    compilerOptions: {
-      nodeTransforms,
-    },
   },
   style: {
     extname: '.ttss',

packages/uni-mp-weixin/__tests__/component.spec.ts

+import { assert } from './testUtils'
+
+describe('mp-baidu: transform component', () => {
+  test(`match-media`, () => {
+    assert(
+      `<match-media/>`,
+      `<match-media/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+})

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

+import { isNativeTag } from '@dcloudio/uni-shared'
+import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler'
+
+import { compilerOptions, miniProgram } 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,
+    generatorOpts: {
+      concise: true,
+    },
+    miniProgram: {
+      ...miniProgram,
+      emitFile({ source }) {
+        // console.log(source)
+        if (!options.onError) {
+          expect(source).toBe(templateCode)
+        }
+        return ''
+      },
+    },
+    ...compilerOptions,
+    ...options,
+  })
+  if (!options.onError) {
+    expect(res.code).toBe(renderCode)
+  }
+}

packages/uni-mp-weixin/build.json

@@ -6,7 +6,13 @@
     "output": {
       "format": "cjs"
     },
-    "external": ["@dcloudio/uni-cli-shared", "@dcloudio/uni-mp-vite"]
+    "external": [
+      "@vue/compiler-core",
+      "@dcloudio/uni-shared",
+      "@dcloudio/uni-cli-shared",
+      "@dcloudio/uni-mp-vite",
+      "@dcloudio/uni-mp-compiler"
+    ]
   },
   {
     "input": {

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

@@ -2,6 +2,7 @@
 
 var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite');
 var path = require('path');
+var uniShared = require('@dcloudio/uni-shared');
 var uniCliShared = require('@dcloudio/uni-cli-shared');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -58,6 +59,23 @@ var source = {
 	condition: condition
 };
 
+const compilerOptions = {
+    isNativeTag: uniShared.isNativeTag,
+    isCustomElement: (tag) => {
+        return (['page-meta', 'navigation-bar', 'match-media'].includes(tag) ||
+            uniShared.isCustomElement(tag));
+    },
+    nodeTransforms: [uniCliShared.transformRef, uniCliShared.transformComponentLink],
+};
+const miniProgram = {
+    class: {
+        array: true,
+    },
+    slot: {
+        fallback: false,
+    },
+    directive: 'wx:',
+};
 const projectConfigFilename = 'project.config.json';
 const options = {
     vite: {
@@ -95,11 +113,7 @@ const options = {
         filename: projectConfigFilename,
         source,
     },
-    template: {
-        class: {
-            array: true,
-        },
-        filter: {
+    template: Object.assign(Object.assign({}, miniProgram), { filter: {
             extname: '.wxs',
             lang: 'wxs',
             generate(filter, filename) {
@@ -110,22 +124,7 @@ const options = {
 ${filter.code}
 </wxs>`;
             },
-        },
-        slot: {
-            fallback: false,
-        },
-        extname: '.wxml',
-        directive: 'wx:',
-        compilerOptions: {
-            isCustomElement: (tag) => {
-                return ['page-meta', 'navigation-bar', 'match-media'].includes(tag);
-            },
-            nodeTransforms: [
-                uniCliShared.transformRef,
-                uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
-            ],
-        },
-    },
+        }, extname: '.wxml', compilerOptions }),
     style: {
         extname: '.wxss',
     },

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

 import path from 'path'
-
+import type { CompilerOptions } from '@vue/compiler-core'
+import {
+  isNativeTag,
+  isCustomElement as baseIsCustomElement,
+} from '@dcloudio/uni-shared'
 import {
-  COMPONENT_BIND_LINK,
-  createTransformComponentLink,
+  MiniProgramCompilerOptions,
+  transformComponentLink,
   transformRef,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite'
 
 import source from './project.config.json'
 
+export const compilerOptions: CompilerOptions = {
+  isNativeTag,
+  isCustomElement: (tag) => {
+    return (
+      ['page-meta', 'navigation-bar', 'match-media'].includes(tag) ||
+      baseIsCustomElement(tag)
+    )
+  },
+  nodeTransforms: [transformRef, transformComponentLink],
+}
+
+export const miniProgram: MiniProgramCompilerOptions = {
+  class: {
+    array: true,
+  },
+  slot: {
+    fallback: false,
+  },
+  directive: 'wx:',
+}
 const projectConfigFilename = 'project.config.json'
 
 export const options: UniMiniProgramPluginOptions = {
@@ -48,9 +72,8 @@ export const options: UniMiniProgramPluginOptions = {
     source,
   },
   template: {
-    class: {
-      array: true,
-    },
+    /* eslint-disable no-restricted-syntax */
+    ...miniProgram,
     filter: {
       extname: '.wxs',
       lang: 'wxs',
@@ -63,20 +86,8 @@ ${filter.code}
 </wxs>`
       },
     },
-    slot: {
-      fallback: false,
-    },
     extname: '.wxml',
-    directive: 'wx:',
-    compilerOptions: {
-      isCustomElement: (tag) => {
-        return ['page-meta', 'navigation-bar', 'match-media'].includes(tag)
-      },
-      nodeTransforms: [
-        transformRef,
-        createTransformComponentLink(COMPONENT_BIND_LINK),
-      ],
-    },
+    compilerOptions,
   },
   style: {
     extname: '.wxss',

packages/vite-plugin-uni/src/utils/plugin.ts

@@ -34,7 +34,6 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) {
       compiler: pluginTemplateCompiler,
       copyOptions: pluginCopyOptions,
       compilerOptions: pluginCompilerOptions,
-      transformEvent: pluginTransformEvent,
     } = plugin.uni || {}
     if (pluginTemplateCompiler) {
       compiler = pluginTemplateCompiler
@@ -42,9 +41,6 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) {
     if (pluginCompilerOptions) {
       extend(compilerOptions, pluginCompilerOptions)
     }
-    if (pluginTransformEvent) {
-      extend(transformEvent, pluginTransformEvent)
-    }
     if (pluginCopyOptions) {
       let copyOptions = pluginCopyOptions as CopyOptions
       if (isFunction(pluginCopyOptions)) {

packages/vite-plugin-uni/src/vue/options.ts

-import { extend, hasOwn, isArray, isPlainObject } from '@vue/shared'
+import { hasOwn, isArray, isPlainObject } from '@vue/shared'
 import { TemplateCompiler } from '@vue/compiler-sfc'
 import {
   EXTNAME_VUE_RE,
   UniVitePlugin,
   uniPostcssScopedPlugin,
   createUniVueTransformAssetUrls,
+  onContextCreated,
 } from '@dcloudio/uni-cli-shared'
 
 import { VitePluginUniResolvedOptions } from '..'
-import { transformMatchMedia } from './transforms/transformMatchMedia'
-import { createTransformEvent } from './transforms/transformEvent'
-// import { transformContext } from './transforms/transformContext'
 
 export function initPluginVueOptions(
   options: VitePluginUniResolvedOptions,
@@ -64,11 +62,11 @@ export function initPluginVueOptions(
   }
   compilerOptions.isNativeTag = isNativeTag
   compilerOptions.isCustomElement = isCustomElement
-  if (directiveTransforms) {
-    compilerOptions.directiveTransforms = extend(
-      compilerOptions.directiveTransforms || {},
-      directiveTransforms
-    )
+  ;(compilerOptions as any).onContextCreated = onContextCreated
+
+  compilerOptions.directiveTransforms = {
+    ...compilerOptions.directiveTransforms,
+    ...directiveTransforms,
   }
 
   if (!compilerOptions.nodeTransforms) {
@@ -85,18 +83,6 @@ export function initPluginVueOptions(
   //   compatConfig
   // )
 
-  const eventOpts = UniVitePlugins.reduce<Record<string, string>>(
-    (eventOpts, UniVitePlugin) => {
-      return extend(eventOpts, UniVitePlugin.uni?.transformEvent)
-    },
-    {}
-  )
-  // compilerOptions.nodeTransforms.unshift(transformContext)
-  compilerOptions.nodeTransforms.unshift(createTransformEvent(eventOpts))
-  if (options.platform !== 'mp-weixin') {
-    compilerOptions.nodeTransforms.unshift(transformMatchMedia)
-  }
-
   // App,MP 平台不支持使用静态节点
   compilerOptions.hoistStatic = false
   return vueOptions

packages/vite-plugin-uni/src/vue/transforms/transformContext.ts

-import {
-  // RESOLVE_DYNAMIC_COMPONENT,
-  NodeTypes,
-  NodeTransform,
-} from '@vue/compiler-core'
-
-export const transformContext: NodeTransform = (node, context) => {
-  if (node.type === NodeTypes.ROOT) {
-    // 注入 resolveDynamicComponent，easycom 会使用 resolveDynamicComponent 替换 resolveComponent 来解决 warning 的问题
-    // resolveComponent('custom-component') => resolveDynamicComponent('custom-component')
-    // context.helper(RESOLVE_DYNAMIC_COMPONENT)
-  }
-}

packages/vite-plugin-uni/src/vue/transforms/transformMatchMedia.ts

-import { ElementNode, NodeTransform } from '@vue/compiler-core'
-
-export const transformMatchMedia: NodeTransform = (node) => {
-  if ((node as ElementNode).tag === 'match-media') {
-    ;(node as ElementNode).tag = 'uni-match-media'
-  }
-}