@varianceab/html-sdk 0.0.1

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 Variance
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# VarianceExperiment HTML SDK
+
+A lightweight, client-side HTML SDK for rendering A/B test variants and sending experiment impressions to analytics. Supports **preview mode**, **shared caching**, and works with any `<variance-experiment>` / `<variance-variant>` setup.
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+  - [Basic Example](#basic-example)
+  - [Preview Mode](#preview-mode)
+- [API](#api)
+  - [Attributes](#attributes)
+  - [Methods](#methods)
+
+---
+
+## Installation
+
+Install via pnpm:
+
+```bash
+pnpm add @varianceab/html-sdk
+```
+
+Or include directly in your project:
+
+```html
+<script src="https://unpkg.com/@varianceab/html-sdk"></script>
+```
+
+## Usage
+
+### Basic example
+
+```html
+<variance-experiment id="exp_123" client-id="client_123">
+  <variance-variant id="var_123">
+    <h1>Welcome, visitor!</h1>
+  </variance-variant>
+  <variance-variant id="var_456">
+    <h1>Try our new feature!</h1>
+  </variance-variant>
+</variance-experiment>
+```
+
+- The component fetches the experiment data from the endpoint.
+- The correct variant is automatically rendered.
+- An analytics impression is sent automatically.
+
+### Preview Mode
+
+Preview mode allows rendering a specific variant without sending analytics events or fetching experiment data.
+
+```html
+<variance-experiment
+  id="exp_456"
+  client-id="client_123"
+  preview-mode="true"
+  variant-to-preview="var_456"
+>
+  <variance-variant id="var_123">
+    <h1>Unseen variant</h1>
+  </variance-variant>
+  <variance-variant id="var_456">
+    <h1>Previewed variant</h1>
+  </variance-variant>
+</variance-experiment>
+```
+
+- `preview-mode="true"` requires `variant-to-preview` to be set.
+- No network request is made in preview mode.
+- No analytics impressions are sent.
+
+## API
+
+### Attributes
+
+| Attribute            | Type    | Description                                                       |
+| -------------------- | ------- | ----------------------------------------------------------------- |
+| `id`                 | string  | The experiment ID.                                                |
+| `client-id`          | string  | The client ID for fetching experiments.                           |
+| `preview-mode`       | boolean | If `true`, renders a specific variant for preview purposes.       |
+| `variant-to-preview` | string  | The variant ID to preview (required when `preview-mode` is true). |
+
+### Methods
+
+`sendImpression(experimentId: string, variantId: string)` – Sends an analytics event manually. Usually called automatically.
+
+All other rendering is handled automatically; variants are rendered based on experiment data or preview mode.
+

package/dist/types/variance.d.ts

@@ -0,0 +1,22 @@
+export declare class VarianceExperiment extends HTMLElement {
+    static experimentCachePromise: Promise<any[]> | null;
+    static get observedAttributes(): string[];
+    experiments: any[];
+    hasSent: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get clientId(): string;
+    get previewMode(): boolean;
+    get experimentId(): string;
+    get variantToPreview(): string | null;
+    private ensureValidPreview;
+    fetchExperiments(): Promise<void>;
+    fetchAllExperiments(): Promise<any[]>;
+    sendImpression(experimentId: string, variantId: string): void;
+    render(): void;
+    private renderPreview;
+    private renderVariant;
+    private clear;
+}
+export declare class VarianceVariant extends HTMLElement {
+}

package/dist/variance-html-sdk.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a="https://experiment-worker.christopherbeagles.workers.dev/sdk",o=1500;class i extends HTMLElement{constructor(){super(...arguments),this.experiments=[],this.hasSent=!1}static{this.experimentCachePromise=null}static get observedAttributes(){return["id","client-id","preview-mode","variant-to-preview"]}connectedCallback(){this.ensureValidPreview()||(this.previewMode?this.render():this.fetchExperiments())}attributeChangedCallback(e){if(!this.ensureValidPreview()){if(this.previewMode){this.render();return}e==="client-id"&&this.fetchExperiments()}}get clientId(){return this.getAttribute("client-id")??""}get previewMode(){return this.getAttribute("preview-mode")==="true"}get experimentId(){return this.getAttribute("id")??""}get variantToPreview(){return this.getAttribute("variant-to-preview")}ensureValidPreview(){if(!this.previewMode)return!1;const e=!this.variantToPreview;return e&&console.error('[variance-experiment] preview-mode="true" requires variant-to-preview'),e}async fetchExperiments(){if(this.previewMode){this.render();return}i.experimentCachePromise||(i.experimentCachePromise=this.fetchAllExperiments());try{this.experiments=await i.experimentCachePromise}catch(e){console.error(e),this.experiments=[]}finally{this.render()}}async fetchAllExperiments(){const e=new URL(a);e.searchParams.set("clientId",this.clientId);const t=new AbortController,r=setTimeout(()=>t.abort(),o);try{return await(await fetch(e.toString(),{signal:t.signal})).json()}catch(n){return console.error(n),[]}finally{clearTimeout(r)}}sendImpression(e,t){if(this.hasSent)return;this.hasSent=!0;const r={event:"experiment_impression",experiment_id:e,variant_id:t};window.dataLayer=window.dataLayer||[],window.gtag=window.gtag||function(){window.dataLayer.push(arguments)},window.gtag("event","experiment_impression",r),window.dataLayer.push(r)}render(){if(this.previewMode)return this.renderPreview(this.variantToPreview);const e=this.experiments.find(r=>r.id===this.experimentId);if(!e)return this.clear();const t=e?.variant?.id??null;t&&this.sendImpression(e.id,t),this.renderVariant(t)}renderPreview(e){this.hasSent=!0,this.renderVariant(e)}renderVariant(e){if(!e)return this.clear();const t=Array.from(this.children).find(r=>r instanceof HTMLElement&&r.tagName.toLowerCase()==="variance-variant"&&r.getAttribute("id")===e);this.innerHTML="",t&&this.appendChild(t.cloneNode(!0)),this.style.display="block"}clear(){this.innerHTML="",this.style.display="none"}}class s extends HTMLElement{}customElements.define("variance-experiment",i);customElements.define("variance-variant",s);exports.VarianceExperiment=i;exports.VarianceVariant=s;
+//# sourceMappingURL=variance-html-sdk.cjs.js.map

package/dist/variance-html-sdk.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variance-html-sdk.cjs.js","sources":["../src/variance.ts"],"sourcesContent":["const ENDPOINT = \"https://experiment-worker.christopherbeagles.workers.dev/sdk\";\nconst TIMEOUT = 1500;\n\nexport class VarianceExperiment extends HTMLElement {\n  static experimentCachePromise: Promise<any[]> | null = null;\n\n  static get observedAttributes() {\n    return [\"id\", \"client-id\", \"preview-mode\", \"variant-to-preview\"];\n  }\n\n  experiments: any[] = [];\n  hasSent = false;\n\n  connectedCallback() {\n    if (this.ensureValidPreview()) return;\n\n    this.previewMode ? this.render() : this.fetchExperiments();\n  }\n\n  attributeChangedCallback(name: string) {\n    if (this.ensureValidPreview()) return;\n\n    if (this.previewMode) {\n      this.render();\n      return;\n    }\n\n    if (name === \"client-id\") {\n      this.fetchExperiments();\n    }\n  }\n\n  /* --- Getters --- */\n  get clientId() {\n    return this.getAttribute(\"client-id\") ?? \"\";\n  }\n  get previewMode() {\n    return this.getAttribute(\"preview-mode\") === \"true\";\n  }\n  get experimentId() {\n    return this.getAttribute(\"id\") ?? \"\";\n  }\n  get variantToPreview() {\n    return this.getAttribute(\"variant-to-preview\");\n  }\n\n  /* --- Validation --- */\n  private ensureValidPreview() {\n    if (!this.previewMode) return false;\n\n    const missing = !this.variantToPreview;\n    if (missing) {\n      console.error(\n        `[variance-experiment] preview-mode=\"true\" requires variant-to-preview`,\n      );\n    }\n    return missing;\n  }\n\n  /* --- Fetching --- */\n  async fetchExperiments() {\n    if (this.previewMode) {\n      this.render();\n      return;\n    }\n\n    if (!VarianceExperiment.experimentCachePromise) {\n      VarianceExperiment.experimentCachePromise = this.fetchAllExperiments();\n    }\n\n    try {\n      this.experiments = await VarianceExperiment.experimentCachePromise;\n    } catch (err) {\n      console.error(err);\n      this.experiments = [];\n    } finally {\n      this.render();\n    }\n  }\n\n  async fetchAllExperiments(): Promise<any[]> {\n    const url = new URL(ENDPOINT);\n    url.searchParams.set(\"clientId\", this.clientId);\n\n    const controller = new AbortController();\n    const timeoutHandle = setTimeout(() => controller.abort(), TIMEOUT);\n\n    try {\n      const res = await fetch(url.toString(), { signal: controller.signal });\n      return await res.json();\n    } catch (err) {\n      console.error(err);\n      return [];\n    } finally {\n      clearTimeout(timeoutHandle);\n    }\n  }\n\n  /* --- Analytics --- */\n  sendImpression(experimentId: string, variantId: string) {\n    if (this.hasSent) return;\n    this.hasSent = true;\n\n    const payload = {\n      event: \"experiment_impression\",\n      experiment_id: experimentId,\n      variant_id: variantId,\n    };\n\n    window.dataLayer = window.dataLayer || [];\n    window.gtag =\n      window.gtag ||\n      function () {\n        window.dataLayer.push(arguments);\n      };\n\n    window.gtag(\"event\", \"experiment_impression\", payload);\n    window.dataLayer.push(payload);\n  }\n\n  /* --- Rendering --- */\n  render() {\n    if (this.previewMode) {\n      return this.renderPreview(this.variantToPreview!);\n    }\n\n    const experiment = this.experiments.find((e) => e.id === this.experimentId);\n    if (!experiment) {\n      return this.clear();\n    }\n\n    const variantId = experiment?.variant?.id ?? null;\n    if (variantId) {\n      this.sendImpression(experiment.id, variantId);\n    }\n\n    this.renderVariant(variantId);\n  }\n\n  private renderPreview(variantId: string) {\n    this.hasSent = true; // block impressions\n    this.renderVariant(variantId);\n  }\n\n  private renderVariant(variantId: string | null) {\n    if (!variantId) return this.clear();\n\n    // Capture original children before wiping\n    const child = Array.from(this.children).find(\n      (el) =>\n        el instanceof HTMLElement &&\n        el.tagName.toLowerCase() === \"variance-variant\" &&\n        el.getAttribute(\"id\") === variantId,\n    );\n\n    this.innerHTML = \"\";\n\n    if (child) {\n      this.appendChild(child.cloneNode(true));\n    }\n\n    this.style.display = \"block\";\n  }\n\n  private clear() {\n    this.innerHTML = \"\";\n    this.style.display = \"none\";\n  }\n}\n\nexport class VarianceVariant extends HTMLElement {}\n\ncustomElements.define(\"variance-experiment\", VarianceExperiment);\ncustomElements.define(\"variance-variant\", VarianceVariant);\n"],"names":["ENDPOINT","TIMEOUT","VarianceExperiment","name","missing","err","url","controller","timeoutHandle","experimentId","variantId","payload","experiment","e","child","el","VarianceVariant"],"mappings":"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"}

package/dist/variance-html-sdk.es.js

@@ -0,0 +1,117 @@
+const s = "https://experiment-worker.christopherbeagles.workers.dev/sdk";
+class i extends HTMLElement {
+  constructor() {
+    super(...arguments), this.experiments = [], this.hasSent = !1;
+  }
+  static {
+    this.experimentCachePromise = null;
+  }
+  static get observedAttributes() {
+    return ["id", "client-id", "preview-mode", "variant-to-preview"];
+  }
+  connectedCallback() {
+    this.ensureValidPreview() || (this.previewMode ? this.render() : this.fetchExperiments());
+  }
+  attributeChangedCallback(e) {
+    if (!this.ensureValidPreview()) {
+      if (this.previewMode) {
+        this.render();
+        return;
+      }
+      e === "client-id" && this.fetchExperiments();
+    }
+  }
+  /* --- Getters --- */
+  get clientId() {
+    return this.getAttribute("client-id") ?? "";
+  }
+  get previewMode() {
+    return this.getAttribute("preview-mode") === "true";
+  }
+  get experimentId() {
+    return this.getAttribute("id") ?? "";
+  }
+  get variantToPreview() {
+    return this.getAttribute("variant-to-preview");
+  }
+  /* --- Validation --- */
+  ensureValidPreview() {
+    if (!this.previewMode) return !1;
+    const e = !this.variantToPreview;
+    return e && console.error(
+      '[variance-experiment] preview-mode="true" requires variant-to-preview'
+    ), e;
+  }
+  /* --- Fetching --- */
+  async fetchExperiments() {
+    if (this.previewMode) {
+      this.render();
+      return;
+    }
+    i.experimentCachePromise || (i.experimentCachePromise = this.fetchAllExperiments());
+    try {
+      this.experiments = await i.experimentCachePromise;
+    } catch (e) {
+      console.error(e), this.experiments = [];
+    } finally {
+      this.render();
+    }
+  }
+  async fetchAllExperiments() {
+    const e = new URL(s);
+    e.searchParams.set("clientId", this.clientId);
+    const t = new AbortController(), r = setTimeout(() => t.abort(), 1500);
+    try {
+      return await (await fetch(e.toString(), { signal: t.signal })).json();
+    } catch (n) {
+      return console.error(n), [];
+    } finally {
+      clearTimeout(r);
+    }
+  }
+  /* --- Analytics --- */
+  sendImpression(e, t) {
+    if (this.hasSent) return;
+    this.hasSent = !0;
+    const r = {
+      event: "experiment_impression",
+      experiment_id: e,
+      variant_id: t
+    };
+    window.dataLayer = window.dataLayer || [], window.gtag = window.gtag || function() {
+      window.dataLayer.push(arguments);
+    }, window.gtag("event", "experiment_impression", r), window.dataLayer.push(r);
+  }
+  /* --- Rendering --- */
+  render() {
+    if (this.previewMode)
+      return this.renderPreview(this.variantToPreview);
+    const e = this.experiments.find((r) => r.id === this.experimentId);
+    if (!e)
+      return this.clear();
+    const t = e?.variant?.id ?? null;
+    t && this.sendImpression(e.id, t), this.renderVariant(t);
+  }
+  renderPreview(e) {
+    this.hasSent = !0, this.renderVariant(e);
+  }
+  renderVariant(e) {
+    if (!e) return this.clear();
+    const t = Array.from(this.children).find(
+      (r) => r instanceof HTMLElement && r.tagName.toLowerCase() === "variance-variant" && r.getAttribute("id") === e
+    );
+    this.innerHTML = "", t && this.appendChild(t.cloneNode(!0)), this.style.display = "block";
+  }
+  clear() {
+    this.innerHTML = "", this.style.display = "none";
+  }
+}
+class a extends HTMLElement {
+}
+customElements.define("variance-experiment", i);
+customElements.define("variance-variant", a);
+export {
+  i as VarianceExperiment,
+  a as VarianceVariant
+};
+//# sourceMappingURL=variance-html-sdk.es.js.map

package/dist/variance-html-sdk.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variance-html-sdk.es.js","sources":["../src/variance.ts"],"sourcesContent":["const ENDPOINT = \"https://experiment-worker.christopherbeagles.workers.dev/sdk\";\nconst TIMEOUT = 1500;\n\nexport class VarianceExperiment extends HTMLElement {\n  static experimentCachePromise: Promise<any[]> | null = null;\n\n  static get observedAttributes() {\n    return [\"id\", \"client-id\", \"preview-mode\", \"variant-to-preview\"];\n  }\n\n  experiments: any[] = [];\n  hasSent = false;\n\n  connectedCallback() {\n    if (this.ensureValidPreview()) return;\n\n    this.previewMode ? this.render() : this.fetchExperiments();\n  }\n\n  attributeChangedCallback(name: string) {\n    if (this.ensureValidPreview()) return;\n\n    if (this.previewMode) {\n      this.render();\n      return;\n    }\n\n    if (name === \"client-id\") {\n      this.fetchExperiments();\n    }\n  }\n\n  /* --- Getters --- */\n  get clientId() {\n    return this.getAttribute(\"client-id\") ?? \"\";\n  }\n  get previewMode() {\n    return this.getAttribute(\"preview-mode\") === \"true\";\n  }\n  get experimentId() {\n    return this.getAttribute(\"id\") ?? \"\";\n  }\n  get variantToPreview() {\n    return this.getAttribute(\"variant-to-preview\");\n  }\n\n  /* --- Validation --- */\n  private ensureValidPreview() {\n    if (!this.previewMode) return false;\n\n    const missing = !this.variantToPreview;\n    if (missing) {\n      console.error(\n        `[variance-experiment] preview-mode=\"true\" requires variant-to-preview`,\n      );\n    }\n    return missing;\n  }\n\n  /* --- Fetching --- */\n  async fetchExperiments() {\n    if (this.previewMode) {\n      this.render();\n      return;\n    }\n\n    if (!VarianceExperiment.experimentCachePromise) {\n      VarianceExperiment.experimentCachePromise = this.fetchAllExperiments();\n    }\n\n    try {\n      this.experiments = await VarianceExperiment.experimentCachePromise;\n    } catch (err) {\n      console.error(err);\n      this.experiments = [];\n    } finally {\n      this.render();\n    }\n  }\n\n  async fetchAllExperiments(): Promise<any[]> {\n    const url = new URL(ENDPOINT);\n    url.searchParams.set(\"clientId\", this.clientId);\n\n    const controller = new AbortController();\n    const timeoutHandle = setTimeout(() => controller.abort(), TIMEOUT);\n\n    try {\n      const res = await fetch(url.toString(), { signal: controller.signal });\n      return await res.json();\n    } catch (err) {\n      console.error(err);\n      return [];\n    } finally {\n      clearTimeout(timeoutHandle);\n    }\n  }\n\n  /* --- Analytics --- */\n  sendImpression(experimentId: string, variantId: string) {\n    if (this.hasSent) return;\n    this.hasSent = true;\n\n    const payload = {\n      event: \"experiment_impression\",\n      experiment_id: experimentId,\n      variant_id: variantId,\n    };\n\n    window.dataLayer = window.dataLayer || [];\n    window.gtag =\n      window.gtag ||\n      function () {\n        window.dataLayer.push(arguments);\n      };\n\n    window.gtag(\"event\", \"experiment_impression\", payload);\n    window.dataLayer.push(payload);\n  }\n\n  /* --- Rendering --- */\n  render() {\n    if (this.previewMode) {\n      return this.renderPreview(this.variantToPreview!);\n    }\n\n    const experiment = this.experiments.find((e) => e.id === this.experimentId);\n    if (!experiment) {\n      return this.clear();\n    }\n\n    const variantId = experiment?.variant?.id ?? null;\n    if (variantId) {\n      this.sendImpression(experiment.id, variantId);\n    }\n\n    this.renderVariant(variantId);\n  }\n\n  private renderPreview(variantId: string) {\n    this.hasSent = true; // block impressions\n    this.renderVariant(variantId);\n  }\n\n  private renderVariant(variantId: string | null) {\n    if (!variantId) return this.clear();\n\n    // Capture original children before wiping\n    const child = Array.from(this.children).find(\n      (el) =>\n        el instanceof HTMLElement &&\n        el.tagName.toLowerCase() === \"variance-variant\" &&\n        el.getAttribute(\"id\") === variantId,\n    );\n\n    this.innerHTML = \"\";\n\n    if (child) {\n      this.appendChild(child.cloneNode(true));\n    }\n\n    this.style.display = \"block\";\n  }\n\n  private clear() {\n    this.innerHTML = \"\";\n    this.style.display = \"none\";\n  }\n}\n\nexport class VarianceVariant extends HTMLElement {}\n\ncustomElements.define(\"variance-experiment\", VarianceExperiment);\ncustomElements.define(\"variance-variant\", VarianceVariant);\n"],"names":["ENDPOINT","VarianceExperiment","name","missing","err","url","controller","timeoutHandle","experimentId","variantId","payload","experiment","e","child","el","VarianceVariant"],"mappings":"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"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@varianceab/html-sdk",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://variance.tech",
+  "main": "dist/variance-html-sdk.cjs.js",
+  "module": "dist/variance-html-sdk.es.js",
+  "types": "dist/types/variance.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/variance-html-sdk.es.js",
+      "require": "./dist/variance-html-sdk.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "eslint": "^9.37.0",
+    "happy-dom": "^20.0.10",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --outDir dist/types",
+    "build:watch": "tsc --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "demo": "vite --config vite.config.demo.ts",
+    "test": "vitest"
+  }
+}