How to use the vue-tsx-support.componentFactory function in vue-tsx-support

To help you get started, we’ve selected a few vue-tsx-support examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wonderful-panda / vue-tsx-support / test / tsc / basic / componentFactory.tsx View on Github external
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
github wonderful-panda / vue-tsx-support / test / jest / componentFactory.tsx View on Github external
it("multiple mixins", () =&gt; {
      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>");
    });
  });
github wonderful-panda / vue-tsx-support / test / jest / componentFactory.tsx View on Github external
it("accessing mixin's member", () =&gt; {
      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", () =&gt; {
github wonderful-panda / vue-tsx-support / test / tsc / basic / mixin.tsx View on Github external
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() {