Export Type Definitions (#61)

* feat: Added types to vite build

* feat: Added return types for emoji

* feat: Added types to package.json

package.json

@@ -21,6 +21,7 @@
   ],
   "main": "./dist/emoji-picker.umd.js",
   "module": "./dist/emoji-picker.es.js",
+  "types": "./dist/emoji-picker.es.d.ts",
   "exports": {
     ".": {
       "import": "./dist/emoji-picker.es.js",
@@ -59,6 +60,7 @@
     "sass": "^1.43.2",
     "typescript": "^4.3.2",
     "vite": "^2.4.2",
+    "vite-plugin-dts": "^3.6.0",
     "vitest": "^0.24.5",
     "vue-eslint-parser": "^8.0.1",
     "vue-tsc": "^0.0.24"

src/components/Body.vue

@@ -54,7 +54,7 @@ import {
 /**
  * Internal dependencies
  */
-import { EmojiRecord, Emoji, Store } from '../types'
+import {EmojiRecord, Emoji, Store, EmojiExt} from '../types'
 
 import {
   EMOJI_REMOTE_SRC,
@@ -71,6 +71,9 @@ import {
 
 export default defineComponent({
   name: 'Body',
+  emits: {
+    select: (emoji: EmojiExt) => true,
+  },
   setup() {
     const { state, updateEmoji, updateSelect } = inject('store') as Store
     const bodyInner = ref<HTMLElement | null>(null)

src/components/Picker.vue

@@ -19,7 +19,7 @@ import { defineComponent, provide, ref, PropType, toRaw } from 'vue'
 import { COLOR_THEMES, GROUP_NAMES, STATIC_TEXTS } from '../constant'
 import Store from '../store'
 import PickerRoot from './Root.vue'
-import { ColorTheme } from '../types'
+import { ColorTheme, EmojiExt } from '../types'
 
 export default defineComponent({
   name: 'Picker',
@@ -100,7 +100,10 @@ export default defineComponent({
       default: 'light',
     },
   },
-  emits: ['update:text', 'select'],
+  emits: {
+    'update:text': (text: string) => true,
+    select: (emoji: EmojiExt) => true,
+  },
   setup(props, { emit }) {
     const input = ref(props.text)
 

src/components/Root.vue

@@ -71,7 +71,7 @@ import smileys_people from '../svgs/groups/smileys_people.svg'
 import Body from './Body.vue'
 import Header from './Header.vue'
 import Footer from './Footer.vue'
-import { Store } from '../types'
+import { EmojiExt, Store } from '../types'
 
 export default defineComponent({
   name: 'PickerRoot',
@@ -106,7 +106,10 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  emits: ['update:text', 'select'],
+  emits: {
+    select: (emoji: EmojiExt) => true,
+    'update:text': (value: string) => true,
+  },
   setup(props, { emit }) {
     const elem = ref<HTMLInputElement>()
     const button = ref<HTMLButtonElement>()
@@ -121,7 +124,7 @@ export default defineComponent({
     /**
      * Functions
      */
-    function onSelect(emoji: any) {
+    function onSelect(emoji: EmojiExt) {
       if (isInputType) {
         const mode = state.options.mode
         if (mode === 'prepend') {

src/export.ts

@@ -1,4 +1,6 @@
 import Picker from './components/Picker.vue'
 import './styles/index.scss'
 
+export type { Emoji, EmojiExt } from './types'
+
 export default Picker

src/types.ts

@@ -34,6 +34,15 @@ export interface Emoji {
   src?: string
 }
 
+export const EMOJI_SKIN_TONE_KEY = 't'
+
+export const EMOJI_EMOJI_KEY = 'i'
+
+export interface EmojiExt extends Emoji {
+  [EMOJI_SKIN_TONE_KEY]: string
+  [EMOJI_EMOJI_KEY]: string
+}
+
 export type EmojiRecord = Record<string, Emoji[]>
 
 export interface State {

tsconfig.json

@@ -9,7 +9,9 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

vite.config.ts

@@ -1,10 +1,14 @@
 const path = require('path')
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    dts({rollupTypes: true}),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/export.ts'),