1
0
mirror of https://github.com/sqlite/sqlite.git synced 2025-07-30 19:03:16 +03:00

Get tester1.js working via an ES6 worker module and add that variant to the dist zipfile.

FossilOrigin-Name: 90480586f1b2ad82118e19536b095431b8457f294c0afaa9b4f883f184cc804c
This commit is contained in:
stephan
2022-11-19 16:16:40 +00:00
parent 1e62057436
commit 8d0d409876
9 changed files with 99 additions and 41 deletions

View File

@ -227,12 +227,13 @@ bin.c-pp := ./c-pp
$(bin.c-pp): c-pp.c $(sqlite3.c) $(MAKEFILE)
$(CC) -O0 -o $@ c-pp.c $(sqlite3.c) '-DCMPP_DEFAULT_DELIM="//#"' -I$(dir.top)
define C-PP.JS
# $1 c-pp -D... flags
# $2 = c-pp -f X.js
# $3 = c-pp -o X.js
$(3): $(2) $$(MAKEFILE) $$(bin.c-pp)
$$(bin.c-pp) -f $(2) -o $$@ $(1)
CLEAN_FILES += $(3)
# Create $2 from $1 using $(bin.c-pp)
# $1 = Input file: c-pp -f X.js
# $2 = Output file: c-pp -o X.js
# $3 = optional c-pp -D... flags
$(2): $(1) $$(MAKEFILE) $$(bin.c-pp)
$$(bin.c-pp) -f $(1) -o $$@ $(3)
CLEAN_FILES += $(2)
endef
c-pp.D.vanilla ?=
c-pp.D.esm ?= -Dsqlite3-es6-module-build
@ -300,8 +301,8 @@ $(sqlite3-api-build-version.js): $(bin.version-info) $(MAKEFILE)
pre-js.js.in := $(dir.api)/pre-js.js
pre-js.js.esm := $(dir.tmp)/pre-js.esm.js
pre-js.js.vanilla := $(dir.tmp)/pre-js.vanilla.js
$(eval $(call C-PP.JS,$(c-pp.D.vanilla),$(pre-js.js.in),$(pre-js.js.vanilla)))
$(eval $(call C-PP.JS,$(c-pp.D.esm),$(pre-js.js.in),$(pre-js.js.esm)))
$(eval $(call C-PP.JS,$(pre-js.js.in),$(pre-js.js.vanilla),$(c-pp.D.vanilla)))
$(eval $(call C-PP.JS,$(pre-js.js.in),$(pre-js.js.esm),$(c-pp.D.esm)))
post-js.js.in := $(dir.tmp)/post-js.js
post-js.js.vanilla := $(dir.tmp)/post-js.vanilla.js
post-js.js.esm := $(dir.tmp)/post-js.esm.js
@ -316,14 +317,14 @@ $(post-js.js.in): $(post-jses.js) $(MAKEFILE)
cat $$i; \
echo "/* END FILE: $$i */"; \
done > $@
$(eval $(call C-PP.JS,$(c-pp.D.vanilla),$(post-js.js.in),$(post-js.js.vanilla)))
$(eval $(call C-PP.JS,$(c-pp.D.esm),$(post-js.js.in),$(post-js.js.esm)))
$(eval $(call C-PP.JS,$(post-js.js.in),$(post-js.js.vanilla),$(c-pp.D.vanilla)))
$(eval $(call C-PP.JS,$(post-js.js.in),$(post-js.js.esm),$(c-pp.D.esm)))
extern-post-js.js.in := $(dir.api)/extern-post-js.js
extern-post-js.js.vanilla := $(dir.tmp)/extern-post-js.vanilla.js
extern-post-js.js.esm := $(dir.tmp)/extern-post-js.esm.js
$(eval $(call C-PP.JS,$(c-pp.D.vanilla),$(extern-post-js.js.in),$(extern-post-js.js.vanilla)))
$(eval $(call C-PP.JS,$(c-pp.D.esm),$(extern-post-js.js.in),$(extern-post-js.js.esm)))
$(eval $(call C-PP.JS,$(extern-post-js.js.in),$(extern-post-js.js.vanilla),$(c-pp.D.vanilla)))
$(eval $(call C-PP.JS,$(extern-post-js.js.in),$(extern-post-js.js.esm),$(c-pp.D.esm)))
extern-pre-js.js := $(dir.api)/extern-pre-js.js
# Emscripten flags for --[extern-][pre|post]-js=...
@ -642,6 +643,17 @@ CLEAN_FILES += $(speedtest1.js) $(speedtest1.wasm)
# end speedtest1.js
########################################################################
########################################################################
# tester1 code:
# tester1.js: for main thread and worker thread
# tester1-esm.js: to be loaded from an ES6 Worker Module thread
$(eval $(call C-PP.JS,tester1.c-pp.js,tester1.js))
$(eval $(call C-PP.JS,tester1.c-pp.js,tester1-esm.js,-Dtester1-esm-worker))
tester1.js: $(sqlite3.js)
tester1-esm.js: $(sqlite3.mjs)
tester1: tester1.js tester1-esm.js
all: tester1
########################################################################
# Convenience rules to rebuild with various -Ox levels. Much
# experimentation shows -O2 to be the clear winner in terms of speed.

View File

@ -42,7 +42,8 @@ dist-dir.jswasm := $(dist-dir.top)/$(notdir $(dir.dout))
dist-dir.common := $(dist-dir.top)/common
dist.top.extras := \
demo-123.html demo-123-worker.html demo-123.js \
tester1.html tester1-worker.html tester1-esm.html tester1.js \
tester1.html tester1-worker.html tester1-esm.html \
tester1.js tester1-esm.js \
demo-jsstorage.html demo-jsstorage.js \
demo-worker1.html demo-worker1.js \
demo-worker1-promiser.html demo-worker1-promiser.js

View File

@ -56,9 +56,15 @@
utility code.</li>
<li><a href='tester1-worker.html'>tester1-worker</a>: same thing
but running in a Worker.</li>
<li><a href='tester1-esm.html'>tester1-esm</a>: same thing
but loaded in the main thread via an ES6 module. Note that
not all browsers permit loading modules in Worker threads.
<li><a href='tester1-esm.html'>tester1-esm</a>: same as
<code>tester1</code> but loads sqlite3 in the main thread via
an ES6 module.
</li>
<li><a href='tester1-worker.html?esm'>tester1-worker?esm</a>:
same as <code>tester1-esm</code> but loads a Worker Module which
then loads the sqlite3 API via an ES6 module. Note that
not all browsers permit loading modules in Worker
threads.
</li>
</ul>
</li>

View File

@ -47,9 +47,16 @@
utility code.</li>
<li><a href='tester1-worker.html'>tester1-worker</a>: same thing
but running in a Worker.</li>
<li><a href='tester1-esm.html'>tester1-esm</a>: same thing
but loaded in the main thread via an ES6 module. Note that
not all browsers permit loading modules in Worker threads.
<li><a href='tester1-esm.html'>tester1-esm</a>: same as
<code>tester1</code> but loads sqlite3 in the main thread via
an ES6 module.
</li>
<li><a href='tester1-worker.html?esm'>tester1-worker?esm</a>:
same as <code>tester1-esm</code> but loads a Worker Module which
then loads the sqlite3 API via an ES6 module. Note that
not all browsers permit loading modules in Worker
threads.
</li>
</ul>
</li>
<li>High-level apps and demos...

View File

@ -6,7 +6,7 @@
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<link rel="stylesheet" href="common/emscripten.css"/>
<link rel="stylesheet" href="common/testing.css"/>
<title>sqlite3 tester ESM #1 (UI thread)</title>
<title>sqlite3 tester #1: ES6 Module in UI thread</title>
<style>
body {
font-family: monospace;
@ -14,7 +14,7 @@
</style>
</head>
<body>
<h1 id='color-target'>sqlite3 WASM/JS tester ESM #1 (UI thread)</h1>
<h1 id='color-target'>sqlite3 tester #1: ES6 Module in UI thread</h1>
<div class='input-wrapper'>
<input type='checkbox' id='cb-log-reverse'>
<label for='cb-log-reverse'>Reverse log order?</label>

View File

@ -6,7 +6,7 @@
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<link rel="stylesheet" href="../common/emscripten.css"/>
<link rel="stylesheet" href="../common/testing.css"/>
<title>sqlite3 tester #1 (Worker thread)</title>
<title>sqlite3 tester #1: Worker thread</title>
<style>
body {
font-family: monospace;
@ -14,7 +14,7 @@
</style>
</head>
<body>
<h1 id='color-target'>sqlite3 WASM/JS tester #1 (Worker thread)</h1>
<h1 id='color-target'>sqlite3 tester #1: Worker thread</h1>
<div>See <a href='tester1.html' target='tester1.html'>tester1.html</a>
for the UI-thread variant.</div>
<div class='input-wrapper'>
@ -40,7 +40,20 @@
};
cbReverse.addEventListener('change',cbReverseIt,true);
cbReverseIt();
const w = new Worker("tester1.js?sqlite3.dir=jswasm");
const urlParams = new URL(self.location.href).searchParams;
const workerArgs = [];
if(urlParams.has('esm')){
logHtml('warning',"Attempting to run an ES6 Worker Module, "+
"which is not supported by all browsers! "+
"e.g. Firefox (as of 2022-11) cannot do this.");
workerArgs.push("tester1-esm.js",{type:"module"});
document.querySelectorAll('title,#color-target').forEach((e)=>{
e.innerText = "sqlite3 tester #1: ES6 Worker Module";
});
}else{
workerArgs.push("tester1.js?sqlite3.dir=jswasm");
}
const w = new Worker(...workerArgs);
w.onmessage = function({data}){
switch(data.type){
case 'log':

View File

@ -29,8 +29,25 @@
a db in an early test and close it in a later test. Each test gets
passed the sqlite3 namespace object as its only argument.
*/
/*
This file is intended to be processed by c-pp to inject (or not)
code specific to ES6 modules which is illegal in non-module code.
Non-ES6 module build and ES6 module for the main-thread:
./c-pp -f tester1.c-pp.js -o tester1.js
ES6 worker module build:
./c-pp -f tester1.c-pp.js -o tester1-esm.js -Dtester1-esm-worker
*/
//#if tester1-esm-worker
import {default as sqlite3InitModule} from './jswasm/sqlite3.mjs';
self.sqlite3InitModule = sqlite3InitModule;
//#else
'use strict';
(function(){
//#endif
(function(self){
/**
Set up our output channel differently depending
on whether we are running in a worker thread or
@ -1817,7 +1834,8 @@
////////////////////////////////////////////////////////////////////////
log("Loading and initializing sqlite3 WASM module...");
if(!isUIThread()){
if(!self.sqlite3InitModule && !isUIThread()){
/* Vanilla worker, as opposed to an ES6 module worker */
/*
If sqlite3.js is in a directory other than this script, in order
to get sqlite3.js to resolve sqlite3.wasm properly, we have to
@ -1861,4 +1879,5 @@
}
TestUtil.runTests(sqlite3);
});
})();
})(self);