Development setup

[jarrah42]

Hi, can you describe how to set up h5web for local development? I'm trying to write my own provider, then test the local version using a local install of my galaxy visualization plugin, but I cannot get my plugin to build. The visualization plugin uses yarn, and builds fine when I use the npm @h5web packages.

I am able to build the h5web packages from source using pnpm packages and I get app/lib/shared directories under packages. To use the local version of h5web I use the commands:

yarn add file:/path/to/packages/app
yarn add file:/path/to/packages/lib
yarn add file:/path/to/packages/shared

Then I run yarn install; yarn build but it gives me the error:

yarn run v1.22.19
$ parcel build src/script.js -d static --no-source-maps --detailed-report
🚨  /Users/gw6/galaxy/config/plugins/visualizations/h5web/node_modules/@h5web/app/src/App.tsx:31:12: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (31:12)

I don't understand why it is trying to build using the typescript file and not using the javascript version. The only thing I've noticed is that the package.json in app uses "main":"src/index.ts" while the npm version uses "main":"dist/index.js" but I don't know why this would be or how to change this. I have been trying to figure this out for weeks to no avail. Any help would be appreciated.

[loichuder]

Hello,

Thanks for your interest and sorry to hear this stumped you for a while. @axelboc is the main person to ask for the setup but I'll try to help you with the best of my ability.

The only thing I've noticed is that the package.json in app uses "main":"src/index.ts" while the npm version uses "main":"dist/index.js" but I don't know why this would be or how to change this

This is done by pnpm publishConfig field in the package.json. The fields in publishConfig replace the actual fields in the package.json when publishing the package, hence the change you noticed.

A quick-and-dirty fix may be to manually replicate this behaviour by editing the package.json of the h5web packages of your local h5web setup (that is replacing the fields in package.json by their values of publishConfig).

If that doesn't work, we will be sure to get back to you after the holiday season. 🎅

[axelboc]

This is done by pnpm publishConfig field in the package.json. The fields in publishConfig replace the actual fields in the package.json when publishing the package, hence the change you noticed.

A quick-and-dirty fix may be to manually replicate this behaviour by editing the package.json of the h5web packages of your local h5web setup (that is replacing the fields in package.json by their values of publishConfig).

@loichuder is spot on. If you'd like to automate this instead of having to edit the package.json files manually, you could try using pnpm's pack command:

1. pnpm packages
2. cd packages/lib
3. pnpm pack --pack-destination <dir>
4. This creates a tarball with the exact same content as the package published to NPM, so you can then extract it where you need, install it in your project with yarn add, do the same with the other packages, and run your build.

[axelboc]

Right, we do remove "type": "module" before publishing: https://github.com/silx-kit/h5web/blob/main/.github/workflows/release.yml#L66-L72 -- I didn't make the connection sorry. Perhaps this can be moved to a "prepublish" script on each package.

[axelboc]

I do wonder why pnpm pack didn't work, though. Did you run it from the correct directory - i.e. the root directory of each package like packages/lib? Also, there's an extra package folder in the tarball, but the content of that folder should be exactly the same as the content of the package on NPM. It could also be the version of pnpm -- are you on the latest?

[axelboc]

With the latest commits on main, you should now be able to remove step 4 from your script. This step will now be performed automatically when running pnpm publish (and pnpm pack). Let us know how it goes.

[jarrah42]

Yes now I can build/publish with the same package.json which makes it a lot easier. Thanks!

[axelboc]

FYI, I've added a Local testing section to the CONTRIBUTING guide.: https://github.com/silx-kit/h5web/blob/main/CONTRIBUTING.md#local-testing. It mentions using pnpm pack (but not publishing to a local registry).