wip: save

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -218,11 +218,9 @@ exports[`compile > expression parsing > interpolation 1`] = `
 exports[`compile > expression parsing > v-bind 1`] = `
 "
   const n0 = t0()
-  _renderEffect(() => {
-    __key_value = key.value;__foo = _unref(foo);__key_value = key.value+1]()
-    
-    (_key_value__key_value_foo__foo = _setDynamicProps(n0, _key_value__key_value_foo__foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
-  })
+  let _key_value_foo
+  _renderEffect(() => 
+  _key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
   return n0
 "
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -355,11 +355,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  _renderEffect(() => {
-    __obj = _ctx.obj
-    
-    (_obj__obj = _setDynamicProps(n0, _obj__obj, [_ctx.obj], true))
-  })
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj], true))
   return n0
 }"
 `;
@@ -370,11 +368,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  _renderEffect(() => {
-    __obj = _ctx.obj
-    
-    (_obj__obj = _setDynamicProps(n0, _obj__obj, [{ id: "foo" }, _ctx.obj], true))
-  })
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [{ id: "foo" }, _ctx.obj], true))
   return n0
 }"
 `;
@@ -385,11 +381,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  _renderEffect(() => {
-    __obj = _ctx.obj
-    
-    (_obj__obj = _setDynamicProps(n0, _obj__obj, [_ctx.obj, { id: "foo" }], true))
-  })
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj, { id: "foo" }], true))
   return n0
 }"
 `;
@@ -400,11 +394,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => {
-    __obj = _ctx.obj
-    
-    (_obj__obj = _setDynamicProps(n0, _obj__obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
-  })
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap

@@ -114,11 +114,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, __id, _id__id
+  let _id, _prev_id, __id
   _renderEffect(() => {
     __id = _ctx.id
     if(_id !== __id) {
-      (_id__id = _setDynamicProp(n0, "fooBar", _id__id, _ctx.id))
+      _prev_id = _setDynamicProp(n0, "fooBar", _prev_id, _ctx.id)
       _id = __id
     }
   })
@@ -132,11 +132,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => {
-    __foo = _ctx.foo;__id = _ctx.id
-    
-    (_foo__foo_id__id = _setDynamicProps(n0, _foo__foo_id__id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
-  })
+  let _foo_id
+  _renderEffect(() => 
+  _foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
   return n0
 }"
 `;
@@ -147,11 +145,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar, __fooBar, _fooBar__fooBar
+  let _fooBar, _prev_fooBar, __fooBar
   _renderEffect(() => {
     __fooBar = _ctx.fooBar
     if(_fooBar !== __fooBar) {
-      (_fooBar__fooBar = _setDynamicProp(n0, "fooBar", _fooBar__fooBar, _ctx.fooBar))
+      _prev_fooBar = _setDynamicProp(n0, "fooBar", _prev_fooBar, _ctx.fooBar)
       _fooBar = __fooBar
     }
   })
@@ -291,11 +289,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => {
-    __fooBar = _ctx.fooBar;__id = _ctx.id
-    
-    (_fooBar__fooBar_id__id = _setDynamicProps(n0, _fooBar__fooBar_id__id, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
-  })
+  let _fooBar_id
+  _renderEffect(() => 
+  _fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
   return n0
 }"
 `;
@@ -450,11 +446,11 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo, __foo, _foo__foo
+  let _foo, _prev_foo, __foo
   _renderEffect(() => {
     __foo = _ctx.foo
     if(_foo !== __foo) {
-      (_foo__foo = _setDynamicProp(n0, "value", _foo__foo, _ctx.foo))
+      _prev_foo = _setDynamicProp(n0, "value", _prev_foo, _ctx.foo)
       _foo = __foo
     }
   })
@@ -679,11 +675,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => {
-    __id = _ctx.id;__title = _ctx.title
-    
-    (_id__id_title__title = _setDynamicProps(n0, _id__id_title__title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
-  })
+  let _id_title
+  _renderEffect(() => 
+  _id_title = _setDynamicProps(n0, _id_title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
   return n0
 }"
 `;
@@ -694,11 +688,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => {
-    __id = _ctx.id
-    
-    (_id__id = _setDynamicProps(n0, _id__id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
-  })
+  let _prev_id
+  _renderEffect(() => 
+  _prev_id = _setDynamicProps(n0, _prev_id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
   return n0
 }"
 `;
@@ -709,11 +701,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _camelCase, __camelCase, _camelCase__camelCase
+  let _camelCase, _prev_camelCase, __camelCase
   _renderEffect(() => {
     __camelCase = _ctx.camelCase
     if(_camelCase !== __camelCase) {
-      (_camelCase__camelCase = _setDynamicProp(n0, "camel-case", _camelCase__camelCase, _ctx.camelCase))
+      _prev_camelCase = _setDynamicProp(n0, "camel-case", _prev_camelCase, _ctx.camelCase)
       _camelCase = __camelCase
     }
   })

packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -242,11 +242,9 @@ export function render(_ctx) {
   const n0 = t0()
   _withDirectives(n0, [[_vModelDynamic, () => _ctx.model]])
   _delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
-  _renderEffect(() => {
-    __obj = _ctx.obj
-    
-    (_obj__obj = _setDynamicProps(n0, _obj__obj, [_ctx.obj], true))
-  })
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj], true))
   return n0
 }"
 `;

packages/compiler-vapor/src/generators/operation.ts

@@ -116,11 +116,14 @@ export function genEffect(
   const operationsExps = genOperations(operations, context)
 
   const { processingRenderEffect } = context
-  const { declareNames, earlyCheckExps, preAccessExps } =
+  const { declareNames, earlyCheckExps, preAccessNames, preAccessExps } =
     processingRenderEffect!
   if (declareNames.size) {
     allDeclareNames.add([...declareNames].join(', '))
   }
+  if (preAccessNames.size) {
+    allDeclareNames.add([...preAccessNames].join(', '))
+  }
 
   const accessExps: CodeFragment[] =
     preAccessExps.size > 0 ? [[...preAccessExps].join(';'), NEWLINE] : []

packages/compiler-vapor/src/generators/prop.ts

@@ -249,7 +249,8 @@ function processPropValues(
   let shouldWrapInParentheses: boolean = false
   let prevValueName
   if (shouldCacheRenderEffectDeps()) {
-    const { declareNames, operations } = processingRenderEffect!
+    const { declareNames, preAccessNames, preAccessExps } =
+      processingRenderEffect!
     const needReturnValue = helpersNeedCachedReturnValue.includes(helperName)
     processValues(context, values, !needReturnValue)
     // if the operation needs to cache the return value and has multiple declareNames,
@@ -258,14 +259,16 @@ function processPropValues(
       const names = [...declareNames]
       prevValueName =
         declareNames.size === 1 ? `_prev${names[0]}` : names.join('')
-      declareNames.add(prevValueName)
-    }
-    shouldWrapInParentheses = operations.length === 1
 
-    if (helpersNoNeedCachedDeps.includes(helperName)) {
-      declareNames.clear()
-      processingRenderEffect!.earlyCheckExps = []
+      if (helpersNoNeedCachedDeps.includes(helperName)) {
+        preAccessNames.clear()
+        preAccessExps.clear()
+        declareNames.clear()
+        processingRenderEffect!.earlyCheckExps = []
+      }
+      declareNames.add(prevValueName)
     }
+    shouldWrapInParentheses = false //operations.length === 1
   }
 
   return { prevValueName, shouldWrapInParentheses }
@@ -295,7 +298,7 @@ function processValue(
   needRewrite: boolean = true,
 ): string[] | undefined {
   const { processingRenderEffect, allRenderEffectSeenNames } = context
-  const { declareNames, earlyCheckExps, preAccessExps } =
+  const { declareNames, earlyCheckExps, preAccessNames, preAccessExps } =
     processingRenderEffect!
 
   // const isSingleLine = operations.length === 1
@@ -315,8 +318,9 @@ function processValue(
         else name += ++allRenderEffectSeenNames[name]
         declareNames.add(name)
       }
+
       const preAccessName = `_${name}`
-      declareNames.add(`${preAccessName}`)
+      preAccessNames.add(`${preAccessName}`)
       preAccessExps.add(`${preAccessName} = ${newName}`)
       earlyCheckExps.push(`${name} !== ${preAccessName}`)
       if (needRewrite) {

packages/compiler-vapor/src/ir/index.ts

@@ -265,6 +265,7 @@ export interface IREffect {
   declareNames: Set<string>
   rewrittenNames: Set<string>
   earlyCheckExps: string[]
+  preAccessNames: Set<string>
   preAccessExps: Set<string>
   inVFor: boolean
 }

packages/compiler-vapor/src/transform.ts

@@ -163,6 +163,7 @@ export class TransformContext<T extends AllNode = AllNode> {
         expressions,
         operations,
         earlyCheckExps: [],
+        preAccessNames: new Set<string>(),
         preAccessExps: new Set<string>(),
         declareNames: new Set<string>(),
         rewrittenNames: new Set<string>(),