herringtondarkholme/av-ts

A modern, type-safe, idiomatic Vue binding library

Hi there 👋

Introduction

Hi there! I'm Herrington Darkholme. I'm a web dev and web-dev-tool dev who is proficient in TypeScript and Rust.

I'm the author of a code search and rewriting tool, ast-grep. Feel free to reach me out if ast-grep can help you to ship breaking changes or help users to adopt new APIs!

Ideas?

• 🔭 I’m currently working on ast-grep and Vue compiler in Rust
• 🌱 ast-grep is a code searcher and refactoring tool based on tree-sitter.
• 💬 Ask me about how to migrate API changes and refactor code by using tools.
• 👯 I’m looking to collaborate on OSS project to help users migrate to new APIs!
• 📒 Other OSS: @element-plus, @vuejs, TypeScript and rspack
• 📫 How to reach me: Found me on twitter or medium!
• 🥱 Bored? This JS Crush game can kill you some time!

Language

Sponsors

I sincerely thank my sponsors for your trust and support!

If you love my code and work, buying me a coffee will help me a lot so I can spend more time on the project!

av-ts's Issues

[Enhancement] support type checking in template

Goal:

• type check template
• minimal setup overhead
• minimal fork, no reinventing wheels
• optionally, support intellisense completion

[proposal] Change the workings of @Lifecycle

Right now you put @Lifecycle in front of a method which (hopefully) has the same name as a lifecycle event.

There's a few issues with this:

1. You can't use TypeScript's type-checking to check if the method was spelled right and is in fact a known lifecycle method.
2. You let developers know in the documentation that they shouldn't call lifecycle-methods from other methods, but if they don't read that and they try it then TypeScript again won't complain.
3. VueJS actually does allow you to give a normal method the same name as a lifecycle-method, as long as you put it into the methods: {} option. And there might be times where the most appropriate name for a method happens to be created. However, this library doesn't allow for that.

All these issues could be resolved by redesigning @lifecycle to use the following syntax:

@Lifecycle('created')
initializeStuff() {
  // initialize stuff
}

1. With this syntax you can make typescript do compile-time checking if the provided string 'created' is actually a valid lifecycle.
2. Typescript allows developers to still call this.initializeStuff() which in this case is perfectly valid, since initializeStuff() will just be added to the methods: {} option.
3. Now it's perfectly valid to make a normal method called created and treat it as a normal method, because it will also just be added to the methods: {} option.

And I guess it should be possible to use the same lifecycle decorator on two different methods, right?

So what do you guys think?

howto no data props - question

hi,
lets say I want to use some lib that comes with regular vue like validation (vuelidate)
which extends vue and its outside of data.
How to simulate same behavior on your component, if its prop or data its not found.

export default {
  data () {
    return {
      name: '',
      age: 0
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  }
}

https://monterail.github.io/vuelidate/#sub-basic-form

Hey are you okay with me doing this?

I created a new package of my fork of your library, so that I could add it as a dependency in my projects like any other library. I'd just like to check if you're okay with it and if you'd maybe like to get a more explicit mention somewhere in the readme?

Here it is.

Using a js file (like jquery for example)

I get the following error:

ERROR in ./src/app.ts
(2,17): error TS2307: Cannot find module './app.vue'.

ERROR in ./~/vue-ts-loader!./src/assets/ts/js.ts
Module not found: Error: Cannot resolve module '~admin-lte/plugins/jQuery/jquery-2.2.3.min.js' in /Users/gldraphael/projects/projname/src/assets/ts
@ ./~/vue-ts-loader!./src/assets/ts/js.ts 2:0-56

I've haven't made any changes to webpack.config.js

resolve: {
      extensions: ['', '.ts', '.vue', '.js']
  },

  module: {
      loaders: [
          { test: /\.vue$/, loader: 'vue' },
          { test: /\.ts$/, loader: 'vue-ts' },
          // a few more loaders for LESS, fonts, etc.
      ],
  },
  vue: {
    // instruct vue-loader to load TypeScript
    loaders: { js: 'vue-ts-loader', less: 'css!less' },
    // make TS' generated code cooperate with vue-loader
    esModule: true
  }

I'm using it from app.vue as:

<script src="./assets/ts/js.ts"></script>

And js.ts just includes the jquery file as:

import "~admin-lte/plugins/jQuery/jquery-2.2.3.min.js"

Lifecycle methods give error TS1241

Hi! Do you have a working example that uses lifecycle methods? Even if I use the example with just @Lifecycle beforeCreate() {} I get the following error:

error TS1241: Unable to resolve signature of method decorator when called as an expression. Supplied parameters do not match any signature of call target.

Static analyzing props using TSX/JSX

As mentioned in the ts-loader issue list, it would be nice to think about making static analyse of properties while using TSX model and even when using .vue files. Please note that I am by no means no expert in either TypeScript, Vue nor WebPack, so please bear with me :-)

As I can see it, it should be possible, if the vue HTML template compiler output typescript code in stead if pure js (at least for all props arguments, the rest don't matter as it is auto generated code), and then make tsc compile all this together, to make the best use of all the good work done inside TS.

The problem with this is:

• We need a vue.compile that optionally can generate typed props as arguments.
• Error reporting will be good but we will have bad position data (has TS pragmas for line number changes like i C ?)
• We need to make a TSX/vue loader, that can make this happen early, as tsc model for this is to make JS output, so we miss a lot of control.

So the flow could be :

1. vue tsx split ->
2. compile (pseudo) HTML part to render fn ->
3. remerge autogen and original ts code ->
4. compile it all using TSC (getting nice static errors)

Could this be done somehow ?

Create something like this for Vuex and Vue-Router?

Thank you so much for the hard work on this library!

Kilimanjaro is nice but I really think annotations like this would be killer for Vuex and Vue-Router. You mention in the doc that it should be possible using Component.register, but to be honest after looking at the current annotation sources it makes my head spin a bit!

It would be awesome if we could do something like this... is it possible?

@Store
export default class MyStore {
  count = 0;
  
  @Mutation increment(state, props) {
    state.count += props.amount;
  }

  @Action increment ({commit}, props) {
    commit('increment', props);
  }
}

Read me typo

I'm trying out your library, as it seems like a great way to use typescript in vue. I noticed the following when my c/p failed:

under install

import {Componet} from 'av-ts'

@Componet
class MyAwesomeComponent {
  // ....
}

Componet is missing an n

Error on working with vue-router

We are using this library and vue-router 2.0 to create a application and received below error in Chrome. So what is the correct implementation to integrate av-ts with vue-router?

[Vue warn]: Error when rendering component <router-link>
My vue file is like this:

<template>
<div><router-link to="/team"> Go to team </router-link>
</div>
</template>

<script> import { Vue, Prop, Component, Lifecycle } from 'av-ts'
import VueRouter = require('vue-router')
@component
export default class teamDetail extends Vue {
@prop currentTeam
}
</script>

Does av-ts support multiple possible types definition of property- union type support in `@Prop`

Hi,
We can define mutiple possible types property in Vue like below.

Vue.component('example', {
    propB: [String, Number],
})

How to use @Prop to define it.

Would you be willing to make lowercased aliases for the decorators?

My personal preference is to have class-decorators like @Component capitalized (because class-names are also capitalized) and all other decorators uncapitalized (because property- and method-names are also uncapitalized).

Different developers / companies prefer different styles. If you'd be willing to export every decorator in both its capitalized form and its uncapitalized form then the developer using your library can import whichever fits his style the best.

Can I Import Typescript from another file?

I love this library and have it set up with Webpack according to your blog post, and it all works great, so thanks for that.

The one thing I am missing is the ability to separate out the <script> part of a web component into a separate .ts file and then import it into the .vue file. I would just do this for larger components where code completion and other editor tooling would be really useful.

I don't suppose you would know how to achieve this do you? I'm pretty much a newbie in this area ...

av-ts should not proxy private members to Vue's data object

First of all thanks a lot for this excellent solution for us vuejs-ts developers.

One thing that I would like to see is making it possible to opt out of proxying fields to Vue.js's data section by simply declaring them private. I haven't spend enough time with TS's decorators to be sure if that's even possible.

[feature request] make @prop more concise

Right now a property is defined like so:

@Prop aRequiredNumber = p({
  type: Number,
  required: true
})
// or
@Prop aStringWithDefault = p({
  type: String,
  default: 'Hello World!'
})
// or
@Prop anWithObjectDefault = p({
  type: Object,
  default() {
    msg: 'Hello World!'
  }
})

But this could all be much more concise, like so:

@Prop aRequiredNumber: number // required is inferred since no default value was given
// or
@Prop aStringWithDefault = 'Hello World!' // the type could be inferred from the default value
// or
@Prop anWithObjectDefault = { // the decorator can put this default value into a function, the developer doesn't have to worry about that...
  msg: 'Hello World!'
}

I have forked another repository to add this feature to it and I succeeded. However, I found out I like this repository more, so if you'd let me then I'd happily add that feature to this one too.

Possible to make one-line @Data declarations?

Would it be possible to make the @Data decorator work on individual properties?

class TestComponent extends Vue {
  normal = 'normal';
  @Data test = () => new Test();
  @Data own = function () {return this.propValue} //would need this syntax to correctly bind this
  @Data shared = () => store.sharedObject
}

I have not worked with decorators before, so don't know how much is possible. I guess the biggest problem is the type signatures, as this.test needs to be of type Test not () => Test.

Current workaround is to set all data in the data function, and simply declare the variables on the class for typings:

class TestComponent extends Vue {
  normal:string;
  test:Test;
  own:PropType;
  shared:SharedObject;
  @Data data() {
    return {
      normal : 'normal',
      test : new Test(),
      own : this.propValue,
      shared : store.sharedObject,
    }
  }
}

[request for support] Would you be willing to see if you can get this to work Nuxt.js?

I like Nuxt.js very much and I was wondering if it would be possible to use av-ts in a Nuxt.js project. I've been trying to get it to work, but I get Cannot convert undefined or null to object. (unfortunately without a stack trace)

edit

Okay I figured out where the error comes from. Nuxt.js changes the data() {} option in such a way that this is not available anymore. Which goes wrong in the collectData() method of this library, because it does let vm = this and then a bit later on for (let key of Object.keys(vm)) { ... } which of course doesn't work if this is undefined.

TypeScript language service can't find name

This one is kind of weird. I have a Jasmine test:

import '../src/declarations';
import App from '../src/App.vue';


describe('Hello.vue', () => {
    let vm: App;
    it('should render correct contents', () => {
        vm = (new App).$mount();
        expect(vm.msg).toBe('Welcome to Your Vue.js App');
    })
});

I don't think declarations.ts matters, but just in case:

declare module '*.vue' {
  import * as Vue from 'vue'
  const Component: typeof Vue
  export default Component
}

My App.vue file has a <script> block with:

export default class App extends Vue {

Everything works great, my tests pass/fail as expected, I get autocomplete in WebStorm as I'm writing my tests. Except...the TypeScript language service gives me:

Error:(6, 13) TS2304:Cannot find name 'App'.

...for the line with:

    let vm: App;

If I omit the type declaration the error goes away. But then it complains for everything on vm, as it thinks is is a Vue instance, not my TypeScript class.

I can, of course, do testing the way you do, with no $mount. Or I can do as you suggest in the ticket about component instances, and don't think in terms of typing in tests, and work down at the generated ES6 layer. But it would sure feel nice to get some typing.

data snapshot loses class information

class Test {

}

class TestComponent extends Vue {
  test:Test = new Test();
}

Here the class info is lost at runtime, and test property on the component is a simple object.

This means that it will fail a check if used as a property that expect a specific type.

@Prop test = p({
    type:Test
  })

Current workaround is to either use a data function to avoid the snapshotting, or set the property type Object

ref undefined

  <div ref="title"   class="col-6">
                        {{ new Date(rec.DateCreated)| <a href=""> author</a>
                      </div>
..
// $refs: {
//     title: HTMLDivElement
//   }
  @Lifecycle mounted() { 
     this.getData(); 
     alert(this.$refs["title"] );
  //this.$refs.title
     } 

gets undefined, but why?

question - watch router

@Watch<navbar, string>(function (this, newVal?: any, oldVal?: any) { // this.$route.path:string , newVal?:any, oldVal?:any 
            if (this.$route.path != undefined)
               console.log('Changed current path to: ' + this.$route.path);
        })
       '$route.path'

doesnt work anymore..

how do you watch routes nowdays? tried @watch('$route.path') doesnt see that property

component's name do not work.

When I want to use component recursion, I find component's name do not work. Maybe this code cause the problem. line20 @ core.js

function makeOptionsFromMeta(meta, name) {
     meta.name = name;  // delete this ?
     ......

watch scope

Probably not an issue but a caveat or I'm doing something wrong.
Inside watch function type of (this) is Vue so I have to do something like this or it won't compile:

// Watched class property @Watch plus declaration and initiation
    @Watch(function (newValue, oldValue) {
        let self = <AddressComponent>this;
        if (newValue == 0)
            self.isNewAddress = true;
        else
            self.isNewAddress = false;
    })
    selectedBillingAddress: string = undefined;

also data and watched members must be initialized.

template

How can I declare template option in component?
Still migrating from vue 1.0 to 2.0, have been using typescript in components without decorators, and used a lot of template: <div> ... option in my .ts files.
Can I just declare template=<div>.. ?

Add warning for illegal initializers for props

I have component

import { Vue, Prop, Component } from 'av-ts'

@Component({name: 'best-girl'})
class BestGirl extends Vue {
  @Prop name:string = "Asuka"
  @Prop isBest:boolean = true
}

I try to use it:

<best-girl @click="hello" girl="Rem" :isBest="false"/>

I get error:

Uncaught TypeError: Cannot create property 'type' on string 'Asuka'

We can trace the error back to prop.ts:

Component.register(PROP_KEY, function(proto, instance, options) {
  let propKeys: string[] = proto[PROP_KEY]
  let props = options.props = options.props || createMap()

  for (let key of propKeys) {
    let prop: PropOptions = {}
    if (instance[key] != null) {
      prop = instance[key]
      delete instance[key]
    }
    // refill type if not existing, do we need this?
    if (!prop.type) { // Error happens here because we can't set .type on numbers, booleans and strings
      prop.type = getReflectType(proto, key)
    }
    props[key] = prop
  }
  options.props = props
})

I guess I should have wrapped the property in a magic p function. But that's not really obvious. Should you not at least provide a warning that we can't use primitive types like this, or else wrap the value in an object for the user's sake?

Mixin Error

I'm trying to use Mixin, but I got a error.

ERROR in D:\somedirectory\Button.ts
(13,22): error TS2507: Type 'Cls<MA, MB>' is not a constructor function type.

This is my code.

import { Vue, Component, Prop, p, Mixin, Trait } from "av-ts";

@Trait class MA extends Vue {
    data1 = 123;
    myMethod() {};
}
@Trait class MB extends Vue {
    data2 = 456;
    myMethod2() {};
}

@Component
class Button extends Mixin(MA, MB) {
}

export = Button;

My typescrpt version is 2.0.10.

Mixin(MA, MB) will return a VueComponent normally, if I just call it.

Something goes wired in v0.7.1

import { Component, Vue }  from 'av-ts'

@Component()
class Test extends Vue {

}

Above code works w/ v0.7.0. But w/ v0.7.1 it raise error:

Error:(3, 2) TS2345:Argument of type 'typeof Test' is not assignable to parameter of type 'VClass'.
Property 'extend' is missing in type 'typeof Test'.

comparison with other vue typescript libraries

Hi, am moving our discussion from the vue-typescript issues,
seems like vue-typescript is dormant at Vue 1.x, so am looking for an alternative.

am wondering how av-ts project compares with:

• https://libraries.io/npm/vue-typescript-component
• https://github.com/vuets/vuets

David

testing

Hi, noticed that your vue-cli template doesn't have one preconfigured.
wondering what the preferred testing framework(s) is/are?

other frameworks have some combintion of :

• nightwatch.js
• jest
• karma
  etc.

any preferences?
would be great if your cli template could be pre-configured

thanks
David

Problem with Mixin and custom elements e.g. <router-link>

It seems custom elements don't work when I use Mixin. Could you please have a look and tell me if I'm doing something wrong?

Foo.ts:

import {Vue, Trait} from "av-ts";

@Trait
export default class Foo extends Vue {}

Bar.ts:

import Foo from "components/Foo";
import {Mixin, Component} from "av-ts";

interface Mixed extends Foo {}

@Component
export default class Bar extends Mixin<Mixed>(Foo) {}

Bar.vue:

<template>
  <router-link :to="{ name: 'FooBar' }">Go</router-link>
</template>

<script src="./Bar.ts"></script>

I got: [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly?...

But if Bar.ts is:

import {Vue, Component} from "av-ts";

@Component
export default class Bar extends Vue {}

...then it's fine.

[Design] should @Component only decorate Vue's subclass?

Cons:

• Verbose
• Even noisier when used to declare mixin

Pros:

• the only way to specify class must be a subclass of vue
• easier type checking

Firefox watcher duplicate

I'm using av-ts in new part of my application and I'm experiencing some strange issues in my Firefox 49.0.2 for Windows. Everything works as expected in Chrome and IE. I can't replicate exact errors in this small test code but something is wrong with the watchers setup and they are always duplicated and double executed.
Attached Sample Code to reproduce, using av-ts, vue-router and webpack: package.zip

Console output Chrome:

Console output Firefox

IE11 is fine like Chrome.
I'm banging my head for last two days, have no clue, can you help please? Don't know if it's specific av-ts, vue or vue-router issue or some combination in my setup.

Thanks!

name doesnt show up

Hi,
if I have following template, where my etx ist just exporting all your stuff with with vue,
I put name in component, it doesnt get displayed, shouldnt it?
How is it rendering objects that I fill inside decorator?
Thanks

<template>
    <div>
This is ABOUT template..{{someabout}}  {{name}}
    </div>
</template>
<script>
import {Component, create, getHelper,Vue,Vuex }  from '../etx'

@Component({
     name: 'aboutname'
})
export default class about extends Vue {
    someabout = 'about'
}
</script>

Watch not triggering function on change to select

I'm not able to have the Watch directive call my function. The select has the correct data being bound to it with the value selected correctly. Changing the value in the select does not trigger the watch function.

I have the following in my view:

<select v-model="selectedBillingCycle">
    <option v-for="billingCycle in billingCycles" v-bind:value="billingCycle.name">{{ billingCycle.name }}</option>
</select>

My TypeScript then has the following:

    public selectedBillingCycle: string;

    @Watch("selectedBillingCycle")
    public changePackages(oldValue: string, newValue: string): void {
        console.log("Loading packages for " + this.selectedCurrency + " and " + this.selectedBillingCycle);

        this.loadPackages();
    }

Is this an issue with my implementation or Watch? I'm using av-ts 0.6.1 and TypeScript 2.1.4.

Upgrade or relax Vue dependency

Looks like some nice additions: https://github.com/Evertt/av-ts :)

Static class properties are undefined

First off, this lib is the only reason I've come back to vue. Thank you so much for all your effort =]

When creating static properties on a class, all of them return undefined.

export default class ChartSbar extends Vue {
	static S_QUERY = 'chart.sbar.query'
	static S_ITEMS = 'chart.sbar.items'
	static S_SCROLL = 'chart.sbar.scroll'
	@Avts.Lifecycle
	mounted() {
		console.log('ChartSbar.S_QUERY', ChartSbar.S_QUERY) // undefined
	}
}

I notice all the ts trickey you've accomplished (well done) so my guess is that has to do something with it. Any idea how to get this working?

Thanks mate!

[Enhancement] merge properties in defined in class decorator

Currently av-ts just overwrites properties in class decorator.
That will be problematic in such case

@Component({
  watch: {
    'nested.property': function() {} // watch options that cannot be decorated
  }
})
class V extends Vue {
  @Watch(function() {})
  anotherPropery = 123 
}

Using inject-loader to mock services

As described in this page (http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html), I tried to use the inject loader.

I used require('!!vue?inject!..."), as tried others names (av-ts) does not work.

The code compiles, but mock does not work. Is this project prepared to allow the use of inject-loader as described in vue docs?

Cant use arrays as data fields

If I use and initialise a data field as an array, it is converted to an object and can no longer be used as an array.

class Test extends Vue {
  list:string[] = [];
  listMethod() {
    //this.list is no longer an array, and give runtime error
    this.list.push('test')
  }
}

I can work around this, by using the @Data decorator, but that is not optimal, especially with multiple other data fields.

After a quick look, it could seem that the problem is that snapshot function in util.js handles arrays as objects, but I don't know if there is more to it, or if it would be correct to pass the array as value or to make a copy (properly copy to be consistent).

p({ type: Number }) doesn't work.

TS v2.1.1, av-ts v0.5.4

num: number = p({
  type: Number
})

cause

Error:(15, 3) TS2322:Type 'Number' is not assignable to type 'number'.
  'number' is a primitive, but 'Number' is a wrapper object. Prefer using 'number' when possible.

Boolean is similar.
But p(Number) works.

module 'vue' has no default export

Any more examples of the new @Watch usage?

I followed the example in README and tried below code w/ [email protected] & [email protected]

@Component({
  name: 'app',
})
export default class App extends Vue {

  get isModalOpen(): boolean {
    return store.state.isModalOpen
  }

  @Watch('isModalOpen')
  modalHandler(n, o) {
    if (n === o) { return }

    if (n) {
      addModalClass()
    } else {
      removeModalClass()
    }
  }

  test: string = 'asdf'

  @Watch('test')
  testHandler(n, o) {
    console.log(n + o)
  }
}

but no luck. Neither param of neither handler got its type.

Error:(35, 16) TS7006:Parameter 'n' implicitly has an 'any' type.
Error:(35, 19) TS7006:Parameter 'o' implicitly has an 'any' type.
Error:(48, 15) TS7006:Parameter 'n' implicitly has an 'any' type.
Error:(48, 18) TS7006:Parameter 'o' implicitly has an 'any' type.

Create a vue-cli template

Any volunteer?

Complier error when using `this` in @Watch

I'm seeing property 'list' does not exist on type 'Vue' errors in console, but the resulting code works correctly. Here is a contrived example of the code in question:

@Component
export default class Avatar extends Vue {
  list = {
    a: 'thing',
    b: 'other'
  };

  @Watch(function(current, previous) {
    const oldValue = this.list[previous];
    const newValue = this.list[current];
  }, {immediate: true})
  watchedProp: string; // 'a', 'b', etc
}

Component instance in tests

I see the tests in this project and read Vue documentation about testing, but I'm unable to get the component instance in my tests. Can you please show a direction?

This is what I have:

export class LoginComponent extends Vue
{
	userName = 'a';
}

And in test:

const vm = new Vue({
	el: document.createElement('div'),
	render: (h) => h(LoginComponent)
}).$mount();

let userName = vm.$el.querySelector('.user-name') as HTMLInputElement;

This is ok.

But how I can read userName from the LoginComponent instance data?

Edit: with standard Vue, I would access the data directly in vm, but with av-ts it's not there.

Async Components (Lazy Loading)

Is it possible to create Async Components? I don't see a way to translate something like this...

Vue.component('async-webpack-example', function (resolve) {
  // This special require syntax will instruct Webpack to
  // automatically split your built code into bundles which
  // are loaded over Ajax requests.
  require(['./my-async-component'], resolve)
})

into an av-ts decorated component class. Maybe I'm missing something obvious?

av-ts 0.6

- [ ] remove the constraint that component must inherit from Vue

• ship the new @watch decorator: BREAKING CHANGE here

The first point: it is very verbose to extends Vue and import a new Symbol. For small components (which are quite common in component oriented arch) it is just overkill.

I do include this constraint for preventing user from inheriting classes other than component. But this can be warned in documentation. Why would most users be bothered by naughty users?

Impossible to achieve point1 because components option expects hashes of which the values are ComponentOption/FunctionalOption/typeof Vue.

Also, _init is required to be called in base constructor to inject in propData. vuejs/vue-class-component#41

Single type definition file for all vue files

Right now, I need to create a type definition file for each .vue with the following contents:

import Vue = require('vue')

declare var exp: Vue
export default exp

Anyway I can just do with one *.vue.d.ts file?

Uncaught TypeError: Cannot call a class as a function @ v0.5.2 / v0.5.3

When with v0.5.1 it's all good.

The error was caused here:

_classCallCheck(this, HelloComponent); // then

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {  // false here
    throw new TypeError("Cannot call a class as a function");
  }
}

I compared the built code and the only difference is:

// v0.5.1 (working)

function decorate(cls) {
  Component.inDefinition = true;
  // workaround flow inference
  var instance = undefined;
  try {
    instance = new cls();
  }
  finally {
    Component.inDefinition = false;
  }

// v0.5.2 (broken)

function decorate(cls) {
  Component.inDefinition = true;
  var instance = Object.create(Vue.prototype);
  Object.defineProperty(instance, '_init', {
    value: util_1.NOOP, enumerable: false
  });
  try {
    cls.call(instance); // this calls _classCallCheck
  }
  finally {
    Component.inDefinition = false;
  }

I'm using [email protected], [email protected]
I'm not using vue-ts-loader, but awesome-typescript-loader and separated template like below:

<style lang="sass" src="./app.component.sass" />
<template lang="pug" src="./app.component.pug" />
<script lang="ts" src="./app.component.ts" />

import { Vue, Component } from 'av-ts'

@Component({
  name: 'app',
})
export default class AppComponent extends Vue {
}

I've put my code here: https://github.com/whitetrefoil/vue-ts-arch/tree/av-ts-052

Failed to mount component when including a component from another

I found no example that a component template includes another component in a .vue file.

The error I have is: Failed to mount component: template or render function not defined.
(found in component )

app.vue:

<template>
<div id="app">
	<comp></comp>
</div>
</template>

<script>
import { Vue, Component } from 'av-ts';
import * as Comp from './comp.vue';

@Component({
	components: { 'comp': Comp }
})
class App extends Vue
{
}

export default App;
</script>

<style>
</style>

comp.vue:

<template>
<div id="comp">
	<div>
		Comp
	</div>
</div>
</template>

<script>
import { Vue, Component } from 'av-ts';

@Component(/*{
	name: 'comp'
}*/)
class Comp extends Vue
{
}

export default Comp;
</script>

<style>
</style>

app.ts:

import * as Vue from 'vue';
import Comp from './comp.vue';
import App from './app.vue';


new Vue({
	el: '#app',
	components: { App, Comp },
	render: h => h('app')
});

I can include comp directly in app.ts, but it does not work when embedded in app.vue component.