Export JSX namespace from automatic runtime entries

emotion-js · Nov 9, 2020 · a1f7d82 · a1f7d82
1 parent 0d34200
commit a1f7d82
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 34 deletions.
diff --git a/packages/react/jsx-dev-runtime/package.json b/packages/react/jsx-dev-runtime/package.json
@@ -6,6 +6,7 @@
     "./dist/react.cjs.js": "./dist/react.browser.cjs.js",
     "./dist/react.esm.js": "./dist/react.browser.esm.js"
   },
+  "types": "../types/jsx-dev-runtime",
   "preconstruct": {
     "source": "../src/jsx-dev-runtime",
     "umdName": "emotionReactJSXDevRuntime"

diff --git a/packages/react/jsx-runtime/package.json b/packages/react/jsx-runtime/package.json
@@ -6,6 +6,7 @@
     "./dist/react.cjs.js": "./dist/react.browser.cjs.js",
     "./dist/react.esm.js": "./dist/react.browser.esm.js"
   },
+  "types": "../types/jsx-runtime",
   "preconstruct": {
     "source": "../src/jsx-runtime",
     "umdName": "emotionReactJSXRuntime"

diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
@@ -14,7 +14,6 @@ import {
 } from '@emotion/serialize'
 import {
   ClassAttributes,
-  ComponentClass,
   Context,
   Provider,
   FC,
@@ -23,6 +22,7 @@ import {
   Ref,
   createElement
 } from 'react'
+import { EmotionJSX } from './jsx-namespace'
 
 export {
   ArrayInterpolation,
@@ -92,41 +92,21 @@ export interface ClassNamesProps {
  */
 export function ClassNames(props: ClassNamesProps): ReactElement
 
-type WithConditionalCSSProp<P> = 'className' extends keyof P
-  ? (P extends { className?: string } ? P & { css?: Interpolation<Theme> } : P)
-  : P
-
-// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
-type ReactJSXElement = JSX.Element
-type ReactJSXElementClass = JSX.ElementClass
-type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
-type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
-type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
-type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
-type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
-type ReactJSXIntrinsicElements = JSX.IntrinsicElements
-
 export const jsx: typeof createElement
 export namespace jsx {
   namespace JSX {
-    interface Element extends ReactJSXElement {}
-    interface ElementClass extends ReactJSXElementClass {}
-    interface ElementAttributesProperty
-      extends ReactJSXElementAttributesProperty {}
-    interface ElementChildrenAttribute
-      extends ReactJSXElementChildrenAttribute {}
-
-    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
-      ReactJSXLibraryManagedAttributes<C, P>
-
-    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
-    interface IntrinsicClassAttributes<T>
-      extends ReactJSXIntrinsicClassAttributes<T> {}
-
-    type IntrinsicElements = {
-      [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
-        css?: Interpolation<Theme>
-      }
-    }
+    export type Element = EmotionJSX.Element
+    export type ElementClass = EmotionJSX.ElementClass
+    export type ElementAttributesProperty = EmotionJSX.ElementAttributesProperty
+    export type ElementChildrenAttribute = EmotionJSX.ElementChildrenAttribute
+    export type LibraryManagedAttributes<
+      C,
+      P
+    > = EmotionJSX.LibraryManagedAttributes<C, P>
+    export type IntrinsicAttributes = EmotionJSX.IntrinsicAttributes
+    export type IntrinsicClassAttributes<
+      T
+    > = EmotionJSX.IntrinsicClassAttributes<T>
+    export type IntrinsicElements = EmotionJSX.IntrinsicElements
   }
 }
diff --git a/packages/react/types/jsx-dev-runtime.d.ts b/packages/react/types/jsx-dev-runtime.d.ts
@@ -0,0 +1 @@
+export { EmotionJSX as JSX } from './jsx-namespace'
diff --git a/packages/react/types/jsx-namespace.d.ts b/packages/react/types/jsx-namespace.d.ts
@@ -0,0 +1,38 @@
+import 'react'
+import { Interpolation } from '@emotion/serialize'
+import { Theme } from './index'
+
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+  ? (P extends { className?: string } ? P & { css?: Interpolation<Theme> } : P)
+  : P
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element
+type ReactJSXElementClass = JSX.ElementClass
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+
+export namespace EmotionJSX {
+  interface Element extends ReactJSXElement {}
+  interface ElementClass extends ReactJSXElementClass {}
+  interface ElementAttributesProperty
+    extends ReactJSXElementAttributesProperty {}
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+
+  type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: Interpolation<Theme>
+    }
+  }
+}
diff --git a/packages/react/types/jsx-runtime.d.ts b/packages/react/types/jsx-runtime.d.ts
@@ -0,0 +1 @@
+export { EmotionJSX as JSX } from './jsx-namespace'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { EmotionJSX as JSX } from './jsx-namespace'