Editing 在浏览器运行 PostgreSQL PGlite

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>在浏览器运行 PostgreSQL PGlite</title>
</head>

<body>
    <h4>在浏览器运行 PostgreSQL PGlite</h4>
    <button type="button" class="btn-start">启动数据库</button>
    <button type="button" class="btn-exec d-none">执行SQL</button>
    <br>
    <textarea class="txt-sql d-none">
SELECT 'name' col, split_part(split_part(VERSION(), ',', 1), ' on ', 1) val
UNION ALL
SELECT 'version' col, ( SELECT split_part(setting, ' ', 1) FROM pg_settings WHERE NAME = 'server_version' ) val
UNION ALL
SELECT 'compile' col, split_part(VERSION(), ',', 2) val
UNION ALL
SELECT 'dir_install' col, ( SELECT split_part(setting, 'main', 1) FROM pg_settings WHERE NAME = 'archive_command' ) val
UNION ALL
SELECT 'dir_data' col, ( SELECT setting FROM pg_settings WHERE NAME = 'data_directory' ) val
UNION ALL
SELECT 'charset' col, ( SELECT setting FROM pg_settings WHERE NAME = 'server_encoding' ) val
UNION ALL
SELECT 'time_zone' col, ( SELECT setting FROM pg_settings WHERE NAME = 'TimeZone' ) val
UNION ALL
SELECT 'datetime' col, to_char(now(), 'YYYY-MM-DD HH24:MI:SS.MS') val
UNION ALL
SELECT 'max_conn' col, ( SELECT setting FROM pg_settings WHERE NAME = 'max_connections' ) val
UNION ALL
SELECT 'curr_conn' col, CAST(COUNT(1) AS VARCHAR) val FROM pg_stat_activity
UNION ALL
SELECT 'time_out' col, ( SELECT setting FROM pg_settings WHERE NAME = 'statement_timeout' ) val
UNION ALL
SELECT 'ignore_case' col, CASE 'a' = 'A' WHEN 't' THEN '1' ELSE '0' END val
UNION ALL
SELECT 'system' col, split_part(split_part(VERSION(), ',', 1), ' on ', 2) val
    </textarea>
</body>

</html>

button {
    margin-bottom: 1em;
}

textarea{
    width: 90vw;
    height: 50vh;
    font-size: 1.5em;
}

.d-none {
    display: none;
}

let domBtnStart = document.querySelector(".btn-start");
let domBtnExec = document.querySelector(".btn-exec");
let domTxtSql = document.querySelector(".txt-sql");

// 启动
domBtnStart.addEventListener("click", async function () {
    domBtnStart.innerHTML = "正在启动...";

    let { PGlite } = await import("https://ss.netnr.com/@electric-sql/pglite@0.1.5/dist/index.js");
    const db = new PGlite("idb://pgdata_demo");
    console.debug(db);
    Object.assign(window, { PGlite, db });

    domBtnStart.classList.add("d-none");
    domBtnExec.classList.remove("d-none");
    domTxtSql.classList.remove("d-none");

    console.debug(await db.query(domTxtSql.defaultValue));
});

// 执行
domBtnExec.addEventListener("click", async function () {
    if (db) {
        domBtnExec.innerHTML = "正在执行...";
        try {
            let result = await db.query(domTxtSql.value);
            console.debug(result);
        } catch (ex) {
            console.error(ex);
            alert(`${ex}`);
        }
        domBtnExec.innerHTML = "执行SQL";
    } else {
        alert("请先启动数据库");
    }
});