file: `counter.ts`:

export const Counter = qComponent(() => {
  const state = useState({count: 0})
  return onRender(() =>
    <button on:click={() => state.count++}>
      {state.count}
    </button>
  );
});

// After - - - -
file: `counter.js`:

export const Counter = qComponent(lazy('a.js#s0'));

file: `a.js`:

export const s0 = () => {
  const state = useState({count: 0});
  return onRender(lazy('b.js#s1', [state]))
}

file: `b.js`:

export const s1 = () =>
  const [state] = useLexicalScope();
  return <button on:click={lazy("c#s2", [state]}>
           {state.count}
         </button>
);

file: `c.js`:

export const s2 = () => {
  const [myState] = useLexicalScope();
  return myState.count++;
}

SSR as:

<div on:q-render="b.js#s1[obj1]" q:obj="obj1">
  <button on:click="c.js#s2[obj1]">0</button>
</div>
<script type="text/qwik">{"obj1": {"count":0}}</script>

---


export function Counter(props: {}) {
  const [count, setCount] = useState(0);
  return (
    <button onclick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}