@kenkaiiii/gg-pixel 4.3.73 → 4.3.75

package/dist/index.js

@@ -745,17 +745,18 @@ function wireNextjs({ projectRoot, projectKey, ingestUrl }) {
   const serverInitPath = pickPath(projectRoot, ["instrumentation.ts", "instrumentation.js"]);
   const finalServerPath = serverInitPath ?? join2(projectRoot, "instrumentation.ts");
   writeNextInstrumentation(finalServerPath, ingestUrl);
-  const clientInitPath = join2(projectRoot, "gg-pixel.client.mjs");
-  writeFileSync(clientInitPath, renderBrowserInitFile(ingestUrl, projectKey), "utf8");
+  patchNextConfig(projectRoot);
+  const clientInitPath = join2(projectRoot, "gg-pixel.client.tsx");
+  writeFileSync(clientInitPath, renderNextClientComponent(ingestUrl, projectKey), "utf8");
   const layoutPath = findNextLayout(projectRoot);
   let entryWiring;
   if (!layoutPath) {
     warnings.push(
-      'Could not auto-wire the Next.js client init \u2014 no app/layout.{tsx,jsx} or pages/_app.{tsx,jsx} found. Add `import "./gg-pixel.client.mjs";` to your root layout/_app.'
+      'Could not auto-wire the Next.js client init \u2014 no app/layout.{tsx,jsx} or pages/_app.{tsx,jsx} found. Add `<GGPixelClient />` from "./gg-pixel.client" to your root layout/_app.'
     );
     entryWiring = { kind: "no_entry_found" };
   } else {
-    entryWiring = injectImport(layoutPath, clientInitPath);
+    entryWiring = injectNextClientComponent(layoutPath, clientInitPath);
   }
   return {
     primaryInitPath: clientInitPath,
@@ -817,6 +818,112 @@ function findNextLayout(projectRoot) {
   }
   return null;
 }
+function renderNextClientComponent(ingestUrl, projectKey) {
+  return `"use client";
+// Client-only pixel init. Rendered from the root layout. The "use client"
+// directive guarantees this module never executes during server-side
+// rendering \u2014 \`window.onerror\` references would otherwise crash builds.
+import { useEffect } from "react";
+import { initPixel } from "@kenkaiiii/gg-pixel/browser";
+
+let inited = false;
+
+export default function GGPixelClient() {
+  useEffect(() => {
+    if (inited) return;
+    inited = true;
+    initPixel({
+      projectKey: ${JSON.stringify(projectKey)},
+      ingestUrl: ${JSON.stringify(ingestUrl)},
+    });
+  }, []);
+  return null;
+}
+`;
+}
+function injectNextClientComponent(layoutPath, clientInitPath) {
+  let content;
+  try {
+    content = readFileSync2(layoutPath, "utf8");
+  } catch (err) {
+    return { kind: "skipped", reason: `unreadable: ${err.message}` };
+  }
+  if (content.includes("GGPixelClient") || content.includes("@kenkaiiii/gg-pixel")) {
+    return { kind: "already_present", entryPath: layoutPath };
+  }
+  const fromDir = dirname2(layoutPath);
+  let spec = relative(fromDir, clientInitPath).split(sep).join("/");
+  if (!spec.startsWith(".")) spec = "./" + spec;
+  spec = spec.replace(/\.tsx$/, "");
+  const importLine = `import GGPixelClient from ${JSON.stringify(spec)};`;
+  const lines = content.split("\n");
+  let insertImportAt = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (/^\s*import\s/.test(lines[i] ?? "")) insertImportAt = i + 1;
+  }
+  lines.splice(insertImportAt, 0, importLine);
+  const updated = lines.join("\n");
+  const childrenIdx = updated.lastIndexOf("{children}");
+  if (childrenIdx === -1) {
+    writeFileSync(layoutPath, updated, "utf8");
+    return { kind: "skipped", reason: "added import but couldn't find {children} to render <GGPixelClient />" };
+  }
+  const before = updated.slice(0, childrenIdx);
+  const after = updated.slice(childrenIdx);
+  const finalContent = before + "<GGPixelClient />\n        " + after;
+  writeFileSync(layoutPath, finalContent, "utf8");
+  return { kind: "injected", entryPath: layoutPath };
+}
+function patchNextConfig(projectRoot) {
+  const candidates = ["next.config.ts", "next.config.mjs", "next.config.js", "next.config.cjs"];
+  let configPath = null;
+  for (const c of candidates) {
+    const p = join2(projectRoot, c);
+    if (existsSync2(p)) {
+      configPath = p;
+      break;
+    }
+  }
+  if (!configPath) {
+    configPath = join2(projectRoot, "next.config.ts");
+    writeFileSync(
+      configPath,
+      `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Keeps Next's bundler from trying to compile better-sqlite3 (native dep).
+  serverExternalPackages: ["@kenkaiiii/gg-pixel"],
+};
+
+export default nextConfig;
+`,
+      "utf8"
+    );
+    return;
+  }
+  const content = readFileSync2(configPath, "utf8");
+  if (content.includes("@kenkaiiii/gg-pixel")) return;
+  if (content.includes("serverExternalPackages")) {
+    const updated = content.replace(
+      /serverExternalPackages\s*:\s*\[([^\]]*)\]/,
+      (_match, inside) => {
+        const trimmed = inside.trim();
+        const sep2 = trimmed.length > 0 ? ", " : "";
+        return `serverExternalPackages: [${trimmed}${sep2}"@kenkaiiii/gg-pixel"]`;
+      }
+    );
+    if (updated !== content) writeFileSync(configPath, updated, "utf8");
+    return;
+  }
+  const objStart = /(const\s+\w+\s*:\s*NextConfig\s*=\s*\{|module\.exports\s*=\s*\{|export\s+default\s*\{)/;
+  const m = objStart.exec(content);
+  if (m) {
+    const insertAt = m.index + m[0].length;
+    const updated = content.slice(0, insertAt) + `
+  serverExternalPackages: ["@kenkaiiii/gg-pixel"],` + content.slice(insertAt);
+    writeFileSync(configPath, updated, "utf8");
+  }
+}
 function wireSveltekit({ projectRoot, projectKey, ingestUrl }) {
   const serverPath = join2(projectRoot, "src/hooks.server.ts");
   const clientPath = join2(projectRoot, "src/hooks.client.ts");