Add low events

Author: incorbador

examples/nextjs/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,9 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
   "include": [
@@ -37,7 +31,5 @@
     "scripts/seed.js",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

packages/connect-react/src/components/login/LoginInitScreen.tsx

@@ -148,6 +148,10 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
       return;
     }
 
+    if (flags?.hasSupportForEventLow()) {
+      getConnectService().enqueueLowEvent({ eventType: 'cui-ready', timestamp: Date.now() });
+    }
+
     let cuiStarted = false;
     const res = await getConnectService().conditionalUILogin(
       ac => config.onConditionalLoginStart?.(ac),
@@ -187,6 +191,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
     }
 
     try {
+      await getConnectService().flushLowEvents();
       await config.onComplete(
         connectLoginFinishToComplete(res.val),
         getConnectService().encodeClientState(),
@@ -204,6 +209,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
 
     setIdentifierBasedLoading(true);
     setCurrentIdentifier(identifier);
+    await getConnectService().flushLowEvents();
     config.onLoginStart?.();
 
     const resStart = await getConnectService().loginStart(identifier, PasskeyLoginSource.TextField, loadedMs);
@@ -242,6 +248,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
     }
 
     try {
+      await getConnectService().flushLowEvents();
       await config.onComplete(
         connectLoginFinishToComplete(res.val),
         getConnectService().encodeClientState(),
@@ -328,6 +335,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
   // This is needed to enable multiple login instances on the same page however only one should have the autocomplete
   // Else the conditionalUI won't work
   const autoComplete = useMemo(() => (flags?.hasSupportForConditionalUI() ? 'username webauthn' : ''), [flags]);
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
 
   switch (loginInitState) {
     case LoginInitState.SilentLoading:
@@ -340,6 +348,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
           isLoading={cuiBasedLoading || identifierBasedLoading}
           error={error}
           autoComplete={autoComplete}
+          enableEventLow={enableEventLow}
           handleSubmit={() => void handleSubmit()}
           handleIdentifierUpdate={(v: string) => setIdentifier(v)}
         />

packages/connect-react/src/components/login/base/LoginInitLoaded.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
+import useLoginInputEventLow from '../../../hooks/useLoginInputEventLow';
+import useShared from '../../../hooks/useShared';
 import InputField from '../../shared/InputField';
 import { LinkButton } from '../../shared/LinkButton';
 import { Notification } from '../../shared/Notification';
@@ -9,6 +11,7 @@ interface Props {
   isLoading: boolean;
   error: string | undefined;
   autoComplete: string;
+  enableEventLow?: boolean;
   onSignupClick?: () => void;
   handleSubmit: () => void;
   handleIdentifierUpdate: (v: string) => void;
@@ -19,9 +22,19 @@ const LoginInitLoaded = ({
   error,
   onSignupClick,
   autoComplete,
+  enableEventLow = false,
   handleSubmit,
   handleIdentifierUpdate,
 }: Props) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { getConnectService } = useShared();
+
+  useLoginInputEventLow({
+    inputRef,
+    connectService: getConnectService(),
+    enabled: enableEventLow,
+  });
+
   return (
     <>
       {error ? (
@@ -37,6 +50,7 @@ const LoginInitLoaded = ({
         autoComplete={autoComplete}
         autoFocus={true}
         placeholder=''
+        ref={inputRef}
         onChange={e => handleIdentifierUpdate(e.target.value)}
       />
       <PrimaryButton

packages/connect-react/src/hooks/useLoginInputEventLow.ts

@@ -0,0 +1,184 @@
+import type { ConnectService } from '@corbado/web-core';
+import type { RefObject } from 'react';
+import { useEffect, useRef } from 'react';
+
+type Props = {
+  inputRef: RefObject<HTMLInputElement>;
+  connectService: ConnectService;
+  enabled: boolean;
+};
+
+type InputBatch = {
+  firstTimestamp: number;
+  lastTimestamp: number;
+};
+
+const useLoginInputEventLow = ({ inputRef, connectService, enabled }: Props) => {
+  const eventLowActiveRef = useRef(false);
+  const inputBatchRef = useRef<InputBatch | null>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+
+    const flushInputBatch = () => {
+      const batch = inputBatchRef.current;
+      if (!batch) {
+        return;
+      }
+
+      connectService.enqueueLowEvent({
+        eventType: 'input',
+        timestamp: batch.firstTimestamp,
+        durationMs: batch.lastTimestamp - batch.firstTimestamp,
+      });
+      inputBatchRef.current = null;
+    };
+
+    const enqueueNonInputEvent = (eventType: string) => {
+      flushInputBatch();
+      connectService.enqueueLowEvent({
+        eventType,
+        timestamp: Date.now(),
+      });
+    };
+
+    const handleFocus = () => {
+      eventLowActiveRef.current = true;
+      enqueueNonInputEvent('focus');
+    };
+
+    const handleBlur = () => {
+      enqueueNonInputEvent('blur');
+    };
+
+    const handlePointerDown = () => {
+      enqueueNonInputEvent('pointerdown');
+    };
+
+    const handlePointerUp = () => {
+      enqueueNonInputEvent('pointerup');
+    };
+
+    const handleClick = () => {
+      enqueueNonInputEvent('click');
+    };
+
+    const handleInput = () => {
+      const timestamp = Date.now();
+      const currentBatch = inputBatchRef.current;
+
+      if (!currentBatch) {
+        inputBatchRef.current = {
+          firstTimestamp: timestamp,
+          lastTimestamp: timestamp,
+        };
+        return;
+      }
+
+      currentBatch.lastTimestamp = timestamp;
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') {
+        return;
+      }
+
+      enqueueNonInputEvent('keyup-escape');
+    };
+
+    const handleWindowFocus = () => {
+      if (!eventLowActiveRef.current) {
+        return;
+      }
+
+      enqueueNonInputEvent('window-focus');
+    };
+
+    const handleWindowBlur = () => {
+      if (!eventLowActiveRef.current) {
+        return;
+      }
+
+      enqueueNonInputEvent('window-blur');
+    };
+
+    const handleVisibilityChange = () => {
+      if (!eventLowActiveRef.current) {
+        return;
+      }
+
+      enqueueNonInputEvent('document-visibilitychange');
+    };
+
+    const handleVisualViewportResize = () => {
+      if (!eventLowActiveRef.current) {
+        return;
+      }
+
+      enqueueNonInputEvent('visualviewport-resize');
+    };
+
+    const handleVisualViewportScroll = () => {
+      if (!eventLowActiveRef.current) {
+        return;
+      }
+
+      enqueueNonInputEvent('visualviewport-scroll');
+    };
+
+    const flushForTeardown = () => {
+      flushInputBatch();
+      connectService.flushLowEventsKeepalive();
+    };
+
+    input.addEventListener('focus', handleFocus);
+    input.addEventListener('blur', handleBlur);
+    input.addEventListener('pointerdown', handlePointerDown);
+    input.addEventListener('pointerup', handlePointerUp);
+    input.addEventListener('click', handleClick);
+    input.addEventListener('input', handleInput);
+    input.addEventListener('keyup', handleKeyUp);
+
+    window.addEventListener('focus', handleWindowFocus);
+    window.addEventListener('blur', handleWindowBlur);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    // window.addEventListener('pagehide', flushForTeardown);
+    window.visualViewport?.addEventListener('resize', handleVisualViewportResize);
+    window.visualViewport?.addEventListener('scroll', handleVisualViewportScroll);
+
+    if (document.activeElement === input) {
+      handleFocus();
+    }
+
+    console.log('Started login input eventLow');
+
+    return () => {
+      console.log('Tearing down login input eventLow');
+      flushForTeardown();
+
+      input.removeEventListener('focus', handleFocus);
+      input.removeEventListener('blur', handleBlur);
+      input.removeEventListener('pointerdown', handlePointerDown);
+      input.removeEventListener('pointerup', handlePointerUp);
+      input.removeEventListener('click', handleClick);
+      input.removeEventListener('input', handleInput);
+      input.removeEventListener('keyup', handleKeyUp);
+
+      window.removeEventListener('focus', handleWindowFocus);
+      window.removeEventListener('blur', handleWindowBlur);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      // window.removeEventListener('pagehide', flushForTeardown);
+      window.visualViewport?.removeEventListener('resize', handleVisualViewportResize);
+      window.visualViewport?.removeEventListener('scroll', handleVisualViewportScroll);
+    };
+  }, [connectService, enabled, inputRef]);
+};
+
+export default useLoginInputEventLow;

packages/connect-react/src/types/flags.ts

@@ -1,5 +1,6 @@
 const keyConditionalUI = 'conditional-ui-allowed';
 const keyAutoAppend = 'automatic-append';
+const keyEventLow = 'event-low';
 
 export class Flags {
   readonly items: Record<string, string>;
@@ -21,4 +22,8 @@ export class Flags {
   hasSupportForAutomaticAppend(): boolean {
     return this.items[keyAutoAppend] === 'true';
   }
+
+  hasSupportForEventLow(): boolean {
+    return this.items[keyEventLow] === 'true';
+  }
 }