preact.js + hono + workers + D1 で、何か作る

  return (
    <Layout title="Test_index">
      <div>
        <h1 class="text-4xl font-bold">Welcome , Preact2 </h1>
        <hr class="my-2" />
        <div id="root"></div>
      </div>
      {/* JS */}
      {html`<script src="/js/preact2/index.js?${timeStamp}"></script>`}
  </Layout>
  )

console.log("#preact2.index.js");
const html = htm.bind(preact.h);
const elem = document.getElementById("root");
//
const PageIndex = {
    /**
     *
     * @param
     *
     * @return
     */ 
    get_list : async function()
    {
        try{
            let ret = [];
            const item = {
                api_key: "",
            }
            const body = JSON.stringify(item);		
            const res = await fetch("/api/tasks/get_list", {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},      
                body: body
            });
            const json = await res.json()
            //console.log(json);   
            if (res.status !== 200) {
                console.error("error, status <> 200");
                throw new Error(await res.text());
            }
            if (json.ret !==  "OK") {
                console.error("Error, json.ret <> OK");
                throw new Error("Error, json.ret <> OK");
            }
            ret = json.data;
            return ret;
        } catch (e) {
            console.error("Error, get_list");
            console.error(e);
            throw new Error('Error , get_list');
        }
    },
    /**
     *
     * @param
     *
     * @return
     */     
    displayProc: function(items){
        try {
//console.log("#init=", new Date().toString());
            const li = [];
            items.forEach((element) => {
                let ht = html`
                <div>
                    <h3 class="text-3xl font-bold">${element.title}</h3>
                    <p>ID: ${element.id}, ${element.createdAt}</p>
                    <hr class="my-2" />
                </div>
                `;
                li.push(ht);
            });
            preact.render(li, elem);
        } catch (e) {
            console.error("Error, displayProc");
            console.error(e);
        }
    },
    /**
     *
     * @param
     *
     * @return
     */     
    initProc: async function() {
        try {
console.log("#init=", new Date().toString());
            const items = await this.get_list();
console.log(items);
            this.displayProc(items);
        } catch (e) {
            console.error("Error, get_list");
            console.error(e);
        }
    },
}
PageIndex.initProc();