@yhwh-script/sqlite 1.2.7

package/README.md

@@ -0,0 +1,14 @@
+# 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!

package/UNLICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/assets/javascript.svg

@@ -0,0 +1 @@
+<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

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

package/gen.cjs

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,19 @@
+<!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/package.json

@@ -0,0 +1,45 @@
+{
+    "author": "Jahrome <yhwhscript@gmail.com>",
+    "bugs": {
+        "url": "https://github.com/yhwh-script/sqlite/issues"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-basic-ssl": "^2.0.0",
+        "vite": "^6.2.0"
+    },
+    "dependencies": {
+        "@sqlite.org/sqlite-wasm": "^3.49.1-build2"
+    },
+    "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"
+    ],
+    "license": "Unlicense",
+    "name": "@yhwh-script/sqlite",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "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"
+}

package/public/elements/index.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1,86 @@
+<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

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

package/src/main.js

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,11 @@
+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

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

package/src/modules/sqlite/index.js

@@ -0,0 +1,127 @@
+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
+
+const workers = {};
+let publicAPI = {};
+
+export function getWorker(name = 'default') {
+    let worker = workers[name];
+    return worker ? worker : undefined;
+}
+
+export function createDB(name = 'default') {
+    return new Promise((resolve, reject) => {
+        initalizeWorker(name);
+        let worker = getWorker(name);
+        worker.onmessage = function ({ data }) {
+            const { type, message } = data;
+            if (type === 'created') {
+                resolve({ message });
+            }
+        }
+        worker.onerror = (error) => {
+            reject(new Error(error));
+        };
+        worker.postMessage({ action: 'createDB', name });
+    });
+}
+
+export function executeQuery({ 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);
+            };
+            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();
+            }
+        }
+        worker.postMessage({ action: 'downloadDB' });
+    }
+}
+
+export function uploadDB(fileName, arrayBuffer) {
+    let [name, extension] = fileName.split(".");
+    if (extension === 'sqlite3') {
+        let worker = workers[name];
+        if (!worker) {
+            initalizeWorker(name);
+            worker = getWorker(name);
+        } // TODO: allow overwrite
+        worker.postMessage({ action: 'uploadDB', name, arrayBuffer });
+    } else {
+        throw new Error({ name: "UnsupportedError", message: "Unsupported extension" });
+    }
+}
+
+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;
+    }
+}
+
+if (window.Worker) {
+    try {
+        // instantiation test
+        const sqlite3 = await sqlite3InitModule({ print: log, printErr: error });
+        log('Running SQLite3 version', sqlite3.version.libVersion);
+    } catch (err) {
+        error('Initialization error:', err.name, err.message);
+    }
+} else {
+    console.error('Your browser doesn\'t support web workers.');
+}

package/src/modules/sqlite/sqliteWorker.js

@@ -0,0 +1,98 @@
+import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
+import { log, info, error } from '../logger';
+
+var db = null;
+var sqlite3 = null;
+
+onmessage = async function ({ data }) {
+  const { action } = data;
+  switch (action) {
+    case 'createDB': {
+      const { name } = data;
+      const { newDB, message } = await createDatabase(name)
+      db = newDB;
+      postMessage({ type: 'created', message });
+      break;
+    }
+    case 'executeQuery': {
+      const { sql } = data;
+      log(sql);
+      try {
+        const result = db.exec({ sql, returnValue: "resultRows" });
+        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.")
+        }
+      }
+      break;
+    }
+    case 'uploadDB':
+      const { name, arrayBuffer } = data;
+      const { message } = await uploadDatabase(name, arrayBuffer)
+      log(message, db);
+      break;
+    case 'downloadDB':
+      try {
+        const byteArray = sqlite3.capi.sqlite3_js_db_export(db);
+        const blob = new Blob([byteArray.buffer], { type: "application/vnd.sqlite3" });
+        postMessage(blob); // send the database Blob to the API
+      } catch (e) {
+        if (e.message.indexOf("SQLITE_NOMEM") != -1)
+          postMessage({ type: "application/vnd.sqlite3", error: "SQLITE_NOMEM" });
+        else
+          error(e);
+      }
+      break;
+    case 'closeDB':
+      closeDB();
+      postMessage({ type: "closed" });
+      break;
+    default:
+      log(data)
+  }
+}
+
+async function createDatabase(name) {
+  const sqlite3 = await getInstance();
+  return 'opfs' in sqlite3
+    ? { newDB: new sqlite3.oo1.OpfsDb(`/${name}.sqlite3`), message: `OPFS is available, created persisted database at /${name}.sqlite3` }
+    : { newDB: new sqlite3.oo1.DB(`/${name}.sqlite3`, 'ct'), message: `OPFS is not available, created transient database /${name}.sqlite3` };
+}
+
+async function uploadDatabase(name, arrayBuffer) {
+  try {
+    const sqlite3 = await getInstance();
+    if ('opfs' in sqlite3) {
+      const size = await sqlite3.oo1.OpfsDb.importDb(`${name}.sqlite3`, arrayBuffer);
+      if (size) {
+        db = new sqlite3.oo1.OpfsDb(`/${name}.sqlite3`);
+        return { message: `New DB imported as ${name}.sqlite3. (${arrayBuffer.byteLength} Bytes)` }
+      } else {
+        throw new Error({ name: "ImportError", message: "Empty size" })
+      }
+    } else { // TODO allow alternative
+      throw new Error({ name: "OPFSMissingError", message: "Unsupported operation due to missing OPFS support." });
+    }
+  } catch (err) {
+    error(err.name, err.message);
+  }
+}
+
+function closeDB() {
+  if (db) {
+    log("Closing...", db);
+    db.close();
+  }
+}
+
+async function getInstance() {
+  try {
+    if (!sqlite3) {
+      sqlite3 = await sqlite3InitModule({ print: log, printErr: error });
+    }
+    return sqlite3;
+  } catch (err) {
+    error(err.name, err.message);
+  }
+}

package/src/publicApis/SQLite.js

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

package/src/publicApis/index.js

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

package/vite.config.js

@@ -0,0 +1,21 @@
+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()
+    ]
+});