@iebh/tera-fy 1.0.6 → 1.0.8

package/lib/terafy.client.js

@@ -15,13 +15,17 @@ export default class TeraFy {
 	*
 	* @type {Object}
 	* @property {Boolean} devMode Operate in devMode - i.e. force outer refresh when encountering an existing TeraFy instance
+	* @property {'detect'|'parent'|'child'} How to communicate with TERA. 'parent' assumes that the parent of the current document is TERA, 'child' spawns an iFrame and uses TERA there, 'detect' tries parent and fallsback to 'child'
+	* @property {Number} modeTimeout How long entities have in 'detect' mode to identify themselves
 	* @property {String} siteUrl The TERA URL to connect to
 	* @property {String} restrictOrigin URL to restrict communications to
 	*/
 	settings = {
 		devMode: true,
+		mode: 'detect',
+		modeTimeout: 300,
 		siteUrl: 'https://tera-tools.com/embed',
-		restrictOrigin: '*', // DEBUG: Need to restrict this to TERA site
+		restrictOrigin: '*', // FIXME: Need to restrict this to TERA site
 	};
 
 
@@ -112,7 +116,16 @@ export default class TeraFy {
 				id: message.id || nanoid(),
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
-			this.dom.iframe.contentWindow.postMessage(payload, this.settings.restrictOrigin);
+
+			if (this.settings.mode == 'parent') {
+				window.parent.postMessage(payload, this.settings.restrictOrigin);
+			} else if (this.settings.mode == 'child') {
+				this.dom.iframe.contentWindow.postMessage(payload, this.settings.restrictOrigin);
+			} else if (this.settings.mode == 'detect') {
+				throw new Error('Call init() or detectMode() before trying to send data to determine the mode');
+			} else {
+				throw new Error(`Unknown TERA communication mode "${this.settings.mode}"`);
+			}
 		} catch (e) {
 			this.debug('ERROR', 'Message compose client->server:', e);
 			this.debug('ERROR', 'Attempted to dispatch payload client->server', payload);
@@ -144,6 +157,8 @@ export default class TeraFy {
 	* @param {MessageEvent} Raw message event to process
 	*/
 	acceptMessage(rawMessage) {
+		if (rawMessage.origin == window.location.origin) return; // Message came from us
+
 		let message = rawMessage.data;
 		if (!message.TERA || !message.id) return; // Ignore non-TERA signed messages
 		this.debug('Recieved', message);
@@ -200,23 +215,56 @@ export default class TeraFy {
 
 	/**
 	* Initalize the TERA client singleton
+	* This function can only be called once and will return the existing init() worker Promise if its called againt
 	*
 	* @returns {Promise<TeraFy>} An eventual promise which will resovle with this terafy instance
 	*/
 	init() {
+		if (this.init.promise) return this.init.promise; // Aleady been called - return init promise
+
 		window.addEventListener('message', this.acceptMessage.bind(this));
 
-		return Promise.all([
-			// Init core functions async
-			this.injectComms(),
-			this.injectStylesheet(),
-			this.injectMethods(),
-
-			// Init all plugins
-			...this.plugins
-				.map(plugin => plugin.init()),
-		])
-			.then(()=> this)
+		return this.init.promise = Promise.resolve()
+			.then(()=> this.detectMode())
+			.then(mode => this.settings.mode = mode)
+			.then(()=> Promise.all([
+				// Init core functions async
+				this.injectComms(),
+				this.injectStylesheet(),
+				this.injectMethods(),
+
+				// Init all plugins
+				...this.plugins
+					.map(plugin => plugin.init()),
+			]))
+	}
+
+
+
+	/**
+	* Populate `settings.mode`
+	* Try to communicate with a parent frame, if none assume we need to fallback to child mode
+	*
+	* @returns {Promise<String>} A promise which will resolve with the detected mode to use
+	*/
+	detectMode() {
+		if (this.settings.mode != 'detect') { // Dev has specified a forced mode to use
+			return this.settings.mode;
+		} else if (window.self === window.parent) { // This frame is already at the top
+			return 'child';
+		} else { // No idea - try messaging
+			return Promise.resolve()
+				.then(()=> this.settings.mode = 'parent') // Switch to parent mode...
+				.then(()=> new Promise((resolve, reject) => { // And try messaging with a timeout
+					let timeoutHandle = setTimeout(()=> reject(), this.settings.modeTimeout);
+
+					this.rpc('handshake')
+						.then(()=> clearTimeout(timeoutHandle))
+						.then(()=> resolve())
+				}))
+				.then(()=> 'parent')
+				.catch(()=> 'child')
+		}
 	}
 
 
@@ -226,23 +274,32 @@ export default class TeraFy {
 	* @returns {Promise} A promise which will resolve when the loading has completed and we have found a parent TERA instance or initiallized a child
 	*/
 	injectComms() { return new Promise(resolve => {
-		this.dom.el = document.createElement('div')
-		this.dom.el.id = 'tera-fy';
-		this.dom.el.classList.toggle('dev-mode', this.settings.devMode);
-		document.body.append(this.dom.el);
-
-		this.dom.iframe = document.createElement('iframe')
-
-		// Queue up event chain when document loads
-		this.dom.iframe.setAttribute('sandbox', 'allow-downloads allow-scripts allow-same-origin');
-		this.dom.iframe.addEventListener('load', ()=> {
-			this.debug('TERA EMBED FRAME READY');
-			resolve();
-		});
-
-		// Start document load sequence + append to DOM
-		this.dom.iframe.src = this.settings.siteUrl;
-		this.dom.el.append(this.dom.iframe);
+		switch (this.settings.mode) {
+			case 'child':
+				this.dom.el = document.createElement('div')
+				this.dom.el.id = 'tera-fy';
+				this.dom.el.classList.toggle('dev-mode', this.settings.devMode);
+				document.body.append(this.dom.el);
+
+				this.dom.iframe = document.createElement('iframe')
+
+				// Queue up event chain when document loads
+				this.dom.iframe.setAttribute('sandbox', 'allow-downloads allow-scripts allow-same-origin');
+				this.dom.iframe.addEventListener('load', ()=> {
+					this.debug('Embed frame ready');
+					resolve();
+				});
+
+				// Start document load sequence + append to DOM
+				this.dom.iframe.src = this.settings.siteUrl;
+				this.dom.el.append(this.dom.iframe);
+				break;
+			case 'parent':
+				resolve();
+				break;
+			default:
+				throw new Error(`Unsupported mode "${this.settings.mode}" when calling injectComms()`);
+		}
 	})}
 
 
@@ -250,50 +307,58 @@ export default class TeraFy {
 	* Inject a local stylesheet to handle TERA server functionality
 	*/
 	injectStylesheet() {
-		this.dom.stylesheet = document.createElement('style');
-		this.dom.stylesheet.innerHTML = [
-			':root {',
-				'--TERA-accent: #4d659c;',
-			'}',
-
-			'#tera-fy {',
-				'display: none;',
-				'position: fixed;',
-				'right: 50px;',
-				'bottom: 50px;',
-				'width: 300px;',
-				'height: 150px;',
-				'background: transparent;',
-
-				'&.dev-mode {',
-					'display: flex;',
-					'border: 5px solid var(--TERA-accent);',
-					'background: #FFF;',
-				'}',
-
-				'& > iframe {',
-					'width: 100%;',
-					'height: 100%;',
-				'}',
-			'}',
-
-			// Fullscreen functionality {{{
-			'body.tera-fy-focus {',
-				'overflow: hidden;',
-
-				'& #tera-fy {',
-					'display: flex !important;',
-					'position: fixed !important;',
-					'top: 0px !important;',
-					'width: 100vw !important;',
-					'height: 100vh !important;',
-					'left: 0px !important;',
-					'z-index: 10000 !important;',
-				'}',
-			'}',
-			// }}}
-		].join('\n');
-		document.head.appendChild(this.dom.stylesheet);
+		switch (this.settings.mode) {
+			case 'child':
+				this.dom.stylesheet = document.createElement('style');
+				this.dom.stylesheet.innerHTML = [
+					':root {',
+						'--TERA-accent: #4d659c;',
+					'}',
+
+					'#tera-fy {',
+						'display: none;',
+						'position: fixed;',
+						'right: 50px;',
+						'bottom: 50px;',
+						'width: 300px;',
+						'height: 150px;',
+						'background: transparent;',
+
+						'&.dev-mode {',
+							'display: flex;',
+							'border: 5px solid var(--TERA-accent);',
+							'background: #FFF;',
+						'}',
+
+						'& > iframe {',
+							'width: 100%;',
+							'height: 100%;',
+						'}',
+					'}',
+
+					// Fullscreen functionality {{{
+					'body.tera-fy-focus {',
+						'overflow: hidden;',
+
+						'& #tera-fy {',
+							'display: flex !important;',
+							'position: fixed !important;',
+							'top: 0px !important;',
+							'width: 100vw !important;',
+							'height: 100vh !important;',
+							'left: 0px !important;',
+							'z-index: 10000 !important;',
+						'}',
+					'}',
+					// }}}
+				].join('\n');
+				document.head.appendChild(this.dom.stylesheet);
+				break;
+			case 'parent':
+				break;
+			default:
+				throw new Error(`Unsupported mode "${this.settings.mode}" when injectStylesheet()`);
+		}
 	}
 
 
@@ -304,7 +369,6 @@ export default class TeraFy {
 		this.methods.forEach(method =>
 			this[method] = this.rpc.bind(this, method)
 		);
-		this.debug('Remote methods installed:', this.methods);
 	}
 	// }}}
 
@@ -314,7 +378,7 @@ export default class TeraFy {
 	* Debugging output function
 	* This function will only act if `settings.devMode` is truthy
 	*
-	* @param {'INFO'|'LOG'|'WARN'|'ERROR'} [status] Optional prefixing level to mark the message as. 'WARN' and 'ERROR' will always show reguardless of devMode being enabled
+	* @param {'VERBOSE'|'INFO'|'LOG'|'WARN'|'ERROR'} [status] Optional prefixing level to mark the message as. 'WARN' and 'ERROR' will always show reguardless of devMode being enabled
 	* @param {String} [msg...] Output to show
 	*/
 	debug(...msg) {
@@ -387,7 +451,6 @@ export default class TeraFy {
 		Object.getOwnPropertyNames(Object.getPrototypeOf(source))
 			.filter(prop => !['constructor', 'prototype', 'name'].includes(prop))
 			.forEach((prop) => {
-				console.log('Merge method', prop);
 				Object.defineProperty(
 					target,
 					prop,

package/lib/terafy.server.js

@@ -126,15 +126,17 @@ export default class TeraFyServer {
 	* Send raw message content to the client
 	*
 	* @param {Object} message Message object to send
+	* @param {Window} Window context to dispatch the message via if its not the same as the regular window
 	*/
-	sendRaw(message) {
+	sendRaw(message, sendVia) {
 		let payload;
 		try {
 			payload = {
 				TERA: 1,
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
-			globalThis.parent.postMessage(payload, this.settings.restrictOrigin);
+			this.debug('INFO', 'Parent reply', message, '<=>', payload);
+			(sendVia || globalThis.parent).postMessage(payload, this.settings.restrictOrigin);
 		} catch (e) {
 			this.debug('ERROR', 'Attempted to dispatch payload server->client', payload);
 			this.debug('ERROR', 'Message compose server->client:', e);
@@ -149,6 +151,8 @@ export default class TeraFyServer {
 	* @param {MessageEvent} Raw message event to process
 	*/
 	acceptMessage(rawMessage) {
+		if (rawMessage.origin == window.location.origin) return; // Message came from us
+
 		let message = rawMessage.data;
 		if (!message.TERA) return; // Ignore non-TERA signed messages
 		this.debug('Recieved', message);
@@ -169,11 +173,11 @@ export default class TeraFyServer {
 					throw new Error('Unknown message format');
 				}
 			})
-			.then(res => this.sendRaw({
+			.then(response => this.sendRaw({
 				id: message.id,
 				action: 'response',
-				response: res,
-			}))
+				response,
+			}, rawMessage.source))
 			.catch(e => {
 				console.warn(`TERA-FY server threw on RPC:${message.method}:`, e);
 				this.sendRaw({
@@ -369,6 +373,7 @@ export default class TeraFyServer {
 	* @param {Object} [options] Additional options to mutate behaviour
 	* @param {String} [options.title="Select a project to work with"] The title of the dialog to display
 	* @param {Boolean} [options.allowCancel=true] Advertise cancelling the operation, the dialog can still be cancelled by closing it
+	* @param {Boolean} [options.setActive=false] Also set the project as active when selected
 	*
 	* @returns {Promise<Project>} The active project
 	*/
@@ -376,6 +381,7 @@ export default class TeraFyServer {
 		let settings = {
 			title: 'Select a project to work with',
 			allowCancel: true,
+			setActive: false,
 			...options,
 		};
 
@@ -387,6 +393,11 @@ export default class TeraFyServer {
 					buttons: settings.allowCancel && ['cancel'],
 				})
 			))
+			.then(project => settings.setActive
+				? this.setActiveProject(project)
+					.then(()=> project)
+				: project
+			)
 	}
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "TERA website worker",
   "scripts": {
     "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --sourcemap --serve --servedir=.",

package/plugins/vue.js

@@ -20,7 +20,7 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 	* @param {Boolean} [options.write=true] Allow local reactivity to writes - send these to the server
 	* @param {Array<String>} Paths to subscribe to e.g. ['/users/'],
 	*
-	* @returns {Promies<Reactive<Object>>} A reactive object representing the project state
+	* @returns {Promie<Reactive<Object>>} A reactive object representing the project state
 	*/
 	bindProjectState(options) {
 		let settings = {
@@ -36,6 +36,8 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 				paths: settings.paths,
 			}))
 			.then(snapshot => {
+				this.debug('Got project snapshot', snapshot);
+
 				// Create initial reactive
 				let stateReactive = reactive(snapshot);
 
@@ -63,6 +65,40 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 	}
 
 
+	/**
+	* List of available projects for the current session
+	* @type {VueReactive<Array<Object>>}
+	*/
+	projects = reactive([]);
+
+
+	/**
+	* The bound, reactive state of a Vue project
+	* When loaded this represents the state of a project as an object
+	* @type {Object}
+	*/
+	state = null;
+
+
+	/**
+	* Promise used when binding to state
+	* @type {Promise}
+	*/
+	statePromisable = null;
+
+
+	/**
+	* Utility function which returns an awaitable promise when the state is loading or being refreshed
+	* This is used in place of `statePromisable` as it has a slightly more logical syntax as a function
+	*
+	* @example Await the state loading
+	* await $tera.statePromise();
+	*/
+	statePromise() {
+		return this.statePromisable;
+	}
+
+
 	/**
 	* Provide a Vue@3 compatible plugin
 	*/
@@ -75,6 +111,7 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 			* Install into Vue as a generic Vue@3 plugin
 			*
 			* @param {Object} [options] Additional options to mutate behaviour
+			* @param {Boolean} [options.autoInit=true] Call Init() during the `statePromiseable` cycle if its not already been called
 			* @param {String} [options.globalName='$tera'] Globa property to allocate this service as
 			* @param {Objecct} [options.bindOptions] Options passed to `bindProjectState()`
 			*
@@ -82,23 +119,37 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 			*/
 			install(app, options) {
 				let settings = {
+					autoInit: true,
 					globalName: '$tera',
 					stateOptions: {
-						autoRequire: true,
 						write: true,
 					},
 					...options,
 				};
 
+				// Bind $tera.state to the active project
+				// Initialize state to null
+				$tera.state = null;
+
+				// $tera.statePromisable becomes the promise we are waiting on to resolve
+				$tera.statePromisable = Promise.resolve()
+					.then(()=> settings.autoInit && $tera.init())
+					.then(()=> Promise.all([
+						// Bind available project and wait on it
+						$tera.bindProjectState(settings.stateOptions)
+							.then(state => $tera.state = state)
+							.then(()=> $tera.debug('INFO', 'Loaded project state', $tera.state)),
+
+						// Fetch available projects
+						// TODO: It would be nice if this was responsive to remote changes
+						$tera.getProjects()
+							.then(projects => $tera.projects = reactive(projects))
+							.then(()=> $tera.debug('INFO', 'Loaded projects', $tera.projects)),
+					]))
+
+
 				// Make this module available globally
 				app.config.globalProperties[settings.globalName] = $tera;
-
-				// Bind $tera.state to the active project
-				// TODO: context.bindProjectState(settings.stateOptions),
-				$tera.state = {
-					id: 'TERAPROJ',
-					name: 'A fake project',
-				};
 			},
 
 		};