@iebh/tera-fy 1.0.7 → 1.0.9

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
 	};
 
 
@@ -60,6 +64,9 @@ export default class TeraFy {
 		'getProjectState', 'applyProjectStatePatch',
 		// bindProjectState() - See below
 
+		// Project files
+		'getProjectFiles',
+
 		// Project Libraries
 		'getProjectLibrary', 'setProjectLibrary',
 	];
@@ -112,7 +119,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 +160,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 +218,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 +277,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('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 +310,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()`);
+		}
 	}
 
 
@@ -386,7 +454,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,8 +126,9 @@ 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 = {
@@ -135,7 +136,7 @@ export default class TeraFyServer {
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
 			this.debug('INFO', 'Parent reply', message, '<=>', payload);
-			globalThis.parent.postMessage(payload, this.settings.restrictOrigin);
+			(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);
@@ -150,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);
@@ -174,7 +177,7 @@ export default class TeraFyServer {
 				id: message.id,
 				action: 'response',
 				response,
-			}))
+			}, rawMessage.source))
 			.catch(e => {
 				console.warn(`TERA-FY server threw on RPC:${message.method}:`, e);
 				this.sendRaw({
@@ -370,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
 	*/
@@ -377,6 +381,7 @@ export default class TeraFyServer {
 		let settings = {
 			title: 'Select a project to work with',
 			allowCancel: true,
+			setActive: false,
 			...options,
 		};
 
@@ -388,6 +393,11 @@ export default class TeraFyServer {
 					buttons: settings.allowCancel && ['cancel'],
 				})
 			))
+			.then(project => settings.setActive
+				? this.setActiveProject(project)
+					.then(()=> project)
+				: project
+			)
 	}
 
 
@@ -424,6 +434,63 @@ export default class TeraFyServer {
 		this.debug('Applying sever state patch', {patch});
 	}
 
+
+
+	/**
+	* Subscribers to server project state changes
+	* @type {Array<Object>}}
+	* @property {String} id A unique ID for this subscriber state
+	* @property {String} source The human readable source for each subscriber
+	* @property {Function} sendPatch Function used to send a patch to a subscriber
+	* @property {Function} unsubscribe Function to release the client subscription
+	*/
+	projectStateSubscribers = [];
+	// }}}
+
+	// Project files - getProjectFiles() {{{
+
+	/**
+	* Data structure for a project file
+	* @class ProjectFile
+	*
+	* @property {String} id A UUID string representing the unique ID of the file
+	* @property {String} name Relative name path (can contain prefix directories) for the human readable file name
+	* @property {Object} parsedName An object representing meta file parts of a file name
+	* @property {String} parsedName.basename The filename + extention (i.e. everything without directory name)
+	* @property {String} parsedName.filename The file portion of the name (basename without the extension)
+	* @property {String} parsedName.ext The extension portion of the name (always lower case)
+	* @property {String} parsedName.dirName The directory path portion of the name
+	* @property {Date} created A date representing when the file was created
+	* @property {Date} modified A date representing when the file was created
+	* @property {Date} accessed A date representing when the file was last accessed
+	* @property {Number} size Size, in bytes, of the file
+	* @property {String} mime The associated mime type for the file
+	*/
+
+
+	/**
+	* Fetch the files associated with a given project
+	*
+	* @param {Object} options Options which mutate behaviour
+	* @param {Boolean} [options.autoRequire=true] Run `requireProject()` automatically before continuing
+	* @param {Boolean} [options.meta=true] Pull meta information for each file entity
+	*
+	* @returns {Promise<ProjectFile>} A collection of project files for the given project
+	*/
+	getProjectFiles(options) {
+		let settings = {
+			autoRequire: true,
+			meta: true,
+			...options,
+		};
+
+		return Promise.resolve()
+			.then(()=> app.service('$projects').promise())
+			.then(()=> settings.autoRequire && this.requireProject())
+			.then(project => app.service('$supabase').fileList(`/projects/${project.id}`, {
+				meta: settings.meta,
+			}))
+	}
 	// }}}
 
 	// Project Libraries - getProjectLibrary(), setProjectLibrary() {{{
@@ -431,24 +498,47 @@ export default class TeraFyServer {
 	/**
 	* Fetch the active projects citation library
 	*
+	* @param {String} [path] Optional file path to use, if omitted the contents of `options` are used to guess at a suitable file
 	* @param {Object} [options] Additional options to mutate behaviour
 	* @param {Boolean} [options.autoRequire=true] Run `requireProject()` automatically before continuing
 	* @param {Boolean} [options.multiple=false] Allow selection of multiple libraries
+	* @param {Function} [options.filter] Optional async file filter, called each time as `(File:ProjectFile)`
+	* @param {Function} [options.find] Optional async final stage file filter to reduce all candidates down to one subject file
 	* @param {String|Array<String>} [options.hint] Hints to identify the library to select in array order of preference. Generally corresponds to the previous stage - e.g. 'deduped', 'review1', 'review2', 'dedisputed'
 	*
-	* @returns {Promise<Array<RefLibRef>>} Collection of references for the selected library
+	* @returns {Promise<Array<ProjectFile>>} Collection of references for the selected library matching the given hint + filter, this could be a zero length array
 	*/
-	getProjectLibrary(options) {
+	getProjectLibrary(path, options) {
 		let settings = {
+			path,
 			autoRequire: true,
 			multiple: false,
 			hint: null,
-			...options,
+			filter: file => true,
+			find: files => files.at(0),
+			...(typeof path == 'string' ? {path, ...options} : path),
 		};
 
 		return Promise.resolve()
-			.then(()=> settings.autoRequire && this.requireProject())
-			// FIXME: Stub
+			.then(()=> {
+				if (settings.path) { // Already have a file name picked
+					if (!settings.path.startsWith('/')) throw new Error('All file names must start with a forward slash');
+					return settings.path;
+				} else { // Try to guess the file from the options structure
+					return this.getProjectFiles({
+						autoRequire: settings.autoRequire,
+					})
+					.then(files => files.filter(file =>
+						settings.filter(file)
+					))
+					.then(files => settings.find(files))
+					.then(file => file.path)
+				}
+			})
+			.then(filePath => app.service('$supabase').fileGet(filePath, {
+				json: true,
+				toast: false,
+			}))
 	}
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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

@@ -111,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()`
 			*
@@ -118,9 +119,9 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 			*/
 			install(app, options) {
 				let settings = {
+					autoInit: true,
 					globalName: '$tera',
 					stateOptions: {
-						autoRequire: true,
 						write: true,
 					},
 					...options,
@@ -131,19 +132,20 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 				$tera.state = null;
 
 				// $tera.statePromisable becomes the promise we are waiting on to resolve
-				$tera.statePromisable = 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 = projects)
-						.then(()=> $tera.debug('INFO', 'Loaded projects', $tera.list)),
-				])
+				$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