feat(jsx): improve meta-tag types with well known values

[ssssota]

Improve meta-tag types with well known values like c.header (#3221) .

Now, we can use auto-completion in JSX:

The author should do the following, if applicable

• Add tests
• Run tests
• bun run format:fix && bun run lint:fix to format the code
• Add TSDoc/JSDoc to document the code

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.20%. Comparing base (a5b2382) to head (6df2113).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3276   +/-   ##
=======================================
  Coverage   96.20%   96.20%           
=======================================
  Files         151      151           
  Lines       15293    15293           
  Branches     2639     2666   +27     
=======================================
  Hits        14713    14713           
  Misses        580      580           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yusukebe]

auto-complition is a typo. Should be auto-completion.

[yusukebe]

Hi @ssssota

I'm not sure if which is 100% great, but I think it would be better it does not use LiteralUnion in MetaHttpEquiv , MetaName, or others. These can be more strict. What do you think of it?

diff --git a/src/jsx/intrinsic-elements.ts b/src/jsx/intrinsic-elements.ts
index ee0a80eb..90cfc111 100644
--- a/src/jsx/intrinsic-elements.ts
+++ b/src/jsx/intrinsic-elements.ts
@@ -467,69 +467,68 @@ export namespace JSX {
   }
 
   /**
-   * String literal types with auto-complition
+   * String literal types with auto-completion
    * @see https://github.com/Microsoft/TypeScript/issues/29729
    */
   type LiteralUnion<T> = T | (string & Record<never, never>)
+
   /**
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#http-equiv
    */
   type MetaHttpEquiv =
-    | LiteralUnion<
-        'content-security-policy' | 'content-type' | 'default-style' | 'x-ua-compatible' | 'refresh'
-      >
-    | undefined
+    | 'content-security-policy'
+    | 'content-type'
+    | 'default-style'
+    | 'x-ua-compatible'
+    | 'refresh'
+
   /**
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name
    */
   type MetaName =
-    | LiteralUnion<
-        | 'application-name'
-        | 'author'
-        | 'description'
-        | 'generator'
-        | 'keywords'
-        | 'referrer'
-        | 'theme-color'
-        | 'color-scheme'
-        | 'viewport'
-        | 'creator'
-        | 'googlebot'
-        | 'publisher'
-        | 'robots'
-      >
-    | undefined
+    | 'application-name'
+    | 'author'
+    | 'description'
+    | 'generator'
+    | 'keywords'
+    | 'referrer'
+    | 'theme-color'
+    | 'color-scheme'
+    | 'viewport'
+    | 'creator'
+    | 'googlebot'
+    | 'publisher'
+    | 'robots'
+
   /**
    * @see https://ogp.me/
    */
   type MetaProperty =
-    | LiteralUnion<
-        | 'og:title'
-        | 'og:type'
-        | 'og:image'
-        | 'og:url'
-        | 'og:audio'
-        | 'og:description'
-        | 'og:determiner'
-        | 'og:locale'
-        | 'og:locale:alternate'
-        | 'og:site_name'
-        | 'og:video'
-        | 'og:image:url'
-        | 'og:image:secure_url'
-        | 'og:image:type'
-        | 'og:image:width'
-        | 'og:image:height'
-        | 'og:image:alt'
-      >
-    | undefined
+    | 'og:title'
+    | 'og:type'
+    | 'og:image'
+    | 'og:url'
+    | 'og:audio'
+    | 'og:description'
+    | 'og:determiner'
+    | 'og:locale'
+    | 'og:locale:alternate'
+    | 'og:site_name'
+    | 'og:video'
+    | 'og:image:url'
+    | 'og:image:secure_url'
+    | 'og:image:type'
+    | 'og:image:width'
+    | 'og:image:height'
+    | 'og:image:alt'
+
   interface MetaHTMLAttributes extends HTMLAttributes {
     charset?: LiteralUnion<'utf-8'> | undefined
-    'http-equiv'?: MetaHttpEquiv
-    name?: MetaName
+    'http-equiv'?: LiteralUnion<MetaHttpEquiv>
+    name?: LiteralUnion<MetaName>
     media?: string | undefined
     content?: string | undefined
-    property?: MetaProperty
+    property?: LiteralUnion<MetaProperty>
 
     // React 19 compatibility
     httpEquiv?: MetaHttpEquiv

[ssssota]

@yusukebe Thank you for the review! I've applied suggestions. It looks better!

[yusukebe]

LGTM!

[yusukebe]

@ssssota

Looks good! This is actually a new feature, but it's minor, so I've labeled it feat and will merge it into the main. Then, I will release the patch version to include this change. Thanks!