Merge pull request #665 from hasparus/typescript-spike

 Add resolveJsonModule to @theme-ui/core tsconfig

Author: mxstbr

packages/core/package.json

@@ -25,6 +25,7 @@
     "react": "^16.11.0"
   },
   "devDependencies": {
+    "@types/react": "^16.9.19",
     "react": "^16.11.0"
   }
 }

packages/core/src/index.ts

@@ -6,7 +6,6 @@ import {
 import { css } from '@theme-ui/css'
 import React from 'react'
 import deepmerge from 'deepmerge'
-// @ts-ignore
 import { version as __EMOTION_VERSION__ } from '@emotion/core/package.json'
 import { Theme } from './theme'
 
@@ -34,10 +33,11 @@ const parseProps = props => {
 export const jsx: typeof React.createElement = (type, props, ...children) =>
   emotion.apply(undefined, [type, parseProps(props), ...children])
 
-export const Context = React.createContext<{
+export interface ContextValue {
   __EMOTION_VERSION__: string
   theme: Theme | null
-}>({
+}
+export const Context = React.createContext<ContextValue>({
   __EMOTION_VERSION__,
   theme: null,
 })
@@ -60,12 +60,16 @@ const isMergeableObject = n => {
 
 const arrayMerge = (destinationArray, sourceArray, options) => sourceArray
 
-export const merge = (a, b) =>
+export const merge = <T>(a: Partial<T>, b: Partial<T>): T =>
   deepmerge(a, b, { isMergeableObject, arrayMerge })
 
-merge.all = (...args) => deepmerge.all(args, { isMergeableObject, arrayMerge })
+merge.all = <T>(...args: Partial<T>[]) =>
+  deepmerge.all<T>(args, { isMergeableObject, arrayMerge })
 
-const BaseProvider = ({ context, children }) =>
+interface BaseProviderProps {
+  context: ContextValue
+}
+const BaseProvider: React.FC<BaseProviderProps> = ({ context, children }) =>
   jsx(
     EmotionContext.Provider,
     { value: context.theme },
@@ -96,10 +100,7 @@ export function ThemeProvider({ theme, children }: ThemeProviderProps) {
   const context =
     typeof theme === 'function'
       ? { ...outer, theme: theme(outer.theme) }
-      : merge.all({}, outer, { theme })
+      : merge.all<ContextValue>({}, outer, { theme })
 
-  return jsx(BaseProvider, {
-    context,
-    children,
-  })
+  return jsx(BaseProvider, { context }, children)
 }

packages/core/src/theme.d.ts renamed to packages/core/src/theme.ts

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node"
   }
 }

packages/core/tsconfig.json

@@ -3549,6 +3549,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.19":
+  version "16.9.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.19.tgz#c842aa83ea490007d29938146ff2e4d9e4360c40"
+  integrity sha512-LJV97//H+zqKWMms0kvxaKYJDG05U2TtQB3chRLF8MPNs+MQh/H1aGlyDUxjaHvu08EAGerdX2z4LTBc7ns77A==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/[email protected]":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"