@yhwh-script/sqlite 1.2.7 → 2.0.0

package/README.md

@@ -1,14 +1,2 @@
-# Description
-A [yhwh-script](https://github.com/yhwh-script) project with [SQLite WASM](https://www.npmjs.com/package/@sqlite.org/sqlite-wasm) built on <a title="Vite" href="https://vitejs.dev"><img height="20" alt="Vitejs-logo" src="https://vitejs.dev/logo.svg"></a> without examples.
-
-# Quick Start
-Just call `npm install` and `npm run dev`.
-
-# FYI
-You can create Single File Web-Components in dedicated `.html` files inside the `public/elements` folder. `npm run dev` and `npm run build` will generate maps in `src/elements/index.js` which are being fetched in the `/src/main.js` script for defining your CustomElements.
-
-Please understand that the project structure is leaned on [valid-custom-element-names](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), i.e. using a dash ("-") is mandatory.
-
-In `/src/publicApis/index.js` you can define APIs for your custom-elements (for example to the SQLite module) via the window object.
-
-Just stick to the examples and you are good to go. Have fun!
+# sqlite
+A production-ready serverless SQLite database inside your browser.

package/{src/modules/sqlite/index.js → index.js}

@@ -1,15 +1,20 @@
 import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
-import { log, error } from '../logger'
 
 // https://www.npmjs.com/package/@sqlite.org/sqlite-wasm
 // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
 
+export const moduleName = "sqlite";
+
 const workers = {};
-let publicAPI = {};
 
-export function getWorker(name = 'default') {
-    let worker = workers[name];
-    return worker ? worker : undefined;
+function initalizeWorker(name) {
+    let worker = new Worker(new URL('./sqliteWorker.js', import.meta.url), { type: 'module' });
+    if (workers[name]) {
+        console.error("InstantiationError: already taken");
+        worker.terminate();
+    } else {
+        workers[name] = worker;
+    }
 }
 
 export function createDB(name = 'default') {
@@ -29,7 +34,40 @@ export function createDB(name = 'default') {
     });
 }
 
-export function executeQuery({ sql, values }, name = 'default') {
+export async function deleteAndTerminateDB(name) {
+    var root = await navigator.storage.getDirectory();
+    let fileSystemFileHandle = await root.getFileHandle(`${name}.sqlite3`);
+    if (fileSystemFileHandle) {
+        let worker = workers[name];
+        worker.onmessage = async function ({ data }) {
+            const { type } = data;
+            if (type === 'closed') {
+                console.log("Removing...", fileSystemFileHandle);
+                await fileSystemFileHandle.remove();
+                await worker.terminate();
+            }
+            delete workers[name];
+        }
+        worker.postMessage({ action: 'closeDB' });
+    }
+}
+
+export function downloadDB(name = 'default') {
+    let worker = workers[name];
+    if (worker) {
+        worker.onmessage = function ({ data }) {
+            const { type } = data;
+            if (type === 'application/vnd.sqlite3') {
+                let downloadChannel = new BroadcastChannel("download_channel");
+                downloadChannel.postMessage(data);
+                downloadChannel.close();
+            }
+        }
+        worker.postMessage({ action: 'downloadDB' });
+    }
+}
+
+export function executeQuery(sql, name = 'default') {
     return new Promise((resolve, reject) => {
         let worker = getWorker(name);
         if (worker) {
@@ -43,42 +81,51 @@ export function executeQuery({ sql, values }, name = 'default') {
             worker.onerror = (error) => {
                 reject(error);
             };
-            if (values && sql.indexOf("$") != -1) {
-                values.forEach(
-                    function replacePlaceholder(item, index) {
-                        sql = sql.replace("$" + (index + 1), `'${item}'`);
-                    }
-                );
-            }
             worker.postMessage({ action: "executeQuery", sql });
         } else {
             reject(new Error("No worker"));
         }
-    })
+    });
 }
 
-export function downloadDB(name = 'default') {
-    let worker = workers[name];
-    if (worker) {
-        worker.onmessage = function ({ data }) {
-            const { type } = data;
-            if (type === 'application/vnd.sqlite3') {
-                let downloadChannel = new BroadcastChannel("download_channel");
-                downloadChannel.postMessage(data);
-                downloadChannel.close();
+export function executeStatement({ sql, values, name = "default" }) {
+    return new Promise((resolve, reject) => {
+        let worker = getWorker(name);
+        if (worker) {
+            worker.onmessage = function ({ data }) {
+                const { type } = data;
+                if (type === 'application/json') {
+                    const { result } = data;
+                    resolve(result);
+                }
             }
+            worker.onerror = (error) => {
+                reject(error);
+            };
+            worker.postMessage({ action: "prepareStatement", sql, values });
+        } else {
+            reject(new Error("No worker"));
         }
-        worker.postMessage({ action: 'downloadDB' });
-    }
+    });
+}
+
+export function getWorker(name = 'default') {
+    let worker = workers[name];
+    return worker ? worker : undefined;
+}
+
+export function getWorkers() {
+    return workers;
 }
 
 export function uploadDB(fileName, arrayBuffer) {
     let [name, extension] = fileName.split(".");
-    if (extension === 'sqlite3') {
+    if (['sqlite', 'sqlite3'].includes(extension)) {
         let worker = workers[name];
         if (!worker) {
             initalizeWorker(name);
             worker = getWorker(name);
+            console.log({worker})
         } // TODO: allow overwrite
         worker.postMessage({ action: 'uploadDB', name, arrayBuffer });
     } else {
@@ -86,41 +133,20 @@ export function uploadDB(fileName, arrayBuffer) {
     }
 }
 
-export async function deleteDB(name) {
-    var root = await navigator.storage.getDirectory();
-    let fileSystemFileHandle = await root.getFileHandle(`${name}.sqlite3`);
-    if (fileSystemFileHandle) {
-        let worker = workers[name];
-        worker.onmessage = async function ({ data }) {
-            const { type } = data;
-            if (type === 'closed') {
-                log("Removing...", fileSystemFileHandle);
-                await fileSystemFileHandle.remove();
-                await worker.terminate();
-            }
-            delete workers[name];
-        }
-        worker.postMessage({ action: 'closeDB' });
-    }
-}
-
-function initalizeWorker(name) {
-    let worker = new Worker(new URL('./sqliteWorker.js', import.meta.url), { type: 'module' });
-    if (workers[name]) {
-        error("InstantiationError: already taken");
-        worker.terminate();
-    } else {
-        workers[name] = worker;
-    }
+export function terminate(name = 'default') {
+    let worker = workers[name];
+    if (worker) {
+        worker.postMessage({ command: 'terminate' });
+    } 
 }
 
 if (window.Worker) {
     try {
         // instantiation test
-        const sqlite3 = await sqlite3InitModule({ print: log, printErr: error });
-        log('Running SQLite3 version', sqlite3.version.libVersion);
+        const sqlite3 = await sqlite3InitModule({ print: console.log, printErr: console.error });
+        console.log('Running SQLite3 version', sqlite3.version.libVersion);
     } catch (err) {
-        error('Initialization error:', err.name, err.message);
+        console.error('Initialization error:', err.name, err.message);
     }
 } else {
     console.error('Your browser doesn\'t support web workers.');

package/package.json

@@ -3,29 +3,20 @@
     "bugs": {
         "url": "https://github.com/yhwh-script/sqlite/issues"
     },
-    "devDependencies": {
-        "@vitejs/plugin-basic-ssl": "^2.0.0",
-        "vite": "^6.2.0"
-    },
+    "description": "A production-ready serverless SQLite database inside your browser.",
     "dependencies": {
-        "@sqlite.org/sqlite-wasm": "^3.49.1-build2"
+        "@sqlite.org/sqlite-wasm":"^3.51.2-build5"
     },
-    "description": "This is a @yhwh-script app with SQLite support.",
     "homepage": "https://github.com/yhwh-script/sqlite#readme",
     "keywords": [
-        "CSS",
-        "CustomElements",
-        "HTML",
         "JavaScript",
-        "OPFS",
-        "SFC",
-        "Single File Components",
         "SQLite",
-        "Vanilla",
-        "Vite",
-        "WebComponents"
+        "OPFS",
+        "WebAssembly",
+        "vanilla"
     ],
     "license": "Unlicense",
+    "main": "index.js",
     "name": "@yhwh-script/sqlite",
     "publishConfig": {
         "access": "public"
@@ -34,12 +25,6 @@
         "type": "git",
         "url": "git+https://github.com/yhwh-script/sqlite.git"
     },
-    "scripts": {
-        "dev": "npm run gen && vite",
-        "gen": "node gen.cjs",
-        "build": "npm run gen && vite build",
-        "preview": "vite preview"
-    },
     "type": "module",
-    "version": "1.2.7"
+    "version": "2.0.0"
 }

package/{src/modules/sqlite/sqliteWorker.js → sqliteWorker.js}

@@ -16,14 +16,51 @@ onmessage = async function ({ data }) {
     }
     case 'executeQuery': {
       const { sql } = data;
-      log(sql);
       try {
-        const result = db.exec({ sql, returnValue: "resultRows" });
+        const result = await db.exec({ sql, returnValue: "resultRows" });
+        // console.log(sql, result);
         postMessage({ result, type: "application/json" });
       } catch (e) {
         if (e.message.indexOf("SQLITE_CANTOPEN") != -1) {
-          info("Info: Currently no SQLite database available for this worker. Upload a new database or reload the page.")
+          info("Info: Currently no SQLite database available for this worker. Upload a new database or reload the page.");
         }
+        if (e.message.indexOf("SQLITE_CONSTRAINT_UNIQUE") != -1) {
+          error("Error executing SQL statement", sql, e.message);
+        }
+      }
+      break;
+    }
+    case 'prepareStatement': {
+      const { sql, values } = data;
+      let stmt;
+      try {
+        // console.log(sql, values);
+        stmt = await db.prepare(sql, values);
+        const columns = stmt.getColumnNames();
+        // console.log("columns", columns);
+        stmt.bind(values);
+        // console.log("stmt", stmt)
+        const result = [];
+        while (stmt.step()) {
+          let row = stmt.get([]);
+          let zipped = columns.map(function (columnName, index) {
+            return [columnName, row[index]];
+          });
+          let obj = Object.fromEntries(zipped);
+          result.push(obj);
+        }
+        // console.log("RESULT", result)
+        postMessage({ result, type: "application/json" });
+      } catch (e) {
+        if (e.message.indexOf("SQLITE_CANTOPEN") != -1) {
+          info("Info: Currently no SQLite database available for this worker. Upload a new database or reload the page.");
+        } else if (e.message.indexOf("SQLITE_CONSTRAINT_UNIQUE") != -1) {
+          error("Error executing SQL statement", sql, e.message);
+        } else {
+          error("Error executing SQL statement", sql, e.message);
+        }
+      } finally {
+        stmt.finalize();
       }
       break;
     }

package/assets/javascript.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

package/assets/style/default.css

@@ -1,6 +0,0 @@
-:root {
-    * {
-        box-sizing: border-box;
-        margin: 0;
-    }
-}

package/gen.cjs

@@ -1,32 +0,0 @@
-const fs = require('fs')
-const { join } = require('path');
-
-const constants = {
-    ELEMENTS_DIR: join('.', 'elements'),
-    PUBLIC_ELEMENTS_DIR: join('.', 'public', 'elements'),
-    SRC_ELEMENTS_DIR: join('.', 'src', 'elements'),
-}
-
-const elements = [];
-
-fs.readdirSync(constants.PUBLIC_ELEMENTS_DIR, { withFileTypes: true })
-    .filter((dir) => dir.isDirectory())
-    .forEach((folder) => {
-        console.log(folder);
-        const fileNames = fs.readdirSync(
-            join(constants.PUBLIC_ELEMENTS_DIR, folder.name)
-        );
-        fileNames.forEach((fileName) => {
-            const dashSplit = fileName.split('-');
-            const prefix = dashSplit[0];
-            const dotSplit = dashSplit[1].split('.');
-            const suffix = dotSplit[0];
-
-            elements.push(join(constants.ELEMENTS_DIR, folder.name, prefix + '-' + suffix + '.html'))
-        });
-    });
-
-fs.writeFileSync(
-    join(constants.SRC_ELEMENTS_DIR, 'index.js'),
-    `export const htmlFiles=${JSON.stringify(elements)};`
-)

package/index.html

@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <link rel="icon" type="image/svg+xml" href="./assets/javascript.svg" />
-    <link rel="stylesheet" href="./assets/style/default.css">
-    <meta charset="UTF-8">
-    <meta name="description" content="yhwh-script is a vite build on top of vanilla JavaScript WebComponents with an optional SQLite WASM database.">
-    <meta name="keywords" content="HTML, CSS, JavaScript, WebComponents, CustomElements, SFC, Vite, SQLite">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>@yhwh-script/sqlite</title>
-</head>
-
-<body>
-    <sqlite-control></sqlite-control>
-    <script type="module" src="/src/main.js" defer></script>
-</body>
-
-</html>

package/public/elements/index.js

@@ -1 +0,0 @@
-export const htmlFiles=["elements/animals/animals-li.html","elements/animals/animals-view.html","elements/home/home-app.html","elements/home/home-header.html","elements/home/home-navigation.html","elements/home/home-switch.html","elements/quick/quick-delete.html"];

package/public/elements/sqlite/sqlite-control.html

@@ -1,86 +0,0 @@
-<script>
-    const { log, error } = window.Logger;
-    const { uploadDB, downloadDB, deleteDB } = window.SQLite;
-
-    const uploadButton = shadowDocument.querySelector('#uploadButton');
-    uploadButton.querySelector('click', (e) => {
-        let confirmation = prompt("Pressing OK will overwrite current database! Please write OK.", "");
-        if (confirmation && confirmation.toLowerCase() == "ok") {
-            log("OK to overwrite current database...");
-        } else {
-            alert("Canceled.");
-            e.preventDefault();
-        }
-    });
-    uploadButton.addEventListener('change', () => {
-        // TODO accept sqlite3 files only
-        try {
-            const file = uploadButton.files[0];
-            if (!file) return;
-            const reader = new FileReader();
-            reader.addEventListener('load', (e) => {
-                uploadDB(file.name, e.target.result); // e.target.result is an ArrayBuffer with the file's contents
-            });
-            reader.readAsArrayBuffer(file);
-        } catch (e) {
-            error(e);
-        }
-    });
-
-    const downloadButton = shadowDocument.querySelector('#downloadButton');
-    downloadButton.addEventListener('click', (e) => {
-        let databaseName = prompt("Please enter the name of the database to download.", "");
-        const downloadChannel = new BroadcastChannel("download_channel");
-        downloadChannel.onmessage = (message) => {
-            if (message.data.error) {
-                switch (message.data.error) {
-                    case "SQLITE_NOMEM":
-                        alert("Nothing to download. DB empty.");
-                        break;
-                    default:
-                        alert("Unknown Error.");
-                }
-            } else {
-                const a = shadowDocument.querySelector('#downloadLink');
-                a.href = window.URL.createObjectURL(message.data);
-                a.download = (`${databaseName}.sqlite3`);
-                a.addEventListener('click', function () {
-                    setTimeout(function () {
-                        window.URL.revokeObjectURL(a.href);
-                        a.remove();
-                    }, 500);
-                });
-                a.click();
-            }
-        };
-        downloadDB(databaseName);
-    });
-
-    const resetButton = shadowDocument.querySelector('#resetButton');
-    resetButton.addEventListener('click', async (e) => {
-        let databaseName = null;
-        try {
-            databaseName = prompt("Pressing OK will reset specified database! Please enter the name of the database.", "");
-            if (databaseName && databaseName.toLowerCase()) {
-                deleteDB(databaseName);
-            } else {
-                alert("Canceled.");
-                e.preventDefault();
-            }
-        } catch (err) {
-            if (err.name === 'NotFoundError') {
-                error(`${err.name} (${databaseName}.sqlite3): ${err.message}`)
-            }
-        }
-    });
-</script>
-
-<template>
-    <span>
-        <label for="uploadButton">Upload DB</label>
-        <input type="file" id="uploadButton" />
-    </span>
-    <button type="button" id="downloadButton">Download DB</button>
-    <button type="button" id="resetButton">Reset DB</button>
-    <a id="downloadLink" hidden></a>
-</template>

package/src/elements/index.js

@@ -1 +0,0 @@
-export const htmlFiles=["elements/sqlite/sqlite-control.html"];

package/src/main.js

@@ -1,94 +0,0 @@
-import './publicApis'
-import { htmlFiles } from './elements';
-
-for (const filePath of htmlFiles) {
-    const fileName = filePath.split("/").pop();
-    const dashSplit = fileName.split('-');
-    const prefix = dashSplit[0];
-    const dotSplit = dashSplit[1].split('.');
-    const suffix = dotSplit[0];
-
-    fetch(filePath).then(file => file.text()).then(html => {
-        const fragment = document.createRange().createContextualFragment(html);
-        const scriptFragment = fragment.querySelector("script");
-        const styleFragment = fragment.querySelector("style");
-        const templateFragment = fragment.querySelector("template");
-
-        customElements.define(`${prefix}-${suffix}`, class extends HTMLElement {
-            static observedAttributes = ["data-state"];
-            constructor() {
-                super();
-                this.attachShadow({ mode: "open" });
-            }
-            connectedCallback() {
-                this.hostDataIDs = []; // the hostDataIDs are used to getDOM from the script
-                this.dataset.id = Math.random().toString(16).substring(2, 8);
-                let hostElement = this;
-                while (hostElement && hostElement.dataset.id) {
-                    this.hostDataIDs.push(hostElement.dataset.id);
-                    hostElement = hostElement.getRootNode().host;
-                }
-                this.shadowRoot.replaceChildren();
-                if (scriptFragment?.getAttributeNames().includes('prefer')) {
-                    this.#appendScript();
-                    this.#appendTemplate();
-                    this.#appendStyle();
-                } else {
-                    this.#appendTemplate();
-                    this.#appendStyle();
-                    this.#appendScript();
-                }
-            }
-            attributeChangedCallback(name, oldValue, newValue) {
-                if (this.isConnected) {
-                    if (oldValue != newValue) {
-                        this.replaceWith(this.cloneNode(false)); // remove all listeners and reconstruct
-                    }
-                }
-            }
-            #createScript() {
-                const scriptElement = document.createElement("script");
-                scriptElement.setAttribute("type", "module");
-                scriptElement.textContent = `
-const shadowDocument = (function getDOM(hostDataIDs = '${this.hostDataIDs.toReversed().toString()}') {
-let shadowDocument = document;
-for (let hostDataID of hostDataIDs.split(',')) {
-    const host = shadowDocument.querySelector('[data-id="' + hostDataID + '"]');
-    if (host) {
-        shadowDocument = host.shadowRoot;
-    } else {
-        return null;
-    }
-}
-return shadowDocument;
-})();
-
-const $ = (query) => shadowDocument.querySelector(query);
-const $$ = (query) => shadowDocument.querySelectorAll(query);
-const state = shadowDocument.host.dataset.state ? JSON.parse(shadowDocument.host.dataset.state) : undefined;
-
-${scriptFragment ? scriptFragment.textContent : ''}
-`;
-                return scriptElement;
-            }
-            #appendScript() {
-                if (scriptFragment) {
-                    let scriptElement = this.#createScript(); // TODO: compile template to use state
-                    this.shadowRoot.appendChild(scriptElement);
-                }
-            }
-            #appendStyle() {
-                if (styleFragment) {
-                    let clonedStyle = styleFragment.cloneNode(true);
-                    this.shadowRoot.appendChild(clonedStyle);
-                }
-            }
-            #appendTemplate() {
-                if (templateFragment) {
-                    let documentFragment = document.createRange().createContextualFragment(templateFragment.innerHTML)
-                    this.shadowRoot.appendChild(documentFragment);
-                }
-            }
-        });
-    });
-}

package/src/modules/logger/index.js

@@ -1,11 +0,0 @@
-const LOG_LEVEL = 5; // 2 ERROR, 3 WARN, 4 INFO, 5 DEBUG
-
-export function error(...args) { if (LOG_LEVEL >= 2) console.error(...args); }
-
-export function warn(...args) { if (LOG_LEVEL >= 3) console.warn(...args); }
-
-export function log(...args) { if (LOG_LEVEL >= 4) console.log(...args); }
-
-export function info(...args) { if (LOG_LEVEL >= 4) console.info(...args); }
-// For DEBUG log level: verbose must be turned on in Dev Tools
-export function debug(...args) { if (LOG_LEVEL >= 5) console.debug(...args); }

package/src/modules/sqlite/READ.md

@@ -1 +0,0 @@
-Please, do not import sqlite module directly. Use an API!

package/src/publicApis/SQLite.js

@@ -1,3 +0,0 @@
-import { createDB, executeQuery, downloadDB, uploadDB, deleteDB } from '../modules/sqlite'
-
-export { createDB, executeQuery, downloadDB, uploadDB, deleteDB };

package/src/publicApis/index.js

@@ -1,5 +0,0 @@
-import * as Logger from '../modules/logger'
-window.Logger = Logger;
-
-import * as SQLite from './SQLite.js'
-window.SQLite = SQLite;

package/vite.config.js

@@ -1,21 +0,0 @@
-import { defineConfig } from 'vite';
-import basicSsl from '@vitejs/plugin-basic-ssl';
-
-export default defineConfig({
-    build: {
-        target: 'esnext'
-    },
-    server: {
-        port: 3443,
-        headers: {
-            'Cross-Origin-Opener-Policy': 'same-origin',
-            'Cross-Origin-Embedder-Policy': 'require-corp',
-        },
-    },
-    optimizeDeps: {
-        exclude: ['@sqlite.org/sqlite-wasm'],
-    },
-    plugins: [
-        basicSsl()
-    ]
-});