Add ES6 builds to libraries #3900

eatyourgreens · 2022-11-18T17:12:37Z

Add ES6 library builds with Babel:

Enable the React automatic runtime for the classifier and Zooniverse React Components.
Fix @babel/runtime in classifier builds.
Add an ES6 build to @zooniverse/react-components. Export dist/es6/index.js as a module.
Add an ES6 build to @zooniverse/classifier. Export dist/es6/components/Classifier/index.js as a module.
Add yarn bootstrap:es6 to bootstrap the monorepo with ES modules.
Use i18n.createInstance() to set up i18n for each library. Give each instance its own useTranslation hook and withTranslation HOC.
Use the ES6 build scripts for CI builds and for deploys. This might give us faster builds and smaller images.

Remove redundant packages from the builds:

Replace mime-types with mime/lite.
Remove @fortawesome/react-fontawesome and @fortawesome/fontawesome-svg-core.
Remove import * as d3.
Remove import _ from lodash.
Replace superagent with fetch in the classifier.

I've left the Webpack UMD module builds in for the Mocha tests, and for backwards compatibility with any third-party projects which require in @zooniverse/react-components. If we can figure out #3779 then I'm fairly sure we can remove the webpack builds and use pure ES modules for the libraries.

With the changes here, I'm seeing the JS download on a typical project Classify page drop from ~1.7MB to ~800k. NextJS reports the project page build size as ~490k (Classify pages are ~800k), which is still too large but much better than what we've currently got in production.

Includes Enable React automatic runtime #3847.
Towards Breaking up the lib-classifier bundle #366.

Lots of files are touched by this PR, but many of them are one-line changes to the imports from i18next packages.

Package

app-project
lib-classifier
lib-react-components

How to Review

There are a few options. Pick the one you're most comfortable with:

Build and start both NextJS apps locally in Node to verify that they still build and run. You can run yarn bootstrap:es6 to skip the Webpack builds, for a faster build that only includes the changes here.
Build and start a Docker image, then check both NextJS apps on localhost.
Build and deploy a Docker image of this branch, then check the project app on https://fe-project-branch.preview.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess. There's no branch preview on kubernetes for the content pages app.

I've run a branch deploy of 504229f so that we can test the Docker image on kubernetes.

Here are some test projects:

SuperWASP Black Hole Hunters: https://fe-project-branch.preview.zooniverse.org/projects/hughdickinson/superwasp-black-hole-hunters/classify/workflow/17386
Planet Hunters TESS in Spanish: https://fe-project-branch.preview.zooniverse.org/projects/es/nora-dot-eisner/planet-hunters-tess
HMS NHS: https://fe-project-branch.preview.zooniverse.org/projects/msalmon/hms-nhs-the-nautical-health-service
Staging workflows with feedback enabled: https://fe-project-branch.preview.zooniverse.org/projects/markb-panoptes/feedback-testing-mb?env=staging
You can verify the deployed commit in the <head> of each page, or at the following URL: https://fe-project-branch.preview.zooniverse.org/projects/commit_id.txt

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

Tests are passing locally and on Github
Documentation is up to date and changelog has been updated if appropriate
You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

All pages of a FEM project load: Home Page, Classify Page, and About Pages
Can submit a classification
Can sign-in and sign-out
The component is accessible
- Can be used with a screen reader BBC guide to VoiceOver
- Can be used from the keyboard WebAIM guide to keyboard testing
- It is passing accessibility checks in the storybook

Refactoring

The PR creator has described the reason for refactoring
The refactored component(s) continue to work as expected

coveralls · 2022-11-18T17:23:48Z

Coverage decreased (-0.3%) to 82.922% when pulling 0a1036f on es6-builds into fb6a5dc on master.

eatyourgreens · 2022-11-18T19:44:20Z

Tests are passing and the apps are building, so that looks good.

Dynamic imports seem to be broken in the app bundles. In the project app:

dynamically imported translation text is missing from the page header and footer. (Fixed, I think, by using import instead of require.)
the Classifier component isn't dynamically loaded into the Classify page. (Fixed by adding the classifier's JSON language files to the build.)

The content pages app looks good, but it doesn't use internationalisation.

EDIT: I forgot to include translations JSON files in the classifier build. Fixed now, and the classifier seems to load.

eatyourgreens · 2022-11-19T12:08:30Z

Tests are passing and both NextJS apps are building. I've deployed the project app to kubernetes. It loads and runs without errors, but translated labels don't show for components that are loaded in from @zooniverse/react-components.
https://fe-project-branch.preview.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess/classify/workflow/11235

EDIT: this was caused by each library calling i18n.init() on the same instance of i18n, which is why the bug only showed up on the Classify page. The classifier replaced the react-components translation strings with its own translation strings. Fixed by giving each library its own instance of i18next.

eatyourgreens · 2022-11-19T23:19:44Z

The project storybook doesn't show translation strings on this branch, which is odd because this PR doesn't touch project translations.

EDIT: I think this can be fixed by giving each library its own instance of i18next, rather than overwriting the default instance and any translation strings it contains.

eatyourgreens · 2022-11-20T23:31:44Z

This is working locally for me now without translations bugs, in production mode. The storybooks are working too. I've run a branch deploy of 8f2ba69 so that we can test the Docker image on kubernetes.

eatyourgreens · 2022-11-20T23:35:50Z

~~Still to do: update the changelog for @zooniverse/react-components.~~ This could be released as version 1.3, since it keeps the Webpack build for backwards compatibility with loaders that don't support ESM.

eatyourgreens · 2022-11-21T08:50:49Z

~~Also to do: roll #3847 into this branch, to fix @babel/runtime in the classifier.~~

mcbouslog

This looks great!!

I tested all the linked fe-project-branch projects, noting changing languages, signing in and out, feedback (positive and negative), d3 related subject viewers - all work as expected. Tested across browsers without issue.

I successfully built and ran app-content-pages and app-project locally. Also ran the storybooks locally; spot-checked a few stories including test translation without issue.

I can sign in/out on the fe-project-branch linked projects.

Looks great!!

mcbouslog · 2022-11-30T22:40:27Z

packages/lib-react-components/src/translations/i18n.js

@@ -26,7 +26,8 @@ const supportedLngs = [
  'zh-tw'
 ]

-i18n.use(initReactI18next).init({
+const zrcI18n = i18n.createInstance()


This is terribly minor, 100% ok to dismiss, but with the old Zooniverse-React-Components repo should we avoid referencing the new FEM lib-react-components as zrc? So maybe this variable could be reactComponentsI18n or something similar, like how classifierI18n is the related variable in lib-classifier? I realize reactComponents has a larger meaning than our new Zooniverse library of react components though, so I understand if would prefer to keep as is.

This library is the replacement for the old ZRC library, in new projects, so I think the naming is OK.

Something I discovered yesterday is that the build I added here (straight Babel transform from JSX to JS) is the build script from the old library. I’m not sure why it’s taken so long to copy this across to the new libraries.

https://github.com/zooniverse/Zooniverse-React-Components/blob/49bea57c6089bb99e51f2552b148728f96960705/package.json#L9

Still kind of confusing that there are two ZRC libraries in NPM.

https://www.npmjs.com/package/zooniverse-react-components

https://www.npmjs.com/package/@zooniverse/react-components

- Enable the React automatic runtime for the classifier and Zooniverse React Components. - Fix `@babel/runtime` in classifier builds.

- Add an ES6 build to `@zooniverse/react-components`. Export `dist/es6/index.js` as a module. - Add an ES6 build to `@zooniverse/classifier`. Export `dist/es6/components/Classifier/index.js` as a module. - Add `yarn bootstrap:es6` to bootstrap the monorepo with ES modules. - Use `i18n.createInstance()` to set up `i18n` for each library. Give each instance its own `useTranslation` hook and `withTranslation` HOC. - Replace `mime-types` with `mime/lite`. - Remove `@fortawesome/react-fontawesome` and `@fortawesome/fontawesome-svg-core`. - Remove `import * as d3`. - Remove `import _ from lodash`. - Replace `superagent` with `fetch` in the classifier.

A quick ADR to explain the switch from Webpack UMD builds to ESM builds with Babel in zooniverse#3900.

A quick ADR to explain the switch from Webpack UMD builds to ESM builds with Babel in #3900. --------- Co-authored-by: Delilah C <23665803+goplayoutside3@users.noreply.github.com>

eatyourgreens added the ops Changes that affect how something is built or deployed label Nov 18, 2022

eatyourgreens marked this pull request as draft November 18, 2022 19:59

eatyourgreens force-pushed the es6-builds branch from 307fb3d to d438c59 Compare November 18, 2022 20:50

eatyourgreens marked this pull request as ready for review November 18, 2022 20:51

eatyourgreens requested a review from a team November 18, 2022 20:51

eatyourgreens force-pushed the es6-builds branch 2 times, most recently from 9c3892b to a062247 Compare November 18, 2022 22:01

eatyourgreens mentioned this pull request Nov 18, 2022

@zooniverse-react-components: convert to ESM #3787

Closed

18 tasks

eatyourgreens force-pushed the es6-builds branch 2 times, most recently from a9df545 to e990b71 Compare November 19, 2022 11:50

eatyourgreens added performance ux labels Nov 19, 2022

eatyourgreens force-pushed the es6-builds branch 5 times, most recently from b521da9 to 7440654 Compare November 19, 2022 20:06

eatyourgreens mentioned this pull request Nov 19, 2022

@zooniverse/react-components: improvements to the output bundle size #3761

Closed

9 tasks

eatyourgreens force-pushed the es6-builds branch from 7440654 to c9c055d Compare November 19, 2022 22:31

eatyourgreens mentioned this pull request Nov 19, 2022

@zooniverse/classifier: improvements to output bundle size #3774

Closed

11 tasks

eatyourgreens force-pushed the es6-builds branch 3 times, most recently from 50b3c66 to 4f8d388 Compare November 20, 2022 23:22

eatyourgreens force-pushed the es6-builds branch 2 times, most recently from 5760db4 to c756197 Compare November 22, 2022 21:28

mcbouslog mentioned this pull request Nov 22, 2022

Install @next/bundle-analyzer #3905

Merged

5 tasks

eatyourgreens force-pushed the es6-builds branch 2 times, most recently from a7bd75c to f065cde Compare November 23, 2022 10:01

eatyourgreens force-pushed the es6-builds branch 4 times, most recently from 9c09fba to 504229f Compare November 28, 2022 22:15

eatyourgreens mentioned this pull request Nov 28, 2022

Pure ES Modules break the Mocha tests #3779

Open

mcbouslog self-assigned this Nov 29, 2022

mcbouslog requested review from mcbouslog and removed request for a team December 1, 2022 06:18

mcbouslog approved these changes Dec 1, 2022

View reviewed changes

eatyourgreens added 2 commits December 1, 2022 09:18

Enable React automatic runtime

1af32a2

- Enable the React automatic runtime for the classifier and Zooniverse React Components. - Fix `@babel/runtime` in classifier builds.

eatyourgreens force-pushed the es6-builds branch from 504229f to ff72487 Compare December 1, 2022 09:18

Bump @zooniverse/react-components to 1.3

0a1036f

eatyourgreens force-pushed the es6-builds branch from b0a2a7b to 0a1036f Compare December 1, 2022 10:02

eatyourgreens merged commit 1c87583 into master Dec 1, 2022

eatyourgreens deleted the es6-builds branch December 1, 2022 10:11

eatyourgreens mentioned this pull request Dec 1, 2022

Remove unused React globals #3935

Merged

11 tasks

eatyourgreens added a commit to eatyourgreens/front-end-monorepo that referenced this pull request Jan 8, 2024

ADR 57: library build scripts

094fc5e

A quick ADR to explain the switch from Webpack UMD builds to ESM builds with Babel in zooniverse#3900.

eatyourgreens mentioned this pull request Jan 8, 2024

ADR 57: library build scripts #5827

Merged

eatyourgreens added a commit to eatyourgreens/front-end-monorepo that referenced this pull request Jan 8, 2024

ADR 57: library build scripts

8b820b7

A quick ADR to explain the switch from Webpack UMD builds to ESM builds with Babel in zooniverse#3900.

eatyourgreens added a commit to eatyourgreens/front-end-monorepo that referenced this pull request Jan 8, 2024

ADR 57: library build scripts

a30e454

A quick ADR to explain the switch from Webpack UMD builds to ESM builds with Babel in zooniverse#3900.

goplayoutside3 mentioned this pull request Apr 17, 2024

Move Resources and FAQ pages into lib-content #6042

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ES6 builds to libraries #3900

Add ES6 builds to libraries #3900

eatyourgreens commented Nov 18, 2022 •

edited by mcbouslog

Loading

coveralls commented Nov 18, 2022 •

edited

Loading

eatyourgreens commented Nov 18, 2022 •

edited

Loading

eatyourgreens commented Nov 19, 2022 •

edited

Loading

eatyourgreens commented Nov 19, 2022 •

edited

Loading

eatyourgreens commented Nov 20, 2022 •

edited

Loading

eatyourgreens commented Nov 20, 2022 •

edited

Loading

eatyourgreens commented Nov 21, 2022 •

edited

Loading

mcbouslog left a comment

mcbouslog Nov 30, 2022

eatyourgreens Dec 1, 2022

eatyourgreens Dec 1, 2022

Add ES6 builds to libraries #3900

Add ES6 builds to libraries #3900

Conversation

eatyourgreens commented Nov 18, 2022 • edited by mcbouslog Loading

Package

How to Review

Checklist

General

General UX

Refactoring

coveralls commented Nov 18, 2022 • edited Loading

eatyourgreens commented Nov 18, 2022 • edited Loading

eatyourgreens commented Nov 19, 2022 • edited Loading

eatyourgreens commented Nov 19, 2022 • edited Loading

eatyourgreens commented Nov 20, 2022 • edited Loading

eatyourgreens commented Nov 20, 2022 • edited Loading

eatyourgreens commented Nov 21, 2022 • edited Loading

mcbouslog left a comment

Choose a reason for hiding this comment

mcbouslog Nov 30, 2022

Choose a reason for hiding this comment

eatyourgreens Dec 1, 2022

Choose a reason for hiding this comment

eatyourgreens Dec 1, 2022

Choose a reason for hiding this comment

eatyourgreens commented Nov 18, 2022 •

edited by mcbouslog

Loading

coveralls commented Nov 18, 2022 •

edited

Loading

eatyourgreens commented Nov 18, 2022 •

edited

Loading

eatyourgreens commented Nov 19, 2022 •

edited

Loading

eatyourgreens commented Nov 19, 2022 •

edited

Loading

eatyourgreens commented Nov 20, 2022 •

edited

Loading

eatyourgreens commented Nov 20, 2022 •

edited

Loading

eatyourgreens commented Nov 21, 2022 •

edited

Loading