Create theme support script in core (#2234)

core/.build/rollup.config.mjs

@@ -9,8 +9,8 @@ import banner from '@repo/banner'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const ESM = process.env.ESM === 'true'
+const THEME = process.env.THEME === 'true'
 
-let destinationFile = `tabler${ESM ? '.esm' : ''}`
 const external = []
 const plugins = [
 	babel({
@@ -27,8 +27,9 @@ plugins.push(
 	nodeResolve()
 )
 
+const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
 const rollupConfig = {
-	input: path.resolve(__dirname, `../js/tabler.${ESM ? 'esm' : 'umd'}.js`),
+	input: path.resolve(__dirname, `../js/tabler${THEME ? '-theme' : ''}.js`),
 	output: {
 		banner: banner(),
 		file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
@@ -40,7 +41,7 @@ const rollupConfig = {
 }
 
 if (!ESM) {
-	rollupConfig.output.name = 'tabler'
+	rollupConfig.output.name = `tabler${THEME ? '-theme' : ''}`
 }
 
 export default rollupConfig

core/js/tabler-theme.js

@@ -3,7 +3,6 @@
  * 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 = {
 	"theme": "light",
 	"theme-base": "gray",
@@ -12,12 +11,10 @@ const themeConfig = {
 	"theme-radius": "1",
 }
 
-// https://stackoverflow.com/a/901144
 const params = new Proxy(new URLSearchParams(window.location.search), {
 	get: (searchParams, prop) => searchParams.get(prop),
 })
 
-
 for (const key in themeConfig) {
 	const param = params[key]
 	let selectedValue

core/js/tabler.js

@@ -5,6 +5,7 @@ import "./src/dropdown"
 import "./src/tooltip"
 import "./src/popover"
 import "./src/switch-icon"
+import "./src/tab"
 import "./src/toast"
 
 export * as bootstrap from "bootstrap"

core/js/tabler.umd.js

@@ -1,30 +0,0 @@
-import "./src/autosize"
-import "./src/countup"
-import "./src/input-mask"
-import "./src/dropdown"
-import "./src/tooltip"
-import "./src/popover"
-import "./src/switch-icon"
-import "./src/tab"
-import "./src/toast"
-
-import * as bootstrap from "bootstrap"
-import * as tabler from "./src/tabler"
-
-export {
-	Alert,
-	Modal,
-	Toast,
-	Tooltip,
-	Tab,
-	Button,
-	Carousel,
-	Collapse,
-	Dropdown,
-	Popover,
-	ScrollSpy,
-	Offcanvas
-} from 'bootstrap'
-
-globalThis.bootstrap = bootstrap
-globalThis.tabler = tabler

core/package.json

@@ -16,12 +16,16 @@
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "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\"",
     "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
+    "js-compile": "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": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm",
+    "js-minify": "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",
     "copy": "pnpm run copy-img",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",

preview/build/rollup.config.mjs

@@ -25,8 +25,7 @@ plugins.push(
 
 const rollupConfig = {
 	input: [
-		path.resolve(__dirname, `../js/demo.js`),
+		path.resolve(__dirname, `../js/demo.js`)
-		path.resolve(__dirname, `../js/demo-theme.js`)
 	],
 	output: {
 		name: 'demo',

preview/package.json

@@ -14,9 +14,8 @@
     "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-minify": "pnpm run js-minify-demo && pnpm run js-minify-theme",
+    "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-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map\" --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js",
     "clean": "shx rm -rf dist demo",
     "html": "pnpm run html-build && pnpm run html-prettify",
     "html-build": "eleventy",

preview/pages/_layouts/base.html

@@ -42,9 +42,9 @@
 
 {% assign layout-dark = layout-dark | default: site.layoutDark %}
 <body{% if layout.body-class or body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if body-class %} {{ body-class }}{% endif %}"{% endif %}>
-	<!-- BEGIN DEMO THEME SCRIPT -->
+	<!-- BEGIN GLOBAL THEME SCRIPT -->
-	<script src="{{ page | relative }}/preview/js/demo-theme{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}"></script>
+	<script src="{{ page | relative }}/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}"></script>
-	<!-- END DEMO THEME SCRIPT -->
+	<!-- END GLOBAL THEME SCRIPT -->
 
 	{{ content }}
 

shared/banner/index.mjs

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-const pkgJson = path.join(__dirname, 'package.json')
+const pkgJson = path.join(__dirname, '../../core/package.json')
 const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
 
 const year = new Date().getFullYear()