@traffical/svelte 0.1.0

package/dist/index.test.js

@@ -0,0 +1,184 @@
+/**
+ * @traffical/svelte - Unit Tests
+ *
+ * Tests for the Svelte 5 SDK hooks and utilities.
+ */
+import { describe, test, expect } from "bun:test";
+import { resolveParameters } from "@traffical/core";
+// =============================================================================
+// Test Fixtures
+// =============================================================================
+const mockBundle = {
+    version: new Date().toISOString(),
+    orgId: "org_test",
+    projectId: "proj_test",
+    env: "test",
+    hashing: {
+        unitKey: "userId",
+        bucketCount: 10000,
+    },
+    parameters: [
+        {
+            key: "checkout.ctaText",
+            type: "string",
+            default: "Buy Now",
+            layerId: "layer_1",
+            namespace: "checkout",
+        },
+        {
+            key: "checkout.ctaColor",
+            type: "string",
+            default: "#000000",
+            layerId: "layer_1",
+            namespace: "checkout",
+        },
+        {
+            key: "feature.newCheckout",
+            type: "boolean",
+            default: false,
+            layerId: "layer_2",
+            namespace: "feature",
+        },
+    ],
+    layers: [
+        {
+            id: "layer_1",
+            policies: [],
+        },
+        {
+            id: "layer_2",
+            policies: [],
+        },
+    ],
+    domBindings: [],
+};
+const mockBundleWithLayer = {
+    ...mockBundle,
+    layers: [
+        {
+            id: "layer_1",
+            policies: [
+                {
+                    id: "policy_1",
+                    state: "running",
+                    kind: "static",
+                    conditions: [],
+                    allocations: [
+                        {
+                            id: "alloc_1",
+                            name: "control",
+                            bucketRange: [0, 4999],
+                            overrides: {
+                                "checkout.ctaText": "Buy Now",
+                                "checkout.ctaColor": "#000000",
+                            },
+                        },
+                        {
+                            id: "alloc_2",
+                            name: "treatment",
+                            bucketRange: [5000, 9999],
+                            overrides: {
+                                "checkout.ctaText": "Purchase",
+                                "checkout.ctaColor": "#FF0000",
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: "layer_2",
+            policies: [],
+        },
+    ],
+};
+// =============================================================================
+// Resolution Tests
+// =============================================================================
+describe("resolveParameters", () => {
+    test("returns defaults when bundle is null", () => {
+        const defaults = {
+            "checkout.ctaText": "Default Text",
+            "checkout.ctaColor": "#FFFFFF",
+        };
+        const result = resolveParameters(null, {}, defaults);
+        expect(result).toEqual(defaults);
+    });
+    test("resolves parameters from bundle defaults", () => {
+        const defaults = {
+            "checkout.ctaText": "Fallback",
+            "checkout.ctaColor": "#FFFFFF",
+        };
+        const result = resolveParameters(mockBundle, { userId: "user_123" }, defaults);
+        expect(result["checkout.ctaText"]).toBe("Buy Now");
+        expect(result["checkout.ctaColor"]).toBe("#000000");
+    });
+    test("returns defaults for missing parameters", () => {
+        const defaults = {
+            "checkout.ctaText": "Fallback",
+            "nonexistent.param": "Default Value",
+        };
+        const result = resolveParameters(mockBundle, { userId: "user_123" }, defaults);
+        expect(result["checkout.ctaText"]).toBe("Buy Now");
+        expect(result["nonexistent.param"]).toBe("Default Value");
+    });
+    test("resolves boolean parameters correctly", () => {
+        const defaults = {
+            "feature.newCheckout": true, // Default to true, bundle has false
+        };
+        const result = resolveParameters(mockBundle, { userId: "user_123" }, defaults);
+        expect(result["feature.newCheckout"]).toBe(false);
+    });
+});
+// =============================================================================
+// SSR Behavior Tests
+// =============================================================================
+describe("SSR behavior", () => {
+    test("isBrowser returns false in test environment", () => {
+        // In Bun test environment, window is not defined
+        const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+        expect(isBrowser).toBe(false);
+    });
+    test("resolveParameters works without browser APIs", () => {
+        // This verifies that core resolution doesn't depend on browser APIs
+        const defaults = {
+            "checkout.ctaText": "Fallback",
+        };
+        const result = resolveParameters(mockBundle, { userId: "ssr_user" }, defaults);
+        expect(result["checkout.ctaText"]).toBe("Buy Now");
+    });
+});
+// =============================================================================
+// Type Safety Tests
+// =============================================================================
+describe("type safety", () => {
+    test("preserves type inference for defaults", () => {
+        const defaults = {
+            stringParam: "hello",
+            numberParam: 42,
+            booleanParam: true,
+        };
+        // Type check - this should compile
+        const result = resolveParameters(mockBundle, {}, defaults);
+        expect(typeof result.stringParam).toBe("string");
+        expect(typeof result.numberParam).toBe("number");
+        expect(typeof result.booleanParam).toBe("boolean");
+    });
+});
+// =============================================================================
+// Bundle Validation Tests
+// =============================================================================
+describe("bundle structure", () => {
+    test("mock bundle has expected structure", () => {
+        expect(mockBundle.orgId).toBe("org_test");
+        expect(mockBundle.hashing.unitKey).toBe("userId");
+        expect(mockBundle.hashing.bucketCount).toBe(10000);
+        expect(mockBundle.parameters).toHaveLength(3);
+        expect(mockBundle.layers).toHaveLength(2);
+    });
+    test("mock bundle with layer has allocations", () => {
+        expect(mockBundleWithLayer.layers).toHaveLength(2);
+        expect(mockBundleWithLayer.layers[0].policies).toHaveLength(1);
+        expect(mockBundleWithLayer.layers[0].policies[0].allocations).toHaveLength(2);
+    });
+});

package/dist/sveltekit.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @traffical/svelte - SvelteKit Helpers
+ *
+ * Server-side utilities for SvelteKit load functions.
+ * Enables SSR with pre-fetched config bundles.
+ */
+import type { ConfigBundle, Context, ParameterValue } from "@traffical/core";
+import type { LoadTrafficalBundleOptions, LoadTrafficalBundleResult } from "./types.js";
+/**
+ * Loads the Traffical config bundle in a SvelteKit load function.
+ *
+ * Call this in your +layout.server.ts or +page.server.ts to fetch the config
+ * bundle on the server, enabling SSR without FOOC (Flash of Original Content).
+ *
+ * @example
+ * ```typescript
+ * // src/routes/+layout.server.ts
+ * import { loadTrafficalBundle } from '@traffical/svelte/sveltekit';
+ * import { TRAFFICAL_API_KEY } from '$env/static/private';
+ *
+ * export async function load({ fetch }) {
+ *   const { bundle } = await loadTrafficalBundle({
+ *     orgId: 'org_123',
+ *     projectId: 'proj_456',
+ *     env: 'production',
+ *     apiKey: TRAFFICAL_API_KEY,
+ *     fetch,
+ *   });
+ *
+ *   return {
+ *     traffical: { bundle },
+ *   };
+ * }
+ * ```
+ */
+export declare function loadTrafficalBundle(options: LoadTrafficalBundleOptions): Promise<LoadTrafficalBundleResult>;
+/**
+ * Resolves parameters on the server for SSR.
+ *
+ * Use this to pre-resolve specific parameters in your load function,
+ * enabling server-side rendering with the correct values.
+ *
+ * @example
+ * ```typescript
+ * // src/routes/checkout/+page.server.ts
+ * import { loadTrafficalBundle, resolveParamsSSR } from '@traffical/svelte/sveltekit';
+ *
+ * export async function load({ fetch, cookies }) {
+ *   const { bundle } = await loadTrafficalBundle({ ... });
+ *
+ *   // Get user context from cookies/session
+ *   const userId = cookies.get('userId');
+ *
+ *   // Pre-resolve params for this page
+ *   const checkoutParams = resolveParamsSSR(
+ *     bundle,
+ *     { userId },
+ *     {
+ *       'checkout.ctaText': 'Buy Now',
+ *       'checkout.ctaColor': '#000',
+ *     }
+ *   );
+ *
+ *   return {
+ *     traffical: { bundle },
+ *     checkoutParams,
+ *   };
+ * }
+ * ```
+ */
+export declare function resolveParamsSSR<T extends Record<string, ParameterValue>>(bundle: ConfigBundle | null, context: Context, defaults: T): T;
+export type { LoadTrafficalBundleOptions, LoadTrafficalBundleResult };
+//# sourceMappingURL=sveltekit.d.ts.map

package/dist/sveltekit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sveltekit.d.ts","sourceRoot":"","sources":["../src/sveltekit.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,KAAK,EACV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,YAAY,CAAC;AAYpB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,0BAA0B,GAClC,OAAO,CAAC,yBAAyB,CAAC,CA4BpC;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EACvE,MAAM,EAAE,YAAY,GAAG,IAAI,EAC3B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,GACV,CAAC,CAMH;AAMD,YAAY,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/sveltekit.js

@@ -0,0 +1,111 @@
+/**
+ * @traffical/svelte - SvelteKit Helpers
+ *
+ * Server-side utilities for SvelteKit load functions.
+ * Enables SSR with pre-fetched config bundles.
+ */
+import { resolveParameters } from "@traffical/core";
+// =============================================================================
+// Constants
+// =============================================================================
+const DEFAULT_BASE_URL = "https://sdk.traffical.io";
+// =============================================================================
+// Load Functions
+// =============================================================================
+/**
+ * Loads the Traffical config bundle in a SvelteKit load function.
+ *
+ * Call this in your +layout.server.ts or +page.server.ts to fetch the config
+ * bundle on the server, enabling SSR without FOOC (Flash of Original Content).
+ *
+ * @example
+ * ```typescript
+ * // src/routes/+layout.server.ts
+ * import { loadTrafficalBundle } from '@traffical/svelte/sveltekit';
+ * import { TRAFFICAL_API_KEY } from '$env/static/private';
+ *
+ * export async function load({ fetch }) {
+ *   const { bundle } = await loadTrafficalBundle({
+ *     orgId: 'org_123',
+ *     projectId: 'proj_456',
+ *     env: 'production',
+ *     apiKey: TRAFFICAL_API_KEY,
+ *     fetch,
+ *   });
+ *
+ *   return {
+ *     traffical: { bundle },
+ *   };
+ * }
+ * ```
+ */
+export async function loadTrafficalBundle(options) {
+    const baseUrl = options.baseUrl ?? DEFAULT_BASE_URL;
+    const url = `${baseUrl}/v1/config/${options.projectId}?env=${options.env}`;
+    try {
+        const response = await options.fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${options.apiKey}`,
+            },
+        });
+        if (!response.ok) {
+            return {
+                bundle: null,
+                error: `HTTP ${response.status}: ${response.statusText}`,
+            };
+        }
+        const bundle = (await response.json());
+        return { bundle };
+    }
+    catch (err) {
+        return {
+            bundle: null,
+            error: err instanceof Error ? err.message : String(err),
+        };
+    }
+}
+// =============================================================================
+// SSR Resolution
+// =============================================================================
+/**
+ * Resolves parameters on the server for SSR.
+ *
+ * Use this to pre-resolve specific parameters in your load function,
+ * enabling server-side rendering with the correct values.
+ *
+ * @example
+ * ```typescript
+ * // src/routes/checkout/+page.server.ts
+ * import { loadTrafficalBundle, resolveParamsSSR } from '@traffical/svelte/sveltekit';
+ *
+ * export async function load({ fetch, cookies }) {
+ *   const { bundle } = await loadTrafficalBundle({ ... });
+ *
+ *   // Get user context from cookies/session
+ *   const userId = cookies.get('userId');
+ *
+ *   // Pre-resolve params for this page
+ *   const checkoutParams = resolveParamsSSR(
+ *     bundle,
+ *     { userId },
+ *     {
+ *       'checkout.ctaText': 'Buy Now',
+ *       'checkout.ctaColor': '#000',
+ *     }
+ *   );
+ *
+ *   return {
+ *     traffical: { bundle },
+ *     checkoutParams,
+ *   };
+ * }
+ * ```
+ */
+export function resolveParamsSSR(bundle, context, defaults) {
+    if (!bundle) {
+        return defaults;
+    }
+    return resolveParameters(bundle, context, defaults);
+}

package/dist/sveltekit.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @traffical/svelte - SvelteKit Helpers Tests
+ */
+export {};
+//# sourceMappingURL=sveltekit.test.d.ts.map

package/dist/sveltekit.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sveltekit.test.d.ts","sourceRoot":"","sources":["../src/sveltekit.test.ts"],"names":[],"mappings":"AAAA;;GAEG"}

package/dist/sveltekit.test.js

@@ -0,0 +1,170 @@
+/**
+ * @traffical/svelte - SvelteKit Helpers Tests
+ */
+import { describe, test, expect, mock } from "bun:test";
+import { loadTrafficalBundle, resolveParamsSSR } from "./sveltekit.js";
+// =============================================================================
+// Test Fixtures
+// =============================================================================
+const mockBundle = {
+    version: new Date().toISOString(),
+    orgId: "org_test",
+    projectId: "proj_test",
+    env: "test",
+    hashing: {
+        unitKey: "userId",
+        bucketCount: 10000,
+    },
+    parameters: [
+        {
+            key: "checkout.ctaText",
+            type: "string",
+            default: "Buy Now",
+            layerId: "layer_1",
+            namespace: "checkout",
+        },
+    ],
+    layers: [
+        {
+            id: "layer_1",
+            policies: [],
+        },
+    ],
+    domBindings: [],
+};
+// =============================================================================
+// loadTrafficalBundle Tests
+// =============================================================================
+describe("loadTrafficalBundle", () => {
+    test("returns bundle on successful fetch", async () => {
+        const mockFetch = mock(() => Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(mockBundle),
+        }));
+        const result = await loadTrafficalBundle({
+            orgId: "org_123",
+            projectId: "proj_456",
+            env: "production",
+            apiKey: "pk_test",
+            fetch: mockFetch,
+        });
+        expect(result.bundle).toEqual(mockBundle);
+        expect(result.error).toBeUndefined();
+    });
+    test("returns null bundle on HTTP error", async () => {
+        const mockFetch = mock(() => Promise.resolve({
+            ok: false,
+            status: 404,
+            statusText: "Not Found",
+        }));
+        const result = await loadTrafficalBundle({
+            orgId: "org_123",
+            projectId: "proj_456",
+            env: "production",
+            apiKey: "pk_test",
+            fetch: mockFetch,
+        });
+        expect(result.bundle).toBeNull();
+        expect(result.error).toBe("HTTP 404: Not Found");
+    });
+    test("returns null bundle on network error", async () => {
+        const mockFetch = mock(() => Promise.reject(new Error("Network error")));
+        const result = await loadTrafficalBundle({
+            orgId: "org_123",
+            projectId: "proj_456",
+            env: "production",
+            apiKey: "pk_test",
+            fetch: mockFetch,
+        });
+        expect(result.bundle).toBeNull();
+        expect(result.error).toBe("Network error");
+    });
+    test("uses correct URL format", async () => {
+        let capturedUrl = "";
+        const mockFetch = mock((url) => {
+            capturedUrl = url;
+            return Promise.resolve({
+                ok: true,
+                json: () => Promise.resolve(mockBundle),
+            });
+        });
+        await loadTrafficalBundle({
+            orgId: "org_123",
+            projectId: "proj_456",
+            env: "staging",
+            apiKey: "pk_test",
+            fetch: mockFetch,
+        });
+        expect(capturedUrl).toBe("https://sdk.traffical.io/v1/config/proj_456?env=staging");
+    });
+    test("uses custom baseUrl when provided", async () => {
+        let capturedUrl = "";
+        const mockFetch = mock((url) => {
+            capturedUrl = url;
+            return Promise.resolve({
+                ok: true,
+                json: () => Promise.resolve(mockBundle),
+            });
+        });
+        await loadTrafficalBundle({
+            orgId: "org_123",
+            projectId: "proj_456",
+            env: "production",
+            apiKey: "pk_test",
+            fetch: mockFetch,
+            baseUrl: "https://custom.api.com",
+        });
+        expect(capturedUrl).toBe("https://custom.api.com/v1/config/proj_456?env=production");
+    });
+    test("includes authorization header", async () => {
+        let capturedOptions;
+        const mockFetch = mock((_url, options) => {
+            capturedOptions = options;
+            return Promise.resolve({
+                ok: true,
+                json: () => Promise.resolve(mockBundle),
+            });
+        });
+        await loadTrafficalBundle({
+            orgId: "org_123",
+            projectId: "proj_456",
+            env: "production",
+            apiKey: "pk_secret_key",
+            fetch: mockFetch,
+        });
+        expect(capturedOptions?.headers).toEqual({
+            "Content-Type": "application/json",
+            Authorization: "Bearer pk_secret_key",
+        });
+    });
+});
+// =============================================================================
+// resolveParamsSSR Tests
+// =============================================================================
+describe("resolveParamsSSR", () => {
+    test("returns defaults when bundle is null", () => {
+        const defaults = {
+            "checkout.ctaText": "Default",
+        };
+        const result = resolveParamsSSR(null, { userId: "user_123" }, defaults);
+        expect(result).toEqual(defaults);
+    });
+    test("resolves parameters from bundle", () => {
+        const defaults = {
+            "checkout.ctaText": "Fallback",
+        };
+        const result = resolveParamsSSR(mockBundle, { userId: "user_123" }, defaults);
+        expect(result["checkout.ctaText"]).toBe("Buy Now");
+    });
+    test("uses context for resolution", () => {
+        const defaults = {
+            "checkout.ctaText": "Fallback",
+        };
+        // Both should resolve to the same value since we're using defaults
+        const result1 = resolveParamsSSR(mockBundle, { userId: "user_1" }, defaults);
+        const result2 = resolveParamsSSR(mockBundle, { userId: "user_2" }, defaults);
+        // Without active policies, results should be the same (bundle defaults)
+        expect(result1["checkout.ctaText"]).toBe("Buy Now");
+        expect(result2["checkout.ctaText"]).toBe("Buy Now");
+    });
+});