feat(runtime-vapor): component emits

[ubugeeei]

Closes #41

Summary

I have implemented emit.
This branch is derived from the branch for implementing props.
Please merge the props PR first.

• main
  • feat(runtime-vapor): component props #40
    • feat(runtime-vapor): component emits #42 <- current
      • feat(runtime-vapor): component attrs #47
        • feat(runtime-vapor): component slots [WIP] #54

Points I'm unsure about

1. Flags related to lifecycle
   I had implemented it so that isMounted is set to false when unmounting,
   In traditional components, it seems that isUnmounted is set to true.
   Which approach should we follow for the implementation? (In this PR, I have added the isUnmounted flag.)

2. Holding rawProps in ComponentInternalInstance
   I think we will face the same issue when implementing attr, but in emit, we need to search for handlers from user-defined raw props, not those defined as propsOption.
   In the past, raw props were held in instance.vnode.props, but at the moment, there is no implementation that handles vnode, so I am directly holding them in ComponentInternalInstance.
   Is this okay?

3. Caching
   Similar to props, I haven't implemented caching because I don't understand how to handle it.
   Should we also implement it in Vapor Mode?

4. Validations
   Should be emits validations are implemented?
   https://vuejs.org/guide/components/events.html#events-validation

How to confirm the operation

Since the compiler implementation is not yet available, I have written the expected JavaScript code as the compilation result in playground/src/emits.js.

code

import {
  children,
  on,
  ref,
  template,
  watchEffect,
  setText,
  render as renderComponent // TODO:
} from '@vue/vapor'

export default {
  props: undefined,

  setup(_, {}) {
    const count = ref(1)
    const setCount = v => {
      count.value = v
    }

    const __returned__ = { count, setCount }

    Object.defineProperty(__returned__, '__isScriptSetup', {
      enumerable: false,
      value: true
    })

    return __returned__
  },

  render(_ctx) {
    const t0 = template('<p></p>')
    const n0 = t0()
    const {
      0: [n1]
    } = children(n0)

    watchEffect(() => {
      setText(n1, void 0, _ctx.count)
    })

    renderComponent(
      child,
      {
        get count() {
          return _ctx.count
        },
        get ['onClick:child']() {
          return _ctx.setCount
        }
      },
      [],
      n0
    )

    renderComponent(
      child,
      {
        get count() {
          return _ctx.count
        },
        get ['onClick:childOnce']() {
          return _ctx.setCount
        }
      },
      [],
      n0
    )

    return n0
  }
}

const child = {
  props: {
    count: { type: Number, default: 1 }
  },

  setup(props, { emit }) {
    const handleClick = () => {
      emit('click:child', props.count * 2)
    }

    const __returned__ = { handleClick }

    Object.defineProperty(__returned__, '__isScriptSetup', {
      enumerable: false,
      value: true
    })

    return __returned__
  },

  render(_ctx) {
    const t0 = template('<button>set count * 2</button>')
    const n0 = t0()
    const {
      0: [n1]
    } = children(n0)
    on(n1, 'click', _ctx.handleClick)
    return n0
  }
}

Left button: normal emit
Right button: emit once

2023-12-10.13.38.52.mov

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	91.1 kB	34.7 kB	31.2 kB
runtime-vapor.global.prod.js	27.6 kB (+471 B)	10.6 kB (+169 B)	9.71 kB (+161 B)
vue-vapor.global.prod.js	66.2 kB (+471 B)	23 kB (+182 B)	20.8 kB (+160 B)
vue.global.prod.js	148 kB	53.9 kB	48.1 kB

Usages

Name	Size	Gzip	Brotli
createApp	51.4 kB	20 kB	18.3 kB
createSSRApp	54.7 kB	21.3 kB	19.4 kB
defineCustomElement	53.7 kB	20.8 kB	19 kB
vapor	27.7 kB (+475 B)	10.6 kB (+167 B)	9.76 kB (+159 B)
overall	65.1 kB	25.1 kB	22.7 kB

[ubugeeei]

⚠️ Mark as draft until Props PR is merged.

[ubugeeei]

I've just added a playground for checking the default values.
It's not related to the content of this PR, though.

[ubugeeei]

2023-12-10.13.37.25.mov

[ubugeeei]

#47 (comment)

[ubugeeei]

This PR is on hold until this issue is resolved.
#84

[ubugeeei]

🤷‍♂️

Run pnpm run format-check
  pnpm run format-check
  shell: /usr/bin/bash -e {0}
  env:
    PUPPETEER_SKIP_DOWNLOAD: true
    PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin

> @0.0.0-vapor format-check /home/runner/work/core-vapor/core-vapor
> prettier --check --cache .

Checking formatting...
[warn] packages/reactivity/src/ref.ts
[warn] packages/runtime-core/src/componentEmits.ts
[warn] packages/runtime-core/src/componentPublicInstance.ts
[warn] packages/runtime-vapor/src/componentEmits.ts
[warn] tsconfig.json
[warn] Code style issues found in [5](https://github.com/vuejs/core-vapor/actions/runs/7600943756/job/20699756554?pr=42#step:7:5) files. Run Prettier to fix.

[netlify]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	f6e71af
🔍 Latest deploy log	https://app.netlify.com/sites/vapor-repl/deploys/65b12e1ebcfe850008d9a422
😎 Deploy Preview	https://deploy-preview-42--vapor-repl.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sxzz]

#83 (comment)