Move files from src/js to src, convert to TS (#2610)

* Start converting to TS

* More types

* Add TS for jest, change rollup entry

* Add babel TS for jest

* Revert private methods to underscores

* More type fixes

* More type fixes

* Remove js from paths

* Update bind.spec.js

* Update package.json

* Finish converting JS to TS

* Fix unit tests

* Remove test command

* Move start server to watch

* Force custom command for cypress

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
   pull_request: {}
 
 jobs:
-  test-lint:
+  lint:
     name: Linting
     runs-on: ubuntu-latest
 
@@ -18,9 +18,28 @@ jobs:
       - name: Setup pnpm
         uses: wyvox/action-setup-pnpm@v3
 
-      # Install project dependencies
-      - name: Install dependencies and run linting
-        run: pnpm install && pnpm lint:js
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run linting
+        run: pnpm lint:js
+
+  typecheck:
+    name: Type Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: wyvox/action-setup-pnpm@v3
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check types
+        run: pnpm types:check
 
   test-unit:
     name: Run Unit Tests
@@ -68,9 +87,8 @@ jobs:
       - name: Install dependencies and setup Cypress
         uses: cypress-io/github-action@v6
         with:
-          browser: chrome
+          command: pnpm test:cy:ci:chrome
           install: false
-          start: pnpm test:cy:start-server
 
   automerge:
     needs: [test-unit, test-integration]

.jsdoc.js

@@ -9,9 +9,9 @@ module.exports = {
     include: [
       'package.json',
       'README.md',
-      './src/js/shepherd.js',
-      './src/js/step.js',
-      './src/js/tour.js'
+      './src/shepherd.ts',
+      './src/step.ts',
+      './src/tour.ts'
     ]
   },
   plugins: [

.release-it.js

@@ -16,7 +16,7 @@ module.exports = {
   github: {
     release: true,
     tokenRef: 'GITHUB_AUTH',
-    assets: ['dist/**/*.css', 'dist/**/*.js', 'dist/**/*.map']
+    assets: ['dist/**/*.css', 'dist/**/*.js', 'dist/**/*.ts', 'dist/**/*.map']
   },
   npm: {
     publish: true

babel.config.js

@@ -14,7 +14,10 @@ module.exports = function (api) {
         ]
       },
       test: {
-        presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
+        presets: [
+          ['@babel/preset-env', { targets: { node: 'current' } }],
+          ['@babel/preset-typescript', { allowDeclareFields: true }]
+        ],
         plugins: ['transform-es2015-modules-commonjs']
       }
     }

docs-src/tutorials/01-install.md

@@ -52,7 +52,7 @@ You can use jsDelivr to pull down any release from npm. For example, you could i
 with:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/js/shepherd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/shepherd.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/css/shepherd.css"/>
 ```
 

docs-src/tutorials/02-usage.md

@@ -1,7 +1,7 @@
 ### Rollup/Webpack Based Builds
 
 The latest versions of Rollup and Webpack support ES6 imports. We have an ES module
-exported to `dist/js/shepherd.esm.js`. This is also specified as `"module"` in
+exported to `dist/shepherd.esm.js`. This is also specified as `"module"` in
 `package.json`, which should allow you to import using standard ES import syntax.
 
 i.e.

jest.config.js

@@ -7,18 +7,18 @@ module.exports = {
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
   collectCoverageFrom: [
-    'src/js/*.js',
-    'src/js/*.svelte',
-    'src/js/components/**/*.svelte',
-    'src/js/utils/*.js',
-    'src/js/utils/*.svelte'
+    'src/*.ts',
+    'src/*.svelte',
+    'src/components/**/*.svelte',
+    'src/utils/*.ts',
+    'src/utils/*.svelte'
   ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
 
   // An array of file extensions your modules use
-  moduleFileExtensions: ['js', 'svelte'],
+  moduleFileExtensions: ['js', 'ts', 'svelte'],
 
   moduleNameMapper: {
     sinon: '<rootDir>/node_modules/sinon/pkg/sinon.js'

landing/src/layouts/MainPage.astro

@@ -7,7 +7,7 @@ import { SITE_TITLE } from '../consts';
 const { isHome } = Astro.props;
 const shepherdIncludeCode = `
 	<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
-	<script src="shepherd.js/dist/js/shepherd.min.js"></script>
+	<script src="shepherd.js/dist/shepherd.min.js"></script>
 `;
 ---
 

package.json

@@ -22,15 +22,15 @@
     "Chuck Carpenter <chuck@shipshape.io>"
   ],
   "license": "MIT",
-  "main": "dist/js/shepherd.js",
-  "module": "dist/js/shepherd.esm.js",
-  "types": "src/types/shepherd.d.ts",
+  "main": "dist/shepherd.js",
+  "module": "dist/shepherd.esm.js",
   "scripts": {
     "build": "pnpm clean && rollup -c && pnpm postbuild",
     "postbuild": "pnpm build:landing",
     "build:landing": "pnpm -F landing build",
     "clean": "rimraf ./dist",
     "cy:open": "./node_modules/.bin/cypress open",
+    "cy:run:chrome": "cypress run --browser chrome",
     "dev": "pnpm watch",
     "docs": "node_modules/.bin/jsdoc -c .jsdoc.js --verbose",
     "esdoc": "esdoc",
@@ -39,13 +39,14 @@
     "rewrite-paths": "replace 'SF:.*src' 'SF:src' coverage/lcov.info",
     "start": "pnpm watch",
     "start-test-server": "http-server -p 9002",
-    "test": "pnpm lint:js && pnpm test:ci",
     "pretest:ci": "pnpm build",
-    "test:ci": "pnpm build && pnpm test:unit:ci",
-    "test:cy:start-server": "start-server-and-test start-test-server http://127.0.0.1:9002",
-    "test:cy:watch": "pnpm test:cy:start-server && pnpm cy:open",
+    "test": "pnpm lint:js && pnpm test:ci",
+    "test:ci": "pnpm build && pnpm test:unit:ci && test:cy:ci:chrome",
+    "test:cy:ci:chrome": "start-server-and-test start-test-server http://127.0.0.1:9002 cy:run:chrome",
+    "test:cy:watch": "start-server-and-test start-test-server http://127.0.0.1:9002 cy:open",
     "test:unit:ci": "jest --coverage",
     "test:unit:watch": "jest --watch",
+    "types:check": "pnpm tsc",
     "view-coverage": "http-server -p 9003 ./coverage/lcov-report -o",
     "watch": "pnpm clean && rollup -c --environment DEVELOPMENT --watch"
   },
@@ -57,6 +58,7 @@
     "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
     "@babel/core": "^7.23.5",
     "@babel/preset-env": "^7.23.5",
+    "@babel/preset-typescript": "^7.23.3",
     "@release-it-plugins/lerna-changelog": "^6.1.0",
     "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/jest-dom": "^5.17.0",
@@ -123,5 +125,18 @@
   "packageManager": "pnpm@8.15.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
+  },
+  "exports": {
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/*"
+      ]
+    }
   }
 }

rollup.config.js

@@ -3,7 +3,6 @@ import copy from 'rollup-plugin-copy';
 import serve from 'rollup-plugin-serve';
 import livereload from 'rollup-plugin-livereload';
 import commonjs from 'rollup-plugin-commonjs';
-import compiler from '@ampproject/rollup-plugin-closure-compiler';
 import filesize from 'rollup-plugin-filesize';
 import license from 'rollup-plugin-license';
 import postcss from 'rollup-plugin-postcss';
@@ -54,19 +53,19 @@ plugins.push(visualizer());
 const rollupBuilds = [
   // Generate unminified bundle
   {
-    input: './src/js/shepherd.js',
+    input: './src/shepherd.ts',
 
     output: [
       {
         dir: 'dist',
-        entryFileNames: 'js/[name].js',
+        entryFileNames: '[name].js',
         format: 'umd',
         name: 'Shepherd',
         sourcemap: true
       },
       {
         dir: 'dist',
-        entryFileNames: 'js/[name].esm.js',
+        entryFileNames: '[name].esm.js',
         format: 'esm',
         sourcemap: true
       }
@@ -79,18 +78,18 @@ if (!process.env.DEVELOPMENT) {
   rollupBuilds.push(
     // Generate minifed bundle
     {
-      input: './src/js/shepherd.js',
+      input: './src/shepherd.ts',
       output: [
         {
           dir: 'dist',
-          entryFileNames: 'js/[name].min.js',
+          entryFileNames: '[name].min.js',
           format: 'umd',
           name: 'Shepherd',
           sourcemap: true
         },
         {
           dir: 'dist',
-          entryFileNames: 'js/[name].esm.min.js',
+          entryFileNames: '[name].esm.min.js',
           format: 'esm',
           sourcemap: true
         }
@@ -115,14 +114,13 @@ if (!process.env.DEVELOPMENT) {
           plugins: [require('autoprefixer'), require('cssnano')],
           extract: 'css/shepherd.css'
         }),
-        compiler(),
         license({
           banner
         }),
         filesize(),
         visualizer(),
         copy({
-          targets: [{ src: 'dist/js/shepherd.js', dest: 'landing/public' }]
+          targets: [{ src: 'dist/shepherd.js', dest: 'landing/public' }]
         })
       ]
     }

src/js/components/shepherd-content.svelte → src/components/shepherd-content.svelte

@@ -2,7 +2,7 @@
   import ShepherdFooter from './shepherd-footer.svelte';
   import ShepherdHeader from './shepherd-header.svelte';
   import ShepherdText from './shepherd-text.svelte';
-  import { isUndefined } from '../utils/type-check.js';
+  import { isUndefined } from '../utils/type-check';
 
   export let descriptionId, labelId, step;
 </script>

src/js/components/shepherd-element.svelte → src/components/shepherd-element.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, afterUpdate } from 'svelte';
   import ShepherdContent from './shepherd-content.svelte';
-  import { isUndefined, isString } from '../utils/type-check.js';
+  import { isUndefined, isString } from '../utils/type-check';
 
   const KEY_TAB = 9;
   const KEY_ESC = 27;

src/js/components/shepherd-modal.svelte → src/components/shepherd-modal.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { uuid } from '../utils/general.js';
-  import { makeOverlayPath } from '../utils/overlay-path.js';
+  import { uuid } from '../utils/general';
+  import { makeOverlayPath } from '../utils/overlay-path';
 
   export let element, openingProperties;
   const guid = uuid();

src/js/evented.js → src/evented.ts

@@ -1,7 +1,14 @@
+// @ts-nocheck
 import { isUndefined } from './utils/type-check';
 
+type Bindings = {
+  [key: string]: Array<{ handler: Function; ctx?: unknown; once?: boolean }>;
+};
+
 export class Evented {
-  on(event, handler, ctx, once = false) {
+  declare bindings: Bindings;
+
+  on(event: string, handler: Function, ctx?: unknown, once = false) {
     if (isUndefined(this.bindings)) {
       this.bindings = {};
     }
@@ -13,11 +20,11 @@ export class Evented {
     return this;
   }
 
-  once(event, handler, ctx) {
+  once(event: string, handler: Function, ctx?: unknown) {
     return this.on(event, handler, ctx, true);
   }
 
-  off(event, handler) {
+  off(event: string, handler: Function) {
     if (isUndefined(this.bindings) || isUndefined(this.bindings[event])) {
       return this;
     }
@@ -35,7 +42,7 @@ export class Evented {
     return this;
   }
 
-  trigger(event, ...args) {
+  trigger(event: string, ...args: Array<any>) {
     if (!isUndefined(this.bindings) && this.bindings[event]) {
       this.bindings[event].forEach((binding, index) => {
         const { ctx, handler, once } = binding;