Hook up prettier in the editor.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4854 ed5197a5-7fde-0310-b194-c3ffbd925b24

GNUmakefile

@@ -813,15 +813,16 @@ apklog:
 
 fetchdeps:
 	@echo "[fetch] libuv"
-	@rm -rf deps/libuv/
-	@mkdir -p out/deps/ deps/libuv/
 	@test -f out/deps/libuv.tar.gz || curl -q https://dist.libuv.org/dist/v1.48.0/libuv-v1.48.0.tar.gz -o out/deps/libuv.tar.gz
-	@tar -C deps/libuv/ -m --strip=1 -xf out/deps/libuv.tar.gz
+	@test -d deps/libuv/ || (mkdir -p deps/libuv/ && tar -C deps/libuv/ -m --strip=1 -xf out/deps/libuv.tar.gz)
 	@echo "[fetch] sqlite"
-	@rm -rf deps/sqlite/
-	@mkdir -p out/deps/ deps/sqlite/
 	@test -f out/deps/sqlite.zip || curl -q https://www.sqlite.org/2024/sqlite-amalgamation-3450100.zip -o out/deps/sqlite.zip
-	@unzip -qDj -d deps/sqlite/ out/deps/sqlite.zip
+	@test -d deps/sqlite/ || (mkdir -p deps/sqlite/ && unzip -qDj -d deps/sqlite/ out/deps/sqlite.zip)
+	@echo "[fetch] prettier"
+	@test -f deps/prettier/standalone.mjs || curl -q --create-dirs -O --output-dir deps/prettier/ https://cdn.jsdelivr.net/npm/prettier@3.2.5/standalone.mjs
+	@test -f deps/prettier/html.mjs || curl -q --create-dirs -O --output-dir deps/prettier/ https://cdn.jsdelivr.net/npm/prettier@3.2.5/plugins/html.mjs
+	@test -f deps/prettier/babel.mjs || curl -q --create-dirs -O --output-dir deps/prettier/ https://cdn.jsdelivr.net/npm/prettier@3.2.5/plugins/babel.mjs
+	@test -f deps/prettier/estree.mjs || curl -q --create-dirs -O --output-dir deps/prettier/ https://cdn.jsdelivr.net/npm/prettier@3.2.5/plugins/estree.mjs
 .PHONE: fetchdeps
 
 clean:

core/client.js

@@ -205,7 +205,6 @@ class TfFilesElement extends LitElement {
 			gFiles[file.name] = {
 				doc: new cm6.EditorState.create({doc: text, extensions: cm6.extensions}),
 				buffer: buffer,
-				generation: -1,
 				isNew: true,
 			};
 			gCurrentFile = file.name;
@@ -1010,7 +1009,6 @@ function updateFiles() {
 function makeNewFile(name) {
 	gFiles[name] = {
 		doc: cm6.EditorState.create({extensions: cm6.extensions}),
-		generation: -1,
 	};
 	openFile(name);
 }
@@ -1121,6 +1119,27 @@ async function appImport() {
 	}
 }
 
+async function sourcePretty() {
+	let prettier = (await import('/prettier/standalone.mjs')).default;
+	let babel = (await import('/prettier/babel.mjs')).default;
+	let estree = (await import('/prettier/estree.mjs')).default;
+	let source = gEditor.state.doc.toString();
+	let formatted = await prettier.format(source, {
+		parser: 'babel',
+		plugins: [babel, estree],
+		useTabs: true,
+	});
+	if (source !== formatted) {
+		gEditor.dispatch({
+			changes: {
+				from: 0,
+				to: gEditor.state.doc.length,
+				insert: formatted,
+			}
+		});
+	}
+}
+
 window.addEventListener("load", function() {
 	window.addEventListener("hashchange", hashChange);
 	window.addEventListener("focus", focus);
@@ -1134,6 +1153,7 @@ window.addEventListener("load", function() {
 	document.getElementById('delete').addEventListener('click', () => deleteApp());
 	document.getElementById('export').addEventListener('click', () => appExport());
 	document.getElementById('import').addEventListener('click', () => appImport());
+	document.getElementById('pretty').addEventListener('click', () => sourcePretty());
 	document.getElementById('trace_button').addEventListener('click', function(event) {
 		event.preventDefault();
 		trace();

core/index.html

@@ -24,6 +24,7 @@
 					<button class="w3-bar-item w3-button w3-blue" id="icon" name="icon" accesskey="i" onmouseover="set_access_key_title(event)" data-tip="Set an icon/emoji for the app">📦</button>
 					<button class="w3-bar-item w3-button w3-blue" id="export" name="export" accesskey="e" onmouseover="set_access_key_title(event)" data-tip="Export app to .zip file">Export</button>
 					<button class="w3-bar-item w3-button w3-blue" id="import" name="import" accesskey="i" onmouseover="set_access_key_title(event)" data-tip="Import app from .zip file">Import</button>
+					<button class="w3-bar-item w3-button w3-blue" id="pretty" name="pretty" accesskey="p" onmouseover="set_access_key_title(event)" data-tip="Clean up source formatting">🧼</button>
 					<input class="w3-bar-item w3-input w3-border w3-blue" type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input>
 					<button class="w3-bar-item w3-button w3-blue" id="delete" name="delete" accesskey="d" onmouseover="set_access_key_title(event)" data-tip="Delete the app">Delete</button>
 					<button class="w3-bar-item w3-button w3-blue" id="trace_button" accesskey="t" onmouseover="set_access_key_title(event)" data-tip="Open a performance trace for the server">Trace</button>

src/httpd.js.c

@@ -533,7 +533,8 @@ static const char* _ext_to_content_type(const char* ext)
 {
 	if (ext)
 	{
-		if (strcmp(ext, ".js") == 0)
+		if (strcmp(ext, ".js") == 0 ||
+			strcmp(ext, ".mjs") == 0)
 		{
 			return "text/javascript; charset=UTF-8";
 		}
@@ -640,6 +641,7 @@ static void _httpd_endpoint_static(tf_http_request_t* request)
 		{ "/static/", "core/" },
 		{ "/lit/", "deps/lit/" },
 		{ "/codemirror/", "deps/codemirror/" },
+		{ "/prettier/", "deps/prettier/" },
 		{ "/speedscope/", "deps/speedscope/" },
 		{ "/.well-known/", "data/global/.well-known/" },
 	};
@@ -752,6 +754,7 @@ void tf_httpd_register(JSContext* context)
 
 	tf_http_add_handler(http, "/codemirror/", _httpd_endpoint_static, NULL, task);
 	tf_http_add_handler(http, "/lit/", _httpd_endpoint_static, NULL, task);
+	tf_http_add_handler(http, "/prettier/", _httpd_endpoint_static, NULL, task);
 	tf_http_add_handler(http, "/speedscope/", _httpd_endpoint_static, NULL, task);
 	tf_http_add_handler(http, "/static/", _httpd_endpoint_static, NULL, task);
 	tf_http_add_handler(http, "/.well-known/", _httpd_endpoint_static, NULL, task);