wip: cache setProp prev value on element, simplify codegen

Also separate `setClass`/`setClassIncremental` and `setStyle`/
`setStyleIncremental`

Author: yyx990803

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

@@ -330,6 +330,23 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler v-bind > MathML global attributes should set as attribute 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<math></math>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => {
+    _setAttr(n0, "autofucus", _ctx.autofucus)
+    _setAttr(n0, "dir", _ctx.dir)
+    _setAttr(n0, "displaystyle", _ctx.displaystyle)
+    _setAttr(n0, "mathcolor", _ctx.mathcolor)
+    _setAttr(n0, "tabindex", _ctx.tabindex)
+  })
+  return n0
+}"
+`;
+
 exports[`compiler v-bind > MathML global attributes should set as dom prop 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<math></math>")
@@ -348,6 +365,21 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler v-bind > SVG global attributes should set as attribute 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<svg></svg>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => {
+    _setAttr(n0, "id", _ctx.id)
+    _setAttr(n0, "lang", _ctx.lang)
+    _setAttr(n0, "tabindex", _ctx.tabindex)
+  })
+  return n0
+}"
+`;
+
 exports[`compiler v-bind > SVG global attributes should set as dom prop 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<svg></svg>")

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

@@ -686,69 +686,6 @@ describe('compiler v-bind', () => {
     expect(code).contains(' _setAttr(n6, "width", _ctx.width)')
   })
 
-  test('HTML global attributes should set as dom prop', () => {
-    const { code } = compileWithVBind(`
-      <div :id="id" :title="title" :lang="lang" :dir="dir" :tabindex="tabindex" />
-    `)
-
-    expect(code).matchSnapshot()
-    expect(code).contains(
-      '_id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))',
-    )
-    expect(code).contains(
-      '_title !== _ctx.title && _setDOMProp(n0, "title", (_title = _ctx.title))',
-    )
-    expect(code).contains(
-      '_lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))',
-    )
-    expect(code).contains(
-      '_dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))',
-    )
-    expect(code).contains(
-      '_tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))',
-    )
-  })
-
-  test('SVG global attributes should set as dom prop', () => {
-    const { code } = compileWithVBind(`
-      <svg :id="id" :lang="lang" :tabindex="tabindex" />
-    `)
-
-    expect(code).matchSnapshot()
-    expect(code).contains(
-      '_id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))',
-    )
-    expect(code).contains(
-      '_lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))',
-    )
-    expect(code).contains(
-      '_tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))',
-    )
-  })
-
-  test('MathML global attributes should set as dom prop', () => {
-    const { code } = compileWithVBind(`
-      <math :autofucus :dir :displaystyle :mathcolor :tabindex/>
-    `)
-
-    expect(code).matchSnapshot()
-    expect(code).contains(
-      '_autofucus !== _ctx.autofucus && _setDOMProp(n0, "autofucus", (_autofucus = _ctx.autofucus))',
-    )
-    expect(code).contains(
-      '_dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))',
-    )
-    expect(code).contains(
-      '_displaystyle !== _ctx.displaystyle && _setDOMProp(n0, "displaystyle", (_displaystyle = _ctx.displaystyle))',
-    )
-    expect(code).contains(
-      '_mathcolor !== _ctx.mathcolor && _setDOMProp(n0, "mathcolor", (_mathcolor = _ctx.mathcolor))',
-    )
-    expect(code).contains(
-      '_tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))',
-    )
-  })
-
   test(':innerHTML', () => {
     const { code } = compileWithVBind(`
       <div :innerHTML="foo"/>

packages/compiler-vapor/__tests__/transforms/vOn.spec.ts

@@ -106,6 +106,8 @@ describe('v-on', () => {
       },
     })
 
+    console.log(code)
+
     expect(code).matchSnapshot()
   })
 

packages/compiler-vapor/src/generate.ts

@@ -2,13 +2,7 @@ import type {
   CodegenOptions as BaseCodegenOptions,
   BaseCodegenResult,
 } from '@vue/compiler-dom'
-import type {
-  BlockIRNode,
-  CoreHelper,
-  IREffect,
-  RootIRNode,
-  VaporHelper,
-} from './ir'
+import type { BlockIRNode, CoreHelper, RootIRNode, VaporHelper } from './ir'
 import { extend, remove } from '@vue/shared'
 import { genBlockContent } from './generators/block'
 import { genTemplates } from './generators/template'
@@ -37,15 +31,6 @@ export class CodegenContext {
 
   delegates: Set<string> = new Set<string>()
 
-  processingRenderEffect: IREffect | undefined = undefined
-  allRenderEffectSeenNames: Record<string, number> = Object.create(null)
-  shouldCacheRenderEffectDeps = (): boolean => {
-    // only need to generate effect deps when it's not nested in v-for
-    return !!(
-      this.processingRenderEffect && !this.processingRenderEffect.inVFor
-    )
-  }
-
   identifiers: Record<string, string[]> = Object.create(null)
 
   block: BlockIRNode

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

@@ -1,4 +1,4 @@
-import { isArray, isGloballyAllowed } from '@vue/shared'
+import { isGloballyAllowed } from '@vue/shared'
 import {
   BindingTypes,
   NewlineType,
@@ -95,14 +95,7 @@ export function genExpression(
         )
 
         if (i === ids.length - 1 && end < content.length) {
-          const rest = content.slice(end)
-          const last = frag[frag.length - 1]
-          if (hasMemberExpression && isArray(last)) {
-            // merge rest content into the last identifier's generated name
-            last[0] += rest
-          } else {
-            push([rest, NewlineType.Unknown])
-          }
+          push([content.slice(end), NewlineType.Unknown])
         }
       })
 

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

@@ -2,17 +2,15 @@ import type { CodegenContext } from '../generate'
 import type { SetHtmlIRNode } from '../ir'
 import { genExpression } from './expression'
 import { type CodeFragment, NEWLINE, genCall } from './utils'
-import { processValues } from './prop'
 
 export function genSetHtml(
   oper: SetHtmlIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const { helper, shouldCacheRenderEffectDeps } = context
+  const { helper } = context
   const { value, element } = oper
-  let html = genExpression(value, context)
-  if (shouldCacheRenderEffectDeps()) {
-    processValues(context, [html])
-  }
-  return [NEWLINE, ...genCall(helper('setHtml'), `n${element}`, html)]
+  return [
+    NEWLINE,
+    ...genCall(helper('setHtml'), `n${element}`, genExpression(value, context)),
+  ]
 }

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

@@ -78,15 +78,16 @@ export function genEffects(
 ): CodeFragment[] {
   const { helper } = context
   const [frag, push, unshift] = buildCodeFragment()
-  const declareNames = new Set<string>()
   let operationsCount = 0
   for (let i = 0; i < effects.length; i++) {
-    const effect = (context.processingRenderEffect = effects[i])
+    const effect = effects[i]
     operationsCount += effect.operations.length
-    const frags = genEffect(effect, context, declareNames)
-    const needSemi = frag[frag.length - 1] === ')' && frags[0] === '('
+    const frags = genEffect(effect, context)
     i > 0 && push(NEWLINE)
-    push(needSemi ? ';' : undefined, ...frags)
+    if (frag[frag.length - 1] === ')' && frags[0] === '(') {
+      push(';')
+    }
+    push(...frags)
   }
 
   const newLineCount = frag.filter(frag => frag === NEWLINE).length
@@ -100,60 +101,21 @@ export function genEffects(
     push(`)`)
   }
 
-  // declare variables: let _foo, _bar
-  if (declareNames.size) {
-    frag.splice(1, 0, `let ${[...declareNames].join(', ')}`, NEWLINE)
-  }
   return frag
 }
 
 export function genEffect(
   { operations }: IREffect,
   context: CodegenContext,
-  allDeclareNames: Set<string>,
 ): CodeFragment[] {
-  const { processingRenderEffect } = context
   const [frag, push] = buildCodeFragment()
-  const { declareNames, earlyCheckExps } = processingRenderEffect!
   const operationsExps = genOperations(operations, context)
-
-  if (declareNames.size) {
-    allDeclareNames.add([...declareNames].join(', '))
-  }
-
   const newlineCount = operationsExps.filter(frag => frag === NEWLINE).length
+
   if (newlineCount > 1) {
-    // multiline check expression: if (_foo !== _ctx.foo || _bar !== _ctx.bar) {
-    const checkExpsStart: CodeFragment[] =
-      earlyCheckExps.length > 0
-        ? [`if(`, ...earlyCheckExps.join(' || '), `) {`, INDENT_START]
-        : []
-    const checkExpsEnd: CodeFragment[] =
-      earlyCheckExps.length > 0 ? [INDENT_END, NEWLINE, '}'] : []
-    // assignment: _foo = _ctx.foo; _bar = _ctx.bar
-    const assignmentExps: CodeFragment[] =
-      earlyCheckExps.length > 0
-        ? [NEWLINE, ...earlyCheckExps.map(c => c.replace('!==', '=')).join(';')]
-        : []
-    push(
-      ...checkExpsStart,
-      ...operationsExps,
-      ...assignmentExps,
-      ...checkExpsEnd,
-    )
+    push(...operationsExps)
   } else {
-    // single line check expression: (_foo !== _ctx.foo || _bar !== _ctx.bar) &&
-    const multiple = earlyCheckExps.length > 1
-    const checkExps: CodeFragment[] =
-      earlyCheckExps.length > 0
-        ? [
-            multiple ? `(` : undefined,
-            ...earlyCheckExps.join(' || '),
-            multiple ? `)` : undefined,
-            ' && ',
-          ]
-        : []
-    push(...checkExps, ...operationsExps.filter(frag => frag !== NEWLINE))
+    push(...operationsExps.filter(frag => frag !== NEWLINE))
   }
 
   return frag