deck.gl
deck.gl copied to clipboard
visgl
fix(widgets) export package and bundle css in main
Follow up #8862
Background
Using dist has the advantage of being cleaned by ocular-clean, at the cost of slightly longer URL for scripting users.
https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css
https://unpkg.com/deck.gl@^9.0.0/dist/widgets/stylesheet.css
The JS import does not use dist in the path:
// using @deck.gl/widgets module
import '@deck.gl/widgets/stylesheet.css';
// using deck.gl module
import 'deck.gl/widgets/stylesheet.css';
Change List
- include widgets in main JS bundle (
import {FullscreenWidget} from 'deck.gl';) - include widgets css in main dist
- fix doc links
coverage: 89.253%. remained the same when pulling f57f5f426435d3fec871dc86f5694d4d01a59d8f on chr/add-widgets-to-bundle into 87e62ecc218fa3ecedfc92edfba2a7b2daa79b90 on master.
No problem with including widget exports in main, but I'm not sure about the CSS import path. Is it worth the confusion to save a @ sign?
When using NPM, if deck.gl is the dependency being used in an application, importing anything from @deck.gl/widgets would be confusing, or vis versa.
In the script environment I don't have a strong opinion since they're each a url to the same sheet, however, to implement the NPM version you also get the URLs from each module. We could recommend one and leave the other undocumented?
Alternatively, in the spirit of the "master" module, we could distribute a combined stylesheet deck.gl/stylesheet.css (currently only contains content from the widgets module).
I like that idea. I'll change it to a top level stylesheet then. We could probably add CSS variables to customize internally defined CSS properties, which would solve some of what #8160 is going after. Variables are only for existing properties though... CSS as JS objects can give you fuller control.
I've pushed up a "combined" stylesheet to the "main" module. The import in JS is import 'deck.gl/stylesheet.css' and the import in HTML is <link src="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />