partial typescript migration

.eslintrc.yml

@@ -1,21 +1,29 @@
+root: true
 env:
   browser: true
   es2020: true
   node: true
-extends:
-  - eslint:recommended
+parser: '@typescript-eslint/parser'
 parserOptions:
   sourceType: module
   ecmaVersion: 2020
-plugins: [svelte3]
+plugins: [svelte3, '@typescript-eslint']
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
 overrides:
   - files: ['*.svelte']
     processor: svelte3/svelte3
+settings:
+  svelte3/typescript: true
 rules:
   indent: [error, 2, SwitchCase: 1]
   quotes: [error, backtick, avoidEscape: true]
   semi: [error, never]
   linebreak-style: [error, unix]
   no-console: [error, allow: [warn, error]]
   no-var: error
-  spaced-comment: [error, always]
+  # allow triple slash for typescript file referencing https://git.io/JCeqO
+  spaced-comment: [error, always, { markers: [/] }]
+globals:
+  $$props: false # declare the Svelte $$props object as a non-writable global variable

package.json

@@ -33,6 +33,8 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.13",
     "@sveltejs/kit": "^1.0.0-next.118",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
     "ava": "^3.15.0",
     "dotenv": "^10.0.0",
     "eslint": "^7.29.0",
@@ -44,10 +46,14 @@
     "rehype-autolink-headings": "^5.1.0",
     "rehype-slug": "^4.0.1",
     "svelte": "^3.38.3",
+    "svelte-check": "^2.2.2",
+    "svelte-preprocess": "^4.7.4",
     "svelte-toc": "^0.1.5",
+    "svelte2tsx": "^0.4.1",
+    "typescript": "^4.3.5",
     "vite": "^2.3.8"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

src/hooks.ts

@@ -0,0 +1,15 @@
+// https://kit.svelte.dev/docs#hooks-getsession
+export function getSession(): Record<string, string> {
+  const keys = [`ALGOLIA_APP_ID`, `ALGOLIA_SEARCH_KEY`]
+
+  for (const key of keys) {
+    if (!process.env[key]) {
+      // eslint-disable-next-line no-console
+      console.error(`missing secret key: ${key}`)
+    }
+  }
+
+  const session = Object.fromEntries(keys.map((key) => [key, process.env[key] as string]))
+
+  return session
+}

src/lib/Search.svelte

@@ -1,13 +1,19 @@
-<script>
-  import { onMount, createEventDispatcher } from 'svelte'
+<script lang="ts">
+  import { onMount, createEventDispatcher, SvelteComponent } from 'svelte'
+  import algoliasearch, { SearchClient } from 'algoliasearch/lite'
 
   import SearchIcon from './SearchIcon.svelte'
   import { onClickOutside } from './actions'
+  import type { Hit } from '@algolia/client-search'
 
-  export let appId, searchKey, indices
+  type SearchHit = Hit<Record<string, unknown>>
+
+  export let appId: string
+  export let searchKey: string
+  export let indices: Record<string, typeof SvelteComponent>
   export let loadingStr = `Searching...`
-  export let noResultMsg = (query) => `No results for '${query}'`
-  export let resultCounter = (hits) =>
+  export let noResultMsg = (query: string): string => `No results for '${query}'`
+  export let resultCounter = (hits: SearchHit[]): string =>
     hits.length > 0 ? `<span>Results: ${hits.length}<span>` : ``
   export let placeholder = `Search`
   export let ariaLabel = `Search`
@@ -19,12 +25,15 @@
     if (!val) console.error(`Invalid ${key}: ${val}`)
   }
 
-  let client, input, query, promise
+  let client: SearchClient
+  let input: HTMLInputElement
+  let query = ``
+  let promise: Promise<{ index: string | undefined; hits: SearchHit[] }[]>
 
-  onMount(() => (client = window.algoliasearch(appId, searchKey)))
+  onMount(() => (client = algoliasearch(appId, searchKey)))
 
-  const processHits = (hits) =>
-    hits.map((hit) => {
+  function processHits(hits: SearchHit[]) {
+    return hits.map((hit) => {
       for (const [key, val] of Object.entries(hit)) {
         if (key.endsWith(`Orig`)) continue
         const processedVal =
@@ -36,25 +45,20 @@
       }
       return hit
     })
+  }
 
   async function search() {
-    const { results } = await client.multipleQueries(
+    const { results } = await client.search(
       Object.keys(indices).map((indexName) => ({ indexName, query }))
     )
 
     return results.map(({ hits, index }) => ({ hits: processHits(hits), index }))
   }
-
-  const src = `https://cdn.jsdelivr.net/npm/algoliasearch@latest/dist/algoliasearch-lite.umd.js`
 </script>
 
-<svelte:head>
-  <script async defer {src}></script>
-</svelte:head>
-
 <aside use:onClickOutside={() => (hasFocus = false)} class="svelte-algolia">
   <input
-    type="text"
+    type=":stringtext"
     bind:this={input}
     bind:value={query}
     on:keyup={() => (promise = search())}
@@ -69,7 +73,7 @@
     }}
     title={ariaLabel}>
     <SearchIcon
-      alt="Search Icon"
+      ariaLabel="Search Icon"
       height="{hasFocus ? 1.9 : 2.3}ex"
       style="cursor: pointer;" />
   </button>

src/lib/actions.ts

@@ -0,0 +1,21 @@
+export function onClickOutside(
+  node: HTMLElement,
+  cb?: () => void
+): { destroy(): void } {
+  const dispatchOnClickOutside = (event: Event) => {
+    const clickWasOutside = node && !node.contains(event.target as Node)
+
+    if (clickWasOutside && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent(`clickOutside`))
+      if (cb) cb()
+    }
+  }
+
+  document.addEventListener(`click`, dispatchOnClickOutside)
+
+  return {
+    destroy() {
+      document.removeEventListener(`click`, dispatchOnClickOutside)
+    },
+  }
+}

src/routes/index.svx

@@ -4,7 +4,7 @@
   import Example from '../components/Example.svelte'
   import GitHubCorner from '../components/GitHubCorner.svelte'
 
-  import LensIcon from '../lib/SearchIcon.svelte'
+  import SearchIcon from '../lib/SearchIcon.svelte'
   import Docs from '../docs.svx'
 </script>
 
@@ -24,7 +24,7 @@ Utility for server-side Algolia index updates plus a client-side search componen
 
 ## Live Demo
 
-This is what Svelte-Algolia integrated into a nav bar might look like. Click the <LensIcon />  icon to try it out!
+This is what Svelte-Algolia integrated into a nav bar might look like. Click the <SearchIcon />  icon to try it out!
 
 <Example />
 

svelte.config.js

@@ -1,9 +1,11 @@
 import 'dotenv/config'
-import adapter from '@sveltejs/adapter-static'
-import { mdsvex } from 'mdsvex'
 import { indexAlgolia } from './src/lib/main.js'
 import fs from 'fs'
 
+import adapter from '@sveltejs/adapter-static'
+import { mdsvex } from 'mdsvex'
+import preprocess from "svelte-preprocess"
+
 import headingSlugs from 'rehype-slug'
 import linkHeadings from 'rehype-autolink-headings'
 import { s } from 'hastscript'
@@ -61,7 +63,7 @@ if (process.env.NODE_ENV === `production`) {
 
 export default {
   extensions: [`.svelte`, `.svx`],
-  preprocess: mdsvex({ rehypePlugins }),
+  preprocess: [preprocess(), mdsvex({ rehypePlugins })],
   kit: {
     adapter: adapter(),
 

tsconfig.json

@@ -0,0 +1,19 @@
+// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "es2020",
+    "target": "es2020",
+    "moduleResolution": "node", // needed for import { ... } from 'svelte' in TS files
+
+    // Svelte Preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+    // to enforce using `import type` instead of `import` for Types.
+    "importsNotUsedAsValues": "error",
+
+    // To have warnings/errors of the Svelte compiler at the correct position,
+    // enable source maps by default.
+    "sourceMap": true,
+
+    "forceConsistentCasingInFileNames": true
+  }
+}