Skip to content

PATCH_API_UPDATE.md

Latest commit

 

History

History
145 lines (111 loc) · 3.54 KB

PATCH_API_UPDATE.md

File metadata and controls

145 lines (111 loc) · 3.54 KB
Raw

Patch API Update - Text to HTML

Summary

Updated the patch API to return full HTML instead of just text values. This allows the SDK to make more complex DOM changes beyond simple text replacements.

Changes Made

1. Data Model Update

File: lib/firebase/experiments.ts

  • Changed controlText?: string → controlHtml?: string
  • Changed variantText?: string → variantHtml?: string

2. Patch API Response Format

File: app/api/experiments/[id]/patch/route.ts

Before:

{
  "type": "text",
  "selector": "#greeting",
  "value": "Hello Sidiq"
}

After:

{
  "selector": "#greeting",
  "newHtml": "<h1>Hello Sidiq</h1>"
}

3. Experiment Side Panel

File: components/ExperimentSidePanel.tsx

  • Changed state variables from controlText/variantText to controlHtml/variantHtml
  • Updated field labels from "Text" to "HTML"
  • Changed input fields from single-line <input> to multi-line <textarea> with monospace font
  • Extract full outerHTML instead of just textContent from selected element
  • Updated API request to send controlHtml/variantHtml

4. Experiment Creation API

File: app/api/experiments/route.ts

  • Accept controlHtml/variantHtml in request body
  • Validate controlHtml/variantHtml instead of controlText/variantText
  • Pass HTML values to Firestore and Statsig

5. Statsig API Service

File: lib/statsig/api.ts

  • Updated function signature to accept controlHtml/variantHtml
  • Store HTML in Statsig parameter values as html key
  • Updated group metadata to include HTML content

API Usage

Endpoint

GET /api/experiments/[experimentId]/patch?variantKey=control&userId=xxx

Response Example

{
  "selector": "#hero-title",
  "newHtml": "<h1 class='text-4xl font-bold'>Hello, World!</h1>"
}

SDK Implementation

// Fetch patch from API
const response = await fetch(
  `https://dashboard.optivise.dev/api/experiments/${expId}/patch?variantKey=v1&userId=user123`
);
const patch = await response.json();

// Apply patch to DOM
const element = document.querySelector(patch.selector);
if (element) {
  element.outerHTML = patch.newHtml;
}

Breaking Changes

⚠️ Response format changed - The SDK needs to be updated to:

  1. Expect {selector, newHtml} instead of {type, selector, value}
  2. Use outerHTML assignment instead of textContent

Benefits

✅ More flexible - Can change entire elements, not just text
✅ Supports complex changes - Classes, attributes, nested elements
✅ Better UX - Shows full HTML in editor for transparency
✅ Cleaner API - Simpler response format

Example Experiment

Control HTML:

<button class="btn btn-primary">Sign Up</button>

Variant HTML:

<button class="btn btn-success btn-lg">Get Started Free!</button>

Result: Complete button element replacement with different classes and text.

Testing

Test the updated API:

curl "http://localhost:3000/api/experiments/YOUR_EXP_ID/patch?variantKey=v1&userId=user123"

Expected response:

{
  "selector": "#target-element",
  "newHtml": "<div>Your variant HTML here</div>"
}

Next Steps for SDK

The SDK team needs to update their runtime logic:

  1. Fetch patch with same endpoint (no URL changes)
  2. Parse new response format {selector, newHtml}
  3. Apply using outerHTML: 
    element.outerHTML = patch.newHtml;

No changes needed to:

  • Endpoint URL structure
  • Query parameters
  • CORS headers
  • Authentication (still public)