@litejs/ui 25.5.0 → 26.2.0

package/README.md

@@ -13,18 +13,30 @@ used on heavy-traffic websites since 2006.
 
  - Dependency-free, weighs around 25kB (+8kB polyfills for old browsers).
  - Written in ES5, compatible with all browsers (including IE5.5).
- - No transpiling/compiling/bundling headache, just write a working code.
+   Works seamlessly in ESM projects too.
+ - No transpiling/compiling/bundling headache, just write working code.
+
+Includes templates, view routing, data binding, i18n, keyboard shortcuts, and touch gestures.
 
 For usage instructions, see [Quick-Start](https://github.com/litejs/litejs/wiki/Quick-Start) guide
 and [wiki](https://github.com/litejs/ui/wiki).
 
+## Examples
+
+ - [Simplest example](https://litejs.github.io/ui/simplest.html) —
+   [source](/litejs/ui/blob/main/test/html/simplest.html)
+ - [Built-in routing](https://litejs.github.io/ui/routed.html) —
+   [source](/litejs/ui/blob/main/test/html/routed.html)
+ - [Full SVG SPA](https://litejs.github.io/ui/svg-spa.html) —
+   [source](/litejs/ui/blob/main/test/html/svg-spa.html)
+
 
 ## Contributing
 
 Follow [Coding Style Guide](https://github.com/litejs/litejs/wiki/Style-Guide),
 run tests `npm install; npm test`.
 
-> Copyright (c) 2006-2024 Lauri Rooden <lauri@rooden.ee>  
+> Copyright (c) 2006-2026 Lauri Rooden <lauri@rooden.ee>  
 [MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/ui) |
 [npm package](https://npmjs.org/package/@litejs/ui) |

package/css/anim.css

@@ -1,20 +1,13 @@
 
-/**
- *  1. Trigger GPU acceleration.
- *     Remove first flicker on iphone.
- */
 
 .anim,
 .anim:after,
 .anim:before {
-	-webkit-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	   -moz-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	     -o-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	        transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+	transition: all .2s;
 
-	-webkit-transform: translate3d(0, 0, 0);     /* 1 */
-	        transform: translate3d(0, 0, 0);
-	-webkit-perspective: 1000;
-	        perspective: 1000;
+	/* Trigger GPU acceleration. Remove first flicker on iphone. */
+	transform: translate3d(0, 0, 0);
+
+	perspective: 1000;
 }
 

package/css/base.css

@@ -1,40 +1,21 @@
 
-/**
- *  1. Do not adjusts the text size automatically.
- *     IE Phone note - If the viewport is set using <meta> element,
- *     the value of the CSS text-size-adjust property is ignored.
- *     Webkit bug - If -webkit-text-size-adjust is explicitely set to none,
- *     Webkit-based desktop browsers, like Chrome or Safari,
- *     instead of ignoring the property, will prevent the user to zoom in or out the Web page.
- *     See Bug 56543, Bug 163359, and Bug 84186.
- *  2. IE for Windows Phone 8.1 supports "-webkit-text-size-adjust" as an alias for "-ms-text-size-adjust".
- *  3. Firefox<29, iOS<4, Android<4 need vendor prefixes.
- *  4. Disable double-tap gestures to remove 350 millisecond delay before single taps.
- *  5. Improve scroll performance by stop the paint on scroll.
- *     Fix position: fixed in most Android 2.2–2.3 browsers
- *     http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
- */
+
 
 *, *:before, *:after {
 	color: inherit;
-	-webkit-box-sizing: inherit;          /* 3 */
-	   -moz-box-sizing: inherit;
-	        box-sizing: inherit;
-	-webkit-backface-visibility: inherit;
-	        backface-visibility: inherit;
+	box-sizing: inherit;
+	backface-visibility: inherit;
 }
 
 html {
-	-webkit-text-size-adjust: 100%;       /* 1 */
-	    -ms-text-size-adjust: 100%;       /* 2 */
-	-webkit-font-smoothing: antialiased;
-	-webkit-box-sizing: border-box;       /* 3 */
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
-	touch-action: manipulation;           /* 4 */
-	-webkit-backface-visibility: hidden;  /* 5 */
-	        backface-visibility: hidden;
-	text-rendering: optimizeLegibility;
+	/* 62.5% sets 1em = 10px (16px × 0.625) */
+	font-size: 62.5%;
+
+	/* Use IE4 superior box model */
+	box-sizing: border-box;
+
+	/* Improve scroll performance by stop the paint on scroll */
+	backface-visibility: hidden;
 }
 
 html,
@@ -64,16 +45,10 @@ label,
 	pointer-events: none;
 }
 
-button {
-	/* Fix extra padding issue in IE6/7 */
-	width: auto;
-	overflow: visible;
-}
-
 b,
 strong,
 th {
-	/* Firefox default {font-weight:bolder} does not render well with some fonts (Helvetica Neue on macs). */
+	/* Firefox's default 'bolder' looks bad with some fonts (Helvetica Neue on macs). */
 	font-weight: bold;
 }
 
@@ -89,142 +64,31 @@ video {
 	vertical-align: top;
 }
 
-/**
- *  1. tables still need cellspacing="0" in the markup
- *  2. Restores the normal text size
- *     @see http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
- */
 
 table {
+	/* tables still need cellspacing="0" in the markup */
 	border-collapse: collapse;
-	border-spacing: 0;                  /* 1 */
+	border-spacing: 0;
 }
 
 code,
 kbd,
 pre,
 samp {
-	font-family: monospace, monospace;  /* 2 */
+	/* Fix monospace bug in browsers that may ignore first one */
+	font-family: monospace, monospace;
 	font-size: 1em;
 }
 
 textarea {
-	resize: vertical;
+	resize: both;
 }
 
 button,
-[draggable=true],
 .btn,
-.no-select {
-	-webkit-user-select: none;
-	 -khtml-user-select: none;
-	   -moz-user-select: none;
-	    -ms-user-select: none;
-	     -o-user-select: none;
-	        user-select: none;
-}
-
+.no-select,
 [draggable=true] {
-	-webkit-user-drag: element;
-	 -khtml-user-drag: element;
-	        user-drag: element;
-}
-
-
-/**
- * Global Classes
- * --------------
- */
-
-.max-height {
-	height: auto !important;
-	height: 100%;
-	min-height: 100%;
-}
-
-.sm .sm-hide,
-.md .md-hide,
-.lg .lg-hide,
-.hide-empty:empty,
-.hide {
-	display: none !important;
-	visibility: hidden;
-}
-.transparent {
-	opacity: 0 !important;
-	filter: alpha(opacity=0) !important;
-}
-.abs {
-	position: absolute;
-}
-.absr {
-	position: absolute;
-	top: 0px;
-	right: 0px;
-}
-.fix {
-	position: absolute;
-	position: fixed;
-}
-.rel {
-	position: relative;
-	height: 100%;
-}
-.max {
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
-
-
-/* establishes a new block formatting context */
-.block {
-	overflow: hidden;
-}
-
-.btn,
-.no-wrap,
-.ellipsis {
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.sm .sm-left,
-.md .md-left,
-.lg .lg-left,
-.left {
-	float: left;
-}
-
-.sm .sm-right,
-.md .md-right,
-.lg .lg-right,
-.right {
-	float: right !important;
-}
-
-.sm .sm-t-left,
-.md .md-t-left,
-.lg .md-t-left,
-.lg .lg-t-left,
-.t-left {
-	text-align: left;
-}
-.sm .sm-t-center,
-.md .md-t-center,
-.lg .md-t-center,
-.lg .lg-t-center,
-.t-center {
-	text-align: center;
-}
-.sm .sm-t-right,
-.md .md-t-right,
-.lg .md-t-right,
-.lg .lg-t-right,
-.t-right {
-	text-align: right;
+	user-select: none;
 }
 
 

package/css/global.css

@@ -0,0 +1,99 @@
+
+
+/**
+ * Global Classes
+ * --------------
+ */
+
+.max-height {
+	height: auto !important;
+	height: 100%;
+	min-height: 100%;
+}
+
+.sm .sm-hide,
+.md .md-hide,
+.lg .lg-hide,
+.hide-empty:empty,
+.hide {
+	display: none !important;
+	visibility: hidden;
+}
+.transparent {
+	opacity: 0 !important;
+	filter: alpha(opacity=0) !important;
+}
+.abs {
+	position: absolute;
+}
+.absr {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+.fix {
+	position: absolute;
+	position: fixed;
+}
+.rel {
+	position: relative;
+	height: 100%;
+}
+.max {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+
+/* establishes a new block formatting context */
+.block {
+	overflow: hidden;
+}
+
+.btn,
+.no-wrap,
+.ellipsis {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.sm .sm-left,
+.md .md-left,
+.lg .lg-left,
+.left {
+	float: left;
+}
+
+.sm .sm-right,
+.md .md-right,
+.lg .lg-right,
+.right {
+	float: right !important;
+}
+
+.sm .sm-t-left,
+.md .md-t-left,
+.lg .md-t-left,
+.lg .lg-t-left,
+.t-left {
+	text-align: left;
+}
+.sm .sm-t-center,
+.md .md-t-center,
+.lg .md-t-center,
+.lg .lg-t-center,
+.t-center {
+	text-align: center;
+}
+.sm .sm-t-right,
+.md .md-t-right,
+.lg .md-t-right,
+.lg .lg-t-right,
+.t-right {
+	text-align: right;
+}
+
+

package/load.js

@@ -1,7 +1,7 @@
 
 /*! litejs.com/MIT-LICENSE.txt */
 
-/* global location */
+/* global document, location */
 
 // With initial congestion window set to 2 and 1452 bytes of data in a segment.
 //  - 1 round trip to get 2904 bytes, Initial Window (IW) = 2
@@ -18,47 +18,45 @@
 // xhr("PUT", url).send(null) Works in all major browsers
 
 
-!function(window, Function) {
-	var initTime = xhr._t = +new Date()
-	, rewrite = {
+!function(window) {
+	var rewrite = {
 		//!{loadRewrite}
 	}
-	// Move setTimeout from window.prototype to window object for future patching in IE9.
-	, setTimeout_ = window.setTimeout = setTimeout
-	/*** debug ***/
-	// Expose xhr._c for testing.
-	, loaded = xhr._c = {}
-	/*/
-	, loaded = {}
-	/**/
-
-	/*** activex ***/
-	// XMLHttpRequest in IE7-8 do not accept PATCH, use ActiveX.
-	// IE disallows adding custom properties to ActiveX objects and read/write readystatechange after send().
-	, XMLHttpRequest = +"\v1" && window.XMLHttpRequest || Function("return new ActiveXObject('Microsoft.XMLHTTP')")
+	/*** log ***/
+	, initTime = xhr._t = +new Date()
 	/**/
+	// Expose xhr._c for testing.
+	, loaded = /*** debug ***/ xhr._c = /**/ {}
 
+	/*** ie9 ***/
+	, Fn = Function
+	, nop = Fn()
 	, execScript =
 		// IE5-10, Chrome1-12
 		window.execScript ||
-	/*** inject ***/
 		// THANKS: Juriy Zaytsev - Global eval [http://perfectionkills.com/global-eval-what-are-the-options/]
 		// In case of local execution `e('eval')` returns undefined
-		Function("e,eval", "try{return e('eval')}catch(e){}")(eval) ||
-		Function("a", "var d=document,b=d.body,s=d.createElement('script');s.text=a;b.removeChild(b.insertBefore(s,b.firstChild))")
-	/*/
-		eval
-	/**/
-	, nop = Function()
+		Fn("e,eval", "try{return e('eval')}catch(e){}")(eval) ||
+		Fn("a", "var d=document,b=d.body,s=d.createElement('script');s.text=a;b.appendChild(s)")
+
+	// Move setTimeout from window.prototype to window object for future patching in IE9.
+	, setTimeout_ = window.setTimeout = setTimeout
 
-	/*** reuse ***/
 	// XHR memory leak mitigation
 	, xhrs = []
+
+	// XMLHttpRequest in IE7-8 do not accept PATCH, use ActiveX.
+	// IE disallows adding custom properties to ActiveX objects and read/write readystatechange after send().
+	, XMLHttpRequest = +"\v1" && window.XMLHttpRequest || Fn("return new ActiveXObject('Microsoft.XMLHTTP')")
+	/*/
+	, execScript = eval
+	, setTimeout_ = setTimeout
 	/**/
 
+	/*** log ***/
 	, unsentLog = xhr._l = []
-	/*** onerror ***/
 	, lastError
+	// load.js is expected to be the first script to run and no prior window.onerror exists.
 	, onerror = window.onerror = function(message, file, line, col, error) {
 		// Do not send multiple copies of the same error.
 		// file = document.currentScript.src || import.meta.url
@@ -68,26 +66,35 @@
 			, col || (window.event || unsentLog).errorCharacter || "?"
 			, message
 			].join(":")
-		)) log("e", lastError, (error && (error.stack || error.stacktrace) || "-") + "\n" + location)
+		)) log("e", lastError, [error && (error.stack || error.stacktrace) || "-", "" + location])
+	}
+	, log = xhr.log = function(type, msg, extra) {
+		if (unsentLog.push([new Date() - initTime, type].concat(msg, extra || [])) < 2) sendLog()
+		function sendLog() {
+			setTimeout_(xhr.sendLog || sendLog, 1307)
+		}
 	}
-	/*/
-	, onerror = nop
 	/**/
 
-	xhr.log = log
-	function log(type, msg, extra) {
-		if (unsentLog.push([ new Date() - initTime, type, msg, extra ]) < 2) sendLog()
-	}
 
-	function sendLog() {
-		setTimeout_(xhr.sendLog || sendLog, 1307)
+	/*** theme ***/
+	, savedTheme
+	, ALT_THEME = "dark"
+	try {
+		savedTheme = window.localStorage.theme
+	} catch(e){}
+	if (ALT_THEME == (
+		savedTheme ||
+		(savedTheme = window.matchMedia) && savedTheme("(prefers-color-scheme:dark)").matches && ALT_THEME
+	)) {
+		document.documentElement.className = "is-" + ALT_THEME
 	}
-
-	// next === true is for sync call
+	/**/
 
 	window.xhr = xhr
+	// next === true is for sync call
 	function xhr(method, url, next, attr1, attr2) {
-		var req = /*** reuse ***/ xhrs.pop() || /**/ new XMLHttpRequest()
+		var req = /*** ie9 ***/ xhrs.pop() || /**/ new XMLHttpRequest()
 
 		// To be able to reuse the XHR object properly,
 		// use the open method first and set onreadystatechange later.
@@ -160,9 +167,12 @@
 					attr1,
 					attr2
 				)
+				/*** ie9 ***/
+				// ActiveXObject does not accept `null` for onreadystatechange
 				req.onreadystatechange = next = nop
-				/*** reuse ***/
 				xhrs.push(req)
+				/*/
+				req.onreadystatechange = next = null
 				/**/
 			}
 		}
@@ -193,7 +203,7 @@
 
 		function cb(err, str, fileName, filePos) {
 			loaded[fileName] = 2
-			res[filePos] = err ? (onerror(err, fileName), "") : str
+			res[filePos] = err ? (/*** log ***/ onerror(err, fileName),/**/ "") : str
 			exec()
 		}
 		function exec() {
@@ -205,20 +215,19 @@
 						var execResult = (xhr[files[pos].replace(/[^?]+\.|\?.*/g, "")] || execScript)(res[pos], files[pos])
 						if (execResult && execResult.then) {
 							res[pos] = 0
-							return execResult.then(function() {
-								res[pos] = ""
-								exec()
-							})
+							return execResult.then(advanceExec, advanceExec)
 						}
 					} catch(e) {
+						/*** log ***/
 						onerror(e, files[pos])
+						/**/
 					}
 					res[pos] = ""
 				}
 			}
 			if (res[pos] === "" || !files[pos]) {
 				if (++pos < len) exec()
-				/*** inject ***/
+				/*** ie9 ***/
 				// inject can be async
 				else if (pos === len && execScript !== eval) setTimeout_(exec, 1)
 				/**/
@@ -230,6 +239,11 @@
 				}
 			}
 		}
+		function advanceExec(err) {
+			if (err) onerror(err, files[pos])
+			res[pos] = ""
+			exec()
+		}
 	}
 
 	load([
@@ -237,5 +251,4 @@
 	])
 	/**/
 
-}(this, Function) // jshint ignore:line
-
+}(this) // jshint ignore:line

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "25.5.0",
+  "version": "26.2.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -24,9 +24,9 @@
     "lj-extract-lang": "./bin/extract-lang.js"
   },
   "scripts": {
-    "test": "lj t"
+    "test": "lj t test/index.js"
   },
   "devDependencies": {
-    "@litejs/cli": "25.5.0"
+    "@litejs/cli": "26.2.1"
   }
 }