@awesomeness-js/server 1.1.10 → 1.1.11

package/tests/componentAndPageMemory.test.js

@@ -0,0 +1,171 @@
+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([
+			"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,257 @@
+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 = [
+		"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([
+			"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/card/index.js

@@ -0,0 +1,88 @@
+export default function card() {
+
+	const $card = ui.cardMain();
+	const mountRef = ui.cardMount.mount();
+	
+	const items = [
+		{
+			id: "itm-1",
+			title: "First",
+			score: 11 
+		},
+		{
+			id: "itm-2",
+			title: "Second",
+			score: 27 
+		},
+		{
+			id: "itm-3",
+			title: "Third",
+			score: 42 
+		},
+		{
+			id: "itm-4",
+			title: "Fourth",
+			score: 31 
+		},
+		{
+			id: "itm-5",
+			title: "Fifth",
+			score: 18 
+		},
+		{
+			id: "itm-6",
+			title: "Sixth",
+			score: 54 
+		},
+		{
+			id: "itm-7",
+			title: "Seventh",
+			score: 39 
+		},
+		{
+			id: "itm-8",
+			title: "Eighth",
+			score: 23 
+		},
+	];
+
+	const grouped = items.reduce((acc, item) => {
+
+		const bucket = item.score >= 40 ? "high" : item.score >= 25 ? "medium" : "low";
+
+		acc[bucket] = acc[bucket] || [];
+		acc[bucket].push(item);
+
+		return acc;
+	
+	}, {});
+
+	const sorted = [ ...items ].sort((a, b) => b.score - a.score);
+	const topThree = sorted.slice(0, 3);
+
+	const details = {
+		count: items.length,
+		topThree,
+		grouped,
+		mountRef,
+		signature: `${topThree.map((item) => item.id).join("|")}:${items.length}`,
+	};
+
+	if (details.count > 5) {
+
+		ui.cardMain();
+	
+	}
+
+	if (details.topThree.length === 3) {
+
+		ui.cardMount.mount();
+	
+	}
+
+	return {
+		$card,
+		details,
+	};
+
+}

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

@@ -0,0 +1,86 @@
+export default function() {
+
+	const items = [
+		{
+			id: "itm-1",
+			title: "First",
+			score: 11 
+		},
+		{
+			id: "itm-2",
+			title: "Second",
+			score: 27 
+		},
+		{
+			id: "itm-3",
+			title: "Third",
+			score: 42 
+		},
+		{
+			id: "itm-4",
+			title: "Fourth",
+			score: 31 
+		},
+		{
+			id: "itm-5",
+			title: "Fifth",
+			score: 18 
+		},
+		{
+			id: "itm-6",
+			title: "Sixth",
+			score: 54 
+		},
+		{
+			id: "itm-7",
+			title: "Seventh",
+			score: 39 
+		},
+		{
+			id: "itm-8",
+			title: "Eighth",
+			score: 23 
+		},
+	];
+
+	const grouped = items.reduce((acc, item) => {
+
+		const bucket = item.score >= 40 ? "high" : item.score >= 25 ? "medium" : "low";
+
+		acc[bucket] = acc[bucket] || [];
+		acc[bucket].push(item);
+
+		return acc;
+	
+	}, {});
+
+	const sorted = [ ...items ].sort((a, b) => b.score - a.score);
+	const topThree = sorted.slice(0, 3);
+
+	const details = {
+		count: items.length,
+		topThree,
+		grouped,
+		mountRef,
+		signature: `${topThree.map((item) => item.id).join("|")}:${items.length}`,
+	};
+
+	if (details.count > 5) {
+
+		ui.cardMain();
+	
+	}
+
+	if (details.topThree.length === 3) {
+
+		ui.cardMount.mount();
+	
+	}
+
+	return {
+		$card,
+		details,
+	};
+
+
+}

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

@@ -0,0 +1,86 @@
+export default function() {
+
+	const items = [
+		{
+			id: "itm-1",
+			title: "First",
+			score: 11 
+		},
+		{
+			id: "itm-2",
+			title: "Second",
+			score: 27 
+		},
+		{
+			id: "itm-3",
+			title: "Third",
+			score: 42 
+		},
+		{
+			id: "itm-4",
+			title: "Fourth",
+			score: 31 
+		},
+		{
+			id: "itm-5",
+			title: "Fifth",
+			score: 18 
+		},
+		{
+			id: "itm-6",
+			title: "Sixth",
+			score: 54 
+		},
+		{
+			id: "itm-7",
+			title: "Seventh",
+			score: 39 
+		},
+		{
+			id: "itm-8",
+			title: "Eighth",
+			score: 23 
+		},
+	];
+
+	const grouped = items.reduce((acc, item) => {
+
+		const bucket = item.score >= 40 ? "high" : item.score >= 25 ? "medium" : "low";
+
+		acc[bucket] = acc[bucket] || [];
+		acc[bucket].push(item);
+
+		return acc;
+	
+	}, {});
+
+	const sorted = [ ...items ].sort((a, b) => b.score - a.score);
+	const topThree = sorted.slice(0, 3);
+
+	const details = {
+		count: items.length,
+		topThree,
+		grouped,
+		mountRef,
+		signature: `${topThree.map((item) => item.id).join("|")}:${items.length}`,
+	};
+
+	if (details.count > 5) {
+
+		ui.cardMain();
+	
+	}
+
+	if (details.topThree.length === 3) {
+
+		ui.cardMount.mount();
+	
+	}
+
+	return {
+		$card,
+		details,
+	};
+
+	
+}