Merge pull request #15 from motiz88/scrape-hermes-cdpagent

motiz88 · web-flow · commit 555bdffb36c4 · 2024-06-17T12:35:20.000+01:00
Scrape modern Hermes implementation (CDPAgent) instead of CDPHandler, enable `@cdp` comments
diff --git a/app/devtools-protocol/[version]/ImplementationLink.tsx b/app/devtools-protocol/[version]/ImplementationLink.tsx
@@ -28,13 +28,29 @@ export async function ImplementationLink({
             width={20}
             height={20}
             alt=""
-            title="Hermes CDPHandler"
+            title="Hermes CDPAgent"
             className="inline-block mb-1"
           />
         </>
       );
       break;
 
+    case 'hermes-legacy':
+      linkContents = (
+        <>
+          Hermes (legacy){' '}
+          <Image
+            src="/images/hermes-logo.svg"
+            width={20}
+            height={20}
+            alt=""
+            title="Hermes CDPHandler"
+            className="inline-block mb-1 grayscale"
+          />
+        </>
+      );
+      break;
+      
     case 'react-native':
       linkContents = (
         <>
diff --git a/app/devtools-protocol/[version]/[domain]/DomainEventsCard.tsx b/app/devtools-protocol/[version]/[domain]/DomainEventsCard.tsx
@@ -28,7 +28,7 @@ export function DomainEventsCard({
     domain.events != null &&
     domain.events?.length !== 0 && (
       <>
-        <h2 className="font-bold text-lg mt-4 mb-2 max-w-4xl mx-auto">
+        <h2 className="font-bold text-lg mt-4 mb-2 max-w-5xl mx-auto">
           Events
         </h2>
         <Card>
diff --git a/app/devtools-protocol/[version]/[domain]/DomainMemberExternalComments.tsx b/app/devtools-protocol/[version]/[domain]/DomainMemberExternalComments.tsx
@@ -28,10 +28,21 @@ function CommentImplementationIcon({
           width={20}
           height={20}
           alt=""
-          title="Hermes CDPHandler"
+          title="Hermes CDPAgent"
           className="inline-block mb-1"
         />
       );
+    case 'hermes-legacy':
+      return (
+        <Image
+          src="/images/hermes-logo.svg"
+          width={20}
+          height={20}
+          alt=""
+          title="Hermes CDPHandler"
+          className="inline-block mb-1 grayscale"
+        />
+      );
     case 'react-native':
       return (
         <Image
@@ -168,6 +179,20 @@ export function DomainMemberExternalComments({
         memberKey={memberKey}
         protocolImplementationData={protocolImplementationData}
       />
+      <DomainMemberExternalCommentsForImplementation
+        domain={domain}
+        implementationId="hermes"
+        kind={kind}
+        memberKey={memberKey}
+        protocolImplementationData={protocolImplementationData}
+      />
+      <DomainMemberExternalCommentsForImplementation
+        domain={domain}
+        implementationId="hermes-legacy"
+        kind={kind}
+        memberKey={memberKey}
+        protocolImplementationData={protocolImplementationData}
+      />
     </div>
   );
 }
diff --git a/app/devtools-protocol/[version]/[domain]/DomainMemberExternalLinks.tsx b/app/devtools-protocol/[version]/[domain]/DomainMemberExternalLinks.tsx
@@ -42,6 +42,13 @@ export function DomainMemberExternalLinks({
         memberKey={memberKey}
         protocolImplementationData={protocolImplementationData}
       />
+      <DomainMemberImplementationLink
+        domain={domain}
+        implementationId="hermes-legacy"
+        kind={kind}
+        memberKey={memberKey}
+        protocolImplementationData={protocolImplementationData}
+      />
       <DomainMemberImplementationLink
         domain={domain}
         implementationId="react-native"
diff --git a/app/devtools-protocol/[version]/[domain]/DomainMemberHeading.tsx b/app/devtools-protocol/[version]/[domain]/DomainMemberHeading.tsx
@@ -40,7 +40,7 @@ export function DomainMemberHeading({
         protocolMetadata={protocolMetadata}
       />
       <h3
-        className="font-bold text-lg mt-4 mb-2 max-w-4xl mx-auto font-mono"
+        className="font-bold text-lg mt-4 mb-2 max-w-5xl mx-auto font-mono"
         id={`${kind}-${encodeURIComponent(key)}`}
       >
         <DimText>{domain}.</DimText>
diff --git a/app/devtools-protocol/[version]/[domain]/DomainMemberImplementationLink.tsx b/app/devtools-protocol/[version]/[domain]/DomainMemberImplementationLink.tsx
@@ -18,7 +18,7 @@ export function DomainMemberImplementationLink({
   protocolImplementationData,
   small,
 }: {
-  implementationId: 'hermes' | 'react-native' | 'react-native-hermes';
+  implementationId: 'hermes' | 'hermes-legacy' | 'react-native' | 'react-native-hermes';
   kind: 'method' | 'event' | 'type';
   domain: string;
   memberKey: string;
@@ -42,12 +42,25 @@ export function DomainMemberImplementationLink({
           width={small ? 20 : 24}
           height={small ? 20 : 24}
           alt="Hermes"
-          title="Referenced in Hermes CDPHandler"
+          title="Referenced in Hermes CDPAgent"
           className="inline-block"
         />
       );
       break;
     }
+    case 'hermes-legacy': {
+      linkContents = (
+        <Image
+          src="/images/hermes-logo.svg"
+          width={small ? 20 : 24}
+          height={small ? 20 : 24}
+          alt="Hermes (Legacy)"
+          title="Referenced in Hermes CDPHandler"
+          className="inline-block grayscale"
+        />
+      );
+      break;
+    }
     case 'react-native': {
       linkContents = (
         <Image
diff --git a/app/devtools-protocol/[version]/[domain]/DomainMethodsCard.tsx b/app/devtools-protocol/[version]/[domain]/DomainMethodsCard.tsx
@@ -29,7 +29,7 @@ export function DomainMethodsCard({
     domain.commands != null &&
     domain.commands?.length !== 0 && (
       <>
-        <h2 className="font-bold text-lg mt-4 mb-2 max-w-4xl mx-auto">
+        <h2 className="font-bold text-lg mt-4 mb-2 max-w-5xl mx-auto">
           Methods
         </h2>
         <Card>
diff --git a/app/devtools-protocol/[version]/[domain]/DomainTocSection.tsx b/app/devtools-protocol/[version]/[domain]/DomainTocSection.tsx
@@ -58,6 +58,14 @@ export function DomainTocSection({
                   protocolImplementationData={protocolImplementationData}
                   small
                 />
+                <DomainMemberImplementationLink
+                  domain={domain}
+                  implementationId="hermes-legacy"
+                  kind={kind}
+                  memberKey={key}
+                  protocolImplementationData={protocolImplementationData}
+                  small
+                />
                 <DomainMemberImplementationLink
                   domain={domain}
                   implementationId="react-native"
diff --git a/app/devtools-protocol/[version]/[domain]/DomainTypesCard.tsx b/app/devtools-protocol/[version]/[domain]/DomainTypesCard.tsx
@@ -30,7 +30,7 @@ export function DomainTypesCard({
     domain.types != null &&
     domain.types.length !== 0 && (
       <>
-        <h2 className="font-bold text-lg mt-4 mb-2 max-w-4xl mx-auto">Types</h2>
+        <h2 className="font-bold text-lg mt-4 mb-2 max-w-5xl mx-auto">Types</h2>
         <Card>
           {domain.types.map((type, index) => (
             <div key={type.id} className="group">
diff --git a/app/devtools-protocol/[version]/page.tsx b/app/devtools-protocol/[version]/page.tsx
@@ -60,6 +60,12 @@ export default async function ProtocolVersionPage({
           protocol={protocol.protocol}
           protocolImplementationData={protocolImplementationData}
         />
+        <ImplementationStats
+          implementationId="hermes-legacy"
+          implementation={implementationModelsById.get('hermes-legacy')!}
+          protocol={protocol.protocol}
+          protocolImplementationData={protocolImplementationData}
+        />
         <ImplementationStats
           implementationId="react-native-hermes"
           implementation={implementationModelsById.get('react-native-hermes')!}
diff --git a/data/CdpComments.test.tsx b/data/CdpComments.test.tsx
@@ -56,6 +56,8 @@ const y = 20; // This is another inline @cdp symbol1 comment
 
 // @cdp symbol3's mentions can use punctuation without confusing the parser.
 // @cdp symbol3.@cdp symbol3, @cdp symbol3?
+
+/// @cdp symbol4 in a doxygen-style comment
 `,
     ],
   ] as const;
diff --git a/data/CdpComments.tsx b/data/CdpComments.tsx
@@ -65,7 +65,7 @@ function cleanCommentSource(comment: string) {
     .replace(/^\/\*\*?/, '')
     .replace(/\*\/$/, '')
     // Remove line comment start tokens
-    .replace(/^\s*\/\/\s*/gm, '')
+    .replace(/^\s*\/\/\/?\s*/gm, '')
     // Remove leading asterisks from each line
     .replace(/^\s*\* ?/gm, '')
     // Remove leading/trailing newlines
diff --git a/data/HermesImplementationModel.tsx b/data/HermesImplementationModel.tsx
diff --git a/data/HermesLegacyImplementationModel.tsx b/data/HermesLegacyImplementationModel.tsx
diff --git a/data/__snapshots__/CdpComments.test.tsx.snap b/data/__snapshots__/CdpComments.test.tsx.snap
diff --git a/data/implementations.tsx b/data/implementations.tsx
diff --git a/ui/components/Card.tsx b/ui/components/Card.tsx

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export function DomainMemberHeading({`
`40`	`40`	`protocolMetadata={protocolMetadata}`
`41`	`41`	`/>`
`42`	`42`	`<h3`
`43`		`- className="font-bold text-lg mt-4 mb-2 max-w-4xl mx-auto font-mono"`
	`43`	`+ className="font-bold text-lg mt-4 mb-2 max-w-5xl mx-auto font-mono"`
`44`	`44`	id={`${kind}-${encodeURIComponent(key)}`}
`45`	`45`	`>`
`46`	`46`	`<DimText>{domain}.</DimText>`