@playpilot/tpi 2.0.4 → 3.0.0-beta.1

package/eslint.config.js

@@ -2,6 +2,9 @@ import prettier from 'eslint-config-prettier'
 import js from '@eslint/js'
 import svelte from 'eslint-plugin-svelte'
 import globals from 'globals'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import ts from 'typescript-eslint'
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -16,12 +19,29 @@ export default [
         ...globals.node,
         PlayPilotLinkInjections: 'writable',
       },
+      parserOptions: {
+        parser: tsParser,
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+    },
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser,
+      },
     },
   },
   {
     ignores: ['build/', '.svelte-kit/', 'dist/'],
   },
   {
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
     rules: {
       semi: ['error', 'never'],
       quotes: ['error', 'single'],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "2.0.4",
+	"version": "3.0.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -18,7 +18,9 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@testing-library/svelte": "^5.2.6",
-		"eslint": "^9.7.0",
+		"@typescript-eslint/eslint-plugin": "^8.32.1",
+		"@typescript-eslint/parser": "^8.32.1",
+		"eslint": "^9.27.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
@@ -30,6 +32,7 @@
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.32.1",
 		"vite": "^5.0.3",
 		"vite-plugin-css-injected-by-js": "^3.5.2",
 		"vitest": "^2.1.8"

package/src/lib/{api.js → api.ts}

@@ -1,31 +1,32 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { apiBaseUrl } from './constants'
 import { stringToHash } from './hash'
+import { getLanguage } from './localization'
 import { getPageMetaData } from './meta'
+import type { LinkInjectionResponse, LinkInjection } from './types/injection'
 import { getFullUrlPath } from './url'
 
-/** @type {NodeJS.Timeout | number | null} */
-let pollTimeout = null
+let pollTimeout: ReturnType<typeof setTimeout> | null = null
 
 /**
  * Fetch link injections for a URL.
- * @param {string} url URL of the given article
- * @param {string} html HTML to be crawled
- * @param {object} options
- * @param {boolean} [options.automation] Enable automation, disable when inserting into editorial
- * @param {string} [options.hash] unique key to identify the HTML
- * @param {object} [options.params] Any rest params to include in the request body
- * @returns {Promise<LinkInjectionResponse>}
+ * @param url URL of the given article
+ * @param html HTML to be crawled
+ * @param options
+ * @param [options.automation] Enable automation, disable when inserting into editorial
+ * @param [options.hash] unique key to identify the HTML
+ * @param [options.params] Any rest params to include in the request body
  */
-export async function fetchLinkInjections(url, html, { hash = stringToHash(html), params = {} } = {}) {
+export async function fetchLinkInjections(url: string, html: string, { hash = stringToHash(html), params = {} }: { automation?: boolean; hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
+  const language = getLanguage()
   const metadata = getPageMetaData()
 
   if (!apiToken) throw new Error('No token was provided')
 
-  const response = await fetch(apiBaseUrl + `/external-pages/?api-token=${apiToken}&include_title_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}`, {
+  const response = await fetch(apiBaseUrl + `/external-pages/?api-token=${apiToken}&include_title_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`, {
     headers,
     method: 'POST',
     body: JSON.stringify(({
@@ -47,11 +48,10 @@ export async function fetchLinkInjections(url, html, { hash = stringToHash(html)
 /**
  * Link injections take a while to be ready. During this time we poll the endpoint until it returns the result we want.
  * The results return `injections_ready=false` while the injections are not yet ready.
- * @param {string} url URL of the given article
- * @param {string} html HTML to be crawled
- * @returns {Promise<LinkInjectionResponse>}
+ * @param url URL of the given article
+ * @param html HTML to be crawled
  */
-export async function pollLinkInjections(url, html, { requireCompletedResult = false, pollInterval = 3000, maxTries = 600 } = {}) {
+export async function pollLinkInjections(url: string, html: string, { requireCompletedResult = false, pollInterval = 3000, maxTries = 600 } = {}): Promise<LinkInjectionResponse> {
   let hash = stringToHash(html)
   let currentTry = 0
 
@@ -61,11 +61,10 @@ export async function pollLinkInjections(url, html, { requireCompletedResult = f
 
   /**
    * Polls the endpoint recursively until it is ready.
-   * @param {Function} resolve Injections are ready and returned as expected
-   * @param {Function} reject Injections are not yet ready
-   * @returns {Promise<void>}
+   * @param resolve Injections are ready and returned as expected
+   * @param reject Injections are not yet ready
    */
-  const poll = async (resolve, reject) => {
+  const poll = async (resolve: Function, reject: Function): Promise<void> => {
     try {
       const response = await fetchLinkInjections(url, html, { hash })
 
@@ -92,19 +91,13 @@ export async function pollLinkInjections(url, html, { requireCompletedResult = f
   return new Promise(poll)
 }
 
-/**
- * @param {LinkInjection[]} linkInjections
- * @param {string} html HTML to be crawled
- * @returns {Promise<LinkInjection[]>}
- */
-export async function saveLinkInjections(linkInjections, html) {
-  // @ts-ignore
+export async function saveLinkInjections(linkInjections: LinkInjection[], html: string): Promise<LinkInjection[]> {
   const selector = window.PlayPilotLinkInjections?.selector
 
   // Only save manual injections, AI injections should be left intact.
-  const filteredLinkInjections = linkInjections.filter(i => i.manual)
+  const filteredLinkInjections = linkInjections.filter((i: LinkInjection) => i.manual)
 
-  const newLinkInjections = filteredLinkInjections.map((/** @type {any} */linkInjection) => ({
+  const newLinkInjections = filteredLinkInjections.map((linkInjection: LinkInjection) => ({
     sid: linkInjection.sid,
     title: linkInjection.title,
     sentence: linkInjection.sentence,
@@ -113,7 +106,7 @@ export async function saveLinkInjections(linkInjections, html) {
     after_article_style: linkInjection.after_article_style || null,
     in_text: linkInjection.in_text ?? true,
     inactive: !!linkInjection.inactive,
-    removed: !!linkInjection.removed,
+    removed: !!linkInjection.removed
   }))
 
   const response = await fetchLinkInjections(getFullUrlPath(), html, {
@@ -133,26 +126,23 @@ export async function saveLinkInjections(linkInjections, html) {
 /**
  * Insert random keys into link injections. These are used to identify the links on the page.
  * We can't just use SIDs, as a page might include multiple links of the same title
- * @param {LinkInjection[]} linkInjections
- * @returns {LinkInjection[]}
  */
-function insertRandomKeys(linkInjections) {
-  return linkInjections.map(linkInjection => ({
+function insertRandomKeys(linkInjections: LinkInjection[]): LinkInjection[] {
+  return linkInjections.map((linkInjection: LinkInjection) => ({
     ...linkInjection,
-    key: generateInjectionKey(linkInjection.sid),
-  }))
+    key: generateInjectionKey(linkInjection.sid)
+  }));
 }
 
 /**
  * Generate a key for a linkInjection. This is used to match an injection to it's element on the page.
- * @param {string} sid Sid of the title linked to the injection
- * @returns {string} Random string preprending with title sid.
+ * @param sid Sid of the title linked to the injection
+ * @returns Random string preprending with title sid.
  */
-export function generateInjectionKey(sid) {
+export function generateInjectionKey(sid: string): string {
   return sid + '-' + (Math.random() + 1).toString(36).substring(7)
 }
 
 export function getApiToken() {
-  // @ts-ignore
   return window.PlayPilotLinkInjections?.token
 }

package/src/lib/{array.js → array.ts}

@@ -1,10 +1,8 @@
 
 /**
  * Returns the largest number in an array of numbers. Returns 0 if the array has no entries.
- * @param {number[]} array
- * @return {number}
  */
-export function getLargestValueInArray(array) {
+export function getLargestValueInArray(array: number[]): number {
   let largest = 0
 
   for (let i = 0; i < array.length; i++) {

package/src/lib/{auth.js → auth.ts}

@@ -6,10 +6,10 @@ const urlParam = 'articleReplacementEditToken'
 
 /**
  * Authorize the user
- * @param {string} href The current window.location.href
- * @returns {Promise<boolean>} Whether the user is authorized or not
+ * @param href The current window.location.href
+ * @returns Whether the user is authorized or not
  */
-export async function authorize(href = window.location.href) {
+export async function authorize(href: string = window.location.href): Promise<boolean> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   try {
@@ -41,10 +41,10 @@ export async function authorize(href = window.location.href) {
 
 /**
  * Get the auth token from the URL, a stored cookie, or from the window object
- * @param {string} [href] URL that the param is extracted from
- * @returns {string} Auth token
+ * @param [href] URL that the param is extracted from
+ * @returns Auth token
  */
-export function getAuthToken(href = '') {
+export function getAuthToken(href: string = ''): string {
   // @ts-ignore
   const configToken = window?.PlayPilotLinkInjections?.editorial_token
   if (configToken) return configToken
@@ -62,7 +62,7 @@ export function getAuthToken(href = '') {
  * Set auth cookie equal to given value
  * @param {string} value The auth token value
  */
-function setAuthCookie(value) {
+function setAuthCookie(value: string) {
   const time = new Date()
   const days = 30
 
@@ -75,10 +75,8 @@ function setAuthCookie(value) {
 /**
  * Returns whether or not the user has requested editorial mode to be enabled.
  * This won't enable editorial mode by itself, as that also requires authentication.
- * @returns {boolean}
  */
-export function isEditorialModeEnabled() {
-  // @ts-ignore
+export function isEditorialModeEnabled(): boolean {
   const windowToken = window?.PlayPilotLinkInjections?.editorial_token
   return new URLSearchParams(window.location.search).get('playpilot-editorial-mode') === 'true' || !!windowToken
 }

package/src/lib/{fakeData.js → fakeData.ts}

@@ -1,5 +1,8 @@
-/** @type {Participant[]} */
-export const participants = [
+import type { LinkInjection } from "./types/injection"
+import type { Participant } from "./types/participant"
+import type { TitleData } from "./types/title"
+
+export const participants: Participant[] = [
   {
     sid: 'pr5C5W',
     name: 'James Franco',
@@ -68,8 +71,7 @@ export const participants = [
   },
 ]
 
-/** @type {TitleData} */
-export const title = {
+export const title: TitleData = {
   sid: 'tig9r9F',
   slug: 'dune-prophecy-2024-series',
   poster_uuid: '61feb4b0a58f11efb0b50a58a9feac02',
@@ -107,8 +109,7 @@ export const title = {
   participants,
 }
 
-/** @type {LinkInjection[]} */
-export const linkInjections = [{
+export const linkInjections: LinkInjection[] = [{
   sid: '1',
   title: 'Quan',
   sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',

package/src/lib/{hash.js → hash.ts}

@@ -1,9 +1,8 @@
 /**
  * Turns any string into a very short hash. This is super basic and not super reliable, but it's good enough for our purpose.
- * @param {string} string
- * @returns {string}
+ * @param string
  */
-export function stringToHash(string) {
+export function stringToHash(string: string): string {
   let hash = 0
 
   for (let i = 0; i < string.length; i++) {

package/src/lib/{html.js → html.ts}

@@ -1,8 +1,7 @@
 /**
  * Returns a string with decoded html characters. For instance & -> &
- * @param {string} string
  */
-export function encodeHtmlEntities(string) {
+export function encodeHtmlEntities(string: string): string {
   const tempElement = document.createElement('div')
   tempElement.textContent = string
 
@@ -11,9 +10,8 @@ export function encodeHtmlEntities(string) {
 
 /**
  * Returns a string with encoded html characters. For instance & -> &
- * @param {string} string
  */
-export function decodeHtmlEntities(string) {
+export function decodeHtmlEntities(string: string): string {
   const tempElement = document.createElement('div')
   tempElement.innerHTML = string
 

package/src/lib/{linkInjection.js → linkInjection.ts}

@@ -3,28 +3,28 @@ import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
 import { getLargestValueInArray } from './array'
+import { decodeHtmlEntities } from './html'
+import type { LinkInjection, LinkInjectionTypes, LinkInjectionRanges } from './types/injection'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
 
-/** @type {Record<string, { injection: LinkInjection, component: object }>} */
-const activePopovers = {}
-/** @type {object | null} */
-let afterArticlePlaylinkInsertedComponent = null
+const activePopovers: Record<string, { injection: LinkInjection; component: object }> = {}
+
+let afterArticlePlaylinkInsertedComponent: object | null = null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
  * This excludes duplicates, empty elements, links, buttons, and header tags.
- * @param {HTMLElement} parentElement
- * @returns {HTMLElement[]} A list of all HTMLElements that contain text, without repeating the same text in
+ * @returns A list of all HTMLElements that contain text, without repeating the same text in
  */
-export function getLinkInjectionElements(parentElement) {
+export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElement[] {
   let validElements = []
 
   let remainingChildren = [parentElement]
 
   while (remainingChildren.length > 0) {
-    const element = /** @type {HTMLElement} */ (remainingChildren.pop())
+    const element = remainingChildren.pop() as HTMLElement
 
     // Ignore links, buttons, and headers
     if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|H[1-6])$/.test(element.tagName)) continue
@@ -41,9 +41,9 @@ export function getLinkInjectionElements(parentElement) {
       continue
     }
 
-    const children = /** @type {HTMLElement[]} */ (Array.from(element.children))
+    const children = Array.from(element.children) as HTMLElement[]
     for (let i = children.length - 1; i >= 0; i--) {
-      remainingChildren.push(children[i])
+      remainingChildren.push(children[i] as HTMLElement)
     }
   }
 
@@ -54,9 +54,8 @@ export function getLinkInjectionElements(parentElement) {
    * Get the parent selector that will be used to find the link injections in.
    * This selector is passed when the script is initialized.
    * If no selector is passed a default is returned instead.
-   * @returns {HTMLElement}
    */
-export function getLinkInjectionsParentElement() {
+export function getLinkInjectionsParentElement(): HTMLElement {
   // @ts-ignore
   const selector = window.PlayPilotLinkInjections?.selector
 
@@ -65,7 +64,7 @@ export function getLinkInjectionsParentElement() {
     const escaped = selector.replace(/(:)/g, '\\$1')
     const element = document.querySelector(escaped)
 
-    if (element) return element
+    if (element) return element as HTMLElement
   }
 
   return document.querySelector('article') || document.querySelector('main') || document.body
@@ -73,12 +72,9 @@ export function getLinkInjectionsParentElement() {
 
 /**
  * Replace all found injections within all given elements on the page
- * @param {HTMLElement[]} elements
- * @param {(LinkInjection: LinkInjection) => void} onclick
- * @param {LinkInjectionTypes} injections
- * @returns {LinkInjection[]} Returns an array of injections with injections that failed to be inserted marked as `failed`.
+ * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.
  */
-export function injectLinksInDocument(elements, onclick, injections = { aiInjections: [], manualInjections: [] }) {
+export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInjection: LinkInjection) => void, injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
   const mergedInjections = mergeInjectionTypes(injections)
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
@@ -90,8 +86,7 @@ export function injectLinksInDocument(elements, onclick, injections = { aiInject
     return cleanPhrase(fullText).includes(cleanPhrase(i.sentence))
   })
 
-  /** @type {LinkInjectionRanges} */
-  const ranges = {}
+  const ranges: LinkInjectionRanges = {}
 
   for (const injection of foundInjections) {
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
@@ -157,10 +152,9 @@ export function injectLinksInDocument(elements, onclick, injections = { aiInject
  * Add all used CSS variables to a data attribute. This data attribute is then used for selectors that for each
  * individual CSS variable. This is done this way so that CSS variables are only set when they are used.
  * Using the variables straight up or with a fallback value would not allow them to use their default page styling.
- * @returns {void}
  */
-function addCSSVariablesToLinks() {
-  const createdLinkElements = /** @type {HTMLElement[]} */ (Array.from(document.querySelectorAll(`${keySelector} a`)))
+function addCSSVariablesToLinks(): void {
+  const createdLinkElements = Array.from(document.querySelectorAll(`${keySelector} a`)) as HTMLElement[]
 
   const variables = [
     '--playpilot-injection-text-color',
@@ -183,14 +177,11 @@ function addCSSVariablesToLinks() {
 
 /**
  * Add event listeners to all injected links. These events are for both the popover and the modal.
- * @param {LinkInjection[]} injections
- * @param {function} onclick
- * @returns {void}
  */
-function addLinkInjectionEventListeners(injections, onclick) {
+function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (injection: LinkInjection) => void): void {
   // Open modal on click
   window.addEventListener('click', (event) => {
-    const target = /** @type {HTMLElement | null} */ (event.target)
+    const target = event.target as HTMLElement | null
     if (!target?.parentElement) return
 
     const key = target.parentElement.getAttribute(keyDataAttribute)
@@ -202,11 +193,10 @@ function addLinkInjectionEventListeners(injections, onclick) {
     openLinkModal(event, injection, onclick)
   })
 
-  const createdInjectionElements = document.querySelectorAll(keySelector)
+  const createdInjectionElements = Array.from(document.querySelectorAll(keySelector)) as HTMLElement[]
 
   // Open and close popover on mouseenter/mouseleave
   createdInjectionElements.forEach((injectionElement) => {
-    // @ts-ignore
     const key = injectionElement.dataset.playpilotInjectionKey
     const injection = injections.find(injection => key === injection.key)
 
@@ -221,12 +211,8 @@ function addLinkInjectionEventListeners(injections, onclick) {
 /**
  * Prevent default click and run onclick from parent. Ignore clicks that used modifier keys or that were not left click.
  * The event is not fired when the click happens from inside a popover.
- * @param {MouseEvent} event
- * @param {LinkInjection} injection
- * @param {function} onclick
- * @returns {void}
  */
-function openLinkModal(event, injection, onclick) {
+function openLinkModal(event: MouseEvent, injection: LinkInjection, onclick: (injection: LinkInjection) => void): void {
   if (event.ctrlKey || event.metaKey || event.button !== 0) return
 
   event.preventDefault()
@@ -238,28 +224,24 @@ function openLinkModal(event, injection, onclick) {
 /**
  * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
  * and removed when clicked or on mouseleave.
- * @param {MouseEvent} event
- * @param {LinkInjection} injection
  */
-function openLinkPopover(event, injection) {
+function openLinkPopover(event: MouseEvent, injection: LinkInjection) {
   // Popover for this link was already open and was called again... for some reason
   if (activePopovers[injection.key]) return
 
   // Skip touch devices
   if (window.matchMedia('(pointer: coarse)').matches) return
 
-  const target = /** @type {Element} */ (event.currentTarget)
-  const popover = mount(TitlePopover, { target, props: { title: injection.title_details } })
+  const target = event.currentTarget as Element
+  const popover = mount(TitlePopover, { target, props: { title: injection.title_details! } })
 
   activePopovers[injection.key] = { injection, component: popover }
 }
 
 /**
  * Unmount the popover, removing it from the dom
- * @param {LinkInjection} injection
- * @param {boolean} outro
  */
-function destroyLinkPopover(injection, outro = true) {
+function destroyLinkPopover(injection: LinkInjection, outro: boolean = true) {
   const popover = activePopovers[injection.key]
 
   if (!popover) return
@@ -270,11 +252,8 @@ function destroyLinkPopover(injection, outro = true) {
 
 /**
  * Insert AfterArticlePlaylinks after the last valid element.
- * @param {HTMLElement[]} elements
- * @param {LinkInjection[]} injections
- * @param {(linkInjection: LinkInjection) => void} onclickmodal
  */
-export function insertAfterArticlePlaylinks(elements, injections, onclickmodal) {
+export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[], onclickmodal: (linkInjection: LinkInjection) => void) {
   if (!injections.length) return
 
   const target = document.createElement('div')
@@ -284,7 +263,7 @@ export function insertAfterArticlePlaylinks(elements, injections, onclickmodal)
   afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal } })
 }
 
-function clearAfterArticlePlaylinks() {
+function clearAfterArticlePlaylinks(): void {
   if (!afterArticlePlaylinkInsertedComponent) return
 
   unmount(afterArticlePlaylinkInsertedComponent)
@@ -295,11 +274,11 @@ function clearAfterArticlePlaylinks() {
 /**
  * Clear link injections from the page
  */
-export function clearLinkInjections() {
+export function clearLinkInjections(): void {
   Object.values(activePopovers).forEach(popover => destroyLinkPopover(popover.injection))
 
   const elements = document.querySelectorAll(keySelector)
-  elements.forEach((element /** @type {HTMLAnchorElement} */) => element.outerHTML = element.textContent || '')
+  elements.forEach((element) => element.outerHTML = element.textContent || '')
 
   Object.values(activePopovers).forEach(({ injection }) => destroyLinkPopover(injection, false))
 
@@ -308,22 +287,18 @@ export function clearLinkInjections() {
 
 /**
  * Clear specific link injection from the page
- * @param {string} key Given of the injection to be removed from the page
+ * @param key Given of the injection to be removed from the page
  */
-export function clearLinkInjection(key) {
-  /** @type {HTMLAnchorElement | null} */
-  const element = document.querySelector(`[${keyDataAttribute}="${key}"]`)
+export function clearLinkInjection(key: string): void {
+  const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (element) element.outerHTML = element.textContent || ''
 }
 
 /**
  * Sort injections by where they were inserted. First by their element index, second by where in the element the
  * injection was injected. Injections without range (after article injections or failed injection) go last.
- * @param {LinkInjection[]} injections
- * @param {LinkInjectionRanges} ranges
- * @returns {LinkInjection[]}
  */
-export function sortLinkInjectionsByRange(injections, ranges) {
+export function sortLinkInjectionsByRange(injections: LinkInjection[], ranges: LinkInjectionRanges): LinkInjection[] {
   return injections.sort((a, b) => {
     const rangeA = ranges[a.key]
     const rangeB = ranges[b.key]
@@ -342,19 +317,15 @@ export function sortLinkInjectionsByRange(injections, ranges) {
 
 /**
  * Merge different injection types
- * @param {LinkInjectionTypes} injections
- * @returns {LinkInjection[]}
  */
-export function mergeInjectionTypes({ aiInjections, manualInjections }) {
+export function mergeInjectionTypes({ aiInjections, manualInjections }: LinkInjectionTypes): LinkInjection[] {
   return [...aiInjections, ...manualInjections.map(i => ({ ...i, manual: true }))]
 }
 
 /**
  * Separate an array of flat injections into ai and manual arrays.
- * @param {LinkInjection[]} injections
- * @returns {LinkInjectionTypes}
  */
-export function separateLinkInjectionTypes(injections) {
+export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInjectionTypes {
   return {
     aiInjections: injections.filter(i => !i.manual),
     manualInjections: injections.filter(i => i.manual),
@@ -363,37 +334,29 @@ export function separateLinkInjectionTypes(injections) {
 
 /**
  * Returns whether or not an injection would be valid for any sort of injection, text or after_article
- * @param {LinkInjection} injection
- * @returns {boolean}
  */
-export function isValidInjection(injection) {
+export function isValidInjection(injection: LinkInjection): boolean {
   return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details
 }
 
 /**
  * Filter links for in-text injections, removing after article, inactive, removed, duplicate, and items without title_details
- * @param {LinkInjection[]} injections
- * @returns {LinkInjection[]}
  */
-export function filterInvalidInTextInjections(injections) {
+export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
   return filterRemovedInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
 }
 
 /**
  * Filter links for after article injections, removing in-text only, inactive, removed, duplicate, and items without title_details
- * @param {LinkInjection[]} injections
- * @returns {LinkInjection[]}
  */
-export function filterInvalidAfterArticleInjections(injections) {
+export function filterInvalidAfterArticleInjections(injections: LinkInjection[]): LinkInjection[] {
   return filterRemovedInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
 }
 
 /**
  * Filter injections that were marked as removed or have an equivalent removed manual injections, soley based on the same sentence and title.
- * @param {LinkInjection[]} injections
- * @returns {LinkInjection[]}
  */
-export function filterRemovedInjections(injections) {
+export function filterRemovedInjections(injections: LinkInjection[]): LinkInjection[] {
   return injections.filter(injection => {
     if (injection.removed) return false
     if (injection.manual && !injection.removed) return true
@@ -403,12 +366,8 @@ export function filterRemovedInjections(injections) {
 
 /**
  * Return whether or not an injection is also available as manual injection
- * @param {LinkInjection} injection
- * @param {number} injectionIndex
- * @param {LinkInjection[]} injections
- * @returns {boolean}
  */
-export function isAvailableAsManualInjection(injection, injectionIndex, injections) {
+export function isAvailableAsManualInjection(injection: LinkInjection, injectionIndex: number, injections: LinkInjection[]): boolean {
   return injections.some((i, index) => {
     return injectionIndex !== index && i.manual && isEquivalentInjection(i, injection)
   })
@@ -416,10 +375,7 @@ export function isAvailableAsManualInjection(injection, injectionIndex, injectio
 
 /**
  * Returns whether or not 2 injections match in title and sentence
- * @param {LinkInjection} injection1
- * @param {LinkInjection} injection2
- * @returns {boolean}
  */
-export function isEquivalentInjection(injection1, injection2) {
+export function isEquivalentInjection(injection1: LinkInjection, injection2: LinkInjection): boolean {
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }