@funnelsgrove/runtime 0.1.0 → 0.1.2

package/dist/services/runtime-mode.service.d.ts

@@ -1,5 +1,8 @@
 export type RuntimeMode = 'test' | 'live';
+export type FunnelMode = 'test' | 'production';
 export declare const isEditorEnabled: () => boolean;
+export declare const getFunnelMode: () => FunnelMode;
 export declare const getRuntimeMode: () => RuntimeMode;
+export declare const setFunnelMode: (mode: FunnelMode) => void;
 export declare const setRuntimeMode: (mode: RuntimeMode) => void;
 export declare const useRuntimeMode: () => [RuntimeMode, (mode: RuntimeMode) => void];

package/dist/services/runtime-mode.service.js

@@ -1,12 +1,48 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
 const EDITOR_MODE_STORAGE_KEY = 'funnel:editor:mode';
+const FUNNEL_MODE_STORAGE_KEY = 'funnel-mode';
+const FUNNEL_MODE_COOKIE_NAME = 'funnel-mode';
 const MODE_CHANGE_EVENT = 'funnel:editor-mode-changed';
+const DEFAULT_FUNNEL_DOMAIN_SIGNAL = 'funnelsgrove';
+const FUNNEL_MODE_COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
 const canUseDom = () => {
     return typeof window !== 'undefined';
 };
+const toFunnelMode = (value) => {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'test') {
+        return 'test';
+    }
+    if (normalized === 'prod' || normalized === 'production' || normalized === 'live') {
+        return 'production';
+    }
+    return null;
+};
 const toRuntimeMode = (value) => {
-    return value === 'live' ? 'live' : 'test';
+    return toFunnelMode(value) === 'production' ? 'live' : 'test';
+};
+const toRuntimeModeFromFunnelMode = (mode) => {
+    return mode === 'production' ? 'live' : 'test';
+};
+const toFunnelModeFromRuntimeMode = (mode) => {
+    return mode === 'live' ? 'production' : 'test';
+};
+const normalizeHostname = (value) => {
+    return value.trim().toLowerCase().replace(/\.+$/, '');
+};
+const isDefaultPublishedDomain = () => {
+    if (!canUseDom()) {
+        return false;
+    }
+    const hostname = normalizeHostname(window.location.hostname || '');
+    if (!hostname) {
+        return false;
+    }
+    return hostname.includes(DEFAULT_FUNNEL_DOMAIN_SIGNAL);
 };
 export const isEditorEnabled = () => {
     if (!canUseDom()) {
@@ -34,6 +70,79 @@ const readStoredEditorMode = () => {
         return null;
     }
 };
+const readCookieValue = (name) => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    try {
+        const target = `${encodeURIComponent(name)}=`;
+        const entry = document.cookie
+            .split(';')
+            .map((item) => item.trim())
+            .find((item) => item.startsWith(target));
+        return entry ? decodeURIComponent(entry.slice(target.length)) : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const writeFunnelModeCookie = (mode) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    try {
+        document.cookie = [
+            `${encodeURIComponent(FUNNEL_MODE_COOKIE_NAME)}=${encodeURIComponent(mode)}`,
+            'Path=/',
+            `Max-Age=${FUNNEL_MODE_COOKIE_MAX_AGE_SECONDS}`,
+            'SameSite=Lax',
+        ].join('; ');
+    }
+    catch (_a) {
+        // ignore cookie failures
+    }
+};
+const readFunnelModeCookie = () => {
+    return toFunnelMode(readCookieValue(FUNNEL_MODE_COOKIE_NAME));
+};
+const readFunnelModeStorage = () => {
+    if (!canUseDom()) {
+        return null;
+    }
+    try {
+        return toFunnelMode(window.localStorage.getItem(FUNNEL_MODE_STORAGE_KEY));
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const persistFunnelMode = (mode, options = {}) => {
+    if (!canUseDom()) {
+        return;
+    }
+    try {
+        window.localStorage.setItem(FUNNEL_MODE_STORAGE_KEY, mode);
+    }
+    catch (_a) {
+        // ignore storage failures
+    }
+    writeFunnelModeCookie(mode);
+    if (options.emit === false) {
+        return;
+    }
+    emitModeChange(toRuntimeModeFromFunnelMode(mode));
+};
+const readQueryFunnelMode = () => {
+    if (!canUseDom()) {
+        return null;
+    }
+    try {
+        return toFunnelMode(new URLSearchParams(window.location.search).get('mode'));
+    }
+    catch (_a) {
+        return null;
+    }
+};
 const emitModeChange = (mode) => {
     if (!canUseDom()) {
         return;
@@ -44,15 +153,44 @@ const emitModeChange = (mode) => {
         },
     }));
 };
+export const getFunnelMode = () => {
+    if (!canUseDom()) {
+        return 'production';
+    }
+    const queryMode = readQueryFunnelMode();
+    if (queryMode) {
+        persistFunnelMode(queryMode, { emit: false });
+        return queryMode;
+    }
+    const cookieMode = readFunnelModeCookie();
+    if (cookieMode) {
+        return cookieMode;
+    }
+    if (isDefaultPublishedDomain()) {
+        return 'test';
+    }
+    return readFunnelModeStorage() || 'production';
+};
 export const getRuntimeMode = () => {
     if (!canUseDom()) {
         return 'live';
     }
+    const queryMode = readQueryFunnelMode();
+    if (queryMode) {
+        persistFunnelMode(queryMode, { emit: false });
+        return toRuntimeModeFromFunnelMode(queryMode);
+    }
     if (!isEditorEnabled()) {
-        return 'live';
+        return toRuntimeModeFromFunnelMode(getFunnelMode());
     }
     return readStoredEditorMode() || 'test';
 };
+export const setFunnelMode = (mode) => {
+    if (!canUseDom()) {
+        return;
+    }
+    persistFunnelMode(mode);
+};
 export const setRuntimeMode = (mode) => {
     if (!canUseDom()) {
         return;
@@ -64,7 +202,7 @@ export const setRuntimeMode = (mode) => {
     catch (_a) {
         // ignore storage failures
     }
-    emitModeChange(normalizedMode);
+    persistFunnelMode(toFunnelModeFromRuntimeMode(normalizedMode));
 };
 const subscribeRuntimeMode = (listener) => {
     if (!canUseDom()) {
@@ -76,7 +214,7 @@ const subscribeRuntimeMode = (listener) => {
         listener(toRuntimeMode((_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.mode));
     };
     const onStorageChanged = (event) => {
-        if (event.key !== EDITOR_MODE_STORAGE_KEY) {
+        if (event.key !== EDITOR_MODE_STORAGE_KEY && event.key !== FUNNEL_MODE_STORAGE_KEY) {
             return;
         }
         listener(getRuntimeMode());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/runtime",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -11,6 +11,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./config/env.config": {
+      "types": "./dist/config/env.config.d.ts",
+      "import": "./dist/config/env.config.js",
+      "default": "./dist/config/env.config.js"
     }
   },
   "files": [
@@ -20,12 +25,13 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-esm-relative-imports.mjs dist",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
+    "posthog-js": "^1.369.2",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },