Build and Dependencies
Widget packs differ from typical web projects: you don't build them yourself, and you can't choose your dependencies freely. This page explains why, and what that means for your code.
How Widget Packs Are Built
MoBro compiles widget packs itself, using webpack. This happens when a user installs a widget pack from the
marketplace, and on every change while running dashboard-cli dev. There are several reasons for this:
- Widget packs are published as source code, so a published widget pack works with every future MoBro version.
- Libraries like React are provided by the dashboard, so they're always compatible with the installed MoBro version, and shared by all widget packs instead of being loaded once per widget pack.
- Widget packs can't bring their own npm packages, which protects users from malicious or vulnerable dependencies.
The dashboard works like the shell of a micro-frontend setup, where every widget pack is a micro-frontend. The dashboard loads the compiled widget packs at runtime and provides the shared packages to them via module federation:
What MoBro Compiles
| Files | Handling |
|---|---|
.ts, .tsx, .js, .jsx | Transpiled to JavaScript. Types are not checked. |
.css | Can be imported, and is injected into the page. |
.png, .jpg, .jpeg, .gif, .svg | Can be imported, and are inlined as data URLs. |
MoBro uses its own TypeScript configuration for the build, so the tsconfig.json of the project only affects your IDE
and the typecheck script. Run npm run typecheck to check the types of your widget pack.
Available Packages
Only the following packages can be imported by widget packs. The versions are the ones provided by the current MoBro version.
| Package | Version |
|---|---|
react | 18.3.1 |
react-dom | 18.3.1 |
@modbros/dashboard-sdk | 1.4.2 |
@modbros/dashboard-core | 1.3.0 |
styled-components | 6.x |
lodash-es | 4.x |
@tanstack/react-query | 4.x |
recoil | 0.7.7 |
react-spring | 9.7.5 |
d3 | 7.9.0 |
@visx/visx | 3.12.0 |
Additionally, all individual modules of these libraries are available:
- d3:
d3-array,d3-axis,d3-brush,d3-chord,d3-color,d3-contour,d3-delaunay,d3-dispatch,d3-drag,d3-dsv,d3-ease,d3-fetch,d3-force,d3-format,d3-geo,d3-hierarchy,d3-interpolate,d3-path,d3-polygon,d3-quadtree,d3-random,d3-scale,d3-scale-chromatic,d3-selection,d3-shape,d3-time,d3-time-format,d3-timer,d3-transition,d3-zoom - visx:
@visx/annotation,@visx/axis,@visx/bounds,@visx/brush,@visx/clip-path,@visx/curve,@visx/delaunay,@visx/drag,@visx/event,@visx/geo,@visx/glyph,@visx/gradient,@visx/grid,@visx/group,@visx/heatmap,@visx/hierarchy,@visx/legend,@visx/marker,@visx/mock-data,@visx/network,@visx/pattern,@visx/point,@visx/responsive,@visx/scale,@visx/shape,@visx/text,@visx/threshold,@visx/tooltip,@visx/voronoi,@visx/wordcloud,@visx/xychart,@visx/zoom
The dependencies in the package.json of the widget pack skeleton
list the same packages, so they are available in your IDE with types.
- The package is
lodash-es, notlodash:import {debounce} from 'lodash-es'. - React is provided in version 18.3.1, so React 19 APIs are not available.
- Installing any other npm package in your project has no effect. Imports of other packages fail when MoBro builds the widget pack.
If your widget needs functionality from another library, implement it yourself or copy the required code into your widget pack, respecting the library's license.