@appright/funnelshift 0.0.0-stage → 0.15.0

package/dist/pixel.js

@@ -0,0 +1,173 @@
+const PIXEL = /^[0-9]{5,20}$/;
+const STEP = /^[a-z0-9_-]{1,64}$/;
+const FBCLID = /^[A-Za-z0-9_.\-]{1,400}$/;
+const COOKIE_AGE = 90 * 24 * 3600;
+const SRC = 'https://connect.facebook.net/en_US/fbevents.js';
+// The bootstrap's meta_pixel, when it has the right shape.
+export function readPixel(v) {
+    if (!v || typeof v !== 'object' || Array.isArray(v))
+        return null;
+    const { id, lead_step, checkout_step } = v;
+    if (typeof id !== 'string' || !PIXEL.test(id))
+        return null;
+    return { id, ...(typeof lead_step === 'string' && STEP.test(lead_step) ? { lead_step } : {}),
+        ...(typeof checkout_step === 'string' && STEP.test(checkout_step) ? { checkout_step } : {}) };
+}
+export function readCookie(doc, name) {
+    let jar = '';
+    try {
+        jar = doc.cookie;
+    }
+    catch {
+        return '';
+    }
+    const m = new RegExp(`(?:^|;\\s*)${name}=([^;]*)`).exec(jar);
+    if (!m)
+        return '';
+    try {
+        return decodeURIComponent(m[1]);
+    }
+    catch {
+        return m[1];
+    }
+}
+// Sets the cookie on the highest domain of the page that takes it (as the pixel does: example.com for www.example.com), and gives the
+// subdomain index Meta writes into the value (1 for example.com). An address or localhost: the host itself, index 0.
+export function setTopCookie(doc, loc, name, make) {
+    const host = loc.hostname;
+    const secure = loc.protocol === 'https:' ? '; Secure' : '';
+    const parts = host.split('.');
+    const ipOrLocal = !host.includes('.') || /^[0-9.]+$/.test(host) || host.includes(':');
+    const tries = ipOrLocal ? [['', 0]] : parts.slice(0, -1).map((_, i) => [parts.slice(-(i + 2)).join('.'), i + 1]);
+    for (const [domain, index] of tries) {
+        const v = make(index);
+        try {
+            doc.cookie = `${name}=${encodeURIComponent(v)}; Max-Age=${COOKIE_AGE}; Path=/${domain ? '; Domain=.' + domain : ''}; SameSite=Lax${secure}`;
+        }
+        catch {
+            return '';
+        }
+        if (readCookie(doc, name) === v)
+            return v;
+    }
+    return '';
+}
+const rand10 = () => String(Math.floor(1e9 + Math.random() * 9e9));
+// _fbp: the browser id of Meta; made when missing.
+export function ensureFbp(doc, loc, now) {
+    return readCookie(doc, '_fbp') || setTopCookie(doc, loc, '_fbp', i => `fb.${i}.${now}.${rand10()}`);
+}
+// _fbc: the click id of Meta from the link (fbclid); a new fbclid replaces the old one, a visit without one keeps it.
+export function ensureFbc(doc, loc, now) {
+    let id = '';
+    try {
+        id = new URLSearchParams(loc.search).get('fbclid') ?? '';
+    }
+    catch { /* no search */ }
+    const had = readCookie(doc, '_fbc');
+    if (!id || !FBCLID.test(id) || had.endsWith('.' + id))
+        return had;
+    return setTopCookie(doc, loc, '_fbc', i => `fb.${i}.${now}.${id}`) || `fb.1.${now}.${id}`;
+}
+function loadFbq(win, doc) {
+    const w = win;
+    if (w.fbq)
+        return w.fbq;
+    const n = function (...args) { if (n.callMethod)
+        n.callMethod(...args);
+    else
+        n.queue.push(args); };
+    w.fbq = n;
+    if (!w._fbq)
+        w._fbq = n;
+    n.push = n;
+    n.loaded = true;
+    n.version = '2.0';
+    n.queue = [];
+    n.disablePushState = true;
+    try {
+        const t = doc.createElement('script');
+        t.async = true;
+        t.src = SRC;
+        const s = doc.getElementsByTagName('script')[0];
+        if (s?.parentNode)
+            s.parentNode.insertBefore(t, s);
+        else
+            doc.head.appendChild(t);
+    }
+    catch { /* a page without a DOM to add to: the queue waits */ }
+    return n;
+}
+function once(key, session) {
+    try {
+        if (sessionStorage.getItem(key) === session)
+            return false;
+        sessionStorage.setItem(key, session);
+    }
+    catch { /* storage blocked: memory */
+        if (mem.get(key) === session)
+            return false;
+        mem.set(key, session);
+    }
+    return true;
+}
+const mem = new Map();
+// The Meta cookies, before the landing is read (mount): the server gets them with every event as the landing params fbp and fbc.
+export function metaCookies(doc = document, loc = location, now = Date.now()) {
+    ensureFbp(doc, loc, now);
+    ensureFbc(doc, loc, now);
+}
+export function installPixel(cfg, d) {
+    const win = d.win ?? window, doc = d.doc ?? document;
+    void d.now;
+    // The router put the base pixel into the page (init and PageView done); a page without it (a router before it) loads it here.
+    const had = !!win.fbq;
+    const fbq = loadFbq(win, doc);
+    if (!had) {
+        fbq('set', 'autoConfig', false, cfg.id);
+        fbq('init', cfg.id, { external_id: d.visitorId });
+        fbq('track', 'PageView');
+    }
+    const paywall = new Set(d.steps.filter(s => s.role === 'paywall').map(s => s.id));
+    const fire = (name) => {
+        const session = d.session();
+        if (d.stopped() || !session || !once(`af_fb:${d.funnel}:${name}`, session))
+            return;
+        fbq('track', name, {}, { eventID: `${name.toLowerCase()}.${session}` });
+    };
+    return {
+        after(name, stepId) {
+            const lead = cfg.lead_step ? name === '$step_complete' && stepId === cfg.lead_step : name === '$lead';
+            if (lead)
+                fire('Lead');
+            const checkout = name === '$step_view' && (cfg.checkout_step ? stepId === cfg.checkout_step : paywall.has(stepId));
+            if (checkout)
+                fire('InitiateCheckout');
+        },
+        purchased(p) {
+            const session = d.session();
+            if (d.stopped() || !session || typeof p?.value !== 'number' || !Number.isFinite(p.value) || p.value < 0 || !/^[A-Za-z]{3}$/.test(p?.currency ?? ''))
+                return;
+            const currency = p.currency.toUpperCase();
+            const names = p.trial ? ['StartTrial'] : p.subscription === false ? ['Purchase'] : ['Subscribe', 'Purchase'];
+            for (const n of names) {
+                if (!once(`af_fb:${d.funnel}:${n}`, session))
+                    continue;
+                fbq('track', n, { value: p.trial ? 0 : p.value, currency }, { eventID: `${n.toLowerCase()}.${session}` });
+            }
+        },
+    };
+}
+let active = null;
+export function setPixel(p) { active = p; }
+// stopTracking(): Meta gets nothing more from this page (the router's pixel was loaded before the stop).
+export function revokePixel(win = window) {
+    try {
+        win.fbq?.('consent', 'revoke');
+    }
+    catch { /* no pixel */ }
+}
+// purchased({ value, currency, trial?, subscription? }): call it once the payment went through in the browser (after Stripe's
+// confirm). The pixel gets the conversion with the event_id the server gives the same money from the webhook, so Meta counts it
+// once; the money itself is still counted only from the webhook. Without Meta switched on for the project it does nothing.
+export function purchased(p) { active?.purchased(p); }

package/dist/prerender.d.ts

@@ -0,0 +1,2 @@
+import { type FunnelDef } from './funnel.js';
+export declare function renderLanding(funnel: FunnelDef): string;

package/dist/prerender.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Prerender of the landing step (kit 0.11.0, `funnel-kit build` with `prerender: true` in defineFunnel): the first step draws
+// into index.html with react-dom/server, so the first screen is there without JavaScript, and mount() hydrates it.
+import { renderToString } from 'react-dom/server';
+import { FunnelCtx, landingContext } from './funnel.js';
+import { setContent } from './content.js';
+// The HTML of the funnel's first step as an anonymous first visit sees it, with every t() text at its default (the build has no
+// bootstrap; a text edited in the admin or an A/B text arm shows after hydration). The first step is the landing.
+export function renderLanding(funnel) {
+    const step = funnel.steps[0];
+    if (!step)
+        throw new Error('the funnel has no steps');
+    setContent({}, {});
+    const C = step.component;
+    return renderToString(_jsx(FunnelCtx.Provider, { value: landingContext(funnel), children: _jsx(C, {}) }));
+}

package/dist/server.d.ts

@@ -0,0 +1,12 @@
+export declare const visit: {
+    step: string;
+    session: () => string;
+    off: () => boolean;
+};
+export declare class ServerFnError extends Error {
+    readonly status: number;
+    readonly code: string;
+    readonly body: unknown;
+    constructor(status: number, code: string, body?: unknown);
+}
+export declare function server<T = unknown>(name: string, payload?: unknown): Promise<T>;

package/dist/server.js

@@ -0,0 +1,88 @@
+import { readBootstrap } from './bootstrap.js';
+// The router's own check (spec §2); repeated here so a typo fails before a request instead of as a 404 from the edge.
+const NAME = /^[a-z][a-z0-9_]{0,63}$/;
+// The shapes the router accepts for X-Step and X-Session (spec "all events" §2.3); anything else is not sent.
+const STEP = /^[a-z0-9_-]{1,64}$/;
+const SESSION = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+// The visit a call belongs to: the step on screen (the funnel sets it while it renders the step) and the tracker's session
+// (mount() sets it). server() sends both, so the router's $fn_call and the function's ctx.track events join the person's
+// journey. Neither is a secret. Outside a mounted funnel, and in a thumbnail, both stay empty and nothing is sent.
+// off: stopTracking() was called; then neither is sent, so the router records no $fn_call for this visit.
+export const visit = { step: '', session: () => '', off: () => false };
+function visitHeaders() {
+    const out = {};
+    let off = false;
+    try {
+        off = visit.off();
+    }
+    catch {
+        off = true;
+    }
+    if (off)
+        return out;
+    if (STEP.test(visit.step))
+        out['X-Step'] = visit.step;
+    let session = '';
+    try {
+        session = visit.session();
+    }
+    catch { /* storage blocked: the call goes without it */ }
+    if (SESSION.test(session))
+        out['X-Session'] = session;
+    return out;
+}
+// status 0 means the request never got an HTTP answer: 'bad_name' (not sent) or 'network' (fetch itself failed).
+export class ServerFnError extends Error {
+    status;
+    code;
+    body;
+    constructor(status, code, body = null) {
+        super(`server function failed: ${code}${status ? ` (${status})` : ''}`);
+        this.name = 'ServerFnError';
+        this.status = status;
+        this.code = code;
+        this.body = body;
+    }
+}
+// Calls functions/index.ts of the project through the router: same origin, so the funnel's HttpOnly cookies (Path=/<project>/, or
+// Path=/ on an own domain, whose bootstrap gives fn_base "/_fn/") go along and no CORS is involved. The bootstrap is read per call: the router injects it before the bundle runs, and tests
+// swap it between calls.
+export async function server(name, payload) {
+    if (!NAME.test(name))
+        throw new ServerFnError(0, 'bad_name');
+    const boot = readBootstrap();
+    const headers = { 'Content-Type': 'application/json', 'X-Funnel': boot.funnel, ...visitHeaders() };
+    // Only a preview page has it; the router then runs the previewed build's functions instead of the published route's.
+    if (boot.fn_preview)
+        headers['X-Funnel-Preview'] = boot.fn_preview;
+    if (boot.fn_preview && boot.fn_arm)
+        headers['X-Funnel-Arm'] = boot.fn_arm;
+    let r, text;
+    try {
+        r = await fetch(`${boot.fn_base ?? `/${boot.project}/_fn/`}${name}`, { method: 'POST', credentials: 'same-origin', headers, body: JSON.stringify(payload ?? {}) });
+        text = await r.text();
+    }
+    catch {
+        throw new ServerFnError(0, 'network');
+    }
+    let body = null;
+    let parsed = !text; // an empty body is a null result
+    if (text) {
+        try {
+            body = JSON.parse(text);
+            parsed = true;
+        }
+        catch {
+            body = text;
+        }
+    }
+    if (r.ok) {
+        // A 2xx is the router's JSON by contract (a function may return a plain string, which arrives JSON-quoted); a body that is
+        // not JSON at all (a proxy page, say) is not a result the caller can use.
+        if (!parsed)
+            throw new ServerFnError(r.status, 'bad_json', body);
+        return body;
+    }
+    const code = body?.error?.code;
+    throw new ServerFnError(r.status, typeof code === 'string' && code ? code : `http_${r.status}`, body);
+}

package/dist/sha256.d.ts

@@ -0,0 +1,2 @@
+export declare function sha256Hex(text: string): string;
+export declare function emailHash(email: string): string;

package/dist/sha256.js

@@ -0,0 +1,65 @@
+// SHA-256 of a string's UTF-8 bytes, as lower-case hex. Synchronous and dependency-free on purpose: identify() hashes an email
+// in the middle of a click handler, and crypto.subtle is async and missing outside secure contexts (a funnel opened over http in
+// development, some in-app browsers).
+const K = new Uint32Array([
+    0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5, 0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3,
+    0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174, 0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
+    0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967, 0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
+    0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85, 0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
+    0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3, 0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208,
+    0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
+]);
+export function sha256Hex(text) {
+    const msg = new TextEncoder().encode(text);
+    const len = msg.length;
+    const total = (((len + 8) >> 6) + 1) << 6;
+    const buf = new Uint8Array(total);
+    buf.set(msg);
+    buf[len] = 0x80;
+    const view = new DataView(buf.buffer);
+    view.setUint32(total - 8, Math.floor((len * 8) / 0x100000000));
+    view.setUint32(total - 4, (len * 8) >>> 0);
+    const h = new Uint32Array([0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19]);
+    const w = new Uint32Array(64);
+    const rotr = (x, n) => (x >>> n) | (x << (32 - n));
+    for (let off = 0; off < total; off += 64) {
+        for (let i = 0; i < 16; i++)
+            w[i] = view.getUint32(off + i * 4);
+        for (let i = 16; i < 64; i++) {
+            const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ (w[i - 15] >>> 3);
+            const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ (w[i - 2] >>> 10);
+            w[i] = (w[i - 16] + s0 + w[i - 7] + s1) | 0;
+        }
+        let [a, b, c, d, e, f, g, hh] = h;
+        for (let i = 0; i < 64; i++) {
+            const S1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
+            const ch = (e & f) ^ (~e & g);
+            const t1 = (hh + S1 + ch + K[i] + w[i]) | 0;
+            const S0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
+            const maj = (a & b) ^ (a & c) ^ (b & c);
+            const t2 = (S0 + maj) | 0;
+            hh = g;
+            g = f;
+            f = e;
+            e = (d + t1) | 0;
+            d = c;
+            c = b;
+            b = a;
+            a = (t1 + t2) | 0;
+        }
+        h[0] += a;
+        h[1] += b;
+        h[2] += c;
+        h[3] += d;
+        h[4] += e;
+        h[5] += f;
+        h[6] += g;
+        h[7] += hh;
+    }
+    return [...h].map(x => x.toString(16).padStart(8, '0')).join('');
+}
+// The hash identify() sends instead of an email: SHA-256 of the lower-cased, trimmed address. '' for something that is no address.
+export function emailHash(email) {
+    const e = String(email ?? '').trim().toLowerCase();
+    return /^[^@\s]+@[^@\s]+$/.test(e) ? sha256Hex(e) : '';
+}

package/dist/signals.d.ts

@@ -0,0 +1,18 @@
+export type SignalOptions = {
+    track: (name: string, props: Record<string, unknown>, stepId: string) => void;
+    stepId: () => string;
+    scroll: boolean;
+    sections: boolean;
+    fieldErrors: boolean;
+    activeTime: boolean;
+    now?: () => number;
+};
+export type StepSignals = {
+    newView: () => void;
+    activeMs: () => number | undefined;
+    off: () => void;
+};
+export declare function sectionName(raw: string | null): string;
+export declare function fieldKey(el: Element): string;
+export declare function errorCode(el: Element): string;
+export declare function installStepSignals(root: HTMLElement, o: SignalOptions): StepSignals;