upgrade deps and webpack build

Author: george treviranus

.eslintrc.js

@@ -207,5 +207,6 @@ module.exports = {
 
     // jsx-a11y
     "jsx-a11y/no-noninteractive-element-interactions": OFF,
+    "jsx-a11y/no-interactive-element-to-noninteractive-role": OFF,
   },
 }

app/components/Article/Article.js

@@ -1,30 +1,31 @@
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
 import Markdown from "react-markdown"
 import Prism from "prismjs"
 import classNames from "classnames"
 import PropTypes from "prop-types"
+import Undernet from "undernet"
 
-import { COMPONENTS } from "./constants"
 import ScrollUpOnMount from "app/components/ScrollUpOnMount"
+import { useDidMount, useWillUnmount } from "app/helpers"
+
+const SCOPE = "#article"
 
 export default function Article(props) {
   const [domIsLoaded, setDomIsLoaded] = useState(false)
 
-  const componentUnmountFunction = () => {
-    COMPONENTS.forEach(Component => Component.stop())
-  }
+  useWillUnmount(() => Undernet.stop(SCOPE))
 
-  const observedState = []
-  useEffect(() => {
+  useDidMount(() => {
     Prism.highlightAll()
-    COMPONENTS.forEach(Component => Component.start())
+    Undernet.start(SCOPE)
     setDomIsLoaded(true)
-
-    return componentUnmountFunction
-  }, observedState)
+  })
 
   return (
-    <article className={classNames("article-wrapper has-no-p column", { fadeIn: domIsLoaded })}>
+    <article
+      id="article"
+      className={classNames("article-wrapper has-no-p column", { fadeIn: domIsLoaded })}
+    >
       <ScrollUpOnMount />
       <Markdown source={props.children} escapeHtml={false} />
     </article>

app/components/Article/__tests__/Article.spec.js

@@ -1,16 +1,14 @@
 import React from "react"
-import Article from "../Article"
 import Prism from "prismjs"
-import { COMPONENTS } from "../constants"
+import Undernet from "undernet"
+import Article from "../Article"
 
 jest.mock("app/components/ScrollUpOnMount", () => global.simpleMock("ScrollUpOnMount"))
 
 global.scrollTo = jest.fn()
 
-COMPONENTS.forEach(Component => {
-  Component.start = jest.fn()
-  Component.stop = jest.fn()
-})
+Undernet.start = jest.fn()
+Undernet.stop = jest.fn()
 
 jest.mock("prismjs", () => ({
   highlightAll: jest.fn(),
@@ -47,29 +45,25 @@ describe("<Article />", () => {
       // Given
       mountComponent()
       // Then
-      expect(Prism.highlightAll).toHaveBeenCalled()
+      expect(Prism.highlightAll).toBeCalled()
     })
 
-    COMPONENTS.forEach(Component => {
-      it(`calls ${Component.constructor.name}.start`, () => {
-        // Given
-        mountComponent()
-        // Then
-        expect(Component.start).toHaveBeenCalled()
-      })
+    it("calls Undernet.start", () => {
+      // Given
+      mountComponent()
+      // Then
+      expect(Undernet.start).toBeCalled()
     })
   })
 
   describe("#componentWillUnmount", () => {
-    COMPONENTS.forEach(Component => {
-      it(`calls ${Component.constructor.name}.stop`, () => {
-        // Given
-        const wrapper = mountComponent()
-        // When
-        wrapper.unmount()
-        // Then
-        expect(Component.stop).toHaveBeenCalled()
-      })
+    it("calls Undernet.stop", () => {
+      // Given
+      const wrapper = mountComponent()
+      // When
+      wrapper.unmount()
+      // Then
+      expect(Undernet.stop).toBeCalled()
     })
   })
 })

app/components/Article/__tests__/__snapshots__/Article.spec.js.snap

@@ -4,6 +4,7 @@ exports[`<Article /> #render renders 1`] = `
 <Article>
   <article
     className="article-wrapper has-no-p column fadeIn"
+    id="article"
   >
     <ScrollUpOnMount />
     <ReactMarkdown
@@ -20,28 +21,28 @@ exports[`<Article /> #render renders 1`] = `
       transformLinkUri={[Function]}
     >
       <Root
-        key="root-1-1"
+        key="root-1-1-0"
       >
         <Heading
-          key="heading-1-1"
+          key="heading-1-1-0"
           level={1}
         >
           <h1>
             <TextRenderer
-              key="text-1-3"
-              nodeKey="text-1-3"
+              key="text-1-3-0"
+              nodeKey="text-1-3-0"
               value="Test header"
             >
               Test header
             </TextRenderer>
           </h1>
         </Heading>
         <p
-          key="paragraph-2-1"
+          key="paragraph-2-1-1"
         >
           <TextRenderer
-            key="text-2-1"
-            nodeKey="text-2-1"
+            key="text-2-1-0"
+            nodeKey="text-2-1-0"
             value=" So neat"
           >
              So neat

app/components/Article/constants.js

@@ -6,14 +6,14 @@ import AccordionsMd from "app/docs/accordions.md"
 
 const Accordions = () => {
   return (
-    <React.Fragment>
+    <>
       <SetMeta
         title="Accordions"
-        description="A component for hiding and showing content in an accordion-style user interface."
+        description="A component that composes a series of collapsible containers."
       />
       <PageHeader>Accordions</PageHeader>
       <Article>{AccordionsMd}</Article>
-    </React.Fragment>
+    </>
   )
 }
 

app/components/DocsRoutes/articles/Accordions.js

@@ -6,14 +6,14 @@ import AlignmentMd from "app/docs/alignment.md"
 
 const Alignment = () => {
   return (
-    <React.Fragment>
+    <>
       <SetMeta
         title="Alignment"
         description="Utilities for creating custom alignment in web layouts."
       />
       <PageHeader>Alignment</PageHeader>
       <Article>{AlignmentMd}</Article>
-    </React.Fragment>
+    </>
   )
 }
 

app/components/DocsRoutes/articles/Alignment.js

@@ -6,14 +6,14 @@ import ButtonsMd from "app/docs/buttons.md"
 
 const Buttons = () => {
   return (
-    <React.Fragment>
+    <>
       <SetMeta
         title="Buttons"
         description="Use button elements and class helpers for consistent interactions."
       />
       <PageHeader>Buttons</PageHeader>
       <Article>{ButtonsMd}</Article>
-    </React.Fragment>
+    </>
   )
 }
 

app/components/DocsRoutes/articles/Buttons.js

@@ -6,14 +6,14 @@ import CollapsiblesMd from "app/docs/collapsibles.md"
 
 const Collapsibles = () => {
   return (
-    <React.Fragment>
+    <>
       <SetMeta
         title="Collapsibles"
         description="A component for hiding or showing content in a collapsible container."
       />
       <PageHeader>Collapsibles</PageHeader>
       <Article>{CollapsiblesMd}</Article>
-    </React.Fragment>
+    </>
   )
 }
 

app/components/DocsRoutes/articles/Collapsibles.js

@@ -6,14 +6,14 @@ import ColorMd from "app/docs/color.md"
 
 const Color = () => {
   return (
-    <React.Fragment>
+    <>
       <SetMeta
         title="Color"
         description="Utilities for adding custom colored text and backgrounds using class helpers."
       />
       <PageHeader>Color</PageHeader>
       <Article>{ColorMd}</Article>
-    </React.Fragment>
+    </>
   )
 }