wip(app): nvue

packages/uni-app-vite/__tests__/nvue/__snapshots__/compiler.spec.ts.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app-nvue: compiler <video></video> 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"u-video\\"))
+}"
+`;
+
+exports[`app-nvue: compiler <video><view></view></video> 1`] = `
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"u-scalable\\", { style: {position:\\"absolute\\",left:\\"0\\",right:\\"0\\",top:\\"0\\",bottom:\\"0\\"} }, [
+  /*#__PURE__*/_createElementVNode(\\"view\\")
+], -1 /* HOISTED */)
+const _hoisted_2 = [
+  _hoisted_1
+]
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"u-video\\", null, _hoisted_2))
+}"
+`;
+
+exports[`app-nvue: compiler <view>hello</view> 1`] = `
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+const _hoisted_1 = [\\"appendAsTree\\"]
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"view\\", null, [
+    _createElementVNode(\\"u-text\\", { appendAsTree: true }, \\"hello\\", 8 /* PROPS */, _hoisted_1)
+  ]))
+}"
+`;

packages/uni-app-vite/__tests__/nvue/compiler.spec.ts

@@ -19,9 +19,29 @@ function compile(source: string) {
     compilerOptions: {
       ...compilerOptions,
     },
-  }).ast!.children[0] as ElementNode
+  })
+}
+
+function genAst(source: string) {
+  return compile(source).ast!.children[0] as ElementNode
 }
+
+function genCode(source: string) {
+  return compile(source).code
+}
+
+const codes = [
+  `<view>hello</view>`,
+  `<video></video>`,
+  `<video><view></view></video>`,
+]
+
 describe('app-nvue: compiler', () => {
+  codes.forEach((code) => {
+    test(code, () => {
+      expect(genCode(code)).toMatchSnapshot()
+    })
+  })
   test('u-tags', () => {
     ;[
       'text',
@@ -32,24 +52,19 @@ describe('app-nvue: compiler', () => {
       'web-view',
       'slider',
     ].forEach((tag) => {
-      expect(compile(`<${tag}></${tag}>`).tag).toBe(`u-${tag}`)
+      expect(genAst(`<${tag}></${tag}>`).tag).toBe(`u-${tag}`)
     })
   })
-  test('video', () => {
-    expect(compile(`<video></video>`).children.length).toBe(0)
-    expect(
-      (compile(`<video><view></view></video>`).children[0] as ElementNode).tag
-    ).toBe('u-scalable')
-  })
+
   test('scroll-view', () => {
-    compile(`<view></view>`)
+    genAst(`<view></view>`)
   })
   test('render-whole', () => {
     expect(
       (
         (
           findProp(
-            compile(`<view :render-whole="true">hello</view>`),
+            genAst(`<view :render-whole="true">hello</view>`),
             'appendAsTree',
             true,
             false
@@ -60,13 +75,13 @@ describe('app-nvue: compiler', () => {
   })
   test('unitary tag', () => {
     expect(
-      findProp(compile(`<text>hello</text>`), 'appendAsTree', true, false)
+      findProp(genAst(`<text>hello</text>`), 'appendAsTree', true, false)
     ).toBeTruthy()
   })
   test('tap=>click', () => {
     expect(
       (
-        findDir(compile(`<view @tap="click"></view>`), 'on')!
+        findDir(genAst(`<view @tap="click"></view>`), 'on')!
           .arg as SimpleExpressionNode
       ).content
     ).toBe('click')

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

@@ -13,6 +13,7 @@ import { nvueOutDir } from '../../utils'
 import { transformRenderWhole } from './transforms/transformRenderWhole'
 import { transformAppendAsTree } from './transforms/transformAppendAsTree'
 import { transformVideo } from './transforms/transformVideo'
+import { transformText } from './transforms/transformText'
 const uTags = {
   text: 'u-text',
   image: 'u-image',
@@ -27,6 +28,7 @@ export function initNVueNodeTransforms() {
   // 优先级必须确保 renderWhole > appendAsTree
   return [
     createTransformTag(uTags),
+    transformText,
     transformVideo,
     transformRenderWhole,
     transformAppendAsTree,

packages/uni-app-vite/src/nvue/plugin/transforms/transformRenderWhole.ts

@@ -5,7 +5,6 @@ export const transformRenderWhole: NodeTransform = (node, _) => {
   if (!isElementNode(node)) {
     return
   }
-  debugger
   const prop = findProp(node, 'render-whole')
   if (!prop) {
     return

packages/uni-app-vite/src/nvue/plugin/transforms/transformText.ts

+import { isElementNode } from '@dcloudio/uni-cli-shared'
+import {
+  CompoundExpressionNode,
+  ElementNode,
+  ElementTypes,
+  InterpolationNode,
+  NodeTransform,
+  NodeTypes,
+  TemplateChildNode,
+  TextCallNode,
+  TextNode,
+} from '@vue/compiler-core'
+
+function isTextNode({ tag }: ElementNode) {
+  return tag === 'text' || tag === 'u-text' || tag === 'button'
+}
+
+function isText(
+  node: TemplateChildNode
+): node is
+  | TextNode
+  | TextCallNode
+  | InterpolationNode
+  | CompoundExpressionNode {
+  const { type } = node
+  return (
+    type === NodeTypes.TEXT ||
+    type === NodeTypes.TEXT_CALL ||
+    type === NodeTypes.INTERPOLATION ||
+    type === NodeTypes.COMPOUND_EXPRESSION
+  )
+}
+
+export const transformText: NodeTransform = (node, _) => {
+  if (!isElementNode(node)) {
+    return
+  }
+  if (isTextNode(node)) {
+    return
+  }
+  const { children } = node
+  if (!children.length) {
+    return
+  }
+  children.forEach((child, index) => {
+    if (isText(child)) {
+      children.splice(index, 1, createText(node, child))
+    }
+  })
+}
+
+function createText(
+  parent: ElementNode,
+  node: TextNode | TextCallNode | InterpolationNode | CompoundExpressionNode
+): ElementNode {
+  return {
+    tag: 'u-text',
+    type: NodeTypes.ELEMENT,
+    tagType: ElementTypes.ELEMENT,
+    props: [],
+    isSelfClosing: false,
+    children: [node],
+    codegenNode: undefined,
+    ns: parent.ns,
+    loc: node.loc,
+  }
+}