Fix packaged Next client boundaries

README.md

@@ -11,7 +11,7 @@ Pin the immutable GitHub release and install the framework peers used by your ap
 ```json
 {
   "dependencies": {
-    "@hraness/posthog": "github:hraness/posthog#v0.1.1",
+    "@hraness/posthog": "github:hraness/posthog#v0.1.2",
     "next": "16.2.12",
     "react": "19.2.3"
   }

dist/client.js

@@ -481,7 +481,6 @@ function classifyAnalyticsTraffic(site, referrer, currentUrl) {
 }
 
 // src/client.ts
-"use client";
 var BUILT_IN_EVENTS = new Set(["$pageview", "$pageleave", "$web_vitals", "$exception"]);
 var DEFAULT_API_HOST = "https://us.i.posthog.com";
 var clientExceptionBudget = new ExceptionBudget({
@@ -713,4 +712,4 @@ export {
   capturePostHogEvent
 };
 
-//# debugId=28120A7D64B7EBF464756E2164756E21
+//# debugId=506097B8E608C77964756E2164756E21

dist/react.js

@@ -9,7 +9,6 @@ import {
   installDelegatedPostHogCapture,
   installPostHogExceptionCapture
 } from "./client.js";
-"use client";
 function initialize(props) {
   return initializePostHogBrowser({
     site: props.site,
@@ -58,4 +57,4 @@ export {
   PostHogAnalytics
 };
 
-//# debugId=D3B58E2F629890F264756E2164756E21
+//# debugId=CD53137435EEFC5D64756E2164756E21

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/posthog",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Privacy-preserving PostHog analytics primitives for modern web applications.",
   "license": "MIT",
   "type": "module",

portfolio-inventory.json

@@ -8,7 +8,7 @@
       "name": "@hraness/posthog",
       "path": ".",
       "visibility": "public",
-      "version": "0.1.1"
+      "version": "0.1.2"
     }
   ],
   "dependencies": [],

scripts/build.ts

@@ -1,5 +1,9 @@
 import { rm } from "node:fs/promises";
 
+// Bun can retain source directives after bundled imports. Emit this boundary
+// only as a banner so each published client entry has one valid prologue.
+const CLIENT_DIRECTIVE = '"use client";';
+
 type BuildGroup = Readonly<{
   entrypoints: readonly string[];
   target: "browser" | "node";
@@ -15,12 +19,12 @@ const groups: readonly BuildGroup[] = [
   {
     entrypoints: ["src/client.ts"],
     target: "browser",
-    banner: '"use client";',
+    banner: CLIENT_DIRECTIVE,
   },
   {
     entrypoints: ["src/react.tsx"],
     target: "browser",
-    banner: '"use client";',
+    banner: CLIENT_DIRECTIVE,
     external: ["./client*"],
   },
   {

scripts/check-bundle-boundaries.ts

@@ -11,6 +11,17 @@ const allowedImports = new Map<string, ReadonlySet<string>>([
 ]);
 
 const staticImport = /(?:from\s+|import\s*)["']([^"']+)["']/gu;
+const clientDirective = /(["'])use client\1\s*;/gu;
+
+function assertClientBoundary(entry: string, source: string): void {
+  if (!source.startsWith('"use client";\n')) {
+    throw new Error(`${entry} does not start with its Next.js client boundary`);
+  }
+  if ([...source.matchAll(clientDirective)].length !== 1) {
+    throw new Error(`${entry} must contain exactly one Next.js client boundary`);
+  }
+}
+
 for (const [entry, allowed] of allowedImports) {
   const source = await readFile(`dist/${entry}.js`, "utf8");
   const imports = [...source.matchAll(staticImport)].map((match) => match[1]);
@@ -33,9 +44,7 @@ for (const entry of browserEntries) {
 
 for (const entry of ["client", "react"]) {
   const source = await readFile(`dist/${entry}.js`, "utf8");
-  if (!source.startsWith('"use client";')) {
-    throw new Error(`${entry} does not preserve its Next.js client boundary`);
-  }
+  assertClientBoundary(entry, source);
 }
 
 const clientSource = await readFile("dist/client.js", "utf8");

scripts/package-smoke.ts

@@ -13,7 +13,7 @@ const specifiers = [
   `${packageName}/server`,
   `${packageName}/traffic`,
 ];
-const verifiedNextVersions = ["16.2.12", "16.3.0"] as const;
+const verifiedNextVersions = ["16.2.12", "16.3.1"] as const;
 const verificationPackages = [
   "@types/[email protected]",
   "@types/[email protected]",
@@ -34,6 +34,16 @@ const environment = {
   NEXT_TELEMETRY_DISABLED: "1",
   TMPDIR: temporary,
 };
+const clientDirective = /(["'])use client\1\s*;/gu;
+
+function assertClientBoundary(label: string, source: string): void {
+  if (!source.startsWith('"use client";\n')) {
+    throw new Error(`${label} does not start with its Next.js client boundary`);
+  }
+  if ([...source.matchAll(clientDirective)].length !== 1) {
+    throw new Error(`${label} must contain exactly one Next.js client boundary`);
+  }
+}
 
 async function run(
   command: string[],
@@ -94,6 +104,11 @@ try {
   await mkdir(temporary, { mode: 0o700 });
   const nodeExecutable = resolveGenuineNodeExecutable();
 
+  for (const entry of ["client", "react"]) {
+    const source = await Bun.file(join(repository, "dist", `${entry}.js`)).text();
+    assertClientBoundary(`dist/${entry}.js`, source);
+  }
+
   await run([
     process.execPath,
     "pm",
@@ -152,6 +167,10 @@ try {
     if (await Bun.file(join(installedRoot, "src", "client.test.ts")).exists()) {
       throw new Error("installed package must not contain source tests");
     }
+    for (const entry of ["client", "react"]) {
+      const source = await Bun.file(join(installedRoot, "dist", `${entry}.js`)).text();
+      assertClientBoundary(`packed dist/${entry}.js for Next ${nextVersion}`, source);
+    }
 
     await writeFile(join(consumer, "runtime-smoke.mjs"), `
 import { readFile } from "node:fs/promises";
@@ -253,14 +272,41 @@ if (!reactSource.includes('from "./client.js"') || reactSource.includes("activeS
         "",
       ].join("\n"),
     );
-    await writeFile(
-      join(consumer, "app", "layout.js"),
-      "export default function Layout({ children }) { return <html><body>{children}</body></html>; }\n",
-    );
-    await writeFile(
-      join(consumer, "app", "page.js"),
-      "export default function Page() { return <main>PostHog package smoke</main>; }\n",
-    );
+    await writeFile(join(consumer, "app", "analytics.js"), [
+      '"use client";',
+      "",
+      'import { isPostHogBrowserEligible } from "@hraness/posthog/client";',
+      'import { PostHogAnalytics } from "@hraness/posthog/react";',
+      "",
+      "const site = {",
+      '  id: "package-smoke",',
+      '  canonicalDomain: "example.com",',
+      '  allowedHosts: ["example.com"],',
+      "  schemaVersion: 1,",
+      '  routes: [{ match: "exact", path: "/", pageKind: "home" }],',
+      "  customEvents: [],",
+      "};",
+      "",
+      "export function Analytics() {",
+      '  void isPostHogBrowserEligible({ site, apiKey: "phc_public" });',
+      '  return <PostHogAnalytics site={site} apiKey="phc_public" />;',
+      "}",
+      "",
+    ].join("\n"));
+    await writeFile(join(consumer, "app", "layout.js"), [
+      "export default function Layout({ children }) {",
+      "  return <html><body>{children}</body></html>;",
+      "}",
+      "",
+    ].join("\n"));
+    await writeFile(join(consumer, "app", "page.js"), [
+      'import { Analytics } from "./analytics";',
+      "",
+      "export default function Page() {",
+      "  return <main><Analytics />PostHog package smoke</main>;",
+      "}",
+      "",
+    ].join("\n"));
     await run([
       nodeExecutable,
       join(consumer, "node_modules", "next", "dist", "bin", "next"),

src/client.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { posthog } from "posthog-js";
 import type { CaptureResult, PostHogConfig } from "posthog-js";
 

src/react.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 
 import {