@thumbmarkjs/thumbmarkjs 1.3.4 → 1.4.0

package/src/components/mathml/index.ts

@@ -1,6 +1,7 @@
 import { componentInterface } from '../../factory';
 import { hash } from '../../utils/hash';
 import { ephemeralIFrame } from '../../utils/ephemeralIFrame';
+import { stableStringify } from '../../utils/stableStringify';
 
 const BLACKBOARD_BOLD = ['\uD835\uDD04', '\uD835\uDD05', '\u212D', '\uD835\uDD07', '\uD835\uDD08', '\uD835\uDD09', '\uD835\uDD38', '\uD835\uDD39', '\u2102', '\uD835\uDD3B', '\uD835\uDD3C', '\uD835\uDD3D'];
 const GREEK_SYMBOLS = ['\u03B2', '\u03C8', '\u03BB', '\u03B5', '\u03B6', '\u03B1', '\u03BE', '\u03BC', '\u03C1', '\u03C6', '\u03BA', '\u03C4', '\u03B7', '\u03C3', '\u03B9', '\u03C9', '\u03B3', '\u03BD', '\u03C7', '\u03B4', '\u03B8', '\u03C0', '\u03C5', '\u03BF'];
@@ -38,7 +39,7 @@ export default async function getMathML(): Promise<componentInterface | null> {
             });
             // Capture font style hash from the first structure (it's the same for all)
             if (i === 0 && measurement.fontInfo) {
-              fontStyleHash = hash(JSON.stringify(measurement.fontInfo));
+              fontStyleHash = hash(stableStringify(measurement.fontInfo));
             }
           });
 
@@ -50,7 +51,7 @@ export default async function getMathML(): Promise<componentInterface | null> {
           resolve({
             //supported: true,
             details,
-            hash: hash(JSON.stringify(details))
+            hash: hash(stableStringify(details))
           });
 
         } catch (error) {
@@ -92,7 +93,7 @@ function createMathML(name: string, content: string): string {
 
 function createComplexNestedStructure(): string {
   let nestedContent = '<mo>\u220F</mo>'; // Product symbol (∏)
-  
+
   // Add all symbol combinations inside the main structure
   BLACKBOARD_BOLD.forEach((bbSymbol, bbIndex) => {
     const startIdx = bbIndex * 2;
@@ -102,7 +103,7 @@ function createComplexNestedStructure(): string {
       nestedContent += `<mmultiscripts><mi>${bbSymbol}</mi><none/><mi>${greekSet[1]}</mi><mprescripts></mprescripts><mi>${greekSet[0]}</mi><none/></mmultiscripts>`;
     }
   });
-  
+
   return createMathML('complex_nested',
     `<munderover><mmultiscripts>${nestedContent}</mmultiscripts></munderover>`
   );
@@ -110,7 +111,7 @@ function createComplexNestedStructure(): string {
 
 function createSymbolStructures(): string[] {
   const structures: string[] = [];
-  
+
   // Use blackboard bold as base symbols with Greek symbols as subscripts/superscripts
   BLACKBOARD_BOLD.forEach((bbSymbol, bbIndex) => {
     // Get 2 Greek symbols for this blackboard bold symbol (lower left, top right)
@@ -123,7 +124,7 @@ function createSymbolStructures(): string[] {
       ));
     }
   });
-  
+
   return structures;
 }
 

package/src/components/speech/index.ts

@@ -1,5 +1,6 @@
 import { componentInterface } from '../../factory';
 import { hash } from '../../utils/hash';
+import { stableStringify } from '../../utils/stableStringify';
 
 const VOICE_LOAD_TIMEOUT = 800; // milliseconds to wait for voices to load
 
@@ -53,12 +54,12 @@ export default async function getSpeech(): Promise<componentInterface | null> {
           // Create details object with count and hash
           const details = {
             voiceCount: voices.length,
-            voicesHash: hash(JSON.stringify(voiceSignatures))
+            voicesHash: hash(stableStringify(voiceSignatures))
           };
 
           resolve({
             details,
-            hash: hash(JSON.stringify(details))
+            hash: hash(stableStringify(details))
           });
 
         } catch (error) {

package/src/components/webrtc/index.ts

@@ -1,5 +1,6 @@
 import { componentInterface } from '../../factory';
 import { hash } from '../../utils/hash';
+import { stableStringify } from '../../utils/stableStringify';
 
 export default async function getWebRTC(): Promise<componentInterface | null> {
   return new Promise((resolve) => {
@@ -29,7 +30,7 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
           await connection.setLocalDescription(offer);
 
           const sdp = offer.sdp || '';
-          
+
           // Extract RTP extensions
           const extensions = [...new Set((sdp.match(/extmap:\d+ [^\n\r]+/g) || []).map((x: string) => x.replace(/extmap:\d+ /, '')))].sort();
 
@@ -70,13 +71,13 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
           const compressedData = {
             audio: {
               count: audioCodecs.length,
-              hash: hash(JSON.stringify(audioCodecs))
+              hash: hash(stableStringify(audioCodecs))
             },
             video: {
               count: videoCodecs.length,
-              hash: hash(JSON.stringify(videoCodecs))
+              hash: hash(stableStringify(videoCodecs))
             },
-            extensionsHash: hash(JSON.stringify(extensions))
+            extensionsHash: hash(stableStringify(extensions))
           };
 
           // Set up for ICE candidate collection with timeout
@@ -111,7 +112,7 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
 
           resolve({
             details: result,
-            hash: hash(JSON.stringify(result)),
+            hash: hash(stableStringify(result)),
           });
 
         } catch (error) {

package/src/functions/api.ts

@@ -3,6 +3,7 @@ import { componentInterface } from '../factory';
 import { getVisitorId, setVisitorId } from '../utils/visitorId';
 import { getVersion } from "../utils/version";
 import { hash } from '../utils/hash';
+import { stableStringify } from '../utils/stableStringify';
 
 // ===================== Types & Interfaces =====================
 
@@ -37,6 +38,7 @@ interface apiResponse {
     version?: string;
     components?: componentInterface;
     visitorId?: string;
+    thumbmark?: string;
 }
 
 // ===================== API Call Logic =====================
@@ -66,16 +68,16 @@ export const getApiPromise = (
     const apiEndpoint = options.api_endpoint || DEFAULT_API_ENDPOINT;
     const endpoint = `${apiEndpoint}/thumbmark`;
     const visitorId = getVisitorId();
-    const requestBody: any = { 
-        components, 
-        options, 
-        clientHash: hash(JSON.stringify(components)), 
+    const requestBody: any = {
+        components,
+        options,
+        clientHash: hash(stableStringify(components)),
         version: getVersion()
     };
     if (visitorId) {
         requestBody.visitorId = visitorId;
     }
-    
+
     const fetchPromise = fetch(endpoint, {
         method: 'POST',
         headers: {

package/src/functions/index.ts

@@ -7,13 +7,13 @@
  */
 
 import { defaultOptions, optionsInterface } from "../options";
-import { 
-    timeoutInstance,
-    componentInterface,
-    tm_component_promises,
-    customComponents,
-    tm_experimental_component_promises,
-    includeComponent as globalIncludeComponent
+import {
+  timeoutInstance,
+  componentInterface,
+  tm_component_promises,
+  customComponents,
+  tm_experimental_component_promises,
+  includeComponent as globalIncludeComponent
 } from "../factory";
 import { hash } from "../utils/hash";
 import { raceAllPerformance } from "../utils/raceAll";
@@ -21,20 +21,21 @@ import { getVersion } from "../utils/version";
 import { filterThumbmarkData } from './filterComponents'
 import { logThumbmarkData } from '../utils/log';
 import { getApiPromise, infoInterface } from "./api";
+import { stableStringify } from "../utils/stableStringify";
 
 
 /**
  * Final thumbmark response structure
  */
 interface thumbmarkResponse {
-    components: componentInterface,
-    info: { [key: string]: any },
-    version: string,
-    thumbmark: string,
-    visitorId?: string,
-    elapsed?: any;
-    error?: string;
-    experimental?: componentInterface;
+  components: componentInterface,
+  info: { [key: string]: any },
+  version: string,
+  thumbmark: string,
+  visitorId?: string,
+  elapsed?: any;
+  error?: string;
+  experimental?: componentInterface;
 }
 
 /**
@@ -44,69 +45,73 @@ interface thumbmarkResponse {
  * @returns thumbmarkResponse (elapsed is present only if options.performance is true)
  */
 export async function getThumbmark(options?: optionsInterface): Promise<thumbmarkResponse> {
-    const _options = { ...defaultOptions, ...options };
-       
-    // Early logging decision
-    const shouldLog = (_options.logging && !sessionStorage.getItem("_tmjs_l") && Math.random() < 0.0001);
-    
-    // Merge built-in and user-registered components
-    const allComponents = { ...tm_component_promises, ...customComponents };
-    const { elapsed, resolvedComponents: clientComponentsResult } = await resolveClientComponents(allComponents, _options);
-
-    // Resolve experimental components only when logging
-    let experimentalComponents = {};
-    let experimentalElapsed = {};
-    if (shouldLog || _options.experimental) {
-        const { elapsed: expElapsed, resolvedComponents } = await resolveClientComponents(tm_experimental_component_promises, _options);
-        experimentalComponents = resolvedComponents;
-        experimentalElapsed = expElapsed;
-    }
+  const _options = { ...defaultOptions, ...options };
 
-    const apiPromise = _options.api_key ? getApiPromise(_options, clientComponentsResult) : null;
-    let apiResult = null;
-    
-    if (apiPromise) {
-        try {
-            apiResult = await apiPromise;
-        } catch (error) {
-            // Handle API key/quota errors
-            if (error instanceof Error && error.message === 'INVALID_API_KEY') {
-                return {
-                    error: 'Invalid API key or quota exceeded',
-                    components: {},
-                    info: {},
-                    version: getVersion(),
-                    thumbmark: ''
-                };
-            }
-            throw error; // Re-throw other errors
-        }
-    }
+  // Early logging decision
+  const shouldLog = (_options.logging && !sessionStorage.getItem("_tmjs_l") && Math.random() < 0.0001);
+
+  // Merge built-in and user-registered components
+  const allComponents = { ...tm_component_promises, ...customComponents };
+  const { elapsed, resolvedComponents: clientComponentsResult } = await resolveClientComponents(allComponents, _options);
+
+  // Resolve experimental components only when logging
+  let experimentalComponents = {};
+  let experimentalElapsed = {};
+  if (shouldLog || _options.experimental) {
+    const { elapsed: expElapsed, resolvedComponents } = await resolveClientComponents(tm_experimental_component_promises, _options);
+    experimentalComponents = resolvedComponents;
+    experimentalElapsed = expElapsed;
+  }
+
+  const apiPromise = _options.api_key ? getApiPromise(_options, clientComponentsResult) : null;
+  let apiResult = null;
 
-    // Only add 'elapsed' if performance is true
-    const allElapsed = { ...elapsed, ...experimentalElapsed };
-    const maybeElapsed = _options.performance ? { elapsed: allElapsed } : {};
-    const apiComponents = filterThumbmarkData(apiResult?.components || {}, _options);
-    const components = {...clientComponentsResult, ...apiComponents};
-    const info: infoInterface = apiResult?.info || { uniqueness: { score: 'api only' } };
-    const thumbmark = hash(JSON.stringify(components));
-    const version = getVersion();
-    // Only log to server when not in debug mode
-    if (shouldLog) {
-        logThumbmarkData(thumbmark, components, _options, experimentalComponents).catch(() => { /* do nothing */ });
+  if (apiPromise) {
+    try {
+      apiResult = await apiPromise;
+    } catch (error) {
+      // Handle API key/quota errors
+      if (error instanceof Error && error.message === 'INVALID_API_KEY') {
+        return {
+          error: 'Invalid API key or quota exceeded',
+          components: {},
+          info: {},
+          version: getVersion(),
+          thumbmark: ''
+        };
+      }
+      throw error; // Re-throw other errors
     }
-    
-    const result: thumbmarkResponse = {
-        ...(apiResult?.visitorId && { visitorId: apiResult.visitorId }),
-        thumbmark,
-        components: components,
-        info,
-        version,
-        ...maybeElapsed,
-        ...(Object.keys(experimentalComponents).length > 0 && _options.experimental && { experimental: experimentalComponents }),
-    };
-    
-    return result;
+  }
+
+  // Only add 'elapsed' if performance is true
+  const allElapsed = { ...elapsed, ...experimentalElapsed };
+  const maybeElapsed = _options.performance ? { elapsed: allElapsed } : {};
+  const apiComponents = filterThumbmarkData(apiResult?.components || {}, _options);
+  const components = { ...clientComponentsResult, ...apiComponents };
+  const info: infoInterface = apiResult?.info || { uniqueness: { score: 'api only' } };
+
+  // Use API thumbmark if available to ensure API/client sync, otherwise calculate locally
+  console.log(apiResult);
+  const thumbmark = apiResult?.thumbmark ?? hash(stableStringify(components));
+  const version = getVersion();
+
+  // Only log to server when not in debug mode
+  if (shouldLog) {
+    logThumbmarkData(thumbmark, components, _options, experimentalComponents).catch(() => { /* do nothing */ });
+  }
+
+  const result: thumbmarkResponse = {
+    ...(apiResult?.visitorId && { visitorId: apiResult.visitorId }),
+    thumbmark,
+    components: components,
+    info,
+    version,
+    ...maybeElapsed,
+    ...(Object.keys(experimentalComponents).length > 0 && _options.experimental && { experimental: experimentalComponents }),
+  };
+
+  return result;
 }
 
 // ===================== Component Resolution & Performance =====================

package/src/index.ts

@@ -2,19 +2,24 @@ import {
     getFingerprint,
     getFingerprintData,
     getFingerprintPerformance
- } from './functions/legacy_functions'
+} from './functions/legacy_functions'
 import { getThumbmark } from './functions'
 import { getVersion } from './utils/version';
 import { setOption, optionsInterface, stabilizationExclusionRules } from './options'
 import { includeComponent } from './factory'
 import { Thumbmark } from './thumbmark'
 import { filterThumbmarkData } from './functions/filterComponents'
+import { stableStringify } from './utils/stableStringify'
+
+export {
+    Thumbmark, getThumbmark, getVersion,
 
-export { Thumbmark, getThumbmark, getVersion,
-    
     // Filtering functions for server-side use
     filterThumbmarkData, optionsInterface, stabilizationExclusionRules,
 
+    // Stable JSON stringify for consistent hashing
+    stableStringify,
+
     // deprecated functions. Don't use anymore.
     setOption, getFingerprint, getFingerprintData, getFingerprintPerformance, includeComponent
 }