Refactor/web rename

docs/content/main.css

@@ -96,24 +96,25 @@ 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
-<script src="https://unpkg.com/@mlut/web@latest/dist/script.js" type="module"></script>
+<script src="https://unpkg.com/@mlut/web" type="module"></script>
 ```
 
 ### Usage ###
 
 Add the mlut script to your page and just use classes in the markup:
 
 ```html
-<div class="D-g Gtc-t3">
-  <div class="Bd P2u">
-    <h3>Simple text</h3>
+<div class="P2u Bd-s">
+  <h1 class="Fns3r C-red">mlut web</h1>
+  <p class="Fnst-i">CDN version is very useful for atomic CSS framework</p>
+</div>
 ```
 You can also use Sass config with the special `style` tag
 ```html

packages/mlut/README.md

@@ -179,7 +179,7 @@ npm i mlut -D
 #### CDN ####
 
 ```html
-<script src="https://unpkg.com/@mlut/web@latest/dist/script.js" type="module"></script>
+<script src="https://unpkg.com/@mlut/web" type="module"></script>
 ```
 
 ### Usage ###
@@ -188,9 +188,10 @@ npm i mlut -D
 
 Add the mlut script to your page and just use classes in the markup:
 ```html
-<div class="D-g Gtc-t3">
-  <div class="Bd P2u">
-    <h3>Simple text</h3>
+<div class="P2u Bd-s">
+  <h1 class="Fns3r C-red">mlut web</h1>
+  <p class="Fnst-i">CDN version is very useful for atomic CSS framework</p>
+</div>
 ```
 You can also use Sass config with the special `style` tag
 ```html

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
-<script src="https://unpkg.com/@mlut/web@latest/dist/script.js" type="module"></script>
+<script src="https://unpkg.com/@mlut/web" type="module"></script>
 ```
 
 And just use classes in the markup:

packages/web/package.json

@@ -1,12 +1,12 @@
 {
 	"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",
 	"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"
 	}

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(),

packages/web/src/core.ts

@@ -0,0 +1 @@
+export * from '@mlut/core';

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<T>(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('&amp;', '&')
+		.replaceAll('&lt;', '<')
+		.replaceAll('&gt;', '>');
+}
+
+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,
+	});
+}

test/web/core.html

@@ -18,7 +18,7 @@ <h1 class="title-h1 An-mSp Fns3r">mlut tests</h1>
 		<script type="importmap">
 			{
 				"imports": {
-					"@mlut/web": "../../packages/web/dist/index.js"
+					"@mlut/web": "../../packages/web/dist/core.js"
 				}
 			}
 		</script>

test/web/index.html

@@ -3,13 +3,15 @@
   <head>
     <meta charset="UTF-8"/>
     <title>Web package test</title>
-		<script src="../../packages/web/dist/script.js" type="module"></script>
+		<script src="../../packages/web/dist/index.js" type="module"></script>
 		<style type="text/scss">
 			@use "@mlut/core";
 		</style>
 	</head>
   <body>
-		<h1 class="Fns3r C-red">mlut web test</h1>
-		<p class="Fnst-i">CDN version is very useful for atomic CSS framework. Bazarim</p>
+		<div class="P2u Bd-s">
+			<h1 class="Fns3r C-red">mlut web test</h1>
+			<p class="Fnst-i">CDN version is very useful for atomic CSS framework. Infa sotka</p>
+		</div>
 	</body>
 </html>