Implement biscuitman-legacy version, supporting IE11 and other 2013 browsers

Author: replete

README.md

@@ -121,7 +121,7 @@ While you have the option to enable or disable some or all of these cookies, not
 
 ## Experimental ESM version
 
-ESM version supplied as an alternative packaging format. Long-term it's better to not have two versions, so this may or not become the main version. Consider it an alternate packaging format at this point. [see ESM demo](https://replete.github.io/biscuitman/index-esm.html)
+ESM version supplied as an alternative packaging format. Long-term it's better to not have two versions, so this may or not become the main version. Consider it an alternate packaging format at this point. ([ESM demo](https://replete.github.io/biscuitman/index-esm.html))
 
 ```html
 <!-- Experimental ESM version: -->
@@ -177,7 +177,7 @@ html.bm-show::after {
 
 ## Browser Support
 
-Biscuitman is written in modern Javascript and transpiled `swc` to target browsers less than two years old. The included distributables are tested to support the following browsers:
+Biscuitman is written in modern Javascript and transpiled with `swc` to target browsers less than two years old. The included distributables are tested to support the following browsers:
 
 - Chrome/Edge/Opera: 85+ (released June 2020)
 - Firefox: 98+ (released March 2022)
@@ -186,9 +186,9 @@ Biscuitman is written in modern Javascript and transpiled `swc` to target browse
 
 ### \<Dialog\> polyfill
 
-To support older than the browsers above, a polyfill for `<dialog>` is required. Biscuitman checks for this and will load the [dialog polyfill](https://github.com/GoogleChrome/dialog-polyfill) automatically if it is not already loaded, and then correctly bind.
+To support older than the browsers above, a polyfill for `<dialog>` is required. Biscuitman checks for this automatically and loads a [polyfill for dialog](https://github.com/GoogleChrome/dialog-polyfill) on-demand (if it is not already loaded), and then correctly binds the UI.
 
-For this to work, you must host `dist/dialog-polyfill.withcss.js` and set the biscuitman config property, `dialogPolyfill`, to the correct URL.
+For this to work, you must host `dist/dialog-polyfill.withcss.js` and set the config property `dialogPolyfill` to the correct URL.
 
 This will extend the browser support to:
 - Safari (inc iOS) 13.1+ (released March 2020)
@@ -197,19 +197,19 @@ This will extend the browser support to:
 
 If the dialog polyfill is already loaded (`window.dialogPolyfill` exists), the polyfill will not be loaded again. To disable this on-demand functionality altogether, set `dialogPolyfill` property to `false`.
 
-### Extending Browser support
+### Legacy Browser Support
 
-You can extend support to the following browsers by including the following script _before_ biscuitman.js:
-- Safari 11.1+ (released Jan 2018)
-- Safari iOS 11.3+ (released Mar 2018)
-- Firefox 55+ (released Aug 2017)
-- Chrome 60+ (released Jul 2017)
+If you need to support really old browsers, use `biscuitman-legacy.js`, `biscuitman-legacy.min.js` or `biscuitman-legacy.withcss.js` to extend the browser support to:
+- Safari 7+ / 6.2+ (released Oct 2013)
+- Chrome 30+ (released Oct 2013)
+- Firefox 24+ (released Sep 2013)
+- Chrome 24+ (released Jan 2013)
+- IE 11+ (released Oct 2013)
 
-```html
-<script src="//cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=String.prototype.replaceAll%2CObject.fromEntries"></script>
-```
+This legacy version is transpiled to ES5 and includes required polyfills to make itself functional on these ancient browsers. This makes the distributables roughtly double the filesize of the modern versions.
+
+In these extremely old browsers, the functionality is intact and the UI is usable but it may look slightly janky as the browser is missing CSS features like `gap` resulting in missing gaps between buttons.
 
-Obviously a third party hosted polyfill is not good for performance, so in this scenario you'd want to self-host the `replaceAll` and `Object.fromEntries` polyfills. This is the lazy approach, if you really need to support older browsers it would make more sense to rebuild biscuitman with an earlier javascript target (update `package.json` `browserlist` property and rebuild with `npm run build`). If there was enough need for this, I'd consider adding a build target for older browsers and release as `biscuitman.legacy.js`.
 
 ## Globals
 - `biscuitman` – configuration object, must be `window.biscuitman`
@@ -262,7 +262,8 @@ document.addEventListener('bm:save', ({ detail }) => {
 
 `npm run dev` fires up a browserSync development server on `https://localhost:3000`.
 
-We need `https://` active to be able to delete Secure cookies.
+We need `https://` to be able to delete Secure cookies.
+
 
 ### Fix NET::ERR_CERT_AUTHORITY_INVALID error
 
@@ -273,7 +274,6 @@ To prevent invalid certificate warnings, you can generate a local SSL key with `
 
 Visiting `https://localhost:3000` should now work without warnings.
 
-
 ### Building
 `npm run build` - creates project distributes via `run.js`, a custom build script requiring `Node v20`
 

__tests__/e2e.tests.js

@@ -6,7 +6,11 @@ let appVersions = [
 	['biscuitman.mjs'],
 	['biscuitman.min.mjs'],
 	['biscuitman.withcss.mjs'],
-	['biscuitman.withcss.min.mjs']
+	['biscuitman.withcss.min.mjs'],
+	['biscuitman-legacy.js'],
+	['biscuitman-legacy.min.js'],
+	['biscuitman-legacy.withcss.js'],
+	['biscuitman-legacy.withcss.min.js']
 ]
 
 appVersions.forEach(([filename])=>{

dist/biscuitman.legacy.css renamed to dist/biscuitman-legacy.css

@@ -1,4 +1,4 @@
-/*! biscuitman (legacy).js 0.4.2 */
+/*! biscuitman-legacy.js 0.5.0 */
 .biscuitman {
   --ui: 0, 0, 0;
   --tx: #444;
@@ -361,10 +361,10 @@
   --height: 1.2em;
   --width: 2.3em;
   --gap: 2px;
-  height: var(--height);
-  width: var(--width);
+  height: 1.2em;
+  width: 2.3em;
   background-color: rgba(0,0,0, .3);
-  border-radius: var(--height);
+  border-radius: 1.2em;
   margin-top: -2px;
   display: block;
   position: absolute;
@@ -378,11 +378,11 @@
 .biscuitman label:before {
   content: "";
   background: #fff;
-  height: calc(var(--height)  - calc(var(--gap) * 2));
-  width: calc(var(--height)  - calc(var(--gap) * 2));
-  height: var(--height);
-  width: var(--height);
-  left: var(--gap);
+  height: calc(1.2em  - calc(2px * 2));
+  width: calc(1.2em  - calc(2px * 2));
+  height: 1.2em;
+  width: 1.2em;
+  left: 2px;
   -webkit-transform-origin: center;
   transform-origin: center;
   border-radius: 100%;