From dfc8724bc9becb34fbf61feefcbaa382f452f87c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 3 Jul 2026 09:08:07 +0000
Subject: [PATCH] fix: make module importable in DOM-free environments
 (Node/SSR)

The package advertises a "pure DOM-free calculator" (`import { calculate }`)
and index.d.ts documents calculate() as "no DOM required", plus the README
claims Next.js support. But the module referenced HTMLElement (superclass),
document.createElement, and customElements.define at top level, so importing
it in Node/SSR threw `ReferenceError: document is not defined` at load time.
The existing tests only passed because they inject a full DOM shim into
globalThis before importing.

Guard the three DOM touchpoints so the module loads without a browser:
- derive the template's HTML into a plain string; only build the <template>
  element when `document` exists
- extend a plain base class when `HTMLElement` is undefined so the class
  declaration itself doesn't throw off-DOM
- register the custom element only when `customElements` exists

Add test/dom-free.test.mjs, which imports the module with no DOM shim
(node --test runs each file in its own process) and calls calculate(), as
a regression guard. The web-component path is unchanged in the browser.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CBGKeWziEpyQeGBiD1LiKv
---
 hailbytes-vuln-calculator.js | 24 ++++++++++++++++++++----
 test/dom-free.test.mjs       | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 test/dom-free.test.mjs

diff --git a/hailbytes-vuln-calculator.js b/hailbytes-vuln-calculator.js
index 1d2c2aa..dedec17 100644
--- a/hailbytes-vuln-calculator.js
+++ b/hailbytes-vuln-calculator.js
@@ -550,8 +550,7 @@ const STYLES = `
 
 // ─── Template ─────────────────────────────────────────────────────────────────
 
-const TMPL = document.createElement('template');
-TMPL.innerHTML = `<style>${STYLES}</style>
+const TEMPLATE_HTML = `<style>${STYLES}</style>
 <div class="header">
   <h1><span class="icon">🔍</span> Vulnerability Scanner Infrastructure Calculator <span class="hailbytes-badge">HailBytes</span></h1>
   <p>Size your scanning infrastructure — estimate VM requirements, cloud costs, and ROI entirely in the browser</p>
@@ -642,9 +641,23 @@ TMPL.innerHTML = `<style>${STYLES}</style>
   </div>
 </div>`;
 
+// Only touch the DOM when it exists. This keeps the module importable in
+// DOM-free environments (Node, SSR, Next.js server components) so the pure
+// `calculate` export can be used without a browser or DOM shim.
+const TMPL = typeof document !== 'undefined'
+  ? document.createElement('template')
+  : null;
+if (TMPL) TMPL.innerHTML = TEMPLATE_HTML;
+
 // ─── Web Component ────────────────────────────────────────────────────────────
 
-class HailbytesVulnCalculator extends HTMLElement {
+// Fall back to a plain base class off-DOM so the class declaration itself
+// doesn't throw when `HTMLElement` is undefined. The element is only ever
+// instantiated by the browser's custom-element machinery, so the DOM methods
+// used in the constructor are never reached off-DOM.
+const ComponentBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};
+
+class HailbytesVulnCalculator extends ComponentBase {
   static get observedAttributes() { return ['theme', 'branding']; }
 
   constructor() {
@@ -856,7 +869,10 @@ class HailbytesVulnCalculator extends HTMLElement {
   }
 }
 
-customElements.define('hailbytes-vuln-calculator', HailbytesVulnCalculator);
+// Register the custom element only in a browser context.
+if (typeof customElements !== 'undefined') {
+  customElements.define('hailbytes-vuln-calculator', HailbytesVulnCalculator);
+}
 
 export default HailbytesVulnCalculator;
 export { HailbytesVulnCalculator, calculateResources as calculate };
diff --git a/test/dom-free.test.mjs b/test/dom-free.test.mjs
new file mode 100644
index 0000000..1401c8e
--- /dev/null
+++ b/test/dom-free.test.mjs
@@ -0,0 +1,35 @@
+// Regression test: the module must be importable in a DOM-free environment
+// (Node, SSR, Next.js server components) so the pure `calculate` export works
+// without a browser or a DOM shim. NOTE: this file intentionally does NOT set
+// up any `document`/`HTMLElement`/`customElements` globals — `node --test` runs
+// each test file in its own process, so importing here exercises the real
+// off-DOM code path.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+test('module imports without a DOM and exposes calculate()', async () => {
+  assert.equal(typeof globalThis.document, 'undefined');
+  assert.equal(typeof globalThis.HTMLElement, 'undefined');
+  assert.equal(typeof globalThis.customElements, 'undefined');
+
+  const mod = await import('../hailbytes-vuln-calculator.js');
+  assert.equal(typeof mod.calculate, 'function');
+});
+
+test('calculate() runs off-DOM and returns a sizing result', async () => {
+  const { calculate } = await import('../hailbytes-vuln-calculator.js');
+
+  const result = calculate({
+    target_hosts: 1000,
+    scan_intensity: 'medium',
+    scan_frequency: 'weekly',
+    scan_window: 8,
+    scanning_tools: ['openvas'],
+    compliance_needs: [],
+  });
+
+  assert.ok(result.vm_resources.cpu_cores >= 2);
+  assert.ok(result.costs.total_monthly_aws > 0);
+  assert.ok(Array.isArray(result.recommendations));
+});