@iebh/tera-fy 1.12.0 → 1.13.0

package/lib/terafy.client.js

@@ -27,6 +27,7 @@ export default class TeraFy {
 	* @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
 	* @property {Number} handshakeTimeout Interval in milliseconds for when to give up trying to handshake
+	* @property {Array<String|Array<String>>} [debugPaths] List of paths (in either dotted or array notation) to enter debugging mode if a change is detected in dev mode e.g. `{debugPaths: ['foo.bar.baz']}`. This really slows down state writes so should only be used for debugging
 	*/
 	settings = {
 		devMode: true,
@@ -50,6 +51,7 @@ export default class TeraFy {
 		],
 		handshakeInterval: 1000, // ~1s
 		handshakeTimeout: 10000, // ~10s
+		debugPaths: null, // Transformed into a Array<String> (in Lodash dotted notation) on init()
 	};
 
 
@@ -108,7 +110,7 @@ export default class TeraFy {
 		'setProjectStateRefresh',
 		'saveProjectState',
 		'replaceProjectState',
-		'applyProjectStatePatch',
+		// 'applyProjectStatePatch', - Handled below (applies behaviour to watch for `settings.debugPaths`)
 		// For bindProjectState() - See individual plugins
 
 		// Project files
@@ -134,7 +136,10 @@ export default class TeraFy {
 
 		// UI
 		'uiAlert',
+		'uiConfirm',
 		'uiProgress',
+		'uiPrompt',
+		'uiTrhow',
 		'uiSplat',
 		'uiWindow',
 	];
@@ -299,6 +304,26 @@ export default class TeraFy {
 	}
 
 
+	applyProjectStatePatch(patch) {
+		if (this.settings.devMode && this.settings.debugPaths) {
+			if (!Array.isArray(this.settings.debugPaths)) throw new Error('teraFyClient.settings.debugPaths should be either null or an Array<String>');
+
+			let watchedPaths = patch
+				.filter(patch => this.settings.debugPaths.some(debugPath =>
+					patch.path.join('.').slice(0, debugPath.length) == debugPath
+				))
+				.map(patch => patch.path.join('.'));
+
+			if (watchedPaths.length > 0) {
+				console.info('Detected writes to', watchedPaths, '- entering debugging mode');
+				debugger;
+			}
+		}
+
+		return this.rpc('applyProjectStatePatch', patch);
+	}
+
+
 	/**
 	* Client function which accepts a patch from the server and applies it to local project state
 	* The patch should follow the [JSPatch](http://jsonpatch.com) standard
@@ -340,7 +365,20 @@ export default class TeraFy {
 
 		const context = this;
 		return this.init.promise = Promise.resolve()
-			.then(()=> this.debug('INFO', 4, '[0/6] Init using server', this.settings.siteUrl))
+			.then(()=> this.debug('INFO', 4, '[0/6] Init', this.settings.siteUrl))
+			.then(()=> { // Init various options for optimized access
+				if (!this.settings.devMode) return; // Not in dev mode
+				this.settings.debugPaths =
+					!this.settings.debugPaths ? null // Falsy - disable
+					: Array.isArray(this.settings.debugPaths) ? this.settings.debugPaths.map(path =>
+						Array.isArray(path) ? path.join('.') // Transform arrays into dotted notation
+						: typeof path == 'string' ? path // Assume already in dotted notation
+						: (()=> { throw new Error('Unknown path type - should be an array or string in dotted notation') })()
+					)
+					: (()=> { throw new Error('Unknown terafyClient.settings.debugPaths type') })()
+
+				this.debug('INFO', 0, 'Watching state paths', this.settings.debugPaths);
+			})
 			.then(()=> this.detectMode())
 			.then(mode => {
 				this.debug('INFO', 4, '[1/6] Setting client mode to', mode);
@@ -480,7 +518,10 @@ export default class TeraFy {
 			let handshakeCount = 0;
 			let handshakeTimer;
 
-			let handshakeTimeout = setTimeout(()=> reject('TIMEOUT'), settings.handshakeTimeout);
+			let handshakeTimeout = setTimeout(()=> {
+				clearTimeout(handshakeTimer);
+				reject('TIMEOUT');
+			}, settings.handshakeTimeout);
 
 			const tryHandshake = ()=> {
 				this.debug('INFO', 4, 'Trying handshake', ++handshakeCount);
@@ -524,8 +565,8 @@ export default class TeraFy {
 						'height: 150px;',
 						'background: transparent;',
 
-						// Minimize / deminimize functionality {{{
-						'&.minimized.dev-mode {',
+						// Minimize / de-minimize functionality {{{
+						'body:not(.tera-fy-focus) &.minimized.dev-mode {',
 							'background: var(--TERA-accent) !important;',
 							'opacity: 0.5;',
 							'right: 0px;',
@@ -560,7 +601,7 @@ export default class TeraFy {
 							'}',
 						'}',
 
-						'&:not(.minimized) {',
+						'body:not(.tera-fy-focus) &:not(.minimized) {',
 							'&::before {',
 								'display: flex;',
 								'align-items: center;',
@@ -1266,6 +1307,20 @@ export default class TeraFy {
 	*/
 
 
+	/**
+	* Present a simple ok/cancel dialog to the user
+	*
+	* @function uiConfirm
+	* @param {String} text The text to display
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {String} [options.title='TERA'] The title of the confirmation box
+	* @param {Boolean} [options.isHtml=false] If falsy the text is rendered as plain-text otherwise it will be assumed as HTML content
+	*
+	* @returns {Promise} A promise which resolves with `Promise.resolve('OK')` or rejects with `Promise.reject('CANCEL')`
+	*/
+
+
 	/**
 	* Display, update or dispose of windows for long running tasks
 	* All options are cumulative - i.e. they are merged with other options previously provided
@@ -1284,6 +1339,31 @@ export default class TeraFy {
 	*/
 
 
+	/**
+	* Prompt the user for an input, responding with a Promisable value
+	*
+	* @function uiPrompt
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {String} [options.value] Current or default value to display pre-filled
+	* @param {String} [options.title='Input required'] The dialog title to display
+	* @param {String} [options.body] Optional additional body text
+	* @param {Boolean} [options.bodyHtml=false] If truthy, treat the body as HTML
+	* @param {String} [options.placeholder] Optional placeholder text
+	*
+	* @returns {Promise<*>} Either the eventual user value or a throw with `Promise.reject('CANCEL')`
+	*/
+
+
+	/**
+	* Catch an error using the TERA error handler
+	*
+	* @function uiThrow
+	* @param {Error|Object|String} error Error to handle, generally an Error object but can be a POJO or a scalar string
+	*
+	* @returns {Void} This function is fatal
+	*/
+
+
 	/**
 	* Open a popup window containing a new site
 	*

package/lib/terafy.server.js

@@ -1427,7 +1427,7 @@ export default class TeraFyServer {
 	}
 	// }}}
 
-	// UI - uiAlert(), uiProgress(), uiWindow(), uiSplat() {{{
+	// UI - uiAlert(), uiConfirm(), uiProgress(), uiPrompt(), uiThrow(), uiWindow(), uiSplat() {{{
 	/**
 	* Display simple text within TERA
 	*
@@ -1462,6 +1462,48 @@ export default class TeraFyServer {
 	}
 
 
+	/**
+	* Present a simple ok/cancel dialog to the user
+	*
+	* @param {String} text The text to display
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {String} [options.title='TERA'] The title of the confirmation box
+	* @param {Boolean} [options.isHtml=false] If falsy the text is rendered as plain-text otherwise it will be assumed as HTML content
+	*
+	* @returns {Promise} A promise which resolves with `Promise.resolve('OK')` or rejects with `Promise.reject('CANCEL')`
+	*/
+	uiConfirm(text, options) {
+		let settings = {
+			title: 'TERA',
+			isHtml: false,
+			...options,
+		};
+
+		return this.requestFocus(()=>
+			app.service('$prompt').dialog({
+				title: settings.title,
+				body: text,
+				isHtml: settings.isHtml,
+				buttons: [
+					{
+						title: 'OK',
+						class: 'btn btn-success',
+						click: 'resolve',
+					},
+					{
+						title: 'Cancel',
+						class: 'btn btn-danger',
+						click: 'reject',
+					},
+				],
+			})
+				.then(()=> 'OK')
+				.catch(()=> Promise.reject('CANCEL'))
+		);
+	}
+
+
 	/**
 	* Display, update or dispose of windows for long running tasks
 	* All options are cumulative - i.e. they are merged with other options previously provided
@@ -1517,6 +1559,60 @@ export default class TeraFyServer {
 	uiProgressPromise;
 
 
+	/**
+	* Prompt the user for an input, responding with a Promisable value
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {String} [options.value] Current or default value to display pre-filled
+	* @param {String} [options.title='Input required'] The dialog title to display
+	* @param {String} [options.body] Optional additional body text
+	* @param {Boolean} [options.bodyHtml=false] If truthy, treat the body as HTML
+	* @param {String} [options.placeholder] Optional placeholder text
+	*
+	* @returns {Promise<*>} Either the eventual user value or a throw with `Promise.reject('CANCEL')`
+	*/
+	uiPrompt(options) {
+		let settings = {
+			title: 'Input required',
+			value: '',
+			body: '',
+			bodyHtml: false,
+			placeholder: '',
+			...options,
+		};
+
+		return this.requestFocus(()=>
+			app.service('$prompt').dialog({
+				title: settings.title,
+				closable: true,
+				component: 'UiPrompt',
+				componentProps: {
+					body: settings.body,
+					bodyHtml: settings.bodyHtml,
+					placeholder: settings.placeholder,
+					value: settings.valuie,
+				},
+				buttons: ['ok', 'cancel'],
+			})
+		)
+			.then(answer => answer || Promise.reject('CANCEL'))
+	}
+
+
+	/**
+	* Catch an error using the TERA error handler
+	*
+	* @param {Error|Object|String} error Error to handle, generally an Error object but can be a POJO or a scalar string
+	*
+	* @returns {Void} This function is fatal
+	*/
+	uiThrow(error) {
+		return this.requestFocus(()=>
+			app.service('$errors').catch(error)
+		);
+	}
+
+
 	/**
 	* Open a popup window containing a new site
 	*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "TERA website worker",
   "scripts": {
     "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --serve --servedir=.",
@@ -70,20 +70,21 @@
   },
   "dependencies": {
     "detect-port": "^1.6.1",
-    "filesize": "^10.1.1",
+    "filesize": "^10.1.4",
     "http-proxy": "^1.18.1",
     "just-diff": "^6.0.2",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
-    "nanoid": "^5.0.2",
-    "release-it": "^17.4.0"
+    "nanoid": "^5.0.7",
+    "release-it": "^17.5.0"
   },
   "devDependencies": {
-    "@momsfriendlydevco/eslint-config": "^1.0.7",
+    "@momsfriendlydevco/eslint-config": "^2.0.1",
     "@release-it/conventional-changelog": "^8.0.1",
     "concurrently": "^8.2.2",
-    "documentation": "^14.0.2",
-    "esbuild": "^0.19.5"
+    "documentation": "^14.0.3",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.6.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -93,17 +94,6 @@
     "just-diff-apply": "^5.5.0",
     "vue": "^3.3.7"
   },
-  "eslintConfig": {
-    "extends": "@momsfriendlydevco",
-    "env": {
-      "es6": true,
-      "node": true
-    },
-    "parserOptions": {
-      "ecmaVersion": 13,
-      "sourceType": "module"
-    }
-  },
   "release-it": {
     "git": {
       "addUntrackedFiles": false,