wip(mp): serialize render data

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

@@ -61,14 +61,14 @@ describe('compiler: transform class', () => {
       `<view :class="{ red: \`\${isRed}\` }"/>`,
       `<view class="{{[a && 'red']}}"/>`,
       `(_ctx, _cache) => {
-  return { a: \`\${_ctx.isRed}\` }
+  return { a: \`\${_ctx.isRed}\` ? 1 : 0 }
 }`
     )
     assert(
       `<view :class="{ a: 1, b: 0, c: true, d: false, e: null, f: undefined, g: ok, h: handle(ok), i: ok>1, j, [k]:1, [l]:m, ...n, ...{a:true}, ...{b:o} }"/>`,
       `<view class="{{['a', 'c', a && 'g', b && 'h', c && 'i', d && 'j', e, g && f, h, i, j]}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.ok, b: _ctx.handle(_ctx.ok), c: _ctx.ok > 1, d: _ctx.j, e: _ctx.k, f: _ctx.l, g: _ctx.m, h: _normalizeClass(_ctx.n), i: _normalizeClass({ a: true }), j: _normalizeClass({ b: _ctx.o }) }
+  return { a: _ctx.ok ? 1 : 0, b: _ctx.handle(_ctx.ok) ? 1 : 0, c: _ctx.ok > 1 ? 1 : 0, d: _ctx.j ? 1 : 0, e: _ctx.k, f: _ctx.l, g: _ctx.m ? 1 : 0, h: _normalizeClass(_ctx.n), i: _normalizeClass({ a: true }), j: _normalizeClass({ b: _ctx.o }) }
 }`
     )
   })
@@ -77,28 +77,28 @@ describe('compiler: transform class', () => {
       `<view :class="{ red: isRed }" class="foo  bar"/>`,
       `<view class="{{[a && 'red', 'foo bar']}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.isRed }
+  return { a: _ctx.isRed ? 1 : 0 }
 }`
     )
     assert(
       `<view class="foo  bar" :class="{ red: isRed }"/>`,
       `<view class="{{['foo bar', a && 'red']}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.isRed }
+  return { a: _ctx.isRed ? 1 : 0 }
 }`
     )
     assert(
       `<view :class="{ a: 1, b: 0, c: true, d: false, e: null, f: undefined, g: ok, h: handle(ok), i: ok>1, j, [k]:1, [l]:m, ...n, ...{a:true}, ...{b:o} }" class="foo  bar"/>`,
       `<view class="{{['a', 'c', a && 'g', b && 'h', c && 'i', d && 'j', e, g && f, h, i, j, 'foo bar']}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.ok, b: _ctx.handle(_ctx.ok), c: _ctx.ok > 1, d: _ctx.j, e: _ctx.k, f: _ctx.l, g: _ctx.m, h: _normalizeClass(_ctx.n), i: _normalizeClass({ a: true }), j: _normalizeClass({ b: _ctx.o }) }
+  return { a: _ctx.ok ? 1 : 0, b: _ctx.handle(_ctx.ok) ? 1 : 0, c: _ctx.ok > 1 ? 1 : 0, d: _ctx.j ? 1 : 0, e: _ctx.k, f: _ctx.l, g: _ctx.m ? 1 : 0, h: _normalizeClass(_ctx.n), i: _normalizeClass({ a: true }), j: _normalizeClass({ b: _ctx.o }) }
 }`
     )
     assert(
       `<view class="foo  bar" :class="{ a: 1, b: 0, c: true, d: false, e: null, f: undefined, g: ok, h: handle(ok), i: ok>1, j, [k]:1, [l]:m, ...n, ...{a:true}, ...{b:o} }"/>`,
       `<view class="{{['foo bar', 'a', 'c', a && 'g', b && 'h', c && 'i', d && 'j', e, g && f, h, i, j]}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.ok, b: _ctx.handle(_ctx.ok), c: _ctx.ok > 1, d: _ctx.j, e: _ctx.k, f: _ctx.l, g: _ctx.m, h: _normalizeClass(_ctx.n), i: _normalizeClass({ a: true }), j: _normalizeClass({ b: _ctx.o }) }
+  return { a: _ctx.ok ? 1 : 0, b: _ctx.handle(_ctx.ok) ? 1 : 0, c: _ctx.ok > 1 ? 1 : 0, d: _ctx.j ? 1 : 0, e: _ctx.k, f: _ctx.l, g: _ctx.m ? 1 : 0, h: _normalizeClass(_ctx.n), i: _normalizeClass({ a: true }), j: _normalizeClass({ b: _ctx.o }) }
 }`
     )
   })

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

@@ -6,7 +6,7 @@ describe('compiler: scope', () => {
       `<view v-for="item in items" :key="item.id" :class="{red: item.isRed}" @longpress="longpress" @click="onClick(item)">{{item.title}}</view>`,
       `<view wx:for="{{a}}" wx:for-item="item" wx:key="b" class="{{[item.c && 'red']}}" bindlongpress="{{b}}" bindtap="{{item.d}}">{{item.a}}</view>`,
       `(_ctx, _cache) => {
-  return { a: _vFor(_ctx.items, (item, k0, i0) => { return { a: _toDisplayString(item.title), b: item.id, c: item.isRed, d: _vOn($event => _ctx.onClick(item)) }; }), b: _vOn(_ctx.longpress) }
+  return { a: _vFor(_ctx.items, (item, k0, i0) => { return { a: _toDisplayString(item.title), b: item.id, c: item.isRed ? 1 : 0, d: _vOn($event => _ctx.onClick(item)) }; }), b: _vOn(_ctx.longpress) }
 }`
     )
   })

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

@@ -37,10 +37,10 @@ function assert(
 describe('compiler', () => {
   test('scope', () => {
     assert(
-      `<view :style="{ color: \`\${green}px\` }"/>`,
-      `<view style="{{'color:' + a}}"/>`,
+      `<view :class="{ red: isRed }"/>`,
+      `<view class="{{[a && 'red']}}"/>`,
       `(_ctx, _cache) => {
-  return { a: \`\${_ctx.green}px\` }
+  return { a: _ctx.isRed ? 1 : 0 }
 }`
     )
   })

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

@@ -35,6 +35,7 @@ import { genBabelExpr } from '../codegen'
 import { TransformContext } from '../transform'
 import {
   parseExprWithRewrite,
+  parseExprWithRewriteClass,
   rewriteExpression,
   rewriteSpreadElement,
 } from './utils'
@@ -160,7 +161,7 @@ function rewriteClassObjectExpression(
       if (isLiteral(value) && !isTemplateLiteral(value)) {
         return
       } else {
-        const newExpr = parseExprWithRewrite(
+        const newExpr = parseExprWithRewriteClass(
           genBabelExpr(value as Expression),
           loc,
           context,

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

 import {
+  conditionalExpression,
   Expression,
   Identifier,
   identifier,
   isIdentifier,
   isReferenced,
   MemberExpression,
+  numericLiteral,
   objectProperty,
   SpreadElement,
 } from '@babel/types'
@@ -54,6 +56,25 @@ export function parseExprWithRewrite(
   ) as Identifier | MemberExpression | undefined
 }
 
+export function parseExprWithRewriteClass(
+  code: string,
+  loc: SourceLocation,
+  context: TransformContext,
+  node: Expression
+) {
+  // a?1:0
+  return parseExpr(
+    rewriteExpression(
+      createSimpleExpression(code, false, loc),
+      context,
+      !isUndefined(node)
+        ? conditionalExpression(node, numericLiteral(1), numericLiteral(0))
+        : node
+    ),
+    context
+  ) as Identifier | MemberExpression | undefined
+}
+
 export function rewriteExpression(
   node: ExpressionNode,
   context: TransformContext,

packages/uni-mp-vue/dist/vue.runtime.esm.js

@@ -4548,6 +4548,13 @@ function getMPInstanceData(instance, keys) {
     return ret;
 }
 function patch(instance, data) {
+    if (!data) {
+        return;
+    }
+    // 序列化
+    pauseTracking();
+    data = JSON.parse(JSON.stringify(data));
+    resetTracking();
     const ctx = instance.ctx;
     const mpType = ctx.mpType;
     if (mpType === 'page' || mpType === 'component') {

packages/uni-mp-vue/lib/vue.runtime.esm.js

@@ -4480,6 +4480,13 @@ function getMPInstanceData(instance, keys) {
     return ret;
 }
 function patch(instance, data) {
+    if (!data) {
+        return;
+    }
+    // 序列化
+    pauseTracking();
+    data = JSON.parse(JSON.stringify(data));
+    resetTracking();
     const ctx = instance.ctx;
     const mpType = ctx.mpType;
     if (mpType === 'page' || mpType === 'component') {