Spike out potential TypeScript conversion #662

mxstbr · 2020-02-10T17:35:24Z

This "reworks" @theme-ui/core to be written in TypeScript and export its own type definitions. Thankfully, microbundle has built-in support for TypeScript so we barely need to do any build system changes. I also checked in the generated index.d.ts file (normally we would not check this into git) to show what it looks like.

cc @hasparus the DefinitelyTyped maintainer for the theme-ui types. No action items right now, just wanted you to be aware of this effort 😉

This "reworks" `@theme-ui/core` to be written in TypeScript and export its own type definitions. Thankfully, `microbundle` has built-in support for TypeScript so we barely need to do any build system changes. I also checked in the generated `index.d.ts` file (normally we would not check this into git) to show what it looks like.

mxstbr · 2020-02-13T19:25:10Z

Here's where I am at: the core package is now written entirely in TypeScript, and generates a typedef file in the build process that (roughly) looks like the one that is in DefinitelyTyped right now, mostly because I copied all the custom types from there 😅

theme-ui/packages/core/index.d.ts

Lines 1 to 23 in 92e8090

    
           import React from 'react'; 
        
           import { Theme } from './theme'; 
        
           export declare const jsx: typeof React.createElement; 
        
           export declare const Context: React.Context<{ 
        
               __EMOTION_VERSION__: string; 
        
               theme: Theme; 
        
           }>; 
        
           export declare const useThemeUI: () => { 
        
               __EMOTION_VERSION__: string; 
        
               theme: Theme; 
        
           }; 
        
           export declare const merge: { 
        
               (a: any, b: any): unknown; 
        
               all(...args: any[]): object; 
        
           }; 
        
           export interface ThemeProviderProps { 
        
               theme: Partial<Theme> | ((outerTheme: Theme) => Theme); 
        
               children?: React.ReactNode; 
        
           } 
        
           export declare function ThemeProvider({ theme, children }: ThemeProviderProps): React.FunctionComponentElement<{ 
        
               context: any; 
        
               children: any; 
        
           }>;

theme-ui/packages/core/theme.d.ts

Lines 1 to 134 in 92e8090

    
           /// <reference types="react" /> 
        
           import * as CSS from 'csstype'; 
        
           import { SystemStyleObject } from '@styled-system/css'; 
        
           import { Theme as StyledSystemTheme } from 'styled-system'; 
        
           /** 
        
            * The `sx` prop accepts a `SxStyleProp` object and properties that are part of 
        
            * the `Theme` will be transformed to their corresponding values. Other valid 
        
            * CSS properties are also allowed. 
        
            */ 
        
           export declare type SxStyleProp = SystemStyleObject; 
        
           export interface SxProps { 
        
               /** 
        
                * The sx prop lets you style elements inline, using values from your 
        
                * theme. To use the sx prop, add the custom pragma as a comment to the 
        
                * top of your module and import the jsx function. 
        
                * 
        
                * ```ts 
        
                * // @jsx jsx 
        
                * 
        
                * import { jsx } from 'theme-ui' 
        
                * ``` 
        
                */ 
        
               sx?: SxStyleProp; 
        
           } 
        
           export interface IntrinsicSxElements { 
        
               p: JSX.IntrinsicElements['p'] & SxProps; 
        
               b: JSX.IntrinsicElements['b'] & SxProps; 
        
               i: JSX.IntrinsicElements['i'] & SxProps; 
        
               a: JSX.IntrinsicElements['a'] & SxProps; 
        
               h1: JSX.IntrinsicElements['h1'] & SxProps; 
        
               h2: JSX.IntrinsicElements['h2'] & SxProps; 
        
               h3: JSX.IntrinsicElements['h3'] & SxProps; 
        
               h4: JSX.IntrinsicElements['h4'] & SxProps; 
        
               h5: JSX.IntrinsicElements['h5'] & SxProps; 
        
               h6: JSX.IntrinsicElements['h6'] & SxProps; 
        
               img: JSX.IntrinsicElements['img'] & SxProps; 
        
               pre: JSX.IntrinsicElements['pre'] & SxProps; 
        
               code: JSX.IntrinsicElements['code'] & SxProps; 
        
               ol: JSX.IntrinsicElements['ol'] & SxProps; 
        
               ul: JSX.IntrinsicElements['ul'] & SxProps; 
        
               li: JSX.IntrinsicElements['li'] & SxProps; 
        
               blockquote: JSX.IntrinsicElements['blockquote'] & SxProps; 
        
               hr: JSX.IntrinsicElements['hr'] & SxProps; 
        
               table: JSX.IntrinsicElements['table'] & SxProps; 
        
               tr: JSX.IntrinsicElements['tr'] & SxProps; 
        
               th: JSX.IntrinsicElements['th'] & SxProps; 
        
               td: JSX.IntrinsicElements['td'] & SxProps; 
        
               em: JSX.IntrinsicElements['em'] & SxProps; 
        
               strong: JSX.IntrinsicElements['strong'] & SxProps; 
        
               div: JSX.IntrinsicElements['div'] & SxProps; 
        
               delete: JSX.IntrinsicElements['div'] & SxProps; 
        
               inlineCode: JSX.IntrinsicElements['div'] & SxProps; 
        
               thematicBreak: JSX.IntrinsicElements['div'] & SxProps; 
        
               root: JSX.IntrinsicElements['div'] & SxProps; 
        
           } 
        
           declare type ObjectOrArray<T> = T[] | { 
        
               [K: string]: T | ObjectOrArray<T>; 
        
           }; 
        
           declare type StyledTags = keyof IntrinsicSxElements; 
        
           /** 
        
            * To use Theme UI color modes, color scales should include at least a text 
        
            * and background color. These values are used in the ColorMode component to 
        
            * set body foreground and background colors. Color modes should be defined as 
        
            * nested objects within a theme.colors.modes object. Each key in this object 
        
            * should correspond to a color mode name, where the name can be anything, but 
        
            * typically light and dark are used for applications with a dark mode. The 
        
            * initialColorModeName key is required to enable color modes and will be used as 
        
            * the name for the root color palette. 
        
            */ 
        
           export declare type ColorMode = { 
        
               [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>; 
        
           } & { 
        
               /** 
        
                * Body background color 
        
                */ 
        
               background: CSS.ColorProperty; 
        
               /** 
        
                * Body foreground color 
        
                */ 
        
               text: CSS.ColorProperty; 
        
               /** 
        
                * Primary brand color for links, buttons, etc. 
        
                */ 
        
               primary?: CSS.ColorProperty; 
        
               /** 
        
                * A secondary brand color for alternative styling 
        
                */ 
        
               secondary?: CSS.ColorProperty; 
        
               /** 
        
                * A faint color for backgrounds, borders, and accents that do not require 
        
                * high contrast with the background color 
        
                */ 
        
               muted?: CSS.ColorProperty; 
        
               /** 
        
                * A contrast color for emphasizing UI 
        
                */ 
        
               accent?: CSS.ColorProperty; 
        
           }; 
        
           export interface Theme extends Omit<StyledSystemTheme, 'colors'> { 
        
               /** 
        
                * Enable/disable custom CSS properties/variables if lower browser 
        
                * support is required (for eg. IE 11). 
        
                * 
        
                * References: https://theme-ui.com/color-modes/#turn-off-custom-properties 
        
                */ 
        
               useCustomProperties?: boolean; 
        
               /** 
        
                * Provide a value here to enable color modes 
        
                */ 
        
               initialColorModeName?: string; 
        
               /** 
        
                * Define the colors that are available through this theme 
        
                */ 
        
               colors?: ColorMode & { 
        
                   /** 
        
                    * Nested color modes can provide overrides when used in conjunction with 
        
                    * `Theme.initialColorModeName and `useColorMode()` 
        
                    */ 
        
                   modes?: { 
        
                       [k: string]: ColorMode; 
        
                   }; 
        
               }; 
        
               /** 
        
                * Styles for elements rendered in MDX can be added to the theme.styles 
        
                * object. This is the primary, low-level way to control typographic and 
        
                * other styles in markdown content. Styles within this object are processed 
        
                * with @styled-system/css and have access to base theme values like colors, 
        
                * fonts, etc. 
        
                */ 
        
               styles?: { 
        
                   [P in StyledTags]?: SystemStyleObject; 
        
               }; 
        
           } 
        
           export {};

@hasparus does this look okay-ish to you, both the types and the general build process of how this works (automatically)? Any thoughts/feedback?

Once we are happy with where the types & the build process are at, then we ship this conversion and start tackling the other packages from there. I will be opening a planning issue with a clear outline what needs to be converted so all the contributors can help with this 🙏

packages/core/src/theme.d.ts

jxnblk · 2020-02-13T20:07:05Z

packages/core/src/theme.d.ts

@@ -0,0 +1,143 @@
+import * as CSS from 'csstype'
+import { SystemStyleObject } from '@styled-system/css'
+import { Theme as StyledSystemTheme } from 'styled-system'


I'm guessing the plan is to eventually have the entire Theme interface defined in this repo, right?

hasparus

@hasparus does this look okay-ish to you, both the types and the general build process of how this works (automatically)? Any thoughts/feedback?

Wow. Hello, imposter syndrome, my old friend.

It looks great! I've left 3 notes for the future.

BTW This is super weird that I can post a review to a repo where I'm not a contributor.

packages/core/package.json

packages/core/src/index.ts

hasparus · 2020-02-13T21:00:18Z

packages/core/src/index.ts

@@ -28,10 +31,13 @@ const parseProps = props => {
  return next
 }

-export const jsx = (type, props, ...children) =>
+export const jsx: typeof React.createElement = (type, props, ...children) =>


Although it isn't 100% correct (jsx handles sx and css props, createElement doesn't), focusing on this now would be bikeshedding.

Feel free to start submitting PRs to clean this up too 😉

Add resolveJsonModule to @theme-ui/core tsconfig

hasparus mentioned this pull request Feb 13, 2020

Typescript support #121

Closed

Type theme

92e8090

mxstbr added 2 commits February 13, 2020 11:28

Remove unnecessarily committed files again

9049fce

Make Jest compatible with .ts files

db5c65f

mxstbr requested a review from jxnblk February 13, 2020 19:48

jxnblk reviewed Feb 13, 2020

View reviewed changes

packages/core/src/theme.d.ts Outdated Show resolved Hide resolved

jxnblk reviewed Feb 13, 2020

View reviewed changes

mxstbr and others added 3 commits February 13, 2020 12:16

Add missing theme options

66ff3c3

Add resolveJsonModule to @theme-ui/core tsconfig

3b7743c

Add BaseProviderProps

70f0bac

hasparus approved these changes Feb 13, 2020

View reviewed changes

hasparus mentioned this pull request Feb 13, 2020

Add resolveJsonModule to @theme-ui/core tsconfig #665

Merged

hasparus and others added 2 commits February 14, 2020 10:00

Fix TS error in core

f340c9c

Merge pull request #665 from hasparus/typescript-spike

4513356

Add resolveJsonModule to @theme-ui/core tsconfig

mxstbr merged commit 3525f07 into master Feb 14, 2020

mxstbr deleted the typescript-spike branch February 14, 2020 18:55

mxstbr mentioned this pull request Feb 14, 2020

Convert to TypeScript #668

Closed

32 tasks

hasparus mentioned this pull request Feb 16, 2020

fix(@theme-ui/core) Add sx prop to jsx namespace #674

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Spike out potential TypeScript conversion #662

Spike out potential TypeScript conversion #662

mxstbr commented Feb 10, 2020 •

edited

Loading

mxstbr commented Feb 13, 2020 •

edited

Loading

jxnblk Feb 13, 2020

hasparus left a comment •

edited

Loading

hasparus Feb 13, 2020

mxstbr Feb 13, 2020 •

edited

Loading

Spike out potential TypeScript conversion #662

Spike out potential TypeScript conversion #662

Conversation

mxstbr commented Feb 10, 2020 • edited Loading

mxstbr commented Feb 13, 2020 • edited Loading

jxnblk Feb 13, 2020

Choose a reason for hiding this comment

hasparus left a comment • edited Loading

Choose a reason for hiding this comment

hasparus Feb 13, 2020

Choose a reason for hiding this comment

mxstbr Feb 13, 2020 • edited Loading

Choose a reason for hiding this comment

mxstbr commented Feb 10, 2020 •

edited

Loading

mxstbr commented Feb 13, 2020 •

edited

Loading

hasparus left a comment •

edited

Loading

mxstbr Feb 13, 2020 •

edited

Loading