import { Component, mixin } from 'j-vue';


abstract class Mixin0 extends Component<Mixin0> {
    #d = 0;
    m0 () { return ++this.#d; }
}

const Mixin1 = {
    methods: {
        m1 () :void {}
    }
};
interface Mixin1 extends Component<Mixin1> {
    m1 () :void
}

const Mixins = mixin<Mixin0 & Mixin1>(Mixin0, Mixin1);


abstract class SuperComponent<Sub extends Component<Sub>> extends Mixins<Sub> {
    s () :void {}
}


abstract class SubComponent extends SuperComponent<SubComponent> {
    
    
    /* methods */
    
    m () { ++this.d; }
    
    
    /* computed */
    
    get c () { return this.d; }
    set c (value) { this.d = value; }
    
    
    /* hooks (Non-static for type, starts with `_` wouldn't waste any name) */
    
    // No conflict to methods and so on
    _created () { this.c; }
    
    
    /* watch (Non-static for type, starts with `_watch(`) */
    
    // watch exp (key) & handler (value)
    '_watch(d)' (d :this['d'], old_d :this['d']) { }
    
    // watch exp (key) & handler (value) (with options)
    '_watch(d);deep;immediate;flush=pre' (d :this['d'], old_d? :this['d']) { }
    
    // watch fn (getter) & handler (setter), better for auto type
    get '_watch(placeholder)' () { return this.d; }
    set '_watch(placeholder)' (d) { }
    
    // watch fn (getter) & handler (setter) (another)
    get '_watch(placeholder2--can be any unique words in fact);immediate' () { return this.#r.value; }
    set '_watch(placeholder2--can be any unique words in fact);immediate' (r) { }
    
    
    /* emits (Non-static for type, also starts with `_`) */
    
    get _emits () {
    	return {
            e1: (value :unknown) :value is 1 => value===1,
            e2: (arg0 :0, arg1 :1) :boolean => arg0===0 && arg1===1,
    	};
    }
    
    // For current TypeScript, `this :SubComponent` is necessary in method including `$emit` calling!
    e (this :SubComponent) {
    	this.$emit('e1', 1).$emit('e2', 0, 1);
    }
    
    
    /* props (like emits) */
    
    get _props () { return [ 'p' ] as const; }
    
    declare readonly p? :string;
    
    
    /* inject (Like props) */
    
    get _inject () { return [ 'i' ] as const; }
    
    declare readonly i :boolean;
    
    
    /* data */
    
    d :number = 0;
    
    // Mark it `protected` or `private`, to prevent access outside
    protected D :number = 0;
    
    
    // Hard private field can also be used! Though not reative directly (Which can also be intended)
    #p :number = 0;
    readonly #r :{ value :number } = Vue3.ref(0);
    readonly #c :{ readonly value :number } = Vue3.computed(() => this.#r.value);
    
    
    protected constructor (Vue3? :any) {// Really run once like options.data()! With real this!
        
        super();
        
        this.p;
        this.i;
        this.m;
        this.d;
        //this.c;// No computed, because constructor run inside options.data() (Compiled by jVue)
        
        this.#p;
        this.#r.value;
        this.#c.value;
        
        // It's possible to set instance level render like options.setup() returns in Vue 3:
        Component.render = () => Vue3!.h('p', [ this.d ]);
        
    }
    
    
    _render () {
        return arguments.length>1
            ? Vue3.h('p', [ this.d ])
            : this.$createElement!('p', [ this.d ]);
    }
    
    
    /* Other options, like multiple ways to write render */
    
    static render = function render (this :MyComponent) {
        return arguments.length>1
            ? Vue3.h('p', [ this.d ])
            : this.$createElement!('p', [ this.d ]);
    };
    static staticRenderFns = [];
    
    static Render = class {
        constructor (Vue3 :any) {
            return function render (this :MyComponent) {
                return Vue3.h('p', [ this.d ]);
            };
        }
    } as any;
    
    
    static template = `<p>{{ d }}</p>`;
    
    static inheritAttrs = true;
    
    static components = {};
    
    static provide = {};
    
    
};

const vm3 :SubComponent =       Vue3.createApp(SubComponent._toOptions(Vue3))    . mount('body    ');
const vm2 :SubComponent = new ( Vue2.extend   (SubComponent._toOptions(    )) )().$mount('body > *');

import * as Vue3 from 'vue@3';
import      Vue2 from 'vue@2.6.12';