Should it be possible to selectively import blacklight-frontend modules in Blacklight 8, without importmaps?

[jrochkind]

I use vite, but I think the situation is going to be similar using esbuild, webpacker, or anything similar, without importmaps. (whether or not using jsbundling-rails should not make a difference, I think).

I don't entirely understand what's going on or what's intended, so I will explain what I know, for context and for anyone else trying to figure it out!

Loading ALL blacklight-frontend JS -- Blacklight 7 vs Blacklight 8. And orientation to BL JS file trees.

This BL wiki page suggests you can load blacklight-frontend JS using webpacker (also works for esbuild, vite, etc), with:

import 'blacklight-frontend/app/assets/javascripts/blacklight/blacklight'

That does still work in Blacklight 8, to load all blacklight-frontend JS. In BL7, you can see that file in the git repo. It appears to be all the Blacklight JS modules, whose src is actually found at app/javascript/Blacklight (note ./app/javasript vs ./app/assets) bundled together?

In BL 8.0.1, there is no such file in the repo at ./app/assets/javascripts/blacklight/blacklight, but that import does still work .... it turns out that file is in the npm blacklight-frontend distro? Which you can verify navigating through the src tree at npmjs.com. I guess it's built at build time somehow, even though it's not in the repo?

I assume it is still a bundle of all the Blacklight modules whose src is app/javascript/blacklight, still there in BL 8.0.1.

You can also just:

import 'blacklight-frontend`;

This also works in BL 7 as well as Blacklight 8.0.1. I believe it ends up loading the same file as above, because of the main key in package.json in BL7, and in BL 8.0.1 maybe either the main or module key in package.json in 8.0.1. In 8.0.1 maybe it's loading a blacklight.esm.js file instead of a blacklight.js file -- in either case, not actually in source repo, but apparently built at release time? I am curious to know exactly what these files are.

Loading selective Blacklight modules.

Sometimes you want to load just selective Blacklight ES6 modules, instead of all of them.

In BL7, I'm not totally sure if it was documented or intended, but several people had figured out a way to do this:

• psu-libraries/psulib_blacklight
• unt-libraries/discover
• sciencehistory/scihist_digicoll

I documented this on the wiki page after discovering the two previous libraries doing it, and that it worked, but wasn't totally sure if it was intended/documented. But the pattern is basically manually importing individual files from app/javascript/blaklight, eg:

import 'blacklight-frontend/app/javascript/blacklight/core';

This no longer works in BL 8. Why? Specifically, if you try to import blacklight-frontend/app/javascript/blacklight/modal', you run into this line:

https://github.com/projectblacklight/blacklight/blob/v8.0.1/app/javascript/blacklight/modal.js#L55

Which tries to import ModalForm from 'blacklight/modalForm'... but blacklight/modalForm isn't actually available in the blacklight-frontend NPM package, it woudl have to be blacklight-frontend/app/javascript/blacklight/modalForm instead.

So it results in an error like ERROR: Could not resolve "blacklight/modalForm" on build.

My guess is that maybe that import works only when using importMaps somehow?

Questions

• should it be possible to selectively import blacklight-frontend modules in BL8, is that meant to be supported, or do we want it to be? Several installations are doing it in BL7, but maybe it's not necessary (anymore?). (Cc @nicktiberi @awead @jason-ellis)

• Why is ./app/javascript/blacklight being included in blacklight-frontend at all, if they don't work to import? Or do they work only with importmaps, are they there for that? I assume there is meant to be some way to selectively import the modules, instead of just the single aggregated packaged file? Or are they just being kept as separate files in src for developer convenience, and not to actually be available as separate imports to depending apps?

  • If they currently work for importmaps, is there some way to change things so they can work for importmaps and standard webpacker/vite/esbuild/etc? If I change that line import ModalForm from 'blacklight/modalForm' to import ModalForm from 'blacklight-frontend/app/javascript/blacklight/modalForm' -- I think it'll fix it for webpacker/vite/esbuild/etc, but I'm not sure if it will break it for some other use case that is what it's doing there like it is now!

• Should any docs be updated?

  • I don't really understand where the files that aren't in the GH repo but are in the blacklight-frontend npm distro are coming from, or what they are expected/intended to be. (that is, app/assets/javascripts/blacklight/blacklight.js and app/assets/javascripts/blacklight/blacklight.esm.js). Would it make sense to document that somewhere? Or is it documented somewhere I'm missing?
  • Should the wiki page Using Webpacker to compile javascript assets be updated to.... mention import 'blacklight-frontend'? Remove things that no longer work or are no longer optimal?

• Are sprocket still supported in BL8? What do you require in sprockets for that, and is it possible to selectively import just some BL JS modules, or no?

[jrochkind]

Discussed at Jan 17 2023 Blacklight Community Call. Nobody on the call had an obvious solution to propose off the top of their head.

@jcoyne pointed out that the command that is preparing the pre-built blacklight-frontend looks like it's here:

blacklight/package.json

Line 8 in 9305415

"prepare": "rollup --config rollup.config.js --sourcemap && ESM=true rollup --config rollup.config.js --sourcemap"

That might be helpful for a developer trying to figuring out what changes we can make without breaking the existing pipeline?

I wonder if changing the imports to be relative file paths instead of absolute might work for both rollup and for individual import's in the built -frontend package.