Qwik, sample

test.tsx

import { component$, useSignal, useStore, useComputed$, useTask$, $ } from '@builder.io/qwik';

import './app.css'
//
const dataItems = [
  {id:1 , title: "title_1"},
  {id:2 , title: "title_2"},
  {id:3 , title: "title_3"},
];
//
export const App = component$(() => {
  const text = useSignal('qwik');
  const state = useStore({ count: 0, items: [] });
  const count = useSignal(0)
  const time = useSignal('paused');

  //init
  useTask$(({ track, cleanup }) => {
    const value = track(() => text.value);
    const id = setTimeout(() => (state.items = dataItems)
    , 100);
    cleanup(() => clearTimeout(id));
  });
  //add
//console.log("taskAdd"+ new Date().toString());
  const increment = $(() => {
console.log("increment="+ new Date().toString());
    count.value++
  });
  //
  return (
    <>
      <div>
      </div>
      <h1>Test!!!</h1>
      <hr />
      <div class="card">
        <lavel>Title:
          <input type="text" id="title"/>
        </lavel>
        <hr />
        <button onClick$={() => count.value++}>count is {count.value}</button>
        <button onClick$={increment}>count2 is {count.value}</button>
        {/* add */}
        <button onClick$={() => {
            const target =state.items;
console.log("#btn" + new Date().toString() + ",Len=" +target.length);
            const title = document.querySelector("#title");
            let titleValue = "";
            //@ts-ignore
            if(title){ titleValue = title.value }
            const addId = target.length + 1;
            target.push({id: addId, title: titleValue});
            //@ts-ignore
            title.value = "";
        }}>[ Add ]</button>
        {/*
        */}
        {/* test */}
        <button 
          type="button"
          class="btn btn__danger"
          onClick$={() => {
            console.log("#btn" + new Date().toString())
          }}
        >Test2
        </button>
      </div>
      <p class="read-the-docs">
        Click on the Vite and Qwik logos to learn more
      </p>
      <hr />
      <p>Count: {state.count}</p>
      <hr />
      {state.items.map((item: any) => {
        return (
        <div key={item.id}>
          <h3>title= {item.title}</h3>
          <span>id: {item.id}</span>
          <hr />
        </div>
        );
      })}
      <div>{time}</div>
    </>
  )
})