strantr / vuety Goto Github PK
View Code? Open in Web Editor NEWTypeScript annotations for Vue.js
License: MIT License
TypeScript annotations for Vue.js
License: MIT License
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?
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;
};
});
Simply mention "they just work".
Needs investigating, looks like the context of this
is incorrect, possibly due to vue-loader.
It is currently dist/index.js
It should be dist/bundle.js
@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.
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
For backwards compatibility
@Data() field;
should be allowed.
Currently it errors and you must use @Data field;
Change vue to a peer dependency
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!
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.
Change
import * as Vue from "vue"
to
import Vue from "vue"
as per:
https://vuejs.org/v2/guide/typescript.html
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
If no name is specified in options, the name of the class should be used instead.
It seems that the handlers are overwriting themselves in the On meaning they are not correctly removed on the destroyed event.
A section on how to use the Vutey generator and callback from a custom decorator
For backwards compatibility, <2.0.0 had the parameters the other way round, there is no reason there cannot be an overload.
@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.
Similar to #5, getters and setters need to be copied into $options
computed properties.
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
This should work, but needs testing
E.g.
{
created: [function(){}, function(){}]
}
This will allow easier ways to hook multiple actions to lifecycle events
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.