test.f7.js

const ComponentButton = (props, { $onMounted }) => {

    $onMounted(() => {
        console.log("[TEST] COMPONENT BUTTON MOUNTED");
    });

    return () => (
        <button
            class="button button-fill button-preloader button-loading"
            onclick={() => props.fnClicked()}>
            <span class="preloader"></span>
            <span>{props.label}</span>
        </button>
    )
}


const ComponentParent = (props, { $onMounted }) => {

    $onMounted(() => {
        console.log("[TEST] COMPONENT PARENT MOUNTED");
    });

    return () => (
        <ComponentButton
            label='Click Me'
            fn-clicked={props.fnButtonClicked}>
        </ComponentButton>
    );
}


export default (props, { $on, $onMounted }) => {

    $onMounted(() => {
        console.log("[TEST] MOUNTED");
    });

    $on('page:init', () => {
        console.log("[TEST] PAGE INIT");
    });

    function doNothing() {
        console.log("[TEST] Clicked!");
    }

    return () => (
        <div class="page">
            <div class="page-content">
                <ComponentParent fn-button-clicked={doNothing}></ComponentParent>
            </div>
        </div>
    )
}