class-component-converter

class-component-converter

WARNING: [WIP]

class-component-converter is a transformer to convert your Vue component to Vue functional api.

Example

Before

import { Component as Comp } from 'vue-tsx-support'
import { Component, Prop, Emit, Inject, Provide, Watch }  from 'vue-property-decorator'

@Component
export default class YourComponent extends Comp<{}> {
    @Prop(Number) readonly propsA: number | undefined

    @Emit()
    test () {
        this.data1++
    }

    @Emit('testtest')
    testt () {
        this.data1++
    }

    @Emit()
    test1 (v: number) {
        this.data1++
    }

    @Emit()
    test2 (v: number) {
        this.data1++
        return v + 1
    }

    @Inject() readonly foo: string
    @Inject('bar') readonly injectionBar: string
  
    @Provide() provideFoo = 'foo'
    @Provide('baz') provideBaz = 'baz'

    data1 = 123
    data2 = 234

    get what() {
        return this.data1
    }

    get why() {
        return this.data2 + this.propsA + 1
    }

    set why (value) {
        this.data2 = value - 1
        console.log(this.foo, this.injectionBar)
    }

    hehe() {
        this.data1++
        console.log(this.data1, this.propsA)

        this.$emit('123', this.data1)
    }

    fooo () {
        const { propsA, data1, data2, what, why, hehe } = this
        const { fff } = foo()

        console.log(propsA, data1, data2, what, why, hehe)
    }

    @Watch('propsA')
    handlePropsAChanged(value: number, oldValue: number) {
        console.log(this.propsA, value, oldValue)
    }

    @Watch('data1')
    handleData1Changed() {
        console.log(this.propsA, this.data1, this.data2, this.what, this.why, this.hehe())
    }

    @Watch('$route')
    handleRouteChanged () {
        console.log(this.$router, this.$route, this.$store, this.$store.getters)
    }

    mounted () {
        if (this.$slots.default) {
            this.$slots.defalult(this.$refs.node)
        }
        console.log(123)

        const self = this
        self.fooo()
        console.log(self.propsA)
        console.log(self.$route)
    }

    render () {
        return (
            <div>{this.data1}</div>
        )
    }
}

After

import { Component as Comp } from "vue-tsx-support";
import {
  Component,
  Prop,
  Emit,
  Inject,
  Provide,
  Watch
} from "vue-property-decorator";
const YourComponent = {
  steup(
    props: {
      propsA: number | undefined;
    },
    context
  ) {
    const foo: string = inject("foo");
    const injectionBar: string = inject("bar");
    const data1 = value(123);
    const data2 = value(234);
    const test = () => {
      data1.value++;
      context.$emit("test");
    };
    const testt = () => {
      data1.value++;
      context.$emit("testtest");
    };
    const test1 = (v: number) => {
      data1.value++;
      context.$emit("test1", v);
    };
    const test2 = (v: number) => {
      data1.value++;
      context.$emit("test2", v + 1, v);
    };
    const hehe = () => {
      data1.value++;
      console.log(data1.value, props.propsA);
      context.$emit("123", data1.value);
    };
    const fooo = () => {
      const { fff } = foo();
      console.log(
        props.propsA,
        data1.value,
        data2.value,
        what.value,
        why.value,
        hehe
      );
    };
    const what = computed(() => {
      return data1.value;
    });
    const why = computed(
      () => {
        return data2.value + props.propsA + 1;
      },
      value => {
        data2.value = value - 1;
        console.log(foo, injectionBar);
      }
    );
    onMounted(() => {
      if (context.$slots.default) {
        context.$slots.defalult(context.$refs.node);
      }
      console.log(123);
      fooo();
      console.log(props.propsA);
      console.log(context.$route);
    });
    watch(props.propsA, (value: number, oldValue: number) => {
      console.log(props.propsA, value, oldValue);
    });
    watch(data1, () => {
      console.log(
        props.propsA,
        data1.value,
        data2.value,
        what.value,
        why.value,
        hehe()
      );
    });
    watch(context.$route, () => {
      console.log(
        context.$router,
        context.$route,
        context.$store,
        context.$store.getters
      );
    });
    provide({ provideFoo: "foo", baz: "baz" });
    return { foo, injectionBar, data1, data2, hehe, fooo, what, why };
  },
  render() {
    return <div>{this.data1}</div>;
  }
};