Vapor Mode: const Bindings Optimization

[AraozDev]

My idea is to add a static analysis step to detect const bindings with no reactivity and inline their values during template compilation.

Example:

<script setup vapor>
const msg = "Hi"
</script>

<template>
  <div>Hi</div>
  <div>{{ msg }}</div>
</template>

Current output:

const t0 = _template("<div>Hi</div>")
const t1 = _template("<div> </div>")
function render(_ctx, $props, $emit, $attrs, $slots) {
  const n0 = t0()
  const n1 = t1()
  const x1 = _child(n1)
  _setText(x1, _toDisplayString(_ctx.msg))
  return [n0, n1]
}

Proposed output:
Since msg is static and non-reactive, it can be resolved at compile time:

const t0 = _template("<div>Hi</div>")
function render(_ctx, $props, $emit, $attrs, $slots) {
  const n0 = t0()
  const n1 = t0()
  return [n0, n1]
}

Another example:

<script setup vapor>
const msg='Hello '
</script>

<template>
  <div>{{ msg + "World" }}</div>
</template>

Current output:

const t0 = _template("<div> </div>", true)
function render(_ctx, $props, $emit, $attrs, $slots) {
  const n0 = t0()
  const x0 = _child(n0)
  _renderEffect(() => _setText(x0, _toDisplayString(_ctx.msg + "World")))
  return n0
}

Proposed output:

const t0 = _template("<div>Hello World</div>", true)
function render(_ctx, $props, $emit, $attrs, $slots) {
  const n0 = t0()
  return n0
}

Rationale:

msg is declared as a const and does not depend on any reactive data.
Its value will never change during the component’s lifetime.
Therefore, the template expression msg + "World" is also constant.
This can be resolved statically, just like a preprocessor macro in C/C++.

Benefits:

Removes unnecessary runtime text node updates.
Reduces the amount of generated render code.
Improves performance for static template parts.

[sxzz]

We're currently building Vapor on core's repo, this repo isn't maintained now.