@iebh/tera-fy 1.0.17 → 1.0.18

package/lib/terafy.client.js

@@ -17,16 +17,19 @@ 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 {'detect'|'parent'|'child'|'popup'} mode 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 switches to `modeFallback` if communication fails
+	* @property {String} modeFallback Method to use when all method detection fails
 	* @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
 	* @property {Array<String>} List of sandbox allowables for the embedded if in embed mode
+	* @property {Number} handshakeInterval Interval in milliseconds when sanning for a handshake
 	*/
 	settings = {
 		devMode: true,
 		mode: 'detect',
 		modeTimeout: 300,
+		modeFallback: 'child', // ENUM: 'child' (use iframes), 'popup' (use popup windows)
 		siteUrl: 'https://tera-tools.com/embed',
 		restrictOrigin: '*', // FIXME: Need to restrict this to TERA site
 		frameSandbox: [
@@ -39,8 +42,9 @@ export default class TeraFy {
 			'allow-presentation',
 			'allow-same-origin',
 			'allow-scripts',
-			'allow-top-navigation'
+			'allow-top-navigation',
 		],
+		handshakeInterval: 1000,
 	};
 
 
@@ -56,12 +60,14 @@ export default class TeraFy {
 	*
 	* @type {Object}
 	* @property {DOMElement} el The main tera-fy div wrapper
-	* @property {DOMElement} iframe The internal iFrame element
+	* @property {DOMElement} iframe The internal iFrame element  (if `settings.mode == 'child'`)
+	* @property {Window} popup The popup window context (if `settings.mode == 'popup'`)
 	* @property {DOMElement} stylesheet The corresponding stylesheet
 	*/
 	dom = {
 		el: null,
 		iframe: null,
+		popup: null,
 		stylesheet: null,
 	};
 
@@ -93,7 +99,7 @@ export default class TeraFy {
 		'selectProjectLibrary', 'parseProjectLibrary', 'setProjectLibrary',
 
 		// UI
-		'uiAlert',
+		'uiAlert', 'uiSplat', 'uiWindow',
 	];
 
 
@@ -149,6 +155,8 @@ export default class TeraFy {
 				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 == 'popup') {
+				this.dom.popup.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 {
@@ -305,7 +313,8 @@ export default class TeraFy {
 			]))
 			.then(()=> this.rpc('setServerMode', // Tell server what mode its in
 				this.settings.mode == 'child' ? 'embedded'
-				: this.settings.mode == 'parent' ? 'window'
+				: this.settings.mode == 'parent' ? 'frame'
+				: this.settings.mode == 'popup' ? 'popup'
 				: (()=> { throw(`Unknown server mode "${this.settings.mode}"`) })()
 			))
 			.then(()=> Promise.all( // Init all plugins (with this outer module as the context)
@@ -327,7 +336,7 @@ export default class TeraFy {
 		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';
+			return this.settings.modeFallback;
 		} else { // No idea - try messaging
 			return Promise.resolve()
 				.then(()=> this.settings.mode = 'parent') // Switch to parent mode...
@@ -339,7 +348,7 @@ export default class TeraFy {
 						.then(()=> resolve())
 				}))
 				.then(()=> 'parent')
-				.catch(()=> 'child')
+				.catch(()=> this.settings.modeFallback)
 		}
 	}
 
@@ -373,9 +382,34 @@ export default class TeraFy {
 				this.dom.el.append(this.dom.iframe);
 				break;
 			case 'parent':
-				this.debug('Using TERA site stack parent');
+				this.debug('Using TERA window parent');
 				resolve();
 				break;
+			case 'popup':
+				this.debug('Injecting TERA site as a popup window');
+				this.dom.popup = window.open(this.settings.siteUrl, '_blank', 'popup=1, location=0, menubar=0, status=0, scrollbars=0, width=500, height=600');
+
+				// Loop until the window context returns a handshake
+				(()=> {
+					let handshakeCount = 0;
+					let handshakeTimer;
+
+					const tryHandshake = ()=> {
+						this.debug('Trying handshake', ++handshakeCount);
+
+						clearTimeout(handshakeTimer);
+						handshakeTimer = setTimeout(tryHandshake, this.settings.handshakeInterval);
+
+						this.rpc('handshake')
+							.then(()=> {
+								clearTimeout(handshakeTimer);
+								this.debug('Popup window accepted handshake');
+								resolve();
+							});
+					};
+					tryHandshake();
+				})();
+				break;
 			default:
 				throw new Error(`Unsupported mode "${this.settings.mode}" when calling injectComms()`);
 		}
@@ -434,6 +468,7 @@ export default class TeraFy {
 				document.head.appendChild(this.dom.stylesheet);
 				break;
 			case 'parent':
+			case 'popup':
 				break;
 			default:
 				throw new Error(`Unsupported mode "${this.settings.mode}" when injectStylesheet()`);
@@ -624,7 +659,11 @@ export default class TeraFy {
 	* This is an pre-requisite step for requireProject()
 	*
 	* @function requireUser
-	* @returns {Promise} A promise which will resolve if the there is a user and they are logged in
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean} [options.forceRetry=false] Forcabily try to refresh the user state
+	*
+	* @returns {Promise<User>} The current logged in user or null if none
 	*/
 
 
@@ -920,5 +959,33 @@ export default class TeraFy {
 	* @returns {Promise} A promise which resolves when the alert has been dismissed
 	*/
 
+
+	/**
+	* Display HTML content full-screen within TERA
+	* This function is ideally called within a requestFocus() wrapper
+	*
+	* @function uiSplat
+	* @param {DOMElement|String|false} content Either a prepared DOM element or string to compile, set to falsy to remove existing content
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean|String} [options.logo=false] Add a logo to the output, if boolean true the Tera-tools logo is used otherwise specify a path or URL
+	*/
+
+
+	/**
+	* Open a popup window containing a new site
+	*
+	* @function uiWindow
+	* @param {String} url The URL to open
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Number} [options.width=500] The desired width of the window
+	* @param {Number} [options.height=600] The desired height of the window
+	* @param {Boolean} [options.center=true] Attempt to center the window on the screen
+	* @param {Object} [options.permissions] Additional permissions to set on opening, defaults to a suitable set of permission for popups (see code)
+	*
+	* @returns {WindowProxy} The opened window object (if `noopener` is not set in permissions)
+	*/
+
 	// }}}
 }

package/lib/terafy.server.js

@@ -1,7 +1,8 @@
-import {cloneDeep, has as pathExists, set as pathSet} from 'lodash-es';
+import {cloneDeep, has as pathExists, get as pathGet, set as pathSet} from 'lodash-es';
 import {diffApply, jsonPatchPathConverter as jsPatchConverter} from 'just-diff-apply';
-import {nanoid} from 'nanoid';
 import mixin from '#utils/mixin';
+import {nanoid} from 'nanoid';
+import promiseDefer from '#utils/pDefer';
 import Reflib from '@iebh/reflib';
 
 /**
@@ -21,7 +22,9 @@ export default class TeraFyServer {
 	* @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_*`
+	* @property {Number} serverMode The current server mode matching `SERVERMODE_*`
+	* @property {String} siteUrl The main site absolute URL
+	* @property {String} sitePathLogin Either an absolute URL or the relative path (taken from `siteUrl`) when trying to log in the user
 	*/
 	settings = {
 		devMode: false,
@@ -29,12 +32,15 @@ export default class TeraFyServer {
 		subscribeTimeout: 2000,
 		projectId: null,
 		serverMode: 0,
+		siteUrl: window.location.href,
+		sitePathLogin: '/login',
 	};
 
 	static SERVERMODE_NONE = 0;
 	static SERVERMODE_EMBEDDED = 1;
-	static SERVERMODE_WINDOW = 2;
-	static SERVERMODE_TERA = 3; // Terafy is running as the main TERA site
+	static SERVERMODE_FRAME = 2;
+	static SERVERMODE_POPUP = 3;
+	static SERVERMODE_TERA = 4; // Terafy is running as the main TERA site
 
 
 	// Contexts - createContext(), getClientContext(), messageEvent, senderRpc() {{{
@@ -94,7 +100,7 @@ export default class TeraFyServer {
 						}
 					},
 				});
-			case TeraFyServer.SERVERMODE_WINDOW:
+			case TeraFyServer.SERVERMODE_FRAME:
 				// Server is the top-level window so we need to send messages to an embedded iFrame
 				var iFrame = document.querySelector('iframe#external');
 				if (!iFrame) throw new Error('Cannot locate TERA-FY top-level->iFrame#external');
@@ -114,6 +120,7 @@ export default class TeraFyServer {
 						}
 					},
 				});
+			case TeraFyServer.SERVERMODE_POPUP:
 		}
 	}
 
@@ -202,10 +209,10 @@ export default class TeraFyServer {
 				TERA: 1,
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
-			this.debug('INFO', 'Parent send', message, '<=>', payload);
+			this.debug('INFO', 'Dispatch response', 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', 'Attempted to dispatch response server->client', payload);
 			this.debug('ERROR', 'Message compose server->client:', e);
 		}
 	}
@@ -221,8 +228,11 @@ export default class TeraFyServer {
 			case 'embedded':
 				this.settings.serverMode = TeraFyServer.SERVERMODE_EMBEDDED;
 				break;
-			case 'window':
-				this.settings.serverMode = TeraFyServer.SERVERMODE_WINDOW;
+			case 'frame':
+				this.settings.serverMode = TeraFyServer.SERVERMODE_FRAME;
+				break;
+			case 'popup':
+				this.settings.serverMode = TeraFyServer.SERVERMODE_POPUP;
 				break;
 			default:
 				throw new Error(`Unsupported server mode "${mode}"`);
@@ -330,9 +340,17 @@ export default class TeraFyServer {
 	/**
 	* Fetch the current session user
 	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean} [options.forceRetry=false] Forcabily try to refresh the user state
+	*
 	* @returns {Promise<User>} The current logged in user or null if none
 	*/
-	getUser() {
+	getUser(options) {
+		let settings = {
+			forceRetry: false,
+			...options,
+		};
+
 		let $auth = app.service('$auth');
 		let $subscriptions = app.service('$subscriptions');
 
@@ -340,7 +358,11 @@ export default class TeraFyServer {
 			$auth.promise(),
 			$subscriptions.promise(),
 		])
-			.then(()=> $auth.user.id ? {
+			.then(()=> {
+				if (!$auth.isLoggedIn && settings.forceRetry)
+					return $auth.restoreLogin();
+			})
+			.then(()=> $auth.user?.id ? {
 				id: $auth.user.id,
 				email: $auth.user.email,
 				name: [
@@ -349,6 +371,10 @@ export default class TeraFyServer {
 				].filter(Boolean).join(' '),
 				isSubscribed: $subscriptions.isSubscribed,
 			} : null)
+			.catch(e => {
+				console.warn('Catch', e);
+				debugger;
+			})
 	}
 
 
@@ -361,10 +387,91 @@ export default class TeraFyServer {
 	*/
 	requireUser() {
 		return this.getUser()
-			.then(user => user || this.uiAlert('You must be logged in to <a href="https://tera-tools.com" target="_blank">TERA-tools.com</a> to use this tool', {
+			.then(user => {
+				this.debug('Current user is', user ? user : 'Not valid');
+				if (user) throw 'EXIT'; // Valid user? Escape promise chain
+			})
+			.then(async ()=> { // No user present - try to validate with other methods
+				switch (this.settings.serverMode) {
+					case TeraFyServer.SERVERMODE_EMBEDDED:
+						/* - Doesn't work because Kinde sets the CSP header `frame-ancestors 'self'` which prevents usage within an iFrame
+						const $auth = app.service('$auth');
+						return this.requestFocus(()=>  $auth.login()
+							.then(()=> {
+								console.log('New user state', $auth.isLoggedIn);
+							})
+						);
+						*/
+
+						var focusContent = document.createElement('div');
+						focusContent.innerHTML = '<div>Authenticate with <a href="https://tera-tools.com" target="_blank">TERA-tools.com</a></div>'
+							+ '<div class="mt-2"><a class="btn btn-light">Open Popup...</a></div>';
+
+						// Attach click listner to internal button to re-popup the auth window (in case popups are blocked)
+						focusContent.querySelector('a.btn').addEventListener('click', ()=>
+							this.uiWindow(new URL(this.settings.sitePathLogin, this.settings.siteUrl))
+						);
+
+						// Create a deferred promise which will (eventually) resolve when the downstream window signals its ready
+						let waitOnWindowAuth = promiseDefer();
+
+						// Create a listener for the message from the downstream window to resolve the promise
+						let listenMessages = ({data}) => {
+							if (data.TERA && data.action == 'noop' && data.isLoggedIn) { // Signal sent from landing page - we're logged in, yey!
+								this.debug('Received ok message from popup window');
+								waitOnWindowAuth.resolve();
+							}
+						};
+						window.addEventListener('message', listenMessages);
+
+						// Go fullscreen, try to open the auth window + prompt the user to retry (if popups are blocked) and wait for resolution
+						await this.requestFocus(()=> {
+							// Try opening the popup automatically - this will likely fail if the user has popup blocking enabled
+							this.uiWindow(new URL(this.settings.sitePathLogin, this.settings.siteUrl));
+
+							// Display a message to the user, offering the ability to re-open the popup if it was originally denied
+							this.uiSplat(focusContent, {logo: true});
+
+							this.debug('Begin auth-check deferred wait...');
+							return waitOnWindowAuth.promise;
+						});
+
+						this.debug('Cleaning up popup auth');
+
+						// Remove message subscription
+						window.removeEventListener('message', listenMessages);
+
+						// Disable overlay content
+						this.uiSplat(false);
+
+						// Tell $auth to forcibly refresh its user data
+						await app.service('$auth').restoreLogin();
+
+						// ... then refresh the project list as we're likely going to need it
+						await app.service('$projects').refresh();
+
+						// Go back to start of auth checking loop and repull the user data
+						throw 'REDO';
+
+						break;
+					default:
+						// Pass - Implied - Cannot authenticate via other method so just fall through to scalding the user
+				}
+			})
+			.then(()=> this.uiAlert('You must be logged in to <a href="https://tera-tools.com" target="_blank">TERA-tools.com</a> to use this tool', {
 				title: 'TERA-tools account needed',
 				isHtml: true,
+				buttons: false,
 			}))
+			.then(()=> { throw 'REDO' }) // Go into loop to keep requesting user data
+			.catch(e => {
+				if (e === 'EXIT') {
+					return; // Exit with a valid user
+				} else if (e == 'REDO') {
+					return this.requireUser();
+				}
+				throw e;
+			})
 	}
 
 	// }}}
@@ -576,16 +683,61 @@ export default class TeraFyServer {
 		if (!app.service('$projects').active) throw new Error('No active project');
 		if (typeof path != 'string' && !Array.isArray(path)) throw new Error('setProjectStateDefaults(path, value) - path must be a dotted string or array of path segments');
 
-		pathSet(app.service('$projects').active, path, value)
+		this._pathSet(app.service('$projects').active, path, value);
 
 		return (
-			this.save && this.sync ? this.saveProjectState()
-			: this.save ? void this.saveProjectState()
+			settings.save && settings.sync ? this.saveProjectState()
+			: settings.save ? void this.saveProjectState()
 			: (()=> { throw new Error('setProjectState({sync: true, save: false}) makes no sense') })()
 		);
 	}
 
 
+	/**
+	* Internal recursive path setter used by setProjectState() / setProjectStateDefaults()
+	* The implementation defaults to _.set() unless overriden by a plugin
+	*
+	* @private
+	* @param {Object} subject The base subject to operate on
+	* @param {String|Array} path The path to set in dotted or array notation
+	* @param {*} value The value to set
+	*
+	* @returns {*} The set value
+	*/
+	_pathSet(subject, path, value) {
+		return pathSet(subject, path, value);
+	}
+
+
+	/**
+	* Internal recursive path checker used by setProjectStateDefaults()
+	* The implementation defaults to _.has() unless overriden by a plugin
+	*
+	* @private
+	* @param {Object} subject The base subject to examine
+	* @param {String|Array} path The path to fetch in dotted or array notation
+	* @returns {Boolean} True if the given path already exists within the subject
+	*/
+	_pathHas(subject, path) {
+		return pathExists(subject, path);
+	}
+
+
+	/**
+	* Internal recursive path fetcher
+	* The implementation defaults to _.get() unless overriden by a plugin
+	*
+	* @private
+	* @param {Object} subject The base subject to examine
+	* @param {String|Array} path The path to fetch in dotted or array notation
+	* @param {*} [fallback] Optional fallback to return if the end point does not exist
+	* @returns {*} True if the given path already exists within the subject
+	*/
+	_pathGet(subject, path, fallback) {
+		return pathGet(subject, path, fallback);
+	}
+
+
 	/**
 	* Set a nested value within the project state - just like `setProjectState()` - but only if no value for that path exists
 	*
@@ -599,7 +751,7 @@ export default class TeraFyServer {
 	setProjectStateDefaults(path, value, options) {
 		if (!app.service('$projects').active) throw new Error('No active project');
 
-		if (!pathExists(app.service('$projects').active, path)) {
+		if (!this._pathHas(app.service('$projects').active, path)) {
 			return this.setProjectState(path, value, options)
 				.then(()=> true)
 		} else {
@@ -944,6 +1096,7 @@ export default class TeraFyServer {
 	* @param {Object} [options] Additional options to mutate behaviour
 	* @param {String} [options.title='TERA'] The title of the alert box
 	* @param {Boolean} [options.isHtml=false] If falsy the text is rendered as plain-text otherwise it will be assumed as HTML content
+	* @param {'ok'|false} [options.buttons='ok'] Button set to use or falsy to disable
 	*
 	* @returns {Promise} A promise which resolves when the alert has been dismissed
 	*/
@@ -951,6 +1104,7 @@ export default class TeraFyServer {
 		let settings = {
 			title: 'TERA',
 			isHtml: false,
+			buttons: 'ok',
 			...options,
 		};
 
@@ -958,12 +1112,100 @@ export default class TeraFyServer {
 			app.service('$prompt').dialog({
 				title: settings.title,
 				body: text,
-				buttons: ['ok'],
+				buttons:
+					settings.buttons == 'ok' ? ['ok']
+					: false,
 				isHtml: settings.isHtml,
 				dialogClose: 'resolve',
 			})
 		);
 	}
+
+
+	/**
+	* Open a popup window containing a new site
+	*
+	* @param {String} url The URL to open
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Number} [options.width=500] The desired width of the window
+	* @param {Number} [options.height=600] The desired height of the window
+	* @param {Boolean} [options.center=true] Attempt to center the window on the screen
+	* @param {Object} [options.permissions] Additional permissions to set on opening, defaults to a suitable set of permission for popups (see code)
+	*
+	* @returns {WindowProxy} The opened window object (if `noopener` is not set in permissions)
+	*/
+	uiWindow(url, options) {
+		let settings = {
+			width: 500,
+			height: 600,
+			center: true,
+			permissions: {
+				popup: true,
+				location: false,
+				menubar: false,
+				status: false,
+				scrolbars: false,
+			},
+			...options,
+		};
+
+		return window.open(url, '_blank', Object.entries({
+			...settings.permissions,
+			width: settings.width,
+			height: settings.height,
+			...(settings.center && {
+				left: screen.width/2 - settings.width/2,
+				top: screen.height/2 - settings.height/2,
+			}),
+		})
+			.map(([key, val]) => key + '=' + (
+				typeof val == 'boolean' ? val ? '1' : '0' // Map booleans to 1/0
+				: val
+			))
+			.join(', ')
+		);
+	}
+
+
+	/**
+	* Display HTML content full-screen within TERA
+	* This function is ideally called within a requestFocus() wrapper
+	*
+	* @param {DOMElement|String|false} content Either a prepared DOM element or string to compile, set to falsy to remove existing content
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean|String} [options.logo=false] Add a logo to the output, if boolean true the Tera-tools logo is used otherwise specify a path or URL
+	*/
+	uiSplat(content, options) {
+		let settings = {
+			logo: false,
+			...options,
+		};
+
+		if (!content) { // Remove content
+			globalThis.document.body.querySelector('.tera-fy-uiSplat').remove();
+			return;
+		}
+
+		let compiledContent = typeof content == 'string'
+			? (()=> {
+				let el = document.createElement('div')
+				el.innerHTML = content;
+				return el;
+			})()
+			: content;
+
+		compiledContent.classList.add('tera-fy-uiSplat');
+
+		if (settings.logo) {
+			let logoEl = document.createElement('div');
+			logoEl.innerHTML = `<img src="${typeof settings.logo == 'string' ? settings.logo : '/assets/logo/logo.svg'}" class="img-logo"/>`;
+			compiledContent.prepend(logoEl);
+		}
+
+		globalThis.document.body.append(compiledContent);
+	}
 	// }}}
 
 	// Utility - debug() {{{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "TERA website worker",
   "scripts": {
     "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --sourcemap --serve --servedir=.",
@@ -10,6 +10,7 @@
     "build:plugins-vue2:es2019": "esbuild --platform=browser --format=esm --target=es2019 --bundle plugins/vue2.js --outfile=dist/plugin.vue2.es2019.js --minify --sourcemap",
     "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",
+    "watch": "nodemon --watch lib/terafy.client.js --exec npm run build",
     "lint": "eslint ."
   },
   "type": "module",
@@ -62,21 +63,23 @@
   "engines": {
     "node": ">=18"
   },
-  "peerDependencies": {
+  "dependencies": {
+    "just-diff": "^6.0.2",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
     "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",
     "documentation": "^14.0.2",
     "esbuild": "^0.19.5"
   },
+  "optionalDependencies": {
+    "@iebh/reflib": "^2.2.2",
+    "just-diff-apply": "^5.5.0",
+    "vue": "^3.3.7"
+  },
   "eslintConfig": {
     "extends": "@momsfriendlydevco",
     "env": {
@@ -87,9 +90,5 @@
       "ecmaVersion": 13,
       "sourceType": "module"
     }
-  },
-  "dependencies": {
-    "@momsfriendlydevco/supabase-reactive": "^1.0.7",
-    "mitt": "^3.0.1"
   }
 }