Separate browser build

[shunkica]

When trying to use the library in a Angular project this build error is thrown

✘ [ERROR] Could not resolve "module"

node_modules/libxml2-wasm/lib/libxml2raw.mjs:43:23:
  43 │       } = await import('module');
     ╵                        ~~~~~~~~

Even though it's guarded by if (ENVIRONMENT_IS_NODE), the esbuild bundler (used by Angular) statically analyzes all imports and fails when it sees the node module import.

To fix this I created a custom browser build by making a separate libxml2raw.browser.mjs file with ENVIRONMENT=web:

"bind:browser": "cd out && emcc -L.libs -lxml2 -o libxml2raw.browser.mjs --no-entry -s EXPORT_ES6=1 -s ALLOW_MEMORY_GROWTH=1 -s ALLOW_TABLE_GROWTH=1 -s EXPORTED_RUNTIME_METHODS=@../binding/exported-runtime-functions.txt -s EXPORTED_FUNCTIONS=@../binding/exported-functions.txt -O2 -flto --closure 1 -s MODULARIZE=1 -s SINGLE_FILE=1 -s ENVIRONMENT=web",

Then update package.json with the file mapping for browsers:

"browser": {
    "./lib/libxml2raw.mjs": "./lib/libxml2raw.browser.mjs"
},
"exports": {
    ".": "./lib/index.mjs",
    "./lib/libxml2raw.mjs": {
        "browser": "./lib/libxml2raw.browser.mjs",
        "node": "./lib/libxml2raw.mjs",
        "default": "./lib/libxml2raw.mjs"
    }
}

Would it be possible to add this to the library?

[jameslan]

For Angular, you can add the module into externalDependencies in angular.json. After that, the bundler won't try to analyze module module.

But you may still face another error: Top-level await is not available, which is also discussed in #121.

[shunkica]

In my opinion, shifting the burden of configuration to the user is a significant barrier to adoption. Forcing users to config to use the package suggests the package is not "web ready." Typical user will include the package, get an error, and assume the package is broken.

I am currently using a postinstall patch file which removes the node-specific blocks of code from the library entirely.

The top-level await was not an issue for me when I was building the package, possibly because i am using zoneless Angular.