Skip to content

Instantly share code, notes, and snippets.

View yyx990803's full-sized avatar

Evan You yyx990803

View GitHub Profile
@yyx990803
yyx990803 / svelte.js
Last active December 8, 2019 09:18
Svelte/Vue generated code size comparison of the TodoMVC implementation. Note: (1) imports are replaced with a const declaration to enable compression. (2) The comparison is between components' "own code" and doesn't include imported runtime code.
/* App.svelte generated by Svelte v3.14.1 */
/* After terser compression: min:6.00kb / gzip:2.43kb / brotli:2.15kb */
const {
SvelteComponent,
append,
attr,
destroy_block,
detach,
element,
empty,
<div id="app"></div>
<script>
// fileA.js
let currentEffect
class Dep {
constructor() {
this.subscribers = new Set()
}
@yyx990803
yyx990803 / async.js
Created August 8, 2014 19:03
Simple helper for async tests in Jasmine 1.3 that mimics 2.0 and Mocha
/**
* Jasmine 1.3 async helper
*/
function async (run) {
return function () {
var done = false
waitsFor(function () { return done })
run(function () { done = true })
}

2.6 Internal Change: Scoped Slot Function Return Value

This change only affects render function users. If you only use templates, you can ignore this change.

The Problem

In render functions, scoped slots are exposed on this.$scopedSlots as functions. Up until now, calling a scoped slot function can return a single VNode or an Array of VNodes based on what the parent component is passing in. For example, given this component:

const Child = {
export default {
async mounted() {
// if an async error is thrown here, it now will get
// caught by errorCaptured and Vue.config.errorHandler
this.posts = await api.getPosts()
}
}
<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
new Vue({
// ...
})
</script>
const reactiveState = Vue.observable({
count: 0
})
<div v-bind:[attr]="value"></div>
<div :[attr]="value"></div>
<button v-on:[event]="handler"></button>
<button @[event]="handler"></button>
<my-component>
<template v-slot:[slotName]>
Dynamic slot name
</template>
<my-component>
<template v-slot:header>
<p>Header</p>
</template>
<template v-slot:item="{ data }">
<h2>{{ data.title }}</h2>
<p>{{ data.text }}</p>
</template>
<SomeComponent>
<template #header>
<div>Header message</div>
</template>
<template #item="{ item }">
<div class="item">{{ item.text }}</div>
</template>
<template #footer>