Monorepo structure, remove Gulp, new build process (#2116)

.browserslistrc

@@ -1,11 +1,6 @@
 >= 1%
-last 1 major version
+last 2 versions
+Firefox ESR 
 not dead
-Chrome >= 60
-Firefox >= 60
-Edge >= 15.15063
-Explorer 11
-iOS >= 10
-Safari >= 10
-Android >= 6
-not ExplorerMobile <= 11
+safari >= 15.4
+iOS >= 15.4

.build/download-images.js

@@ -1,57 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('node:fs')
-const path = require('node:path')
-const request = require('request')
-const filePath = path.join(__dirname, '../src/pages/_data/photos.json')
-
-const photos = JSON.parse(fs.readFileSync(filePath, 'utf8'))
-
-const urlTitle = (str) => {
-	str = str
-		.toLowerCase()
-		.replaceAll('&', 'and')
-		.replace(/[^[a-z0-9-]/g, '-')
-		.replace(/-+/g, '-')
-
-	return str
-}
-
-const download = function (uri, filename, callback, error) {
-	request.head(uri, function (err, res, body) {
-		request(uri).pipe(fs.createWriteStream(filename))
-			.on('close', callback)
-			.on('error', error)
-	})
-}
-
-async function downloadPhotos() {
-	for (const key in photos) {
-		const photo = photos[key]
-
-		let filename, i = 1;
-
-		do {
-			filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
-			i++
-		} while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
-
-		await new Promise((resolve, reject) => {
-			download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function () {
-				resolve()
-			}, function () {
-				reject()
-			});
-		})
-
-		photos[key]['file'] = filename
-		photos[key]['horizontal'] = photo['width'] > photo['height']
-	}
-
-	fs.writeFileSync(filePath, JSON.stringify(photos))
-}
-
-downloadPhotos();
-

.build/import-icons.js

@@ -1,37 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path');
-
-const iconsTags = require('../node_modules/@tabler/icons/icons.json'),
-	iconsPkg = require('../node_modules/@tabler/icons/package.json');
-
-const prepareSvgFile = (svg) => {
-	return svg.replace(/\n/g, '').replace(/>\s+</g, '><').replace(/\s+/g, ' ')
-}
-
-let svgList = {}
-for (let iconName in iconsTags) {
-	let iconData = iconsTags[iconName]
-	svgList[iconName] = {
-		name: iconName,
-		svg: {
-			outline: iconData.styles.outline ? prepareSvgFile(fs.readFileSync(path.join(__dirname, `../node_modules/@tabler/icons/icons/outline/${iconName}.svg`), 'utf8')) : null,
-			filled: iconData.styles.filled ? prepareSvgFile(fs.readFileSync(path.join(__dirname, `../node_modules/@tabler/icons/icons/filled/${iconName}.svg`), 'utf8')) : null,
-		}
-	}
-}
-
-fs.writeFileSync(
-	path.join(__dirname, `../src/pages/_data/icons-info.json`),
-	JSON.stringify({
-		version: iconsPkg.version,
-		count: Object.values(svgList).reduce((acc, icon) => {
-			return acc + (icon.svg.outline ? 1 : 0) + (icon.svg.filled ? 1 : 0)
-		}, 0)
-	})
-)
-
-fs.writeFileSync(path.join(__dirname, `../src/pages/_data/icons.json`), JSON.stringify(svgList))

.build/import-illustrations.js

@@ -1,44 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path'),
-	glob = require('glob');
-
-const illustrations = glob
-	.sync(path.join(__dirname, `../src/static/illustrations/light/*.png`))
-	.map((file) => {
-		return path.basename(file, '.png')
-	})
-
-fs.writeFileSync(
-	path.join(__dirname, `../src/pages/_data/illustrations.json`),
-	JSON.stringify(illustrations)
-)
-
-
-// let i = {}
-// const dirs = ['light', 'dark', 'autodark']
-// const ilustrations = ['not-found', 'computer-fix', 'boy-with-key', 'boy-girl']
-
-// for(const dir of dirs) {
-// 	i[dir] = {}
-
-// 	for(const ilustration of ilustrations) {
-// 		let svg = fs.readFileSync(path.join(__dirname, `../src/pages/_free-illustrations/${dir}/${ilustration}.svg`), 'utf8')
-
-// 		svg = svg
-// 			.replace(/\n+/g, ' ')
-// 			.replace(/>\s+</g, '><')
-// 			.replace(/\s+/g, ' ')
-// 			.replace(/^[\n\s-]+/, '')
-
-// 		i[dir][ilustration] = svg
-// 	}
-// }
-
-// fs.writeFileSync(
-// 	path.join(__dirname, `../src/pages/_data/free-illustrations.json`),
-// 	JSON.stringify(i)
-// )

.build/reformat-mdx.js

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path'),
-	glob = require('glob'),
-	beautifyHtml = require('js-beautify').html;
-
-const docs = glob
-	.sync(path.join(__dirname, `../docs/**/*.mdx`))
-
-docs.forEach((file, i) => {
-	const oldContent = fs.readFileSync(file, 'utf8')
-
-	// get codeblocks from markdown
-	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
-		if (m2 === 'html') {
-			let m3m = beautifyHtml(m3, {
-				"indent_size": 2,
-				"indent_char": " ",
-			}).trim();
-
-			// remove empty lines
-			m3m = m3m.replace(/^\s*[\r\n]/gm, '');
-
-			return m1 + m3m + "\n" + m4;
-		}
-		return m
-	})
-
-	if (content !== oldContent) {
-		fs.writeFileSync(file, content, 'utf8')
-		console.log(`Reformatted ${file}`)
-	}
-})

.build/unused-files.js

@@ -1,26 +0,0 @@
-const glob = require('glob');
-const fs = require('fs')
-const path = require('path')
-
-const srcDir = path.join(__dirname, '../src')
-
-let foundFiles = []
-glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
-	let fileContent = fs.readFileSync(file)
-
-	fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
-		filename = `${srcDir}/pages/_includes/${filename}`
-
-		if (!foundFiles.includes(filename)) {
-			foundFiles.push(filename)
-		}
-	})
-})
-
-let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
-
-includeFiles.forEach((file) => {
-	if (!foundFiles.includes(file)) {
-		console.log('file', file)
-	}
-})

.changeset/short-rocks-battle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.

.gitignore

@@ -28,6 +28,7 @@ node_modules/
 .yarn
 .next
 .vercel
+.turbo
 package-lock.json
 
 demo/

.vscode/settings.json

@@ -1,14 +1,12 @@
 {
    "files.exclude": {
-      "**/.git": false,
-      "**/.svn": false,
-      "**/.hg": false,
-      "**/CVS": false,
-      "**/.DS_Store": false,
-      "**/Thumbs.db": false,
-      "**/.idea/": false,
-      "dist": false,
-      "demo": false
+      "**/.git": true,
+      "**/.svn": true,
+      "**/.hg": true,
+      "**/CVS": true,
+      "**/.DS_Store": true,
+      "**/Thumbs.db": true,
+      "**/.idea/": true
    },
    "explorerExclude.backup": {}
 }

build/reformat-mdx.mjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url'
+import { sync } from 'glob';
+import beautify from 'js-beautify';
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx'))
+
+docs.forEach((file, i) => {
+	const oldContent = readFileSync(file, 'utf8')
+
+	// get codeblocks from markdown
+	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
+		if (m2 === 'html') {
+			// m3 = beautify.default.html(m3, {
+			// 	"indent_size": 2,
+			// 	"indent_char": " ",
+			// }).trim();
+
+			// remove empty lines
+			m3 = m3.replace(/^\s*[\r\n]/gm, '');
+
+			return m1 + m3 + "\n" + m4;
+		}
+		return m
+	})
+
+	if (content !== oldContent) {
+		writeFileSync(file, content, 'utf8')
+		console.log(`Reformatted ${file}`)
+	}
+})

core/build/postcss.config.mjs

@@ -0,0 +1,15 @@
+export default context => {
+	return {
+		map: {
+			inline: false,
+			annotation: true,
+			sourcesContent: true
+		},
+		plugins: {
+			autoprefixer: {
+				cascade: false
+			},
+			rtlcss: context.env === 'RTL'
+		}
+	}
+}

core/build/rollup.config.mjs

@@ -0,0 +1,46 @@
+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 '@repo/banner'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const ESM = process.env.ESM === 'true'
+
+let destinationFile = `tabler${ESM ? '.esm' : ''}`
+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/tabler.${ESM ? 'esm' : 'umd'}.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'
+}
+
+export default rollupConfig