Export JSX namespace from automatic runtime entries

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

Hide file tree

Showing 6 changed files with 44 additions and 35 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
@@ -23,6 +23,7 @@ import {
   Ref,
   createElement
 } from 'react'
+import { EmotionJSX } from './jsx-namespace'
 
 export {
   ArrayInterpolation,
@@ -92,41 +93,7 @@ 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 import JSX = EmotionJSX
 }
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'