cory/tildefriends
5
6
Fork 2
Code Issues 28 Pull Requests Actions Releases 39 Wiki Activity

core: Minor cleanup and style.

Browse Source
This commit is contained in:
Cory McWilliams
2025-10-09 12:45:38 -04:00
parent 6ab3fd168b
commit 25dbac804c
1 changed files with 105 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
core/client.js
View File

@@ -9,18 +9,17 @@
import {LitElement, html, css, svg} from '/lit/lit-all.min.js';
let cm6;
let gSocket;
let gCurrentFile;
let gFiles = {};
let gApp = {files: {}, emoji: '📦'};
let gEditor;
let gOriginalInput;
let gUnloading;
let g_socket;
let g_current_file;
let g_files = {};
let g_app = {files: {}, emoji: '📦'};
let g_editor;
let g_unloading;
let kErrorColor = '#dc322f';
let kDisconnectColor = '#f00';
let kStatusColor = '#fff';
let k_color_error = '#dc322f';
let k_color_disconnect = '#f00';
let k_color_status = '#fff';
/** \endcond */
/** Functions that server-side app code can call through the app object. */
@@ -410,7 +409,7 @@ class TfNavigationElement extends LitElement {
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
<div
class="w3-bar-item"
style="color: ${this.status.color ?? kStatusColor}"
style="color: ${this.status.color ?? k_color_status}"
>
${this.status.message}
</div>
@@ -429,7 +428,7 @@ class TfNavigationElement extends LitElement {
<div class="w3-model w3-animate-top" style="position: absolute; left: 50%; transform: translate(-50%); z-index: 1">
<dijv class="w3-modal-content w3-card-4" style="display: block; padding: 1em">
<span id="close_error" @click=${self.clear_error} class="w3-button w3-display-topright">&times;</span>
<div style="color: ${this.status.color ?? kErrorColor}"><b>ERROR:</b><p id="error" style="white-space: pre">${this.status.message}</p></div>
<div style="color: ${this.status.color ?? k_color_error}"><b>ERROR:</b><p id="error" style="white-space: pre">${this.status.message}</p></div>
</div>
</div>
`
@@ -521,7 +520,7 @@ class TfFilesElement extends LitElement {
for (let file of event.dataTransfer.files) {
let buffer = await file.arrayBuffer();
let text = new TextDecoder('latin1').decode(buffer);
gFiles[file.name] = {
g_files[file.name] = {
doc: cm6.EditorState.create({
doc: text,
extensions: cm6.extensions,
@@ -529,9 +528,9 @@ class TfFilesElement extends LitElement {
buffer: buffer,
isNew: true,
};
gCurrentFile = file.name;
g_current_file = file.name;
}
openFile(gCurrentFile);
openFile(g_current_file);
updateFiles();
}
@@ -895,11 +894,11 @@ async function edit() {
: 'flex';
try {
if (!gEditor) {
if (!g_editor) {
cm6 = await import('/codemirror/cm6.js');
gEditor = cm6.TildeFriendsEditorView(document.getElementById('editor'));
g_editor = cm6.TildeFriendsEditorView(document.getElementById('editor'));
}
gEditor.onDocChange = updateFiles;
g_editor.onDocChange = updateFiles;
await load();
} catch (error) {
alert(`${error.message}\n\n${error.stack}`);
@@ -932,13 +931,13 @@ function loadFile(name, id) {
return response.text();
})
.then(function (text) {
gFiles[name].doc = cm6.EditorState.create({
g_files[name].doc = cm6.EditorState.create({
doc: text,
extensions: cm6.extensions,
});
gFiles[name].original = gFiles[name].doc.doc.toString();
if (!Object.values(gFiles).some((x) => !x.doc)) {
openFile(Object.keys(gFiles).sort()[0]);
g_files[name].original = g_files[name].doc.doc.toString();
if (!Object.values(g_files).some((x) => !x.doc)) {
openFile(Object.keys(g_files).sort()[0]);
}
});
}
@@ -956,31 +955,31 @@ async function load(path) {
} else if (response.status != 404) {
throw new Error(response.status + ' ' + response.statusText);
}
gFiles = {};
g_files = {};
let isApp = false;
let promises = [];
if (json && json['type'] == 'tildefriends-app') {
isApp = true;
Object.keys(json['files']).forEach(function (name) {
gFiles[name] = {};
g_files[name] = {};
promises.push(loadFile(name, json['files'][name]));
});
if (Object.keys(json['files']).length == 0) {
document.getElementById('editPane').style.display = 'flex';
}
gApp = json;
gApp.emoji = gApp.emoji || '📦';
document.getElementById('icon').innerHTML = gApp.emoji;
g_app = json;
g_app.emoji = g_app.emoji || '📦';
document.getElementById('icon').innerHTML = g_app.emoji;
}
if (!isApp) {
document.getElementById('editPane').style.display = 'flex';
let text = '// New script.\n';
gCurrentFile = 'app.js';
gFiles[gCurrentFile] = {
g_current_file = 'app.js';
g_files[g_current_file] = {
doc: cm6.EditorState.create({doc: text, extensions: cm6.extensions}),
};
openFile(gCurrentFile);
openFile(g_current_file);
}
return Promise.all(promises);
}
@@ -1001,13 +1000,14 @@ function closeEditor() {
*/
function save(save_to) {
document.getElementById('save').disabled = true;
if (gCurrentFile) {
gFiles[gCurrentFile].doc = gEditor.state;
if (g_current_file) {
g_files[g_current_file].doc = g_editor.state;
if (
!gFiles[gCurrentFile].isNew &&
!gFiles[gCurrentFile].doc.doc.toString() == gFiles[gCurrentFile].original
!g_files[g_current_file].isNew &&
!g_files[g_current_file].doc.doc.toString() ==
g_files[g_current_file].original
) {
delete gFiles[gCurrentFile].buffer;
delete g_files[g_current_file].buffer;
}
}
@@ -1022,8 +1022,8 @@ function save(save_to) {
}
let promises = [];
for (let name of Object.keys(gFiles)) {
let file = gFiles[name];
for (let name of Object.keys(g_files)) {
let file = g_files[name];
if (!file.isNew && file.doc.doc.toString() == file.original) {
continue;
}
@@ -1065,14 +1065,14 @@ function save(save_to) {
let app = {
type: 'tildefriends-app',
files: Object.fromEntries(
Object.keys(gFiles).map((x) => [x, gFiles[x].id || gApp.files[x]])
Object.keys(g_files).map((x) => [x, g_files[x].id || g_app.files[x]])
),
emoji: gApp.emoji || '📦',
emoji: g_app.emoji || '📦',
};
Object.values(gFiles).forEach(function (file) {
Object.values(g_files).forEach(function (file) {
delete file.id;
});
gApp = JSON.parse(JSON.stringify(app));
g_app = JSON.parse(JSON.stringify(app));
return fetch(save_path + 'save', {
method: 'POST',
@@ -1087,7 +1087,7 @@ function save(save_to) {
if (save_path != window.location.pathname) {
alert('Saved to ' + save_path + '.');
} else if (!gFiles['app.js']) {
} else if (!g_files['app.js']) {
window.location.reload();
} else {
reconnect(save_path);
@@ -1099,7 +1099,7 @@ function save(save_to) {
})
.finally(function () {
document.getElementById('save').disabled = false;
Object.values(gFiles).forEach(function (file) {
Object.values(g_files).forEach(function (file) {
file.original = file.doc.doc.toString();
});
updateFiles();
@@ -1112,8 +1112,8 @@ function save(save_to) {
function changeIcon() {
let value = prompt('Enter a new app icon emoji:');
if (value !== undefined) {
gApp.emoji = value || '📦';
document.getElementById('icon').innerHTML = gApp.emoji;
g_app.emoji = value || '📦';
document.getElementById('icon').innerHTML = g_app.emoji;
}
}
@@ -1190,9 +1190,12 @@ function api_postMessage(message) {
function api_error(error) {
if (error) {
if (typeof error == 'string') {
setStatusMessage('⚠️ ' + error, kErrorColor);
setStatusMessage('⚠️ ' + error, k_color_error);
} else {
setStatusMessage('⚠️ ' + error.message + '\n' + error.stack, kErrorColor);
setStatusMessage(
'⚠️ ' + error.message + '\n' + error.stack,
k_color_error
);
}
}
console.log('error', error);
@@ -1309,7 +1312,7 @@ function api_setHash(hash) {
*/
function _receive_websocket_message(message) {
if (message && message.action == 'session') {
setStatusMessage('🟢 Executing...', kStatusColor);
setStatusMessage('🟢 Executing...', k_color_status);
let navigation = document.getElementsByTagName('tf-navigation')[0];
navigation.credentials = message.credentials;
navigation.identities = message.identities;
@@ -1409,7 +1412,7 @@ function setStatusMessage(message, color) {
document.getElementsByTagName('tf-navigation')[0].status = {
message: message,
color: color,
is_error: color == kErrorColor,
is_error: color == k_color_error,
};
}
@@ -1419,11 +1422,11 @@ function setStatusMessage(message, color) {
*/
function send(value) {
try {
if (gSocket && gSocket.readyState == gSocket.OPEN) {
gSocket.send(JSON.stringify(value));
if (g_socket && g_socket.readyState == g_socket.OPEN) {
g_socket.send(JSON.stringify(value));
}
} catch (error) {
setStatusMessage('🤷 Send failed: ' + error.toString(), kErrorColor);
setStatusMessage('🤷 Send failed: ' + error.toString(), k_color_error);
}
}
@@ -1438,7 +1441,7 @@ function hashChange() {
* Make sure the app is connected on window focus, and notify the app.
*/
function focus() {
if (gSocket && gSocket.readyState == gSocket.CLOSED) {
if (g_socket && g_socket.readyState == g_socket.CLOSED) {
connectSocket();
} else {
send({event: 'focus'});
@@ -1449,9 +1452,7 @@ function focus() {
* Notify the app of lost focus.
*/
function blur() {
if (gSocket && gSocket.readyState == gSocket.OPEN) {
send({event: 'blur'});
}
send({event: 'blur'});
}
/**
@@ -1508,8 +1509,8 @@ function message(event) {
* @param path The path to which the WebSocket should be connected.
*/
function reconnect(path) {
let oldSocket = gSocket;
gSocket = null;
let oldSocket = g_socket;
g_socket = null;
if (oldSocket) {
oldSocket.onopen = null;
oldSocket.onclose = null;
@@ -1524,24 +1525,24 @@ function reconnect(path) {
* @param path The path to which to connect.
*/
function connectSocket(path) {
if (!gSocket || gSocket.readyState != gSocket.OPEN) {
if (gSocket) {
gSocket.onopen = null;
gSocket.onclose = null;
gSocket.onmessage = null;
gSocket.close();
if (!g_socket || g_socket.readyState != g_socket.OPEN) {
if (g_socket) {
g_socket.onopen = null;
g_socket.onclose = null;
g_socket.onmessage = null;
g_socket.close();
}
setStatusMessage('⚪ Connecting...', kStatusColor);
gSocket = new WebSocket(
setStatusMessage('⚪ Connecting...', k_color_status);
g_socket = new WebSocket(
(window.location.protocol == 'https:' ? 'wss://' : 'ws://') +
window.location.hostname +
(window.location.port.length ? ':' + window.location.port : '') +
'/app/socket'
);
gSocket.onopen = function () {
setStatusMessage('🟡 Authenticating...', kStatusColor);
g_socket.onopen = function () {
setStatusMessage('🟡 Authenticating...', k_color_status);
let connect_path = path ?? window.location.pathname;
gSocket.send(
g_socket.send(
JSON.stringify({
action: 'hello',
path: connect_path,
@@ -1553,12 +1554,12 @@ function connectSocket(path) {
})
);
};
gSocket.onmessage = function (event) {
g_socket.onmessage = function (event) {
_receive_websocket_message(JSON.parse(event.data));
};
gSocket.onclose = function (event) {
if (gUnloading) {
setStatusMessage('⚪ Closing...', kStatusColor);
g_socket.onclose = function (event) {
if (g_unloading) {
setStatusMessage('⚪ Closing...', k_color_status);
} else {
const k_codes = {
1000: 'Normal closure',
@@ -1579,7 +1580,7 @@ function connectSocket(path) {
};
setStatusMessage(
'🔴 Closed: ' + (k_codes[event.code] || event.code),
kDisconnectColor
k_color_disconnect
);
}
};
@@ -1592,24 +1593,24 @@ function connectSocket(path) {
*/
function openFile(name) {
let newDoc =
name && gFiles[name]
? gFiles[name].doc
name && g_files[name]
? g_files[name].doc
: cm6.EditorState.create({doc: '', extensions: cm6.extensions});
let oldDoc = gEditor.state;
gEditor.setState(newDoc);
let oldDoc = g_editor.state;
g_editor.setState(newDoc);
if (gFiles[gCurrentFile]) {
gFiles[gCurrentFile].doc = oldDoc;
if (g_files[g_current_file]) {
g_files[g_current_file].doc = oldDoc;
if (
!gFiles[gCurrentFile].isNew &&
gFiles[gCurrentFile].doc.doc.toString() == oldDoc.doc.toString()
!g_files[g_current_file].isNew &&
g_files[g_current_file].doc.doc.toString() == oldDoc.doc.toString()
) {
delete gFiles[gCurrentFile].buffer;
delete g_files[g_current_file].buffer;
}
}
gCurrentFile = name;
g_current_file = name;
updateFiles();
gEditor.focus();
g_editor.focus();
}
/**
@@ -1619,19 +1620,19 @@ function updateFiles() {
let files = document.getElementsByTagName('tf-files-pane')[0];
if (files) {
files.files = Object.fromEntries(
Object.keys(gFiles).map((file) => [
Object.keys(g_files).map((file) => [
file,
{
clean:
(file == gCurrentFile
? gEditor.state.doc.toString()
: gFiles[file].doc.doc.toString()) == gFiles[file].original,
(file == g_current_file
? g_editor.state.doc.toString()
: g_files[file].doc.doc.toString()) == g_files[file].original,
},
])
);
files.current = gCurrentFile;
files.current = g_current_file;
}
gEditor.focus();
g_editor.focus();
}
/**
@@ -1639,7 +1640,7 @@ function updateFiles() {
* @param name The file's name.
*/
function makeNewFile(name) {
gFiles[name] = {
g_files[name] = {
doc: cm6.EditorState.create({extensions: cm6.extensions}),
};
openFile(name);
@@ -1650,7 +1651,7 @@ function makeNewFile(name) {
*/
function newFile() {
let name = prompt('Name of new file:', 'file.js');
if (name && !gFiles[name]) {
if (name && !g_files[name]) {
makeNewFile(name);
}
}
@@ -1659,9 +1660,9 @@ function newFile() {
* Prompt to remove a file.
*/
function removeFile() {
if (confirm('Remove ' + gCurrentFile + '?')) {
delete gFiles[gCurrentFile];
openFile(Object.keys(gFiles)[0]);
if (confirm('Remove ' + g_current_file + '?')) {
delete g_files[g_current_file];
openFile(Object.keys(g_files)[0]);
}
}
@@ -1677,13 +1678,13 @@ async function appExport() {
`${name}.json`,
JSON.stringify({
type: 'tildefriends-app',
emoji: gApp.emoji || '📦',
emoji: g_app.emoji || '📦',
})
);
for (let file of Object.keys(gFiles)) {
for (let file of Object.keys(g_files)) {
zip.file(
`${name}/${file}`,
gFiles[file].buffer ?? gFiles[file].doc.doc.toString()
g_files[file].buffer ?? g_files[file].doc.doc.toString()
);
}
let content = await zip.generateAsync({
@@ -1802,9 +1803,9 @@ async function sourcePretty() {
let babel = (await import('/prettier/babel.mjs')).default;
let estree = (await import('/prettier/estree.mjs')).default;
let prettier_html = (await import('/prettier/html.mjs')).default;
let source = gEditor.state.doc.toString();
let source = g_editor.state.doc.toString();
let formatted = await prettier.format(source, {
parser: gCurrentFile?.toLowerCase()?.endsWith('.html') ? 'html' : 'babel',
parser: g_current_file?.toLowerCase()?.endsWith('.html') ? 'html' : 'babel',
plugins: [babel, estree, prettier_html],
trailingComma: 'es5',
useTabs: true,
@@ -1813,10 +1814,10 @@ async function sourcePretty() {
bracketSpacing: false,
});
if (source !== formatted) {
gEditor.dispatch({
g_editor.dispatch({
changes: {
from: 0,
to: gEditor.state.doc.length,
to: g_editor.state.doc.length,
insert: formatted,
},
});
@@ -1861,7 +1862,7 @@ window.addEventListener('load', function () {
window.addEventListener('message', message, false);
window.addEventListener('online', connectSocket);
window.addEventListener('beforeunload', function () {
gUnloading = true;
g_unloading = true;
});
document.getElementById('name').value = window.location.pathname;
document