From 27d4f0afd49d8749afb09ed56c31a5728730e3e1 Mon Sep 17 00:00:00 2001 From: mr150 Date: Mon, 12 Oct 2026 23:50:31 +0500 Subject: [PATCH 1/2] refactor(web)!: change bundle names --- docs/content/main.css | 11 +++--- package-lock.json | 47 ------------------------ packages/mlut/README.md | 9 ++--- packages/web/README.md | 2 +- packages/web/package.json | 7 ++-- packages/web/rollup.config.js | 2 +- packages/web/src/core.ts | 1 + packages/web/src/index.ts | 67 ++++++++++++++++++++++++++++++++++- packages/web/src/script.ts | 66 ---------------------------------- test/web/core.html | 2 +- test/web/index.html | 8 +++-- 11 files changed, 89 insertions(+), 133 deletions(-) create mode 100644 packages/web/src/core.ts delete mode 100644 packages/web/src/script.ts diff --git a/docs/content/main.css b/docs/content/main.css index a3b3ba54..4c2f77e3 100644 --- a/docs/content/main.css +++ b/docs/content/main.css @@ -96,14 +96,14 @@ Styleguide: start.main */ /* -Web package +Web The web package contains mlut core bundle and the script that can be used on a web page. ### Installation ### ```html - + ``` ### Usage ### @@ -111,9 +111,10 @@ The web package contains mlut core bundle and the script that can be used on a w Add the mlut script to your page and just use classes in the markup: ```html -
-
-

Simple text

+
+

mlut web

+

CDN version is very useful for atomic CSS framework

+
``` You can also use Sass config with the special `style` tag ```html diff --git a/package-lock.json b/package-lock.json index fdf506ba..2fbd133e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1724,29 +1724,6 @@ } } }, - "node_modules/@rollup/plugin-inject": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz", - "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@rollup/pluginutils": "^5.0.1", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.3" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, "node_modules/@rollup/plugin-node-resolve": { "version": "15.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz", @@ -11306,16 +11283,6 @@ "es5-ext": "~0.10.2" } }, - "node_modules/magic-string": { - "version": "0.30.21", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", - "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.5.5" - } - }, "node_modules/make-error": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", @@ -14665,19 +14632,6 @@ "node": ">=8.3" } }, - "node_modules/rollup-plugin-polyfill-node": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.13.0.tgz", - "integrity": "sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@rollup/plugin-inject": "^5.0.4" - }, - "peerDependencies": { - "rollup": "^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" - } - }, "node_modules/rollup-plugin-serve": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/rollup-plugin-serve/-/rollup-plugin-serve-1.1.1.tgz", @@ -19259,7 +19213,6 @@ "@rollup/plugin-typescript": "^12.3.0", "path-browserify-esm": "^1.0.6", "rollup": "^4.59.0", - "rollup-plugin-polyfill-node": "^0.13.0", "sass": "^1.93.0", "typescript": "^5.8.0" } diff --git a/packages/mlut/README.md b/packages/mlut/README.md index 5e2f2c08..b35b35a5 100644 --- a/packages/mlut/README.md +++ b/packages/mlut/README.md @@ -179,7 +179,7 @@ npm i mlut -D #### CDN #### ```html - + ``` ### Usage ### @@ -188,9 +188,10 @@ npm i mlut -D Add the mlut script to your page and just use classes in the markup: ```html -
-
-

Simple text

+
+

mlut web

+

CDN version is very useful for atomic CSS framework

+
``` You can also use Sass config with the special `style` tag ```html diff --git a/packages/web/README.md b/packages/web/README.md index ec627316..986abbb5 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -8,7 +8,7 @@ The [mlut](https://github.com/mlutcss/mlut) package that can be used on a web pa Add the script to your page: ```html - + ``` And just use classes in the markup: diff --git a/packages/web/package.json b/packages/web/package.json index 6075f40d..b2e9324c 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -6,7 +6,7 @@ "type": "module", "license": "MIT", "homepage": "https://mlut.style/", - "main": "./dist/script.js", + "main": "./dist/index.js", "keywords": [ "mlut", "atomic css", @@ -26,11 +26,11 @@ }, "exports": { ".": { - "default": "./dist/index.js" + "default": "./dist/core.js" } }, "scripts": { - "build:main": "rm -rf dist && rollup -c", + "build:core": "rm -rf dist && rollup -c", "build:script": "rm -rf dist && export SCRIPT_BUILD=true && rollup -c", "build": "rm -rf dist && rollup -c && export SCRIPT_BUILD=true && rollup -c" }, @@ -45,7 +45,6 @@ "@rollup/plugin-typescript": "^12.3.0", "path-browserify-esm": "^1.0.6", "rollup": "^4.59.0", - "rollup-plugin-polyfill-node": "^0.13.0", "sass": "^1.93.0", "typescript": "^5.8.0" } diff --git a/packages/web/rollup.config.js b/packages/web/rollup.config.js index 630b93ba..112cd8a6 100644 --- a/packages/web/rollup.config.js +++ b/packages/web/rollup.config.js @@ -6,7 +6,7 @@ import alias from '@rollup/plugin-alias'; const __dirname = new URL('.', import.meta.url).pathname; const isScriptBuild = !!process.env.SCRIPT_BUILD; -const inputPath = isScriptBuild ? 'src/script.ts' : 'src/index.ts'; +const inputPath = isScriptBuild ? 'src/index.ts' : 'src/core.ts'; const plugins = [ nodeResolve(), diff --git a/packages/web/src/core.ts b/packages/web/src/core.ts new file mode 100644 index 00000000..19db3206 --- /dev/null +++ b/packages/web/src/core.ts @@ -0,0 +1 @@ +export * from '@mlut/core'; diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts index 19db3206..2ccf2967 100644 --- a/packages/web/src/index.ts +++ b/packages/web/src/index.ts @@ -1 +1,66 @@ -export * from '@mlut/core'; +import { jitEngine } from '@mlut/core'; + +const pageName = 'index.html'; +const configName = 'style.scss'; +const defaultConfig = '@use "@mlut/core/tools";'; +const headElm = document.head; +const styleElm = document.createElement('style'); +const configElm = headElm.querySelector('style[type="text/scss"]'); +const isConfigExist = configElm != null; +headElm.appendChild(styleElm); + +function debounce(fn: (...args: T[]) => unknown, timeout: number) { + let timer: number | undefined; + + return (...args: T[]) => { + clearTimeout(timer); + timer = window.setTimeout(fn, timeout, ...args); + }; +} + +function replaceHtmlChars(str: string) { + return str + .replaceAll('&', '&') + .replaceAll('<', '<') + .replaceAll('>', '>'); +} + +const writeCss = debounce(async () => { + const markup = `"${document.documentElement.className}"\n${document.body.outerHTML}`; + jitEngine.putContent(pageName, replaceHtmlChars(markup)); + styleElm.innerHTML = await jitEngine.generateCss(); +}, 250); + +await jitEngine.init( + isConfigExist ? + [configName, configElm.innerHTML] : undefined +); + +const mainObserver = new MutationObserver((mutations) => { + const isRelevant = mutations.some( + (item) => (item.type === 'attributes' && item.attributeName !== 'style') || + (item.type === 'childList' && item.target.nodeName !== "STYLE") + ); + + if (!isRelevant) { + return; + } + + writeCss(); +}); + +mainObserver.observe(document.documentElement, { + attributes: true, + childList: true, + subtree: true, +}); + +if (isConfigExist) { + new MutationObserver((async () => { + await jitEngine.updateSassConfig(configElm.innerHTML.trim() || defaultConfig); + writeCss(); + })).observe(configElm, { + characterData: true, + subtree: true, + }); +} diff --git a/packages/web/src/script.ts b/packages/web/src/script.ts deleted file mode 100644 index 2ccf2967..00000000 --- a/packages/web/src/script.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { jitEngine } from '@mlut/core'; - -const pageName = 'index.html'; -const configName = 'style.scss'; -const defaultConfig = '@use "@mlut/core/tools";'; -const headElm = document.head; -const styleElm = document.createElement('style'); -const configElm = headElm.querySelector('style[type="text/scss"]'); -const isConfigExist = configElm != null; -headElm.appendChild(styleElm); - -function debounce(fn: (...args: T[]) => unknown, timeout: number) { - let timer: number | undefined; - - return (...args: T[]) => { - clearTimeout(timer); - timer = window.setTimeout(fn, timeout, ...args); - }; -} - -function replaceHtmlChars(str: string) { - return str - .replaceAll('&', '&') - .replaceAll('<', '<') - .replaceAll('>', '>'); -} - -const writeCss = debounce(async () => { - const markup = `"${document.documentElement.className}"\n${document.body.outerHTML}`; - jitEngine.putContent(pageName, replaceHtmlChars(markup)); - styleElm.innerHTML = await jitEngine.generateCss(); -}, 250); - -await jitEngine.init( - isConfigExist ? - [configName, configElm.innerHTML] : undefined -); - -const mainObserver = new MutationObserver((mutations) => { - const isRelevant = mutations.some( - (item) => (item.type === 'attributes' && item.attributeName !== 'style') || - (item.type === 'childList' && item.target.nodeName !== "STYLE") - ); - - if (!isRelevant) { - return; - } - - writeCss(); -}); - -mainObserver.observe(document.documentElement, { - attributes: true, - childList: true, - subtree: true, -}); - -if (isConfigExist) { - new MutationObserver((async () => { - await jitEngine.updateSassConfig(configElm.innerHTML.trim() || defaultConfig); - writeCss(); - })).observe(configElm, { - characterData: true, - subtree: true, - }); -} diff --git a/test/web/core.html b/test/web/core.html index 0045ac3c..6a1a5aaa 100644 --- a/test/web/core.html +++ b/test/web/core.html @@ -18,7 +18,7 @@

mlut tests

diff --git a/test/web/index.html b/test/web/index.html index 0dc2f815..7f6c60c3 100644 --- a/test/web/index.html +++ b/test/web/index.html @@ -3,13 +3,15 @@ Web package test - + -

mlut web test

-

CDN version is very useful for atomic CSS framework. Bazarim

+
+

mlut web test

+

CDN version is very useful for atomic CSS framework. Infa sotka

+
From ba6f2a9917084c619b920d165915786a86af7a5a Mon Sep 17 00:00:00 2001 From: mr150 Date: Mon, 12 Oct 2026 23:55:33 +0500 Subject: [PATCH 2/2] chore(web): release v2.0.0 --- package-lock.json | 2 +- packages/web/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2fbd133e..7e37eed7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19203,7 +19203,7 @@ }, "packages/web": { "name": "@mlut/web", - "version": "1.0.0", + "version": "2.0.0", "license": "MIT", "devDependencies": { "@mlut/core": "^2.5.1", diff --git a/packages/web/package.json b/packages/web/package.json index b2e9324c..e4226e10 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@mlut/web", - "version": "1.0.0", + "version": "2.0.0", "description": "mlut package that can be used on a web page", "author": "mr150", "type": "module",