you don't have to use import.meta.url at all. all that gives you is the url of the script file used. you can also maybe bypass webpack entirely, but I haven't looked at the package and its requirements exactly

basically all it wants is a url to the wasm/worker files

you can just construct those manually. and just copy the files manually from the package dir

ah nevermind ... one look and I find https://github.com/phiresky/sql.js-httpvfs/blob/master/src/sqlite.worker.ts#L5C1-L5C52

this is not supported by shadow-cljs, so webpack it is

Yes, like I mentioned in point #1, there is a wasm import. URL construction is solved. I could even hard-code it. I considered manually copying files, but I don't understand how JS packages work, so I could very well break things badly. I was hoping the webpack build would "just work". However it appears to work differently between the TS project build and my Cljs project's emitted JS. I am unable to reconcile that difference, nor have I figured out how to use whatever the Cljs webpack build is producing. In the TS webpack build, the use of import.meta.url in the TS code works like an import. It copies over the sql worker dependency and wasm worker dependency into separate files, with hashed names. I haven't inspected to see if it is a straight copy or some pre-processed bundle. My best bet seems to be to try and get the Cljs-emitted JS to result in the same kind of build output. Right now it seems to be bundling the sql worker js into a bundle file with my code. And the wasm binary seems to be copied over. Maybe today will be my lucky day. Trial and error error error continues 😅 Thanks for looking into it.

Tried and failed again. I can't figure this out. I give up... using JS and getting on with life.

as far as I can tell you can maybe just let webpack build the worker

and let shadow-cljs build the rest

Code to repro my problem (details in the README, including error trace) https://github.com/adityaathalye/cljs-webpack-build-woes

The specific permutation of #{appropriate import statements in Cljs} X #{shadow config settings} X #{webpack config settings} X #{JS interop to actually use the imports in my Cljs} has eluded me.

so I got this working, but I have no clue how to test it is actually working

(ns core
  (:require
    ["sql.js-httpvfs" :as vfs]
    ))

(def db-worker
  (vfs/createDbWorker
    (clj->js [{:from "inline"
               :config {:server-mode "full"
                        :url "/example.sqlite3"
                        :requestChunkSize 4096}}])
    "/js/worker.js"
    "/js/sql-wasm.wasm"))

;; shadow-cljs configuration
{:source-paths
 ["src"]

 :dependencies
 []

 :dev-http
 {8001 "target/public"}

 :builds
 {:app {:target :browser
        :output-dir "target/public/js"
        :modules {:main {:entries [core]}}}}}

const path = require('path');

module.exports = {
    entry: './js/index.js',
    resolve: {
        // copied over from the reference typescript example
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        path: path.resolve(__dirname, './target/public/js'),
        filename: 'worker.js',
        wasmLoading: 'fetch',
    },
    experiments: {
        asyncWebAssembly: true
    },
    devServer: {
        publicPath: './target/public',
    },
};

this is js/index.js file

import "sql.js-httpvfs/dist/sqlite.worker.js";

so, as I suggested. webpack is ONLY building the worker. shadow-cljs is building the rest

I manually copied the wasm file cp node_modules/sql.js-httpvfs/dist/sql-wasm.wasm target/public/js/

and took the example.sqlite3 file from here https://github.com/phiresky/sql.js-httpvfs/tree/master/example

oh, and changed the index.html to only include the main.js as there no longer is a bundle.js

actually, this works just fine without webpack at all

(ns core
  (:require
    [shadow.cljs.modern :refer (js-await)]
    ["sql.js-httpvfs" :as vfs]
    ))

(defn init []
  (js-await [worker (vfs/createDbWorker
                      (clj->js [{:from "inline"
                                 :config {:server-mode "full"
                                          :url "/example.sqlite3"
                                          :requestChunkSize 4096}}])
                      "/js/worker.js"
                      "/js/sql-wasm.wasm")]
    (js-await [result (-> worker .-db (.exec "select * from mytable"))]
      (js/console.log "result" result))))

(ns worker
  (:require ["sql.js-httpvfs/dist/sqlite.worker.js"]))

;; nothing to do, worker.js file does all the things when loaded
(defn init [])

;; shadow-cljs configuration
{:source-paths
 ["src"]

 :dependencies
 []

 :dev-http
 {8001 "target/public"}

 :builds
 {:app {:target :browser
        :output-dir "target/public/js"
        :modules {:shared {:entries []}
                  :main {:init-fn core/init
                         :depends-on #{:shared}}
                  :worker {:init-fn worker/init
                           :web-worker true
                           :depends-on #{:shared}}
                  }}}}

then change the html to inlucude the shared.js and main.js files, delete everything webpack related

the worker in the npm package is already sort of pre-bundled, so there isn't any wasm processing shadow-cljs would need to do

only thing you need to manually do is copy the .wasm file

in full repo form this looks like https://github.com/thheller/cljs-webpack-build-woes

A new woe arose with a more real-world data set. The TS code "just works", but the cljs code errors out.

Uncaught (in promise) TypeError: e is undefined
    SplitFileHttpDatabase 

(thheller, if you happen to take a look at this --- no expectation at all --- you can just do an --ff-only merge of my branch into your fork.)

git remote add adi [email protected]:adityaathalye/cljs-webpack-build-woes.git
git fetch adi
git merge --ff-only adi/master

it seems to be :from "jsonconfig" and not :from "jsconfig", otherwise seems to be fine

There shouldn't be a full page reload as reset only reset!s the state atom, nothing else. But in that last :on-submit, you aren't calling handle-submit, you're just using it as a value.

Whoops! Thanks for your assistance, @U2FRKM4TW. Altered version works as expected, specifically:

:on-submit (fn [e] (handle-submit e) (reset))

(Thanks also to @lucio for the library!)