feat(mp): transform html tags (#3085)

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

@@ -3,5 +3,6 @@ export * from './event'
 export * from './style'
 export * from './template'
 export * from './constants'
+export { HTML_TO_MINI_PROGRAM_TAGS } from './tags'
 export { copyMiniProgramPluginJson } from './plugin'
 export { transformVueComponentImports } from './transformImports'

packages/uni-cli-shared/src/mp/tags.ts

+export const HTML_TO_MINI_PROGRAM_TAGS: Record<string, string> = {
+  br: 'view',
+  hr: 'view',
+
+  p: 'view',
+  h1: 'view',
+  h2: 'view',
+  h3: 'view',
+  h4: 'view',
+  h5: 'view',
+  h6: 'view',
+  abbr: 'view',
+  address: 'view',
+  b: 'view',
+  bdi: 'view',
+  bdo: 'view',
+  blockquote: 'view',
+  cite: 'view',
+  code: 'view',
+  del: 'view',
+  ins: 'view',
+  dfn: 'view',
+  em: 'view',
+  strong: 'view',
+  samp: 'view',
+  kbd: 'view',
+  var: 'view',
+  i: 'view',
+  mark: 'view',
+  pre: 'view',
+  q: 'view',
+  ruby: 'view',
+  rp: 'view',
+  rt: 'view',
+  s: 'view',
+  small: 'view',
+  sub: 'view',
+  sup: 'view',
+  time: 'view',
+  u: 'view',
+  wbr: 'view',
+
+  // 表单元素
+  // form: 'form',
+  // input: 'input',
+  // textarea: 'textarea',
+  // button: 'button',
+  select: 'picker',
+  option: 'view',
+  optgroup: 'view',
+  // label: 'label',
+  fieldset: 'view',
+  datalist: 'picker',
+  legend: 'view',
+  output: 'view',
+
+  // 框架
+  iframe: 'view',
+  // 图像
+  img: 'image',
+  // canvas: 'canvas',
+  figure: 'view',
+  figcaption: 'view',
+
+  // 音视频
+  // audio: 'audio',
+  source: 'audio',
+  // video: 'video',
+  track: 'video',
+  // 链接
+  a: 'navigator',
+  nav: 'view',
+  link: 'navigator',
+  // 列表
+  ul: 'view',
+  ol: 'view',
+  li: 'view',
+  dl: 'view',
+  dt: 'view',
+  dd: 'view',
+  menu: 'view',
+  command: 'view',
+
+  // 表格table
+  table: 'view',
+  caption: 'view',
+  th: 'view',
+  td: 'view',
+  tr: 'view',
+  thead: 'view',
+  tbody: 'view',
+  tfoot: 'view',
+  col: 'view',
+  colgroup: 'view',
+
+  // 样式 节
+  div: 'view',
+  main: 'view',
+  span: 'label',
+  header: 'view',
+  footer: 'view',
+  section: 'view',
+  article: 'view',
+  aside: 'view',
+  details: 'view',
+  dialog: 'view',
+  summary: 'view',
+
+  // progress: 'progress',
+  meter: 'progress', // todo
+  head: 'view', // todo
+  meta: 'view', // todo
+  base: 'text', // todo
+  // 'map': 'image', // TODO不是很恰当
+  area: 'navigator', // j结合map使用
+
+  script: 'view',
+  noscript: 'view',
+  embed: 'view',
+  object: 'view',
+  param: 'view',
+}

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

+import { HTML_TO_MINI_PROGRAM_TAGS } from '@dcloudio/uni-cli-shared'
+import { assert } from './testUtils'
+
+describe('compiler: transform tag', () => {
+  test('html', () => {
+    Object.keys(HTML_TO_MINI_PROGRAM_TAGS).forEach((htmlTag) => {
+      assert(
+        `<${htmlTag}/>`,
+        `<${HTML_TO_MINI_PROGRAM_TAGS[htmlTag]}/>`,
+        `(_ctx, _cache) => {
+  return {}
+}`
+      )
+    })
+  })
+})

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

@@ -262,7 +262,7 @@ export function render(_ctx, _cache) {
 
     test('v-is', () => {
       const onError = jest.fn()
-      parseWithElementTransform(`<div v-is="'foo'" />`, {
+      parseWithElementTransform(`<view v-is="'foo'" />`, {
         onError,
       })
       expect(onError).toHaveBeenCalledTimes(1)

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

@@ -16,6 +16,7 @@ import { transformBind } from './transforms/vBind'
 import { transformComponent } from './transforms/transformComponent'
 import { transformSlot } from './transforms/vSlot'
 import { transformRoot } from './transforms/transformRoot'
+import { transformTag } from './transforms/transformTag'
 
 export type TransformPreset = [
   NodeTransform[],
@@ -32,6 +33,7 @@ export function getBaseTransformPreset({
   // order is important
   const nodeTransforms = [
     transformRoot,
+    transformTag,
     transformIf,
     transformFor,
     transformSlot,

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

+import {
+  HTML_TO_MINI_PROGRAM_TAGS,
+  isElementNode,
+} from '@dcloudio/uni-cli-shared'
+import { ElementTypes } from '@vue/compiler-core'
+import { NodeTransform } from '../transform'
+
+export const transformTag: NodeTransform = (node, context) => {
+  if (!isElementNode(node)) {
+    return
+  }
+  const newTag = HTML_TO_MINI_PROGRAM_TAGS[node.tag]
+  if (newTag) {
+    node.tag = newTag
+    node.tagType = ElementTypes.ELEMENT
+  }
+}