Problems with using expressions in vcf top-level scope

[白雾三语]

Bug reproduce sample

const foo = 'foo'
const bar = () => 'bar'
export function App() {
  console.log(foo, bar())
  return vine`
    <div>{{foo}} {{bar()}}</div>
   `
}

[白雾三语]

For a simple expression, it can be used or accessed in vcf components, but is currently invalid in templates, because it is compiled into ctx.foo

import {
  toDisplayString as _toDisplayString,
  openBlock as _openBlock,
  createElementBlock as _createElementBlock,
  defineComponent as _defineComponent
} from "vue";
const foo = "foo";
const bar = () => "bar";
export const App = (() => {
  const __vine = _defineComponent({
    name: "App",
    /* No props */
    /* No emits */
    async setup(__props) {
      const props = __props;
      console.log(foo, bar());
      return {};
    }
    // End of setup function
  });
  function __sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return _openBlock(), _createElementBlock(
      "div",
      null,
      _toDisplayString(_ctx.foo) + " " + _toDisplayString(_ctx.bar()),
      1
      /* TEXT */
    );
  }
  __vine.render = __sfc_render;
  return __vine;
})();

[沈青川]

This is because of we didn't collect valid declarations (without any reactivity API call) on top level into binding metadata for template compilation.

We must collect them as VueBindingTypes.LITERAL_CONST to tell Vue's template compiler remaining them as-is.

I'll fix this in a separate PR and add more details for restrictions of top level declaration.