Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
function inferRequiredPropNames() {
const MyComponent = tsx.componentFactory.create({
props: {
foo: { type: String, required: true as true },
bar: { type: Number, required: false },
baz: String
},
render(): VNode {
return <span>{this.foo}</span>;
}
});
/* OK */
;
// foo is required, bar and baz are optional
;
; //// TS2322 | TS2326 | TS2769: Property 'foo' is missing
// other known attributes
it("multiple mixins", () => {
const Mixin1 = {
data() {
return { foo: "foo" };
}
};
const Mixin2 = Vue.extend({
data() {
return { bar: "bar" };
}
});
const Component = tsx.componentFactory
.mixin(Mixin1)
.mixin(Mixin2)
.create({
props: {
baz: String
},
render(): VNode {
return <span>{this.foo + this.bar + this.baz}</span>;
}
});
const w = mount(Component, { propsData: { baz: "baz" } });
expect(w.html()).toBe("<span>foobarbaz</span>");
});
});
it("accessing mixin's member", () => {
const Mixin = {
props: {
foo: String
},
computed: {
bar() {
return "bar";
}
}
};
const Component = tsx.componentFactory.mixin(Mixin).create({
props: {
baz: String
},
render(): VNode {
return <span>{this.foo + this.bar + this.baz}</span>;
}
});
const w = mount(Component, { propsData: { foo: "foo", baz: "baz" } });
expect(w.html()).toBe("<span>foobarbaz</span>");
});
it("multiple mixins", () => {
function basicFunctionary() {
const factory = vuetsx.componentFactory.mixin({
props: { foo: String },
computed: {
fooUpper(): string {
return this.foo.toUpperCase();
}
}
}).mixin(vuetsx.component({
props: { bar: String },
computed: {
barUpper(): string {
return this.bar.toUpperCase();
}
}
}, ["bar"])
).mixin(Vue.extend({
data() {