vuejs / core-vapor

Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM.
https://vapor-repl.netlify.app
MIT License
1.8k stars 86 forks source link

feat(compiler-vapor): v-slot props + v-slot on component #223

Closed LittleSound closed 3 months ago

LittleSound commented 3 months ago

related #154

I'll be working on the runtime for v-slot props in another PR later

Cases

<!-- v-slot on component -->
<Comp v-slot="{ foo, ...bar }">{{ foo + bar }}</Comp>
<Comp v-slot:named="props">{{ props.foo }}</Comp>

<!-- nested slots scoping -->
<Comp>
  <template #default="{ foo }">
    <Inner v-slot="{ bar }">
      {{ foo + bar + baz }}
    </Inner>
    {{ foo + bar + baz }}
  </template>
</Comp>

<!-- v-slot with v-if / v-for -->
<Comp>
  <template v-for="item in list" #[item]="{ bar }">foo</template>
</Comp>
<Comp>
  <template v-if="condition" #condition>condition slot</template>
  <template v-else-if="anotherCondition" #condition="{ foo, bar }">another condition</template>
  <template v-else #condition>else condition</template>
</Comp>
netlify[bot] commented 3 months ago

Deploy Preview for vapor-template-explorer ready!

Name Link
Latest commit de0b2122c30ac88873071307d1a146522b322daa
Latest deploy log https://app.netlify.com/sites/vapor-template-explorer/deploys/665cf4a3b4c9d30008de3df1
Deploy Preview https://deploy-preview-223--vapor-template-explorer.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

netlify[bot] commented 3 months ago

Deploy Preview for vapor-repl ready!

Name Link
Latest commit de0b2122c30ac88873071307d1a146522b322daa
Latest deploy log https://app.netlify.com/sites/vapor-repl/deploys/665cf4a349db43000883ee00
Deploy Preview https://deploy-preview-223--vapor-repl.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

github-actions[bot] commented 3 months ago

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 80.1 kB 28.1 kB 24.7 kB
compiler-vapor.global.prod.js 57.6 kB (+688 B) 19.6 kB (+254 B) 17.7 kB (+192 B)
runtime-dom.global.prod.js 95.1 kB 35.8 kB 32.3 kB
runtime-vapor.global.prod.js 48.3 kB 18 kB 16.5 kB
vue-vapor.global.prod.js 103 kB (+690 B) 36.1 kB (+269 B) 32.5 kB (+244 B)
vue.global.prod.js 152 kB 55.1 kB 49.3 kB

Usages

Name Size Gzip Brotli
createApp 55.4 kB 21.2 kB 19.4 kB
createSSRApp 58.7 kB 22.6 kB 20.6 kB
defineCustomElement 57.7 kB 21.9 kB 20 kB
vapor 48.6 kB 18.1 kB 16.5 kB
overall 69.2 kB 26.2 kB 23.8 kB