pict 1.0.7

package/gulpfile-config.json

@@ -0,0 +1,11 @@
+{
+	"EntrypointInputSourceFile": "./source/Pict-Browser-Shim.js",
+
+	"LibraryObjectName": "Pict",
+
+	"LibraryOutputFolder": "./dist/",
+
+	"LibraryUniminifiedFileName": "pict.compatible.js",
+
+	"LibraryMinifiedFileName": "pict.compatible.min.js"
+}

package/gulpfile-config_compatible.json

@@ -0,0 +1,11 @@
+{
+	"EntrypointInputSourceFile": "./source/Pict-Browser-Shim.js",
+
+	"LibraryObjectName": "Pict",
+
+	"LibraryOutputFolder": "./dist/",
+
+	"LibraryUniminifiedFileName": "pict.compatible.js",
+
+	"LibraryMinifiedFileName": "pict.compatible.min.js"
+}

package/gulpfile-config_default.json

@@ -0,0 +1,11 @@
+{
+	"EntrypointInputSourceFile": "./source/Pict-Browser-Shim.js",
+
+	"LibraryObjectName": "Pict",
+
+	"LibraryOutputFolder": "./dist/",
+
+	"LibraryUniminifiedFileName": "pict.js",
+
+	"LibraryMinifiedFileName": "pict.min.js"
+}

package/gulpfile.js

@@ -0,0 +1,164 @@
+'use strict';
+
+/*
+  After hours of reading and trying various ways of using gulp-env, environment variables
+  and babel browesrslistrc / package.json environments it is clear that the state of using
+  these tools is a mess.  There are ways of getting it to work but none of them feel like
+  they will work well in the long term (all of the examples seem to be in bands of about
+  a year or two of working before the pattern changes entirely).
+
+  WHY did we need such a crazy compatible version?  wkhtmltopdf is why.  It uses a very
+  old incompatible version of the QT browser.
+
+  Therefore, we will use a very old and simple method.
+
+	1) There is a config file (gulpfile-config.json), documented here, describing the inputs and outputs for the build operation.
+
+		const _CONFIG = (
+			{
+				// The input source file that should be passed to browserify:
+				// (if you need to auto-instantiate an object, for instance)
+				EntrypointInputSourceFile: `${__dirname}/source/Fable-Browser-Shim.js`,
+
+				// The name of the packaged object to be passed to browserify:
+				// (browserify sets this to global scope and window.SOMEOBJECTNAMEHERE where SOMEOBJECTNAMEHERE is the string below)
+				LibraryObjectName: `Fable`,
+
+				// The folder to write the library files and maps out to:
+				LibraryOutputFolder: `${__dirname}/dist/`,
+
+				// The name of the unminified version of the packaged library, for easy debugging:
+				LibraryUniminifiedFileName: `fable.js`,
+
+				// The name of the minified version of the packaged library, for production release:
+				LibraryMinifiedFileName: `fable.min.js`
+			});
+
+	2) We are using a .browserslistrc file... this is what tells gulp-babel, through the
+	   magic of the @babel/preset-env library, how to transpile the library into a compatible
+	   enough format for our targets.
+
+	   For example as of writing this, there are two targets we want:
+
+			*	Modern browsers in the last five years, expressed as a .browserslistrc with the string "since 2018"
+			*	Very old janky browsers expressed as a .browserslistrc with the string "> 0.01%"
+				... which is interpreted as anything more than 0.01% of browsers in existence or something like that
+
+	3) Because we want multiple outputs, and, the tools do fine if we want one output but some of
+	   the toolchain doesn't like making different targets well, we're just going to have multiple
+	   configurations and .browserslistrc files.  So if our spec above says we need a ".browserslistrc"
+	   file and a "gulpfile-config.json", we're going to make the following two sets of configuration:
+
+			*	.browserslistrc_default, .gulpfile-config_default.json
+			*	.browserslistrc_compatible, .gulpfile-config_compatible.json
+
+	4) We will copy, synchronously, these files to where the rest of our toolchain expects
+	   them, before we begin the build.  This will be done by looking at the GULP_CUSTOM_BUILD_TARGET
+	   environment variable.  This allows us to create new targets to experiment by copying a couple files,
+	   jimmying the settings and setting an environment variable before running the pipeline.
+
+	5) We will run the toolchain and it will happily think it's just doing a single build and kinda work.
+
+ */
+// BEGINNING OF STEP 3 and STEP 4 ABOVE
+const libFS = require('fs');
+const _GULP_CUSTOM_BUILD_TARGET = (typeof(process.env.GULP_CUSTOM_BUILD_TARGET) == 'undefined') ? 'default' : process.env.GULP_CUSTOM_BUILD_TARGET;
+console.log(`--> Gulp custom build target set to: [${_GULP_CUSTOM_BUILD_TARGET}]`);
+const _GULP_CONFIG = `./gulpfile-config_${_GULP_CUSTOM_BUILD_TARGET}.json`;
+const _GULP_CONFIG_TARGET = `./gulpfile-config.json`;
+console.log(`   : Environment set gulp config [${_GULP_CONFIG}] will be copied to [${_GULP_CONFIG_TARGET}]`);
+if (!libFS.existsSync(`./${_GULP_CONFIG}`))
+{
+	console.log(`!!!> Enviromnent set gulp config doesn't exist!`);
+	process.exit(1);
+}
+else
+{
+	libFS.copyFileSync(_GULP_CONFIG, _GULP_CONFIG_TARGET);
+	console.log(`   > Environment Gulp Config copied`);
+}
+const _BROWSERSLISTRC = `./.browserslistrc_${_GULP_CUSTOM_BUILD_TARGET}`;
+const _BROWSERSLISTRC_TARGET = `./.browserslistrc`;
+console.log(`   : Environment set browserslistrc [${_BROWSERSLISTRC}] will be copied to [${_BROWSERSLISTRC_TARGET}]`);
+if (!libFS.existsSync(`./${_GULP_CONFIG}`))
+{
+	console.log(`!!!> Enviromnent set browserslistrc doesn't exist!`);
+	process.exit(1);
+}
+else
+{
+	libFS.copyFileSync(_BROWSERSLISTRC, _BROWSERSLISTRC_TARGET);
+	console.log(`   > Environment Gulp Config copied`);
+}
+console.log(`---> The browserslistrc compatibility set is: ${libFS.readFileSync(_BROWSERSLISTRC_TARGET, 'utf8')}`);
+// END OF STEP 3 and STEP 4 ABOVE
+
+
+// ---> Now load the config and get on with building <--- \\
+console.log(``);
+console.log(`---> Loading the gulp config...`);
+const _CONFIG = require('./gulpfile-config.json');
+console.log(`   > Building to [${_CONFIG.LibraryUniminifiedFileName}] and [${_CONFIG.LibraryMinifiedFileName}]`)
+
+// --->  Boilerplate Browser Uglification and Packaging  <--- \\
+console.log(``);
+console.log(`--> Gulp is taking over!`);
+
+const libBrowserify = require('browserify');
+const libGulp = require('gulp');
+
+const libVinylSourceStream = require('vinyl-source-stream');
+const libVinylBuffer = require('vinyl-buffer');
+
+const libSourcemaps = require('gulp-sourcemaps');
+const libGulpUtil = require('gulp-util');
+const libBabel = require('gulp-babel');
+const libTerser = require('gulp-terser');
+
+// Build the module for the browser
+libGulp.task('minified',
+() => {
+	// set up the custom browserify instance for this task
+	var tmpBrowserify = libBrowserify(
+	{
+		entries: _CONFIG.EntrypointInputSourceFile,
+		standalone: _CONFIG.LibraryObjectName,
+		debug: true
+	});
+
+	return tmpBrowserify.bundle()
+		.pipe(libVinylSourceStream(_CONFIG.LibraryMinifiedFileName))
+		.pipe(libVinylBuffer())
+		.pipe(libSourcemaps.init({loadMaps: true}))
+				// Add transformation tasks to the pipeline here.
+				.pipe(libBabel())
+				.pipe(libTerser())
+				.on('error', libGulpUtil.log)
+		.pipe(libSourcemaps.write('./'))
+		.pipe(libGulp.dest(_CONFIG.LibraryOutputFolder));
+});
+
+// Build the module for the browser
+libGulp.task('debug',
+	() => {
+		// set up the custom browserify instance for this task
+		var tmpBrowserify = libBrowserify(
+		{
+			entries: _CONFIG.EntrypointInputSourceFile,
+			standalone: _CONFIG.LibraryObjectName,
+			debug: true
+		});
+
+		return tmpBrowserify.bundle()
+			.pipe(libVinylSourceStream(_CONFIG.LibraryUniminifiedFileName))
+			.pipe(libVinylBuffer())
+					.pipe(libBabel())
+					.on('error', libGulpUtil.log)
+			.pipe(libGulp.dest(_CONFIG.LibraryOutputFolder));
+	});
+
+libGulp.task
+(
+	'build',
+	libGulp.series('debug', 'minified')
+);

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "pict",
+  "version": "1.0.7",
+  "description": "Pict browser library.",
+  "main": "source/Pict.js",
+  "scripts": {
+    "start": "node source/Pict.js",
+    "coverage": "./node_modules/.bin/nyc --reporter=lcov --reporter=text-lcov ./node_modules/mocha/bin/_mocha -- -u tdd -R spec",
+    "test": "./node_modules/.bin/mocha -u tdd -R spec",
+    "build": "./node_modules/.bin/gulp build",
+    "build-compatible": "GULP_CUSTOM_BUILD_TARGET=compatible ./node_modules/.bin/gulp build"
+  },
+  "mocha": {
+    "diff": true,
+    "extension": [
+      "js"
+    ],
+    "package": "./package.json",
+    "reporter": "spec",
+    "slow": "75",
+    "timeout": "5000",
+    "ui": "tdd",
+    "watch-files": [
+      "source/**/*.js",
+      "test/**/*.js"
+    ],
+    "watch-ignore": [
+      "lib/vendor"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://stevenvelozo@github.com/stevenvelozo/pict.git"
+  },
+  "author": "steven velozo <steven@velozo.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stevenvelozo/pict/issues"
+  },
+  "homepage": "https://github.com/stevenvelozo/pict#readme",
+  "devDependencies": {
+    "@babel/core": "^7.21.5",
+    "@babel/preset-env": "^7.21.5",
+    "browserify": "^17.0.0",
+    "chai": "4.3.7",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-env": "^0.4.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-strip-comments": "^2.5.2",
+    "gulp-terser": "^2.1.0",
+    "gulp-util": "^3.0.8",
+    "jsdom": "^21.1.2",
+    "mocha": "10.2.0",
+    "nyc": "^15.1.0",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
+  },
+  "dependencies": {
+    "elucidator": "^1.0.7",
+    "fable": "^3.0.26",
+    "informary": "^2.0.20",
+    "manyfest": "^1.0.19",
+    "mousetrap": "^1.6.5"
+  }
+}

package/site_prototype/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <head>
+        <!-- Use correct character set. -->
+        <meta charset="utf-8">
+        <title>Pict Application</title>
+    </head>
+
+    <body>
+        <!-- A container for the Navigation to be displayed in. -->
+        <div id="applicationNavigation"></div>
+
+        <!-- A container for the Application to live in. -->
+        <div id="applicationContainer"></div>
+
+        <!-- A container for the Side Panel to be displayed in. -->
+        <div id="applicationSidePanel"></div>
+
+        <!-- Pict Library -->
+        <script src="../dist/pict.js"></script>
+    </body>
+</html>

package/source/Pict-Browser-Shim.js

@@ -0,0 +1,15 @@
+/**
+* Pict browser shim loader
+* @license MIT
+* @author <steven@velozo.com>
+*/
+
+// Load the pict module into the browser global automatically.
+const libPict = require('./Pict.js');
+
+if (typeof(window) === 'object')
+{
+    window.Pict = libPict;
+}
+
+module.exports = libPict;

package/source/Pict-Fable-Service-Elucidator.js

@@ -0,0 +1,17 @@
+const libFableServiceBase = require('fable').ServiceProviderBase;
+
+const libElucidator = require('elucidator');
+
+class FableServiceElucidator extends libFableServiceBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+        super(pFable, pOptions, pServiceHash);
+
+        this.serviceType = 'Solver';
+
+        this.solver = new libElucidator(this.options);
+	}
+}
+
+module.exports = FableServiceElucidator;

package/source/Pict-Fable-Service-Informary.js

@@ -0,0 +1,17 @@
+const libFableServiceBase = require('fable').ServiceProviderBase;
+
+const libInformary = require('informary');
+
+class FableServiceInformary extends libFableServiceBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+        super(pFable, pOptions, pServiceHash);
+
+        this.serviceType = 'Informary';
+
+        this.informary = new libInformary(this.options.Settings, this.options.Context, this.options.ContextGUID);
+	}
+}
+
+module.exports = FableServiceInformary;

package/source/Pict-Fable-Service-Manyfest.js

@@ -0,0 +1,24 @@
+const libFableServiceBase = require('fable').ServiceProviderBase;
+
+const libManyfest = require('manyfest');
+
+class FableServiceManyfest extends libFableServiceBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+        super(pFable, pOptions, pServiceHash);
+
+        this.serviceType = 'Manifest';
+
+        if (JSON.stringify(this.options) == '{}')
+        {
+            this.options = { Scope:'PictDefault', Descriptors: {} };
+        }
+
+        this.manyfest = new libManyfest(this.options);
+        // Kinda the same thing, yo
+        this.manifest = this.manyfest;
+	}
+}
+
+module.exports = FableServiceManyfest;

package/source/Pict-Template-Provider.js

@@ -0,0 +1,105 @@
+const libFableServiceBase = require('fable').ServiceProviderBase;
+
+class PictTemplateProvider extends libFableServiceBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+        super(pFable, pOptions, pServiceHash);
+
+        this.serviceType = 'PictTemplateProvider';
+
+        this.templates = {};
+
+        // Default templates are stored by prefix.
+        // The longest prefix match is used.
+        // Case sensitive.
+        this.defaultTemplates = {};
+        // Sorted list of default templates by length.
+        // Since this is a sorted list of case sensitive keys by length, it shouldn't be possible to have collisions.
+        this.defaultTemplateHashes = [];
+
+        // This function can be overloaded to load templates from a database, in a page or other source.
+        this.loadTemplateFunction = (pTemplateHash) => { return false; };
+	}
+
+    addTemplate(pTemplateHash, pTemplate)
+    {
+        this.templates[pTemplateHash] = pTemplate;
+    }
+
+    addDefaultTemplate(pTemplateHash, pTemplate)
+    {
+        if (typeof(pTemplate) != 'string')
+        {
+            this.log.error('PictTemplateProvider.addDefaultTemplate: pTemplate is not a string.');
+        }
+        this.defaultTemplates[pTemplateHash] = pTemplate;
+        this.defaultTemplateHashes = Object.keys(this.defaultTemplates).sort((a, b) => b.length - a.length);
+    }
+
+    checkDefaultTemplateHash(pTemplateHash)
+    {
+        /*
+         * Default templates are managed by postfix.  The use case is things like titles, headers, list wrappers, rows, etc.
+         *
+         * So we might have a default template for a list wrapper and it should expect "-ListWrap" as the postfix.
+         * And we might have a default template for a list row and it should expect "-ListRow" as the postfix.
+         * The list might have a "-ListTitle", or we might have shared titles and it would just be "-Title".
+         * 
+         * The idea is to allow fallbacks on defaults.
+         */
+        let tmpTemplateHashLength = pTemplateHash.length;
+
+        for (let i = 0; i < this.defaultTemplateHashes.length; i++)
+        {
+            // TODO: This is a bad way to check for a postfix.
+            // TODO: Is it a good idea to set the template so next time we don't have to check the defaults?
+            //       * Pros: Faster.
+            //       * Cons: If we later add another default template with a closer match, it won't get looked up.
+            //       Faster wins for now.
+            if (pTemplateHash.indexOf(this.defaultTemplateHashes[i]) == tmpTemplateHashLength - this.defaultTemplateHashes[i].length)
+            {
+                this.templates[pTemplateHash] = this.defaultTemplates[this.defaultTemplateHashes[i]];
+                return this.templates[pTemplateHash];
+            }
+        }
+        return false;
+    }
+
+    getTemplate(pTemplateHash)
+    {
+        // TODO: Optimize this.
+        // If the template doesn't exist, try to load it with the loading function
+        if (!this.templates.hasOwnProperty(pTemplateHash))
+        {
+            this.loadTemplate(pTemplateHash);
+        }
+        // If the loading function fails, try to load it from the default templates
+        if (!this.templates.hasOwnProperty(pTemplateHash))
+        {
+            this.checkDefaultTemplateHash(pTemplateHash);
+        }
+        if (this.templates.hasOwnProperty(pTemplateHash))
+        {
+            return this.templates[pTemplateHash];
+        }
+        else
+        {
+            return false;
+        }
+    }
+
+    loadTemplate(pTemplateHash)
+    {
+        let tmpTemplate = this.loadTemplateFunction(pTemplateHash);
+
+        if (tmpTemplate)
+        {
+            this.templates[pTemplateHash] = tmpTemplate;
+        }
+
+        return tmpTemplate;
+    }
+}
+
+module.exports = PictTemplateProvider;

package/source/Pict.js

@@ -0,0 +1,141 @@
+/**
+* @license MIT
+* @author <steven@velozo.com>
+*/
+const libFable = require('fable');
+
+// Pict Services
+const libPictTemplateProvider = require('./Pict-Template-Provider.js');
+
+// External Library Services
+const libFableServiceManyfest = require('./Pict-Fable-Service-Manyfest.js');
+const libFableServiceElucidator = require('./Pict-Fable-Service-Elucidator.js');
+const libFableServiceInformary = require('./Pict-Fable-Service-Informary.js');
+
+const libMouseTrap = require('mousetrap');
+
+class Pict
+{
+	constructor(pOptions)
+	{
+		this.fable = new libFable(pOptions);
+
+		this.log = this.fable.log;
+		this.settings = this.fable.settings;
+
+		this.serviceManager = this.fable.serviceManager;
+
+		this.fable.serviceManager.addServiceType('TemplateProvider', libPictTemplateProvider);
+
+		this.fable.serviceManager.addServiceType('Manifest', libFableServiceManyfest);
+		this.fable.serviceManager.addServiceType('Solver', libFableServiceElucidator);
+		this.fable.serviceManager.addServiceType('Informary', libFableServiceInformary);
+
+		// Register the services
+
+		// The templateProvider provides a basic key->template mapping with default fallback capabilities
+		this.templateProvider = this.fable.serviceManager.instantiateServiceProvider('TemplateProvider', {}, 'defaultTemplateProvider');
+
+		this.defaultTemplateProcessor = this.fable.serviceManager.instantiateServiceProvider('MetaTemplate', {}, 'defaultTemplateProcessor');
+		this._DefaultTemplateMethodsInitialized = false;
+
+		this.manifestServiceProvider = this.fable.serviceManager.instantiateServiceProvider('Manifest', {}, 'defaultManifest');
+		this.manifest = this.manifestServiceProvider.manifest;
+
+
+		this.appData = {};
+	}
+
+	initializeTemplateMethods(fExtraTemplateMethods)
+	{
+		/*
+		 *
+		 * To stave off madness, these are inefficient for now.  The wkhtmltopdf renderer leaves much to be desired
+		 * in the way of feedback with regards to javascript compatibility.
+		 *
+		 */
+		if (!this._DefaultTemplateMethodsInitialized)
+		{
+			this.defaultTemplateProcessor.addPattern('{~Data:', '~}',
+				(pHash, pData)=>
+				{
+					let tmpHash = pHash.trim();
+					let tmpValue = this.manifest.getValueAtAddress({AppData: this.appData, Record: pData}, tmpHash);
+
+					if ((tmpValue == null) || (tmpValue == 'undefined') || (typeof(tmpValue) == 'undefined'))
+					{
+						//console.log('undefined!');
+						return '';
+					}
+					return tmpValue;
+				});
+
+			this.defaultTemplateProcessor.addPattern('{~Dollars:', '~}',
+				(pHash, pData)=>
+				{
+					let tmpHash = pHash.trim();
+					let tmpColumnData = this.manifest.getValueAtAddress({AppData: this.appData, Record: pData}, tmpHash);
+
+					let tmpValue = this.fable.DataArithmatic.formatterDollars(tmpColumnData);
+
+					return tmpValue;
+				});
+
+			this.defaultTemplateProcessor.addPattern('{~Digits:', '~}',
+				(pHash, pData)=>
+				{
+					let tmpHash = pHash.trim();
+					let tmpColumnData = this.manifest.getValueAtAddress({AppData: this.appData, Record: pData}, tmpHash);
+
+					let tmpValue = this.fable.DataArithmatic.formatterAddCommasToNumber(this.fable.DataArithmatic.formatterRoundNumber(tmpColumnData, 2));
+
+					return tmpValue;
+				});
+
+			this.defaultTemplateProcessor.addPattern('{~NotEmpty:', '~}',
+				(pHash, pData)=>
+				{
+					let tmpHash = pHash.trim();
+					let tmpHashParts = tmpHash.split('|');
+
+					if (tmpHashParts.length != 2)
+					{
+						return '';
+					}
+
+					let tmpTruthiness = this.manifest.getValueAtAddress({AppData: this.appData, Record: pData}, tmpHashParts[0]);
+
+					let tmpValue = '';
+
+					// For now just check truthiness
+					if (tmpTruthiness)
+					{
+						tmpValue = tmpHashParts[1];
+					}
+
+					return tmpValue;
+				});
+
+			this._DefaultTemplateMethodsInitialized = true;
+		}
+	}
+
+	parseTemplate (pTemplateString, pData)
+	{
+		return this.defaultTemplateProcessor.parseString(pTemplateString, pData);
+	}
+
+	parseTemplateByHash (pTemplateHash, pData)
+	{
+		let tmpTemplateString = this.templateProvider.getTemplate(pTemplateHash);
+
+		// TODO: Unsure if returning empty is always the right behavior -- if it isn't we will use config to set the behavior
+		if (!tmpTemplateString)
+		{
+			return '';
+		}
+		return this.parseTemplate(tmpTemplateString, pData);
+	}
+};
+
+module.exports = Pict;