JSFiddle - React, Tailwind, and code Playground

by tacman1123

HTML

<html>

<script type="module">
        import Dexie from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
        var db = new Dexie('someDB');
        /* db.delete().then (()=>db.open()); */ 

        db.version(1).stores({
            productTable: "++id,price,brand,category"
        });
        console.log('async vipDB')
        db.on('ready', async vipDB => {
            const count = await vipDB.productTable.count();
            if (count > 0) {
                console.log("Already populated, count: " + count);
            } else {
                const data = await loadData();
                const addPromise = await vipDB.productTable.bulkAdd(data).then( (x) => console.log(x));
                console.log ("Done populating.", data);
            }
        });

        console.log('open db');
        db.open();

        console.log('count');
        db.productTable.count().then( (c) => {console.log(c); document.getElementById('count').innerText = c});
        async function loadData() {
            let url = 'https://dummyjson.com/products';
            const response = await fetch(url);
            return await response.json().then(data => data.products)
        }

    </script>
    <body>
    
    <h3>Dexie</h3>
    <a href="https://github.com/dexie/dexie-website/issues/123#issuecomment-2041427950">https://github.com/dexie/dexie-website/issues/123#issuecomment-2041427950</a>
    <p>
        Database has <span id="count">wating...</span> items.

    </p>
    
    </body>
</html>