types added

.eslintrc.json

@@ -52,6 +52,7 @@
     ],
     "unicorn/explicit-length-check": "off",
     "unicorn/no-array-callback-reference": "off",
+    "unicorn/no-array-for-each": "off",
     "unicorn/no-array-method-this-argument": "off",
     "unicorn/no-null": "off",
     "unicorn/no-unused-properties": "error",

package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
   "main": "dist/js/adminlte.min.js",
+  "types": "dist/js/types/adminlte.d.ts",
   "scripts": {
     "dev": "npm-run-all --parallel watch docs-serve",
     "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
@@ -23,7 +24,7 @@
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
     "docs-compile": "astro --config src/config/astro.config.mjs build",
     "docs-lint": "astro --config src/config/astro.config.mjs check",
-    "docs-serve": "cross-env APP_ENV=DEV astro --config src/config/astro.config.mjs dev",
+    "docs-serve": "astro --config src/config/astro.config.mjs dev",
     "assets": "node src/config/assets.config.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "compile": "npm-run-all docs-compile assets css js",

src/config/rollup.config.js

@@ -1,5 +1,4 @@
 const typescript = require('@rollup/plugin-typescript')
-// import * as pkg from '../../package.json'
 const pkg = require('../../package.json')
 
 const year = new Date().getFullYear()
@@ -17,5 +16,8 @@ module.exports = {
     banner,
     name: 'adminlte'
   },
-  plugins: [typescript()]
+  plugins: [typescript({
+    declaration: true,
+    declarationDir: 'types'
+  })]
 }

src/ts/adminlte.ts

@@ -11,5 +11,3 @@ export {
   DirectChat,
   CardWidget
 }
-
-//

src/ts/card-widget.ts

@@ -84,13 +84,11 @@ class CardWidget {
 
       const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-      if (elm !== undefined) {
+      elm.forEach(el => {
-        for (const el of elm) {
         if (el instanceof HTMLElement) {
           slideUp(el, this._config.animationSpeed)
         }
-        }
+      })
-      }
 
       setTimeout(() => {
         if (this._parent) {
@@ -118,13 +116,11 @@ class CardWidget {
 
       const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-      if (elm !== undefined) {
+      elm.forEach(el => {
-        for (const el of elm) {
         if (el instanceof HTMLElement) {
           slideDown(el, this._config.animationSpeed)
         }
-        }
+      })
-      }
 
       setTimeout(() => {
         if (this._parent) {
@@ -250,36 +246,36 @@ class CardWidget {
 domReady(() => {
   const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
 
-  for (const btn of collapseBtn) {
+  collapseBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggle()
     })
-  }
+  })
 
   const removeBtn = document.querySelectorAll(SELECTOR_DATA_REMOVE)
 
-  for (const btn of removeBtn) {
+  removeBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.remove()
     })
-  }
+  })
 
   const maxBtn = document.querySelectorAll(SELECTOR_DATA_MAXIMIZE)
 
-  for (const btn of maxBtn) {
+  maxBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggleMaximize()
     })
-  }
+  })
 })
 
 export default CardWidget

src/ts/direct-chat.ts

@@ -61,7 +61,7 @@ class DirectChat {
 domReady(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
-  for (const btn of button) {
+  button.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
@@ -72,7 +72,7 @@ domReady(() => {
         data.toggle()
       }
     })
-  }
+  })
 })
 
 export default DirectChat

src/ts/push-menu.ts

@@ -63,18 +63,18 @@ class PushMenu {
   menusClose() {
     const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
 
-    for (const navTree of navTreeview) {
+    navTreeview.forEach(navTree => {
       navTree.style.removeProperty('display')
       navTree.style.removeProperty('height')
-    }
+    })
 
     const navSidebar = document.querySelector(SELECTOR_SIDEBAR_MENU)
     const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
 
     if (navItem) {
-      for (const navI of navItem) {
+      navItem.forEach(navI => {
         navI.classList.remove(CLASS_NAME_MENU_OPEN)
-      }
+      })
     }
   }
 
@@ -112,7 +112,7 @@ class PushMenu {
 
   addSidebarBreakPoint() {
     const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
-    const sidebarExpand = [...sidebarExpandList].find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
+    const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
     const sidebar = document.getElementsByClassName(sidebarExpand)[0]
     const sidebarContent = window.getComputedStyle(sidebar, '::before').getPropertyValue('content')
     this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) }
@@ -177,7 +177,7 @@ domReady(() => {
 
   const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
 
-  for (const btn of fullBtn) {
+  fullBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
 
@@ -193,8 +193,7 @@ domReady(() => {
         data.toggle()
       }
     })
-  }
+  })
 })
 
 export default PushMenu
-

src/ts/treeview.ts

@@ -96,7 +96,7 @@ class Treeview {
 domReady(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
-  for (const btn of button) {
+  button.forEach(btn => {
     btn.addEventListener('click', event => {
       const target = event.target as HTMLElement
       const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
@@ -106,7 +106,7 @@ domReady(() => {
         data.toggle()
       }
     })
-  }
+  })
 })
 
 export default Treeview

tsconfig.json

@@ -1,12 +1,13 @@
 {
   "root": true,
   "compilerOptions": {
+    "noFallthroughCasesInSwitch": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noImplicitAny": true,
-    "target": "es2018",
     "module": "esnext",
+    "alwaysStrict": true,
     "strict": true,
     "strictNullChecks": true,
     "strictBindCallApply": true,
@@ -16,6 +17,9 @@
     "paths": {
       "@components/*": ["src/html/components/*"],
     },
+    /* Language and Environment */
+    "target": "es6",
+    "lib": ["es2018", "DOM"],
   },
   "include": [
     "src/ts/**/*"