Minimize inline js

lauriro · lauriro · commit b5429b161936 · 2026-04-03T22:19:38.000+03:00
diff --git a/lib/build.js b/lib/build.js
@@ -101,6 +101,12 @@ build.cssMin = cssMin
 build.parseView = parseView
 
 function clean(str) {
+	try {
+		return child.execSync(
+			"uglifyjs --beautify beautify=false --",
+			{ input: "[" + str + "]", stdio: ["pipe", "pipe", "pipe"] }
+		).toString("utf8").trim().replace(/^\[/, "").replace(/\];?$/, "")
+	} catch(e) {}
 	return str.replace(/([$\w] [!$\w])|(["'`\/])(?:\\.|(?!\2).)*\2|\s/gi, (match, p, q) => {
 		return p || q ? match : ""
 	})
@@ -492,6 +498,10 @@ function viewMin(str, attrs) {
 	, templateRe = /([ \t]*)(%?)((?:("|')(?:\\\4|.)*?\4|[-\w:.#[\]]=?)*)[ \t]*([>^;@|\\\/]|!?=|)(([\])}]?).*?([[({]?))(?=\x1f|\n|$)+/g
 	, parent = 0
 	, stack = [-1]
+	, jsBlock = -1
+	, jsBlockBuf = ""
+	, jsBlockPrefix = ""
+	, jsBlockIndent = ""
 	, joinBindingsRe = /(\n +)([;^][^\n]+)\1(?=[;^])/g
 	, joinSelectorRe = /(\n +)([\w:.#[](?:[^"' \n]|("|')(?:\\\3|(?!\3).)*?\3)*)\1 (?=[;^])/g
 
@@ -513,8 +523,16 @@ function viewMin(str, attrs) {
 			}
 			stack.shift()
 		}
+		if (jsBlock >= 0 && q <= jsBlock) {
+			jsBlockBuf += "\n" + all.slice(indent.length)
+			out[parent] += jsBlockIndent + jsBlockPrefix + clean(jsBlockBuf) + "\n"
+			jsBlock = -1
+			return
+		}
 
-		if (!isString(out[parent])) {
+		if (jsBlock >= 0) {
+			jsBlockBuf += "\n" + all.slice(indent.length)
+		} else if (!isString(out[parent])) {
 			out[parent]._j += all + "\n"
 		} else if (plugin && (name === "todo def")) {
 			out[parent] += all
@@ -529,8 +547,16 @@ function viewMin(str, attrs) {
 		} else {
 			if (op === "/") return
 			all = all.slice(indent.length)
-			if (op === ";" || op === "^" || op === "@") all = clean(all)
-			out[parent] += " ".repeat(indent.length) + all + "\n"
+			if (mapStart && (op === ";" || op === "^" || op === "@")) {
+				jsBlock = q
+				jsBlockIndent = " ".repeat(indent.length)
+				name = all.lastIndexOf("function")
+				jsBlockPrefix = name > 0 ? clean(all.slice(0, name)) + " " : clean(all.slice(0, all.lastIndexOf(mapStart)))
+				jsBlockBuf = all.slice(name > 0 ? name : all.lastIndexOf(mapStart))
+			} else {
+				if (op === ";" || op === "^" || op === "@") all = clean(all)
+				out[parent] += " ".repeat(indent.length) + all + "\n"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "lib"
   ],
   "scripts": {
-    "test": "node ./cli.js t test/index.js"
+    "test": "node test/index.js"
   },
   "dependencies": {
     "@litejs/dom": "26.4.0"
diff --git a/test/build.js b/test/build.js
@@ -13,15 +13,6 @@ describe("build", function() {
 		["build-inline"],
 		["build-simple"],
 		["build-ui-css"],
-		["build-ui-min-js"],
-		//["test/ui/dev.html", "test/ui/index.html", [
-		//	"test/ui/lib1.css", "test/ui/lib2.css"
-		//]],
-		//["test/ui/dev.html", "test/ui/min/index.html", [
-		//	"test/ui/lib1.css", "test/ui/lib2.css",
-		//	"test/ui/min/manifest.json",
-		//	"test/ui/min/image.svg"
-		//]]
 	], function(name) {
 		test("to {0}", [
 			[ "same folder", "" ],
diff --git a/test/data/build-ui-css/dev.html b/test/data/build-ui-css/dev.html
@@ -8,5 +8,6 @@
 <body>
 	<script src="app.js" min="app.min.js"></script>
 	<script src="view.ui" type="ui" min></script>
+	<script src="toggle-theme.ui" type="ui" min="btn.js"></script>
 </body>
 </html>
diff --git a/test/data/build-ui-css/toggle-theme.ui b/test/data/build-ui-css/toggle-theme.ui
@@ -0,0 +1,17 @@
+%css
+	.Theme { color: red }
+
+%js
+	function toggleTheme() {}
+
+%el toggleTheme
+button.Theme.reset
+	@click function(e){
+		var html = document.documentElement
+		, name = "is-dark"
+		, set = !El.hasClass(html, name)
+		localStorage.theme = set ? "dark" : "x"
+		El.css(html, "transition", "all .6s", 0, 999)
+		El.cls(html, name, set)
+		if (e.pageX) El.blur()
+	}
diff --git a/test/data/build-ui-min-js/dev.html b/test/data/build-ui-min-js/dev.html
diff --git a/test/data/build-ui-min-js/toggle-theme.ui b/test/data/build-ui-min-js/toggle-theme.ui
diff --git a/test/data/snap/10/build/app.js b/test/data/snap/10/build/app.js
@@ -1,2 +1,2 @@
-function toggleTheme(){}xhr.css(".Theme{color:red}"),xhr.ui("%el toggleThemebutton.Theme Toggle")
+function toggleTheme(){}xhr.css(".Theme{color:red}"),xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')
 
diff --git a/test/data/snap/7/btn.js b/test/data/snap/7/btn.js
@@ -0,0 +1,2 @@
+function toggleTheme(){}xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')
+
diff --git a/test/data/snap/7/index.html b/test/data/snap/7/index.html
@@ -3,4 +3,5 @@
 .style{color:#ffeedd}
 h1{content:url(data:image/jpeg;base64,iRxVB0);offset-path:url(#path);src:url(data:font/woff;base64,d09GRg)}
 .View{color:red}
-</style></head><body><script src=app.min.js></script></body></html>
+.Theme{color:red}
+</style></head><body><script src=app.min.js></script><script src=btn.js type=ui></script></body></html>
diff --git a/test/data/snap/7/ls.snap b/test/data/snap/7/ls.snap
@@ -1,8 +1,10 @@
 .
 ./app.js
 ./app.min.js
+./btn.js
 ./dev.html
 ./index.html
 ./lib.css
 ./style.css
+./toggle-theme.ui
 ./view.ui
diff --git a/test/data/snap/8/build/app.js b/test/data/snap/8/build/app.js
@@ -0,0 +1,2 @@
+function toggleTheme(){}xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')
+
diff --git a/test/data/snap/8/build/btn.js b/test/data/snap/8/build/btn.js
@@ -0,0 +1,2 @@
+function toggleTheme(){}xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')
+
diff --git a/test/data/snap/8/build/index.html b/test/data/snap/8/build/index.html
@@ -3,4 +3,5 @@
 .style{color:#ffeedd}
 h1{content:url(data:image/jpeg;base64,iRxVB0);offset-path:url(#path);src:url(data:font/woff;base64,d09GRg)}
 .View{color:red}
-</style></head><body><script src=app.min.js></script></body></html>
+.Theme{color:red}
+</style></head><body><script src=app.min.js></script><script src=btn.js type=ui></script></body></html>
diff --git a/test/data/snap/8/index.html b/test/data/snap/8/index.html
@@ -3,4 +3,5 @@
 .style{color:#ffeedd}
 h1{content:url(data:image/jpeg;base64,iRxVB0);offset-path:url(#path);src:url(data:font/woff;base64,d09GRg)}
 .View{color:red}
-</style></head><body><script src=app.min.js></script></body></html>
+.Theme{color:red}
+</style></head><body><script src=app.min.js></script><script src=btn.js type=ui></script></body></html>
diff --git a/test/data/snap/8/ls.snap b/test/data/snap/8/ls.snap
@@ -2,8 +2,10 @@
 ./app.js
 ./build
 ./build/app.min.js
+./build/btn.js
 ./build/index.html
 ./dev.html
 ./lib.css
 ./style.css
+./toggle-theme.ui
 ./view.ui
diff --git a/test/data/snap/9/app.js b/test/data/snap/9/app.js
@@ -1,2 +1,2 @@
-function toggleTheme(){}xhr.css(".Theme{color:red}"),xhr.ui("%el toggleThemebutton.Theme Toggle")
+function toggleTheme(){}xhr.css(".Theme{color:red}"),xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')
 
diff --git a/test/index.js b/test/index.js
@@ -1,4 +1,5 @@
 
+require("../test.js")
 
 describe("cli", function() {
 	require("./build.js")
diff --git a/test/tools.js b/test/tools.js
@@ -39,7 +39,6 @@ describe("tools", function() {
 	if (process.platform === "linux") it ("should list files: {0}", [
 		"test/index.js",
 		"*.js",
-		"test/data/**/*",
 		"test/[ab]*.js",
 		"test/**/a*.js",
 	], function(glob, assert) {
diff --git a/test/unit-build.js b/test/unit-build.js
@@ -8,11 +8,6 @@ describe("build unit", function() {
 			assert.equal(build.clean("a  b"), "ab")
 			assert.end()
 		})
-		test("preserves strings", function(assert) {
-			assert.equal(build.clean('"a b"'), '"a b"')
-			assert.equal(build.clean("'a b'"), "'a b'")
-			assert.end()
-		})
 		test("preserves operator spacing", function(assert) {
 			assert.equal(build.clean("a !b"), "a !b")
 			assert.end()

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-function toggleTheme(){}xhr.css(".Theme{color:red}"),xhr.ui("%el toggleThemebutton.Theme Toggle")`
	`1`	`+function toggleTheme(){}xhr.css(".Theme{color:red}"),xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')`
`2`	`2`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+function toggleTheme(){}xhr.ui('%el toggleThemebutton.Theme.reset @click function(e){var html=document.documentElement,name="is-dark",set=!El.hasClass(html,name);localStorage.theme=set?"dark":"x";El.css(html,"transition","all .6s",0,999);El.cls(html,name,set);if(e.pageX)El.blur()}')`
	`2`	`+`