Progress TypeScript migration

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/env", ["@babel/typescript", { "jsxPragma": "h" }]],
+  "plugins": [["@babel/transform-react-jsx", { "pragma": "h" }]]
+}

.github/workflows/test.yml

@@ -27,6 +27,7 @@ jobs:
 
       - run: yarn install
       - run: yarn prettier
+      - run: yarn check:types
 
   tests:
     runs-on: ubuntu-latest

jest.config.js

@@ -175,6 +175,7 @@ module.exports = {
   // A map from regular expressions to paths to transformers
   transform: {
     '.js$': './jest/esm-transformer.js',
+    '\\.tsx?$': 'ts-jest',
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation

package.json

@@ -11,16 +11,24 @@
     "build:data": "yarn workspace @emoji-mart/data build",
     "build:react": "yarn workspace @emoji-mart/react build",
     "build:website": "yarn workspace @emoji-mart/website build",
+    "check:types": "tsc",
     "prettier": "prettier --check .",
     "prettier:fix": "prettier --write .",
-    "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
+    "test": "jest"
   },
   "devDependencies": {
     "@babel/core": "7.18.9",
     "@babel/plugin-transform-modules-commonjs": "7.18.6",
-    "jest": "28.0.0",
+    "@parcel/packager-ts": "2.7.0",
+    "@parcel/transformer-inline-string": "2.7.0",
+    "@parcel/transformer-sass": "2.7.0",
+    "@parcel/transformer-typescript-types": "2.7.0",
     "jest-environment-jsdom": "28.0.0",
-    "prettier": "2.5.1"
+    "jest": "^28.1.3",
+    "parcel": "2.7.0",
+    "prettier": "2.5.1",
+    "ts-jest": "^28.0.7",
+    "typescript": "4.6.4"
   },
   "prettier": {
     "semi": false,

packages/emoji-mart/package.json

@@ -9,7 +9,8 @@
     "url": "/~https://github.com/missive/emoji-mart",
     "directory": "packages/emoji-mart"
   },
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "main": "dist/main.js",
   "module": "dist/module.js",
   "global": "dist/browser.js",
@@ -38,10 +39,6 @@
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
-    "@parcel/transformer-inline-string": "2.3.2",
-    "@parcel/transformer-sass": "2.3.2",
-    "autoprefixer": "10.4.4",
-    "parcel": "2.3.2",
     "preact": "10.6.4"
   },
   "alias": {

packages/emoji-mart/src/browser.js

@@ -1,2 +1,2 @@
-import * as EmojiMart from './index.js'
+import * as EmojiMart from './index'
 window.EmojiMart = EmojiMart

packages/emoji-mart/src/components/Emoji/EmojiElement.js → packages/emoji-mart/src/components/Emoji/EmojiElement.jsx

@@ -2,7 +2,6 @@ import { render } from 'preact'
 
 import { init, getProps } from '../../config'
 import { HTMLElement } from '../HTMLElement'
-import { Emoji } from '.'
 import EmojiProps from './EmojiProps'
 
 export default class EmojiElement extends HTMLElement {
@@ -20,6 +19,8 @@ export default class EmojiElement extends HTMLElement {
     }
 
     await init()
+    if (this.disconnected) return
+
     render(<Emoji {...props} />, this)
   }
 }

packages/emoji-mart/src/components/Emoji/index.ts

@@ -0,0 +1,2 @@
+export { default as Emoji } from './Emoji'
+export { default as EmojiElement } from './EmojiElement'

packages/emoji-mart/src/components/HOCs/index.js → packages/emoji-mart/src/components/HOCs/index.ts

@@ -1 +1 @@
-export { default as PureInlineComponent } from './PureInlineComponent.js'
+export { default as PureInlineComponent } from './PureInlineComponent'

packages/emoji-mart/src/components/HTMLElement/HTMLElement.js → packages/emoji-mart/src/components/HTMLElement/HTMLElement.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getProp } from '../../config'
 
 const WindowHTMLElement =
@@ -44,4 +45,12 @@ export default class HTMLElement extends WindowHTMLElement {
       this.component.forceUpdate()
     }
   }
+
+  disconnectedCallback() {
+    this.disconnected = true
+
+    if (this.component && this.component.unregister) {
+      this.component.unregister()
+    }
+  }
 }

packages/emoji-mart/src/components/HTMLElement/ShadowElement.js → packages/emoji-mart/src/components/HTMLElement/ShadowElement.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { HTMLElement } from '.'
 
 export default class ShadowElement extends HTMLElement {

packages/emoji-mart/src/components/HTMLElement/index.ts

@@ -0,0 +1,2 @@
+export { default as HTMLElement } from './HTMLElement'
+export { default as ShadowElement } from './ShadowElement'

packages/emoji-mart/src/components/Navigation/Navigation.js → packages/emoji-mart/src/components/Navigation/Navigation.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { PureComponent } from 'preact/compat'
 import { Data, I18n } from '../../config'
 import Icons from '../../icons'

packages/emoji-mart/src/components/Navigation/index.ts

@@ -0,0 +1 @@
+export { default as Navigation } from './Navigation'

packages/emoji-mart/src/components/Picker/Picker.js → packages/emoji-mart/src/components/Picker/Picker.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Component, createRef } from 'preact'
 
 import { deepEqual, sleep, getEmojiData } from '../../utils'

packages/emoji-mart/src/components/Picker/PickerElement.js → packages/emoji-mart/src/components/Picker/PickerElement.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { render } from 'preact'
 
 import { init, getProps } from '../../config'
@@ -20,13 +21,9 @@ export default class PickerElement extends ShadowElement {
     }
 
     await init(props)
-    render(<Picker {...props} />, this.shadowRoot)
-  }
+    if (this.disconnected) return
 
-  disconnectedCallback() {
-    if (this.component) {
-      this.component.unregister()
-    }
+    render(<Picker {...props} />, this.shadowRoot)
   }
 }
 

packages/emoji-mart/src/components/Picker/index.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export { default as Picker } from './Picker'
+export { default as PickerElement } from './PickerElement'
+export { default as PickerStyles } from 'bundle-text:./PickerStyles.scss'

packages/emoji-mart/src/config.js → packages/emoji-mart/src/config.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import i18n_en from '@emoji-mart/data/i18n/en.json'
 import PickerProps from './components/Picker/PickerProps'
 import {
@@ -23,7 +24,8 @@ async function fetchJSON(src) {
   return json
 }
 
-let promise = null
+let promise: Promise<void> | null = null
+let initiated = false
 let initCallback = null
 let initialized = false
 

packages/emoji-mart/src/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.scss'

packages/emoji-mart/src/helpers/frequently-used.js → packages/emoji-mart/src/helpers/frequently-used.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Store } from '../helpers'
 
 const DEFAULTS = [
@@ -18,9 +19,9 @@ const DEFAULTS = [
   'heart',
 ]
 
-let Index = null
+let Index: any | null = null
 
-function add(emoji) {
+function add(emoji: { id: string }) {
   Index || (Index = Store.get('frequently') || {})
 
   const emojiId = emoji.id || emoji

packages/emoji-mart/src/helpers/index.ts

@@ -0,0 +1,16 @@
+export { default as Store } from './store'
+
+export { default as NativeSupport } from './native-support'
+export { default as FrequentlyUsed } from './frequently-used'
+export { default as SearchIndex } from './search-index'
+
+export const SafeFlags = [
+  'checkered_flag',
+  'crossed_flags',
+  'pirate_flag',
+  'rainbow-flag',
+  'transgender_flag',
+  'triangular_flag_on_post',
+  'waving_black_flag',
+  'waving_white_flag',
+]

packages/emoji-mart/src/helpers/search-index.js → packages/emoji-mart/src/helpers/search-index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { init, Data } from '../config'
 
 const SHORTCODES_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/

packages/emoji-mart/src/helpers/store.js → packages/emoji-mart/src/helpers/store.ts

@@ -1,10 +1,10 @@
-function set(key, value) {
+function set(key: string, value: string) {
   try {
     window.localStorage[`emoji-mart.${key}`] = JSON.stringify(value)
   } catch (error) {}
 }
 
-function get(key) {
+function get(key: string): any {
   try {
     const value = window.localStorage[`emoji-mart.${key}`]
 

packages/emoji-mart/src/utils.js → packages/emoji-mart/src/utils.ts

@@ -1,6 +1,6 @@
 import { SearchIndex } from './helpers'
 
-export function deepEqual(a, b) {
+export function deepEqual(a: any, b: any): boolean {
   return (
     Array.isArray(a) &&
     Array.isArray(b) &&
@@ -15,15 +15,15 @@ export async function sleep(frames = 1) {
   }
 }
 
-export function getEmojiData(emoji, { skinIndex } = {}) {
+export function getEmojiData(emoji, { skinIndex = 0 } = {}) {
   const skin =
     emoji.skins[skinIndex] ||
     (() => {
       skinIndex = 0
       return emoji.skins[skinIndex]
     })()
 
-  const emojiData = {
+  const emojiData: any = {
     id: emoji.id,
     name: emoji.name,
     native: skin.native,

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "commonjs",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "isolatedModules": true,
+    "strict": false,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "noEmit": true
+  },
+  "exclude": ["node_modules", "dist"]
+}