retold-data-service 2.0.42 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "retold-data-service",
-    "version": "2.0.42",
+    "version": "2.1.0",
     "description": "Serve up a whole model!",
     "main": "source/Retold-Data-Service.js",
     "bin": {
@@ -59,27 +59,29 @@
     },
     "homepage": "https://github.com/stevenvelozo/retold-data-service",
     "devDependencies": {
-        "meadow-connection-sqlite": "^1.0.18",
+        "meadow-connection-sqlite": "^1.0.19",
         "pict-docuserve": "^0.1.5",
         "puppeteer": "^24.40.0",
-        "quackage": "^1.1.0",
+        "quackage": "^1.1.2",
         "stricture": "^4.0.2",
         "supertest": "^7.2.2"
     },
     "dependencies": {
-        "bibliograph": "^0.1.4",
-        "fable": "^3.1.70",
+        "bibliograph": "^0.1.6",
+        "fable": "^3.1.71",
         "fable-serviceproviderbase": "^3.0.19",
-        "meadow": "^2.0.35",
-        "meadow-connection-mysql": "^1.0.14",
-        "meadow-endpoints": "^4.0.15",
-        "meadow-integration": "^1.0.34",
-        "meadow-migrationmanager": "^0.0.12",
-        "orator": "^6.0.4",
+        "meadow": "^2.0.37",
+        "meadow-connection-manager": "^1.1.0",
+        "pict-section-connection-form": "^0.0.1",
+        "meadow-connection-mysql": "^1.0.18",
+        "meadow-endpoints": "^4.0.17",
+        "meadow-integration": "^1.0.38",
+        "meadow-migrationmanager": "^0.0.14",
+        "orator": "^6.1.0",
         "orator-http-proxy": "^1.0.5",
         "orator-serviceserver-restify": "^2.0.10",
-        "orator-static-server": "^2.0.4",
-        "pict": "^1.0.363",
+        "orator-static-server": "^2.1.3",
+        "pict": "^1.0.365",
         "pict-section-histogram": "^1.0.0",
         "pict-sessionmanager": "^1.0.2",
         "stricture": "^4.0.2"

package/source/services/data-cloner/DataCloner-Command-Connection.js

@@ -2,17 +2,57 @@
  * DataCloner Connection Management Routes
  *
  * Registers /clone/connection/* endpoints for managing the local database
- * connection (status, configure, test).
+ * connection (status, configure, test, schemas).
  *
  * @param {Object} pDataClonerService - The RetoldDataServiceDataCloner instance
  * @param {Object} pOratorServiceServer - The Orator ServiceServer instance
  */
+const libMeadowConnectionManager = require('meadow-connection-manager');
+
 module.exports = (pDataClonerService, pOratorServiceServer) =>
 {
 	let tmpFable = pDataClonerService.fable;
 	let tmpCloneState = pDataClonerService.cloneState;
 	let tmpPrefix = pDataClonerService.routePrefix;
 
+	// MCM is the canonical aggregator for connection-form schemas; the
+	// DataCloner browser UI fetches /clone/connection/schemas and renders
+	// its provider form straight off the result, instead of carrying
+	// per-provider HTML in the bundle.  Cached on the service so we don't
+	// re-walk the filesystem on every poll.
+	let tmpSchemaMCM = null;
+	let tmpCachedSchemas = null;
+	let tmpGetSchemas = () =>
+	{
+		if (tmpCachedSchemas) { return tmpCachedSchemas; }
+		if (!tmpSchemaMCM)
+		{
+			tmpSchemaMCM = new libMeadowConnectionManager(tmpFable, {}, 'datacloner-mcm-formschemas');
+		}
+		// Defensive: an older MCM (< 1.1.0) won't have the aggregator
+		// method.  Surface an empty array rather than throwing so the
+		// UI can fall back to a "schemas unavailable" message.
+		if (typeof(tmpSchemaMCM.getAllProviderFormSchemas) !== 'function')
+		{
+			tmpFable.log.warn('DataCloner: meadow-connection-manager is older than 1.1.0; connection form schemas are not available.  Run npm update meadow-connection-manager.');
+			tmpCachedSchemas = [];
+			return tmpCachedSchemas;
+		}
+		tmpCachedSchemas = tmpSchemaMCM.getAllProviderFormSchemas();
+		return tmpCachedSchemas;
+	};
+
+	// GET /clone/connection/schemas
+	// Returns the form schemas for every provider whose module is
+	// installed in the host environment.  Drives the connection
+	// section's UI (provider picker + per-provider field block).
+	pOratorServiceServer.get(`${tmpPrefix}/connection/schemas`,
+		(pRequest, pResponse, fNext) =>
+		{
+			pResponse.send(200, { Schemas: tmpGetSchemas() });
+			return fNext();
+		});
+
 	// GET /clone/connection/status
 	pOratorServiceServer.get(`${tmpPrefix}/connection/status`,
 		(pRequest, pResponse, fNext) =>

package/source/services/data-cloner/pict-app/Pict-Application-DataCloner.js

@@ -11,6 +11,7 @@ const libViewSync = require('./views/PictView-DataCloner-Sync.js');
 const libViewExport = require('./views/PictView-DataCloner-Export.js');
 const libViewViewData = require('./views/PictView-DataCloner-ViewData.js');
 const libViewHistogram = require('pict-section-histogram');
+const libViewConnectionForm = require('pict-section-connection-form');
 
 class DataClonerApplication extends libPictApplication
 {
@@ -45,11 +46,35 @@ class DataClonerApplication extends libPictApplication
 				BarColor: '#4a90d9',
 				Bins: []
 			}, libViewHistogram);
+
+		// Shared schema-driven connection form.  Renders into the slot
+		// the DataCloner-Connection accordion shell exposes; the
+		// provider's bootstrapConnectionSchemas() pumps the schemas in
+		// once the host's /clone/connection/schemas endpoint responds.
+		this.pict.addView('PictSection-ConnectionForm',
+			Object.assign({}, libViewConnectionForm.default_configuration,
+				{
+					ContainerSelector:         '#DataCloner-Connection-FormSlot',
+					DefaultDestinationAddress: '#DataCloner-Connection-FormSlot',
+					SchemasAddress:            'AppData.DataCloner.Connection.Schemas',
+					ActiveAddress:             'AppData.DataCloner.Connection.ActiveProvider',
+					FieldIDPrefix:             'datacloner-conn'
+				}), libViewConnectionForm);
 	}
 
 	onAfterInitializeAsync(fCallback)
 	{
-		// Centralized state (replaces global variables)
+		// Centralized state (replaces global variables).
+		//
+		// PersistFields covers the static, non-connection inputs only.
+		// Connection-section fields (provider picker + per-provider
+		// inputs) are schema-driven now: their DOM ids and
+		// localStorage keys are derived at runtime from the host's
+		// /clone/connection/schemas response and persistence is hooked
+		// up by Pict-Provider-DataCloner#bootstrapConnectionSchemas
+		// after the schema-driven Connection view re-renders.  See
+		// PictView-DataCloner-Connection.js for the field-id
+		// convention.
 		this.pict.AppData.DataCloner =
 		{
 			FetchedTables: [],
@@ -67,30 +92,32 @@ class DataClonerApplication extends libPictApplication
 				'serverURL', 'authMethod', 'authURI', 'checkURI',
 				'cookieName', 'cookieValueAddr', 'cookieValueTemplate', 'loginMarker',
 				'userName', 'password', 'schemaURL', 'pageSize', 'dateTimePrecisionMS',
-				'connProvider', 'sqliteFilePath',
-				'mysqlServer', 'mysqlPort', 'mysqlUser', 'mysqlPassword', 'mysqlDatabase', 'mysqlConnectionLimit',
-				'mssqlServer', 'mssqlPort', 'mssqlUser', 'mssqlPassword', 'mssqlDatabase', 'mssqlConnectionLimit',
-				'mssqlRequestTimeoutSec', 'mssqlConnectionTimeoutSec',
-				'mssqlConnectMaxAttempts', 'mssqlDDLMaxAttempts',
-				'mssqlRetryInitialDelaySec', 'mssqlRetryMaxDelaySec',
-				'postgresqlHost', 'postgresqlPort', 'postgresqlUser', 'postgresqlPassword', 'postgresqlDatabase', 'postgresqlConnectionLimit',
-				'solrHost', 'solrPort', 'solrCore', 'solrPath',
-				'mongodbHost', 'mongodbPort', 'mongodbUser', 'mongodbPassword', 'mongodbDatabase', 'mongodbConnectionLimit',
-				'rocksdbFolder',
-				'bibliographFolder',
 				'syncMaxRecords'
-			]
+			],
+			// Connection state — populated by bootstrapConnectionSchemas().
+			// Initialized empty here so the Connection view's first
+			// onBeforeRender finds a valid (if empty) shape.
+			Connection:
+			{
+				Schemas:         [],
+				ActiveProvider:  '',
+				ProviderOptions: [],
+				ProviderForms:   [],
+				NoSchemasSlot:   [{}],
+				PreviewText:     'Loading providers…'
+			}
 		};
 
 		// Make pict available for inline onclick handlers
 		window.pict = this.pict;
 
-		// Render layout (which chains child view renders via onAfterRender)
+		// Render layout (which chains child view renders via onAfterRender).
+		// The Connection view renders an empty shell here — the schemas
+		// arrive asynchronously and trigger a re-render once they land.
 		this.pict.views['DataCloner-Layout'].render();
 
-		// Post-render initialization
+		// Post-render initialization for the static (non-connection) UI.
 		this.pict.providers.DataCloner.initPersistence();
-		this.pict.views['DataCloner-Connection'].onProviderChange();
 		this.pict.providers.DataCloner.restoreDeployedTables();
 		this.pict.providers.DataCloner.startLiveStatusPolling();
 		this.pict.providers.DataCloner.initAccordionPreviews();
@@ -98,6 +125,13 @@ class DataClonerApplication extends libPictApplication
 		this.pict.views['DataCloner-Layout'].collapseAllSections();
 		this.pict.providers.DataCloner.initAutoProcess();
 
+		// Async: fetch the host's connection-form schemas and re-render
+		// the Connection section.  bootstrapConnectionSchemas restores
+		// localStorage values + hooks save listeners once the new DOM
+		// is in place, then invokes onProviderChange() to surface the
+		// active provider's form.
+		this.pict.providers.DataCloner.bootstrapConnectionSchemas(function () { /* fire-and-forget */ });
+
 		return fCallback();
 	}
 }

package/source/services/data-cloner/pict-app/providers/Pict-Provider-DataCloner.js

@@ -76,60 +76,25 @@ class DataClonerProvider extends libPictProvider
 
 	updateAllPreviews()
 	{
-		// Section 1 — Database Connection
-		let tmpProvider = document.getElementById('connProvider');
-		if (!tmpProvider) return;
-		tmpProvider = tmpProvider.value;
-		let tmpPreview1 = tmpProvider;
-		if (tmpProvider === 'SQLite')
-		{
-			let tmpPath = document.getElementById('sqliteFilePath').value || '~/headlight-liveconnect-local/cloned.sqlite';
-			tmpPreview1 = 'SQLite at ' + tmpPath;
-		}
-		else if (tmpProvider === 'MySQL')
-		{
-			let tmpHost = document.getElementById('mysqlServer').value || '127.0.0.1';
-			let tmpPort = document.getElementById('mysqlPort').value || '3306';
-			let tmpUser = document.getElementById('mysqlUser').value || 'root';
-			tmpPreview1 = 'MySQL on ' + tmpHost + ':' + tmpPort + ' as ' + tmpUser;
-		}
-		else if (tmpProvider === 'MSSQL')
-		{
-			let tmpHost = document.getElementById('mssqlServer').value || '127.0.0.1';
-			let tmpPort = document.getElementById('mssqlPort').value || '1433';
-			let tmpUser = document.getElementById('mssqlUser').value || 'sa';
-			tmpPreview1 = 'MSSQL on ' + tmpHost + ':' + tmpPort + ' as ' + tmpUser;
-		}
-		else if (tmpProvider === 'PostgreSQL')
-		{
-			let tmpHost = document.getElementById('postgresqlHost').value || '127.0.0.1';
-			let tmpPort = document.getElementById('postgresqlPort').value || '5432';
-			let tmpUser = document.getElementById('postgresqlUser').value || 'postgres';
-			tmpPreview1 = 'PostgreSQL on ' + tmpHost + ':' + tmpPort + ' as ' + tmpUser;
-		}
-		else if (tmpProvider === 'MongoDB')
-		{
-			let tmpHost = document.getElementById('mongodbHost').value || '127.0.0.1';
-			let tmpPort = document.getElementById('mongodbPort').value || '27017';
-			tmpPreview1 = 'MongoDB on ' + tmpHost + ':' + tmpPort;
-		}
-		else if (tmpProvider === 'Solr')
-		{
-			let tmpHost = document.getElementById('solrHost').value || '127.0.0.1';
-			let tmpPort = document.getElementById('solrPort').value || '8983';
-			tmpPreview1 = 'Solr on ' + tmpHost + ':' + tmpPort;
+		// Section 1 — Database Connection (schema-driven; the
+		// Connection view owns the heuristic that turns the active
+		// schema's field values into preview text).  The view's
+		// _buildPreviewText reads live DOM values for the active
+		// provider and falls back to schema Defaults if a field's
+		// element doesn't exist yet.
+		let tmpConnView = this.pict.views['DataCloner-Connection'];
+		let tmpConnState = (this.pict.AppData.DataCloner && this.pict.AppData.DataCloner.Connection) || null;
+		let tmpPreview1Text;
+		if (tmpConnView && tmpConnState && (tmpConnState.Schemas || []).length > 0)
+		{
+			tmpPreview1Text = tmpConnView._buildPreviewText(tmpConnState);
 		}
-		else if (tmpProvider === 'RocksDB')
-		{
-			let tmpFolder = document.getElementById('rocksdbFolder').value || '~/headlight-liveconnect-local/rocksdb';
-			tmpPreview1 = 'RocksDB at ' + tmpFolder;
-		}
-		else if (tmpProvider === 'Bibliograph')
+		else
 		{
-			let tmpFolder = document.getElementById('bibliographFolder').value || '~/headlight-liveconnect-local/bibliograph';
-			tmpPreview1 = 'Bibliograph at ' + tmpFolder;
+			tmpPreview1Text = (tmpConnState && tmpConnState.PreviewText) || 'Loading providers…';
 		}
-		document.getElementById('preview1').textContent = tmpPreview1;
+		let tmpPreview1El = document.getElementById('preview1');
+		if (tmpPreview1El) { tmpPreview1El.textContent = tmpPreview1Text; }
 
 		// Section 2 — Remote Session
 		let tmpServerURL = document.getElementById('serverURL').value;
@@ -210,14 +175,12 @@ class DataClonerProvider extends libPictProvider
 	{
 		let tmpSelf = this;
 
+		// Static (non-connection) fields that drive accordion previews.
+		// Connection-section fields hook updateAllPreviews via
+		// _persistConnectionFields() once schemas load — see
+		// bootstrapConnectionSchemas().
 		let tmpPreviewFields = [
-			'connProvider', 'sqliteFilePath',
-			'mysqlServer', 'mysqlPort', 'mysqlUser',
-			'mssqlServer', 'mssqlPort', 'mssqlUser',
-			'postgresqlHost', 'postgresqlPort', 'postgresqlUser',
-			'mongodbHost', 'mongodbPort',
-			'solrHost', 'solrPort',
-			'rocksdbFolder', 'bibliographFolder',
+			'connProvider',
 			'serverURL', 'userName',
 			'schemaURL',
 			'pageSize', 'dateTimePrecisionMS',
@@ -258,7 +221,17 @@ class DataClonerProvider extends libPictProvider
 	saveField(pFieldId)
 	{
 		let tmpEl = document.getElementById(pFieldId);
-		if (tmpEl)
+		if (!tmpEl) { return; }
+		// Checkboxes persist .checked, everything else persists .value.
+		// Older code special-cased a small set of checkbox ids (solrSecure,
+		// mssqlLegacyPagination, etc.); the schema-driven path no longer
+		// needs those — the checkbox handler in bootstrapConnectionSchemas
+		// stores 'true' / 'false' which restore picks up below.
+		if (tmpEl.type === 'checkbox')
+		{
+			localStorage.setItem('dataCloner_' + pFieldId, tmpEl.checked ? 'true' : 'false');
+		}
+		else
 		{
 			localStorage.setItem('dataCloner_' + pFieldId, tmpEl.value);
 		}
@@ -274,38 +247,40 @@ class DataClonerProvider extends libPictProvider
 			if (tmpSaved !== null)
 			{
 				let tmpEl = document.getElementById(tmpId);
-				if (tmpEl) tmpEl.value = tmpSaved;
+				if (tmpEl)
+				{
+					if (tmpEl.type === 'checkbox')
+					{
+						tmpEl.checked = (tmpSaved === 'true');
+					}
+					else
+					{
+						tmpEl.value = tmpSaved;
+					}
+				}
 			}
 		}
 
-		// Restore checkbox state
+		// Restore checkbox state for non-connection checkboxes that
+		// aren't in PersistFields (these all live outside the schema-
+		// driven Connection section, so they stay hardcoded).
 		let tmpSyncDeleted = localStorage.getItem('dataCloner_syncDeletedRecords');
 		if (tmpSyncDeleted !== null)
 		{
-			document.getElementById('syncDeletedRecords').checked = tmpSyncDeleted === 'true';
+			let tmpEl = document.getElementById('syncDeletedRecords');
+			if (tmpEl) tmpEl.checked = tmpSyncDeleted === 'true';
 		}
-		// Restore sync mode
 		let tmpSyncMode = localStorage.getItem('dataCloner_syncMode');
 		if (tmpSyncMode === 'Ongoing')
 		{
-			document.getElementById('syncModeOngoing').checked = true;
-		}
-		let tmpSolrSecure = localStorage.getItem('dataCloner_solrSecure');
-		if (tmpSolrSecure !== null)
-		{
-			document.getElementById('solrSecure').checked = tmpSolrSecure === 'true';
-		}
-		let tmpMssqlLegacyPagination = localStorage.getItem('dataCloner_mssqlLegacyPagination');
-		if (tmpMssqlLegacyPagination !== null)
-		{
-			let tmpEl = document.getElementById('mssqlLegacyPagination');
-			if (tmpEl) tmpEl.checked = tmpMssqlLegacyPagination === 'true';
+			let tmpEl = document.getElementById('syncModeOngoing');
+			if (tmpEl) tmpEl.checked = true;
 		}
-		// Restore advanced ID pagination checkbox
 		let tmpAdvancedIDPagination = localStorage.getItem('dataCloner_syncAdvancedIDPagination');
 		if (tmpAdvancedIDPagination !== null)
 		{
-			document.getElementById('syncAdvancedIDPagination').checked = tmpAdvancedIDPagination === 'true';
+			let tmpEl = document.getElementById('syncAdvancedIDPagination');
+			if (tmpEl) tmpEl.checked = tmpAdvancedIDPagination === 'true';
 		}
 	}
 
@@ -347,25 +322,9 @@ class DataClonerProvider extends libPictProvider
 			});
 		});
 
-		// Persist solr secure checkbox
-		let tmpSolrSecureEl = document.getElementById('solrSecure');
-		if (tmpSolrSecureEl)
-		{
-			tmpSolrSecureEl.addEventListener('change', function()
-			{
-				localStorage.setItem('dataCloner_solrSecure', this.checked);
-			});
-		}
-
-		// Persist MSSQL legacy pagination checkbox
-		let tmpMssqlLegacyPaginationEl = document.getElementById('mssqlLegacyPagination');
-		if (tmpMssqlLegacyPaginationEl)
-		{
-			tmpMssqlLegacyPaginationEl.addEventListener('change', function()
-			{
-				localStorage.setItem('dataCloner_mssqlLegacyPagination', this.checked);
-			});
-		}
+		// (Connection-section checkboxes — solrSecure, mssqlLegacyPagination —
+		// are handled by bootstrapConnectionSchemas() which hooks change
+		// listeners after the schema-driven form renders.)
 
 		// Persist advanced ID pagination checkbox
 		let tmpAdvancedIDPaginationEl = document.getElementById('syncAdvancedIDPagination');
@@ -397,6 +356,136 @@ class DataClonerProvider extends libPictProvider
 		}
 	}
 
+	// ================================================================
+	// Connection Schemas Bootstrap
+	//
+	// Fetches the host's aggregated connection-form schemas and re-
+	// renders the Connection view so it shows the real provider list +
+	// per-provider field blocks.  Then restores localStorage values
+	// for the new (schema-driven) DOM ids and hooks save listeners.
+	// ================================================================
+
+	bootstrapConnectionSchemas(fCallback)
+	{
+		let tmpSelf = this;
+		let tmpDone = (typeof(fCallback) === 'function') ? fCallback : function () {};
+
+		this.api('GET', '/clone/connection/schemas')
+			.then(function (pData)
+			{
+				let tmpSchemas = (pData && Array.isArray(pData.Schemas)) ? pData.Schemas : [];
+				tmpSelf._applyConnectionSchemas(tmpSchemas);
+				return tmpDone(null, tmpSchemas);
+			})
+			.catch(function (pError)
+			{
+				if (tmpSelf.fable && tmpSelf.fable.log && tmpSelf.fable.log.error)
+				{
+					tmpSelf.fable.log.error(`DataCloner: failed to fetch connection schemas: ${pError && pError.message}`);
+				}
+				// On failure, leave the empty-schema state in place — the
+				// shared view's "no schemas detected" notice will surface.
+				tmpSelf._applyConnectionSchemas([]);
+				return tmpDone(pError);
+			});
+	}
+
+	_applyConnectionSchemas(pSchemas)
+	{
+		let tmpAppData = this.pict.AppData.DataCloner;
+		if (!tmpAppData.Connection) { tmpAppData.Connection = { Schemas: [], ActiveProvider: '', PreviewText: '' }; }
+		tmpAppData.Connection.Schemas = pSchemas;
+
+		// Pick an initial ActiveProvider — restore from localStorage
+		// if the saved value matches one of the available providers,
+		// otherwise default to the first schema (or stay empty).
+		let tmpAvailable = pSchemas.map(function (pS) { return pS.Provider; });
+		let tmpSavedProvider = localStorage.getItem('dataCloner_activeProvider');
+		if (tmpSavedProvider && tmpAvailable.indexOf(tmpSavedProvider) >= 0)
+		{
+			tmpAppData.Connection.ActiveProvider = tmpSavedProvider;
+		}
+		else if (pSchemas.length > 0)
+		{
+			tmpAppData.Connection.ActiveProvider = pSchemas[0].Provider;
+		}
+
+		// Hand the schemas to the shared view, which renders the form
+		// into #DataCloner-Connection-FormSlot.
+		let tmpForm = this.pict.views['PictSection-ConnectionForm'];
+		if (tmpForm)
+		{
+			let tmpSelf = this;
+			tmpForm.options.OnProviderChange = function (pProvider)
+			{
+				tmpAppData.Connection.ActiveProvider = pProvider;
+				localStorage.setItem('dataCloner_activeProvider', pProvider);
+				// Re-hook persistence on the new active form's inputs
+				// (the shared view re-renders on provider change, so the
+				// previous input listeners are gone).
+				tmpSelf._persistConnectionFields(pSchemas);
+				tmpSelf.updateAllPreviews();
+			};
+			if (tmpAppData.Connection.ActiveProvider)
+			{
+				tmpForm._ActiveProvider = tmpAppData.Connection.ActiveProvider;
+			}
+			tmpForm.setSchemas(pSchemas);
+		}
+
+		// Re-render the DataCloner accordion shell so the preview text
+		// reflects the active provider.
+		let tmpAccordion = this.pict.views['DataCloner-Connection'];
+		if (tmpAccordion) { tmpAccordion.render(); }
+
+		// Restore values + hook input listeners on the freshly-rendered
+		// shared-view inputs.
+		this._persistConnectionFields(pSchemas);
+		this.updateAllPreviews();
+	}
+
+	_persistConnectionFields(pSchemas)
+	{
+		let tmpForm = this.pict.views['PictSection-ConnectionForm'];
+		if (!tmpForm) { return; }
+
+		let tmpSelf = this;
+
+		// Restore + hook every per-provider field.  saveField()
+		// dispatches on element type internally so checkboxes and
+		// text inputs share the same path.
+		(pSchemas || []).forEach(function (pSchema)
+		{
+			(pSchema.Fields || []).forEach(function (pField)
+			{
+				let tmpId = tmpForm.fieldDOMId(pSchema.Provider, pField.Name);
+				let tmpEl = document.getElementById(tmpId);
+				if (!tmpEl) { return; }
+
+				let tmpSaved = localStorage.getItem('dataCloner_' + tmpId);
+				if (tmpSaved !== null)
+				{
+					if (tmpEl.type === 'checkbox')
+					{
+						tmpEl.checked = (tmpSaved === 'true');
+					}
+					else
+					{
+						tmpEl.value = tmpSaved;
+					}
+				}
+
+				// Avoid double-binding when the shared view re-renders
+				// on provider change.  We tag the element so subsequent
+				// runs of this method are no-ops.
+				if (tmpEl.dataset && tmpEl.dataset.dataclonerHooked === '1') { return; }
+				if (tmpEl.dataset) { tmpEl.dataset.dataclonerHooked = '1'; }
+				tmpEl.addEventListener('input',  function () { tmpSelf.saveField(tmpId); tmpSelf.updateAllPreviews(); });
+				tmpEl.addEventListener('change', function () { tmpSelf.saveField(tmpId); tmpSelf.updateAllPreviews(); });
+			});
+		});
+	}
+
 	// ================================================================
 	// Live Status Indicator
 	// ================================================================