@nextlytics/core 0.4.1 → 0.4.2

package/dist/api-handler.d.ts

@@ -1,12 +1,14 @@
 import { NextRequest } from 'next/server';
-import { NextlyticsEvent, RequestContext, PageViewDelivery, DispatchResult, UserContext } from './types.js';
+import { RequestContext, JavascriptTemplate, NextlyticsEvent, PageViewDelivery, DispatchResult, UserContext } from './types.js';
 import { NextlyticsConfigWithDefaults } from './config-helpers.js';
 import 'next/dist/server/web/spec-extension/cookies';
 
 type DispatchEvent = (event: NextlyticsEvent, ctx: RequestContext, policyFilter?: PageViewDelivery | "client-actions") => DispatchResult;
 type UpdateEvent = (eventId: string, patch: Partial<NextlyticsEvent>, ctx: RequestContext) => Promise<void>;
+/** Collect the client-side templates from the configured backends. */
+type CollectTemplates = (ctx: RequestContext) => Record<string, JavascriptTemplate>;
 declare function getUserContext(config: NextlyticsConfigWithDefaults, ctx: RequestContext): Promise<UserContext | undefined>;
 declare function getEventProps(config: NextlyticsConfigWithDefaults, ctx: RequestContext, userContext?: UserContext): Promise<Record<string, unknown> | undefined>;
-declare function handleEventPost(request: NextRequest, config: NextlyticsConfigWithDefaults, dispatchEvent: DispatchEvent, updateEvent: UpdateEvent): Promise<Response>;
+declare function handleEventPost(request: NextRequest, config: NextlyticsConfigWithDefaults, dispatchEvent: DispatchEvent, updateEvent: UpdateEvent, collectTemplates: CollectTemplates): Promise<Response>;
 
-export { type DispatchEvent, type UpdateEvent, getEventProps, getUserContext, handleEventPost };
+export { type CollectTemplates, type DispatchEvent, type UpdateEvent, getEventProps, getUserContext, handleEventPost };

package/dist/api-handler.js

@@ -27,6 +27,14 @@ var import_server = require("next/server");
 var import_server_component_context = require("./server-component-context");
 var import_uitils = require("./uitils");
 var import_anonymous_user = require("./anonymous-user");
+function newTemplatesFor(hctx) {
+  const all = hctx.collectTemplates(hctx.ctx);
+  const missing = {};
+  for (const [id, template] of Object.entries(all)) {
+    if (!hctx.knownTemplateIds.has(id)) missing[id] = template;
+  }
+  return Object.keys(missing).length > 0 ? missing : void 0;
+}
 function createRequestContext(request) {
   return {
     headers: request.headers,
@@ -110,13 +118,14 @@ async function handleClientInit(request, hctx) {
     (0, import_server.after)(() => completion2);
     return Response.json({
       ok: true,
-      items: filterScripts(actions)
+      items: filterScripts(actions),
+      templates: newTemplatesFor(hctx)
     });
   }
   const { completion } = dispatchEvent(event, ctx, "client-actions");
   (0, import_server.after)(() => completion);
   (0, import_server.after)(() => updateEvent(pageRenderId, { clientContext, userContext, anonymousUserId }, ctx));
-  return Response.json({ ok: true });
+  return Response.json({ ok: true, templates: newTemplatesFor(hctx) });
 }
 async function handleClientEvent(request, hctx) {
   const { pageRenderId, ctx, apiCallServerContext, userContext, config, dispatchEvent } = hctx;
@@ -144,9 +153,13 @@ async function handleClientEvent(request, hctx) {
   const { clientActions, completion } = dispatchEvent(event, ctx);
   const actions = await clientActions;
   (0, import_server.after)(() => completion);
-  return Response.json({ ok: true, items: filterScripts(actions) });
+  return Response.json({
+    ok: true,
+    items: filterScripts(actions),
+    templates: newTemplatesFor(hctx)
+  });
 }
-async function handleEventPost(request, config, dispatchEvent, updateEvent) {
+async function handleEventPost(request, config, dispatchEvent, updateEvent, collectTemplates) {
   const softNavHeader = request.headers.get(import_server_component_context.headerNames.isSoftNavigation);
   const isSoftNavigation = softNavHeader === "1";
   const pageRenderIdHeader = request.headers.get(import_server_component_context.headerNames.pageRenderId);
@@ -162,6 +175,10 @@ async function handleEventPost(request, config, dispatchEvent, updateEvent) {
   const ctx = createRequestContext(request);
   const apiCallServerContext = (0, import_uitils.createServerContext)(request);
   const userContext = await getUserContext(config, ctx);
+  const knownTemplatesHeader = request.headers.get(import_server_component_context.headerNames.knownTemplates);
+  const knownTemplateIds = new Set(
+    knownTemplatesHeader ? knownTemplatesHeader.split(",").map((id) => id.trim()).filter(Boolean) : []
+  );
   const cookiePageRenderId = request.cookies.get(import_server_component_context.LAST_PAGE_RENDER_ID_COOKIE)?.value;
   const pageRenderId = isSoftNavigation ? cookiePageRenderId ?? (0, import_uitils.generateId)() : pageRenderIdHeader;
   if (isSoftNavigation && !cookiePageRenderId && config.debug) {
@@ -177,7 +194,9 @@ async function handleEventPost(request, config, dispatchEvent, updateEvent) {
     userContext,
     config,
     dispatchEvent,
-    updateEvent
+    updateEvent,
+    collectTemplates,
+    knownTemplateIds
   };
   const bodyType = body.type;
   switch (bodyType) {

package/dist/client.js

@@ -153,7 +153,11 @@ function NextlyticsScripts({
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: compiled.map(({ key, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_client_utils.InjectScript, { ...props }, key)) });
 }
-async function sendEventToServer(requestId, request, { signal, isSoftNavigation } = {}) {
+async function sendEventToServer(requestId, request, {
+  signal,
+  isSoftNavigation,
+  knownTemplateIds
+} = {}) {
   try {
     const headers = {
       "Content-Type": "application/json",
@@ -162,6 +166,9 @@ async function sendEventToServer(requestId, request, { signal, isSoftNavigation
     if (isSoftNavigation) {
       headers[import_server_component_context.headerNames.isSoftNavigation] = "1";
     }
+    if (knownTemplateIds?.length) {
+      headers[import_server_component_context.headerNames.knownTemplates] = knownTemplateIds.join(",");
+    }
     const response = await fetch("/api/event", {
       method: "POST",
       headers,
@@ -175,7 +182,7 @@ async function sendEventToServer(requestId, request, { signal, isSoftNavigation
       return { ok: false };
     }
     const data = await response.json().catch(() => ({ ok: response.ok }));
-    return { ok: data.ok ?? response.ok, items: data.items };
+    return { ok: data.ok ?? response.ok, items: data.items, templates: data.templates };
   } catch (error) {
     if (error instanceof Error && error.name === "AbortError") {
       return { ok: false };
@@ -185,9 +192,28 @@ async function sendEventToServer(requestId, request, { signal, isSoftNavigation
   }
 }
 function NextlyticsClient(props) {
-  const { requestId, scripts: initialScripts = [], templates = {} } = props.ctx;
+  const { requestId, scripts: initialScripts = [] } = props.ctx;
   const scriptsRef = (0, import_react.useRef)([]);
   const subscribersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const [templates, setTemplates] = (0, import_react.useState)(
+    () => props.ctx.templates ?? {}
+  );
+  const mergeTemplates = (0, import_react.useCallback)((incoming) => {
+    if (!incoming) return;
+    const keys = Object.keys(incoming);
+    if (keys.length === 0) return;
+    setTemplates((prev) => {
+      const hasNew = keys.some((k) => prev[k] !== incoming[k]);
+      return hasNew ? { ...prev, ...incoming } : prev;
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    mergeTemplates(props.ctx.templates);
+  }, [props.ctx.templates, mergeTemplates]);
+  const knownTemplateIdsRef = (0, import_react.useRef)(Object.keys(props.ctx.templates ?? {}));
+  (0, import_react.useEffect)(() => {
+    knownTemplateIdsRef.current = Object.keys(templates);
+  }, [templates]);
   const addScripts = (0, import_react.useCallback)((newScripts) => {
     (0, import_client_utils.debug)("Adding scripts", {
       newCount: newScripts.length,
@@ -197,8 +223,16 @@ function NextlyticsClient(props) {
     subscribersRef.current.forEach((cb) => cb());
   }, []);
   const contextValue = (0, import_react.useMemo)(
-    () => ({ requestId, templates, addScripts, scriptsRef, subscribersRef }),
-    [requestId, templates, addScripts]
+    () => ({
+      requestId,
+      templates,
+      addScripts,
+      scriptsRef,
+      subscribersRef,
+      mergeTemplates,
+      knownTemplateIdsRef
+    }),
+    [requestId, templates, addScripts, mergeTemplates]
   );
   (0, import_client_utils.useNavigation)(requestId, ({ softNavigation, signal }) => {
     (0, import_client_utils.debug)("Sending page-view", { requestId, softNavigation });
@@ -206,9 +240,10 @@ function NextlyticsClient(props) {
     sendEventToServer(
       requestId,
       { type: "page-view", clientContext, softNavigation: softNavigation || void 0 },
-      { signal, isSoftNavigation: softNavigation }
-    ).then(({ items }) => {
+      { signal, isSoftNavigation: softNavigation, knownTemplateIds: knownTemplateIdsRef.current }
+    ).then(({ items, templates: responseTemplates }) => {
       (0, import_client_utils.debug)("page-view response", { scriptsCount: items?.length ?? 0 });
+      mergeTemplates(responseTemplates);
       if (items?.length) addScripts(items);
     });
   });
@@ -224,22 +259,27 @@ function useNextlytics() {
       "[Nextlytics] useNextlytics() must be used within a component wrapped by <NextlyticsServer>. Add <NextlyticsServer> at the top of your layout.tsx file."
     );
   }
-  const { requestId, addScripts } = context;
+  const { requestId, addScripts, mergeTemplates, knownTemplateIdsRef } = context;
   const sendEvent = (0, import_react.useCallback)(
     async (eventName, opts) => {
-      const result = await sendEventToServer(requestId, {
-        type: "custom-event",
-        name: eventName,
-        props: opts?.props,
-        collectedAt: (/* @__PURE__ */ new Date()).toISOString(),
-        clientContext: createClientContext()
-      });
+      const result = await sendEventToServer(
+        requestId,
+        {
+          type: "custom-event",
+          name: eventName,
+          props: opts?.props,
+          collectedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          clientContext: createClientContext()
+        },
+        { knownTemplateIds: knownTemplateIdsRef.current }
+      );
+      mergeTemplates(result.templates);
       if (result.items && result.items.length > 0) {
         addScripts(result.items);
       }
       return { ok: result.ok };
     },
-    [requestId, addScripts]
+    [requestId, addScripts, mergeTemplates, knownTemplateIdsRef]
   );
   return { sendEvent };
 }

package/dist/middleware.d.ts

@@ -1,9 +1,9 @@
 import { NextMiddleware } from 'next/server';
 import { NextlyticsConfigWithDefaults } from './config-helpers.js';
-import { DispatchEvent, UpdateEvent } from './api-handler.js';
+import { DispatchEvent, UpdateEvent, CollectTemplates } from './api-handler.js';
 import './types.js';
 import 'next/dist/server/web/spec-extension/cookies';
 
-declare function createNextlyticsMiddleware(config: NextlyticsConfigWithDefaults, dispatchEvent: DispatchEvent, updateEvent: UpdateEvent): NextMiddleware;
+declare function createNextlyticsMiddleware(config: NextlyticsConfigWithDefaults, dispatchEvent: DispatchEvent, updateEvent: UpdateEvent, collectTemplates: CollectTemplates): NextMiddleware;
 
 export { createNextlyticsMiddleware };

package/dist/middleware.js

@@ -33,7 +33,7 @@ function createRequestContext(request) {
     path: request.nextUrl.pathname
   };
 }
-function createNextlyticsMiddleware(config, dispatchEvent, updateEvent) {
+function createNextlyticsMiddleware(config, dispatchEvent, updateEvent, collectTemplates) {
   const { eventEndpoint } = config;
   return async (request) => {
     const pathname = request.nextUrl.pathname;
@@ -67,7 +67,7 @@ function createNextlyticsMiddleware(config, dispatchEvent, updateEvent) {
     }
     if (pathname === eventEndpoint) {
       if (request.method === "POST") {
-        return (0, import_api_handler.handleEventPost)(request, config, dispatchEvent, updateEvent);
+        return (0, import_api_handler.handleEventPost)(request, config, dispatchEvent, updateEvent, collectTemplates);
       }
       return Response.json({ error: "Method not allowed" }, { status: 405 });
     }

package/dist/pages-router.d.ts

@@ -6,7 +6,7 @@ import 'next/dist/server/web/spec-extension/cookies';
 import 'next/server';
 
 type PagesRouterContext = {
-    req: {
+    req?: {
         headers: Record<string, string | string[] | undefined>;
         cookies?: Record<string, string>;
     };
@@ -14,6 +14,11 @@ type PagesRouterContext = {
 /**
  * Get Nextlytics props for Pages Router _app.tsx.
  * Reads context from headers set by middleware.
+ *
+ * `_app`'s getInitialProps re-runs on every client-side navigation, where there
+ * is no `req`. Return an empty context in that case rather than throwing — the
+ * client already has its scripts and templates from the initial render and the
+ * /api/event round-trip.
  */
 declare function getNextlyticsProps(ctx: PagesRouterContext): NextlyticsContext;
 

package/dist/pages-router.js

@@ -23,8 +23,12 @@ __export(pages_router_exports, {
 module.exports = __toCommonJS(pages_router_exports);
 var import_server_component_context = require("./server-component-context");
 function getNextlyticsProps(ctx) {
+  const reqHeaders = ctx?.req?.headers;
+  if (!reqHeaders) {
+    return { requestId: "" };
+  }
   const headersList = new Headers();
-  for (const [key, value] of Object.entries(ctx.req.headers)) {
+  for (const [key, value] of Object.entries(reqHeaders)) {
     if (value) {
       headersList.set(key, Array.isArray(value) ? value[0] : value);
     }

package/dist/server-component-context.d.ts

@@ -9,6 +9,9 @@ declare const headerNames: {
     readonly isSoftNavigation: "x-nl-is-soft-nav";
     readonly active: "x-nl-active";
     readonly scripts: "x-nl-scripts";
+    /** Comma-separated template ids the client already holds, so the server only
+     * returns the ones it's missing (see api-handler / client templates merge). */
+    readonly knownTemplates: "x-nl-known-templates";
 };
 declare const LAST_PAGE_RENDER_ID_COOKIE = "last-page-render-id";
 /** Context passed from middleware to server components via headers */

package/dist/server-component-context.js

@@ -31,7 +31,10 @@ const headerNames = {
   pageRenderId: `${HEADER_PREFIX}page-render-id`,
   isSoftNavigation: `${HEADER_PREFIX}is-soft-nav`,
   active: `${HEADER_PREFIX}active`,
-  scripts: `${HEADER_PREFIX}scripts`
+  scripts: `${HEADER_PREFIX}scripts`,
+  /** Comma-separated template ids the client already holds, so the server only
+   * returns the ones it's missing (see api-handler / client templates merge). */
+  knownTemplates: `${HEADER_PREFIX}known-templates`
 };
 const LAST_PAGE_RENDER_ID_COOKIE = "last-page-render-id";
 function serializeServerComponentContext(response, ctx) {

package/dist/server.js

@@ -174,13 +174,20 @@ function Nextlytics(userConfig) {
     const ctx = await createRequestContext();
     return updateEventInternal(eventId, patch, ctx);
   };
-  const middleware = (0, import_middleware.createNextlyticsMiddleware)(config, dispatchEventInternal, updateEventInternal);
+  const middleware = (0, import_middleware.createNextlyticsMiddleware)(
+    config,
+    dispatchEventInternal,
+    updateEventInternal,
+    (ctx) => collectTemplates(config, ctx)
+  );
   async function Server({ children }) {
     const headersList = await (0, import_headers.headers)();
     const ctx = (0, import_server_component_context.restoreServerComponentContext)(headersList);
     if (!ctx) {
       if (!headersList.get(import_server_component_context.headerNames.active)) {
-        console.warn("[Nextlytics] nextlyticsMiddleware should be added in order for Server to work");
+        console.warn(
+          "[Nextlytics] nextlyticsMiddleware should be added in order for Server to work"
+        );
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
     }

package/dist/types.d.ts

@@ -266,6 +266,9 @@ type ClientRequest = {
 type ClientRequestResult = {
     ok: boolean;
     items?: ClientActionItem[];
+    /** Client-side templates from the backends, so Pages Router clients (which
+     * can't read them from config) can compile the script insertions. */
+    templates?: Record<string, JavascriptTemplate>;
 };
 /** Return value from Nextlytics() */
 type NextlyticsResult = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlytics/core",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Analytics library for Next.js",
   "license": "MIT",
   "repository": {