feat: added posthog feature flags instead of split

.env.example

@@ -11,7 +11,5 @@ MIXPANEL_TOKEN=yetanothersupersecret
 NODE_ENV=development # required for architect
 SENTRY_DSN=https://example.dsn/for/sentry
 SESSION_SECRET=secret
-SPLIT_DEBUG=false
-SPLIT_SERVER_TOKEN=localhost # this one is actually what it should be on your local machine
 POSTHOG_TOKEN=phc_token
 POSTHOG_API=https://eu.posthog.com

package.json

@@ -79,6 +79,7 @@
     "jose": "4.13.1",
     "js-cookie": "3.0.1",
     "posthog-js": "^1.51.5",
+    "posthog-node": "^2.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "12.2.0",

src/components/ExposeAppConfig/ExposeAppConfig.test.tsx

@@ -7,7 +7,6 @@ describe('ExposeAppConfig', () => {
     googleAnalyticsId: 'ga-id',
     visitorId: 'a-visitor-id',
     isProduction: true,
-    splitToken: 'a-split-token',
     cookieYesToken: 'a-cookieyes-token',
     version: '0.0.0-dev',
     sentryDsn: 'a-sentry-dsn',

src/components/ExposeAppConfig/__snapshots__/ExposeAppConfig.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`ExposeAppConfig > can expose the app config correctly 1`] = `
 <script
   dangerouslySetInnerHTML={
     {
-      "__html": "window.appConfig = {\\"hotjarId\\":\\"a-hotjar-id\\",\\"googleAnalyticsId\\":\\"ga-id\\",\\"visitorId\\":\\"a-visitor-id\\",\\"isProduction\\":true,\\"splitToken\\":\\"a-split-token\\",\\"cookieYesToken\\":\\"a-cookieyes-token\\",\\"version\\":\\"0.0.0-dev\\",\\"sentryDsn\\":\\"a-sentry-dsn\\",\\"posthogApi\\":\\"a-posthog-api\\",\\"posthogToken\\":\\"a-posthog-token\\"}",
+      "__html": "window.appConfig = {\\"hotjarId\\":\\"a-hotjar-id\\",\\"googleAnalyticsId\\":\\"ga-id\\",\\"visitorId\\":\\"a-visitor-id\\",\\"isProduction\\":true,\\"cookieYesToken\\":\\"a-cookieyes-token\\",\\"version\\":\\"0.0.0-dev\\",\\"sentryDsn\\":\\"a-sentry-dsn\\",\\"posthogApi\\":\\"a-posthog-api\\",\\"posthogToken\\":\\"a-posthog-token\\"}",
     }
   }
   id="app-config"

src/features.test.ts

@@ -11,8 +11,8 @@ describe('The feature flags', () => {
     `);
     expect(Object.values(Features)).toMatchInlineSnapshot(`
       [
-        "auth_enabled",
-        "hello_split",
+        "auth",
+        "hello",
       ]
     `);
   });

src/features.ts

@@ -1,11 +1,11 @@
 /**
  * This file contains the list of feature flags that are used in the application.
- * Please keep this file in sync with the feature flags in the Split.io dashboard.
+ * Please keep this file in sync with the feature flags in the posthog.com dashboard.
  * Also keep them sorted alphabetically.
  *
- * @see {@link https://app.split.io/}
+ * @see {@link https://posthog.com/docs/feature-flags/manual}
  */
 export enum Features {
-  AUTH = 'auth_enabled',
-  HELLO = 'hello_split'
+  AUTH = 'auth',
+  HELLO = 'hello'
 }

src/hooks/hasFeature.test.ts

@@ -1,30 +1,31 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { hasFeature } from '~/hooks/hasFeature';
+import { posthog } from '~/posthog.server';
 import { getVisitorIdFromRequest } from '~/session.server';
-import splitClient from '~/split.server';
 
-vi.mock('~/split.server');
+vi.mock('~/posthog.server', () => ({
+  posthog: {
+    isFeatureEnabled: vi.fn()
+  }
+}));
+
 vi.mock('~/session.server');
 describe('The hasFeature hook', () => {
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mocked(splitClient.ready).mockResolvedValue();
   });
 
   it('should return true for an on flag', async () => {
     const request = new Request('https://example.com');
     const feature = 'a-feature';
 
     vi.mocked(getVisitorIdFromRequest).mockResolvedValueOnce('visitorId');
-    vi.mocked(splitClient.getTreatment).mockReturnValue('on');
+    vi.mocked(posthog.isFeatureEnabled).mockResolvedValueOnce(true);
     const result = await hasFeature(request, feature as never);
 
     expect(result).toBeTruthy();
 
-    expect(splitClient.ready).toBeCalledTimes(1);
     expect(getVisitorIdFromRequest).toBeCalledTimes(1);
-    expect(splitClient.getTreatment).toBeCalledTimes(1);
-    expect(splitClient.getTreatment).toHaveBeenCalledWith('visitorId', feature);
     expect(getVisitorIdFromRequest).toHaveBeenCalledWith(request);
 
   });
@@ -33,16 +34,28 @@ describe('The hasFeature hook', () => {
     const request = new Request('https://example.com');
     const feature = 'another-feature';
 
+    vi.mocked(posthog.isFeatureEnabled).mockResolvedValueOnce(false);
     vi.mocked(getVisitorIdFromRequest).mockResolvedValueOnce('visitorId2');
-    vi.mocked(splitClient.getTreatment).mockReturnValue('off');
     const result = await hasFeature(request, feature as never);
 
     expect(result).toBeFalsy();
 
-    expect(splitClient.ready).toBeCalledTimes(1);
     expect(getVisitorIdFromRequest).toBeCalledTimes(1);
-    expect(splitClient.getTreatment).toBeCalledTimes(1);
-    expect(splitClient.getTreatment).toHaveBeenCalledWith('visitorId2', feature);
+    expect(getVisitorIdFromRequest).toHaveBeenCalledWith(request);
+
+  });
+
+  it('should return false for an undefined flag', async () => {
+    const request = new Request('https://example.com');
+    const feature = 'another-feature';
+
+    vi.mocked(posthog.isFeatureEnabled).mockResolvedValueOnce(undefined);
+    vi.mocked(getVisitorIdFromRequest).mockResolvedValueOnce('visitorId3');
+    const result = await hasFeature(request, feature as never);
+
+    expect(result).toBeFalsy();
+
+    expect(getVisitorIdFromRequest).toBeCalledTimes(1);
     expect(getVisitorIdFromRequest).toHaveBeenCalledWith(request);
 
   });

src/hooks/hasFeature.ts

@@ -1,16 +1,14 @@
+import { posthog } from '~/posthog.server';
 import { getVisitorIdFromRequest } from '~/session.server';
-import splitClient from '~/split.server';
 import type { Features } from '~/features';
 
 /**
  * @name hasFeature
  * @description
  */
 export const hasFeature = async (request: Request, feature: Features): Promise<boolean> => {
-  await splitClient.ready();
   const visitorId = await getVisitorIdFromRequest(request);
-  const serverTreatment = splitClient.getTreatment(visitorId, feature);
-
-  return serverTreatment === 'on';
+  const isEnabled = await posthog.isFeatureEnabled(feature, visitorId);
+  return !!isEnabled;
 };
 

src/posthog.server.test.ts

@@ -0,0 +1,34 @@
+import { PostHog } from 'posthog-node';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('posthog-node', () => ({
+  PostHog: vi.fn()
+}));
+
+describe('The PostHog Server', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should initialise the posthog server', async () => {
+    vi.stubEnv('POSTHOG_TOKEN', 'test-token');
+    vi.stubEnv('POSTHOG_API', 'test-api');
+    const processSpy = vi.spyOn(process, 'on');
+    const shutdownStub = vi.fn();
+    const expected = {
+      shutdownAsync: shutdownStub
+    } as never;
+
+    vi.mocked(PostHog).mockImplementation(() => expected);
+
+    const { posthog } = await import('~/posthog.server');
+    expect(PostHog).toHaveBeenCalledWith('test-token', { host: 'test-api' });
+
+    const exitCallback = processSpy.mock.calls[0][1];
+    await exitCallback();
+
+    expect(shutdownStub).toHaveBeenCalled();
+
+    expect(posthog).toEqual(expected);
+  });
+});

src/posthog.server.ts

@@ -0,0 +1,12 @@
+import { PostHog } from 'posthog-node';
+
+export const posthog = new PostHog(
+  process.env.POSTHOG_TOKEN,
+  {
+    host: process.env.POSTHOG_API
+  }
+);
+
+process.on('exit', async () => {
+  await posthog.shutdownAsync();
+});

src/root.test.tsx

@@ -6,12 +6,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useChangeLanguage } from '~/hooks/useChangeLanguage';
 import { remixI18next } from '~/i18n';
 import { createUserSession } from '~/session.server';
-import splitClient from '~/split.server';
 import App, { handle, links, loader, meta } from './root';
 
 vi.mock('~/session.server');
 vi.mock('~/i18n');
-vi.mock('~/split.server');
 vi.mock('./styles/app.css', () => ({ default: 'app.css' }));
 vi.mock('./styles/dark.css', () => ({ default: 'dark.css' }));
 vi.mock('./styles/light.css', () => ({ default: 'light.css' }));
@@ -99,15 +97,12 @@ describe('The root module', () => {
         } as never
       });
       vi.mocked(remixI18next.getLocale).mockResolvedValue('en');
-      vi.mocked(splitClient.ready).mockResolvedValue();
-      vi.mocked(splitClient.track).mockReturnValue(true);
 
       vi.stubEnv('NODE_ENV', 'development');
       vi.stubEnv('GOOGLE_ANALYTICS_ID', 'ga-id');
       vi.stubEnv('HOTJAR_ID', 'a-hotjar-id');
       vi.stubEnv('MIXPANEL_TOKEN', 'a-mixpanel-token');
       vi.stubEnv('MIXPANEL_API', 'a-mixpanel-api');
-      vi.stubEnv('SPLIT_CLIENT_TOKEN', 'a-split-token');
       vi.stubEnv('COOKIEYES_TOKEN', 'a-cookieyes-token');
 
     });
@@ -123,7 +118,6 @@ describe('The root module', () => {
             "googleAnalyticsId": "ga-id",
             "hotjarId": "a-hotjar-id",
             "isProduction": false,
-            "splitToken": "a-split-token",
             "version": "0.0.0-dev",
             "visitorId": "a-visitorId",
           },
@@ -150,7 +144,6 @@ describe('The root module', () => {
             "googleAnalyticsId": "ga-id",
             "hotjarId": "a-hotjar-id",
             "isProduction": true,
-            "splitToken": "a-split-token",
             "version": "0.0.0-dev",
             "visitorId": "a-visitorId",
           },
@@ -165,8 +158,6 @@ describe('The root module', () => {
 
       expect(createUserSession).toHaveBeenCalledWith(request);
       expect(remixI18next.getLocale).toHaveBeenCalledWith(request);
-      expect(splitClient.ready).toHaveBeenCalled();
-      expect(splitClient.track).toHaveBeenCalledWith('a-visitorId', 'anonymous', 'page_view');
 
     });
   });
@@ -177,7 +168,6 @@ describe('The root module', () => {
       googleAnalyticsId: 'ga-id',
       visitorId: 'a-visitor-id',
       isProduction: true,
-      splitToken: 'a-split-token',
       cookieYesToken: 'a-cookieyes-token',
       version: '0.0.0-dev',
       sentryDsn: 'a-sentry-dsn',

src/root.tsx

@@ -14,7 +14,6 @@ import { useChangeLanguage } from '~/hooks/useChangeLanguage';
 import { remixI18next } from '~/i18n';
 import { defaultNS } from '~/i18n/i18n.config';
 import { createUserSession } from '~/session.server';
-import splitClient from '~/split.server';
 import styles from './styles/app.css';
 import type { LinksFunction, LoaderFunction, MetaFunction } from '@remix-run/node';
 import type { ColorMode } from '~/components/ColorModeSwitcher';
@@ -40,15 +39,12 @@ export const loader: LoaderFunction = async ({ request }) => {
   const [locale, packageJson, cookieData] = await Promise.all([
     remixI18next.getLocale(request),
     import('../package.json'),
-    createUserSession(request),
-    splitClient.ready()
+    createUserSession(request)
   ]);
-  splitClient.track(cookieData.visitorId, 'anonymous', 'page_view');
   return json({
     appConfig: {
       googleAnalyticsId: process.env.GOOGLE_ANALYTICS_ID,
       hotjarId: process.env.HOTJAR_ID,
-      splitToken: process.env.SPLIT_CLIENT_TOKEN,
       cookieYesToken: process.env.COOKIEYES_TOKEN,
       isProduction: process.env.NODE_ENV === 'production',
       visitorId: cookieData.visitorId,

src/routes/index.test.tsx

@@ -9,7 +9,9 @@ vi.mock('~/components/Hello', () => ({
   Hello: () => '<Hello />',
   links: () => ['hello-links']
 }));
-vi.mock('~/hooks/hasFeature');
+vi.mock('~/hooks/hasFeature', () => ({
+  hasFeature: vi.fn()
+}));
 vi.mock('@remix-run/react');
 vi.mock('@remix-run/node');
 

src/routes/login.test.ts

@@ -5,8 +5,10 @@ import { hasFeature } from '~/hooks/hasFeature';
 import login, { loader } from './login';
 
 vi.mock('~/components/Login');
-vi.mock('~/hooks/hasFeature');
 vi.mock('@remix-run/node');
+vi.mock('~/hooks/hasFeature', () => ({
+  hasFeature: vi.fn()
+}));
 
 const redirectError = 'redirect was called';
 describe('The Login Route', () => {

types/globals.d.ts

@@ -4,7 +4,6 @@ declare global {
   interface AppConfig {
     googleAnalyticsId: string;
     hotjarId: string;
-    splitToken: string;
     cookieYesToken: string;
     isProduction: boolean;
     visitorId: string;
@@ -30,7 +29,6 @@ declare global {
       HOTJAR_ID: string;
       NODE_ENV: string;
       SESSION_SECRET: string | undefined
-      SPLIT_SERVER_TOKEN: string;
       I18N_DEBUG: string;
       SENTRY_DSN: string;
       POSTHOG_TOKEN: string;