diff --git a/packages/uni-cli-shared/src/mp/index.ts b/packages/uni-cli-shared/src/mp/index.ts index 6b26f71c4ffede8347e104d4acd30b68d25f283d..2131593df0042039cda15ee559a300ff99c456be 100644 --- a/packages/uni-cli-shared/src/mp/index.ts +++ b/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' diff --git a/packages/uni-cli-shared/src/mp/tags.ts b/packages/uni-cli-shared/src/mp/tags.ts new file mode 100644 index 0000000000000000000000000000000000000000..48d52091ac78ee87c5c324fed0ea53b6b68ffa15 --- /dev/null +++ b/packages/uni-cli-shared/src/mp/tags.ts @@ -0,0 +1,122 @@ +export const HTML_TO_MINI_PROGRAM_TAGS: Record = { + 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', +} diff --git a/packages/uni-mp-compiler/__tests__/tag.spec.ts b/packages/uni-mp-compiler/__tests__/tag.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..dc270638605fba3cefa0e060c5c6ef7489abcac8 --- /dev/null +++ b/packages/uni-mp-compiler/__tests__/tag.spec.ts @@ -0,0 +1,16 @@ +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 {} +}` + ) + }) + }) +}) diff --git a/packages/uni-mp-compiler/__tests__/transformElement.spec.ts b/packages/uni-mp-compiler/__tests__/transformElement.spec.ts index e291a54435d64e688bc0df369ace80373f297324..2b5b04179284f4024e0b7aba2c405c846f7f0abf 100644 --- a/packages/uni-mp-compiler/__tests__/transformElement.spec.ts +++ b/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(`
`, { + parseWithElementTransform(``, { onError, }) expect(onError).toHaveBeenCalledTimes(1) diff --git a/packages/uni-mp-compiler/src/compile.ts b/packages/uni-mp-compiler/src/compile.ts index c4491832b2632175b9ecab22109a1aa81a969f0b..171961095c0b59c778cd1b38e0d8673904c596c4 100644 --- a/packages/uni-mp-compiler/src/compile.ts +++ b/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, diff --git a/packages/uni-mp-compiler/src/transforms/transformTag.ts b/packages/uni-mp-compiler/src/transforms/transformTag.ts new file mode 100644 index 0000000000000000000000000000000000000000..77ff8d5f4ea0035f4fcd5b20175109f08193103a --- /dev/null +++ b/packages/uni-mp-compiler/src/transforms/transformTag.ts @@ -0,0 +1,17 @@ +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 + } +}