Gruntfile.js

/* eslint-disable no-console */
const path = require('path');
const process = require('process');
const fs = require('fs-extra');

module.exports = function (grunt) {
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-copy');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-replace');
	grunt.loadNpmTasks('@lodder/grunt-postcss');

	const sass = require('sass');

	require('load-grunt-tasks')(grunt); //sass

	grunt.registerTask('default', ['build']);

	grunt.registerTask('build', [
		'clean:library',

		'shell:buildjs',

		'copy:scss',
		'copy:scss_plugins',
		'sass:build',
		'postcss:prefix',
		'postcss:min',
		'replace:css_post',
		'replace:scss_plugin_paths',
		'copy_built_js',
	]);

	grunt.registerTask('dev', [
		'clean:library',
		'shell:buildjs',
		'copy_built_js',
		'watch',
	]);

	grunt.registerTask('serve', [
		'build',
		'builddocs',
		'connect',
		'check_doc_links',
		'watch',
		'copy_built_js',
	]);

	grunt.registerTask('builddocs', [
		'clean:builddocs',
		'shell:builddocs',
		'shell:rollupdocs',
		'replace:builddocs',
		'sass:builddocs',
		'postcss:builddocs',
	]);

	grunt.registerTask('copy_built_js', '', function () {
		const buildDir = path.join(__dirname, 'build');
		const distDir = path.join(__dirname, 'dist');
		for (const folder of fs.readdirSync(buildDir)) {
			fs.mkdirpSync(path.join(distDir, folder));

			fs.copySync(
				path.join(buildDir, folder),
				path.join(distDir, folder)
			);
		}
	});

	/**
	 * Check generated docs for broken links
	 * https://www.npmjs.com/package/broken-link-checker
	 */
	grunt.registerTask('check_doc_links', '', function () {
		const done = this.async();
		const { SiteChecker } = require('broken-link-checker');
		const options = {
			excludeExternalLinks: true,
			cacheMaxAge: 60,
		};

		let urls_checked = 0;
		let links_checked = 0;
		let failures = 0;

		const handlers = {
			error(error) {
				failures++;
				console.log('error', error);
			},
			page(error, page_url) {
				if (error) {
					failures++;
					console.log('error!', page_url);
				}

				urls_checked++;
			},
			junk(result) {
				links_checked++;
				if (result.broken) {
					failures++;
					console.log('broken junk found', result);
				}
			},
			link(link) {
				if (link.broken) {
					failures++;
					console.log('broken link', link);
				}
			},
			end() {
				console.log('urls checked', urls_checked);
				console.log('links checked', links_checked);
				console.log('failures', failures);

				done(failures === 0);
			},
		};

		const checker = new SiteChecker(options, handlers);
		checker.enqueue('http://localhost:8000/', {});
	});

	// build tom-select.custom.js
	const plugin_arg = grunt.option('plugins');
	const custom_file = path.resolve(
		process.cwd(),
		'./src/tom-select.custom.ts'
	);
	const custom_content = [
		'/* this file is generated by grunt when calling `npm run build -- --plugins=<plugins> */',
		'import TomSelect from "./tom-select";',
	];

	if (fs.existsSync(custom_file)) {
		fs.unlink(custom_file, (err) => {
			if (err) {
				console.error(err);
			}
		});
	}

	if (plugin_arg) {
		const plugin_args = plugin_arg.split(/\s*,\s*/);

		plugin_args.forEach((plugin_name) => {
			custom_content.push(
				`import ${plugin_name} from './plugins/${plugin_name}/plugin.js';`
			);
		});
		plugin_args.forEach((plugin_name) => {
			custom_content.push(
				`TomSelect.define('${plugin_name}', ${plugin_name});`
			);
		});
		custom_content.push('export default TomSelect;');

		fs.writeFile(custom_file, custom_content.join('\n'), (err) => {
			if (err) {
				console.error(err);
			}
		});
	}

	// find all plugin scss files
	const scss_plugin_files = [];
	const matched_files = grunt.file.expand(['src/plugins/*/plugin.scss']);
	for (let i = 0, n = matched_files.length; i < n; i++) {
		const plugin_name = matched_files[i].match(/src\/plugins\/(.+?)\//)[1];
		scss_plugin_files.push({
			src: matched_files[i],
			dest: 'build/scss/plugins/' + plugin_name + '.scss',
		});
	}

	// bootstrap browserlist https://github.com/twbs/bootstrap/blob/main/.browserslistrc
	const autoprefixer = require('autoprefixer')();

	const version_replace_options = {
		prefix: '//@@',
		variables: {
			version: '<%= pkg.version %>',
		},
	};

	const scss_plugin_path_replace_options = {
		patterns: [
			{
				match: /\.\.\/plugins\/(.+?)\/plugin\.scss/g,
				replacement: './plugins/$1.scss',
			},
		],
		usePrefix: false,
	};

	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),

		// delete old build files
		clean: {
			library: [
				'build/scss/*',
				'build/js/*',
				'build/esm/*',
				'build/css/*',
				'build/cjs/*',
			],
			builddocs: ['build-docs/*'],
		},

		// copy scss files to build folder
		copy: {
			scss: {
				files: [
					{
						'build/scss/tom-select.scss': [
							'src/scss/tom-select.scss',
						],
						'build/scss/tom-select.default.scss': [
							'src/scss/tom-select.default.scss',
						],
						'build/scss/tom-select.bootstrap4.scss': [
							'src/scss/tom-select.bootstrap4.scss',
						],
						'build/scss/tom-select.bootstrap5.scss': [
							'src/scss/tom-select.bootstrap5.scss',
						],
						'build/scss/_dropdown.scss': [
							'src/scss/_dropdown.scss',
						],
						'build/scss/_items.scss': ['src/scss/_items.scss'],
					},
				],
			},
			scss_plugins: {
				files: scss_plugin_files,
			},
		},

		// replace //@@version with current package version
		replace: {
			// add version to css & scss headers
			css_post: {
				options: version_replace_options,
				files: [
					{
						expand: true,
						flatten: false,
						src: ['build/css/*.css'],
						dest: '',
					},
					{
						expand: true,
						flatten: false,
						src: ['build/scss/*.scss'],
						dest: '',
					},
				],
			},
			builddocs: {
				options: version_replace_options,
				files: [
					{
						src: ['build-docs/js/index.bundle.js'],
						dest: 'build-docs/js/index.bundle.js',
					},
					{
						src: ['build-docs/index.html'],
						dest: 'build-docs/index.html',
					},
				],
			},
			scss_plugin_paths: {
				options: scss_plugin_path_replace_options,
				files: [
					{
						expand: true,
						flatten: false,
						src: ['build/scss/tom-select.scss'],
						dest: '',
					},
				],
			},
		},

		// compile css from scss
		sass: {
			options: {
				implementation: sass,
				style: 'expanded',
			},
			build: {
				files: [
					{
						'build/css/tom-select.css': [
							'src/scss/tom-select.scss',
						],
						'build/css/tom-select.default.css': [
							'src/scss/tom-select.default.scss',
						],
						'build/css/tom-select.bootstrap4.css': [
							'src/scss/-tom-select.bootstrap4.scss',
						],
						'build/css/tom-select.bootstrap5.css': [
							'src/scss/-tom-select.bootstrap5.scss',
						],
					},
				],
			},
			builddocs: {
				files: [
					{
						expand: true,
						flatten: true,
						ext: '.css',
						src: ['doc_src/css/*.scss'],
						dest: 'build-docs/css',
					},
				],
			},
		},

		// autoprefix && cssnanao
		postcss: {
			prefix: {
				options: {
					map: {
						inline: false, // save all sourcemaps as separate files...
					},
					processors: [
						//require('pixrem')(), // add fallbacks for rem units
						autoprefixer,
					],
				},
				files: [
					{
						expand: true,
						flatten: false,
						src: ['build/css/*.css'],
						dest: '',
					},
				],
			},
			min: {
				options: {
					map: {
						inline: false, // save all sourcemaps as separate files...
					},
					processors: [
						require('cssnano')(), // minify the result
					],
				},
				files: [
					{
						'build/css/tom-select.min.css': [
							'build/css/tom-select.css',
						],
						'build/css/tom-select.default.min.css': [
							'build/css/tom-select.default.css',
						],
						'build/css/tom-select.bootstrap4.min.css': [
							'build/css/tom-select.bootstrap4.css',
						],
						'build/css/tom-select.bootstrap5.min.css': [
							'build/css/tom-select.bootstrap5.css',
						],
					},
				],
			},
			builddocs: {
				options: {
					map: {
						inline: false, // save all sourcemaps as separate files...
					},
					processors: [
						autoprefixer,
						require('cssnano')(), // minify the result
					],
				},
				files: [
					{
						expand: true,
						flatten: true,
						src: ['build-docs/css/*.css'],
						dest: 'build-docs/css',
					},
				],
			},
		},

		// run server at http://localhost:8000 to view documentation and run examples
		connect: {
			server: {
				options: {
					base: 'build-docs',
				},
			},
		},

		// generate /build-docs
		shell: {
			builddocs: {
				command: 'npx @11ty/eleventy --config=.config/eleventy.js',
			},
			rollupdocs: {
				command: 'npx rollup -c .config/rollup.docs.js',
			},
			buildjs: {
				command: 'npx rollup -c .config/rollup.config.js',
			},
		},

		watch: {
			// changes to files in /doc_src: rebuild all of documentation
			docs: {
				files: ['doc_src/**'],
				tasks: ['builddocs', 'check_doc_links'],
			},
			// changes to files in /src: rebuild library and copy to docs
			src: {
				files: ['src/**'],
				tasks: ['build', 'shell:builddocs', 'copy_built_js'],
			},
		},
	});
};