clean build scripts

Author: george treviranus

app/components/Article/Article.js

@@ -8,22 +8,22 @@ import Undernet from "undernet"
 import ScrollUpOnMount from "app/components/ScrollUpOnMount"
 import { useDidMount, useWillUnmount } from "app/helpers"
 
-const SCOPE = "#undernet-scope"
+const SCOPE = "#article"
 
 export default function Article(props) {
   const [domIsLoaded, setDomIsLoaded] = useState(false)
 
-  useWillUnmount(() => Undernet.stop(SCOPE, false))
+  useWillUnmount(() => Undernet.stop(SCOPE))
 
   useDidMount(() => {
     Prism.highlightAll()
-    Undernet.start(SCOPE, false)
+    Undernet.start(SCOPE)
     setDomIsLoaded(true)
   })
 
   return (
     <article
-      id="undernet-scope"
+      id="article"
       className={classNames("article-wrapper has-no-p column", { fadeIn: domIsLoaded })}
     >
       <ScrollUpOnMount />

app/docs/download.md

@@ -34,7 +34,7 @@ Include the link tag before your custom CSS, and the script tag at the end of yo
 </html>
 ```
 
-Note that if you plan to link to and start Undernet via `<script>` tag, it's recommended to add an event listener for `DOMContentLoaded` to ensure the page is ready. Head over to the [JavaScript](/docs/overview/javascript) page to see more examples, including UI frameworks like React.
+Note that if you plan to link to and start Undernet via `<script>` tag, it's recommended to add an event listener for `DOMContentLoaded` to ensure the page is ready. Head over to the [JavaScript](/docs/overview/javascript) page to see more examples, including in UI frameworks like React.
 
 ```html
 <script>
@@ -45,9 +45,7 @@ Note that if you plan to link to and start Undernet via `<script>` tag, it's rec
 
 ## NPM or Yarn
 
-You can also install and setup with npm or yarn.
-
-### JavaScript
+Install and setup with npm or yarn.
 
 ```sh
 $ npm install -D undernet

app/docs/javascript.md

@@ -12,12 +12,12 @@ Enabling Undernet, including all its component plugins, is as easy as this:
 
 ## Core API
 
-There are a few ways to use Undernet. 
+There are a few ways to use Undernet. The most direct way is using the `start` and `stop` methods off the default `Undernet` object:
 
 ### start
 
 ```js
-Undernet.start(scopeString)
+Undernet.start(scopeString, enableFocusRing)
 ```
 
 #### `scopeString` (string)
@@ -26,10 +26,16 @@ Default: `undefined`
 
 Limits Undernet's initialization to a specific DOM with selector string `scopeString`. E.g., `#my-element-id`.
 
+#### `enableFocusRing` (boolean)
+
+Default: `false`
+
+Enables a utility which adds a distinct focus ring on elements focused while using a keyboard.
+
 ### stop
 
 ```js
-Undernet.stop(scopeString)
+Undernet.stop(scopeString, enableFocusRing)
 ```
 
 #### `scopeString` (string)
@@ -38,9 +44,15 @@ Default: `undefined`
 
 Runs a teardown of components previously initialized via `start(scopeString)`.
 
+#### `enableFocusRing` (boolean)
+
+Default: `false`
+
+Disables the focus ring utility.
+
 ## Using Modules
 
-If you use npm, the default export is the `Undernet` object, same as if you use the CDN. Importing this gives you everything, including all JS components and utilities.
+If you use npm, the default export is the `Undernet` object. Importing this gives you everything, including all JS components and utilities.
 
 ```js
 import Undernet from "undernet" 

babel.config.js

@@ -7,24 +7,29 @@ const modules = {
   emotion: "emotion",
 }
 
+const libIgnore = ["src/js/__tests__", "src/js/index.bundle.js"]
+
 module.exports = api => {
   const test = api.env("test")
   const cjs = api.env("cjs")
   const esm = api.env("esm")
 
   let presets = [modules.env, modules.react]
   let plugins = [modules.properties, modules.dynamicImport, modules.emotion]
+  let ignore = []
 
   if (test) {
     presets = [modules.react, [modules.env, { targets: { node: "current" } }]]
     plugins = [...plugins, modules.dynamicImportNode]
   } else if (cjs) {
     presets = [modules.env]
     plugins = []
+    ignore = [...libIgnore]
   } else if (esm) {
     presets = [[modules.env, { modules: false }]]
     plugins = []
+    ignore = [...libIgnore]
   }
 
-  return { plugins, presets }
+  return { plugins, presets, ignore }
 }

package.json

@@ -25,8 +25,8 @@
     "prettify": "npm run js:prettify && npm run scss:prettify",
     "clean": "rm -rf dist/ lib/ && mkdir dist/ lib/",
     "js:build": "npm run js:build:cjs && npm run js:build:esm",
-    "js:build:cjs": "BABEL_ENV=cjs babel src/js/ -d lib/cjs/ --ignore 'src/js/index.bundle.js','src/js/__tests__/','src/js/helpers/' --no-comments -s",
-    "js:build:esm": "BABEL_ENV=esm babel src/js/ -d lib/esm/ --ignore 'src/js/index.bundle.js','src/js/__tests__/','src/js/helpers/' --no-comments -s",
+    "js:build:cjs": "BABEL_ENV=cjs babel src/js/ -d lib/cjs/ --no-comments -s",
+    "js:build:esm": "BABEL_ENV=esm babel src/js/ -d lib/esm/ --no-comments -s",
     "js:build:rollup": "BABEL_ENV=cjs rollup -c rollup.config.js",
     "js:watch": "BABEL_ENV=esm babel src/js/ -d lib/esm/ --watch --ignore 'src/js/index.bundle.js' --no-comments -s",
     "js:prettify": "prettier --write 'src/js/**/*.js'",

src/js/__tests__/utils.spec.js

@@ -376,7 +376,7 @@ describe("focusOnce(element)", () => {
   })
 })
 
-describe("setComponents(thisArg, scopeId, scopeKey, componentAttribute, componentKey, errorMessage, filterFn)", () => {
+describe("setComponents(options = {})", () => {
   const SCOPE_1 = "#scope-1"
   const SCOPE_2 = "#scope-2"
   const COMPONENT_ATTR = "data-test-component"

src/js/index.js

@@ -25,7 +25,7 @@ const Undernet = {
 
 const focusRing = Undernet.createFocusRing()
 
-Undernet.start = (scopeId, enableFocusRing = true) => {
+Undernet.start = (scopeId, enableFocusRing = false) => {
   Undernet.Modals.start(scopeId)
   Undernet.Accordions.start(scopeId)
   Undernet.Collapsibles.start(scopeId)
@@ -35,7 +35,7 @@ Undernet.start = (scopeId, enableFocusRing = true) => {
   if (enableFocusRing) focusRing.start()
 }
 
-Undernet.stop = (scopeId, enableFocusRing = true) => {
+Undernet.stop = (scopeId, enableFocusRing = false) => {
   Undernet.Modals.stop(scopeId)
   Undernet.Accordions.stop(scopeId)
   Undernet.Collapsibles.stop(scopeId)