Merge branch 'main' of https://github.com/abedshaaban/tanstack-devtools

Author: abedshaaban

examples/react/bundling-repro/.wrangler/deploy/config.json

@@ -1 +1 @@
-{"configPath":"../../dist/server/wrangler.json","auxiliaryWorkers":[]}
+{ "configPath": "../../dist/server/wrangler.json", "auxiliaryWorkers": [] }

packages/devtools/src/styles/use-styles.ts

@@ -670,15 +670,17 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       background: ${t(colors.gray[100], colors.gray[800])};
       border: 1px solid ${t(colors.gray[200], colors.gray[700])};
       overflow: hidden;
-      box-shadow: inset 0 1px 2px ${t('rgba(15, 23, 42, 0.06)', 'rgba(0, 0, 0, 0.35)')};
+      box-shadow: inset 0 1px 2px
+        ${t('rgba(15, 23, 42, 0.06)', 'rgba(0, 0, 0, 0.35)')};
     `,
     seoHealthFill: css`
       height: 100%;
       min-width: 0;
       max-width: 100%;
       border-radius: 999px;
       transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
-      box-shadow: 0 1px 2px ${t('rgba(15, 23, 42, 0.12)', 'rgba(0, 0, 0, 0.25)')};
+      box-shadow: 0 1px 2px
+        ${t('rgba(15, 23, 42, 0.12)', 'rgba(0, 0, 0, 0.25)')};
     `,
     seoHealthFillGood: css`
       background: linear-gradient(

packages/devtools/src/tabs/seo-tab/README.md

@@ -187,4 +187,4 @@ Checks included:
 - Page marked as `noindex` (`error`)
 - Page marked as `nofollow` (`warning`)
 - Missing robots directives (`info`)
-- URL query parameters present (`info`)
+- URL query parameters present (`info`)

packages/devtools/src/tabs/seo-tab/heading-structure-preview.tsx

@@ -191,7 +191,9 @@ export function HeadingStructurePreviewSection() {
                   </span>
                   <span
                     class={
-                      heading.text ? s.seoHeadingLineText : s.seoHeadingLineTextEmpty
+                      heading.text
+                        ? s.seoHeadingLineText
+                        : s.seoHeadingLineTextEmpty
                     }
                   >
                     {heading.text || '(empty)'}
@@ -212,7 +214,9 @@ export function HeadingStructurePreviewSection() {
                 <li class={s.seoIssueRow}>
                   <span class={issueBulletClass(issue.severity)}>●</span>
                   <span class={s.seoIssueMessage}>{issue.message}</span>
-                  <span class={issueBadgeClass(issue.severity)}>{issue.severity}</span>
+                  <span class={issueBadgeClass(issue.severity)}>
+                    {issue.severity}
+                  </span>
                 </li>
               )}
             </For>

packages/devtools/src/tabs/seo-tab/seo-section-summary.ts

@@ -24,9 +24,7 @@ export type SeoDetailView =
   | 'heading-structure'
   | 'links-preview'
 
-export function worstSeverity(
-  issues: Array<SeoIssue>,
-): SeoSeverity | null {
+export function worstSeverity(issues: Array<SeoIssue>): SeoSeverity | null {
   if (issues.some((i) => i.severity === 'error')) return 'error'
   if (issues.some((i) => i.severity === 'warning')) return 'warning'
   if (issues.some((i) => i.severity === 'info')) return 'info'

packages/devtools/src/tabs/seo-tab/social-previews.tsx

@@ -172,19 +172,37 @@ function socialAccentClasses(
 ): { card: string; header: string } {
   switch (accent) {
     case 'facebook':
-      return { card: s.seoSocialAccentFacebook, header: s.seoSocialHeaderFacebook }
+      return {
+        card: s.seoSocialAccentFacebook,
+        header: s.seoSocialHeaderFacebook,
+      }
     case 'twitter':
-      return { card: s.seoSocialAccentTwitter, header: s.seoSocialHeaderTwitter }
+      return {
+        card: s.seoSocialAccentTwitter,
+        header: s.seoSocialHeaderTwitter,
+      }
     case 'linkedin':
-      return { card: s.seoSocialAccentLinkedin, header: s.seoSocialHeaderLinkedin }
+      return {
+        card: s.seoSocialAccentLinkedin,
+        header: s.seoSocialHeaderLinkedin,
+      }
     case 'discord':
-      return { card: s.seoSocialAccentDiscord, header: s.seoSocialHeaderDiscord }
+      return {
+        card: s.seoSocialAccentDiscord,
+        header: s.seoSocialHeaderDiscord,
+      }
     case 'slack':
       return { card: s.seoSocialAccentSlack, header: s.seoSocialHeaderSlack }
     case 'mastodon':
-      return { card: s.seoSocialAccentMastodon, header: s.seoSocialHeaderMastodon }
+      return {
+        card: s.seoSocialAccentMastodon,
+        header: s.seoSocialHeaderMastodon,
+      }
     case 'bluesky':
-      return { card: s.seoSocialAccentBluesky, header: s.seoSocialHeaderBluesky }
+      return {
+        card: s.seoSocialAccentBluesky,
+        header: s.seoSocialHeaderBluesky,
+      }
   }
 }
 
@@ -203,19 +221,13 @@ function SocialPreview(props: {
         {props.network} Preview
       </div>
       {props.meta.image ? (
-        <img
-          src={props.meta.image}
-          alt="Preview"
-          class={s.seoPreviewImage}
-        />
+        <img src={props.meta.image} alt="Preview" class={s.seoPreviewImage} />
       ) : (
         <div class={`${s.seoPreviewImage} ${s.seoPreviewImagePlaceholder}`}>
           No Image
         </div>
       )}
-      <div class={s.seoPreviewTitle}>
-        {props.meta.title || 'No Title'}
-      </div>
+      <div class={s.seoPreviewTitle}>{props.meta.title || 'No Title'}</div>
       <div class={s.seoPreviewDesc}>
         {props.meta.description || 'No Description'}
       </div>