Update current JavaScripts to use Typescript (github#19824)

* Update index to make it clear what has hasn't updated to Next/React yet

* Typescriptify events and experiments

* Typescript the old JS for easier integration

* Update release-notes.ts

* Lint

* Run npm i

* Fix a few lint issues

* Update airgap-links.ts

* Update airgap-links.ts

* Update set-next-env to ts

* Update airgap-links.ts

* Update package-lock.json

* Update set-next-env.ts

* Update package-lock.json

* Revert "Update package-lock.json"

This reverts commit b45e8250beeb700719d3b44e1092b0bbd093baba.

* readd fsevents

* Revert "readd fsevents"

This reverts commit 419f3c35080ac4a9072f0b4e8e291e1712ce3639.

* Update openapi-schema-check.yml

* Revert "Update openapi-schema-check.yml"

This reverts commit 5e9f4a29ea11ee343ca17291a40a751920c5b923.

* Update package-lock.json

* Update package-lock.json

Author: heiskr

components/Search.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, ReactNode } from 'react'
 import { useRouter } from 'next/router'
 import debounce from 'lodash/debounce'
 import { useTranslation } from 'components/hooks/useTranslation'
-import { sendEvent } from '../javascripts/events'
+import { sendEvent, EventType } from '../javascripts/events'
 import { useMainContext } from './context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
 
@@ -126,7 +126,7 @@ export function Search({ isStandalone = false, updateSearchParams = true, childr
     // Analytics tracking
     if (xquery) {
       sendEvent({
-        type: 'search',
+        type: EventType.search,
         search_query: xquery,
         // search_context
       })

components/Survey.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react'
 import { ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Link } from 'components/Link'
-import { sendEvent } from '../javascripts/events'
+import { sendEvent, EventType } from '../javascripts/events'
 
 enum ViewState {
   START = 'START',
@@ -137,10 +137,10 @@ function trackEvent(formData: FormData | undefined) {
   if (!formData) return
   // Nota bene: convert empty strings to undefined
   return sendEvent({
-    type: 'survey',
-    survey_token: formData.get('survey-token') || undefined, // Honeypot
+    type: EventType.survey,
+    survey_token: (formData.get('survey-token') as string) || undefined, // Honeypot
     survey_vote: formData.get('survey-vote') === 'Y',
-    survey_comment: formData.get('survey-comment') || undefined,
-    survey_email: formData.get('survey-email') || undefined,
+    survey_comment: (formData.get('survey-comment') as string) || undefined,
+    survey_email: (formData.get('survey-email') as string) || undefined,
   })
 }

javascripts/airgap-links.js

@@ -0,0 +1,17 @@
+export default function airgapLinks() {
+  // @ts-ignore
+  if (window.IS_NEXTJS_PAGE) return
+
+  // When in an airgapped environment,
+  // show a tooltip on external links
+  const exposeEl = document?.getElementById('expose') as HTMLScriptElement
+  const { airgap } = JSON.parse(exposeEl.text)
+  if (!airgap) return
+
+  const externaLinks = Array.from(document.querySelectorAll('a[href^="http"], a[href^="//"]'))
+  externaLinks.forEach((link) => {
+    link.classList.add('tooltipped')
+    link.setAttribute('aria-label', 'This link may not work in this environment.')
+    link.setAttribute('rel', 'noopener')
+  })
+}

javascripts/airgap-links.ts

@@ -0,0 +1,17 @@
+/**
+ * Handles the client-side events for `includes/all-articles.html`.
+ */
+export default function allArticles() {
+  const buttons = document.querySelectorAll('button.js-all-articles-show-more')
+
+  buttons.forEach((btn) =>
+    btn.addEventListener('click', (evt) => {
+      const target = evt.currentTarget as HTMLButtonElement
+      // Show all hidden links
+      const hiddenLinks = target?.parentElement?.querySelectorAll('li.d-none')
+      hiddenLinks?.forEach((link) => link.classList.remove('d-none'))
+      // Remove the button, since we don't need it anymore
+      target?.parentElement?.removeChild(target)
+    })
+  )
+}

javascripts/all-articles.js

@@ -0,0 +1,3 @@
+declare module 'browser-date-formatter' {
+  export default function browserDateFormatter(): void
+}

javascripts/all-articles.ts

@@ -3,12 +3,13 @@ export default () => {
 
   if (!buttons) return
 
-  buttons.forEach(button =>
-    button.addEventListener('click', async evt => {
-      const text = button.dataset.clipboardText
+  buttons.forEach((button) =>
+    button.addEventListener('click', async () => {
+      const text = (button as HTMLElement).dataset.clipboardText
+      if (!text) return
       await navigator.clipboard.writeText(text)
 
-      const beforeTooltip = button.getAttribute('aria-label')
+      const beforeTooltip = button.getAttribute('aria-label') || ''
       button.setAttribute('aria-label', 'Copied!')
 
       setTimeout(() => {

javascripts/browser-date-formatter.d.ts

@@ -1,39 +1,37 @@
 const expandText = 'Expand All'
 const closeText = 'Close All'
 
-export default function devToc () {
+export default function devToc() {
   const expandButton = document.querySelector('.js-expand')
   if (!expandButton) return
 
   const detailsElements = document.querySelectorAll('details')
 
   expandButton.addEventListener('click', () => {
     // on click, toggle all the details elements open or closed
-    const anyDetailsOpen = Array.from(detailsElements).find(details => details.open)
+    const anyDetailsOpen = Array.from(detailsElements).find((details) => details.open)
 
-    for (const detailsElement of detailsElements) {
-      anyDetailsOpen
-        ? detailsElement.removeAttribute('open')
-        : detailsElement.open = true
-    }
+    detailsElements.forEach((detailsElement) => {
+      anyDetailsOpen ? detailsElement.removeAttribute('open') : (detailsElement.open = true)
+    })
 
     // toggle the button text on click
     anyDetailsOpen
-      ? expandButton.textContent = expandText
-      : expandButton.textContent = closeText
+      ? (expandButton.textContent = expandText)
+      : (expandButton.textContent = closeText)
   })
 
   // also toggle the button text on clicking any of the details elements
-  for (const detailsElement of detailsElements) {
+  detailsElements.forEach((detailsElement) => {
     detailsElement.addEventListener('click', () => {
       expandButton.textContent = closeText
 
       // we can only get an accurate count of the open details elements if we wait a fraction after click
       setTimeout(() => {
-        if (!Array.from(detailsElements).find(details => details.open)) {
+        if (!Array.from(detailsElements).find((details) => details.open)) {
           expandButton.textContent = expandText
         }
       }, 50)
     })
-  }
+  })
 }

javascripts/copy-code.js javascripts/copy-code.ts

@@ -0,0 +1,91 @@
+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() || parseUserAgent().os
+
+  // adjust platform names to fit existing mac/windows/linux scheme
+  if (!platform) platform = 'linux'
+  if (platform === 'ios') platform = 'mac'
+
+  const platformsInContent = findPlatformSpecificContent(platform)
+
+  hideSwitcherLinks(platformsInContent)
+
+  showContentForPlatform(platform)
+
+  // configure links for switching platform content
+  switcherLinks().forEach((link) => {
+    link.addEventListener('click', (event) => {
+      event.preventDefault()
+      const target = event.target as HTMLElement
+      showContentForPlatform(target.dataset.platform || '')
+      findPlatformSpecificContent(target.dataset.platform || '')
+    })
+  })
+}
+
+function showContentForPlatform(platform: string) {
+  // (de)activate switcher link appearances
+  switcherLinks().forEach((link) => {
+    link.dataset.platform === platform
+      ? link.classList.add('selected')
+      : link.classList.remove('selected')
+  })
+}
+
+function findPlatformSpecificContent(platform: string) {
+  // find all platform-specific *block* elements and hide or show as appropriate
+  // example: {{ #mac }} block content {{/mac}}
+  const markdowns = Array.from(
+    document.querySelectorAll('.extended-markdown')
+  ) as Array<HTMLElement>
+  markdowns
+    .filter((el) => supportedPlatforms.some((platform) => el.classList.contains(platform)))
+    .forEach((el) => {
+      detectPlatforms(el)
+      el.style.display = el.classList.contains(platform) ? '' : 'none'
+    })
+
+  // find all platform-specific *inline* elements and hide or show as appropriate
+  // example: <span class="platform-mac">inline content</span>
+  const platforms = Array.from(
+    document.querySelectorAll('.platform-mac, .platform-windows, .platform-linux')
+  ) as Array<HTMLElement>
+  platforms.forEach((el) => {
+    detectPlatforms(el)
+    el.style.display = el.classList.contains('platform-' + platform) ? '' : 'none'
+  })
+
+  return Array.from(detectedPlatforms) as Array<string>
+}
+
+// hide links for any platform-specific sections that are not present
+function hideSwitcherLinks(platformsInContent: Array<string>) {
+  const links = Array.from(
+    document.querySelectorAll('a.platform-switcher')
+  ) as Array<HTMLAnchorElement>
+  links.forEach((link) => {
+    if (platformsInContent.includes(link.dataset.platform || '')) return
+    link.style.display = 'none'
+  })
+}
+
+function detectPlatforms(el: HTMLElement) {
+  el.classList.forEach((elClass) => {
+    const value = elClass.replace(/platform-/, '')
+    if (supportedPlatforms.includes(value)) detectedPlatforms.add(value)
+  })
+}
+
+function getDefaultPlatform() {
+  const el = document.querySelector('[data-default-platform]') as HTMLElement
+  if (el) return el.dataset.defaultPlatform
+}
+
+function switcherLinks(): Array<HTMLAnchorElement> {
+  return Array.from(document.querySelectorAll('a.platform-switcher'))
+}