vue icon indicating copy to clipboard operation
vue copied to clipboard

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

Open jacekkarczmarczyk opened this issue 2 years ago • 1 comments

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 };
      }
    }

jacekkarczmarczyk avatar Oct 23 '22 20:10 jacekkarczmarczyk

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.

yyx990803 avatar Nov 09 '22 09:11 yyx990803