[spion]

Great, here are my thoughts on it

1. Render methods make vue basically the same as React plus MobX, right? (and afaik you can use JSX too)

2. The spinner component was registered in the global scope. Will normal build tools know about the file and properly include it, or an import will need to be placed somewhere for that to work? What happens if another module registers a "spinner" component? ES6 and CommonJS modules have already solved this elegantly, and I believe its a must for larger scale applications that may consist of multiple complex modules

3. I see many wheels being reinvented, and as a non-vue user I have no idea what they mean. For example, does `<template scope="data">` name the first argument passed to the function? Is `default` the name of the first unnamed template? And this page is utterly baffling: https://vuejs.org/v2/guide/components.html#Scoped-Slots as I cannot figure out which thing is the template that is being passed arguments and which is doing the passing (and how).

edit: re (3) I finally got it, a `template`'s `scope` gives the props passed to a `slot` a name.

It seems to me that templates look like less learning initially, but they end up being more...

[alevans4]

1. The MobX-like functionality is moreso simply a native feature of Vue. All data values are converted into observed values. A render is triggered by changes to data. I believe Evan himself basically said React + MobX = Vue. Using a render function was just a choice. It could just as easily have been written with a template.

2. Again, this was basically just a choice for the example. The spinner could be defined in a module and imported/registered locally. Codepen/JSFiddle just isn't the greatest place for that kind of example.

3. Scoped slots are a way for a component to expose internal data to elements contained in a slot (content thats contained within the component but defined by it's parent). I agree, its initially one of the more confusing concepts in Vue.

[spion]

Ok I think I figured out how to use a template with a slot in the spinner component:

    <div>
    <img v-if="this.status == 'pending'" 
         src="https://media.giphy.com/media/10kTz4r3ishQwU/giphy.gif" />
    <slot v-if="this.status == 'success'" :list="this.data"></slot>
    <div v-if="this.status == 'error'">{{this.error}}</div>
    </div>

Then in the template the option line becomes

    <option v-for="option in data.list" :value="option">{{option}}</option>

Not too bad. Guess I'll have to come up with a new example of what Vue templates can't do now!

[alevans4]

You nailed it :) You could also destructure the passed properties in the scoped slot (scope="{list}") so you could just use "option in list".

[djur]

I wonder if the JS snippets in those attributes is syntax checked at build time or run time.

[alevans4]

Vue templates are compiled into render functions. They are checked when the template is compiled. If you are using a build process, then that would be at build time.

[djur]

Is there any editor support for that? One of the things I like about React + TypeScript is that the JSX is syntax-checked and type-checked in my editor as I type. My understanding is that this is possible because TS has built-in support for JSX.

[alevans4]

Not yet as far as I know.