Merge pull request #15 from ThinLiquid:main

✨ feature: add stomp proxy

.eslintrc

@@ -1,7 +1,8 @@
 {
 	"root": true,
 	"env": {
-		"es6": true
+		"es6": true,
+		"node": true
 	},
 	"parserOptions": {
 		"ecmaVersion": "latest",

FlowOS/public/builtin/apps/scripts/browser.js

@@ -1,15 +1,16 @@
 /* eslint-env browser */
 
 import config from '../../../scripts/configManager.js';
+import '/stomp/bootstrapper.js';
 
 const input = document.querySelector('input');
 
 let id = 0;
 
-const clickList = [];
+window.clickList = [];
 const tabs = [];
 
-const uv = parent.__uv$config;
+const proxyConfig = parent.currentProxy;
 
 let inputShowing = true;
 
@@ -48,7 +49,7 @@ class Tab {
 		img.height = '18';
 		img.src = '/assets/loading.gif';
 
-		tab.src = uv.prefix + uv.encodeUrl(config.settings.get('search').url);
+		tab.src = proxyConfig.prefix + proxyConfig.encodeUrl(config.settings.get('search').url);
 		tab.id = id;
 		tab.onload = () => {
 			handleTab(tab, titleBtn, img);
@@ -66,8 +67,8 @@ class Tab {
 
 			removeObjectWithId(tabs, _id);
 
-			if (tabs.includes(clickList.at(-1))) {
-				setActiveTab(clickList.at(-1));
+			if (tabs.includes(window.clickList.at(-1))) {
+				setActiveTab(window.clickList.at(-1));
 			} else if (tabs.at(-1)) {
 				setActiveTab(tabs.at(-1));
 			} else {
@@ -95,24 +96,24 @@ window.onload = () => {
 };
 
 const setActiveTab = (tab) => {
-	clickList.push(tab);
+	window.clickList.push(tab);
 
-	if (!tab && clickList[0] !== clickList[1]) {
+	if (!tab && window.clickList[0] !== window.clickList[1]) {
 		return;
 	}
 
-	try { input.value = uv.decodeUrl(tab.src.split('/').pop()); }
+	try { input.value = proxyConfig.decodeUrl(tab.src.split('/').pop()); }
 	catch(e) {};
 	tab.style.display = 'block';
-	if (clickList.length > 1) {
-		clickList.at(-2).style.display = 'none';
+	if (window.clickList.length > 1) {
+		window.clickList.at(-2).style.display = 'none';
 	}
 };
 
 const handleTab = (tab, titleBtn, img) => {
 	let open = false;
 	const unurl = tab.src.split('/').pop();
-	let url = uv.decodeUrl(unurl);
+	let url = proxyConfig.decodeUrl(unurl);
 
 	if (tab.contentWindow.location.pathname.startsWith('/builtin/browser')) {
 		input.value = 'flow:' + url.split('/').pop().split('.')[0];
@@ -128,24 +129,28 @@ const handleTab = (tab, titleBtn, img) => {
 		injectJS(tab, url, false, () => {});
 	});
 
-	injectJS(tab, 'https://cdn.jsdelivr.net/npm/eruda', false, () => {
-		injectJS(tab, 'https://cdn.jsdelivr.net/npm/eruda-code', false, () => {
-			tab.contentWindow.eruda.add(tab.contentWindow.erudaCode);
-		});
+	if (proxyConfig.proxyName !== 'stomp') {
+		injectJS(tab, 'https://cdn.jsdelivr.net/npm/eruda', true, () => {
+			injectJS(tab, 'https://cdn.jsdelivr.net/npm/eruda-code', true, () => {
+				tab.contentWindow.eruda.add(tab.contentWindow.erudaCode);
+			});
 
-		tab.contentWindow.eruda.init({ tool: ['console', 'elements', 'code', 'sources'] });
-		tab.contentWindow.eruda._entryBtn.hide();
+			tab.contentWindow.eruda.init({ tool: ['console', 'elements', 'code', 'sources'] });
+			tab.contentWindow.eruda._entryBtn.hide();
 
-		document.querySelector('.eruda').onclick = () => {
-			if (open == false) {
+			document.querySelector('.eruda').onclick = () => {
+				if (open == false) {
 				tab.contentWindow.eruda.show();
-			} else {
+				} else {
 				tab.contentWindow.eruda.hide();
-			}
+				}
 
-			open = !open;
-		};
-	});
+				open = !open;
+			};
+		});
+	} else {
+		document.querySelector('.eruda').parentElement.style.display = 'none';
+	}
 
 	document.querySelector('.block').onclick = () => {
 		blockElement(tab);
@@ -156,14 +161,17 @@ const injectJS = (tab, FILE_URL, async = true, callback) => {
 	const scriptEle = document.createElement('script');
 
 	scriptEle.setAttribute('src', FILE_URL);
-	scriptEle.setAttribute('type', 'text/javascript');
-	scriptEle.setAttribute('async', async);
+	scriptEle.setAttribute('defer', async);
 
-	tab.contentDocument.head.appendChild(scriptEle);
+	tab.contentDocument.body.appendChild(scriptEle);
 
 	scriptEle.addEventListener('load', () => {
 		callback();
 	});
+
+	scriptEle.addEventListener('error', (e) => {
+		console.error(e);
+	});
 };
 
 const blockElement = (tab) => {
@@ -198,9 +206,9 @@ const removeObjectWithId = (arr, id) => {
 input.onkeydown = (e) => {
 	if (e.key == 'Enter') {
 		if (input.value.startsWith('flow:')) {
-			clickList[0].src = '/builtin/browser/' + input.value.split(':')[1] + '.html';
+			window.clickList[0].src = '/builtin/browser/' + input.value.split(':')[1] + '.html';
 		} else {
-			clickList[0].src = uv.prefix + uv.encodeUrl(input.value);
+			window.clickList[0].src = proxyConfig.prefix + proxyConfig.encodeUrl(input.value);
 		}
 	}
 };

FlowOS/public/builtin/apps/styles/settings.css

@@ -1,5 +1,5 @@
 .sidenav {
-	width: 230px;
+	width: 10%;
 	position: fixed;
 	z-index: 1;
 	top: 20px;
@@ -22,7 +22,7 @@
 }
 
 main {
-	margin-left: 240px; /* Same width as the sidebar + left position in px */
+	margin-left: calc(10% + 10px); /* Same width as the sidebar + left position in px */
 	padding: 0px 10px;
 }
 

FlowOS/public/builtin/browser/history.html

@@ -74,6 +74,6 @@ <h1>History</h1>
             </ul>
         </div>
 
-		<script src="/scripts/browser.js" defer></script>
+		<script src="/scripts/browser.js" defer type="module"></script>
 	</body>
 </html>

FlowOS/public/index.js

@@ -1,5 +1,5 @@
 /* eslint-env browser */
-/* global __uv$config WinBox */
+/* global __uv$config __stomp$config WinBox */
 
 import hotkeys from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
 
@@ -8,9 +8,11 @@ import { _auth } from './scripts/firebase.js';
 import Logger from './scripts/logger.js';
 import { registerSW, loadCSS, sleep } from './scripts/utilities.js';
 import config from './scripts/configManager.js';
-import { AppData, SettingsCategory, SettingsInput, SettingsTextarea } from './scripts/classes.js';
+import { AppData, SettingsCategory, SettingsInput, SettingsTextarea, SettingsDropdown } from './scripts/classes.js';
 
 import './uv/uv.config.js';
+import './stomp/bootstrapper.js';
+import './stmp/stomp.js';
 
 const logger = new Logger();
 
@@ -169,6 +171,33 @@ class FlowInstance {
 window.Flow = new FlowInstance();
 
 window.onload = () => {
+	new SettingsCategory('profile', 'Profile',
+	new SettingsInput('username', 'Username', '', ''),
+	new SettingsInput('url', 'Image URL', 'https://mysite.to/image.png', '')
+);
+
+new SettingsCategory('search', 'Browser',
+	new SettingsInput('url', 'Search Engine URL', 'https://duckduckgo.com', 'https://duckduckgo.com'),
+	new SettingsTextarea('urls', 'Extension URLs', 'https://mysite.to/script1.js\nhttps://mysite.to/script2.js\nhttps://mysite.to/script3.js', ''),
+	new SettingsDropdown('proxy', 'Proxy', 'Ultraviolet', ['Ultraviolet', 'STomp'])
+);
+
+new SettingsCategory('theme', 'Theme',
+	new SettingsInput('url', 'Theme URL', 'https://mysite.to/theme.css', '/builtin/themes/catppuccin-dark.css')
+);
+
+new SettingsCategory('modules', 'Modules/Scripts',
+	new SettingsTextarea('urls', 'Module URLs', 'https://mysite.to/script1.js\nhttps://mysite.to/script2.js\nhttps://mysite.to/script3.js', '/builtin/modules/battery.js\n/builtin/modules/clock.js\n/builtin/modules/weather.js')
+);
+	switch (config.settings.get('search').proxy) {
+		case 'STomp':
+			self.currentProxy = __stomp$config;
+			break;
+		case 'Ultraviolet':
+			self.currentProxy = __uv$config;
+			break;
+	}
+
 	window.apps = () => {
 		return {
 			'help': new AppData('help', 'Help', 'https://flowos-thinliquid.webapp-store.de/', false),
@@ -191,22 +220,4 @@ window.onload = () => {
 	document.head.append(style);
 
 	window.Flow.boot();
-};
-
-new SettingsCategory('profile', 'Profile',
-	new SettingsInput('username', 'Username', '', ''),
-	new SettingsInput('url', 'Image URL', 'https://mysite.to/image.png', '')
-);
-
-new SettingsCategory('search', 'Browser',
-	new SettingsInput('url', 'Search Engine URL', 'https://duckduckgo.com', 'https://duckduckgo.com'),
-	new SettingsTextarea('urls', 'Extension URLs', 'https://mysite.to/script1.js\nhttps://mysite.to/script2.js\nhttps://mysite.to/script3.js', '')
-);
-
-new SettingsCategory('theme', 'Theme',
-	new SettingsInput('url', 'Theme URL', 'https://mysite.to/theme.css', '/builtin/themes/catppuccin-dark.css')
-);
-
-new SettingsCategory('modules', 'Modules/Scripts',
-	new SettingsTextarea('urls', 'Module URLs', 'https://mysite.to/script1.js\nhttps://mysite.to/script2.js\nhttps://mysite.to/script3.js', '/builtin/modules/battery.js\n/builtin/modules/clock.js\n/builtin/modules/weather.js')
-);
+};

FlowOS/public/scripts/browser.js

@@ -1,13 +1,14 @@
 /* eslint-env browser */
 
 import { loadCSS } from './utilities.js';
+import config from './configManager.js';
 
 window.addEventListener('load', () => {
-	loadCSS(parent.parent.config.settings.get('theme').url);
+	loadCSS(config.settings.get('theme').url);
 });
 
 window.addEventListener('error', (e) => {
-	parent.parent.logger.error(`${e.filename} at line ${e.lineno}: ${e.message}`);
+	console.error(`${e.filename} at line ${e.lineno}: ${e.message}`);
 });
 
 window.loadJS = (FILE_URL, callback) => {

FlowOS/public/scripts/window.js

@@ -8,7 +8,7 @@ window.addEventListener('load', () => {
 });
 
 window.addEventListener('error', (e) => {
-	parent.logger.error(`${e.filename} at line ${e.lineno}: ${e.message}`);
+	console.error(`${e.filename} at line ${e.lineno}: ${e.message}`);
 });
 
 window.loadJS = (FILE_URL, callback) => {

FlowOS/public/stmp/stomp.js

@@ -0,0 +1,28 @@
+/* eslint-env browser */
+/* global StompBoot */
+
+const config = {
+	bare_server: '/bare/',
+	directory: '/stomp/',
+	codec: StompBoot.CODEC_PLAIN
+};
+
+self.__stomp$config = {
+	proxyName: 'stomp',
+	prefix: config.directory,
+	bare: config.bare_server,
+	encodeUrl: (i) => boot.html(i).replace('/stomp/', ''),
+	decodeUrl: (i) => decodeURIComponent(i.replace('process:html:', ''))
+};
+
+if (location.protocol === 'http:') {
+	config.loglevel = StompBoot.LOG_TRACE;
+} else {
+	config.loglevel = StompBoot.LOG_ERROR;
+}
+
+const boot = new StompBoot(config);
+
+boot.ready.catch(error => {
+	console.error(error);
+});

FlowOS/public/uv/uv.config.js

@@ -12,6 +12,7 @@ const plain = {
 };
 
 self.__uv$config = {
+	proxyName: 'uv',
 	prefix: '/uv/service/',
 	bare: '/bare/',
 	encodeUrl: plain.encode,

package.json

@@ -22,6 +22,7 @@
 		"@fastify/express": "^2.3.0",
 		"@fastify/static": "^6.10.2",
 		"@proudparrot2/uv": "^2.0.0",
+		"@sysce/stomp": "^2.0.0",
 		"@tomphttp/bare-server-node": "^2.0.1",
 		"express": "^4.18.2",
 		"fastify": "^4.19.2"

src/index.js

@@ -4,6 +4,7 @@ import fastifyCompress from '@fastify/compress';
 import fastifyCaching from '@fastify/caching';
 
 import { createBareServer } from '@tomphttp/bare-server-node';
+import { stompPath } from '@sysce/stomp';
 import { uvPath } from '@proudparrot2/uv';
 import { publicPath } from '../FlowOS/lib/index.js';
 
@@ -60,10 +61,18 @@ app.register(fastifyStatic, {
 	root: uvPath,
 	prefix: '/uv/',
 	decorateReply: false,
-	setHeaders: (res, path, stat) => {
+	setHeaders: (res) => {
 		res.setHeader('Service-Worker-Allowed', '/uv/service/');
 	}
 });
+app.register(fastifyStatic, {
+	root: stompPath,
+	prefix: '/stomp/',
+	decorateReply: false,
+	setHeaders: (res) => {
+		res.setHeader('Service-Worker-Allowed', '/stomp/');
+	}
+});
 app.register(fastifyStatic, {
 	root: publicPath,
 	prefix: '/',