compile script setup components to components with setup() returning a render function

[jacekkarczmarczyk]

What problem does this feature solve?

Currently script setup components are compiled to a code where setup() function returns all data used in the template, components have also components property like you'd define it in normal script.

In Vue 3 setup() returns a render function that is accessing local variables and imported components directly which results in a smaller size of the bundle not only because of shorter code before minification but also because all variable and component names can be shortened to single letters. Would be great if Vue 2 behaved the same way, maybe some compiler configuration option could be used to force this?

What does the proposed API look like?

{
      __name: 'MyComponent',
      props: { prop1: Object, prop2: Boolean },
      setup (s) {
        const e = s, d = whatever();
        return () => h(a.B, ...)
      }
    }

instead of

{
      __name: 'MyComponent',
      components: { Foo: a.B, Bar: c.d },
      props: { prop1: Object, prop2: Boolean },
      setup (s) {
        const e = s, d = whatever();
        return { __sfc: !0, props: e, someData: d };
      }
    }

[yyx990803]

This is currently a non-goal because Vue 2's template-to-render-fn compilation was written in a way that does not perform any JS expression parsing (it is done in a separate pass with other tools). So the whole process does not have the necessary information to prefix/unwrap refs based on <script setup> scope information. This is only possible if we completely rework Vue 2's template compilation, but that would be a big and risky refactor which we for now don't plan to do.