kempo 1.0.0

package/kempo/utils/object.js

@@ -0,0 +1,177 @@
+import {
+	typeOf,
+	isType
+} from './type.js';
+
+export const toJson = (obj) => {
+	return JSON.stringify(obj, (key, value) => {
+		if (key !== '' && value === obj) {
+			return '<<Circular Reference>>';
+		} else if (typeof(Element) !== 'undefined' && value instanceof Element) {
+			return value.outerHTML;
+		} else if(typeOf(value) === 'function'){
+			return `<<Function ${key}>>`;
+		}
+		return value;
+	});
+};
+
+export const flattenObject = (
+	obj,
+	maxDepth = 100,
+	prevDepth = 0,
+	parentKeys = []
+) => {
+	const thisDepth = prevDepth + 1;
+	if (obj === null) return {};
+	return Object.keys(obj).reduce((o, k) => {
+		const v = obj[k];
+		const key = [...parentKeys, k].join('.');
+		if (typeOf(Element) !== 'undefined' && v instanceof Element) {
+			return {
+				...o,
+				[key]: v.outerHTML
+			};
+		} else if (v === null) {
+			return {
+				...o,
+				[key]: null
+			};
+		} else if (typeof v === 'object') {
+			if (maxDepth <= thisDepth) {
+				return {
+					...o,
+					[key]: '<<Max Depth Reached>>'
+				};
+			} else {
+				return {
+					...o,
+					...flattenObject(v, maxDepth, thisDepth, [...parentKeys, k])
+				};
+			}
+		} else {
+			return {
+				...o,
+				[key]: v
+			};
+		}
+	}, {});
+};
+
+export const flattenedObjects = (...objects) => objects.map(o=>flattenObject(o));
+
+export const objectSummary = (object, maxLength = 100) => {
+	if (typeof object === 'object') {
+		const flatObject = flattenObject(object);
+		const kvp = []; // key value pairs
+		Object.keys(flatObject).forEach((key) => {
+			kvp.push(`${key} = ${objectSummary(flatObject[key])}`);
+		});
+		return kvp.join(', ').substring(0, maxLength);
+	} else {
+		return `${object}`.substring(0, maxLength);
+	}
+};
+
+export const clone = (obj) => {
+	const type = typeof obj;
+	const Element =
+		typeof window === 'undefined' ? class Element {} : window.Element; // So this can run in Node
+	if (obj instanceof Element) {
+		return obj.outerHTML;
+	} else if (obj === null) {
+		return null;
+	} else if (
+		['string', 'number', 'boolean', 'undefined', 'bigint'].includes(type)
+	) {
+		return obj;
+	} else if (type === 'symbol') {
+		return '<<SYMBOL>>';
+	} else if (type === 'function') {
+		return '<<function>>';
+	} else if (obj instanceof Array) {
+		return obj.map((item) => clone(item));
+	} else if (type === 'object') {
+		return Object.keys(obj).reduce((r, k) => {
+			return {
+				...r,
+				[k]: clone(obj[k])
+			};
+		}, {});
+	} else {
+		return obj;
+	}
+};
+
+export const equalObjs = (...objs) => {
+	if (objs.length < 2) return true;
+	const first = toJson(objs[0]);
+	for (let i = 1; i < objs.length; i++) {
+		if (first !== toJson(objs[i])) return false;
+	}
+	return true;
+};
+
+const pruneVar = (value) => {
+	if (typeof value === 'undefined') {
+		return [undefined, true];
+	} else if (typeof value === 'string') {
+		return [value, value === ''];
+	} else if (value instanceof Array) {
+		return [value, value.length === 0];
+	} else if (value === null) {
+		return [value, false];
+	} else if (typeof value === 'object') {
+		// eslint-disable-next-line no-use-before-define
+		return pruneObject(value);
+	}
+	return [value, false];
+};
+const pruneObject = (object) => {
+	const results = {};
+	Object.keys(object).forEach((key) => {
+		const [pruned, isBlank] = pruneVar(object[key]);
+		if (!isBlank) {
+			results[key] = pruned;
+		}
+	});
+	return [results, Object.keys(results).length === 0];
+};
+export const prune = (object) => {
+	return pruneObject(object)[0]
+}
+export const getAllKeys = (...objects) => [...new Set(objects.map(o => Object.keys(o)).flat())];
+export const getDifferencesKeys = (...objects) => {
+	return getAllKeys(...objects)
+		.map(k => new Set(objects.map(o => o[k])).size !== 1 ? k : null)
+		.filter(k => k !== null);
+}
+export const diff = (obj1, obj2) => {
+  const result = {};
+
+  function compareValues(path, value1, value2) {
+    if (Array.isArray(value1) && Array.isArray(value2)) {
+      if (value1.length !== value2.length || !value1.every((v, i) => v === value2[i])) {
+        result[path.join('.')] = { newValue: value1, oldValue: value2 };
+      }
+    } else if (typeof value1 === 'object' && typeof value2 === 'object') {
+      compareObjects([...path], value1, value2);
+    } else if (value1 !== value2) {
+      result[path.join('.')] = { newValue: value1, oldValue: value2 };
+    }
+  }
+
+  function compareObjects(path, obj1, obj2) {
+    for (const key in obj1) {
+      if (obj1.hasOwnProperty(key)) {
+        const value1 = obj1[key];
+        const value2 = obj2[key];
+
+        compareValues([...path, key], value1, value2);
+      }
+    }
+  }
+
+  compareObjects([], obj1, obj2);
+  return result;
+}

package/kempo/utils/string.js

@@ -0,0 +1,54 @@
+export const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+export const dashToCamel = (str) => str.replace(/-([a-z])/g, (_, group) => group.toUpperCase());
+export const isCamelCase = (str) => /[a-z][A-Z]/.test(str);
+export const getCase = (str) => {
+  if(isCamelCase(str)){
+    return {
+      camel: str,
+      dash: camelToDash(str)
+    }
+  } else {
+    return {
+      camel: dashToCamel(str),
+      dash: str
+    }
+  }
+}
+export const escapeHTML = str => str.replace(/[&<>"'/]/g, match => {
+  switch (match) {
+    case '&':
+      return '&amp;';
+    case '<':
+      return '&lt;';
+    case '>':
+      return '&gt;';
+    case '"':
+      return '&quot;';
+    case "'":
+      return '&#39;';
+    case '/':
+      return '&#x2F;';
+    default:
+      return match;
+  }
+});
+export const unescapeHTML = str => str.replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F;/g, match => {
+  switch (match) {
+    case '&amp;':
+      return '&';
+    case '&lt;':
+      return '<';
+    case '&gt;':
+      return '>';
+    case '&quot;':
+      return '"';
+    case '&#39;':
+      return "'";
+    case '&#x2F;':
+      return '/';
+    default:
+      return match;
+  }
+});
+export const trim = (str, chars) => str.replace(new RegExp(`^[${chars}]+|[${chars}]+$`, 'g'), '');
+export const compoundKey = keys => trim(keys.join('.'), '.');

package/kempo/utils/toFunction.js

@@ -0,0 +1,24 @@
+export default (v) => {
+  if (typeof v === 'function') {
+    return v;
+  }
+  if (typeof v === 'string') {
+    const parts = v.split('.');
+    let current = window;
+    for (const part of parts) {
+      current = current[part];
+      if (current === undefined) {
+        break;
+      }
+    }
+    if (typeof current === 'function') {
+      return current;
+    }
+    try {
+      return new Function(v);
+    } catch (e) {
+      console.error('Failed to create function from string:', e);
+    }
+  }
+  return () => v;
+};

package/kempo/utils/type.js

@@ -0,0 +1,8 @@
+export const typeOf = value => {
+	if(value === null) return 'null';
+	else if(value instanceof Array) return 'array';
+	else if(typeof(Element) !== 'undefined' && value instanceof Element) return  'element';
+	else return typeof(value);
+}
+
+export const isType = (value, type) => typeOf(value) === type;

package/kempo/utils/waitFrames.js

@@ -0,0 +1,17 @@
+export default (frameCount = 1) => {
+  return new Promise((resolve) => {
+    let frames = 0;
+
+    function frameHandler() {
+      frames++;
+
+      if (frames >= frameCount) {
+        resolve();
+      } else {
+        requestAnimationFrame(frameHandler);
+      }
+    }
+
+    requestAnimationFrame(frameHandler);
+  });
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "kempo",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A web component library",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "node ./scrips/test.js",
+    "build": "node ./scripts/build.js",
+    "docs": "node ./scripts/build.js && node ./scripts/docs.js"
+  },
+  "author": "Dustin Poissant",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.3"
+  },
+  "devDependencies": {
+    "fs-extra": "^11.2.0",
+    "terser": "^5.29.2"
+  },
+  "directories": {
+    "doc": "docs",
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dustinpoissant/kempo.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dustinpoissant/kempo/issues"
+  },
+  "homepage": "https://github.com/dustinpoissant/kempo#readme"
+}

package/scripts/build.js

@@ -0,0 +1,131 @@
+import fs from 'fs/promises';
+import fse from 'fs-extra';
+import { minify } from 'terser';
+
+console.log('Loading utils');
+const components = (await fs.readdir('./kempo/components/')).map(f=>f.substring(0,f.length-3));
+let complete = 0;
+
+console.log('Loading Component Source Code');
+process.stdout.write(`0/${components.length} = 0%`);
+const componentCode = {};
+await Promise.all(components.map( async component => {
+  componentCode[component] = await fs.readFile(`./kempo/components/${component}.js`, 'utf-8');
+  process.stdout.write("\r");
+  complete++;
+  process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
+}));
+process.stdout.write("\n");
+
+complete = 0;
+console.log('Minifying Component Source Code');
+process.stdout.write(`0/${components.length} = 0%`);
+const minifiedCompontents = {};
+await Promise.all(components.map( async componentFile => {
+  minifiedCompontents[componentFile] = (await minify(componentCode[componentFile])).code
+  process.stdout.write("\r");
+  complete++;
+  process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
+}));
+process.stdout.write("\n");
+
+complete = 0;
+console.log('Saving Minified Components to dist/');
+process.stdout.write(`0/${components.length} = 0%`);
+await fse.ensureDir('./dist/components');
+await Promise.all(components.map( async component => {
+  await fs.writeFile(`./dist/components/${component}.js`, minifiedCompontents[component], 'utf-8');
+  process.stdout.write("\r");
+  complete++;
+  process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
+}));
+process.stdout.write("\n");
+
+console.log('Loading Utils');
+const utils = (await fs.readdir('./kempo/utils/')).map(f=>f.substring(0,f.length-3));
+complete = 0;
+
+console.log('Loading Utils Source Code');
+process.stdout.write(`0/${utils.length} = 0%`);
+const utilCode = {};
+await Promise.all(utils.map( async util => {
+  utilCode[util] = await fs.readFile(`./kempo/utils/${util}.js`, 'utf-8');
+  process.stdout.write("\r");
+  complete++;
+  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
+}));
+process.stdout.write("\n");
+
+complete = 0;
+console.log('Minifying Utils Source Code');
+process.stdout.write(`0/${utils.length} = 0%`);
+const minifiedUtils = {};
+await Promise.all(utils.map( async utilFile => {
+  minifiedUtils[utilFile] = (await minify(utilCode[utilFile])).code
+  process.stdout.write("\r");
+  complete++;
+  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
+}));
+process.stdout.write("\n");
+
+complete = 0;
+console.log('Saving Minified Utils to dist/');
+process.stdout.write(`0/${utils.length} = 0%`);
+await fse.ensureDir('./dist/utils');
+await Promise.all(utils.map( async util => {
+  await fs.writeFile(`./dist/utils/${util}.js`, minifiedUtils[util], 'utf-8');
+  process.stdout.write("\r");
+  complete++;
+  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
+}));
+process.stdout.write("\n");
+
+console.log('Generatoring export file');
+const main = `
+  ${components.map( component => `import ${component} from './components/${component}.js';` ).join('')}
+  ${utils.map( util => `import ${util} from './utils/${util}.js';` ).join('')}
+  export default {
+    ${components.map( component => `${component}`).join(',')},
+    ${utils.map( util => `${util}`).join(',')}
+  };
+`;
+const minifiedMain = (await minify(main)).code;
+console.log('Saving minified main entry file');
+await fs.writeFile('./dist/index.js', minifiedMain, 'utf-8');
+
+console.log('Loading kempo.js');
+const kempoJS = await fs.readFile('./kempo/kempo.js', 'utf-8');
+console.log('Minifying kempo.js');
+const minifiedKempoJs = (await minify(kempoJS)).code;
+console.log('Saving minfiied kempo.js');
+await fs.writeFile('./dist/kempo.js', minifiedKempoJs, 'utf-8');
+
+console.log('Loading kempo-vars.css');
+const kempoVarsCSS = await fs.readFile('./kempo/kempo-vars.css', 'utf-8');
+console.log('Minifying kempo-vars.css');
+const minifiedKempoVarsCSS = kempoVarsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
+console.log('Saving kempo-vars.css');
+await fs.writeFile('./dist/kempo-vars.css', minifiedKempoVarsCSS, 'utf-8');
+
+console.log('Loading kempo-styles.css');
+const kempoStylesCSS = await fs.readFile('./kempo/kempo-styles.css', 'utf-8');
+console.log('Minifying kempo-styles.css');
+const miniefiedKempoStylesCSS = kempoStylesCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
+console.log('Saving kempo-styles.css');
+await fs.writeFile('./dist/kempo-styles.css', miniefiedKempoStylesCSS, 'utf-8');
+
+console.log('Loading kempo-hljs.css');
+const kempoHljsCSS = await fs.readFile('./kempo/kempo-hljs.css', 'utf-8');
+console.log('Minifying kempo-hljs.css');
+const minifiedKempoHljsCSS = kempoHljsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
+console.log('Saving kempo-hljs.css');
+await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
+
+console.log('Copying dist/ to docs/kempo/');
+await fse.ensureDir('./docs/kempo/icons'); // will also ensure docs/kempo
+await fse.copy('./dist', './docs/kempo')
+
+console.log('Copying icons/ to docs/kempo/icons/');
+await fse.copy('./icons', './docs/kempo/icons')
+
+console.log('Build Complete');

package/scripts/docs.js

@@ -0,0 +1,14 @@
+import express from 'express';
+import cli from '../kempo/utils/cli.js';
+
+const {
+ port = 8083
+} = cli();
+
+const app = express();
+
+app.use(express.static('docs'));
+
+app.listen(port, () => {
+  console.log(`Docs Running on: http://localhost:${port}`);
+});

package/test/components/SuiteList.js

@@ -0,0 +1,26 @@
+import Component from '../kempo/components/Component.js';
+import Card from '../kempo/components/Card.js';
+
+export default class SuiteList extends Component {
+  async render(force){
+    if(await super.render(force)){
+      this.innerHTML = '';
+      const tests = await (await fetch('/api/tests')).json();
+      Object.keys(tests).forEach( category => {
+        const $category = new Card(category[0].toUpperCase() + category.slice(1));
+        $category.className = 'my';
+        tests[category].forEach( suite => {
+          const $link = document.createElement('a');
+          $link.href = `/suite.html?name=${category}/${suite}`;
+          $link.innerHTML = suite;
+          $link.className = 'd-b pq';
+          $category.appendChild($link);
+        });
+        this.appendChild($category);
+      });
+      return true;
+    }
+    return false;
+  }
+}
+window.customElements.define('k-suite-list', SuiteList);