Reduce minified JS bundle size from 189kb to 73kb (#17552)

includes/scripts.html

@@ -1 +1,2 @@
+<script id="search-options" type="application/json">{{ searchOptions }}</script>
 <script src="{{ builtAssets.main.js }}"></script>

javascripts/copy-code.js

@@ -1,15 +1,19 @@
-import Clipboard from 'clipboard'
-
 export default () => {
-  const clipboard = new Clipboard('button.js-btn-copy')
+  const buttons = Array.from(document.querySelectorAll('button.js-btn-copy'))
 
-  clipboard.on('success', evt => {
+  if (!buttons) return
-    const btn = evt.trigger
+
-    const beforeTooltip = btn.getAttribute('aria-label')
+  buttons.forEach(button =>
-    btn.setAttribute('aria-label', 'Copied!')
+    button.addEventListener('click', async evt => {
+      const text = button.dataset.clipboardText
+      await navigator.clipboard.writeText(text)
+
+      const beforeTooltip = button.getAttribute('aria-label')
+      button.setAttribute('aria-label', 'Copied!')
 
       setTimeout(() => {
-      btn.setAttribute('aria-label', beforeTooltip)
+        button.setAttribute('aria-label', beforeTooltip)
       }, 2000)
     })
+  )
 }

javascripts/display-platform-specific-content.js

@@ -1,15 +1,17 @@
-const { getPlatformFromUserAgent } = require('platform-utils')
+import parseUserAgent from './user-agent'
 const supportedPlatforms = ['mac', 'windows', 'linux']
 const detectedPlatforms = new Set()
 
 // Emphasize content for the visitor's OS (inferred from user agent string)
 
 export default function displayPlatformSpecificContent () {
-  let platform = getDefaultPlatform() || getPlatformFromUserAgent()
+  let platform = getDefaultPlatform() || parseUserAgent().os
 
   // adjust platform names to fit existing mac/windows/linux scheme
   if (!platform) platform = 'mac' // default to 'mac' on mobile
   if (platform === 'darwin') platform = 'mac'
+  if (platform === 'ios') platform = 'mac'
+  if (platform === 'android') platform = 'linux'
   if (platform.startsWith('win')) platform = 'windows'
 
   const platformsInContent = findPlatformSpecificContent(platform)

javascripts/search.js

@@ -1,12 +1,8 @@
 import { tags } from './hyperscript'
 import { sendEvent } from './events'
-const searchWithYourKeyboard = require('search-with-your-keyboard')
+import searchWithYourKeyboard from 'search-with-your-keyboard'
-const truncate = require('html-truncate')
+import truncate from 'html-truncate'
-const languages = require('../lib/languages')
-const allVersions = require('../lib/all-versions')
-const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-version')
 
-const languageCodes = Object.keys(languages)
 const maxContentLength = 300
 
 let $searchInputContainer
@@ -29,8 +25,13 @@ export default function search () {
   $searchOverlay = document.querySelector('.search-overlay-desktop')
 
   // There's an index for every version/language combination
-  version = deriveVersionFromPath()
+  const {
-  language = deriveLanguageCodeFromPath()
+    languages,
+    versions,
+    nonEnterpriseDefaultVersion
+  } = JSON.parse(document.getElementById('search-options').text)
+  version = deriveVersionFromPath(versions, nonEnterpriseDefaultVersion)
+  language = deriveLanguageCodeFromPath(languages)
 
   // Find search placeholder text in a <meta> tag, falling back to a default
   const $placeholderMeta = document.querySelector('meta[name="site.data.ui.search.placeholder"]')
@@ -109,23 +110,16 @@ function closeSearch () {
   onSearch()
 }
 
-function deriveLanguageCodeFromPath () {
+function deriveLanguageCodeFromPath (languageCodes) {
   let languageCode = location.pathname.split('/')[1]
   if (!languageCodes.includes(languageCode)) languageCode = 'en'
   return languageCode
 }
 
-function deriveVersionFromPath () {
+function deriveVersionFromPath (allVersions, nonEnterpriseDefaultVersion) {
   // fall back to the non-enterprise default version (FPT currently) on the homepage, 404 page, etc.
   const versionStr = location.pathname.split('/')[2] || nonEnterpriseDefaultVersion
-  const versionObject = allVersions[versionStr] || allVersions[nonEnterpriseDefaultVersion]
+  return allVersions[versionStr] || allVersions[nonEnterpriseDefaultVersion]
-
-  // if GHES, returns the release number like 2.21, 2.22, etc.
-  // if FPT, returns 'dotcom'
-  // if GHAE, returns 'ghae'
-  return versionObject.plan === 'enterprise-server'
-    ? versionObject.currentRelease
-    : versionObject.miscBaseName
 }
 
 // Wait for the event to stop triggering for X milliseconds before responding

javascripts/wrap-code-terms.js

@@ -1,8 +1,8 @@
+import escape from 'lodash/escape'
 const wordsLongerThan18Chars = /[\S]{18,}/g
 const camelCaseChars = /([a-z])([A-Z])/g
 const underscoresAfter12thChar = /([\w:]{12}[^_]*?)_/g
 const slashChars = /([/\\])/g
-const { escape } = require('lodash')
 
 // This module improves table rendering on reference pages by inserting a <wbr>
 // tag in code terms that use camelcase, slashes, or underscores, inspired by

lib/search/versions.js

@@ -1,13 +1,14 @@
 const allVersions = require('../all-versions')
 
-module.exports = new Set(
+module.exports = Object.fromEntries(
-  Object.values(allVersions)
+  Object.entries(allVersions)
-    .map(version =>
+    .map(([versionStr, versionObject]) => [
+      versionStr,
       // if GHES, resolves to the release number like 2.21, 2.22, etc.
       // if FPT, resolves to 'dotcom'
       // if GHAE, resolves to 'ghae'
-      version.plan === 'enterprise-server'
+      versionObject.plan === 'enterprise-server'
-        ? version.currentRelease
+        ? versionObject.currentRelease
-        : version.miscBaseName
+        : versionObject.miscBaseName
-    )
+    ])
 )

middleware/context.js

@@ -8,6 +8,8 @@ const productNames = require('../lib/product-names')
 const warmServer = require('../lib/warm-server')
 const featureFlags = Object.keys(require('../feature-flags'))
 const builtAssets = require('../lib/built-asset-urls')
+const searchVersions = require('../lib/search/versions')
+const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-version')
 
 // Supply all route handlers with a baseline `req.context` object
 // Note that additional middleware in middleware/index.js adds to this context object
@@ -46,5 +48,12 @@ module.exports = async function contextualize (req, res, next) {
   // JS + CSS asset paths
   req.context.builtAssets = builtAssets
 
+  // Languages and versions for search
+  req.context.searchOptions = JSON.stringify({
+    languages: Object.keys(languages),
+    versions: searchVersions,
+    nonEnterpriseDefaultVersion
+  })
+
   return next()
 }

middleware/search.js

@@ -1,6 +1,6 @@
 const express = require('express')
 const languages = new Set(Object.keys(require('../lib/languages')))
-const versions = require('../lib/search/versions')
+const versions = new Set(Object.values(require('../lib/search/versions')))
 const loadLunrResults = require('../lib/search/lunr-search')
 const loadAlgoliaResults = require('../lib/search/algolia-search')
 

package-lock.json

@@ -5275,7 +5275,7 @@
     },
     "agentkeepalive": {
       "version": "2.2.0",
-      "resolved": "http://registry.npmjs.org/agentkeepalive/-/agentkeepalive-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-2.2.0.tgz",
       "integrity": "sha1-xdG9SxKQCPEWPyNvhuX66iAm4u8="
     },
     "aggregate-error": {
@@ -5413,7 +5413,7 @@
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -6796,7 +6796,7 @@
     },
     "brfs": {
       "version": "1.6.1",
-      "resolved": "http://registry.npmjs.org/brfs/-/brfs-1.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/brfs/-/brfs-1.6.1.tgz",
       "integrity": "sha512-OfZpABRQQf+Xsmju8XE9bDjs+uU4vLREGolP7bDgcpsI17QREyZ4Bl+2KLxxx1kCgA0fAIhKQBaBYh+PEcCqYQ==",
       "requires": {
         "quote-stream": "^1.0.1",
@@ -7593,16 +7593,6 @@
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.0.tgz",
       "integrity": "sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w=="
     },
-    "clipboard": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
-      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
     "cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -8857,11 +8847,6 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-    },
     "denque": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
@@ -9500,7 +9485,7 @@
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha1-tKxAZIEH/c3PriQvQovqihTU8b8=",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -12247,14 +12232,6 @@
         "pinkie-promise": "^2.0.0"
       }
     },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "requires": {
-        "delegate": "^3.1.2"
-      }
-    },
     "got": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
@@ -17875,7 +17852,7 @@
     },
     "magic-string": {
       "version": "0.22.5",
-      "resolved": "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
       "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
       "requires": {
         "vlq": "^0.2.2"
@@ -19832,14 +19809,6 @@
         }
       }
     },
-    "platform-utils": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/platform-utils/-/platform-utils-1.2.0.tgz",
-      "integrity": "sha512-5hLpFipSeIknFRADmoPv3zvOx+JqrM8y3R1+IdhzhekyqWtRZfuv1ABcvCX+WaVq/v7+0NajPE5oj6+K+kPycA==",
-      "requires": {
-        "ua-parser-js": "^0.7.17"
-      }
-    },
     "please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -21359,11 +21328,6 @@
         }
       }
     },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -22854,11 +22818,6 @@
         "setimmediate": "^1.0.4"
       }
     },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-    },
     "title-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz",
@@ -23171,11 +23130,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "ua-parser-js": {
-      "version": "0.7.19",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
-      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
-    },
     "uid-safe": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",

package.json

@@ -31,7 +31,6 @@
     "browser-date-formatter": "^3.0.3",
     "change-case": "^3.1.0",
     "cheerio": "^1.0.0-rc.3",
-    "clipboard": "^2.0.6",
     "compression": "^1.7.4",
     "connect-datadog": "0.0.9",
     "connect-slashes": "^1.4.0",
@@ -73,7 +72,6 @@
     "morgan": "^1.9.1",
     "node-fetch": "^2.6.1",
     "parse5": "^6.0.1",
-    "platform-utils": "^1.2.0",
     "port-used": "^2.0.8",
     "rate-limit-redis": "^2.0.0",
     "react": "^17.0.1",

script/check-deps.js

@@ -43,12 +43,10 @@ const main = async () => {
       'webpack-cli',
       'browser-date-formatter',
       'html-truncate',
-      'platform-utils',
       'search-with-your-keyboard',
       'uuid',
       'imurmurhash',
       'js-cookie',
-      'clipboard',
       'mdast-util-from-markdown',
       'unist-util-visit'
     ]