strantr/vuety

TypeScript annotations for Vue.js

vuety's Issues

New Provide and Inject decorators

Add decorators for the new provide/inject functionality https://vuejs.org/v2/api/#provide-inject

Ancestor:

@Provide("name") 
@Data public field : string; // Specific name

@Provide 
@Data public field1 : string; // Auto name

Descendant:

@Inject("name") public field: string; // Specific name
@Inject public field1: string; // Auto name

Properties are not copied into $options

Similar to #5, getters and setters need to be copied into $options computed properties.

Provided properties cannot be referenced

@Component({
    template: `<div>{{data}}</div>`
}) export class Layout extends Vue {
    @Provide public get data() {
        return "test";
    }
}

Error: Property or method "data" is not defined on the instance but referenced during render

When referenced from another method (e.g. console.log(this.data)) undefined is returned.

Memory still leaking via On on other component

It seems that the handlers are overwriting themselves in the On meaning they are not correctly removed on the destroyed event.

Decorators error using TypeScript 2.5.2

Latest update causes the following errors to occur on compilation, no errors show in the IDE (vscode)

error TS1241: Unable to resolve signature of method decorator when called as an expression.
  Value of type 'DecoratorFactory<LifecycleName>' has no properties in common with type 'TypedPropertyDescriptor<() => void>'. Did you mean to call it?

@Inject @Prop combination does not work as documented

@Inject @Prop are documented as

// Allow the provided dependency to be overridden by a prop

This does not work, the injected value is always used. This would be useful functionality, the generated members may need to be:

inject: { "field": "__inject_field" }, props: ["field"]

then replace the field prop member (storing it __prop_field) with

get field() {
   if(this.__prop_field !== undefined)  return this.__prop_field;
   return this.__inject_field;
}

This means that Prop/Inject will need to be aware of each other or special handling needs to be added for this to @component.

Change to use es6 default import of Vue

Change
import * as Vue from "vue"
to
import Vue from "vue"
as per:
https://vuejs.org/v2/guide/typescript.html

Decorators do not work in *.vue single file components

Needs investigating, looks like the context of this is incorrect, possibly due to vue-loader.

Methods are not bound to the Vue instance

Methods are not being bound to the Vue instance on callbacks from events:

@Component({
    template: "<button @click="test">click</button>
}) class Test {
   public test() {
     console.log(this); // null on click
   }
}

This appears to be because methods are not being copied into the $options object.

On and Emit should allow event name as the first parameter when specifying a target

For backwards compatibility, <2.0.0 had the parameters the other way round, there is no reason there cannot be an overload.

Method $vuety-provide conflicts with existing Vue instance method

Seems this function in newer versions of Vue is picked up as an issue.

In the provide function in bundle.js adding delete v.proto["$vuety-provide"] appears to resolve this issue, although I'm unsure as to why.

v.done(function (data) {
  delete v.proto["$vuety-provide"];
  data.options.provide = function () {
    var _this = this;
    var provide = {};
    Object.keys(provided).forEach(function (k) { return provide[k] = _this[provided[k]]; });
      return provide;
    };
});

Add example of a custom decorator to readme

A section on how to use the Vutey generator and callback from a custom decorator

Test lifecycle events passed as an arary to options

This should work, but needs testing

E.g.

{
   created: [function(){}, function(){}]
}

This will allow easier ways to hook multiple actions to lifecycle events

Give components a default name

If no name is specified in options, the name of the class should be used instead.

Event decorators - On and Emit

On to be used for attaching a handler

//Handle event by name
@On("eventName") handleEvent(arg1: string, ...args) {
  // Handler
}
//Handle event by naming convention
@On() eventName()  { ... }

//Handle event on root element
@On(v => v.$root, "eventName")

Emit used for raising events

@Emit("eventName") raiseEvent(arg1: string, arg2: number) { 
   // Runs before the event is triggered
  return () => { // Runs after the event is triggered }
}
// Emit an event on the parent
@Emit(v => v.$parent) eventName(arg1: string, arg2: number) { }

These will need to be added on the lifecycle events, so #2 should be looked into first, if that isn't possible the lifecycle events will need to be wrapped or injected as mixin

Need documentation for methods and computed properties

Simply mention "they just work".

Data and Props should not cache default values if they are non-primitive

Caching complex objects e.g.
@Data value = {test: 123};
Causes any mutations to the value to be shared across all instances.

Either throw a warning in this situation, don't cache or clone the object - possibly an option

Package main file is incorrect

It is currently dist/index.js
It should be dist/bundle.js

Allow Data(), Prop() with no arguments to be called as factory

For backwards compatibility
@Data() field; should be allowed.

Currently it errors and you must use @Data field;

Fails to build with latest webpack

Output paths can no longer be relative:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./dist" is not an absolute path!

Change vue to a peer dependency

Change vue to a peer dependency