@iebh/tera-fy 1.0.16 → 1.0.18

package/package.json

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

package/plugins/vue2.js

@@ -151,6 +151,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 	* @param {Object} options.app Root level Vue app to bind against
 	* @param {Vue} options.Vue Vue@2 instance to bind against
 	* @param {String} [options.globalName='$tera'] Global property to allocate this service as within Vue2
+	* @param {Boolean} [options.requireProject=true] Automatically call requireProject() prior to any operation
 	* @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
@@ -162,6 +163,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 			app: null,
 			Vue: null,
 			globalName: '$tera',
+			requireProject: true,
 			subscribeState: true,
 			subscribeProjects: true,
 			stateOptions: {
@@ -190,6 +192,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 
 		// this.statePromisable becomes the promise we are waiting on to resolve
 		return Promise.resolve()
+			.then(()=> settings.requireProject && this.requireProject())
 			.then(()=> Promise.all([
 				// Bind available project and wait on it
 				settings.subscribeState && this.bindProjectState({
@@ -205,4 +208,69 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 					.then(()=> this.debug('INFO', 'Loaded projects', this.projects)),
 			]))
 	}
+
+
+	/**
+	* Override the regular _pathSet() handler so that it stays as a Vue observable
+	* This function will correctly populate any missing entities, calling vm.$set on each traversal of the path This is mainly to fix the issue where Vue can't see changes to objects if a key is added or removed
+	* Passing undefined as a value removes the key (unless removeUndefined is set to false)
+	*
+	* @override
+	* @param {Object} [target] The target to set the path of, if omitted the `vm` object is used as the base for traversal
+	* @param {string|array} path The path to set within the target / vm
+	* @param {*} value The value to set
+	* @param {Object} [options] Additional options
+	* @param {boolean} [options.arrayNumeric=true] Process numeric path segments as arrays
+	* @param {boolean} [options.removeUndefined=true] If undefined is specified as a value the key is removed instead of being set
+	* @param {boolean} [options.debug=false] Also print out debugging information when setting the value
+	* @returns {Object} The set value, like $set()
+	*
+	* @example Set a deeply nested path within a target object
+	* vm.$setPath(this, 'foo.bar.baz', 123); // this.$data.foo.bar.baz = 123
+	*
+	* @example Set a deeply nested path, with arrays, assuming VM as the root node
+	* vm.$setPath('foo.1.bar', 123); // vm.$data.foo = [{bar: 123}]
+	*/
+	_pathSet(target, path, value, options) {
+		// Sanity checks {{{
+		if (typeof target != 'object') throw new Error('Cannot use _pathSet on non-object target');
+		// }}}
+
+		let settings = {
+			arrayNumeric: true,
+			debug: false,
+			removeUndefined: true,
+			...options,
+		};
+
+		if (settings.debug) console.log('[_pathSet]', path, '=', value, {target, options});
+
+		let node = target;
+		if (!path) throw new Error('Cannot _pathSet with undefined path');
+		(typeof path == 'string' ? path.split('.') : path).some((chunk, chunkIndex, chunks) => {
+			if (chunkIndex == chunks.length - 1) { // Leaf node
+				if (settings.removeUndefined && value === undefined) {
+					this.Vue.$delete(node, chunk);
+				} else {
+					this.Vue.set(node, chunk, value);
+				}
+			} else if (node[chunk] === undefined) { // This chunk (and all following chunks) does't exist - populate from here
+				chunks.slice(chunkIndex, chunks.length - 1).forEach(chunk => {
+					if (settings.arrayNumeric && isFinite(chunk)) {
+						this.Vue.set(node, chunk, []);
+					} else {
+						this.Vue.set(node, chunk, {});
+					}
+					node = node[chunk];
+				});
+				this.Vue.set(node, chunks[chunks.length - 1], value);
+				return true;
+			} else {
+				node = node[chunk];
+				return false;
+			}
+		});
+
+		return value;
+	}
 }

package/utils/pDefer.js

@@ -0,0 +1,15 @@
+/**
+* Returns a defer object which represents a promise object which can resolve in the future - but without enclosing a function
+* The defer object has the keys {promise, resolve(), reject()}
+* @returns {Defer} A defered promise
+*/
+export default function() {
+	var deferred = {};
+
+	deferred.promise = new Promise((resolve, reject) => {
+		deferred.resolve = resolve;
+		deferred.reject = reject;
+	});
+
+	return deferred;
+}