React component stops working after bundling removed

[beepsoft]

Commit 682069df removed bundling and the distribution of the dist directory. Without this I cannot figure out how to have the crrate builder CSS included in the react component. Previously I just used:

import "@describo/crate-builder-component/dist/vue/style.css";

Can we distribute the bundled lib in the npm package again? Or is there a problem with that?

[marcolarosa]

I'll add it back. I didn't think it was being used after we removed the web component things.

[marcolarosa]

Back in - c245d1f23ef986a35ed5e7f89920590f82f47c9f. 0.52.0 released with this.

[beepsoft]

There's now a styles.css file, that I can include as I did previously:

import "@describo/crate-builder-component/dist/vue/style.css";

However, this is much smaller than the previously working version on 0.49.4:

0.49.4: 14577 lines beautified, 343 kb

0.52.0: 558 lines beautified, 15kb

So, something is missing from the css now.

[marcolarosa]

I had to change the setup so the component no longer imports element-plus and fontawesome. See the notes @ https://github.com/describo/crate-builder-component#fontawesome-free-icons-and-element-plus-dependencies and the next section wire it up.

Does it work in react if you import fontaweseome and element plus css yourself?

import "element-plus/dist/index.css";
import "@fortawesome/fontawesome-free/js/all";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoReplaceSvg = "nest";

[beepsoft]

Thanks, @marcolarosa!

This is what I have now:

import "@describo/crate-builder-component/dist/vue/style.css";
import "element-plus/dist/index.css";
import "@fortawesome/fontawesome-free/js/all";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoReplaceSvg = "nest";

Adding these indeed helped, but there are still layout issues. It seems that some describo specific css is still missing here:

[marcolarosa]

Great - element-plus css and fontawesome are in and that looks like tailwind is not setup. https://github.com/describo/crate-builder-component#tailwind-css-dependency

[beepsoft]

Oh, yes, that was the missing part. Thanks!

[marcolarosa]

@beepsoft - do you still need the build in dist? Can it be removed?

The nice thing about moving all of this out of the vue component and into the react layer is that hopefully, the bundle sizes should be much smaller. Can you please check this and let me know.

[beepsoft]

Unfortunately it doesn't work for me without the dist. It would only work if I added all the dependencies from crate-builder-component by hand to the react component's package.json, but it is cumbersome.

Overall I don't think it really affects the final application - or the react component's - bundle size. With the dist the crate builder bundles all its dependencies, otherwise I would add the same dependences to the react component and bundle it there ending up with the same bundle size. But in the later case I would need to manually update sync and update dependencies.

So, for now I think keeping the dist would be the easiest and most convenient way to release the vue component.

[marcolarosa]

ok - happy to keep building and bundling it in!