refactor: migrate build system from Rollup to Vite (#2578)

.build/vite.config.helper.mjs

@@ -0,0 +1,60 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+
+/**
+ * Creates a Vite configuration for building libraries
+ * @param {Object} options - Configuration options
+ * @param {string} options.entry - Path to the entry file
+ * @param {string|undefined} options.name - Library name (undefined for ESM)
+ * @param {string|Function} options.fileName - Output file name or function returning it
+ * @param {string[]} options.formats - Output formats (e.g., ['es'], ['umd'], ['es', 'umd'])
+ * @param {string} options.outDir - Output directory path
+ * @param {string|undefined} options.banner - Optional banner text to add to output
+ * @returns {import('vite').UserConfig} Vite configuration
+ */
+export function createViteConfig({
+	entry,
+	name,
+	fileName,
+	formats,
+	outDir,
+	banner
+}) {
+	const rollupOutput = {
+		generatedCode: {
+			constBindings: true
+		}
+	}
+
+	// Add banner if provided
+	if (banner) {
+		rollupOutput.banner = banner
+	}
+
+	return defineConfig({
+		build: {
+			lib: {
+				entry: path.resolve(entry),
+				name: name,
+				fileName: typeof fileName === 'function' ? fileName : () => fileName,
+				formats: formats
+			},
+			outDir: path.resolve(outDir),
+			emptyOutDir: false,
+			sourcemap: true,
+			rollupOptions: {
+				output: rollupOutput
+			},
+			target: 'es2015',
+			minify: false // Minification is done by terser in a separate step
+		},
+		define: {
+			'process.env.NODE_ENV': '"production"'
+		},
+		esbuild: {
+			target: 'es2015'
+		}
+	})
+}
+

.changeset/migrate-rollup-to-vite.md

@@ -0,0 +1,8 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+"@tabler/docs": minor
+---
+
+Migrated build system from Rollup to Vite across all packages. Replaced `rollup.config.mjs` with `vite.config.mjs` and updated build scripts to use `vite build` instead of `rollup`. Build outputs remain identical (UMD and ESM formats) with no breaking changes for end users.
+

core/.build/rollup.config.mjs

@@ -1,47 +0,0 @@
-import path from 'node:path'
-import process from 'node:process'
-import { fileURLToPath } from 'node:url'
-import { babel } from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import banner from '../../shared/banner/index.mjs'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const ESM = process.env.ESM === 'true'
-const THEME = process.env.THEME === 'true'
-
-const external = []
-const plugins = [
-	babel({
-		exclude: 'node_modules/**',
-		babelHelpers: 'bundled'
-	})
-]
-
-plugins.push(
-	replace({
-		'process.env.NODE_ENV': '"production"',
-		preventAssignment: true
-	}),
-	nodeResolve()
-)
-
-const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
-const rollupConfig = {
-	input: path.resolve(__dirname, `../js/tabler${THEME ? '-theme' : ''}.js`),
-	output: {
-		banner: banner(),
-		file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
-		format: ESM ? 'esm' : 'umd',
-		generatedCode: 'es2015'
-	},
-	external,
-	plugins
-}
-
-if (!ESM) {
-	rollupConfig.output.name = `tabler${THEME ? '-theme' : ''}`
-}
-
-export default rollupConfig

core/.build/vite.config.mjs

@@ -0,0 +1,26 @@
+import path from 'node:path'
+import process from 'node:process'
+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 ESM = process.env.ESM === 'true'
+const THEME = process.env.THEME === 'true'
+
+const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
+const entryFile = `tabler${THEME ? '-theme' : ''}`
+const libraryName = `tabler${THEME ? '-theme' : ''}`
+
+const bannerText = getBanner()
+
+export default createViteConfig({
+	entry: path.resolve(__dirname, `../js/${entryFile}.js`),
+	name: ESM ? undefined : libraryName,
+	fileName: () => `${destinationFile}.js`,
+	formats: [ESM ? 'es' : 'umd'],
+	outDir: path.resolve(__dirname, '../dist/js'),
+	banner: bannerText
+})
+

core/package.json

@@ -20,10 +20,10 @@
     "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": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-theme-esm": "cross-env THEME=true ESM=true vite build --config .build/vite.config.mjs",
-    "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-theme": "cross-env THEME=true vite build --config .build/vite.config.mjs",
-    "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone": "vite build --config .build/vite.config.mjs",
-    "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
+    "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",

docs/.build/rollup.config.mjs

@@ -1,40 +0,0 @@
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { babel } from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import dotenv from "rollup-plugin-dotenv"
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const external = []
-const plugins = [
-	dotenv({
-		cwd: path.resolve(__dirname, '../..'),
-	}),
-	babel({
-		exclude: 'node_modules/**',
-		babelHelpers: 'bundled'
-	}),
-	replace({
-		'process.env.NODE_ENV': '"production"',
-		preventAssignment: true
-	}),
-	nodeResolve()
-]
-
-const rollupConfig = {
-	input: [
-		path.resolve(__dirname, `../js/docs.js`)
-	],
-	output: {
-		name: 'docs',
-		dir: path.resolve(__dirname, `../dist/js`),
-		format: 'esm',
-		generatedCode: 'es2015'
-	},
-	external,
-	plugins
-}
-
-export default rollupConfig

docs/.build/vite.config.mjs

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

docs/package.json

@@ -8,7 +8,7 @@
     "build-assets": "concurrently \"pnpm run js\" \"pnpm run css\"",
     "html": "eleventy",
     "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "rollup --config .build/rollup.config.mjs --sourcemap",
+    "js-compile": "vite build --config .build/vite.config.mjs",
     "js-minify": "pnpm run js-minify-docs",
     "js-minify-docs": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/docs.js.map,includeSources,url=docs.min.js.map\" --output dist/js/docs.min.js dist/js/docs.js",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-minify",

package.json

@@ -23,10 +23,6 @@
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
     "@playwright/test": "^1.53.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
     "adm-zip": "^0.5.16",
     "autoprefixer": "^10.4.21",
     "bundlewatch": "^0.4.1",
@@ -41,8 +37,7 @@
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.6.2",
-    "rollup": "4.52.5",
+    "vite": "^7.3.0",
-    "rollup-plugin-dotenv": "^0.5.1",
     "rtlcss": "^4.3.0",
     "sass": "1.89.2",
     "shelljs": "^0.10.0",

preview/.build/rollup.config.mjs

@@ -1,41 +0,0 @@
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { babel } from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import banner from '../../shared/banner/index.mjs'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const external = []
-const plugins = [
-	babel({
-		exclude: 'node_modules/**',
-		babelHelpers: 'bundled'
-	})
-]
-
-plugins.push(
-	replace({
-		'process.env.NODE_ENV': '"production"',
-		preventAssignment: true
-	}),
-	nodeResolve()
-)
-
-const rollupConfig = {
-	input: [
-		path.resolve(__dirname, `../js/demo.js`)
-	],
-	output: {
-		name: 'demo',
-		banner: banner('Demo'),
-		dir: path.resolve(__dirname, `../dist/preview/js`),
-		format: 'esm',
-		generatedCode: 'es2015'
-	},
-	external,
-	plugins
-}
-
-export default rollupConfig

preview/.build/vite.config.mjs

@@ -0,0 +1,18 @@
+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/package.json

@@ -15,7 +15,7 @@
     "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": "rollup --config .build/rollup.config.mjs --sourcemap",
+    "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",
     "clean": "shx rm -rf dist demo",