Add ES6 builds to libraries

- 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.
zooniverse · Nov 28, 2022 · 504229f · 504229f
1 parent 5bc82bb
commit 504229f
Show file tree

Hide file tree

Showing 121 changed files with 485 additions and 220 deletions.
diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml
@@ -18,12 +18,12 @@ jobs:
           cache: 'yarn'
 
       - run: yarn install --production=false --frozen-lockfile
-      - run: yarn workspace @zooniverse/react-components build
-      - run: yarn workspace @zooniverse/classifier build
+      - run: yarn workspace @zooniverse/react-components build:es6
+      - run: yarn workspace @zooniverse/classifier build:es6
       - uses: actions/upload-artifact@v3
         with:
           name: build
-          path: packages/*/dist/main.js
+          path: packages/*/dist/
 
   build_project_app:
     name: Build NextJS project app

diff --git a/Dockerfile b/Dockerfile
@@ -39,8 +39,8 @@ RUN chown -R node:node .
 USER node
 
 RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn install --production=false --frozen-lockfile
-RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/react-components build
-RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/classifier build
+RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/react-components build:es6
+RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/classifier build:es6
 RUN echo $COMMIT_ID > /usr/src/packages/app-content-pages/public/commit_id.txt
 RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/fe-content-pages build
 RUN echo $COMMIT_ID > /usr/src/packages/app-project/public/commit_id.txt

diff --git a/bin/bootstrap:es6.sh b/bin/bootstrap:es6.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+set -ev
+
+# Script for bootstrapping the monorepo into a working state for development.
+#
+# Runs the following tasks in order:
+#   - Install dependencies
+#   - Build `@zooniverse/react-components`
+#   - Build `@zooniverse/lib-classifier`
+
+
+ROOT_DIR="$(cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && cd .. && pwd)"
+cd $ROOT_DIR
+
+printf 'Installing dependencies...\n'
+yarn install --frozen-lockfile
+printf '\n'
+
+printf 'Building `lib-react-components`...\n'
+yarn workspace @zooniverse/react-components build:es6
+printf '\n'
+
+printf 'Building `lib-classifier`...\n'
+yarn workspace @zooniverse/classifier build:es6
+printf '\n'
+
+printf 'Building `fe-project`...\n'
+yarn workspace @zooniverse/fe-project build
+printf '\n'
+
+printf 'Building `fe-content-pages`...\n'
+yarn workspace @zooniverse/fe-content-pages build
+printf '\n'
+
+echo 'Done!'
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   },
   "scripts": {
     "bootstrap": "./bin/bootstrap.sh",
+    "bootstrap:es6": "./bin/bootstrap:es6.sh",
     "build": "lerna run --parallel build",
     "clean-install": "./bin/clean-install.sh",
     "coverage-lcov": "nyc report --reporter=lcov",

diff --git a/...pp-content-pages/src/shared/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js b/...pp-content-pages/src/shared/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
@@ -92,7 +92,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?login=true', async function () {
       const user = userEvent.setup({ delay: null })
-      signInButton = screen.getByRole('button', { name: 'Sign In' })
+      signInButton = await screen.findByRole('button', { name: 'Sign In' })
       await user.click(signInButton)
       expect(pageURL.toString()).to.equal('https://localhost/?login=true')
     })
@@ -107,7 +107,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?register=true', async function () {
       const user = userEvent.setup({ delay: null })
-      registerButton = screen.getByRole('button', { name: 'Register' })
+      registerButton = await screen.findByRole('button', { name: 'Register' })
       await user.click(registerButton)
       expect(pageURL.toString()).to.equal('https://localhost/?register=true')
     })

diff --git a/packages/app-project/next.config.js b/packages/app-project/next.config.js
@@ -52,6 +52,11 @@ const nextConfig = {
 
   experimental: {
     forceSwcTransforms: true,
+    modularizeImports: {
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
+    },
   },
 
   async headers() {

diff --git a/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js b/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
@@ -92,7 +92,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?login=true', async function () {
       const user = userEvent.setup({ delay: null })
-      signInButton = screen.getByRole('button', { name: 'Sign In' })
+      signInButton = await screen.findByRole('button', { name: 'Sign In' })
       await user.click(signInButton)
       expect(pageURL.toString()).to.equal('https://localhost/?login=true')
     })
@@ -107,7 +107,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?register=true', async function () {
       const user = userEvent.setup({ delay: null })
-      registerButton = screen.getByRole('button', { name: 'Register' })
+      registerButton = await screen.findByRole('button', { name: 'Register' })
       await user.click(registerButton)
       expect(pageURL.toString()).to.equal('https://localhost/?register=true')
     })

diff --git a/...project/src/shared/components/ProjectStatistics/components/CompletionBar/CompletionBar.js b/...project/src/shared/components/ProjectStatistics/components/CompletionBar/CompletionBar.js
@@ -1,5 +1,5 @@
 import theme from '@zooniverse/grommet-theme'
-import * as d3 from 'd3'
+import { select, interpolate, format } from 'd3'
 import PropTypes from 'prop-types'
 import { createRef, Component } from 'react';
 import styled from 'styled-components'
@@ -24,7 +24,7 @@ class CompletionBar extends Component {
   }
 
   initChart () {
-    this.d3svg = d3.select(this.svgRef.current)
+    this.d3svg = select(this.svgRef.current)
 
     this.d3svg
       .selectAll('.bar')
@@ -50,11 +50,11 @@ class CompletionBar extends Component {
       .transition()
       .duration(1000)
       .tween('text', function (d, i, elements) {
-        const node = d3.select(this)
-        const interpolator = d3.interpolate(0, d)
+        const node = select(this)
+        const interpolator = interpolate(0, d)
         return t => {
           const value = interpolator(t)
-          const percent = d3.format('.0%')(value)
+          const percent = format('.0%')(value)
           node.text(percent)
             .attr('x', percent)
           if (value > 0.5) {

diff --git a/packages/app-project/src/shared/components/Stat/components/AnimatedNumber/AnimatedNumber.js b/packages/app-project/src/shared/components/Stat/components/AnimatedNumber/AnimatedNumber.js
@@ -1,4 +1,4 @@
-import * as d3 from 'd3'
+import { select, interpolate, format } from 'd3'
 import PropTypes from 'prop-types'
 import { createRef, Component } from 'react';
 
@@ -18,13 +18,13 @@ class AnimatedNumber extends Component {
 
   animateValue (prevValue) {
     const self = this
-    d3.select(this.ref.current)
+    select(this.ref.current)
       .data([this.props.value])
       .transition()
       .duration(this.props.duration)
       .tween('text', function (d) {
-        const node = d3.select(this)
-        const interpolator = d3.interpolate(prevValue, d)
+        const node = select(this)
+        const interpolator = interpolate(prevValue, d)
         return t => {
           const value = interpolator(t)
           const niceValue = self.formatValue(value)
@@ -34,7 +34,7 @@ class AnimatedNumber extends Component {
   }
 
   formatValue (value) {
-    return d3.format(',d')(value)
+    return format(',d')(value)
   }
 
   render () {

diff --git a/packages/app-project/stores/User/UserPersonalization/YourStats/YourStats.js b/packages/app-project/stores/User/UserPersonalization/YourStats/YourStats.js
@@ -1,6 +1,5 @@
 import asyncStates from '@zooniverse/async-states'
 import { GraphQLClient } from 'graphql-request'
-import _ from 'lodash'
 import { flow, getRoot, types } from 'mobx-state-tree'
 import auth from 'panoptes-client/lib/auth'
 

diff --git a/packages/lib-classifier/.babelrc b/packages/lib-classifier/.babelrc
@@ -6,7 +6,26 @@
     ["@babel/plugin-proposal-decorators", {
       "legacy": true
     }],
-    "@babel/plugin-proposal-logical-assignment-operators"
+    "@babel/plugin-proposal-logical-assignment-operators",
+    ["transform-imports", {
+      "lodash": {
+        "transform": "lodash/${member}"
+      }
+    }],
+    ["module-resolver", {
+      "alias": {
+        "@components": "./src/components",
+        "@helpers": "./src/helpers",
+        "@hooks": "./src/hooks",
+        "@plugins": "./src/plugins",
+        "@shared": "./src/components/Classifier/components/shared",
+        "@store": "./src/store",
+        "@stories": "./src/stories",
+        "@test": "./test",
+        "@translations": "./src/translations",
+        "@viewers": "./src/components/Classifier/components/SubjectViewer"
+      }
+    }]
   ],
   "presets": [
     ["@babel/preset-react", { 
@@ -21,9 +40,6 @@
   ],
   "env": {
     "test": {
-      "plugins": [
-        ["babel-plugin-webpack-alias", { "config": "./webpack.dev.js" }]
-      ],
       "presets": [
         "@babel/preset-env",
         ["@babel/preset-react", { 

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
@@ -5,8 +5,10 @@
   "author": "Zooniverse <contact@zooniverse.org> (https://www.zooniverse.org/)",
   "version": "0.0.1",
   "main": "dist/main.js",
+  "module": "dist/es6/components/Classifier/index.js",
   "scripts": {
-    "build": "webpack --config webpack.dist.js",
+    "build": "webpack --config webpack.dist.js && yarn build:es6",
+    "build:es6": "babel ./src/ --out-dir ./dist/es6 --copy-files --no-copy-ignored --ignore 'src/**/*.spec.js' --ignore 'src/**/*.stories.js'",
     "dev": "webpack serve --config webpack.dev.js",
     "lint": "zoo-standard --fix | snazzy",
     "start": "PANOPTES_ENV=production npm run dev",
@@ -51,6 +53,7 @@
     "styled-components": "~5.x.x"
   },
   "devDependencies": {
+    "@babel/cli": "~7.19.3",
     "@babel/core": "~7.20.2",
     "@babel/plugin-proposal-decorators": "~7.20.0",
     "@babel/plugin-proposal-logical-assignment-operators": "~7.18.6",
@@ -78,7 +81,8 @@
     "@zooniverse/react-components": "~1.2.0",
     "@zooniverse/standard": "~1.0.0",
     "babel-loader": "~9.1.0",
-    "babel-plugin-webpack-alias": "~2.1.2",
+    "babel-plugin-module-resolver": "~4.1.0",
+    "babel-plugin-transform-imports": "~2.0.0",
     "chai": "~4.3.4",
     "chai-dom": "~1.11.0",
     "css-loader": "~6.7.0",

diff --git a/packages/lib-classifier/src/components/Classifier/Classifier.js b/packages/lib-classifier/src/components/Classifier/Classifier.js
@@ -2,8 +2,7 @@ import asyncStates from '@zooniverse/async-states'
 import { applySnapshot, getSnapshot } from 'mobx-state-tree'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
-import '../../translations/i18n'
-import i18n from 'i18next'
+import i18n from '../../translations/i18n'
 
 import { usePanoptesUser, useProjectPreferences, useProjectRoles } from '@hooks'
 import Layout from './components/Layout'

diff --git a/...omponents/Classifier/components/Banners/components/AlreadySeenBanner/AlreadySeenBanner.js b/...omponents/Classifier/components/Banners/components/AlreadySeenBanner/AlreadySeenBanner.js
@@ -1,6 +1,6 @@
 import { bool, shape, string } from 'prop-types'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 import Banner from '../Banner'
 

diff --git a/...s/lib-classifier/src/components/Classifier/components/Banners/components/Banner/Banner.js b/...s/lib-classifier/src/components/Classifier/components/Banners/components/Banner/Banner.js
@@ -4,7 +4,7 @@ import { CaretNext, CaretPrevious } from 'grommet-icons'
 import { array, bool, func, oneOf, oneOfType, shape, string } from 'prop-types'
 import React, { Component, createRef } from 'react'
 import styled, { withTheme } from 'styled-components'
-import { useTranslation, withTranslation } from 'react-i18next'
+import { useTranslation, withTranslation } from '@translations/i18n'
 
 import Triangle from '@shared/Triangle'
 import TooltipText from './components/TooltipText'

diff --git a/...er/src/components/Classifier/components/Banners/components/RetiredBanner/RetiredBanner.js b/...er/src/components/Classifier/components/Banners/components/RetiredBanner/RetiredBanner.js
@@ -1,6 +1,6 @@
 import { bool, shape, string } from 'prop-types'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 import Banner from '../Banner'
 

diff --git a/...sifier/components/Banners/components/SubjectSetProgressBanner/SubjectSetProgressBanner.js b/...sifier/components/Banners/components/SubjectSetProgressBanner/SubjectSetProgressBanner.js
@@ -1,6 +1,6 @@
 import { bool, func, number, shape, string } from 'prop-types'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 import Banner from '../Banner'
 import ConfirmModal from './components/ConfirmModal'

diff --git a/...nents/Banners/components/SubjectSetProgressBanner/components/ConfirmModal/ConfirmModal.js b/...nents/Banners/components/SubjectSetProgressBanner/components/ConfirmModal/ConfirmModal.js
@@ -2,7 +2,7 @@ import { Box, Button, Paragraph } from 'grommet'
 import { bool, func } from 'prop-types'
 import React from 'react'
 import { Modal, PrimaryButton } from '@zooniverse/react-components'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 /**
 An alert which - if you've already started annotation this Subject - asks if

diff --git a/...ponents/Banners/components/UserHasFinishedWorkflowBanner/UserHasFinishedWorkflowBanner.js b/...ponents/Banners/components/UserHasFinishedWorkflowBanner/UserHasFinishedWorkflowBanner.js
@@ -1,6 +1,6 @@
 import { bool, shape, string } from 'prop-types'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 import Banner from '../Banner'
 
 export default function UserHasFinishedWorkflowBanner({ subject }) {

diff --git a/...sifier/components/Banners/components/WorkflowIsFinishedBanner/WorkflowIsFinishedBanner.js b/...sifier/components/Banners/components/WorkflowIsFinishedBanner/WorkflowIsFinishedBanner.js
@@ -1,6 +1,6 @@
 import { bool, shape, string } from 'prop-types'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 import Banner from '../Banner'
 
 export default function  WorkflowIsFinishedBanner({ subject }) {

diff --git a/packages/lib-classifier/src/components/Classifier/components/Feedback/FeedbackModal.js b/packages/lib-classifier/src/components/Classifier/components/Feedback/FeedbackModal.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Button, Box } from 'grommet'
 import { Modal } from '@zooniverse/react-components'
-import { withTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 import { withStores } from '@helpers'
 import getFeedbackViewer from './helpers/getFeedbackViewer'
@@ -31,9 +31,9 @@ function FeedbackModal({
   hideFeedback,
   hideSubjectViewer,
   messages,
-  showModal,
-  t = key => key
+  showModal
 }) {
+  const { t } = useTranslation('components')
   const label = t('FeedbackModal.label')
   const showViewer = !hideSubjectViewer && applicableRules?.length > 0
   const FeedbackViewer = showViewer ? getFeedbackViewer(applicableRules) : null
@@ -91,6 +91,5 @@ FeedbackModal.propTypes = {
   showModal: PropTypes.bool
 }
 
-const TranslatedFeedbackModal = withTranslation('components')(FeedbackModal)
-export default withStores(TranslatedFeedbackModal, storeMapper)
+export default withStores(FeedbackModal, storeMapper)
 export { FeedbackModal }
diff --git a/...assifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js b/...assifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js
@@ -1,4 +1,5 @@
-import { brushX, select } from 'd3'
+import { brushX } from 'd3-brush'
+import { select } from 'd3-selection'
 import { toJS } from 'mobx'
 import React, { useCallback } from 'react'
 

diff --git a/.../components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuideContainer.js b/.../components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuideContainer.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { MovableModal, Modal } from '@zooniverse/react-components'
 import FieldGuide from './FieldGuide'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 function FieldGuideContainer ({
   onClose = () => true,

diff --git a/...onents/Classifier/components/FieldGuide/components/FieldGuide/FieldGuideContainer.spec.js b/...onents/Classifier/components/FieldGuide/components/FieldGuide/FieldGuideContainer.spec.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { MovableModal, Modal } from '@zooniverse/react-components'
 import FieldGuideContainer from './FieldGuideContainer'
 import { FieldGuideFactory, FieldGuideMediumFactory } from '@test/factories'
-import i18n from '@test/i18n/i18n-for-tests'
+import i18n from '@translations/i18n'
 import sinon from 'sinon'
 
 const medium = FieldGuideMediumFactory.build()

diff --git a/...r/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js b/...r/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js
@@ -6,7 +6,7 @@ import { PropTypes as MobXPropTypes } from 'mobx-react'
 import PropTypes from 'prop-types'
 import React from 'react'
 import styled, { css, withTheme } from 'styled-components'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 import FieldGuideItemIcon from '../FieldGuideItemIcon'
 

diff --git a/.../FieldGuide/components/FieldGuide/components/FieldGuideItemAnchor/FieldGuideItemAnchor.js b/.../FieldGuide/components/FieldGuide/components/FieldGuideItemAnchor/FieldGuideItemAnchor.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import { PropTypes as MobXPropTypes } from 'mobx-react'
 import { withTheme } from 'styled-components'
 import FieldGuideItemIcon from '../FieldGuideItemIcon'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@translations/i18n'
 
 const defaultIcons = observable.map()
 export function AnchorLabel({