[bootstrap-4] No UMD dist for bootstrap-4 theme

stringfellow commented 4 years ago

Prerequisites

[x] I have read the documentation;
[x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
[x] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue: https://jsfiddle.net/v7ka24od/1/

Description

Bootstrap4 theme doesn't allow UMD/AMD use, while core does. As far as I understand, this makes the dist versions built with npm run build impossible to use via RequireJS (bootstrap-4.cjs.production.min.js, bootstrap-4.esm.js).

Steps to Reproduce

run npm install, npm run build as per docs
Include dist files into project
use requirejs.config to include rjsf/rjsf-bs4
see e.g. 'exports' is undefined

Expected behavior

run npm install, npm run build
find umd dist in bootstrap-4 module

Actual behavior

There are no umd files in bootstrap-4 dist -- see https://jsfiddle.net/v7ka24od/1/

Version

v2.4.0

stringfellow commented 4 years ago

Updated to add JSFiddle demonstrating the problem: https://jsfiddle.net/v7ka24od/1/

killua-eu commented 4 years ago

Would someone look into this please?

epicfaace commented 4 years ago

We would need to modify the tsdx build command to instead also build a umd version: see https://github.com/formium/tsdx#tsdx-build. I'd be happy to review a PR that adds this in for bootstrap-4 and the other packages that have similar issues (material-ui, fluent-ui).

stringfellow commented 4 years ago

Thanks for the hint @epicfaace - I'm afraid I'm so far removed from typescript/webpack/etc workflows and working environment that this is almost a new technology to me right now (versus using r.js and AMD) - is it an onerous task or a simple config change? (i.e. is it something that someone who knows how that workflow works, could do with small effort; or is it a more fundamental change to the way this library is built?)

I wish I were more up to date with this and could help fix it :(

EricLanduyt commented 3 years ago

would indeed be nice to have this, as I suppose it would also allow using all the themes from various CDNs, which seems impossible so far. :(

ex: https://www.jsdelivr.com/package/npm/@rjsf/material-ui?path=dist

stringfellow commented 2 years ago

In the playground (and presumably the default build) the default theme is still bootstrap3; if providing a UMD version of the BS4 & other themes is hard to do, could there be an easier way to make a build out of the core package with a theme that is not bootstrap3 as the default?

I've been trying to understand what it is that causes a build out of the core as UMD, but leaves the other packages as only CJS and ES; unfortunately my knowledge of modern JS builds is not good. @epicfaace mentioned tsdx above - is that still relevant in the latest version? What would it take to cause a build out of the UMD module in the dist directory so that it is available on CDNs, for example, is it as simple as some change to e.g. https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/core/webpack.config.dist.js ?

epicfaace commented 2 years ago

@epicfaace mentioned tsdx above - is that still relevant in the latest version? What would it take to cause a build out of the UMD module in the dist directory so that it is available on CDNs

Yes. I think it would require some effort to see how to emit a UMD build. Part of the time required to do this is scoping it out (seeing whether it's possible using tsdx, or we have to switch to webpack, etc.). Currently, the core theme uses webpack but other themes such as bootstrap-4 use tsdx.

stringfellow commented 2 years ago

Thanks @epicfaace -- the options under tsdx build in their README suggest that it is simply that the default is cjs,es, and providing tsdx build --format cjs,esm,umd would produce the build out. I assume this would be changed here in package.json.

I will submit a PR for this, but I am not able to test the output (I tried npm install as per the contributors guide, with the latest node image for docker, but it errors out).

Please let me know if I can do anything to advance this.

stringfellow commented 2 years ago

@epicfaace From the documentation, I believe this will solve it but as per comment above, I cannot test unfortunately :( https://github.com/rjsf-team/react-jsonschema-form/pull/2810

stringfellow commented 2 years ago

Hi @nickgros @epicfaace -- thanks for getting that build change out :) I was expecting that it would produce e.g.

bootstrap-4.js, here: https://unpkg.com/browse/@rjsf/bootstrap-4@4.2.0/dist/

as react-jsonschema-form.js is here: https://unpkg.com/browse/@rjsf/core@4.2.0/dist/

Alas, there is still only the CJS and ESM build out. Perhaps that option wasn't the one after all?

nickgros commented 2 years ago

I believe this was added in v4.2.1. @stringfellow can you confirm? Thanks!

stringfellow commented 2 years ago

@nickgros ahh well we now seem to have the opposite problem, there is no UMD module for core: https://unpkg.com/browse/@rjsf/core@4.2.1/dist/ ... so I think it is effectively still unusable! 😭

nickgros commented 2 years ago

@stringfellow We released 4.2.2 to fix the missing UMD bundle. Can you see if that works for you? Greatly appreciate your patience!

stringfellow commented 2 years ago

@nickgros I can confirm that the UMD is present for core now; sadly I can't make the UMD for BS4 theme work as it has dependencies on react-bootstrap (which does have a build out for UMD but doesn't seem to work for me - has some issue around jsx_dev_runtime.jsxDEV) and react-icons which just doesn't have a build out for UMD. At this point I'm a bit lost/out of my depth to be honest.

rjsf-team / react-jsonschema-form