How to use ZenFS on CodePen?

[jcubic]

I've tried to use importmap:

https://codepen.io/jcubic/pen/dPbVavM?editors=1011

But got a random error about some variable being undefined.

Also the NPM package don't include UMD files, so you can't use it as script tag.

I've got a bug report and I can't even create a demo app to test it:

isomorphic-git/isomorphic-git#2001

[james-pre]

Hi @jcubic, I recently created @zenfs/bundle, which should help as you can use bundles in development. Does this work for you?

[jcubic]

The problem is that every file define and overwrite ZenFS global variable.

Maybe something like this will work:

var ZenFS = globalThis.ZenFS || {};
var module = (() => {
  ...
})();
Object.assign(ZenFS, module);

[jcubic]

I think that I will need to create my own bundle since ZenFS is not designed to be used directly in browser.

[james-pre]

I just released today's bundle, which includes a change so bundles for different packages use different names.

The "all" bundle uses the ZenFS global name. You can then access packages as properties. For example, ZenFS.core is the same as import * as core from '@zenfs/core'. The various packages use an underscored form, like ZenFS_core.

These bundles do not have any external dependencies. This means, that importing multiple (e.g. the @zenfs/dom and @zenfs/archives bundles) will have 2 different instances of @zenfs/core, bundled with each. This will create issues if you try to use them together. I strongly recommend you stick with the "all" bundle.

Please let me know if everything works out correctly for you!

[jcubic]

Thanks, I already create my own bundle using esbuild. And it seems that WebAccess return Out of sync! used with isomorphic-git, see:

• Error Out of Sync and Bundler dependency isomorphic-git/isomorphic-git#2001

[coder0107git]

I'm not exactly sure what problem with import maps you were having but I've used it just fine with esm.sh import maps.