Migrate core JavaScript to TypeScript (#2582)

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

preview/.build/banner.mjs

@@ -1,21 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const pkgJson = path.join(__dirname, '../package.json')
-const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
-
-const year = new Date().getFullYear()
-
-function getBanner(pluginFilename) {
-	return `/*!
-  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
-  * Copyright 2018-${year} The Tabler Authors
-  * Copyright 2018-${year} codecalm.net Paweł Kuna
-  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */`
-}
-
-export default getBanner

preview/.build/vite.config.mjs

@@ -1,18 +0,0 @@
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { createViteConfig } from '../../.build/vite.config.helper.mjs'
-import getBanner from '../../shared/banner/index.mjs'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const bannerText = getBanner('Demo')
-
-export default createViteConfig({
-	entry: path.resolve(__dirname, '../js/demo.js'),
-	name: 'demo',
-	fileName: () => 'demo.js',
-	formats: ['es'],
-	outDir: path.resolve(__dirname, '../dist/preview/js'),
-	banner: bannerText
-})
-

preview/.build/vite.config.ts

@@ -0,0 +1,26 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+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))
+
+const MINIFY = process.env.MINIFY === 'true'
+const bannerText = getBanner('Demo')
+
+// Try .ts first, fallback to .js for gradual migration
+const entryPath = path.resolve(__dirname, '../js/demo')
+const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
+
+export default createViteConfig({
+	entry: entry,
+	name: 'demo',
+	fileName: () => MINIFY ? 'demo.min.js' : 'demo.js',
+	formats: ['es'],
+	outDir: path.resolve(__dirname, '../dist/preview/js'),
+	banner: bannerText,
+	minify: MINIFY
+})
+

preview/js/demo.ts

@@ -1,5 +1,14 @@
 // Setting items
-const items = {
+interface SettingItem {
+	localStorage: string
+	default: string
+}
+
+interface SettingsItems {
+	[key: string]: SettingItem
+}
+
+const items: SettingsItems = {
 	"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
 	"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
 	"container-layout": {
@@ -9,14 +18,14 @@ const items = {
 }
 
 // Theme config
-const config = {}
+const config: Record<string, string> = {}
 for (const [key, params] of Object.entries(items)) {
 	const lsParams = localStorage.getItem(params.localStorage)
 	config[key] = lsParams ? lsParams : params.default
 }
 
 // Parse url params
-const parseUrl = () => {
+const parseUrl = (): void => {
 	const search = window.location.search.substring(1)
 	const params = search.split("&")
 
@@ -36,11 +45,11 @@ const parseUrl = () => {
 }
 
 // Toggle form controls
-const toggleFormControls = (form) => {
+const toggleFormControls = (form: HTMLFormElement): void => {
 	for (const [key, params] of Object.entries(items)) {
 		const elem = form.querySelector(
 			`[name="settings-${key}"][value="${config[key]}"]`,
-		)
+		) as HTMLInputElement | null
 
 		if (elem) {
 			elem.checked = true
@@ -49,27 +58,34 @@ const toggleFormControls = (form) => {
 }
 
 // Submit form
-const submitForm = (form) => {
+const submitForm = (form: HTMLFormElement): void => {
 	// Save data to localStorage
 	for (const [key, params] of Object.entries(items)) {
 		// Save to localStorage
-		const value = form.querySelector(`[name="settings-${key}"]:checked`).value
-		localStorage.setItem(params.localStorage, value)
+		const checkedInput = form.querySelector(`[name="settings-${key}"]:checked`) as HTMLInputElement
+		if (checkedInput) {
+			const value = checkedInput.value
+			localStorage.setItem(params.localStorage, value)
 
-		// Update local variables
-		config[key] = value
+			// Update local variables
+			config[key] = value
+		}
 	}
 
 	window.dispatchEvent(new Event("resize"))
 
-	new bootstrap.Offcanvas(form).hide()
+	// Bootstrap is available globally
+	const bootstrap = (window as any).bootstrap
+	if (bootstrap) {
+		new bootstrap.Offcanvas(form).hide()
+	}
 }
 
 // Parse url
 parseUrl()
 
 // Elements
-const form = document.querySelector("#offcanvas-settings")
+const form = document.querySelector("#offcanvas-settings") as HTMLFormElement | null
 
 // Toggle form controls
 if (form) {
@@ -81,3 +97,4 @@ if (form) {
 
 	toggleFormControls(form)
 }
+

preview/package.json

@@ -10,14 +10,14 @@
     "watch-html": "cross-env NODE_ENV=development eleventy --serve --port=3000 --watch --incremental",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css\"",
-    "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-minify",
-    "css-compile": "sass scss/:dist/preview/css/ --no-source-map --load-path=node_modules",
+    "css": "pnpm run css-build && pnpm run css-prefix && pnpm run css-minify",
+    "css-build": "sass scss/:dist/preview/css/ --no-source-map --load-path=node_modules",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/preview/css/*.css\" \"!dist/preview/css/*.rtl*.css\" \"!dist/preview/css/*.min.css\"",
     "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/preview/css/ --batch --batch-suffix \".min\" \"dist/preview/css/*.css\" \"!dist/preview/css/*.min.css\" \"!dist/preview/css/*rtl*.css\"",
-    "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "vite build --config .build/vite.config.mjs",
-    "js-minify": "pnpm run js-minify-demo",
-    "js-minify-demo": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map\" --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
+    "js": "pnpm run js-build && pnpm run js-build-min",
+    "js-build": "vite build --config .build/vite.config.ts",
+    "js-build-min": "pnpm run js-build-min-demo",
+    "js-build-min-demo": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
     "clean": "shx rm -rf dist demo",
     "html": "pnpm run html-build && pnpm run html-prettify && pnpm run html-remove-prettier-ignore",
     "html-build": "eleventy",