2023-02-16 Frontend Working Group Meeting Minutes

 Date

Feb 16, 2023

 Participants

TBD

Recordings

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

20 minutes

Loading external themes

 

@Adam Stankiewicz's https://github.com/openedx/frontend-platform/pull/440

tl;dr;

  • Paragon’s design tokens intends to compile its own theme CSS instead of MFEs needing to compile Paragon’s SCSS → CSS.

  • Relies on 2 new config variables being present (potentially 3+ in the future):

    • APP_THEME_CORE_URL (core theme CSS)

    • APP_THEME_LIGHT_URL (CSS variable definitions specific to light theme variant)

    • [in the future] APP_THEME_DARK_URL (CSS variables definitions specific to dark theme variant, one day)

  • Implements useAppTheme React hook to load/inject the external theme URLs into the HTML <head>.

  • Does not render MFE until the external CSS is loaded to avoid Flash of Unstyled Content (FoUC).

  • Ensures that once we do support more than 1 theme variant (i.e., both light and dark), switching between them does not introduce FoUC.

  • Provides a mechanism for consuming MFEs to (eventually) switch the theme at runtime by exposing a dispatch function and a set of reducer actions to mutate the app theme state (e.g., a consuming MFE could do dispatch(setAppThemeVariant('dark')) in the future once more theme variant(s) beyond "light" is supported.

Discuss:

 

Update on MFE Domains

@Pedro Martello

  • Feature comparison between Piral and single-spa

  • The other suggested alternatives thus far are “roll-your-own”.

  •  

7min

 

Ghassan

feat: reduce size CSS output file by ghassanmas · Pull Request #266 · openedx/frontend-build
I can present the diff of css between with and without the purge css plugin

git diff --no-index dist/app.4fce923d8a1007f74bd7.css dist-with/app.2abb1105ce90dd2f22da.css

 Action items

 Decisions