From dd26b62607e059d285ce7985992e055377c9a75b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 24 Mar 2025 00:13:50 +0100 Subject: [PATCH] Create theme support script in core (#2234) --- core/.build/rollup.config.mjs | 7 +++-- .../demo-theme.js => core/js/tabler-theme.js | 3 -- core/js/{tabler.esm.js => tabler.js} | 1 + core/js/tabler.umd.js | 30 ------------------- core/package.json | 8 +++-- preview/build/rollup.config.mjs | 3 +- preview/package.json | 3 +- preview/pages/_layouts/base.html | 6 ++-- shared/banner/index.mjs | 2 +- 9 files changed, 17 insertions(+), 46 deletions(-) rename preview/js/demo-theme.js => core/js/tabler-theme.js (96%) rename core/js/{tabler.esm.js => tabler.js} (95%) delete mode 100644 core/js/tabler.umd.js diff --git a/core/.build/rollup.config.mjs b/core/.build/rollup.config.mjs index e0b1dfcb9..85c735f44 100644 --- a/core/.build/rollup.config.mjs +++ b/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 \ No newline at end of file diff --git a/preview/js/demo-theme.js b/core/js/tabler-theme.js similarity index 96% rename from preview/js/demo-theme.js rename to core/js/tabler-theme.js index 6c09ffca0..45df216f1 100644 --- a/preview/js/demo-theme.js +++ b/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 diff --git a/core/js/tabler.esm.js b/core/js/tabler.js similarity index 95% rename from core/js/tabler.esm.js rename to core/js/tabler.js index 430f28aa1..df66f2712 100644 --- a/core/js/tabler.esm.js +++ b/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" diff --git a/core/js/tabler.umd.js b/core/js/tabler.umd.js deleted file mode 100644 index b21c3b9cf..000000000 --- a/core/js/tabler.umd.js +++ /dev/null @@ -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 diff --git a/core/package.json b/core/package.json index 179010948..d956bcff4 100644 --- a/core/package.json +++ b/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\"", diff --git a/preview/build/rollup.config.mjs b/preview/build/rollup.config.mjs index 804841509..d31d69724 100644 --- a/preview/build/rollup.config.mjs +++ b/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-theme.js`) + path.resolve(__dirname, `../js/demo.js`) ], output: { name: 'demo', diff --git a/preview/package.json b/preview/package.json index 194426098..5c447e069 100644 --- a/preview/package.json +++ b/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", diff --git a/preview/pages/_layouts/base.html b/preview/pages/_layouts/base.html index 165c1aab0..ba4600536 100644 --- a/preview/pages/_layouts/base.html +++ b/preview/pages/_layouts/base.html @@ -42,9 +42,9 @@ {% assign layout-dark = layout-dark | default: site.layoutDark %} - - - + + + {{ content }} diff --git a/shared/banner/index.mjs b/shared/banner/index.mjs index a0f489086..a92d81f28 100644 --- a/shared/banner/index.mjs +++ b/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()