@iebh/tera-fy 1.0.6 → 1.0.7

package/lib/terafy.client.js

@@ -236,7 +236,7 @@ export default class TeraFy {
 		// 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');
+			this.debug('Embed frame ready');
 			resolve();
 		});
 
@@ -304,7 +304,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 +313,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) {

package/lib/terafy.server.js

@@ -134,6 +134,7 @@ export default class TeraFyServer {
 				TERA: 1,
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
+			this.debug('INFO', 'Parent reply', message, '<=>', payload);
 			globalThis.parent.postMessage(payload, this.settings.restrictOrigin);
 		} catch (e) {
 			this.debug('ERROR', 'Attempted to dispatch payload server->client', payload);
@@ -169,10 +170,10 @@ 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,
 			}))
 			.catch(e => {
 				console.warn(`TERA-FY server threw on RPC:${message.method}:`, e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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
 	*/
@@ -90,15 +126,28 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 					...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.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)),
+				])
+
+
 				// 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',
-				};
 			},
 
 		};