How to use the marko/widgets/legacy.defineComponent function in marko

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require('./template.marko'),
    getInitialState: function(input) {
        return {
            version: input.version,
            id: input.id
        };
    },
    getTemplateData: function(state, input) {
        return {
            version: state.version,
            id: state.id
        };
    },
    init: function() {
        // console.log(module.id, 'init()', this.state);
        window.rerenderInitOrder.push(this.state.id);

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require('./template.marko'),
    
    init: function() {

    }
});

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require.resolve('./template.marko'),
    getInitialState: function(input) {
        return {
            heading: input.heading || '',
            message: input.message || '',
            colors: input.colors || []
        };
    },
    getTemplateData: function(state, input) {
        return {
            heading: state.heading,
            message: state.message,
            colors: state.colors
        };
    }
});

module.exports = require('marko/widgets/legacy').defineComponent({
	template: require.resolve('./template.marko'),

	getTemplateData: function(state, input) {
		return {
			name: input.name,
            messageCount: input.messageCount
		};
	},

	init: function() {
        this.lifecycleEvents = [];

		this.recordWidgetLifecycleEvent('init');
	},

	onRender: function(eventArg) {

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require.resolve('./template.marko'),
    getInitialState: function(input) {
        return {
            buttonSize: 'small',
            buttonLabel: 'Initial Label'
        };
    },
    getTemplateData: function(state, input) {
        return {
            buttonSize: state.buttonSize,
            buttonLabel: state.buttonLabel
        };
    },

    update_buttonSize: function(newSize) {
        var button1Widget = this.getWidget('button1');

var widgetLessRenderer = require('./components/app-widgetless/renderer');
var simpleRenderer = require('./components/app-simple').renderer;

module.exports = require('marko/widgets/legacy').defineComponent({
	template: require('./template.marko'),

	getTemplateData: function(state, input) {
		return {
			renderers: [
                widgetLessRenderer,
                widgetLessRenderer,
                simpleRenderer
            ]
		};
	}
});

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require('./template.marko'),
    
    init: function() {

    }
});

module.exports = require('marko/widgets/legacy').defineComponent({
	template: require.resolve('./template.marko'),

	getWidgetConfig: function() {
		return {
			type: 'widget config'
		};
	},

	getInitialState: function() {
		return {
			type: 'widget state'
		};
	},

	getTemplateData: function(state, input) {
		return {

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require.resolve('./template.marko'),
    getInitialState: function(input) {
        return {
            buttonSize: 'small',
            buttonLabel: 'Initial Label'
        };
    },
    getTemplateData: function(state, input) {
        return {
            buttonSize: state.buttonSize,
            buttonLabel: state.buttonLabel
        };
    },

    update_buttonSize: function(newSize) {
        var button1Widget = this.getWidget('button1');

module.exports = require('marko/widgets/legacy').defineComponent({
    template: require('./template.marko'),
    getInitialState: function(input) {
        return {
            buttonSize: input.buttonSize || 'normal'
        };
    },
    getTemplateData: function(state, input) {
        return {
            buttonSize: state.buttonSize
        };
    },

    setButtonSize: function(size) {
        this.setState('buttonSize', size);
    },
    init: function() {