Subscribe on changes!

Improve defineExpose()

avatar
Mar 13th 2023

What problem does this feature solve?

I would like to propose 2 things to defineExpose.

  1. [DONE #7949] Make expose variable more cryptic like __expose (like props) so we could use another expose variable (in my case I had to use exposed:
const _sfc_main$k = {
  __name: 'DialogComponent',
  setup(__props, { expose }) {


const exposed = {};
expose(exposed);
  1. Nice feature of the expose that you can add to it later like in onMounted() when we have our DOM ready:
    Object.assign(exposed, {
        showModal: async loader => {
            if (loader) {
                ({ default: component.value } = await loader());
            }
            $dialog[0].showModal();
        },
        close: () => $dialog[0].close()
    });

To make the syntax shorter in the first item of this proposal I suggest to return the exposed object from the expose function:

function createSetupContext(instance) {
    const expose = exposed => {
        // return here
        return (instance.exposed = exposed || {});
    };
    let attrs;
    {
        return {
            get attrs() {
                return attrs || (attrs = createAttrsProxy(instance));
            },
            slots: instance.slots,
            emit: instance.emit,
            expose
        };
    }
}

so our exposed object could be declared like that giving we solved the both problems:

const expose = defineExpose();
// later add props to the expose for example in `onMounted()`

What does the proposed API look like?

  1. Encrypt encode script setup parameter generated with defineExpose()
  2. Return from the expose function the exposed object to use it later;
avatar
Jun 11th 2023

The first one is resolved in #7949