It’s based on the XBlock cookiecutter (which, sadly, turned out to be broken). It works, integrates with Tutor, uses React 18 for both student_view and studio_view , is compatible with the new Studio unit MFE page, is fully type-safe (TypeScript), and uses react-intl for i18n. It does not support Paragon (as its SCSS is not available and I found that Paragon has a few bugs that make it unsuitable).
@braden This is cool. I am super happy to see it uses rollup and not webpack. I was hoping it would be esbuild, but I get that rollup is better for bundling that esbuild. Now, I wish someone would resurrect that old frontend migration thread about webpack to something faster and modern. I digress.
I am curious to learn if you focused only on using React for this, or did you experiment with the idea of using “any library as dependency”, that you mentioned in the conference this year?
This is quite interesting! I had a lot of issues with the cookiecutter as well, I think it’s a bit broken and probably can be modernised a lot.
I worked on something very similar recently for WGU. I decided to create the accordion XBlock using Vite, React and Paragon for both the studio and student UIs.
It’s still an unmerged PR due to the status of the WGU XBlocks project, but it should be fully working except for a bit of polish.
Wow, nice work @kshitij! I wish I’d known about that before I started making my version
One thing I did with mine is I tried to make it easy to transform back into a cookiecutter format, and I’m still thinking of doing that. It would be nice to do the same with some of the nice features you’ve added. (e.g. yours supports Paragon and has an external dev environment, and those are both a big plus)
I think the paragon support can be simplified a LOT in the future once the theme is loaded at runtime because, then, we can use a cached version of the paragon theme from a CDN and have the XBlock adapt to the theme easily. Currently, I wanted to keep the file size as low as possible so I only import the bare minimum of Paragon that I needed
@braden@kshitij I also like the use of vite as build system, maybe it’s high time we evaluate the javascript build system that we are using, what do you folks thing about it?
Also maybe we can use some CC hours to improve the accordion xblock as well.
and I forgot about it but it’s worth a lightning talk at least
Which “we” do you mean? If it’s OpenCraft, many of us are already using Vite by default and I encourage everyone to. (Listaflow uses Vite, Kshitij’s plugin uses Vite, etc.) I only used rollup in my sample XBlock to keep it a bit simpler, knowing that Vite just wraps rollup anyways.
…But it sounded like there were concerns about its comprehensiveness. I don’t know how hard it would be to close that gap, but I wonder if we could contribute something or if it would be too big/unwieldy a thing to improve while uninitiated. It would be great if we could move everything to Vite-- the DX is so much better.
