@iebh/tera-fy 1.0.9 → 1.0.11

package/lib/terafy.server.js

@@ -1,5 +1,7 @@
-import {cloneDeep} from 'lodash-es';
+import {cloneDeep, set as pathSet} from 'lodash-es';
+import {diffApply, jsonPatchPathConverter as jsPatchConverter} from 'just-diff-apply';
 import {nanoid} from 'nanoid';
+import mixin from '#utils/mixin';
 
 /**
 * Server-side functions available to the Tera-Fy client library
@@ -15,13 +17,25 @@ export default class TeraFyServer {
 	*
 	* @type {Object}
 	* @property {Boolean} devMode Operate in devMode - i.e. force outer refresh when encountering an existing TeraFy instance
+	* @property {Number} subscribeTimeout Acceptable timeout period for subscribers to acklowledge a project change event, failing to respond will result in the subscriber being removed from the available subscriber list
 	* @property {String} restrictOrigin URL to restrict communications to
+	* @property {String} projectId The project to use as the default reference when calling various APIs
+	* @property {Number} The current server mode matching `SERVERMODE_*`
 	*/
 	settings = {
+		devMode: false,
 		restrictOrigin: '*',
+		subscribeTimeout: 2000,
+		projectId: null,
+		serverMode: 0,
 	};
 
-	// Contexts - createContext(), messageEvent, senderRpc() {{{
+	static SERVERMODE_NONE = 0;
+	static SERVERMODE_EMBEDDED = 1;
+	static SERVERMODE_WINDOW = 2;
+
+
+	// Contexts - createContext(), getClientContext(), messageEvent, senderRpc() {{{
 	/**
 	* Create a context based on a shallow copy of this instance + additional functionality for the incoming MessageEvent
 	* This is used by acceptMessage to provide a means to reply / send messages to the originator
@@ -31,10 +45,10 @@ export default class TeraFyServer {
 	* @returns {Object} A context, which is this instance extended with additional properties
 	*/
 	createContext(e) {
-		// Rather ugly shallow-copy-of instancr hack from https://stackoverflow.com/a/44782052/1295040
-		return Object.assign(Object.create(Object.getPrototypeOf(this)), this, {
+		// Construct wrapper for sendRaw for this client
+		return mixin(this, {
 			messageEvent: e,
-			sendRaw(message) { // Override sendRaw because we can't do this inline for security reasons
+			sendRaw(message) {
 				let payload;
 				try {
 					payload = {
@@ -43,8 +57,7 @@ export default class TeraFyServer {
 					};
 					e.source.postMessage(payload, this.settings.restrictOrigin);
 				} catch (e) {
-					this.debug('ERROR', 'Message compose/reply via server->cient:', e);
-					this.debug('ERROR', 'Attempted to dispatch payload server(via reply)->client', payload);
+					this.debug('ERROR', 'Attempted to dispatch payload server(via reply)->client', {payload, e});
 					throw e;
 				}
 			},
@@ -52,6 +65,58 @@ export default class TeraFyServer {
 	}
 
 
+	/**
+	* Create a new client context from the server to the client even if the client hasn't requested the communication
+	* This function is used to send unsolicited communications from the server->client in contrast to createContext() which _replies_ from client->server->client
+	*
+	* @returns {Object} A context, which is this instance extended with additional properties
+	*/
+	getClientContext() {
+		switch (this.settings.serverMode) {
+			case TeraFyServer.SERVERMODE_NONE:
+				throw new Error('Client has not yet initiated communication');
+			case TeraFyServer.SERVERMODE_EMBEDDED:
+				// Server is inside an iFrame so we need to send messages to the window parent
+				return mixin(this, {
+					sendRaw(message) {
+						let payload;
+						try {
+							payload = {
+								TERA: 1,
+								...cloneDeep(message), // Need to clone to resolve promise nasties
+							};
+							window.parent.postMessage(payload, this.settings.restrictOrigin);
+						} catch (e) {
+							this.debug('ERROR', 'Attempted to dispatch payload server(iframe)->cient(top level window)', {payload, e});
+							throw e;
+						}
+					},
+				});
+			case TeraFyServer.SERVERMODE_WINDOW:
+				// Server is the top-level window so we need to send messages to an embedded iFrame
+				debugger; // FIXME: THIS IS ALL UNTESTED
+				let iFrame = document.querySelector('iframe#tera-fy');
+				if (!iFrame) throw new Error('Cannot locate TERA-FY client iFrame');
+
+				return mixin(this, {
+					sendRaw(message) {
+						let payload;
+						try {
+							payload = {
+								TERA: 1,
+								...cloneDeep(message), // Need to clone to resolve promise nasties
+							};
+							iFrame.postMessage(payload, this.settings.restrictOrigin);
+						} catch (e) {
+							this.debug('ERROR', 'Attempted to dispatch payload server(top level window)->cient(iframe)', {payload, e});
+							throw e;
+						}
+					},
+				});
+		}
+	}
+
+
 	/**
 	* MessageEvent context
 	* Only available if the context was created via `createContext()`
@@ -81,7 +146,7 @@ export default class TeraFyServer {
 	}
 	// }}}
 
-	// Messages - handshake(), sendRaw(), acceptMessage(), requestFocus() {{{
+	// Messages - handshake(), send(), sendRaw(), setServerMode(), acceptMessage(), requestFocus(), emitClients() {{{
 
 	/**
 	* Return basic server information as a form of validation
@@ -124,6 +189,7 @@ export default class TeraFyServer {
 
 	/**
 	* Send raw message content to the client
+	* Unlike send() this method does not expect any response
 	*
 	* @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
@@ -135,13 +201,31 @@ export default class TeraFyServer {
 				TERA: 1,
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
-			this.debug('INFO', 'Parent reply', message, '<=>', payload);
+			this.debug('INFO', 'Parent send', 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);
 		}
+	}
 
+
+	/**
+	* Setter to translate between string inputs and the server modes in SERVERMODE_*
+	*
+	* @param {String} mode The server mode to set to
+	*/
+	setServerMode(mode) {
+		switch (mode) {
+			case 'embedded':
+				this.settings.serverMode = TeraFyServer.SERVERMODE_EMBEDDED;
+				break;
+			case 'window':
+				this.settings.serverMode = TeraFyServer.SERVERMODE_WINDOW;
+				break;
+			default:
+				throw new Error(`Unsupported server mode "${mode}"`);
+		}
 	}
 
 
@@ -211,6 +295,24 @@ export default class TeraFyServer {
 			.then(()=> cb.call(this))
 			.finally(()=> this.senderRpc('toggleFocus', false))
 	}
+
+
+	/**
+	* Emit messages down into all connected clients
+	* Note that emitted messages have no response - they are sent to clients only with no return value
+	*
+	* @param {String} event The event name to emit
+	* @param {*} [args...] Optional event payload to send
+	* @returns {Promise} A promise which resolves when the transmission has completed
+	*/
+	emitClients(event, ...args) {
+		return this.getClientContext().sendRaw({
+			action: 'event',
+			id: nanoid(),
+			event,
+			payload: args,
+		});
+	}
 	// }}}
 
 	// Session / User - getUser() {{{
@@ -237,7 +339,7 @@ export default class TeraFyServer {
 			$auth.promise(),
 			$subscriptions.promise(),
 		])
-			.then(()=> ({
+			.then(()=> $auth.user.id ? {
 				id: $auth.user.id,
 				email: $auth.user.email,
 				name: [
@@ -245,7 +347,7 @@ export default class TeraFyServer {
 					$auth.user.family_name,
 				].filter(Boolean).join(' '),
 				isSubscribed: $subscriptions.isSubscribed,
-			}))
+			} : null)
 	}
 
 	// }}}
@@ -403,7 +505,7 @@ export default class TeraFyServer {
 
 	// }}}
 
-	// Project State - getProjectState(), applyProjectStatePatch() {{{
+	// Project State - getProjectState(), setProjectState(), saveProjectState(), replaceProjectState() {{{
 
 	/**
 	* Return the current, full snapshot state of the active project
@@ -427,14 +529,128 @@ export default class TeraFyServer {
 	}
 
 
+	/**
+	* Set a nested value within the project state
+	* Paths can be any valid Lodash.set() value such as:
+	*
+	*     - Dotted notation - e.g. `foo.bar.1.baz`
+	*     - Array path segments e.g. `['foo', 'bar', 1, 'baz']`
+	*
+	*
+	* @param {String|Array<String>} path The sub-path within the project state to set
+	* @param {*} value The value to set
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean} [options.save=true] Save the changes to the server immediately, disable to queue up multiple writes
+	* @param {Boolean} [options.sync=false] Wait for the server to acknowledge the write, you almost never need to do this
+	*
+	* @returns {Promise} A promise which resolves when the operation has synced with the server
+	*/
+	setProjectState(path, value, options) {
+		let settings = {
+			save: true,
+			sync: false,
+			...options,
+		};
+
+		if (!app.service('$projects').active) throw new Error('No active project');
+
+		pathSet(app.service('$projects').active, path, value)
+
+		return (
+			this.save && this.sync ? this.saveProjectState()
+			: this.save ? void this.saveProjectState()
+			: (()=> { throw new Error('setProjectState({sync: true, save: false}) makes no sense') })()
+		);
+	}
+
+
+	/**
+	* Force-Save the currently active project state
+	*
+	* @returns {Promise} A promise which resolves when the operation has completed
+	*/
+	saveProjectState() {
+		if (!app.service('$projects').active) throw new Error('No active project');
+
+		// TODO: Would be nice if we compared against a sanity hash or something before just clobbering
+		this.debug('FIXME: Force saving projects is not yet supported - this should occur in realtime anyway');
+		return Promise.resolve();
+	}
+
+
+	/**
+	* Overwrite the entire project state with a new object
+	* You almost never want to use this function directly, see `setProjectState(path, value)` for a nicer wrapper
+	*
+	* @see setProjectState()
+	* @param {Object} newState The new state to replace the current state with
+	* @returns {Promise} A promise which resolves when the operation has completed
+	*/
+	replaceProjectState(newState) {
+		if (!app.service('$projects').active) throw new Error('No active project');
+		if (typeof newState != 'object') throw new Error('Only project state objects are accepted');
+
+		Object.assign(app.service('$projects').active, newState);
+		return this.saveProjectState();
+	}
+	// }}}
+
+	// Project State Patching + Subscribing - applyProjectStatePatch(), subscribeProjectState() {{{
 	/**
 	* Apply a computed `just-diff` patch to the current project state
+	*
+	* @param {Object} Patch to apply
+	* @returns {Promise} A promise which resolves when the operation has completed
 	*/
 	applyProjectStatePatch(patch) {
-		this.debug('Applying sever state patch', {patch});
+		if (!app.service('$projects').active) throw new Error('No active project to patch');
+		this.debug('Applying', patch.length, 'project state patches', {patch});
+		diffApply(app.service('$projects').active, patch, jsPatchConverter);
+
+		return Promise.resolve();
 	}
 
 
+	/**
+	* Subscribe to project state changes
+	* This will dispatch an RPC call to the source object `applyProjectStatePatchLocal()` function with the patch
+	* If the above call fails the subscriber is assumed as dead and unsubscribed from the polling list
+	*
+	* @returns {Promise<Function>} A promise which resolves when a subscription has been created, call the resulting function to unsubscribe
+	*/
+	subscribeProjectState() {
+		if (!this.messageEvent) throw new Error('senderRpc() can only be used if given a context from `createContext()`');
+
+		let subscriber = {
+			id: nanoid(),
+			origin: this.messageEvent.origin,
+			sendPatch: patch => new Promise((resolve, reject) => {
+				let senderTimeout = setTimeout(()=> {
+					reject(`Timed out sending to project-state subscriber "${subscriber.origin}"`);
+				}, this.subscribeTimeout);
+
+				return this.senderRpc.call(this, 'applyProjectStatePatchLocal', patch)
+					.then(()=> {
+						clearTimeout(senderTimeout);
+						resolve()
+					})
+					.catch(e => {
+						subscriber.unsubscribe();
+						reject(`Rejected calling RPC:applyProjectStatePatchLocal() with project-state subscriber "${subscriber.origin}" -`, e)
+
+					})
+			}),
+			unsubscribe: ()=> {
+				this.debug('Unsubscribing project-state subscriber', subscriber.origin);
+				this.projectStateSubscribers = this.projectStateSubscribers.filter(ps => ps.id != subscriber.id);
+			},
+		};
+
+		// Append to subscriber list
+		this.projectStateSubscribers.push(subscriber)
+	}
+
 
 	/**
 	* Subscribers to server project state changes

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "TERA website worker",
   "scripts": {
     "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --sourcemap --serve --servedir=.",
     "build": "concurrently 'npm:build:*'",
     "build:client": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --sourcemap",
-    "build:docs": "jsdoc2md --files lib/terafy.*.js plugins/*.js >api.md",
+    "build:docs:api": "documentation build lib/terafy.client.js --format html --config documentation.yml --output docs/",
+    "build:docs:markdown": "documentation build lib/terafy.client.js --format md --markdown-toc --output api.md",
     "lint": "eslint ."
   },
   "type": "module",
   "imports": {
-    "#terafy": "./lib/terafy.client.js"
+    "#terafy": "./lib/terafy.client.js",
+    "#utils/*": "./utils/*.js"
   },
   "exports": {
     ".": {
@@ -59,19 +61,19 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "just-diff": "^6.0.2",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.2"
   },
   "optionalDependencies": {
+    "just-diff": "^6.0.2",
+    "just-diff-apply": "^5.5.0",
     "vue": "^3.3.7"
   },
   "devDependencies": {
     "@momsfriendlydevco/eslint-config": "^1.0.7",
     "concurrently": "^8.2.2",
-    "esbuild": "^0.19.5",
-    "eslint": "^8.47.0",
-    "jsdoc-to-markdown": "^8.0.0"
+    "documentation": "^14.0.2",
+    "esbuild": "^0.19.5"
   },
   "eslintConfig": {
     "extends": "@momsfriendlydevco",
@@ -83,5 +85,9 @@
       "ecmaVersion": 13,
       "sourceType": "module"
     }
+  },
+  "dependencies": {
+    "@momsfriendlydevco/supabase-reactive": "^1.0.7",
+    "mitt": "^3.0.1"
   }
 }

package/plugins/vue2.js

@@ -0,0 +1,185 @@
+import {cloneDeep} from 'lodash-es';
+import TeraFyPluginBase from './base.js';
+import Vue from 'vue';
+
+/**
+* Vue2 observables plugin
+* Provides the `bindProjectState()` function for Vue based projects
+*
+* This function is expected to be included via the `terafy.use(MODULE, OPTIONS)` syntax rather than directly
+*
+* @class TeraFyPluginVue
+*
+* @example Implementation within a Vue2 project `src/main.js`:
+* // Include the main Tera-Fy core
+* import TeraFy from '@iebh/tera-fy';
+* import TerafyVue from '@iebh/tera-fy/plugins/vue2';
+* let terafy = new TeraFy()
+*   .set('devMode', true) // Uncomment this line if you want TeraFy to be chatty
+*   .set('siteUrl', 'http://localhost:8000/embed') // Uncomment this line if running TERA locally
+*   .use(TerafyVue) // Add the Vue plugin
+*
+* // Include after app boot
+* const app = new Vue({ ... })
+* app.$mount("#app");
+* await terafy.init({app});
+*/
+export default class TeraFyPluginVue2 extends TeraFyPluginBase {
+
+	/**
+	* Return a Vue Observable object that can be read/written which whose changes will transparently be written back to the TERA server instance
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {VueComponent} [options.component] Component to use to bind $watch events
+	* @param {String} [options.componentKey] Key within the component to attach the state. Defaults to a random string
+	* @param {Boolean} [options.autoRequire=true] Run `requireProject()` automatically before continuing
+	* @param {String|Boolean} [options.bindKey='project'] If set, creates the binding also as the specified key within the main Tera object, if falsy just returns the observable
+	* @param {Boolean} [options.write=true] Allow local reactivity to writes - send these to the server
+	*
+	* @returns {Promie<VueObservable<Object>>} A Vue.Observable object representing the project state
+	*/
+	bindProjectState(options) {
+		let settings = {
+			component: null,
+			componentKey: null,
+			autoRequire: true,
+			write: true,
+			...options,
+		};
+
+		return Promise.resolve()
+			.then(()=> Promise.all([
+				// Fetch initial state {{{
+				this.getProjectState({
+					autoRequire: settings.autoRequire,
+				}),
+				// }}}
+				// Allocate component[componentKey] to stash our observable {{{
+				(()=> {
+					if (settings.componentKey) return; // Already allocated by user
+					for (let x = 0; x < 50; x++) {
+						let key = `terafy_${x}`;
+						if (!Object.hasOwnProperty(settings.component, key)) { // eslint-disable-line
+							settings.componentKey = key;
+							return;
+						}
+					}
+					throw new Error('Unable to find unique key to allocate against Vue2 component');
+				})(),
+				// }}}
+			]))
+			.then(([snapshot]) => {
+				this.debug('Got project snapshot', snapshot);
+
+				// Create initial Observable
+				let stateObservable = Vue.observable(snapshot);
+
+				// Allocate to component
+				settings.component[settings.componentKey] = stateObservable;
+
+				// Watch for remote changes and update
+				let skipUpdate = 0; // How many subsequent WRITE operations to ignore (set when reading)
+				if (settings.read) {
+					this.events.on(`update:projects/${stateReactive.id}`, newState => {
+						skipUpdate++; // Skip next update as we're updating our own state anyway
+						Object.assign(stateReactive, newState);
+					});
+				}
+
+				// Watch for local writes and react
+				if (settings.write) {
+					if (!settings.component) throw new Error('bindProjectState requires a VueComponent specified as `component`');
+
+					// NOTE: The below $watch function returns two copies of the new value of the observed
+					//       so we have to keep track of what changed ourselves by initalizing against the
+					//       snapshot
+					let oldVal = cloneDeep(snapshot);
+
+					settings.component.$watch(
+						settings.componentKey,
+						newVal => {
+							if (skipUpdate > 0) {
+								skipUpdate--;
+								return;
+							}
+
+							this.createProjectStatePatch(newVal, oldVal);
+							oldVal = cloneDeep(snapshot);
+						},
+						{
+							deep: true,
+						},
+					);
+				}
+
+				// Return Vue Reactive
+				return stateObservable;
+			})
+	}
+
+
+	/**
+	* List of available projects for the current session
+	* @type {VueReactive<Array<Object>>}
+	*/
+	projects = Vue.observable([]);
+
+
+	/**
+	* The bound, reactive state of a Vue project
+	* When loaded this represents the state of a project as an object
+	* @type {Object}
+	*/
+	state = null;
+
+
+	/**
+	* Install into Vue@2
+	*
+	* @param {Object} [options] Additional options to mutate behaviour (defaults to the main teraFy settings)
+	* @param {String} [options.globalName='$tera'] Global property to allocate this service as within Vue2
+	* @param {Boolean} [options.subscribeState=true] Setup `vm.$tera.state` as a live binding on init
+	* @param {Boolean} [options.subscribeList=true] Setup `vm.$tera.projects` as a list of accesible projects on init
+	* @param {Objecct} [options.stateOptions] Options passed to `bindProjectState()` when setting up the main state
+	*
+	* @returns {Promise} A Promise which will resolve when the init process has completed
+	*/
+	init(options) {
+		let settings = {
+			globalName: '$tera',
+			subscribeState: true,
+			subscribeProjects: true,
+			stateOptions: {
+				write: true,
+			},
+			...options,
+		};
+		if (!this.settings.app) throw new Error('Need to specify the root level Vue2 app during init');
+		settings.stateOptions.app = this.settings.app;
+
+		// Make this module available globally
+		if (settings.globalName)
+			Vue.prototype[settings.globalName] = this;
+
+		// Bind `state` to the active project
+		// Initialize state to null
+		this.state = null;
+
+		// this.statePromisable becomes the promise we are waiting on to resolve
+		return Promise.resolve()
+			.then(()=> Promise.all([
+				// Bind available project and wait on it
+				settings.subscribeState && this.bindProjectState({
+					...settings.stateOptions,
+					component: this.settings.app.$root,
+				})
+					.then(state => this.state = state)
+					.then(()=> this.debug('INFO', 'Loaded project state', this.state)),
+
+				// Fetch available projects
+				settings.subscribeProjects && this.getProjects()
+					.then(projects => this.projects = Vue.observable(projects))
+					.then(()=> this.debug('INFO', 'Loaded projects', this.projects)),
+			]))
+	}
+}

package/plugins/{vue.js → vue3.js}

@@ -1,5 +1,4 @@
 import TeraFyPluginBase from './base.js';
-import {diff} from 'just-diff';
 import {reactive, watch} from 'vue';
 
 /**
@@ -9,6 +8,20 @@ import {reactive, watch} from 'vue';
 * This function is expected to be included via the `terafy.use(MODULE, OPTIONS)` syntax rather than directly
 *
 * @class TeraFyPluginVue
+*
+* @example Implementation within a Vue3 / Vite project within `src/main.js`:
+* import TeraFy from '@iebh/tera-fy';
+* import TerafyVue from '@iebh/tera-fy/plugins/vue';
+* let terafy = new TeraFy()
+*   .set('devMode', import.meta.env.DEV)
+*   .set('siteUrl', 'http://localhost:8000/embed') // Uncomment this line if running TERA locally
+*   .use(TerafyVue) // Add the Vue plugin
+*
+* terafy.init(); // Initialize everything
+*
+* app.use(terafy.vuePlugin({
+*   globalName: '$tera', // Install as vm.$tera into every component
+* }));
 */
 export default class TeraFyPluginVue extends TeraFyPluginBase {
 
@@ -17,41 +30,49 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 	*
 	* @param {Object} [options] Additional options to mutate behaviour
 	* @param {Boolean} [options.autoRequire=true] Run `requireProject()` automatically before continuing
+	* @param {Boolean} [options.read=true] Allow remote reactivity - update the local state when the server changes
 	* @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 {Promie<Reactive<Object>>} A reactive object representing the project state
 	*/
 	bindProjectState(options) {
 		let settings = {
 			autoRequire: true,
+			read: true,
 			write: true,
 			...options,
 		};
 
 		return Promise.resolve()
-			.then(()=> settings.autoRequire && this.requireProject())
 			.then(()=> this.getProjectState({
-				autoRequire: false, // already handled this
-				paths: settings.paths,
+				autoRequire: settings.autoRequire ,
 			}))
 			.then(snapshot => {
-				this.debug('Got project snapshot', snapshot);
+				this.debug('Fetched project snapshot', snapshot);
 
 				// Create initial reactive
 				let stateReactive = reactive(snapshot);
 
 				// Watch for remote changes and update
-				// FIXME: Not yet supported
+				let skipUpdate = 0; // How many subsequent WRITE operations to ignore (set when reading)
+				if (settings.read) {
+					this.events.on(`update:projects/${stateReactive.id}`, newState => {
+						skipUpdate++; // Skip next update as we're updating our own state anyway
+						Object.assign(stateReactive, newState);
+					});
+				}
 
 				// Watch for local writes and react
 				if (settings.write) {
 					watch(
 						stateReactive,
 						(newVal, oldVal) => {
-							let diff = diff(newVal, oldVal);
-							this.debug('APPLY DIFF', diff);
-							this.applyProjectStatePatch(diff);
+							if (skipUpdate > 0) {
+								skipUpdate--;
+								return;
+							}
+
+							this.createProojectStatePatch(newVal, oldVal);
 						},
 						{
 							deep: true,
@@ -121,6 +142,8 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 				let settings = {
 					autoInit: true,
 					globalName: '$tera',
+					subscribeState: true,
+					subscribeProjects: true,
 					stateOptions: {
 						write: true,
 					},
@@ -136,13 +159,12 @@ export default class TeraFyPluginVue extends TeraFyPluginBase {
 					.then(()=> settings.autoInit && $tera.init())
 					.then(()=> Promise.all([
 						// Bind available project and wait on it
-						$tera.bindProjectState(settings.stateOptions)
+						settings.subscribeState && $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()
+						settings.subscribeProjects && $tera.getProjects()
 							.then(projects => $tera.projects = reactive(projects))
 							.then(()=> $tera.debug('INFO', 'Loaded projects', $tera.projects)),
 					]))