Add typescript support 🎉

.github/workflows/push_deploy.yml

@@ -3,7 +3,7 @@ on:
     branches:
       - master
 
-name: 🚀 Build and Publish
+name: 🚀 Build and Publish Lib
 jobs:
   build:
     name: Deploy Library
@@ -20,14 +20,14 @@ jobs:
         uses: actions/cache@v1
         with:
           path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('package.json') }}
+          key: ${{ runner.OS }}-build-${{ hashFiles('yarn.lock') }}
       - name: Install Dependencies
         if: steps.cache-modules.outputs.cache-hit != 'true'
-        run: npm install
+        run: yarn install --pure-lockfile
       - name: Build Library
-        run: npm run-script build
+        run: yarn build
       - name: Build Test
-        run: npm run-script test
+        run: yarn test
       - name: 🚀 Publish (if on master)
         uses: mikeal/merge-release@master
         env:

.github/workflows/push_deploy_demo.yml

@@ -20,12 +20,12 @@ jobs:
         uses: actions/cache@v1
         with:
           path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('package.json') }}
+          key: ${{ runner.OS }}-build-${{ hashFiles('yarn.lock') }}
       - name: Install Dependencies
         if: steps.cache-modules.outputs.cache-hit != 'true'
-        run: npm install
+        run: yarn install --pure-lockfile
       - name: Build Library
-        run: npm run-script build-all
+        run: yarn build-all
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@releases/v3
         with:

package.json

@@ -8,9 +8,10 @@
   ],
   "main": "./public/build/bundle.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run check-types && rollup -c",
     "dev": "rollup -c -w",
     "start": "serve public",
+    "check-types": "svelte-check",
     "test": "echo '(not implemented)'",
     "build-docs": "docpress b && cp -r _docpress dist/docs",
     "build-demo": "rollup -c && cp -r public dist/demos",
@@ -22,16 +23,20 @@
   "homepage": "https://github.com/benwinding/command-pal",
   "repository": "[email protected]:benwinding/command-pal.git",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "11.0.2",
+    "@rollup/plugin-commonjs": "11.x",
     "@rollup/plugin-node-resolve": "^7.0.0",
     "docpress": "^0.8.1",
     "gh-pages": "^2.2.0",
-    "rollup": "2",
+    "rollup": "2.x",
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-svelte": "6.x",
     "rollup-plugin-terser": "^5.1.2",
     "serve": "^11.3.2",
-    "svelte": "^3.55.1"
+    "svelte": "^3.55.1",
+    "svelte-check": "^3.0.3",
+    "svelte-preprocess": "^5.0.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "dependencies": {
     "fuse.js": "^5.2.3",

rollup.config.js

@@ -1,6 +1,7 @@
 import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import sveltePreprocess from 'svelte-preprocess';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 
@@ -18,22 +19,15 @@ export default {
 		svelte({
 			// enable run-time checks when not in production
 			dev: !production,
-			// we'll extract any component CSS out into
-			// a separate file - better for performance
-			// css: css => {
-			// 	css.write('public/build/bundle.css');
-			// }
+			// strip typescript so svelte can compile it
+			preprocess: sveltePreprocess(),
 		}),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		// Set module resolution
 		resolve({
 			browser: true,
 			dedupe: ['svelte']
 		}),
+		// Compile external dependencies too
 		commonjs(),
 
 		// In dev mode, call `npm run start` once

src/App.svelte

@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import Fuse from "fuse.js";
   import PaletteContainer from "./PaletteContainer.svelte";
   import CommandList from "./CommandList.svelte";
   import SearchField from "./SearchField.svelte";
   import MobileButton from "./MobileButton.svelte";
-  import { setContext, onMount, createEventDispatcher } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
   import {
     asyncTimeout,
     setMainShortCut,
@@ -13,12 +13,12 @@
   } from "./shortcuts";
   const dispatch = createEventDispatcher();
 
-  export let hotkey;
+  export let hotkey: string;
   export let inputData = [];
-  export let hotkeysGlobal;
-  export let placeholderText;
-  export let hideButton;
-  export let paletteId;
+  export let hotkeysGlobal: any;
+  export let placeholderText: string;
+  export let hideButton: boolean;;
+  export let paletteId: string;
 
   const optionsFuse = {
     isCaseSensitive: false,
@@ -29,8 +29,7 @@
   let showModal = false;
   let searchField;
   let loadingChildren = false;
-  let currentText = "";
-  let selectedIndex = "";
+  let selectedIndex: any = "";
   let items = inputData;
   let itemsFiltered = inputData;
   let fuse = new Fuse(items, optionsFuse);

src/CommandList.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
-  export let items = [];
+  export let items: any = [];
   export let selectedIndex = 0;
   let selectedIndexLast = 0;
 
-  let listEl;
+  let listEl: HTMLDivElement;
 
-  function clickedIndex(e, hoverIndex) {
+  function clickedIndex(e: any, hoverIndex: number) {
     const isPrimaryButton = e.which === 1;
     if (!isPrimaryButton) {
       return;
@@ -19,7 +19,7 @@
     if (!listEl) {
       return;
     }
-    const listItemEl = listEl.querySelector(".items-list .selected");
+    const listItemEl: HTMLDivElement | null = listEl.querySelector(".items-list .selected");
     if (!listItemEl) {
       return;
     }

src/MobileButton.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
 </script>
@@ -36,10 +36,7 @@
 
 <button class="mobile-button" on:click={e => dispatch('click')} title="Click here to open command palette">
   <svg
-    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns="http://www.w3.org/2000/svg"
-    xmlns:cc="http://creativecommons.org/ns#"
-    xmlns:dc="http://purl.org/dc/elements/1.1/"
     viewBox="0 0 24 24"
     version="1.1">
     <g transform="translate(0 -1028.4)">

src/PaletteContainer.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   export let show = false;
 </script>
 

src/SearchField.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
   import { asyncTimeout } from "./shortcuts";

src/window.d.ts

@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  interface Window {
+    // Reference the CommandPal class globally    
+    CommandPal: any;
+    // debugging to prevent the palette disappearing
+    commandPalIgnoreBlur: () => void;
+  }
+}

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "strict": false,
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "svelte",
+    ],
+    "paths": {
+      "svelte": [
+        "./node_modules/svelte/types/index.d.ts"
+      ]
+    },
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.svelte"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}