## Input

const useCounter = () => {
    return useState({count: 0});
}

export const App = qComponent(() => {
    const state = useCounter();
    const thing = useState({thing: 0});


    onRender(() => {
        const count2 = state.count * 2;
        return (
            <div on:click={() => state.count+=count2 }>
                <span>{state.count}</span>
                    {buttons.map(btn => (
                        <button
                            on:click={() => state.count += btn.offset + thing}
                        >
                            {btn.name}
                        <button>
                    ))}
        
            </div>
    
        )
    });
})

> [name=Miško Hevery]
> - `return onRender(...)`
> - rename `qHook` => `qrl`
> - include captured vars in `qrl`
> - need linter which ensures that only `const` can be captured.

## Output

export const useCounter = () => {
    return useState({count: 0});
}

// MISKO
// export const App = qComponent(qHook("#App_mount"));
export const App = qComponent(qrl("#App_mount"));

export {useCounter} from './input';

export const Mount = () => {
    // MISKO: Delete as nothing captured
    // const closure = qwik.useClosure();
    
    const state = useCounter();
    const thing = useState({thing: 0});

    // MISKO
    // closure.state = state;

    // MISKO
    // onRender(qHook("#App_render"));
    onRender(qrl("#App_render", [state, thing]));
})

// MISKO
// export const Render = () => {
export const AppRender = () => {
    // MISKO
    // const closure = qwik.useClosure();
    const [state, thing] = qwik.useLexcicalScope();
    // MISKO
    // const {state} = closure;
    
    const count2 = state.count * 2;
    // MISKO
    // closure.count2 = count2;
    
    return (
        // MISKO
        // <div on:click={qHook("#App_render_div_onclick")>
        <div on:click={qrl("#App_render_div_onclick", [state, count2])>
            <span>{state.count}</span>
                {buttons.map(btn => { // expr needs to be transformed
                    // MISKO
                    // closure.btn = btn; // VALUE IS LOST
                    return (
                        <button
                            // MISKO
                            // on:click={qHook("#App_render_div_button_onclick")}
                            on:click={qrl("#App_render_div_button_onclick", [state, btn, thing])}
                        >
                            {btn.name}
                        <button>
                    );
                })}

        </div>

    )
}

export const App_render_div_onclick = () => {
    // MISKO
    // const {state, count2} = qwik.useClosure();
    const [state, count2] = qwik.useLexicalScope();
    return (state.count+=count2);
}

export const App_render_div_button_onclick = () => {
    // MISKO
    // const {state, btn} = useClosure();
    const [state, btn] = useLexcilScope();
    state.count += btn.offset;
}