Migrate core JavaScript to TypeScript (#2582)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

core/.build/add-banner.ts

@@ -1,18 +1,20 @@
 #!/usr/bin/env node
 
-'use strict'
-
-import { readFileSync, writeFileSync } from 'node:fs';
-import { join, dirname, basename } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs'
+import { join, dirname, basename } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { sync } from 'glob';
-import banner from '../../shared/banner/index.mjs';
+import { sync } from 'glob'
+import banner from '../../shared/banner/index.mjs'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
-const styles = sync(join(__dirname, '..', 'dist', 'css', '*.css'))
+const styles: string[] = sync(join(__dirname, '..', 'dist', 'css', '*.css'))
 
-const plugins = {
+interface Plugins {
+	[key: string]: string
+}
+
+const plugins: Plugins = {
 	'tabler-flags': 'Flags',
 	'tabler-flags.rtl': 'Flags RTL',
 	'tabler-marketing': 'Marketing',
@@ -25,22 +27,24 @@ const plugins = {
 	'tabler-vendors.rtl': 'Vendors RTL',
 }
 
-styles.forEach((file, i) => {
+styles.forEach((file: string) => {
 	const content = readFileSync(file, 'utf8')
 	const filename = basename(file)
-	const pluginKey = Object.keys(plugins).find(plugin => filename.includes(plugin))
-	const plugin = plugins[pluginKey]
+	const pluginKey = Object.keys(plugins).find((plugin: string) => filename.includes(plugin))
+	const plugin = pluginKey ? plugins[pluginKey] : undefined
 	const regex = /^(@charset ['"][a-zA-Z0-9-]+['"];?)\n?/i
 
 	let newContent = ''
+	const bannerText = banner(plugin)
 
 	if (content.match(regex)) {
-		newContent = content.replace(regex, (m, m1) => {
-			return `${m1}\n${banner(plugin)}\n`
+		newContent = content.replace(regex, (m: string, m1: string) => {
+			return `${m1}\n${bannerText}\n`
 		})
 	} else {
-		newContent = `${banner(plugin)}\n${content}`
+		newContent = `${bannerText}\n${content}`
 	}
 
 	writeFileSync(file, newContent, 'utf8')
-})
+})
+

core/.build/compare-variables.mjs

@@ -1,82 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-// Get __dirname in ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// File paths (relative to core/.build directory)
-const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss');
-const tablerPath = path.join(__dirname, '../scss/_variables.scss');
-
-// Function to extract variable names from SCSS file
-function extractVariables(filePath) {
-  const content = fs.readFileSync(filePath, 'utf8');
-  const variables = new Set();
-  
-  // Regex to find SCSS variables
-  // Looks for patterns like: $variable-name: value
-  // Includes variables in maps and lists
-  const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g;
-  
-  let match;
-  while ((match = variableRegex.exec(content)) !== null) {
-    const varName = match[1];
-    variables.add(varName);
-  }
-  
-  return variables;
-}
-
-// Main function
-function compareVariables() {
-  console.log('Analyzing Bootstrap variables...');
-  const bootstrapVars = extractVariables(bootstrapPath);
-  console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`);
-  
-  console.log('Analyzing Tabler variables...');
-  const tablerVars = extractVariables(tablerPath);
-  console.log(`Found ${tablerVars.size} variables in Tabler\n`);
-  
-  // Find variables that are in Bootstrap but not in Tabler
-  const missingInTabler = [];
-  for (const varName of bootstrapVars) {
-    if (!tablerVars.has(varName)) {
-      missingInTabler.push(varName);
-    }
-  }
-  
-  // Sort alphabetically
-  missingInTabler.sort();
-  
-  console.log('='.repeat(60));
-  console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`);
-  console.log('='.repeat(60));
-  
-  if (missingInTabler.length === 0) {
-    console.log('All Bootstrap variables are present in Tabler!');
-  } else {
-    console.log('\nList of missing variables:\n');
-    missingInTabler.forEach((varName, index) => {
-      console.log(`${(index + 1).toString().padStart(4)}. $${varName}`);
-    });
-  }
-  
-  // Optionally: show statistics
-  console.log('\n' + '='.repeat(60));
-  console.log('Statistics:');
-  console.log(`  Bootstrap: ${bootstrapVars.size} variables`);
-  console.log(`  Tabler:    ${tablerVars.size} variables`);
-  console.log(`  Missing:    ${missingInTabler.length} variables`);
-  console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`);
-  console.log('='.repeat(60));
-}
-
-// Run analysis
-try {
-  compareVariables();
-} catch (error) {
-  console.error('Error during analysis:', error.message);
-  process.exit(1);
-}

core/.build/compare-variables.ts

@@ -0,0 +1,84 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Get __dirname in ES modules
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// File paths (relative to core/.build directory)
+const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss')
+const tablerPath = path.join(__dirname, '../scss/_variables.scss')
+
+// Function to extract variable names from SCSS file
+function extractVariables(filePath: string): Set<string> {
+	const content = readFileSync(filePath, 'utf8')
+	const variables = new Set<string>()
+
+	// Regex to find SCSS variables
+	// Looks for patterns like: $variable-name: value
+	// Includes variables in maps and lists
+	const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g
+
+	let match: RegExpExecArray | null
+	while ((match = variableRegex.exec(content)) !== null) {
+		const varName = match[1]
+		variables.add(varName)
+	}
+
+	return variables
+}
+
+// Main function
+function compareVariables(): void {
+	console.log('Analyzing Bootstrap variables...')
+	const bootstrapVars = extractVariables(bootstrapPath)
+	console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`)
+
+	console.log('Analyzing Tabler variables...')
+	const tablerVars = extractVariables(tablerPath)
+	console.log(`Found ${tablerVars.size} variables in Tabler\n`)
+
+	// Find variables that are in Bootstrap but not in Tabler
+	const missingInTabler: string[] = []
+	for (const varName of bootstrapVars) {
+		if (!tablerVars.has(varName)) {
+			missingInTabler.push(varName)
+		}
+	}
+
+	// Sort alphabetically
+	missingInTabler.sort()
+
+	console.log('='.repeat(60))
+	console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`)
+	console.log('='.repeat(60))
+
+	if (missingInTabler.length === 0) {
+		console.log('All Bootstrap variables are present in Tabler!')
+	} else {
+		console.log('\nList of missing variables:\n')
+		missingInTabler.forEach((varName: string, index: number) => {
+			console.log(`${(index + 1).toString().padStart(4)}. $${varName}`)
+		})
+	}
+
+	// Optionally: show statistics
+	console.log('\n' + '='.repeat(60))
+	console.log('Statistics:')
+	console.log(`  Bootstrap: ${bootstrapVars.size} variables`)
+	console.log(`  Tabler:    ${tablerVars.size} variables`)
+	console.log(`  Missing:    ${missingInTabler.length} variables`)
+	console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`)
+	console.log('='.repeat(60))
+}
+
+// Run analysis
+try {
+	compareVariables()
+} catch (error) {
+	const errorMessage = error instanceof Error ? error.message : String(error)
+	console.error('Error during analysis:', errorMessage)
+	process.exit(1)
+}
+

core/.build/copy-libs.ts

@@ -1,19 +1,30 @@
 #!/usr/bin/env node
 
-'use strict'
-
-import { existsSync, mkdirSync, lstatSync } from 'fs'
+import { existsSync, mkdirSync } from 'node:fs'
 import { emptyDirSync, copySync } from 'fs-extra/esm'
 import libs from '../libs.json' with { type: 'json' }
-import { fileURLToPath } from 'url'
-import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url'
+import { join, dirname } from 'node:path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
+interface LibConfig {
+	npm?: string
+	js?: string[]
+	css?: string[]
+	head?: boolean
+}
+
+interface Libs {
+	[key: string]: LibConfig
+}
+
+const libsData = libs as Libs
+
 emptyDirSync(join(__dirname, '..', 'dist/libs'))
 
-for(const name in libs) {
-	const { npm } = libs[name]
+for (const name in libsData) {
+	const { npm } = libsData[name]
 
 	if (npm) {
 		const from = join(__dirname, '..', `node_modules/${npm}`)
@@ -23,11 +34,12 @@ for(const name in libs) {
 		if (!existsSync(to)) {
 			mkdirSync(to, { recursive: true })
 		}
-		
+
 		copySync(from, to, {
 			dereference: true,
 		})
-		
+
 		console.log(`Successfully copied ${npm}`)
 	}
-}
+}
+

core/.build/generate-sri.ts

@@ -1,10 +1,18 @@
-const crypto = require('node:crypto');
-const fs = require('node:fs');
-const path = require('node:path');
+import * as crypto from 'node:crypto'
+import { readFileSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const configFile = path.join(__dirname, '../../shared/data/sri.json')
 
-const files = [
+interface FileConfig {
+	file: string
+	configPropertyName: string
+}
+
+const files: FileConfig[] = [
 	{
 		file: 'dist/css/tabler.min.css',
 		configPropertyName: 'css'
@@ -79,13 +87,13 @@ const files = [
 	},
 ]
 
-function generateSRI() {
-	const sriData = {}
+function generateSRI(): void {
+	const sriData: Record<string, string> = {}
 
 	for (const { file, configPropertyName } of files) {
 		try {
 			const filePath = path.join(__dirname, '..', file)
-			const data = fs.readFileSync(filePath, 'utf8')
+			const data = readFileSync(filePath, 'utf8')
 
 			const algorithm = 'sha384'
 			const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64')
@@ -95,12 +103,13 @@ function generateSRI() {
 
 			sriData[configPropertyName] = integrity
 		} catch (error) {
-			console.error(`Error processing ${file}:`, error.message)
+			const errorMessage = error instanceof Error ? error.message : String(error)
+			console.error(`Error processing ${file}:`, errorMessage)
 			throw error
 		}
 	}
 
-	fs.writeFileSync(configFile, JSON.stringify(sriData, null, 2) + '\n', 'utf8')
+	writeFileSync(configFile, JSON.stringify(sriData, null, 2) + '\n', 'utf8')
 }
 
 try {
@@ -108,4 +117,5 @@ try {
 } catch (error) {
 	console.error('Failed to generate SRI:', error)
 	process.exit(1)
-}
+}
+

core/.build/import-fonts.ts

@@ -1,10 +1,8 @@
 #!/usr/bin/env node
 
-'use strict'
-
-import { existsSync, mkdirSync } from 'fs'
+import { existsSync, mkdirSync } from 'node:fs'
 import { copySync } from 'fs-extra/esm'
-import { fileURLToPath } from 'url'
+import { fileURLToPath } from 'node:url'
 import { join, dirname } from 'node:path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -25,11 +23,11 @@ if (existsSync(monoFrom)) {
 	if (!existsSync(monoTo)) {
 		mkdirSync(monoTo, { recursive: true })
 	}
-	
+
 	copySync(monoFrom, monoTo, {
 		dereference: true,
 	})
-	
+
 	console.log(`Successfully copied geist-mono fonts`)
 } else {
 	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
@@ -43,11 +41,11 @@ if (existsSync(sansFrom)) {
 	if (!existsSync(sansTo)) {
 		mkdirSync(sansTo, { recursive: true })
 	}
-	
+
 	copySync(sansFrom, sansTo, {
 		dereference: true,
 	})
-	
+
 	console.log(`Successfully copied geist-sans fonts`)
 } else {
 	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)

core/.build/vite.config.ts

@@ -1,7 +1,8 @@
 import path from 'node:path'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
-import { createViteConfig } from '../../.build/vite.config.helper.mjs'
+import { existsSync } from 'node:fs'
+import { createViteConfig } from '../../.build/vite.config.helper'
 import getBanner from '../../shared/banner/index.mjs'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -9,18 +10,24 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const ESM = process.env.ESM === 'true'
 const THEME = process.env.THEME === 'true'
 
+const MINIFY = process.env.MINIFY === 'true'
 const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
 const entryFile = `tabler${THEME ? '-theme' : ''}`
 const libraryName = `tabler${THEME ? '-theme' : ''}`
 
 const bannerText = getBanner()
 
+// Try .ts first, fallback to .js for gradual migration
+const entryPath = path.resolve(__dirname, `../js/${entryFile}`)
+const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
+
 export default createViteConfig({
-	entry: path.resolve(__dirname, `../js/${entryFile}.js`),
+	entry: entry,
 	name: ESM ? undefined : libraryName,
-	fileName: () => `${destinationFile}.js`,
+	fileName: () => MINIFY ? `${destinationFile}.min.js` : `${destinationFile}.js`,
 	formats: [ESM ? 'es' : 'umd'],
 	outDir: path.resolve(__dirname, '../dist/js'),
-	banner: bannerText
+	banner: bannerText,
+	minify: MINIFY ? true : false
 })
 

core/js/src/autosize.js

@@ -1,8 +0,0 @@
-// Autosize plugin
-const elements = document.querySelectorAll('[data-bs-toggle="autosize"]')
-
-if (elements.length) {
-  elements.forEach(function (element) {
-    window.autosize && window.autosize(element)
-  })
-}

core/js/src/autosize.ts

@@ -0,0 +1,10 @@
+// Autosize plugin
+const autosizeElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-bs-toggle="autosize"]')
+
+if (autosizeElements.length) {
+  autosizeElements.forEach(function (element: HTMLElement) {
+    if (window.autosize) {
+      window.autosize(element)
+    }
+  })
+}

core/js/src/countup.ts

@@ -1,17 +1,19 @@
-const elements = document.querySelectorAll('[data-countup]')
+const countupElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-countup]')
 
-if (elements.length) {
-  elements.forEach(function (element) {
-    let options = {}
+if (countupElements.length) {
+  countupElements.forEach(function (element: HTMLElement) {
+    let options: Record<string, any> = {}
     try {
-      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
+      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')!) : {}
       options = Object.assign(
         {
           enableScrollSpy: true,
         },
         dataOptions,
       )
-    } catch (error) {}
+    } catch (error) {
+      // ignore invalid JSON
+    }
 
     const value = parseInt(element.innerHTML, 10)
 

core/js/src/dropdown.ts

@@ -3,9 +3,9 @@ import { Dropdown } from './bootstrap'
 /*
 Core dropdowns
  */
-let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
-dropdownTriggerList.map(function (dropdownTriggerEl) {
-  let options = {
+const dropdownTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="dropdown"]'))
+dropdownTriggerList.map(function (dropdownTriggerEl: HTMLElement) {
+  const options = {
     boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
   }
   return new Dropdown(dropdownTriggerEl, options)

core/js/src/global.d.ts

@@ -0,0 +1,14 @@
+// Global type declarations for window properties
+
+interface Window {
+  autosize?: (element: HTMLElement | HTMLTextAreaElement) => void
+  countUp?: {
+    CountUp: new (target: HTMLElement, endVal: number, options?: any) => {
+      error: boolean
+      start: () => void
+    }
+  }
+  IMask?: new (element: HTMLElement, options: { mask: string; lazy?: boolean }) => any
+  Sortable?: new (element: HTMLElement, options?: any) => any
+}
+

core/js/src/input-mask.ts

@@ -1,7 +1,7 @@
 // Input mask plugin
 
-var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
-maskElementList.map(function (maskEl) {
+const maskElementList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-mask]'))
+maskElementList.map(function (maskEl: HTMLElement) {
   window.IMask &&
     new window.IMask(maskEl, {
       mask: maskEl.dataset.mask,

core/js/src/popover.ts

@@ -3,9 +3,9 @@ import { Popover } from './bootstrap'
 /*
 Core popovers
  */
-let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-popoverTriggerList.map(function (popoverTriggerEl) {
-  let options = {
+const popoverTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="popover"]'))
+popoverTriggerList.map(function (popoverTriggerEl: HTMLElement) {
+  const options = {
     delay: { show: 50, hide: 50 },
     html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
     placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',

core/js/src/sortable.ts

@@ -2,11 +2,11 @@
 // Initializes Sortable on elements marked with [data-sortable]
 // Allows options via JSON in data attribute: data-sortable='{"animation":150}'
 
-const sortableElements = document.querySelectorAll('[data-sortable]')
+const sortableElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-sortable]')
 
 if (sortableElements.length) {
-  sortableElements.forEach(function (element) {
-    let options = {}
+  sortableElements.forEach(function (element: HTMLElement) {
+    let options: Record<string, any> = {}
 
     try {
       const rawOptions = element.getAttribute('data-sortable')

core/js/src/switch-icon.js

@@ -1,11 +0,0 @@
-/*
-Switch icons
- */
-let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'))
-switchesTriggerList.map(function (switchTriggerEl) {
-  switchTriggerEl.addEventListener('click', (e) => {
-    e.stopPropagation()
-
-    switchTriggerEl.classList.toggle('active')
-  })
-})

core/js/src/switch-icon.ts

@@ -0,0 +1,11 @@
+/*
+Switch icons
+ */
+const switchesTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="switch-icon"]'))
+switchesTriggerList.map(function (switchTriggerEl: HTMLElement) {
+  switchTriggerEl.addEventListener('click', (e: MouseEvent) => {
+    e.stopPropagation()
+
+    switchTriggerEl.classList.toggle('active')
+  })
+})

core/js/src/tab.js

@@ -1,16 +0,0 @@
-import { Tab } from './bootstrap'
-
-export const EnableActivationTabsFromLocationHash = () => {
-  const locationHash = window.location.hash
-
-  if (locationHash) {
-    const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
-    const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
-
-    matchedTabs.map((tab) => {
-      new Tab(tab).show()
-    })
-  }
-}
-
-EnableActivationTabsFromLocationHash()

core/js/src/tab.ts

@@ -0,0 +1,16 @@
+import { Tab } from './bootstrap'
+
+export const EnableActivationTabsFromLocationHash = (): void => {
+  const locationHash: string = window.location.hash
+
+  if (locationHash) {
+    const tabsList: HTMLAnchorElement[] = [].slice.call(document.querySelectorAll<HTMLAnchorElement>('[data-bs-toggle="tab"]'))
+    const matchedTabs = tabsList.filter((tab: HTMLAnchorElement) => tab.hash === locationHash)
+
+    matchedTabs.map((tab: HTMLAnchorElement) => {
+      new Tab(tab).show()
+    })
+  }
+}
+
+EnableActivationTabsFromLocationHash()

core/js/src/tabler.ts

@@ -1,12 +1,12 @@
-export const prefix = 'tblr-'
+export const prefix: string = 'tblr-'
 
-export const hexToRgba = (hex, opacity) => {
+export const hexToRgba = (hex: string, opacity: number): string | null => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
 
   return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : null
 }
 
-export const getColor = (color, opacity = 1) => {
+export const getColor = (color: string, opacity: number = 1): string | null => {
   const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
 
   if (opacity !== 1) {

core/js/src/toast.js

@@ -1,17 +0,0 @@
-import { Toast } from './bootstrap'
-
-/*
-Toasts
- */
-let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'))
-toastsTriggerList.map(function (toastTriggerEl) {
-  if (!toastTriggerEl.hasAttribute('data-bs-target')) {
-    return
-  }
-
-  const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
-
-  toastTriggerEl.addEventListener('click', () => {
-    toastEl.show()
-  })
-})

core/js/src/toast.ts

@@ -0,0 +1,18 @@
+import { Toast } from './bootstrap'
+
+/*
+Toasts
+ */
+const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"]'))
+toastsTriggerList.map(function (toastTriggerEl: HTMLElement) {
+  const target = toastTriggerEl.getAttribute('data-bs-target')
+  if (target === null) {
+    return
+  }
+
+  const toastEl = new Toast(target)
+
+  toastTriggerEl.addEventListener('click', () => {
+    toastEl.show()
+  })
+})

core/js/src/tooltip.ts

@@ -1,8 +1,8 @@
 import { Tooltip } from './bootstrap'
 
-let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-tooltipTriggerList.map(function (tooltipTriggerEl) {
-  let options = {
+const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"]'))
+tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) {
+  const options = {
     delay: { show: 50, hide: 50 },
     html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
     placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',

core/js/tabler-theme.ts

@@ -3,7 +3,15 @@
  * to ensure we switch to the chosen dark/light theme as fast as possible.
  * This will prevent any flashes of the light theme (default) before switching.
  */
-const themeConfig = {
+interface ThemeConfig {
+  'theme': string
+  'theme-base': string
+  'theme-font': string
+  'theme-primary': string
+  'theme-radius': string
+}
+
+const themeConfig: ThemeConfig = {
   'theme': 'light',
   'theme-base': 'gray',
   'theme-font': 'sans-serif',
@@ -12,22 +20,22 @@ const themeConfig = {
 }
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
-  get: (searchParams, prop) => searchParams.get(prop),
+  get: (searchParams: URLSearchParams, prop: string): string | null => searchParams.get(prop),
 })
 
 for (const key in themeConfig) {
   const param = params[key]
-  let selectedValue
+  let selectedValue: string
 
   if (!!param) {
     localStorage.setItem('tabler-' + key, param)
     selectedValue = param
   } else {
     const storedTheme = localStorage.getItem('tabler-' + key)
-    selectedValue = storedTheme ? storedTheme : themeConfig[key]
+    selectedValue = storedTheme ? storedTheme : themeConfig[key as keyof ThemeConfig]
   }
 
-  if (selectedValue !== themeConfig[key]) {
+  if (selectedValue !== themeConfig[key as keyof ThemeConfig]) {
     document.documentElement.setAttribute('data-bs-' + key, selectedValue)
   } else {
     document.documentElement.removeAttribute('data-bs-' + key)

core/js/tabler.ts

@@ -9,7 +9,7 @@ import './src/tab'
 import './src/toast'
 import './src/sortable'
 
-// Re-export everything from bootstrap.js (single source of truth)
+// Re-export everything from bootstrap.ts (single source of truth)
 export * from './src/bootstrap'
 
 // Re-export tabler namespace

core/package.json

@@ -8,9 +8,9 @@
     "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
     "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "clean": "shx rm -rf dist demo",
-    "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
-    "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
-    "css-banner": "node .build/add-banner.mjs",
+    "css": "pnpm run css-build && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
+    "css-build": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
+    "css-banner": "tsx .build/add-banner.ts",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"",
@@ -18,29 +18,30 @@
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-lint": "pnpm run css-lint-variables",
     "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
-    "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "concurrently \"pnpm run js-compile-standalone\" \"pnpm run js-compile-standalone-esm\" \"pnpm run js-compile-theme\" \"pnpm run js-compile-theme-esm\"",
-    "js-compile-theme-esm": "cross-env THEME=true ESM=true vite build --config .build/vite.config.mjs",
-    "js-compile-theme": "cross-env THEME=true vite build --config .build/vite.config.mjs",
-    "js-compile-standalone": "vite build --config .build/vite.config.mjs",
-    "js-compile-standalone-esm": "cross-env ESM=true vite build --config .build/vite.config.mjs",
-    "js-minify": "concurrently \"pnpm run js-minify-standalone\" \"pnpm run js-minify-standalone-esm\" \"pnpm run js-minify-theme\" \"pnpm run js-minify-theme-esm\"",
-    "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
-    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
-    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
-    "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
+    "js": "pnpm run js-build && pnpm run js-build-min",
+    "js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-standalone-esm\" \"pnpm run js-build-theme\" \"pnpm run js-build-theme-esm\"",
+    "js-build-theme-esm": "cross-env THEME=true ESM=true vite build --config .build/vite.config.ts",
+    "js-build-theme": "cross-env THEME=true vite build --config .build/vite.config.ts",
+    "js-build-standalone": "vite build --config .build/vite.config.ts",
+    "js-build-standalone-esm": "cross-env ESM=true vite build --config .build/vite.config.ts",
+    "js-build-min": "concurrently \"pnpm run js-build-min-standalone\" \"pnpm run js-build-min-standalone-esm\" \"pnpm run js-build-min-theme\" \"pnpm run js-build-min-theme-esm\"",
+    "js-build-min-standalone": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
+    "js-build-min-standalone-esm": "cross-env MINIFY=true ESM=true vite build --config .build/vite.config.ts",
+    "js-build-min-theme": "cross-env MINIFY=true THEME=true vite build --config .build/vite.config.ts",
+    "js-build-min-theme-esm": "cross-env MINIFY=true THEME=true ESM=true vite build --config .build/vite.config.ts",
     "copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
-    "copy-libs": "node .build/copy-libs.mjs",
+    "copy-libs": "tsx .build/copy-libs.ts",
     "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
-    "import-fonts": "node .build/import-fonts.mjs",
+    "import-fonts": "tsx .build/import-fonts.ts",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
-    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
-    "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
+    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-build && pnpm run css-prefix\"",
+    "watch-js": "nodemon --watch js/ --ext ts,js --exec \"pnpm run js-build\"",
     "bundlewatch": "bundlewatch",
-    "generate-sri": "node .build/generate-sri.js",
-    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
-    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
+    "generate-sri": "tsx .build/generate-sri.ts",
+    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.{js,ts}\" --cache",
+    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.{js,ts}\" --cache",
+    "type-check": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -70,7 +71,7 @@
   "files": [
     "docs/**/*",
     "dist/**/*",
-    "js/**/*.{js,map}",
+    "js/**/*.{ts,js,map}",
     "img/**/*.{svg}",
     "scss/**/*.scss",
     "libs.json"
@@ -156,6 +157,7 @@
   "devDependencies": {
     "@hotwired/turbo": "^8.0.18",
     "@melloware/coloris": "^0.25.0",
+    "@types/node": "^22.0.0",
     "apexcharts": "^5.3.6",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
@@ -179,6 +181,7 @@
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
     "typed.js": "^2.1.0",
+    "typescript": "^5.9.3",
     "driver.js": "^1.0.0"
   },
   "directories": {

core/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": true,
+    "allowJs": true
+  },
+  "include": [
+    "js/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.spec.ts"
+  ]
+}
+