Added plain html example

[dberardo-com]

Closes #1632

[carlopi]

Thanks a lot!

[WebReflection]

why is this needed at all? there is a module system, you can use it right away. You also have top-level await in there so I hope this example can be improved. If you need help, I'd be happy to help with such improvement.

[WebReflection]

A better example that doesn't need to leak globally ... it's just an ECMAScript module, check duckdb-loader.js: https://pyscript.com/@agiammarchi/jolly-silence-copy/latest

[dberardo-com]

what happens if 2 different files import the same duckdb-loader. would duckdb be initialized twice ? or would the PackageQueryApp be singleton ?

[WebReflection]

in ESM you can import the same thing dozen times its code will run only once and its exports will be available to any other importer of the same file ... if that's what you are asking. If it's not, your "trashing as global reference" is not a solution, there's not even a check if it was there before, so I am not sure I am following the question or the concern, but nothing is solved better (or at all) in the current state of affairs.

[dberardo-com]

i was not talking about the import. that one is cached.

i am talking about the db connection:
await this.db.connect();

will this need to be recreated all the time ?

[WebReflection]

it depends ... if you want a single connection create a module that returns always the same connection

[dberardo-com]

that's actually why i am using window._db in the script, to store the connection. is this equivalent to what you are suggesting? not sure how to store state in a module

[WebReflection]

import * as duckdbduckdbWasm from "whatever";
let _db;
export default (...args) => _db || (
  _db = duckdbduckdbWasm.connect(...args)
);

you have that module as ./duckdb-singleton.js and you're done?

import duckdbConnection from './duckdb-singleton.js';

const db = duckdbConnection("some", { argu: "ment" });

with a globally shared db with always same parameters you can also just:

import * as duckdbduckdbWasm from "whatever";
export default new duckdbduckdbWasm.connect(...args);

then you just import db from './duckdb-singleton.js' and you're done.

The module system gives you everything you need to have an insternal state ... nothing leaks on the global which was my initial point, and it's cached, as exports, as you know ... code won't get executed more than once neither, unless everyone is re-bundling the thing ... we use sticky-module for that reason, if multiple projects re-bundle stuff, first come first serve, that's the contract.

[WebReflection]

I did update my previous answer expanding on various things, sorry for the extra ping.