@awesomeness-js/server 1.1.10 → 1.1.13

package/tests/componentAndPageMemory.test.js

@@ -0,0 +1,172 @@
+import path from "path";
+import { performance } from "perf_hooks";
+import { describe, expect, it } from "vitest";
+
+import componentAndPageMemory, { clearComponentAndPageMemory,
+	extractUiRefsFromFileMemoized,
+	extractUiRefsMemoized,
+	getComponentAndPageMemoryStatus, } from "../src/componentAndPageMemory.js";
+
+describe("componentAndPageMemory", () => {
+
+	const fixturesRoot = path.join(
+		process.cwd(),
+		"tests",
+		"fixtures",
+		"site-and-components"
+	);
+	const siteInitPath = path.join(
+		fixturesRoot,
+		"sites",
+		"site-a",
+		"pages",
+		"home",
+		"init.js"
+	);
+	const siteJsPath = path.join(
+		fixturesRoot,
+		"sites",
+		"site-a",
+		"pages",
+		"home",
+		"js",
+		"index.js"
+	);
+	const componentJsPath = path.join(
+		fixturesRoot,
+		"components",
+		"card",
+		"index.js"
+	);
+
+	it("exports a default API object", () => {
+
+		expect(componentAndPageMemory).toBeTruthy();
+		expect(typeof componentAndPageMemory.readFileMemoized).toBe("function");
+		expect(typeof componentAndPageMemory.extractUiRefsMemoized).toBe("function");
+		expect(typeof componentAndPageMemory.extractUiRefsFromFileMemoized).toBe("function");
+		expect(typeof componentAndPageMemory.clearComponentAndPageMemory).toBe("function");
+		expect(typeof componentAndPageMemory.getComponentAndPageMemoryStatus).toBe("function");
+	
+	});
+
+	it("returns useful status/debug information", () => {
+
+		clearComponentAndPageMemory();
+		const initComponents = extractUiRefsFromFileMemoized(siteInitPath, {
+			namespace: "ui",
+			includeDotAccess: true,
+		});
+		const pageJsComponents = extractUiRefsFromFileMemoized(siteJsPath, {
+			namespace: "ui",
+			includeDotAccess: true,
+		});
+		const cardComponents = extractUiRefsFromFileMemoized(componentJsPath, {
+			namespace: "ui",
+			includeDotAccess: true,
+		});
+		const gatheredComponents = [ ...new Set([
+			"card",
+			...initComponents,
+			...pageJsComponents,
+			...cardComponents,
+		]) ].sort();
+
+		expect(initComponents).toEqual(expect.arrayContaining([ "pageInit", "pageWidget" ]));
+		expect(pageJsComponents).toEqual(expect.arrayContaining([ "pageScript" ]));
+		expect(cardComponents).toEqual(expect.arrayContaining([ "cardMain", "cardMount" ]));
+		expect(extractUiRefsMemoized("ui.inlineOnly();", { namespace: "ui" })).toEqual([ "inlineOnly" ]);
+
+		console.log("components gathered", gatheredComponents);
+		expect(gatheredComponents).toEqual([
+			"app",
+			"card",
+			"cardMain",
+			"cardMount",
+			"pageInit",
+			"pageScript",
+			"pageWidget",
+		]);
+
+		const status = getComponentAndPageMemoryStatus({
+			includeKeys: true,
+			sampleSize: 10,
+		});
+
+		console.log("componentAndPageMemory status", status);
+
+		expect(status.counts.fileCacheEntries).toBeGreaterThanOrEqual(1);
+		expect(status.counts.refsCacheEntries).toBeGreaterThanOrEqual(4);
+		expect(status.approximateBytes.totalCacheBytes).toBeGreaterThan(0);
+		expect(status.processMemoryUsage).toBeTruthy();
+		expect(status.keys.fileCacheKeys).toEqual(expect.arrayContaining([
+			siteInitPath,
+			siteJsPath,
+			componentJsPath,
+		]));
+		expect(status.keys.refsCacheKeys.length).toBeGreaterThan(0);
+		clearComponentAndPageMemory();
+	
+	});
+
+	it("shows cold hit vs warm hit timing", () => {
+
+		const coldRuns = 25;
+		const warmRuns = 250;
+
+		let coldTotalMs = 0;
+
+		for (let i = 0; i < coldRuns; i++) {
+
+			clearComponentAndPageMemory();
+
+			const coldStart = performance.now();
+
+			extractUiRefsFromFileMemoized(componentJsPath, {
+				namespace: "ui",
+				includeDotAccess: true,
+			});
+
+			coldTotalMs += performance.now() - coldStart;
+		
+		}
+
+		clearComponentAndPageMemory();
+		extractUiRefsFromFileMemoized(componentJsPath, {
+			namespace: "ui",
+			includeDotAccess: true,
+		});
+
+		const warmStart = performance.now();
+
+		for (let i = 0; i < warmRuns; i++) {
+
+			extractUiRefsFromFileMemoized(componentJsPath, {
+				namespace: "ui",
+				includeDotAccess: true,
+			});
+		
+		}
+
+		const warmTotalMs = performance.now() - warmStart;
+		const coldAvgMs = coldTotalMs / coldRuns;
+		const warmAvgMs = warmTotalMs / warmRuns;
+
+		console.log("componentAndPageMemory cold vs warm", {
+			coldRuns,
+			warmRuns,
+			coldTotalMs,
+			warmTotalMs,
+			coldAvgMs,
+			warmAvgMs,
+			ratioWarmToCold: warmAvgMs / coldAvgMs,
+		});
+
+		// Warm hits should typically be faster or close to cold hits in CI/VM environments.
+		expect(warmAvgMs).toBeLessThanOrEqual(coldAvgMs * 1.5);
+
+		clearComponentAndPageMemory();
+	
+	});
+
+});

package/tests/fetchPage.test.js

@@ -0,0 +1,259 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import path from "path";
+import { performance } from "perf_hooks";
+import { clearComponentAndPageMemory } from "../src/componentAndPageMemory.js";
+
+const mocks = vi.hoisted(() => ({
+	componentDependencies: vi.fn(),
+	pageInfo: vi.fn(),
+	getConfig: vi.fn(),
+}));
+
+vi.mock("../src/componentDependencies.js", () => ({
+	default: mocks.componentDependencies,
+}));
+
+vi.mock("../src/pageInfo.js", () => ({
+	default: mocks.pageInfo,
+}));
+
+vi.mock("../src/getConfig.js", () => ({
+	default: mocks.getConfig,
+}));
+
+import fetchPage from "../src/fetchPage.js";
+
+describe("fetchPage component inference", () => {
+
+	const fixturesRoot = path.join(
+		process.cwd(),
+		"tests",
+		"fixtures",
+		"site-and-components"
+	);
+	const jsPath = path.join(
+		fixturesRoot,
+		"sites",
+		"site-a",
+		"pages",
+		"home",
+		"js"
+	);
+	const cssPath = path.join(
+		fixturesRoot,
+		"sites",
+		"site-a",
+		"pages",
+		"home",
+		"css"
+	);
+	const expectedComponents = [
+		"app",
+		"card",
+		"cardMain",
+		"cardMount",
+		"pageInit",
+		"pageScript",
+		"pageWidget",
+	];
+
+	function buildRequest() {
+
+		return {
+			site: "site-a",
+			pageRoute: "home",
+			testing: true,
+			meta: {
+				pages: {},
+				components: {},
+			},
+			updatedMeta: {
+				pages: {},
+				components: {},
+			},
+			user: {
+				permissions: [ "*" ],
+			},
+		};
+
+	}
+
+	beforeEach(() => {
+
+		vi.clearAllMocks();
+
+		mocks.getConfig.mockReturnValue({
+			siteDir__URL: path.join(fixturesRoot, "sites"),
+			componentLocations: () => [ new URL("file:///tmp/components/") ],
+		});
+
+		mocks.pageInfo.mockResolvedValue({
+			about: {
+				version: "1.0.0",
+				permissions: [],
+				components: [ "card" ],
+			},
+			cssPath,
+			jsPath,
+			getData: async () => ({ ok: true }),
+		});
+
+		mocks.componentDependencies.mockImplementation((components) => {
+
+			return components.reduce((acc, component) => {
+
+				acc[component] = {
+					css: `/* ${component} css */`,
+					js: `/* ${component} js */`,
+				};
+
+				return acc;
+			
+			}, {});
+		
+		});
+	
+	});
+
+	it("infers components from init.js and page js files", async () => {
+
+		const awesomenessRequest = {
+			site: "site-a",
+			pageRoute: "home",
+			meta: {
+				pages: {},
+				components: {},
+			},
+			updatedMeta: {
+				pages: {},
+				components: {},
+			},
+			user: {
+				permissions: [ "*" ],
+			},
+		};
+
+		const out = await fetchPage(awesomenessRequest, {});
+
+		expect(out).toEqual({ ok: true });
+		expect(mocks.componentDependencies).toHaveBeenCalledTimes(1);
+
+		const inferred = [ ...new Set(mocks.componentDependencies.mock.calls[0][0]) ].sort();
+
+		console.log("fetchPage inferred components", inferred);
+
+		expect(inferred).toEqual(expectedComponents);
+	
+	});
+
+	it("still infers init.js components when page js rebuild is skipped", async () => {
+
+		const awesomenessRequest = {
+			site: "site-a",
+			pageRoute: "home",
+			meta: {
+				pages: {
+					home: "1.0.0",
+				},
+				components: {},
+			},
+			updatedMeta: {
+				pages: {},
+				components: {},
+			},
+			user: {
+				permissions: [ "*" ],
+			},
+		};
+
+		const out = await fetchPage(awesomenessRequest, {});
+
+		expect(out).toEqual({ ok: true });
+		expect(mocks.componentDependencies).toHaveBeenCalledTimes(1);
+
+		const inferred = [ ...new Set(mocks.componentDependencies.mock.calls[0][0]) ].sort();
+
+		console.log("fetchPage inferred components (cached page)", inferred);
+
+		expect(inferred).toEqual(expectedComponents);
+	
+	});
+
+	it("works when about.components is omitted and still infers from page files", async () => {
+
+		mocks.pageInfo.mockResolvedValueOnce({
+			about: {
+				version: "1.0.0",
+				permissions: [],
+			},
+			cssPath,
+			jsPath,
+			getData: async () => ({ ok: true }),
+		});
+
+		const awesomenessRequest = buildRequest();
+		const out = await fetchPage(awesomenessRequest, {});
+
+		expect(out).toEqual({ ok: true });
+		expect(mocks.componentDependencies).toHaveBeenCalledTimes(1);
+
+		const inferred = [ ...new Set(mocks.componentDependencies.mock.calls[0][0]) ].sort();
+
+		console.log("fetchPage inferred components (no about.components)", inferred);
+
+		expect(inferred).toEqual([
+			"app",
+			"cardMain",
+			"cardMount",
+			"pageInit",
+			"pageScript",
+			"pageWidget",
+		]);
+		expect(inferred).not.toContain("card");
+	
+	});
+
+	it("shows batch timing with cache retained vs cache cleared", async () => {
+
+		const requestRuns = 75;
+
+		clearComponentAndPageMemory();
+		mocks.componentDependencies.mockClear();
+
+		const retainedStart = performance.now();
+
+		for (let i = 0; i < requestRuns; i++) {
+
+			await fetchPage(buildRequest(), {});
+		
+		}
+
+		const retainedMs = performance.now() - retainedStart;
+
+		clearComponentAndPageMemory();
+		mocks.componentDependencies.mockClear();
+
+		const clearedStart = performance.now();
+
+		for (let i = 0; i < requestRuns; i++) {
+
+			clearComponentAndPageMemory();
+			await fetchPage(buildRequest(), {});
+		
+		}
+
+		const clearedMs = performance.now() - clearedStart;
+		const ratioRetainedToCleared = retainedMs / clearedMs;
+
+		console.log("fetchPage batch cache benchmark", {
+			requestRuns,
+			retainedMs,
+			clearedMs,
+			ratioRetainedToCleared,
+		});
+
+		expect(retainedMs).toBeLessThanOrEqual(clearedMs * 1.5);
+	
+	});
+
+});

package/tests/fixtures/site-and-components/components/app/cleanMain/index.js

@@ -0,0 +1,26 @@
+export default ({
+	withFullScreenHero = false
+} = {}) => {
+
+	if(!app.$main){
+
+		app.$main = $('#main');
+	
+	}
+
+	if(withFullScreenHero){
+
+		app.$main.addClass('withFullScreenHero');
+	
+	} else {
+
+		app.$main.removeClass('withFullScreenHero');
+	
+	}
+
+	app.$main.empty();
+	$(document).scrollTop(0);
+
+	return app.$main;
+
+};

package/tests/fixtures/site-and-components/components/app/cleanMain.js

@@ -0,0 +1,14 @@
+export default () => {
+
+	if(!app.$main){
+
+		app.$main = $('#main');
+	
+	}
+
+	app.$main.empty();
+	$(document).scrollTop(0);
+
+	return app.$main;
+
+};

package/tests/fixtures/site-and-components/components/app/index.css

@@ -0,0 +1,4 @@
+#app {
+    margin: 0;
+    padding: 0;
+}

package/tests/fixtures/site-and-components/components/app/index.js

@@ -0,0 +1,42 @@
+import ui from '#ui';
+
+export default function silentStart({
+	theme = {
+		name: 'light',
+		neutralColor: 'zinc',
+		accentColor: 'cyan',
+		customColors: {},
+	}
+}) {
+
+	app.theme = theme;
+
+	if(theme.customColors){
+
+		$.each(theme.customColors, (name, hexValue) => {
+
+			let inputColor;
+			let anchorShade = 600;
+
+			if(typeof hexValue === 'string'){
+
+				inputColor = hexValue;
+
+			} else if(typeof hexValue === 'object' && hexValue !== null){
+
+				inputColor = hexValue.inputColor;
+				anchorShade = hexValue.anchorShade || anchorShade;
+
+			}
+
+			ui.colors.custom({
+				inputColor: inputColor,
+				anchorShade: 600,
+				name
+			});
+
+		});
+
+	}
+
+}

package/tests/fixtures/site-and-components/components/app/insertIntoList.jquery.js

@@ -0,0 +1,150 @@
+(function(){
+
+	// IMPORTANT NOTE: with custom sortFn's use toLowerCase !!
+	$.fn.extend({
+
+		//Name the function
+		insertIntoList: function($ul, options) {
+
+			var defaults = {
+				'sortFn':function($elm){
+
+					return $elm.html().toLowerCase(); 
+
+				},
+				'insertBeforeLast':false,
+				'za':false,
+				'selector':null
+			};
+
+			var options =  $.extend(defaults, options); // jshint ignore:line
+
+			return this.each(function() {
+
+				if(!$ul){
+
+					return false; 
+
+				}
+
+				// From here on in, it's "normal" jQuery
+
+				var $li = $(this); // new item
+				var $lis;
+
+
+				if(options.selector){
+
+					$lis = $ul.children(options.selector); // existing items
+				
+				} else {
+
+					$lis = $ul.children(); // existing items
+				
+				}
+
+				var newHtml = options.sortFn($li);
+
+				if($lis.length === 0){
+
+					$li.appendTo($ul); 
+
+					return; 
+
+				}
+
+				$lis.each(function(k,e){
+
+					var $t = $(this);
+
+					// meta hack for skip
+					if($t.data('insertIntoListSkip') === true){
+
+						return true; 
+
+					}
+
+					var isLast = $t.is( ":last-child" );
+					var current = options.sortFn($t);
+
+					if(options.insertBeforeLast && isLast){
+
+						// insert before last child
+						$li.insertBefore($t);
+						
+						return false;
+
+					}
+
+					if(options.za){
+
+						if(current < newHtml){
+
+							$li.insertBefore($t);
+							
+							return false;
+
+						} else {
+
+							// continue if it is not the last item
+							if(!isLast){
+
+								return true; 
+
+							}
+
+							// it is the last item
+							if(options.insertBeforeLast){
+
+								$li.insertBefore($t);
+							
+							} else {
+
+								$li.insertAfter($t);
+							
+							}
+
+						}
+
+					} else {
+
+						if(current > newHtml){
+
+							$li.insertBefore($t);
+							
+							return false;
+
+						} else {
+
+							// continue if it is not the last item
+							if(!isLast){
+
+								return true; 
+
+							}
+
+							// it is the last item
+							if(options.insertBeforeLast){
+
+								$li.insertBefore($t);
+							
+							} else {
+
+								$li.insertAfter($t);
+							
+							}
+
+						}
+
+					}
+
+
+				});
+
+  			}); // each CORE
+
+		} // xoSelect Function
+
+	}); // extend
+
+})();

package/tests/fixtures/site-and-components/components/app/keyUpWithTimeout.jQuery.js

@@ -0,0 +1,26 @@
+(function() {
+	
+	$.fn.keyUpWithTimeout = function(callback, timeout) {
+	  
+		var timer;
+	  
+	  return this.each(function() {
+
+			let $this = $(this);
+
+			$this.on('keyup', function() {
+			
+				clearTimeout(timer);
+				timer = setTimeout(function() {
+
+					callback($this.val(), this);
+				
+				}, timeout);
+			
+			});
+	  
+		});
+	
+	};
+	
+})();