From 9e22b67b38791f738bd95813b072dd6bfd5d0d95 Mon Sep 17 00:00:00 2001 From: Phil Ricketts <812139+replete@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:07:18 +0100 Subject: [PATCH] Progress on legacy build (disabled) --- index-legacy.html | 399 +++++++++++++++++++++++++++++++++++++++++ run.js | 30 +++- src/legacyPolyfills.js | 344 ++++++++++++++++++++++++++++++++++- 3 files changed, 761 insertions(+), 12 deletions(-) create mode 100644 index-legacy.html diff --git a/index-legacy.html b/index-legacy.html new file mode 100644 index 0000000..b98f23f --- /dev/null +++ b/index-legacy.html @@ -0,0 +1,399 @@ + + + + + + Biscuitman.js Sandbox + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

🍪 biscuitman.js

+

Lightweight Consent Manager

+
+ + +
+ 

+	

+	

+		
README @ Github repo

+
+		
+		
This page uses real analytics scripts with dummy IDs

+		

+
+		
+		
localStorage contents (refreshed once/s):

+		

+		
document cookies (refreshed once/s):

+		

+		
+
+		
+
+		
+		
History of Biscuits

+		
The origins of biscuits trace back centuries, with evidence of early biscuit-like snacks dating back to ancient civilizations. However, the modern biscuit, as we know it today, evolved during the Middle Ages in Europe. Initially, biscuits were hard, dry baked goods made primarily from flour, water, and sometimes sugar.

+		
Over time, biscuit recipes diversified, incorporating various ingredients such as butter, eggs, and flavorings. The Industrial Revolution further transformed biscuit production, enabling mass manufacturing and distribution.

+
+		
+		
Favourite Biscuit Selector

+		

+			
+			
+			
+			
+		

+		
+
+		
Popular Biscuit Varieties

+
+		
Rich Tea

+		
Rich tea biscuits are renowned for their delicate texture and subtle sweetness. Originating in the United Kingdom, rich tea biscuits are often enjoyed dunked in tea, coffee, or hot chocolate. These biscuits are commonly round-shaped with pin-prick patterns on the surface.

+
+		
Hobnobs

+		
Hobnobs, a staple in British biscuit assortments, boast a hearty oat flavor and a satisfying crunch. These biscuits are distinguishable by their rough texture and thick consistency, making them ideal for dunking or enjoying on their own.

+
+		
Custard Creams

+		
Custard creams are classic sandwich biscuits consisting of two layers of biscuit with a creamy, custard-flavored filling in between. With their nostalgic appeal and comforting taste, custard creams are a favorite among both children and adults.

+
+		
Bourbons

+		
Bourbons are distinctive chocolate sandwich biscuits featuring a dark chocolate-flavored filling sandwiched between two chocolate biscuits. Named after the French royal house of Bourbon, these biscuits offer a rich and indulgent treat for chocolate lovers.

+
+		
Jaffa Cakes

+		
While technically not biscuits but often included in biscuit assortments, Jaffa Cakes are a beloved snack consisting of a sponge cake base topped with a layer of orange-flavored jelly and coated in chocolate. The combination of tangy orange and rich chocolate makes Jaffa Cakes a delightful treat for any occasion.

+
+	

+
+	
+	
+
+
diff --git a/run.js b/run.js
index 3b98426..c23eb60 100644
--- a/run.js
+++ b/run.js
@@ -145,9 +145,19 @@ export async function scripts(skipFileSave) {
 	return Promise.all([js, minJs, mjs, minMjs])
 }
 
-/* async function buildLegacy() {
+async function buildLegacy() {
+	// Disable legacy builds for now
+	/*
+		2024-09-18
+		Latest progress Firefox 25, Chrome 30, Safari 7, IE 11 Js mostly
+		working but for Symbol.iterator call. Solution probably to swap
+		out swc ES5 transpilation for babel.
+	*/
+	if (packageJson) return
 	const legacyBrowserlistString = 'ie >=11, chrome >=30, firefox >=25, safari >=7' // 2013 browsers
+	const legacyComment = comment.replace('biscuitman','biscuitman (legacy)')
 
+	// Legacy Styles
 	const sourceStyles = await readFile(`src/${filenames.css}`, 'utf8')
 	let processedStyles = transformCss({
 		code: Buffer.from(sourceStyles),
@@ -156,18 +166,20 @@ export async function scripts(skipFileSave) {
 		targets: browserslistToTargets(browserslist(legacyBrowserlistString)),
 		include: Features.Nesting
 	})
+	// Flatten CSS custom properties
 	let flatCss = `${processedStyles.code}`
 		.replaceAll('var(--ui)','0,0,0')
 		.replaceAll('var(--tx)','#444')
 		.replaceAll('var(--bg)','#fff')
 		.replaceAll('var(--c)','#105d89')
 
-	let css = `${comment}\n` + flatCss
+	let css = `${legacyComment}\n` + flatCss
 	await writeFile(`dist/${filenames.legacyCss}`, css)
 	log('css',`Saved dist/${filenames.legacyCss}`)
 
+	// Legacy JS
 	const sourceJs = await readFile(`src/${filenames.js}`, 'utf8')
-	const legacyPolyfills = await readFile('src/legacyPolyfills.js')
+	const legacyPolyfills = await readFile('src/legacyPolyfills.js', 'utf8')
 
 	const legacyJs = swc.transform(`${legacyPolyfills};${sourceJs}`, {
 		sourceMaps: false,
@@ -183,12 +195,16 @@ export async function scripts(skipFileSave) {
 		},
 		minify: false,
 	}).then(async ({ code }) => {
+		// Bugfix swc transpilation helper
+		code = code
+			.replace('var ownKeys = Object.keys(source);','var ownKeys = Object.keys(typeof source === "object" ? source : {});') // bugfix swc transpilation
 		await writeFile(`dist/${filenames.legacyJs}`, `${comment}\n${code}`)
 		log('js',`Saved dist/${filenames.legacyJs}`)
+		return code
 	})
 
 
-	const minLegacyJs = swc.transform(legacyJs.code, {
+	const minLegacyJs = swc.transform(await legacyJs, {
 		sourceMaps: false,
 		isModule: false,
 		env: {
@@ -214,7 +230,7 @@ export async function scripts(skipFileSave) {
 	})
 
 	return Promise.all([legacyJs, minLegacyJs])
-} */
+}
 
 export async function build() {
 	console.time('Build Time')
@@ -273,8 +289,8 @@ ${css[0]}\`;
 		code: Buffer.from(dialogPolyfillCss),
 		minify: true,
 		sourceMap: false
-		//TODO: This outputs compressed HEX RGBA which might not work for older browsers
 	})
+	//TODO: This outputs compressed HEX RGBA which might not work for older browsers
 
 	const dialogPolyfillJsCss = `${comment}/* dialog-polyfill.js ${packageJson.devDependencies['dialog-polyfill']}*/
 ${dialogPolyfillJs}
@@ -293,7 +309,7 @@ ${dialogPolyfillJs}
 	log('build',`Saved dist/${filenames.dialogPolyfillJsWithCssMin} ${getCompressedSizes(dialogPolyfillJsCssMin)}`)
 
 	// Legacy version (WIP: Chrome 37, IE11 etc)
-	// buildLegacy()
+	buildLegacy()
 
 	console.timeEnd('Build Time')
 }
diff --git a/src/legacyPolyfills.js b/src/legacyPolyfills.js
index 5566814..b923c3c 100644
--- a/src/legacyPolyfills.js
+++ b/src/legacyPolyfills.js
@@ -1,5 +1,6 @@
-// These are ES5 polyfills for use in the WIP legacy build of the app.
+// These are ES5 polyfills for use in the WIP legacy build of the app. See notes in run.js' buildLegacy()
 
+// Object.entries
 Object.entries = Object.entries ? Object.entries : function(obj) {
 	var allowedTypes = ['[object String]', '[object Object]', '[object Array]', '[object Function]']
 	  var objType = Object.prototype.toString.call(obj)
@@ -26,6 +27,7 @@ Object.entries = Object.entries ? Object.entries : function(obj) {
 	  }
 }
 
+// Array|NodeList.forEach
 if (!Array.prototype.forEach) {
 	Array.prototype.forEach = function (fn, scope) {
 		'use strict'
@@ -37,7 +39,6 @@ if (!Array.prototype.forEach) {
 		}
 	}
 }
-
 if (!NodeList.prototype.forEach) {
 	NodeList.prototype.forEach = function(callback, thisArg) {
 		var i
@@ -46,7 +47,7 @@ if (!NodeList.prototype.forEach) {
 		}
 	}
 }
-
+// String.endsWith
 if (!String.prototype.endsWith) {
 	String.prototype.endsWith = function(search, this_len) {
 		if (this_len === undefined || this_len > this.length) {
@@ -55,7 +56,7 @@ if (!String.prototype.endsWith) {
 		return this.substring(this_len - search.length, this_len) === search
 	}
 }
-
+// String.startsWith
 if (!String.prototype.startsWith) {
 	String.prototype.startsWith = function(searchString, position) {
 		position = position || 0
@@ -128,4 +129,337 @@ if (!String.prototype.startsWith) {
 		CustomEvent.prototype = window.Event.prototype
 		window.CustomEvent = CustomEvent // expose definition to window
 	}
-})()
+})();
+
+// Array.from
+function arrayFrom(arr, callbackFn, thisArg)
+{
+    //if you need you can uncomment the following line
+    //if(!arr || typeof arr == 'function')throw new Error('This function requires an array-like object - not null, undefined or a function');
+
+    var arNew = [],
+        k = [], // used for convert Set to an Array
+        i = 0;
+
+    //if you do not need a Set object support then
+    //you can comment or delete the following if statement
+    if(window.Set && arr instanceof Set)
+    {
+        //we use forEach from Set object
+        arr.forEach(function(v){k.push(v)});
+        arr = k
+    }
+
+    for(; i < arr.length; i++)
+        arNew[i] = callbackFn
+            ? callbackFn.call(thisArg, arr[i], i, arr)
+            : arr[i];
+
+    return arNew
+}
+
+Array.from = Array.from || arrayFrom;
+
+// Object.fromEntries
+function defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function toConsumableArray(arr) { return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread(); }
+
+function nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+if (!Object.fromEntries) {
+  Object.fromEntries = function (iterable) {
+    return toConsumableArray(iterable).reduce(function (obj, ref) {
+      var key = ref[0],
+          val = ref[1];
+      return Object.assign(obj, defineProperty({}, key, val));
+    }, {});
+  };
+}
+
+// Object.assign
+if (typeof Object.assign !== 'function') {
+	Object.assign = function(target) {
+	  'use strict'
+	  if (target == null) {
+		throw new TypeError('Cannot convert undefined or null to object')
+	  }
+
+	  target = Object(target)
+	  for (var index = 1; index < arguments.length; index++) {
+		var source = arguments[index]
+		if (source != null) {
+		  for (var key in source) {
+			if (Object.prototype.hasOwnProperty.call(source, key)) {
+			  target[key] = source[key]
+			}
+		  }
+		}
+	  }
+	  return target
+	}
+  }
+
+  // Symbol.iterator
+  if (typeof Symbol !== 'function') {
+	window.Symbol = function(description) {
+		return '@@' + description;
+	};
+}
+
+if (!Symbol.iterator) {
+	Symbol.iterator = Symbol('iterator');
+}
+
+if (!Array.prototype[Symbol.iterator]) {
+	var iteratorMethod = function() {
+		var index = 0;
+		var self = this;
+		return {
+			next: function() {
+				return index < self.length ?
+					{ value: self[index++], done: false } :
+					{ done: true };
+			}
+		};
+	};
+
+	if (Object.defineProperty) {
+		Object.defineProperty(Array.prototype, Symbol.iterator, {
+			enumerable: false,
+			writable: false,
+			configurable: false,
+			value: iteratorMethod
+		});
+	} else {
+		Array.prototype[Symbol.iterator] = iteratorMethod;
+	}
+}
+
+// String.replaceAll
+if (!String.prototype.replaceAll) {
+    String.prototype.replaceAll = function(str, newStr){
+      if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+        return this.replace(str, newStr);
+      }
+      return this.replace(new RegExp(str, 'g'), newStr);
+    };
+  }
+
+  // Intl
+  if (window.Intl === undefined) {
+	window.Intl = {
+		DateTimeFormat: function() {
+			return {
+				format: function(date) {
+					return date.toLocaleString();
+				},
+				resolvedOptions: function() {
+					return {
+						timeZone: (Date().toLocaleString().match(/\S+$/) || [''])[0]
+					}
+				}
+			};
+		}
+	};
+  }
+
+  // 
 polyfill
+  /*
+Details Element Polyfill 2.4.0
+Copyright © 2019 Javan Makhmali
+ */
+(function() {
+	"use strict";
+	var element = document.createElement("details");
+	var elementIsNative = typeof HTMLDetailsElement != "undefined" && element instanceof HTMLDetailsElement;
+	var support = {
+	  open: "open" in element || elementIsNative,
+	  toggle: "ontoggle" in element
+	};
+	var styles = '\ndetails, summary {\n  display: block;\n}\ndetails:not([open]) > *:not(summary) {\n  display: none;\n}\nsummary::before {\n  content: "►";\n  padding-right: 0.3rem;\n  font-size: 0.6rem;\n  cursor: default;\n}\n[open] > summary::before {\n  content: "▼";\n}\n';
+	var _ref = [], forEach = _ref.forEach, slice = _ref.slice;
+	if (!support.open) {
+	  polyfillStyles();
+	  polyfillProperties();
+	  polyfillToggle();
+	  polyfillAccessibility();
+	}
+	if (support.open && !support.toggle) {
+	  polyfillToggleEvent();
+	}
+	function polyfillStyles() {
+	  document.head.insertAdjacentHTML("afterbegin", "");
+	}
+	function polyfillProperties() {
+	  var prototype = document.createElement("details").constructor.prototype;
+	  var setAttribute = prototype.setAttribute, removeAttribute = prototype.removeAttribute;
+	  var open = Object.getOwnPropertyDescriptor(prototype, "open");
+	  Object.defineProperties(prototype, {
+		open: {
+		  get: function get() {
+			if (this.tagName == "DETAILS") {
+			  return this.hasAttribute("open");
+			} else {
+			  if (open && open.get) {
+				return open.get.call(this);
+			  }
+			}
+		  },
+		  set: function set(value) {
+			if (this.tagName == "DETAILS") {
+			  return value ? this.setAttribute("open", "") : this.removeAttribute("open");
+			} else {
+			  if (open && open.set) {
+				return open.set.call(this, value);
+			  }
+			}
+		  }
+		},
+		setAttribute: {
+		  value: function value(name, _value) {
+			var _this = this;
+			var call = function call() {
+			  return setAttribute.call(_this, name, _value);
+			};
+			if (name == "open" && this.tagName == "DETAILS") {
+			  var wasOpen = this.hasAttribute("open");
+			  var result = call();
+			  if (!wasOpen) {
+				var summary = this.querySelector("summary");
+				if (summary) summary.setAttribute("aria-expanded", true);
+				triggerToggle(this);
+			  }
+			  return result;
+			}
+			return call();
+		  }
+		},
+		removeAttribute: {
+		  value: function value(name) {
+			var _this2 = this;
+			var call = function call() {
+			  return removeAttribute.call(_this2, name);
+			};
+			if (name == "open" && this.tagName == "DETAILS") {
+			  var wasOpen = this.hasAttribute("open");
+			  var result = call();
+			  if (wasOpen) {
+				var summary = this.querySelector("summary");
+				if (summary) summary.setAttribute("aria-expanded", false);
+				triggerToggle(this);
+			  }
+			  return result;
+			}
+			return call();
+		  }
+		}
+	  });
+	}
+	function polyfillToggle() {
+	  onTogglingTrigger(function(element) {
+		element.hasAttribute("open") ? element.removeAttribute("open") : element.setAttribute("open", "");
+	  });
+	}
+	function polyfillToggleEvent() {
+	  if (window.MutationObserver) {
+		new MutationObserver(function(mutations) {
+		  forEach.call(mutations, function(mutation) {
+			var target = mutation.target, attributeName = mutation.attributeName;
+			if (target.tagName == "DETAILS" && attributeName == "open") {
+			  triggerToggle(target);
+			}
+		  });
+		}).observe(document.documentElement, {
+		  attributes: true,
+		  subtree: true
+		});
+	  } else {
+		onTogglingTrigger(function(element) {
+		  var wasOpen = element.getAttribute("open");
+		  setTimeout(function() {
+			var isOpen = element.getAttribute("open");
+			if (wasOpen != isOpen) {
+			  triggerToggle(element);
+			}
+		  }, 1);
+		});
+	  }
+	}
+	function polyfillAccessibility() {
+	  setAccessibilityAttributes(document);
+	  if (window.MutationObserver) {
+		new MutationObserver(function(mutations) {
+		  forEach.call(mutations, function(mutation) {
+			forEach.call(mutation.addedNodes, setAccessibilityAttributes);
+		  });
+		}).observe(document.documentElement, {
+		  subtree: true,
+		  childList: true
+		});
+	  } else {
+		document.addEventListener("DOMNodeInserted", function(event) {
+		  setAccessibilityAttributes(event.target);
+		});
+	  }
+	}
+	function setAccessibilityAttributes(root) {
+	  findElementsWithTagName(root, "SUMMARY").forEach(function(summary) {
+		var details = findClosestElementWithTagName(summary, "DETAILS");
+		summary.setAttribute("aria-expanded", details.hasAttribute("open"));
+		if (!summary.hasAttribute("tabindex")) summary.setAttribute("tabindex", "0");
+		if (!summary.hasAttribute("role")) summary.setAttribute("role", "button");
+	  });
+	}
+	function eventIsSignificant(event) {
+	  return !(event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || event.target.isContentEditable);
+	}
+	function onTogglingTrigger(callback) {
+	  addEventListener("click", function(event) {
+		if (eventIsSignificant(event)) {
+		  if (event.which <= 1) {
+			var element = findClosestElementWithTagName(event.target, "SUMMARY");
+			if (element && element.parentNode && element.parentNode.tagName == "DETAILS") {
+			  callback(element.parentNode);
+			}
+		  }
+		}
+	  }, false);
+	  addEventListener("keydown", function(event) {
+		if (eventIsSignificant(event)) {
+		  if (event.keyCode == 13 || event.keyCode == 32) {
+			var element = findClosestElementWithTagName(event.target, "SUMMARY");
+			if (element && element.parentNode && element.parentNode.tagName == "DETAILS") {
+			  callback(element.parentNode);
+			  event.preventDefault();
+			}
+		  }
+		}
+	  }, false);
+	}
+	function triggerToggle(element) {
+	  var event = document.createEvent("Event");
+	  event.initEvent("toggle", false, false);
+	  element.dispatchEvent(event);
+	}
+	function findElementsWithTagName(root, tagName) {
+	  return (root.tagName == tagName ? [ root ] : []).concat(typeof root.getElementsByTagName == "function" ? slice.call(root.getElementsByTagName(tagName)) : []);
+	}
+	function findClosestElementWithTagName(element, tagName) {
+	  if (typeof element.closest == "function") {
+		return element.closest(tagName);
+	  } else {
+		while (element) {
+		  if (element.tagName == tagName) {
+			return element;
+		  } else {
+			element = element.parentNode;
+		  }
+		}
+	  }
+	}
+  })();