@iebh/tera-fy 1.0.12 → 1.0.13

package/lib/terafy.client.js

@@ -21,6 +21,7 @@ export default class TeraFy {
 	* @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
 	*/
 	settings = {
 		devMode: true,
@@ -28,6 +29,18 @@ export default class TeraFy {
 		modeTimeout: 300,
 		siteUrl: 'https://tera-tools.com/embed',
 		restrictOrigin: '*', // FIXME: Need to restrict this to TERA site
+		frameSandbox: [
+			'allow-forms',
+			'allow-modals',
+			'allow-orientation-lock',
+			'allow-pointer-lock',
+			'allow-popups',
+			'allow-popups-to-escape-sandbox',
+			'allow-presentation',
+			'allow-same-origin',
+			'allow-scripts',
+			'allow-top-navigation'
+		],
 	};
 
 
@@ -294,7 +307,7 @@ export default class TeraFy {
 			))
 			.then(()=> Promise.all( // Init all plugins (with this outer module as the context)
 				this.plugins.map(plugin =>
-					plugin.init.call(context)
+					plugin.init.call(context, this.settings)
 				)
 			))
 	}
@@ -346,7 +359,7 @@ export default class TeraFy {
 				this.dom.iframe = document.createElement('iframe')
 
 				// Queue up event chain when document loads
-				this.dom.iframe.setAttribute('sandbox', 'allow-downloads allow-scripts allow-same-origin');
+				this.dom.iframe.setAttribute('sandbox', this.settings.frameSandbox.join(' '));
 				this.dom.iframe.addEventListener('load', ()=> {
 					this.debug('Embed frame ready');
 					resolve();
@@ -504,7 +517,7 @@ export default class TeraFy {
 	* Include a TeraFy client plugin
 	*
 	* @param {Object} The module function to include. Invoked as `(teraClient:TeraFy, options:Object)`
-	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Object} [options] Additional options to mutate behaviour during construction (pass options to init() to intialize later options)
 	*
 	* @returns {TeraFy} This chainable terafy instance
 	*/

package/lib/terafy.server.js

@@ -94,9 +94,8 @@ export default class TeraFyServer {
 				});
 			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
-				var iFrame = document.querySelector('iframe#tera-fy');
-				if (!iFrame) throw new Error('Cannot locate TERA-FY client iFrame');
+				var iFrame = document.querySelector('iframe#external');
+				if (!iFrame) throw new Error('Cannot locate TERA-FY top-level->iFrame#external');
 
 				return mixin(this, {
 					sendRaw(message) {

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "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:client:es2019": "esbuild --platform=browser --format=esm --target=es2019 --bundle lib/terafy.client.js --outfile=dist/terafy.es2019.js --minify --sourcemap",
+    "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",
     "lint": "eslint ."

package/plugins/vue2.js

@@ -1,6 +1,5 @@
 import {cloneDeep} from 'lodash-es';
 import TeraFyPluginBase from './base.js';
-import Vue from 'vue';
 
 /**
 * Vue2 observables plugin
@@ -9,6 +8,8 @@ import Vue from 'vue';
 * This function is expected to be included via the `terafy.use(MODULE, OPTIONS)` syntax rather than directly
 *
 * @class TeraFyPluginVue
+* @param {Object} options Options when initalizing
+* @param {Vue} options.Vue Vue instance to bind against
 *
 * @example Implementation within a Vue2 project `src/main.js`:
 * // Include the main Tera-Fy core
@@ -17,7 +18,9 @@ import Vue from 'vue';
 * 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
+*   .use(TerafyVue, { // Add the Vue plugin
+*   	vue: window.Vue, // Assumes Vue is available on the window object
+*   })
 *
 * // Include after app boot
 * const app = new Vue({ ... })
@@ -26,6 +29,13 @@ import Vue from 'vue';
 */
 export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 
+	/**
+	* Local Vue@2 library to use, set during constuctor
+	* @type {Vue}
+	*/
+	Vue;
+
+
 	/**
 	* Return a Vue Observable object that can be read/written which whose changes will transparently be written back to the TERA server instance
 	*
@@ -72,7 +82,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 				this.debug('Got project snapshot', snapshot);
 
 				// Create initial Observable
-				let stateObservable = Vue.observable(snapshot);
+				let stateObservable = this.Vue.observable(snapshot);
 
 				// Allocate to component
 				settings.component[settings.componentKey] = stateObservable;
@@ -80,9 +90,9 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 				// 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 => {
+					this.events.on(`update:projects/${stateObservable.id}`, newState => {
 						skipUpdate++; // Skip next update as we're updating our own state anyway
-						Object.assign(stateReactive, newState);
+						Object.assign(stateObservable, newState);
 					});
 				}
 
@@ -120,9 +130,10 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 
 	/**
 	* List of available projects for the current session
+	* Initalized during constructor
 	* @type {VueReactive<Array<Object>>}
 	*/
-	projects = Vue.observable([]);
+	projects;
 
 
 	/**
@@ -136,7 +147,9 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 	/**
 	* Install into Vue@2
 	*
-	* @param {Object} [options] Additional options to mutate behaviour (defaults to the main teraFy settings)
+	* @param {Object} options Additional options to mutate behaviour (defaults to the main teraFy settings)
+	* @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.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
@@ -146,20 +159,30 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 	*/
 	init(options) {
 		let settings = {
+			app: null,
+			Vue: null,
 			globalName: '$tera',
 			subscribeState: true,
 			subscribeProjects: true,
 			stateOptions: {
+				read: true,
 				write: true,
 			},
 			...options,
 		};
+
+		if (!settings.Vue) throw new Error('Vue instance to use must be specified in init options as `Vue`');
+		this.Vue = options.Vue;
+
 		if (!this.settings.app) throw new Error('Need to specify the root level Vue2 app during init');
 		settings.stateOptions.app = this.settings.app;
 
+		// Create observable binding for projects
+		this.projects = this.Vue.observable([])
+
 		// Make this module available globally
 		if (settings.globalName)
-			Vue.prototype[settings.globalName] = this;
+			this.Vue.prototype[settings.globalName] = this;
 
 		// Bind `state` to the active project
 		// Initialize state to null
@@ -178,7 +201,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 
 				// Fetch available projects
 				settings.subscribeProjects && this.getProjects()
-					.then(projects => this.projects = Vue.observable(projects))
+					.then(projects => this.projects = this.Vue.observable(projects))
 					.then(()=> this.debug('INFO', 'Loaded projects', this.projects)),
 			]))
 	}