Enable TypeScript support

.eslintrc.json

@@ -1,20 +1,33 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es2021": true,
     "node": true
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:vue/vue3-recommended",
     "plugin:prettier/recommended",
     "prettier"
   ],
   "parserOptions": {
+    "parser": {
+      "js": "espree",
+      "jsx": "espree",
+      "cjs": "espree",
+      "mjs": "espree",
+      "ts": "@typescript-eslint/parser"
+    },
     "ecmaVersion": "latest",
-    "sourceType": "module"
+    "sourceType": "module",
+    "extraFileExtensions": [".vue"],
+    "ecmaFeatures": {
+      "jsx": true
+    }
   },
-  "plugins": ["vue"],
+  "plugins": ["@typescript-eslint", "vue"],
   "rules": {
     "no-console": "off",
     "vue/no-v-html": "off",

.npmrc

@@ -1,2 +1,3 @@
 fetch-retry-mintimeout=20000
 fetch-retry-maxtimeout=120000
+auto-install-peers=true

lib/components/index.js

@@ -39,109 +39,109 @@ export { default as NavStack } from './nav/NavStack.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
 export { default as OverflowMenu } from './base/OverflowMenu.vue'
 
-export { default as AlignLeftIcon } from '@/assets/icons/align-left.svg'
-export { default as ArchiveIcon } from '@/assets/icons/archive.svg'
-export { default as AsteriskIcon } from '@/assets/icons/asterisk.svg'
-export { default as BellIcon } from '@/assets/icons/bell.svg'
-export { default as BellRingIcon } from '@/assets/icons/bell-ring.svg'
-export { default as BookIcon } from '@/assets/icons/book.svg'
-export { default as BookmarkIcon } from '@/assets/icons/bookmark.svg'
-export { default as BoxIcon } from '@/assets/icons/box.svg'
-export { default as CalendarIcon } from '@/assets/icons/calendar.svg'
-export { default as ChartIcon } from '@/assets/icons/chart.svg'
-export { default as CheckIcon } from '@/assets/icons/check.svg'
-export { default as CheckCircleIcon } from '@/assets/icons/check-circle.svg'
-export { default as ChevronLeftIcon } from '@/assets/icons/chevron-left.svg'
-export { default as ChevronRightIcon } from '@/assets/icons/chevron-right.svg'
-export { default as ClearIcon } from '@/assets/icons/clear.svg'
-export { default as ClientIcon } from '@/assets/icons/client.svg'
-export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg'
-export { default as CodeIcon } from '@/assets/icons/code.svg'
-export { default as CoinsIcon } from '@/assets/icons/coins.svg'
-export { default as ContractIcon } from '@/assets/icons/contract.svg'
-export { default as CopyIcon } from '@/assets/icons/copy.svg'
-export { default as CopyrightIcon } from '@/assets/icons/copyright.svg'
-export { default as CurrencyIcon } from '@/assets/icons/currency.svg'
-export { default as DashboardIcon } from '@/assets/icons/dashboard.svg'
-export { default as DownloadIcon } from '@/assets/icons/download.svg'
-export { default as DropdownIcon } from '@/assets/icons/dropdown.svg'
-export { default as EditIcon } from '@/assets/icons/edit.svg'
-export { default as ExitIcon } from '@/assets/icons/x.svg'
-export { default as ExpandIcon } from '@/assets/icons/expand.svg'
-export { default as ExternalIcon } from '@/assets/icons/external.svg'
-export { default as EyeIcon } from '@/assets/icons/eye.svg'
-export { default as EyeOffIcon } from '@/assets/icons/eye-off.svg'
-export { default as FileIcon } from '@/assets/icons/file.svg'
-export { default as FileTextIcon } from '@/assets/icons/file-text.svg'
-export { default as FilterIcon } from '@/assets/icons/filter.svg'
-export { default as FolderOpenIcon } from '@/assets/icons/folder-open.svg'
-export { default as FolderSearchIcon } from '@/assets/icons/folder-search.svg'
-export { default as GapIcon } from '@/assets/icons/gap.svg'
-export { default as GitHubIcon } from '@/assets/icons/github.svg'
-export { default as GlobeIcon } from '@/assets/icons/globe.svg'
-export { default as GridIcon } from '@/assets/icons/grid.svg'
-export { default as HamburgerIcon } from '@/assets/icons/hamburger.svg'
-export { default as HammerIcon } from '@/assets/icons/hammer.svg'
-export { default as HashIcon } from '@/assets/icons/hash.svg'
-export { default as HeartIcon } from '@/assets/icons/heart.svg'
-export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.svg'
-export { default as HistoryIcon } from '@/assets/icons/history.svg'
-export { default as HomeIcon } from '@/assets/icons/home.svg'
-export { default as ImageIcon } from '@/assets/icons/image.svg'
-export { default as InfoIcon } from '@/assets/icons/info.svg'
-export { default as IssuesIcon } from '@/assets/icons/issues.svg'
-export { default as LeftArrowIcon } from '@/assets/icons/left-arrow.svg'
-export { default as LibraryIcon } from '@/assets/icons/library.svg'
-export { default as LightBulbIcon } from '@/assets/icons/light-bulb.svg'
-export { default as LinkIcon } from '@/assets/icons/link.svg'
-export { default as ListIcon } from '@/assets/icons/list.svg'
-export { default as LockIcon } from '@/assets/icons/lock.svg'
-export { default as LogInIcon } from '@/assets/icons/log-in.svg'
-export { default as LogOutIcon } from '@/assets/icons/log-out.svg'
-export { default as MoonIcon } from '@/assets/icons/moon.svg'
-export { default as MoreHorizontalIcon } from '@/assets/icons/more-horizontal.svg'
-export { default as MoreVerticalIcon } from '@/assets/icons/more-vertical.svg'
-export { default as OmorphiaIcon } from '@/assets/icons/omorphia.svg'
-export { default as PaintBrushIcon } from '@/assets/icons/paintbrush.svg'
-export { default as PlayIcon } from '@/assets/icons/play.svg'
-export { default as PlusIcon } from '@/assets/icons/plus.svg'
-export { default as ReportIcon } from '@/assets/icons/report.svg'
-export { default as RightArrowIcon } from '@/assets/icons/right-arrow.svg'
-export { default as SaveIcon } from '@/assets/icons/save.svg'
-export { default as ScaleIcon } from '@/assets/icons/scale.svg'
-export { default as SearchIcon } from '@/assets/icons/search.svg'
-export { default as SendIcon } from '@/assets/icons/send.svg'
-export { default as ServerIcon } from '@/assets/icons/server.svg'
-export { default as SettingsIcon } from '@/assets/icons/settings.svg'
-export { default as ShieldIcon } from '@/assets/icons/shield.svg'
-export { default as SlashIcon } from '@/assets/icons/slash.svg'
-export { default as StarIcon } from '@/assets/icons/star.svg'
-export { default as StopCircleIcon } from '@/assets/icons/stop-circle.svg'
-export { default as SunIcon } from '@/assets/icons/sun.svg'
-export { default as SunriseIcon } from '@/assets/icons/sunrise.svg'
-export { default as TagIcon } from '@/assets/icons/tag.svg'
-export { default as TagsIcon } from '@/assets/icons/tags.svg'
-export { default as TerminalSquareIcon } from '@/assets/icons/terminal-square.svg'
-export { default as TransferIcon } from '@/assets/icons/transfer.svg'
-export { default as TrashIcon } from '@/assets/icons/trash.svg'
-export { default as UndoIcon } from '@/assets/icons/undo.svg'
-export { default as UnknownIcon } from '@/assets/icons/unknown.svg'
-export { default as UnknownDonationIcon } from '@/assets/icons/unknown-donation.svg'
-export { default as UpdatedIcon } from '@/assets/icons/updated.svg'
-export { default as UploadIcon } from '@/assets/icons/upload.svg'
-export { default as UserIcon } from '@/assets/icons/user.svg'
-export { default as UserPlusIcon } from '@/assets/icons/user-plus.svg'
-export { default as UserXIcon } from '@/assets/icons/user-x.svg'
-export { default as UsersIcon } from '@/assets/icons/users.svg'
-export { default as VersionIcon } from '@/assets/icons/version.svg'
-export { default as WikiIcon } from '@/assets/icons/wiki.svg'
-export { default as XIcon } from '@/assets/icons/x.svg'
-export { default as XCircleIcon } from '@/assets/icons/x-circle.svg'
-export { default as MailIcon } from '@/assets/icons/mail.svg'
-export { default as ShareIcon } from '@/assets/icons/share.svg'
+export { default as AlignLeftIcon } from '@/assets/icons/align-left.svg?component'
+export { default as ArchiveIcon } from '@/assets/icons/archive.svg?component'
+export { default as AsteriskIcon } from '@/assets/icons/asterisk.svg?component'
+export { default as BellIcon } from '@/assets/icons/bell.svg?component'
+export { default as BellRingIcon } from '@/assets/icons/bell-ring.svg?component'
+export { default as BookIcon } from '@/assets/icons/book.svg?component'
+export { default as BookmarkIcon } from '@/assets/icons/bookmark.svg?component'
+export { default as BoxIcon } from '@/assets/icons/box.svg?component'
+export { default as CalendarIcon } from '@/assets/icons/calendar.svg?component'
+export { default as ChartIcon } from '@/assets/icons/chart.svg?component'
+export { default as CheckIcon } from '@/assets/icons/check.svg?component'
+export { default as CheckCircleIcon } from '@/assets/icons/check-circle.svg?component'
+export { default as ChevronLeftIcon } from '@/assets/icons/chevron-left.svg?component'
+export { default as ChevronRightIcon } from '@/assets/icons/chevron-right.svg?component'
+export { default as ClearIcon } from '@/assets/icons/clear.svg?component'
+export { default as ClientIcon } from '@/assets/icons/client.svg?component'
+export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg?component'
+export { default as CodeIcon } from '@/assets/icons/code.svg?component'
+export { default as CoinsIcon } from '@/assets/icons/coins.svg?component'
+export { default as ContractIcon } from '@/assets/icons/contract.svg?component'
+export { default as CopyIcon } from '@/assets/icons/copy.svg?component'
+export { default as CopyrightIcon } from '@/assets/icons/copyright.svg?component'
+export { default as CurrencyIcon } from '@/assets/icons/currency.svg?component'
+export { default as DashboardIcon } from '@/assets/icons/dashboard.svg?component'
+export { default as DownloadIcon } from '@/assets/icons/download.svg?component'
+export { default as DropdownIcon } from '@/assets/icons/dropdown.svg?component'
+export { default as EditIcon } from '@/assets/icons/edit.svg?component'
+export { default as ExitIcon } from '@/assets/icons/x.svg?component'
+export { default as ExpandIcon } from '@/assets/icons/expand.svg?component'
+export { default as ExternalIcon } from '@/assets/icons/external.svg?component'
+export { default as EyeIcon } from '@/assets/icons/eye.svg?component'
+export { default as EyeOffIcon } from '@/assets/icons/eye-off.svg?component'
+export { default as FileIcon } from '@/assets/icons/file.svg?component'
+export { default as FileTextIcon } from '@/assets/icons/file-text.svg?component'
+export { default as FilterIcon } from '@/assets/icons/filter.svg?component'
+export { default as FolderOpenIcon } from '@/assets/icons/folder-open.svg?component'
+export { default as FolderSearchIcon } from '@/assets/icons/folder-search.svg?component'
+export { default as GapIcon } from '@/assets/icons/gap.svg?component'
+export { default as GitHubIcon } from '@/assets/icons/github.svg?component'
+export { default as GlobeIcon } from '@/assets/icons/globe.svg?component'
+export { default as GridIcon } from '@/assets/icons/grid.svg?component'
+export { default as HamburgerIcon } from '@/assets/icons/hamburger.svg?component'
+export { default as HammerIcon } from '@/assets/icons/hammer.svg?component'
+export { default as HashIcon } from '@/assets/icons/hash.svg?component'
+export { default as HeartIcon } from '@/assets/icons/heart.svg?component'
+export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.svg?component'
+export { default as HistoryIcon } from '@/assets/icons/history.svg?component'
+export { default as HomeIcon } from '@/assets/icons/home.svg?component'
+export { default as ImageIcon } from '@/assets/icons/image.svg?component'
+export { default as InfoIcon } from '@/assets/icons/info.svg?component'
+export { default as IssuesIcon } from '@/assets/icons/issues.svg?component'
+export { default as LeftArrowIcon } from '@/assets/icons/left-arrow.svg?component'
+export { default as LibraryIcon } from '@/assets/icons/library.svg?component'
+export { default as LightBulbIcon } from '@/assets/icons/light-bulb.svg?component'
+export { default as LinkIcon } from '@/assets/icons/link.svg?component'
+export { default as ListIcon } from '@/assets/icons/list.svg?component'
+export { default as LockIcon } from '@/assets/icons/lock.svg?component'
+export { default as LogInIcon } from '@/assets/icons/log-in.svg?component'
+export { default as LogOutIcon } from '@/assets/icons/log-out.svg?component'
+export { default as MoonIcon } from '@/assets/icons/moon.svg?component'
+export { default as MoreHorizontalIcon } from '@/assets/icons/more-horizontal.svg?component'
+export { default as MoreVerticalIcon } from '@/assets/icons/more-vertical.svg?component'
+export { default as OmorphiaIcon } from '@/assets/icons/omorphia.svg?component'
+export { default as PaintBrushIcon } from '@/assets/icons/paintbrush.svg?component'
+export { default as PlayIcon } from '@/assets/icons/play.svg?component'
+export { default as PlusIcon } from '@/assets/icons/plus.svg?component'
+export { default as ReportIcon } from '@/assets/icons/report.svg?component'
+export { default as RightArrowIcon } from '@/assets/icons/right-arrow.svg?component'
+export { default as SaveIcon } from '@/assets/icons/save.svg?component'
+export { default as ScaleIcon } from '@/assets/icons/scale.svg?component'
+export { default as SearchIcon } from '@/assets/icons/search.svg?component'
+export { default as SendIcon } from '@/assets/icons/send.svg?component'
+export { default as ServerIcon } from '@/assets/icons/server.svg?component'
+export { default as SettingsIcon } from '@/assets/icons/settings.svg?component'
+export { default as ShieldIcon } from '@/assets/icons/shield.svg?component'
+export { default as SlashIcon } from '@/assets/icons/slash.svg?component'
+export { default as StarIcon } from '@/assets/icons/star.svg?component'
+export { default as StopCircleIcon } from '@/assets/icons/stop-circle.svg?component'
+export { default as SunIcon } from '@/assets/icons/sun.svg?component'
+export { default as SunriseIcon } from '@/assets/icons/sunrise.svg?component'
+export { default as TagIcon } from '@/assets/icons/tag.svg?component'
+export { default as TagsIcon } from '@/assets/icons/tags.svg?component'
+export { default as TerminalSquareIcon } from '@/assets/icons/terminal-square.svg?component'
+export { default as TransferIcon } from '@/assets/icons/transfer.svg?component'
+export { default as TrashIcon } from '@/assets/icons/trash.svg?component'
+export { default as UndoIcon } from '@/assets/icons/undo.svg?component'
+export { default as UnknownIcon } from '@/assets/icons/unknown.svg?component'
+export { default as UnknownDonationIcon } from '@/assets/icons/unknown-donation.svg?component'
+export { default as UpdatedIcon } from '@/assets/icons/updated.svg?component'
+export { default as UploadIcon } from '@/assets/icons/upload.svg?component'
+export { default as UserIcon } from '@/assets/icons/user.svg?component'
+export { default as UserPlusIcon } from '@/assets/icons/user-plus.svg?component'
+export { default as UserXIcon } from '@/assets/icons/user-x.svg?component'
+export { default as UsersIcon } from '@/assets/icons/users.svg?component'
+export { default as VersionIcon } from '@/assets/icons/version.svg?component'
+export { default as WikiIcon } from '@/assets/icons/wiki.svg?component'
+export { default as XIcon } from '@/assets/icons/x.svg?component'
+export { default as XCircleIcon } from '@/assets/icons/x-circle.svg?component'
+export { default as MailIcon } from '@/assets/icons/mail.svg?component'
+export { default as ShareIcon } from '@/assets/icons/share.svg?component'
 
-export { default as MastodonIcon } from '@/assets/external/mastodon.svg'
-export { default as RedditIcon } from '@/assets/external/reddit.svg'
-export { default as TwitterIcon } from '@/assets/external/twitter.svg'
+export { default as MastodonIcon } from '@/assets/external/mastodon.svg?component'
+export { default as RedditIcon } from '@/assets/external/reddit.svg?component'
+export { default as TwitterIcon } from '@/assets/external/twitter.svg?component'
 
-export { default as ModrinthIcon } from '@/assets/branding/logo.svg'
+export { default as ModrinthIcon } from '@/assets/branding/logo.svg?component'

lib/helpers/index.js

@@ -1,3 +1,3 @@
-export * from './highlight'
-export * from './parse'
-export * from './utils'
+export * from './highlight.js'
+export * from './parse.js'
+export * from './utils.js'

lib/index.ts

@@ -0,0 +1,16 @@
+import * as components from './components/index.js'
+import FloatingVue from 'floating-vue'
+import { Plugin } from 'vue'
+
+const plugin: Plugin = (app) => {
+  for (const key in components) {
+    app.component(key, components[key as keyof typeof components])
+  }
+  app.use(FloatingVue)
+}
+
+export default plugin
+export * from './components/index.js'
+export * from './helpers/index.js'
+
+import './assets/omorphia.scss'

lib/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-svg-loader" />

package.json

@@ -3,20 +3,20 @@
   "type": "module",
   "version": "0.5.0",
   "files": [
-    "dist",
-    "lib"
+    "dist"
   ],
   "main": "./dist/omorphia.umd.cjs",
   "module": "./dist/omorphia.js",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/omorphia.js",
-      "require": "./dist/omorphia.umd.cjs"
+      "require": "./dist/omorphia.cjs"
     },
     "./dist/style.css": "./dist/style.css"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vue-tsc && vite build",
     "lint:js": "eslint --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .",
     "lint": "pnpm run lint:js && prettier --check .",
     "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue . && prettier --write .",
@@ -31,13 +31,14 @@
     "highlight.js": "^11.8.0",
     "markdown-it": "^13.0.1",
     "qrcode.vue": "^3.4.0",
-    "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
     "vue-router": "^4.2.1",
     "vue-select": "^4.0.0-beta.6",
     "xss": "^1.0.14"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-vue": "^4.2.3",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
@@ -46,12 +47,19 @@
     "postcss": "^8.4.24",
     "postcss-prefix-selector": "^1.16.0",
     "prettier": "^2.8.8",
+    "rollup-plugin-node-externals": "^6.1.2",
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
+    "typescript": "^5.2.2",
     "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.6.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "^1.0.0-beta.1"
+    "vitepress": "^1.0.0-beta.1",
+    "vue-tsc": "^1.8.16"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.4"
   },
   "packageManager": "[email protected]"
 }