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.
- 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.

.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

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

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!'

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",

packages/app-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')
     })

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')
     })

packages/app-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) {

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 () {

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'
 

packages/lib-classifier/.babelrc

@@ -6,7 +6,22 @@
     ["@babel/plugin-proposal-decorators", {
       "legacy": true
     }],
-    "@babel/plugin-proposal-logical-assignment-operators"
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "transform-imports",
+    ["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",
@@ -19,9 +34,6 @@
   ],
   "env": {
     "test": {
-      "plugins": [
-        ["babel-plugin-webpack-alias", { "config": "./webpack.dev.js" }]
-      ],
       "presets": [
         "@babel/preset-env",
         "@babel/preset-react"

packages/lib-classifier/package.json

@@ -5,8 +5,10 @@
   "author": "Zooniverse <[email protected]> (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",
@@ -77,7 +80,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",

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/DataImageViewer/DataImageViewerContainer.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import asyncStates from '@zooniverse/async-states'
-import request from 'superagent'
 import locationValidator from '../../helpers/locationValidator'
 import { findLocationsByMediaType } from '@helpers'
 import DataImageViewer from './DataImageViewer'
@@ -62,17 +61,15 @@ export default class DataImageViewerContainer extends React.Component {
     const { onError } = this.props
     try {
       const url = this.getSubjectUrl()
-      const response = await request.get(url)
-
-      // Get the JSON data, or (as a failsafe) parse the JSON data if the
-      // response is returned as a string
-      if (response.body) {
-        return response.body
-      } else if  (JSON.parse(response.text)) {
-        return { data: JSON.parse(response.text), chartOptions: {} }
+      const response = await fetch(url)
+      if (!response.ok) {
+        const error = new Error(response.statusText)
+        error.status = response.status
+        throw error
       }
+      const responseData = await response.json()
 
-      return null
+      return responseData
     } catch (error) {
       onError(error)
       return null

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/LightCurveViewer/LightCurveViewer.js

@@ -1,4 +1,13 @@
-import * as d3 from 'd3'
+import {
+  axisRight,
+  axisTop,
+  brushX,
+  scaleLinear,
+  select,
+  zoom,
+  zoomIdentity,
+  zoomTransform
+} from 'd3'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -13,6 +22,16 @@ import addDataMask from './d3/addDataMask'
 import addInterfaceLayer from './d3/addInterfaceLayer'
 import setDataPointStyle from './d3/setDataPointStyle'
 
+const d3 = {
+  axisRight,
+  axisTop,
+  brushX,
+  scaleLinear,
+  select,
+  zoom,
+  zoomIdentity,
+  zoomTransform
+}
 // The following are arbitrary as all heck, numbers are chosen for what "feels good"
 const ZOOM_IN_VALUE = 1.2
 const ZOOM_OUT_VALUE = 0.8

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/LightCurveViewer/d3/addRemoveAnnotationButton.js

@@ -1,5 +1,3 @@
-import * as d3 from 'd3'
-
 function cancelEvent(event) {
   event.stopPropagation
 }

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/LightCurveViewer/d3/getClickCoords.js

@@ -4,10 +4,10 @@ The coordinates are relative to the origin of the specified SVG node (which
 uses D3 scales for its x and y axes).
  */
 
-import * as d3 from 'd3'
+import { mouse } from 'd3'
 
 export default function getClickCoords (svgNode, xScale, yScale, transform) {
-  const coords = d3.mouse(svgNode)
+  const coords = mouse(svgNode)
   return [
     transform.rescaleX(xScale).invert(coords[0]),
     yScale.invert(coords[1]) // For the LightCurveViewer, only the x-axis is rescaled

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewerContainer.js

@@ -1,7 +1,6 @@
 import asyncStates from '@zooniverse/async-states'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import request from 'superagent'
 import { Box } from 'grommet'
 import ScatterPlotViewer from './ScatterPlotViewer'
 import locationValidator from '../../helpers/locationValidator'
@@ -58,10 +57,13 @@ class ScatterPlotViewerContainer extends Component {
     const { onError } = this.props
     try {
       const url = this.getSubjectUrl()
-      const response = await request.get(url)
-      // Get the JSON data, or (as a failsafe) parse the JSON data if the
-      // response is returned as a string
-      const responseData = response.body || JSON.parse(response.text)
+      const response = await fetch(url)
+      if (!response.ok) {
+        const error = new Error(response.statusText)
+        error.status = response.status
+        throw error
+      }
+      const responseData = await response.json()
 
       if (responseData.data && responseData.chartOptions) {
         return responseData

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/helpers/utils.js

@@ -1,5 +1,5 @@
 import { scaleLinear } from '@visx/scale'
-import * as d3 from 'd3'
+import { extent } from 'd3'
 import { flatten, zipWith } from 'lodash'
 
 function isThisMultipleDataSeries (data) {
@@ -34,13 +34,13 @@ export function getDataExtent (data) {
     }))
 
     return {
-      x: d3.extent(xValues),
-      y: d3.extent(yValues)
+      x: extent(xValues),
+      y: extent(yValues)
     }
   } else {
     return {
-      x: d3.extent(data.x),
-      y: d3.extent(data.y)
+      x: extent(data.x),
+      y: extent(data.y)
     }
   }
 }