@coframe/sdk 1.1.0

package/dist/pkg/react.cjs.js

@@ -0,0 +1,89 @@
+'use client';
+'use strict';
+
+var sdk = require('@coframe/sdk');
+var React = require('react');
+
+const CoframeContext = React.createContext({ treatments: null });
+function CoframeProvider({ projectConfig, projectData, onTreatmentApplied: onTreatmentAppliedProp, onTreatmentAppliedBulk: onTreatmentAppliedBulkProp, onTreatmentAppliedBulkV2, onLog: onLogProp, children, }) {
+    const [treatments, setTreatments] = React.useState(null);
+    React.useEffect(() => {
+        var _a, _b;
+        sdk.onTreatmentApplied({
+            callback: onTreatmentAppliedProp,
+            bulkCallback: (data) => {
+                setTreatments(data);
+                onTreatmentAppliedBulkProp === null || onTreatmentAppliedBulkProp === void 0 ? void 0 : onTreatmentAppliedBulkProp(data);
+            },
+            bulkCallbackV2: onTreatmentAppliedBulkV2,
+        });
+        if (onLogProp) {
+            sdk.onLog(onLogProp);
+        }
+        sdk.init({
+            config: {
+                ...projectConfig,
+                startTime: (_a = projectConfig.startTime) !== null && _a !== void 0 ? _a : Date.now(),
+                currentUrl: (_b = projectConfig.currentUrl) !== null && _b !== void 0 ? _b : window.location.href,
+            },
+            ...(projectData ? { projectData } : {}),
+        })
+            .catch((e) => {
+            console.error('[Coframe] Error initializing SDK', e);
+        })
+            .finally(() => {
+            var _a;
+            const cached = typeof window !== 'undefined' ? (_a = window.Coframe) === null || _a === void 0 ? void 0 : _a.treatmentsData : null;
+            setTreatments((curr) => { var _a; return (_a = curr !== null && curr !== void 0 ? curr : cached) !== null && _a !== void 0 ? _a : []; });
+        });
+    }, []);
+    return React.createElement(CoframeContext.Provider, { value: { treatments } }, children);
+}
+function useCoframeTreatments() {
+    return React.useContext(CoframeContext).treatments;
+}
+function useCoframeTreatment(experimentId) {
+    const treatments = useCoframeTreatments();
+    return treatments === null || treatments === void 0 ? void 0 : treatments.find((t) => t.experimentId === experimentId);
+}
+function useCoframeVariant(experimentId) {
+    var _a;
+    return (_a = useCoframeTreatment(experimentId)) === null || _a === void 0 ? void 0 : _a.variantId;
+}
+
+Object.defineProperty(exports, "init", {
+  enumerable: true,
+  get: function () { return sdk.init; }
+});
+Object.defineProperty(exports, "onLog", {
+  enumerable: true,
+  get: function () { return sdk.onLog; }
+});
+Object.defineProperty(exports, "onTreatmentApplied", {
+  enumerable: true,
+  get: function () { return sdk.onTreatmentApplied; }
+});
+Object.defineProperty(exports, "setConsent", {
+  enumerable: true,
+  get: function () { return sdk.setConsent; }
+});
+Object.defineProperty(exports, "setFeatureFlag", {
+  enumerable: true,
+  get: function () { return sdk.setFeatureFlag; }
+});
+Object.defineProperty(exports, "setPageHydrated", {
+  enumerable: true,
+  get: function () { return sdk.setPageHydrated; }
+});
+Object.defineProperty(exports, "setUserToken", {
+  enumerable: true,
+  get: function () { return sdk.setUserToken; }
+});
+Object.defineProperty(exports, "trackConversion", {
+  enumerable: true,
+  get: function () { return sdk.trackConversion; }
+});
+exports.CoframeProvider = CoframeProvider;
+exports.useCoframeTreatment = useCoframeTreatment;
+exports.useCoframeTreatments = useCoframeTreatments;
+exports.useCoframeVariant = useCoframeVariant;

package/dist/pkg/react.esm.mjs

@@ -0,0 +1,53 @@
+'use client';
+import { onTreatmentApplied, onLog, init } from '@coframe/sdk';
+export { init, onLog, onTreatmentApplied, setConsent, setFeatureFlag, setPageHydrated, setUserToken, trackConversion } from '@coframe/sdk';
+import React, { createContext, useState, useEffect, useContext } from 'react';
+
+const CoframeContext = createContext({ treatments: null });
+function CoframeProvider({ projectConfig, projectData, onTreatmentApplied: onTreatmentAppliedProp, onTreatmentAppliedBulk: onTreatmentAppliedBulkProp, onTreatmentAppliedBulkV2, onLog: onLogProp, children, }) {
+    const [treatments, setTreatments] = useState(null);
+    useEffect(() => {
+        var _a, _b;
+        onTreatmentApplied({
+            callback: onTreatmentAppliedProp,
+            bulkCallback: (data) => {
+                setTreatments(data);
+                onTreatmentAppliedBulkProp === null || onTreatmentAppliedBulkProp === void 0 ? void 0 : onTreatmentAppliedBulkProp(data);
+            },
+            bulkCallbackV2: onTreatmentAppliedBulkV2,
+        });
+        if (onLogProp) {
+            onLog(onLogProp);
+        }
+        init({
+            config: {
+                ...projectConfig,
+                startTime: (_a = projectConfig.startTime) !== null && _a !== void 0 ? _a : Date.now(),
+                currentUrl: (_b = projectConfig.currentUrl) !== null && _b !== void 0 ? _b : window.location.href,
+            },
+            ...(projectData ? { projectData } : {}),
+        })
+            .catch((e) => {
+            console.error('[Coframe] Error initializing SDK', e);
+        })
+            .finally(() => {
+            var _a;
+            const cached = typeof window !== 'undefined' ? (_a = window.Coframe) === null || _a === void 0 ? void 0 : _a.treatmentsData : null;
+            setTreatments((curr) => { var _a; return (_a = curr !== null && curr !== void 0 ? curr : cached) !== null && _a !== void 0 ? _a : []; });
+        });
+    }, []);
+    return React.createElement(CoframeContext.Provider, { value: { treatments } }, children);
+}
+function useCoframeTreatments() {
+    return useContext(CoframeContext).treatments;
+}
+function useCoframeTreatment(experimentId) {
+    const treatments = useCoframeTreatments();
+    return treatments === null || treatments === void 0 ? void 0 : treatments.find((t) => t.experimentId === experimentId);
+}
+function useCoframeVariant(experimentId) {
+    var _a;
+    return (_a = useCoframeTreatment(experimentId)) === null || _a === void 0 ? void 0 : _a.variantId;
+}
+
+export { CoframeProvider, useCoframeTreatment, useCoframeTreatments, useCoframeVariant };

package/dist/pkg/server.cjs.js

@@ -0,0 +1,96 @@
+'use strict';
+
+const MAX_USER_CONTEXT_JSON_BYTES = 4096;
+function userContextJsonByteLength(userContext) {
+    try {
+        return new TextEncoder().encode(JSON.stringify(userContext !== null && userContext !== void 0 ? userContext : null)).length;
+    }
+    catch (_a) {
+        return Number.POSITIVE_INFINITY;
+    }
+}
+function sanitizeUserContext(userContext) {
+    if (userContext === undefined ||
+        userContext === null ||
+        typeof userContext !== 'object' ||
+        Array.isArray(userContext)) {
+        return undefined;
+    }
+    if (userContextJsonByteLength(userContext) > MAX_USER_CONTEXT_JSON_BYTES) {
+        return undefined;
+    }
+    return userContext;
+}
+
+async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, headers) {
+    const payload = { projectId, currentUrl };
+    const safe = sanitizeUserContext(userContext);
+    if (safe) {
+        payload.userContext = safe;
+    }
+    const config = encodeURIComponent(JSON.stringify(payload));
+    const edgeUrl = new URL(`${"https://edge.cofra.me"}/api/v1/frames`);
+    edgeUrl.searchParams.set('config', config);
+    try {
+        const response = await fetch(edgeUrl, { headers, signal });
+        if (!response.ok)
+            return null;
+        return await response.json();
+    }
+    catch (error) {
+        if (error instanceof DOMException && error.name === 'AbortError') {
+            return null;
+        }
+        return null;
+    }
+}
+
+async function fetchAntiflickerFromEdge(projectId, currentUrl, userContext, headers) {
+    try {
+        const payload = { projectId, currentUrl };
+        if (userContext) {
+            payload.userContext = userContext;
+        }
+        const config = encodeURIComponent(JSON.stringify(payload));
+        const edgeUrl = new URL(`${"https://edge.cofra.me"}/cf.css`);
+        edgeUrl.searchParams.set('config', config);
+        const response = await fetch(edgeUrl, {
+            headers,
+        });
+        if (!response.ok)
+            return null;
+        return await response.text();
+    }
+    catch (_a) {
+        return null;
+    }
+}
+async function getProjectData(options) {
+    const includeProject = options.includeProject !== false;
+    const includeCSS = options.includeCSS !== false;
+    const [projectResult, antiflickerCSS] = await Promise.all([
+        includeProject
+            ? fetchProjectFromEdge(options.projectId, options.currentUrl, undefined, options.userContext, options.headers)
+            : Promise.resolve(null),
+        includeCSS
+            ? fetchAntiflickerFromEdge(options.projectId, options.currentUrl, options.userContext, options.headers)
+            : Promise.resolve(null),
+    ]);
+    const config = {};
+    if (projectResult) {
+        config.project = projectResult.project;
+        config.personalizationHeaders = projectResult.personalizationHeaders;
+    }
+    if (antiflickerCSS !== null) {
+        config.antiflickerCSS = antiflickerCSS;
+    }
+    if (Object.keys(config).length > 0) {
+        return config;
+    }
+    if (!includeProject && !includeCSS) {
+        return config;
+    }
+    return null;
+}
+
+exports.getProjectData = getProjectData;

package/dist/pkg/server.esm.mjs

@@ -0,0 +1,94 @@
+const MAX_USER_CONTEXT_JSON_BYTES = 4096;
+function userContextJsonByteLength(userContext) {
+    try {
+        return new TextEncoder().encode(JSON.stringify(userContext !== null && userContext !== void 0 ? userContext : null)).length;
+    }
+    catch (_a) {
+        return Number.POSITIVE_INFINITY;
+    }
+}
+function sanitizeUserContext(userContext) {
+    if (userContext === undefined ||
+        userContext === null ||
+        typeof userContext !== 'object' ||
+        Array.isArray(userContext)) {
+        return undefined;
+    }
+    if (userContextJsonByteLength(userContext) > MAX_USER_CONTEXT_JSON_BYTES) {
+        return undefined;
+    }
+    return userContext;
+}
+
+async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, headers) {
+    const payload = { projectId, currentUrl };
+    const safe = sanitizeUserContext(userContext);
+    if (safe) {
+        payload.userContext = safe;
+    }
+    const config = encodeURIComponent(JSON.stringify(payload));
+    const edgeUrl = new URL(`${"https://edge.cofra.me"}/api/v1/frames`);
+    edgeUrl.searchParams.set('config', config);
+    try {
+        const response = await fetch(edgeUrl, { headers, signal });
+        if (!response.ok)
+            return null;
+        return await response.json();
+    }
+    catch (error) {
+        if (error instanceof DOMException && error.name === 'AbortError') {
+            return null;
+        }
+        return null;
+    }
+}
+
+async function fetchAntiflickerFromEdge(projectId, currentUrl, userContext, headers) {
+    try {
+        const payload = { projectId, currentUrl };
+        if (userContext) {
+            payload.userContext = userContext;
+        }
+        const config = encodeURIComponent(JSON.stringify(payload));
+        const edgeUrl = new URL(`${"https://edge.cofra.me"}/cf.css`);
+        edgeUrl.searchParams.set('config', config);
+        const response = await fetch(edgeUrl, {
+            headers,
+        });
+        if (!response.ok)
+            return null;
+        return await response.text();
+    }
+    catch (_a) {
+        return null;
+    }
+}
+async function getProjectData(options) {
+    const includeProject = options.includeProject !== false;
+    const includeCSS = options.includeCSS !== false;
+    const [projectResult, antiflickerCSS] = await Promise.all([
+        includeProject
+            ? fetchProjectFromEdge(options.projectId, options.currentUrl, undefined, options.userContext, options.headers)
+            : Promise.resolve(null),
+        includeCSS
+            ? fetchAntiflickerFromEdge(options.projectId, options.currentUrl, options.userContext, options.headers)
+            : Promise.resolve(null),
+    ]);
+    const config = {};
+    if (projectResult) {
+        config.project = projectResult.project;
+        config.personalizationHeaders = projectResult.personalizationHeaders;
+    }
+    if (antiflickerCSS !== null) {
+        config.antiflickerCSS = antiflickerCSS;
+    }
+    if (Object.keys(config).length > 0) {
+        return config;
+    }
+    if (!includeProject && !includeCSS) {
+        return config;
+    }
+    return null;
+}
+
+export { getProjectData };

package/dist/pkg/types/index.d.ts

@@ -0,0 +1,308 @@
+interface UniversalSelector {
+    t: string;
+    fingerprint?: string;
+    id?: string;
+    dataTestId?: string;
+    n?: {
+        i: number;
+        t: number;
+    };
+    text?: string;
+    href?: string;
+    ariaLabel?: string;
+    p?: UniversalSelector;
+    descendants?: {
+        depth: number;
+        sel: UniversalSelector;
+    }[];
+    isShadowRoot?: boolean;
+}
+
+type ElementStyles = Record<string, string | undefined>;
+type ElementAttributes = {
+    src?: string;
+    innerHTML?: string;
+    styles?: ElementStyles;
+    onClick?: string;
+    textContent?: string;
+    role?: string;
+    disabled?: boolean;
+};
+type ProjectTag = {
+    js: string | null;
+};
+
+type Modification = ModificationUpdate | ModificationInsertInto | ModificationInsertBy | ModificationDelete | ModificationAddBanner | ModificationAddModal | ModificationExecuteJs;
+type Modifications = {
+    [elementId: string]: Array<Modification>;
+};
+type NewElementAttributes = ElementAttributes & {
+    tagName?: 'h1' | 'p' | 'div' | 'span' | 'button' | 'input' | 'img' | 'div';
+};
+type ModificationUpdate = {
+    type: 'update';
+    attributes: ElementAttributes;
+};
+type ModificationInsertInto = {
+    type: 'insert_into';
+    child_position: 'first' | 'last';
+    new_element: NewElementAttributes;
+};
+type ModificationInsertBy = {
+    type: 'insert_by';
+    position: 'before' | 'after';
+    new_element: NewElementAttributes;
+};
+type ModificationDelete = {
+    type: 'delete';
+};
+type ModificationAddModal = {
+    type: 'add_modal';
+    modal_content: NewElementAttributes;
+    trigger: ModalTrigger;
+};
+type ModificationAddBanner = {
+    type: 'add_banner';
+    banner_content: NewElementAttributes;
+};
+type ModificationExecuteJs = {
+    type: 'execute_js';
+    js: string;
+};
+type ModalTrigger = 'exit' | 'scroll' | 'enter' | 'timer';
+
+interface AnalyticsCallback {
+    callback: string;
+}
+interface TreatmentData {
+    impressionId: string;
+    userToken: string;
+    experimentId: string;
+    variantId: string;
+    inGlobalHoldout: boolean;
+    isBaseline: boolean;
+    holdoutExperimentId?: string;
+}
+interface TreatmentDataV2 {
+    coframe_experiment_id: string;
+    coframe_experiment_slug: string;
+    coframe_variant_id: string;
+    coframe_variant_slug: string;
+    coframe_user_token: string;
+    coframe_impression_id: string;
+    coframe_in_global_holdout: boolean;
+    coframe_in_exp_baseline: boolean;
+}
+declare const GLOBAL_HOLDOUT: "global_holdout";
+declare const EXPERIMENT_HOLDOUT: "experiment_holdout";
+declare const EXPERIMENT: "experiment";
+type ExperimentLevel = typeof GLOBAL_HOLDOUT | typeof EXPERIMENT_HOLDOUT | typeof EXPERIMENT;
+interface ExperimentInfo {
+    variant_id: string;
+    variant_slug: string;
+    experiment_id: string;
+    experiment_slug: string;
+    iteration_id: string;
+    level: ExperimentLevel;
+    final_state: boolean;
+    holdout_experiment_id?: string;
+    holdout_experiment_slug?: string;
+}
+interface Audience {
+    selector: ActivationCondition;
+}
+interface LaneMember {
+    experiment_id: string;
+    iteration_id: string;
+}
+interface LaneStatus {
+    seed: number;
+    members: LaneMember[];
+}
+interface HoldoutInfo {
+    holdout_experiment_id: string;
+    holdout_experiment_slug: string;
+    holdout_variant_id: string;
+    holdout_variant_slug: string;
+    treatment_variant_id: string;
+    treatment_variant_slug: string;
+    seed: number;
+    variant_bins: Allocation;
+}
+interface Metric {
+    id: string;
+    selector: SelectorCondition;
+    js_binder?: string;
+}
+interface ProjectSettings {
+    mutation_observer_active: boolean;
+    track_only_activated_frames?: boolean;
+    blocklist_ips?: string[];
+    bot_cloaking_enabled?: boolean;
+    bot_score_threshold?: number;
+    analytics_callback?: AnalyticsCallback;
+}
+interface Project {
+    org_id: string;
+    holdout_info: HoldoutInfo;
+    audiences: Record<string, Audience>;
+    frames: Frame[];
+    metrics?: Metric[];
+    settings: ProjectSettings;
+    tags?: ProjectTag[];
+    lanes?: Record<string, LaneStatus>;
+}
+interface Frame {
+    activation_condition: ActivationCondition;
+    experiments: Experiment[];
+    elements: CoframeElements;
+}
+interface Experiment {
+    metadata: ExperimentMetadata;
+    variants: Variant[];
+}
+interface ExperimentMetadata {
+    experiment_id: string;
+    slug: string;
+    iteration_id: string;
+    seed: number;
+    holdout_info: HoldoutInfo;
+    allocation: Allocation;
+    activation_condition: {
+        audience_ids?: string[];
+    };
+    lane_ids?: string[];
+}
+interface Allocation {
+    [variantId: string]: number[][];
+}
+interface Variant {
+    id: string;
+    slug: string;
+    experiment_id: string;
+    modifications: Modifications;
+}
+interface CoframeElements {
+    [elementId: string]: SelectorCondition[];
+}
+type SelectorCondition = {
+    and?: SelectorCondition[];
+    or?: SelectorCondition[];
+    name?: string;
+    url?: string;
+    url_starts_with?: string;
+    navigate_to_url_starts_with?: string;
+    css?: string;
+    universal?: UniversalSelector;
+    js?: string;
+};
+type Operator = 'equals' | 'contains' | 'not_contains';
+type SegmentCondition = {
+    operator: Operator;
+    operand: string;
+    key?: string;
+};
+type ActivationConditionAllocation = {
+    seed: number;
+    allocation_bins: number[][];
+    allocation_scale: number;
+};
+type ActivationCondition = {
+    and?: ActivationCondition[];
+    or?: ActivationCondition[];
+    device?: string[];
+    platform?: string[];
+    language?: string[];
+    country?: string[];
+    region?: string[];
+    city?: string[];
+    search?: SegmentCondition[];
+    user_context?: SegmentCondition[];
+    first_time_vs_returning?: string[];
+    url?: string;
+    base_url_matches?: string;
+    url_regex?: string;
+    contains?: string;
+    time?: {
+        before?: Date;
+        after?: Date;
+    };
+    allocation?: ActivationConditionAllocation;
+    js_function?: string;
+};
+type CoframeConfig = {
+    projectId: string;
+    trackingOnly?: boolean;
+    enableAntiFlickering?: boolean;
+    waitForHydration?: boolean;
+    waitForCookiesEnabled?: boolean;
+    waitForFeatureFlag?: boolean;
+    waitForUserToken?: boolean;
+    batchSize?: number;
+    startTime?: number;
+    timeoutMs?: number;
+    timeoutBehavior?: 'exclude';
+    currentUrl?: string;
+    userContext?: Record<string, unknown>;
+    nonce?: string;
+};
+type ConversionEventPayload = {
+    metricId?: string;
+    metricName?: string;
+    metadata?: Record<string, string>;
+    value?: number;
+};
+type BotReason = 'none' | 'cf_bot_score' | 'cf_verified_bot' | 'force_bot_param';
+type PersonalizationHeaders = {
+    'x-device-type': string;
+    'x-is-mobile-viewer': string;
+    'x-viewer-city': string;
+    'x-viewer-country': string;
+    'x-viewer-region': string;
+    'x-is-bot': string;
+    'x-is-blocklist-ip': string;
+    'x-cf-bot-score': string;
+    'x-cf-verified-bot-category': string;
+    'x-bot-reason': BotReason;
+};
+
+interface ProjectData {
+    project: Project;
+    personalizationHeaders?: Partial<PersonalizationHeaders>;
+}
+interface CoframeInitOptions {
+    config?: CoframeConfig;
+    projectData?: ProjectData;
+}
+type LogPayload = {
+    kind: 'warn' | 'error' | 'exception';
+    org_id: string;
+    project_id: string;
+    event_id: string;
+    variant_id: string;
+    experiment_id: string;
+    session_id: string;
+    url: string;
+    monitoring_type: string;
+    local_time: string;
+    metadata: Record<string, unknown>;
+    variant_ids?: string[];
+};
+
+interface TreatmentAppliedHandlers {
+    callback?: (data: TreatmentData) => void;
+    bulkCallback?: (data: TreatmentData[]) => void;
+    bulkCallbackV2?: (data: TreatmentDataV2[], rawIds: ExperimentInfo[]) => void;
+}
+declare function setConsent(enabled: boolean): void;
+declare function setUserToken(token: string): void;
+declare function setFeatureFlag(enabled: boolean): void;
+declare function setPageHydrated(): void;
+declare function trackConversion(payload: ConversionEventPayload): void;
+declare function onTreatmentApplied(handlers: TreatmentAppliedHandlers): void;
+declare function onLog(cb: (payload: LogPayload) => void): void;
+
+declare function init(options?: CoframeInitOptions): Promise<void>;
+
+export { init, onLog, onTreatmentApplied, setConsent, setFeatureFlag, setPageHydrated, setUserToken, trackConversion };
+export type { CoframeConfig, CoframeInitOptions, ConversionEventPayload, ExperimentInfo, LogPayload, PersonalizationHeaders, Project, ProjectData, TreatmentAppliedHandlers, TreatmentData, TreatmentDataV2 };