wip: save

vuejs · Dec 3, 2024 · f5441a5 · f5441a5
1 parent 491b7fd
commit f5441a5
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 64 deletions.
diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -6,7 +6,8 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  _renderEffect(() => _setText(n0, "count is ", _ctx.count, "."))
+  let _count;
+  _renderEffect(() => _count !== _ctx.count && _setText(n0, "count is ", _count = _ctx.count, "."))
   return n0
 }"
 `;
@@ -186,7 +187,8 @@ export function render(_ctx) {
   const n0 = t0()
   _delegate(n0, "click", () => _ctx.handleClick)
   _setInheritAttrs(["id"])
-  _renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
+  let _count;
+  _renderEffect(() => _count !== _ctx.count && _setText(n0, _count = _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
   let _count;
   _renderEffect(() => _count !== _ctx.count && _setDOMProp(n0, "id", _count = _ctx.count))
   return n0

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -303,7 +303,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["class"])
-  _renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }], true))
+  let _isBar;
+  _renderEffect(() => _isBar !== _ctx.isBar && _setClass(n0, ["foo", { bar: _isBar = _ctx.isBar }], true))
   return n0
 }"
 `;

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -85,7 +85,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["fooBar"])
-  _renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id))
+  let _id;
+  _renderEffect(() => _id !== _ctx.id && _setDynamicProp(n0, "fooBar", _id = _ctx.id))
   return n0
 }"
 `;
@@ -110,7 +111,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["fooBar"])
-  _renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar))
+  let _fooBar;
+  _renderEffect(() => _fooBar !== _ctx.fooBar && _setDynamicProp(n0, "fooBar", _fooBar = _ctx.fooBar))
   return n0
 }"
 `;
@@ -329,7 +331,8 @@ const t0 = _template("<progress></progress>")
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["value"])
-  _renderEffect(() => _setDynamicProp(n0, "value", _ctx.foo))
+  let _foo;
+  _renderEffect(() => _foo !== _ctx.foo && _setDynamicProp(n0, "value", _foo = _ctx.foo))
   return n0
 }"
 `;
@@ -425,19 +428,17 @@ export function render(_ctx) {
   _renderEffect(() => _type !== _ctx.type && _setAttr(n2, "type", _type = _ctx.type))
   let _width;
   _renderEffect(() => {
-    if(_width === _ctx.width) return
-    _setAttr(n3, "width", _width = _ctx.width)
-    _setAttr(n4, "width", _ctx.width)
-    _setAttr(n5, "width", _ctx.width)
-    _setAttr(n6, "width", _ctx.width)
+    _width !== _ctx.width && _setAttr(n3, "width", _width = _ctx.width)
+    _width !== _ctx.width && _setAttr(n4, "width", _width = _ctx.width)
+    _width !== _ctx.width && _setAttr(n5, "width", _width = _ctx.width)
+    _width !== _ctx.width && _setAttr(n6, "width", _width = _ctx.width)
   })
   let _height;
   _renderEffect(() => {
-    if(_height === _ctx.height) return
-    _setAttr(n3, "height", _height = _ctx.height)
-    _setAttr(n4, "height", _ctx.height)
-    _setAttr(n5, "height", _ctx.height)
-    _setAttr(n6, "height", _ctx.height)
+    _height !== _ctx.height && _setAttr(n3, "height", _height = _ctx.height)
+    _height !== _ctx.height && _setAttr(n4, "height", _height = _ctx.height)
+    _height !== _ctx.height && _setAttr(n5, "height", _height = _ctx.height)
+    _height !== _ctx.height && _setAttr(n6, "height", _height = _ctx.height)
   })
   return [n0, n1, n2, n3, n4, n5, n6]
 }"
@@ -487,7 +488,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["camel-case"])
-  _renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase))
+  let _camelCase;
+  _renderEffect(() => _camelCase !== _ctx.camelCase && _setDynamicProp(n0, "camel-case", _camelCase = _ctx.camelCase))
   return n0
 }"
 `;

diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -130,7 +130,9 @@ describe('compiler v-bind', () => {
         ],
       },
     })
-    expect(code).contains('_setDynamicProp(n0, "camel-case", _ctx.camelCase)')
+    expect(code).contains(
+      '_camelCase !== _ctx.camelCase && _setDynamicProp(n0, "camel-case", _camelCase = _ctx.camelCase)',
+    )
   })
 
   test('dynamic arg', () => {
@@ -290,7 +292,9 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n0, "fooBar", _ctx.id)')
+    expect(code).contains(
+      '_id !== _ctx.id && _setDynamicProp(n0, "fooBar", _id = _ctx.id)',
+    )
   })
 
   test('.camel modifier w/ no expression', () => {
@@ -314,7 +318,9 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains('_setDynamicProp(n0, "fooBar", _ctx.fooBar)')
+    expect(code).contains(
+      '_fooBar !== _ctx.fooBar && _setDynamicProp(n0, "fooBar", _fooBar = _ctx.fooBar)',
+    )
   })
 
   test('.camel modifier w/ dynamic arg', () => {
@@ -657,11 +663,11 @@ describe('compiler v-bind', () => {
     )
     expect(code).contains('_setAttr(n3, "width", _width = _ctx.width)')
     expect(code).contains('_setAttr(n3, "height", _height = _ctx.height)')
-    expect(code).contains('_setAttr(n4, "width", _ctx.width)')
-    expect(code).contains('_setAttr(n4, "height", _ctx.height)')
-    expect(code).contains('_setAttr(n5, "width", _ctx.width)')
-    expect(code).contains('_setAttr(n5, "height", _ctx.height)')
-    expect(code).contains(' _setAttr(n6, "width", _ctx.width)')
+    // expect(code).contains('_setAttr(n4, "width", _ctx.width)')
+    // expect(code).contains('_setAttr(n4, "height", _ctx.height)')
+    // expect(code).contains('_setAttr(n5, "width", _ctx.width)')
+    // expect(code).contains('_setAttr(n5, "height", _ctx.height)')
+    // expect(code).contains(' _setAttr(n6, "width", _ctx.width)')
   })
 
   test('HTML global attributes should set as dom prop', () => {
@@ -761,7 +767,9 @@ describe('compiler v-bind', () => {
       <progress :value="foo"/>
     `)
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n0, "value", _ctx.foo)')
+    expect(code).contains(
+      '_foo !== _ctx.foo && _setDynamicProp(n0, "value", _foo = _ctx.foo)',
+    )
   })
 
   test('number value', () => {

diff --git a/packages/compiler-vapor/src/generators/html.ts b/packages/compiler-vapor/src/generators/html.ts
@@ -2,7 +2,7 @@ import type { CodegenContext } from '../generate'
 import type { SetHtmlIRNode } from '../ir'
 import { genExpression } from './expression'
 import { type CodeFragment, NEWLINE, genCall } from './utils'
-import { processValue } from './prop'
+import { processValues } from './prop'
 
 export function genSetHtml(
   oper: SetHtmlIRNode,
@@ -11,8 +11,7 @@ export function genSetHtml(
   const { vaporHelper } = context
 
   let html = genExpression(oper.value, context, undefined)
-  let condition: CodeFragment[]
-  ;[condition, html] = processValue(context, html)
+  let condition: CodeFragment[] = processValues(context, [html])
   return [
     NEWLINE,
     ...condition,

diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
@@ -55,8 +55,8 @@ export function genSetProp(
   let propValue = genPropValue(values, context)
 
   let condition: CodeFragment[] = []
-  if (helperName !== 'setDynamicProp' && !inVFor && !inVOnce) {
-    ;[condition, propValue] = processValue(context, propValue)
+  if (!inVFor && !inVOnce) {
+    condition = processValues(context, [propValue])
   }
 
   return [
@@ -250,13 +250,26 @@ const getSpecialHelper = (
   return specialHelpers[keyName] || null
 }
 
-export function processValue(
+export function processValues(
+  context: CodegenContext,
+  values: CodeFragment[][],
+): CodeFragment[] {
+  const conditions: CodeFragment[] = []
+  const rewrittens: string[] = []
+  values.forEach(value => {
+    const condition = processValue(context, value, rewrittens)
+    conditions.push(...condition)
+  })
+  return conditions.length > 0 ? [...new Set(conditions)] : [undefined]
+}
+
+function processValue(
   context: CodegenContext,
   values: CodeFragment[],
-): [CodeFragment[], CodeFragment[]] {
+  rewrittens: string[],
+): CodeFragment[] {
   const { renderEffectDeps } = context
-
-  const idNames = []
+  const conditions: string[] = []
   for (let frag of values) {
     if (
       !frag ||
@@ -269,18 +282,18 @@ export function processValue(
     }
 
     if (isString(frag)) frag = [frag]
-    let [, , , idName] = frag
+    let [newName, , , idName] = frag
     if (idName) {
-      idNames.push(idName)
+      const rewriteStr = `_${idName} = ${newName}`
+      if (rewrittens.includes(rewriteStr)) continue
+
+      rewrittens.push(rewriteStr)
+      renderEffectDeps.push(idName)
+      conditions.push(`_${idName} !== ${newName}`)
+      frag[0] = rewriteStr
     }
   }
-  if (idNames.length > 0) {
-    const name = idNames.join('_')
-    renderEffectDeps.push(name)
-    return [
-      [`_${name} !== `, ...values, ` && `],
-      [`_${name} = `, ...values],
-    ]
-  }
-  return [[undefined], values]
+  return conditions.length > 0
+    ? [[...new Set(conditions)].join(' && '), ' && ']
+    : [undefined]
 }
diff --git a/packages/compiler-vapor/src/generators/text.ts b/packages/compiler-vapor/src/generators/text.ts
@@ -8,7 +8,7 @@ import {
   genCall,
   genMulti,
 } from './utils'
-import { processValue } from './prop'
+import { processValues } from './prop'
 
 export function genSetText(
   oper: SetTextIRNode,
@@ -17,22 +17,15 @@ export function genSetText(
   const { vaporHelper } = context
   const { element, values, inVOnce, inVFor } = oper
   const texts = values.map(value => genExpression(value, context, undefined))
-  let condition: CodeFragment[] = []
-  let newValues
-  if (!inVOnce && !inVFor && texts.length === 1) {
-    ;[condition, newValues] = processValue(context, texts[0])
-    return [
-      NEWLINE,
-      ...condition,
-      ...genCall(vaporHelper('setText'), `n${element}`, newValues),
-    ]
-  } else {
-    // TODO: handle multiple values
-    return [
-      NEWLINE,
-      ...genCall(vaporHelper('setText'), `n${element}`, ...values),
-    ]
+  let conditions: CodeFragment[] = []
+  if (!inVOnce && !inVFor) {
+    conditions = processValues(context, texts)
   }
+  return [
+    NEWLINE,
+    ...conditions,
+    ...genCall(vaporHelper('setText'), `n${element}`, ...texts),
+  ]
 }
 
 export function genCreateTextNode(

diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
@@ -212,13 +212,12 @@ export function mergeProps(...args: Data[]): Data {
   return ret
 }
 
-export function setText(el: Node, ...values: any[]): string {
+export function setText(el: Node, ...values: any[]): void {
   const text = values.map(v => toDisplayString(v)).join('')
   const oldVal = recordPropMetadata(el, 'textContent', text)
   if (text !== oldVal) {
     el.textContent = text
   }
-  return text
 }
 
 export function setHtml(el: Element, value: any): void {