feat: implemented change tracker + highlighting

library/src/components/Highlight/Highlight.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from 'react';
+
+interface HighlightProps {
+  elementId: string;
+  duration?: number;
+}
+
+export const Highlight: React.FC<HighlightProps> = ({ elementId, duration = 2000 }) => {
+  const highlightRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = document.getElementById(elementId);
+    if (!element || !highlightRef.current) return;
+
+    const rect = element.getBoundingClientRect();
+    const highlight = highlightRef.current;
+
+    // Position the highlight overlay
+    highlight.style.top = `${rect.top + window.scrollY}px`;
+    highlight.style.left = `${rect.left + window.scrollX}px`;
+    highlight.style.width = `${rect.width}px`;
+    highlight.style.height = `${rect.height}px`;
+    highlight.style.opacity = '1';
+
+    // Scroll the element into view
+    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+    // Fade out the highlight after the duration
+    const timeout = setTimeout(() => {
+      highlight.style.opacity = '0';
+    }, duration);
+
+    return () => clearTimeout(timeout);
+  }, [elementId, duration]);
+
+  return (
+    <div
+      ref={highlightRef}
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        transition: 'opacity 0.5s ease-out',
+        opacity: '0',
+        backgroundColor: 'rgba(3, 169, 244, 0.1)',
+        border: '2px solid rgba(3, 169, 244, 0.4)',
+        borderRadius: '4px',
+        zIndex: 1000,
+      }}
+    />
+  );
+};

library/src/components/index.ts

@@ -7,3 +7,4 @@ export * from './Markdown';
 export * from './Schema';
 export * from './Tag';
 export * from './Tags';
+export * from './Highlight/Highlight';

library/src/containers/AsyncApi/AsyncApi.tsx

@@ -2,6 +2,7 @@
 import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 import AsyncApiStandalone from './Standalone';
+import { Highlight } from '../../components/Highlight/Highlight';
 
 import {
   isFetchingSchemaInterface,
@@ -10,6 +11,7 @@
 } from '../../types';
 import { ConfigInterface } from '../../config';
 import { SpecificationHelpers, Parser } from '../../helpers';
+import { ChangeTracker } from '../../helpers/ChangeTracker';
 
 export interface AsyncApiProps {
   schema: PropsSchema;
@@ -19,12 +21,14 @@
 interface AsyncAPIState {
   asyncapi?: AsyncAPIDocumentInterface;
   error?: ErrorObject;
+  highlightedElement?: string;
 }
 
 class AsyncApiComponent extends Component<AsyncApiProps, AsyncAPIState> {
   state: AsyncAPIState = {
     asyncapi: undefined,
     error: undefined,
+    highlightedElement: undefined,
   };
 
   async componentDidMount() {
@@ -41,19 +45,36 @@
     if (oldSchema !== newSchema) {
       const { config } = this.props;
       await this.parseSchema(newSchema, config?.parserOptions);
+
+      // Detect changes and update highlight
+      if (typeof oldSchema === 'string' && typeof newSchema === 'string') {
+        const changes = await ChangeTracker.detectChanges(oldSchema, newSchema);
+        if (changes.length > 0) {
+          // Get the first changed element to highlight
+          this.setState({ highlightedElement: changes[0].elementId });
+        }
+      }
     }
   }
 
   render() {
     const { schema, config } = this.props;
-    const { asyncapi, error } = this.state;
+    const { asyncapi, error, highlightedElement } = this.state;
 
     return (
-      <AsyncApiStandalone
-        schema={asyncapi ?? schema}
-        config={config}
-        error={error}
-      />
+      <>
+        <AsyncApiStandalone
+          schema={asyncapi ?? schema}
+          config={config}
+          error={error}
+        />
+        {highlightedElement && (
+          <Highlight
+            elementId={highlightedElement}
+            duration={2000}
+          />
+        )}
+      </>
     );
   }
 

library/src/helpers/ChangeTracker.ts

@@ -0,0 +1,73 @@
+import { Parser } from './parser';
+import { ParserReturn } from '../types';
+
+interface Change {
+  path: string[];
+  type: 'add' | 'remove' | 'modify';
+  elementId: string;
+}
+
+export class ChangeTracker {
+  private static async parseSchema(schema: string): Promise<ParserReturn | null> {
+    try {
+      return await Parser.parse(schema);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  static async detectChanges(oldSchema: string, newSchema: string): Promise<Change[]> {
+    const oldParsed = await this.parseSchema(oldSchema);
+    const newParsed = await this.parseSchema(newSchema);
+
+    if (!oldParsed?.asyncapi || !newParsed?.asyncapi) return [];
+
+    const oldDoc = oldParsed.asyncapi;
+    const newDoc = newParsed.asyncapi;
+    const changes: Change[] = [];
+
+    // Compare info section
+    if (JSON.stringify(oldDoc.info()) !== JSON.stringify(newDoc.info())) {
+      changes.push({
+        path: ['info'],
+        type: 'modify',
+        elementId: 'introduction'
+      });
+    }
+
+    // Compare servers
+    const oldServers = oldDoc.servers();
+    const newServers = newDoc.servers();
+    if (JSON.stringify(oldServers) !== JSON.stringify(newServers)) {
+      changes.push({
+        path: ['servers'],
+        type: 'modify',
+        elementId: 'servers'
+      });
+    }
+
+    // Compare channels
+    const oldChannels = oldDoc.channels();
+    const newChannels = newDoc.channels();
+    if (JSON.stringify(oldChannels) !== JSON.stringify(newChannels)) {
+      changes.push({
+        path: ['channels'],
+        type: 'modify',
+        elementId: 'operations'
+      });
+    }
+
+    // Compare schemas
+    const oldSchemas = oldDoc.components()?.schemas()?.all() || [];
+    const newSchemas = newDoc.components()?.schemas()?.all() || [];
+    if (JSON.stringify(oldSchemas) !== JSON.stringify(newSchemas)) {
+      changes.push({
+        path: ['components', 'schemas'],
+        type: 'modify',
+        elementId: 'schemas'
+      });
+    }
+
+    return changes;
+  }
+}