@chr33s/solarflare 0.0.2

package/src/console-forward.ts

@@ -0,0 +1,254 @@
+/** Log levels matching wrangler's --log-level options. */
+export type LogLevel = "debug" | "info" | "log" | "warn" | "error" | "none";
+
+const LOG_LEVEL_PRIORITY: Record<LogLevel, number> = {
+  debug: 0,
+  info: 1,
+  log: 2,
+  warn: 3,
+  error: 4,
+  none: 5,
+};
+
+/** Checks if a log level should be shown given the threshold. */
+function shouldLog(level: string, threshold: LogLevel) {
+  const levelPriority = LOG_LEVEL_PRIORITY[level as LogLevel] ?? LOG_LEVEL_PRIORITY.log;
+  const thresholdPriority = LOG_LEVEL_PRIORITY[threshold];
+  return levelPriority >= thresholdPriority;
+}
+
+/** Log entry from the browser. */
+interface LogEntry {
+  level: string;
+  message: string;
+  timestamp: string;
+  url?: string;
+  stacks?: string[];
+  extra?: unknown[];
+}
+
+/** Request payload from client. */
+interface ClientLogRequest {
+  logs: LogEntry[];
+}
+
+/** Console forwarding configuration. */
+export interface ConsoleForwardOptions {
+  enabled?: boolean;
+  endpoint?: string;
+  levels?: ("log" | "warn" | "error" | "info" | "debug")[];
+  includeStacks?: boolean;
+}
+
+const DEFAULT_OPTIONS: Required<ConsoleForwardOptions> = {
+  enabled: true,
+  endpoint: "/_console",
+  levels: ["log", "warn", "error", "info", "debug"],
+  includeStacks: true,
+};
+
+/** ANSI color codes. */
+const colors = {
+  reset: "\x1b[0m",
+  dim: "\x1b[2m",
+  red: "\x1b[31m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  cyan: "\x1b[36m",
+  gray: "\x1b[90m",
+};
+
+/** Gets ANSI color code for log level. */
+function getLevelColor(level: string) {
+  switch (level) {
+    case "error":
+      return colors.red;
+    case "warn":
+      return colors.yellow;
+    case "info":
+      return colors.cyan;
+    case "debug":
+      return colors.gray;
+    default:
+      return colors.blue;
+  }
+}
+
+/** Formats log message for terminal output. */
+function formatLogMessage(log: LogEntry) {
+  const color = getLevelColor(log.level);
+  const prefix = `${color}[browser:${log.level}]${colors.reset}`;
+  let message = `${prefix} ${log.message}`;
+
+  if (log.stacks && log.stacks.length > 0) {
+    message +=
+      "\n" +
+      log.stacks
+        .map((stack) =>
+          stack
+            .split("\n")
+            .map((line) => `${colors.dim}    ${line}${colors.reset}`)
+            .join("\n"),
+        )
+        .join("\n");
+  }
+
+  if (log.extra && log.extra.length > 0) {
+    const extraStr = JSON.stringify(log.extra, null, 2);
+    message +=
+      "\n" +
+      extraStr
+        .split("\n")
+        .map((line) => `${colors.dim}    ${line}${colors.reset}`)
+        .join("\n");
+  }
+
+  return message;
+}
+
+/** Processes console logs from the client. */
+export async function processConsoleLogs(request: Request, logLevel: LogLevel = "log") {
+  try {
+    const { logs }: ClientLogRequest = await request.json();
+
+    for (const log of logs) {
+      // Filter logs based on the configured log level
+      if (shouldLog(log.level, logLevel)) {
+        console.log(formatLogMessage(log));
+      }
+    }
+
+    return new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("[browser:error] Failed to process console logs:", error);
+    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+}
+
+/** Checks if request is a console forward request. */
+export function isConsoleRequest(request: Request, options: ConsoleForwardOptions = {}) {
+  const { endpoint } = { ...DEFAULT_OPTIONS, ...options };
+  const url = new URL(request.url);
+  return url.pathname === endpoint && request.method === "POST";
+}
+
+/** Generates client-side script that patches console methods. */
+export function generateClientScript(options: ConsoleForwardOptions = {}) {
+  const { endpoint, levels, includeStacks } = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+  };
+
+  return /* ts */ `
+    (function() {
+      const originalMethods = {
+        log: console.log.bind(console),
+        warn: console.warn.bind(console),
+        error: console.error.bind(console),
+        info: console.info.bind(console),
+        debug: console.debug.bind(console),
+      };
+
+      const logBuffer = [];
+      let flushTimeout = null;
+      const FLUSH_DELAY = 100;
+      const MAX_BUFFER_SIZE = 50;
+
+      function createLogEntry(level, args) {
+        const stacks = [];
+        const extra = [];
+
+        const message = Array.from(args).map((arg) => {
+          if (arg === undefined) return "undefined";
+          if (arg === null) return "null";
+          if (typeof arg === "string") return arg;
+          if (typeof arg === "number" || typeof arg === "boolean") return String(arg);
+
+          if (arg instanceof Error || (arg && typeof arg.stack === "string")) {
+            let stringifiedError = arg.toString();
+            if (${includeStacks} && arg.stack) {
+              let stack = arg.stack.toString();
+              if (stack.startsWith(stringifiedError)) {
+                stack = stack.slice(stringifiedError.length).trimStart();
+              }
+              if (stack) {
+                stacks.push(stack);
+              }
+            }
+            return stringifiedError;
+          }
+
+          if (typeof arg === "object") {
+            try {
+              const serialized = JSON.parse(JSON.stringify(arg));
+              extra.push(serialized);
+              return "[object]";
+            } catch {
+              return String(arg);
+            }
+          }
+          return String(arg);
+        }).join(" ");
+
+        return {
+          level,
+          message,
+          timestamp: new Date().toISOString(),
+          url: window.location.href,
+          stacks,
+          extra: extra.length > 0 ? extra : undefined,
+        };
+      }
+
+      async function sendLogs(logs) {
+        const payload = JSON.stringify({ logs });
+        const blob = new Blob([payload], { type: "application/json" });
+        navigator.sendBeacon("${endpoint}", blob);
+      }
+
+      function flushLogs() {
+        if (logBuffer.length === 0) return;
+        const logsToSend = [...logBuffer];
+        logBuffer.length = 0;
+        sendLogs(logsToSend);
+        if (flushTimeout) {
+          clearTimeout(flushTimeout);
+          flushTimeout = null;
+        }
+      }
+
+      function addToBuffer(entry) {
+        logBuffer.push(entry);
+        if (logBuffer.length >= MAX_BUFFER_SIZE) {
+          flushLogs();
+          return;
+        }
+        if (!flushTimeout) {
+          flushTimeout = setTimeout(flushLogs, FLUSH_DELAY);
+        }
+      }
+
+      // Patch console methods
+      ${levels
+        .map(
+          (level) => /* ts */ `
+            console.${level} = function(...args) {
+              originalMethods.${level}(...args);
+              const entry = createLogEntry("${level}", args);
+              addToBuffer(entry);
+            };
+          `,
+        )
+        .join("\n")}
+
+      window.addEventListener("beforeunload", flushLogs);
+      setInterval(flushLogs, 10000);
+    })();
+  `;
+}

package/src/critical-css.ts

@@ -0,0 +1,103 @@
+import { createHash } from "node:crypto";
+import { escapeJsonForHtml } from "./serialize.ts";
+
+/** Critical CSS cache entry. */
+interface CriticalCssEntry {
+  css: string;
+  hash: string;
+  timestamp: number;
+}
+
+/** In-memory cache for critical CSS (per route). */
+const criticalCssCache = new Map<string, CriticalCssEntry>();
+
+/** Max age for cached critical CSS (1 hour). */
+const CACHE_MAX_AGE = 60 * 60 * 1000;
+
+/** Extracts critical CSS for a route */
+export async function extractCriticalCss(
+  routePattern: string,
+  cssFiles: string[],
+  options: {
+    readCss: (path: string) => Promise<string>;
+    maxSize?: number;
+    cache?: boolean;
+  },
+) {
+  const cacheKey = routePattern;
+  const maxSize = options.maxSize ?? 14 * 1024;
+
+  if (options.cache !== false) {
+    const cached = criticalCssCache.get(cacheKey);
+    if (cached && Date.now() - cached.timestamp < CACHE_MAX_AGE) {
+      return cached.css;
+    }
+  }
+
+  const cssContents: string[] = [];
+  let totalSize = 0;
+
+  for (const file of cssFiles) {
+    try {
+      const content = await options.readCss(file);
+      const minified = minifyCss(content);
+
+      if (totalSize + minified.length > maxSize) {
+        break;
+      }
+
+      cssContents.push(minified);
+      totalSize += minified.length;
+    } catch {}
+  }
+
+  const criticalCss = cssContents.join("\n");
+  const hash = createHash("md5").update(criticalCss).digest("hex").slice(0, 8);
+
+  if (options.cache !== false) {
+    criticalCssCache.set(cacheKey, {
+      css: criticalCss,
+      hash,
+      timestamp: Date.now(),
+    });
+  }
+
+  return criticalCss;
+}
+
+/** Simple CSS minification for critical CSS */
+function minifyCss(css: string) {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\s+/g, " ")
+    .replace(/\s*([{}: ;,])\s*/g, "$1")
+    .trim();
+}
+
+/** Generates a noscript fallback for CSS loading. */
+export function generateCssFallback(stylesheets: string[]) {
+  const links = stylesheets
+    .map((href) => /* html */ `<link rel="stylesheet" href="${href}">`)
+    .join("");
+  return /* html */ `<noscript>${links}</noscript>`;
+}
+
+/** Generates async CSS loading script without blocking render on non-critical CSS */
+export function generateAsyncCssLoader(stylesheets: string[]) {
+  if (stylesheets.length === 0) return "";
+
+  const hrefs = escapeJsonForHtml(stylesheets);
+
+  return /* html */ `
+    <script>
+      (function() {
+        var ss=${hrefs};
+        ss.forEach(function(h){
+          var l=document.createElement('link');
+          l.rel='stylesheet';l.href=h;
+          document.head.appendChild(l);
+        });
+      })();
+    </script>
+  `;
+}

package/src/devtools-json.ts

@@ -0,0 +1,52 @@
+const ENDPOINT = "/.well-known/appspecific/com.chrome.devtools.json";
+
+export interface DevToolsJSON {
+  workspace: {
+    root: string;
+    uuid: string;
+  };
+}
+
+export interface DevToolsOptions {
+  projectRoot?: string;
+  uuid?: string;
+}
+
+let cachedUuid: string | null = null;
+
+export function setDevToolsUuid(uuid: string) {
+  cachedUuid = uuid;
+}
+
+function getOrCreateUuid(providedUuid?: string) {
+  if (providedUuid) return providedUuid;
+  if (cachedUuid) return cachedUuid;
+  cachedUuid = crypto.randomUUID();
+  return cachedUuid;
+}
+
+export function isDevToolsRequest(request: Request) {
+  const url = new URL(request.url);
+  return url.pathname === ENDPOINT && request.method === "GET";
+}
+
+/** Handles devtools.json request. Returns the project settings JSON. */
+export function handleDevToolsRequest(options: DevToolsOptions = {}) {
+  const root = options.projectRoot ?? (typeof process !== "undefined" ? process.cwd() : "/");
+  const uuid = getOrCreateUuid(options.uuid);
+
+  const devtoolsJson: DevToolsJSON = {
+    workspace: {
+      root,
+      uuid,
+    },
+  };
+
+  return new Response(JSON.stringify(devtoolsJson, null, 2), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+      "Cache-Control": "no-cache",
+    },
+  });
+}