Convert to TypeScript #668

mxstbr · 2020-02-14T19:10:16Z

Based on the discussions around #121 and the test we just merged in #662, we are going to convert theme-ui to TypeScript! 🎉 The plan is to go package-by-package and gradually move all .js files to .ts files.

As you can see there is a fair amount of packages to convert, so we would love your help! 💪

Here is how to convert a package (take a look at #662 for an example):

Add the --tsconfig tsconfig.json option to the "prepare" and "watch" commands in the package.json and copy the tsconfig.json from the core package.
Add "types": "dist/index.d.ts" and "source": "src/index.ts" to the package.json
Go file-by-file, rename them from .js to .ts and fix all type errors and any types in the generated typedef (dist/index.d.ts).
Submit a PR and tag me as a reviewer!

To avoid duplicate work please comment which package you want to work on (as long as nobody else is also working on it) so we can mark it as taken.

Packages that still need to be converted:

These packages will be handled separately (see #950)

~~gatsby-plugin-theme-ui~~ (WIP: refactor(gatsby-plugin-theme-ui): add typescript #705)
~~gatsby-theme-code-recipes~~ (refactor(gatsby-theme-code-recipes): convert to typescript #709)
~~gatsby-theme-style-guide~~
~~gatsby-theme-ui-blog~~ ( Convert gatsby-theme-ui-blog to TypeScript #711)
~~gatsby-theme-ui-layout~~ (Convert gatsby-theme-ui-layout to TypeScript #710)

The text was updated successfully, but these errors were encountered:

jxnblk · 2020-02-14T20:25:29Z

Awesome work on this so far! For the preset packages, I wonder if it'd make sense to make a generic theme interface that most of these could follow, or at least use as a base interface

hasparus · 2020-02-15T08:14:24Z

For every package which is typed in DT, we’ll have to clean up and remove it from DT after merge to master. This would be components and theme-ui.

I’m gonna take color (#672).

I'll add strict: true to its tsconfig if you don't have anything against it.

http://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks

--strict	boolean	false	Enable all strict type checking options. Enabling --strict enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.

LekoArts · 2020-02-15T13:12:45Z

I'm gonna take:

custom-properties (fix(@theme-ui/custom-properties): TS conversion #671)
match-media (@theme-ui/match-media : TypeScript conversion #696)

hasparus · 2020-02-16T16:41:04Z

I'm thinking about taking a stab at typing @theme-ui/css.
Am I right that the css function is wrongly typed in DT?

import { Interpolation, SerializedStyles } from '@emotion/serialize';
import { SystemStyleObject } from '@styled-system/css';

// ...

/**
 * A utility from @styled-system/css for theming styles to be passed to Emotion's
 * css prop.
 *
 * Refer:
 * 1. https://styled-system.com/css/
 * 2. https://emotion.sh/docs/object-styles#with-css
 */
export function css(styleObject: Interpolation): (theme: Theme) => SerializedStyles;

/**
 * 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 type SxStyleProp = SystemStyleObject;

However the docs say:

So styleObject should be annotated as SystemStyleObject.

Zolwiastyl · 2020-02-16T20:51:24Z

I want to work on "preset-base" package.

jxnblk · 2020-02-17T18:38:13Z

@hasparus I'm not 100% sure, but I suspect the DT typings might be a little outdated -- I think the typings for this should be completely contained within the theme-ui repo and not rely on Styled System, since that was part of the older implementation. It now uses @theme-ui/css (@styled-system/css will be deprecated in favor of @theme-ui/css at some point)

joestrouth1 · 2020-02-17T20:08:39Z

I'd like to take tailwind and tachyons since they're pretty similar.

How should we handle updating tests to TS?

PaulieScanlon · 2020-02-18T01:49:29Z

I’d like to give components a go if that’s ok with everybody?

hasparus · 2020-02-18T04:16:36Z

Hey @PaulieScanlon just fyi, there is a package in DT for components. It may be useful to you.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/theme-ui__components/index.d.ts

PaulieScanlon · 2020-02-18T10:17:51Z

@hasparus hey, wow yeah that’s looks pretty complete! Is it just a case of moving it over and maybe just checking it’s online with the patterns core has set out?

mxstbr · 2020-02-18T17:09:27Z

I want to work on "preset-base" package.
I'd like to take tailwind and tachyons since they're pretty similar.
I’d like to give components a go if that’s ok with everybody?

Do it! 💯

How should we handle updating tests to TS?

Once #672 lands we will be using ts-jest to run all our tests, so then we can also rewrite the tests with TypeScript! 👍 Follow here: #672 (comment)

Is it just a case of moving it over and maybe just checking it’s online with the patterns core has set out?

Kinda, but we don't want the index.d.ts file in the repo we want the code itself to be written in TypeScript. I would start by renaming the file from .js to .ts and then using the types in definitelytyped to fill everything out!

mxstbr · 2020-02-19T16:59:20Z

Another todo:

Create base .tsconfig.json for all others to extend from as described in by @hasparus Adopt TS in theme-ui/color #672 (comment)

mxstbr · 2020-02-19T22:07:01Z

I will do color-modes next!

LA1CH3 · 2020-02-20T23:52:12Z

Love the project, looking to contribute- I'll take a stab at mdx to start if no one has claimed it.

mxstbr · 2020-02-21T01:07:03Z

@LA1CH3 do it! 👍

Zolwiastyl · 2020-02-21T09:42:09Z

I can work on gatsby-plugin-theme-ui as no one has claimed it yet.

dburles · 2020-02-21T10:29:47Z

I am sorry for my "off-topic" comment, admittedly made as a knee-jerk reaction to coming across this issue. The thing is, I've been using theme-ui since its inception and have also been a fairly active contributor. I care a lot about the project because I really believe in the ideas behind it.

However, I feel like this decision was made without thought to perhaps give time to gain feedback from the community and contributors. While I have no doubt that it's likely most people would favour TypeScript (at least at this point in time), I still think it would have been a reasonable thing to do, as there are valid reasons to stick with JavaScript too! Also, I've been aware of #121 for a while and up until a week ago, it's mostly been discussion around exporting type definitions.

It seems like we are at the point now where it's no longer even a question whether it's reasonable to just drop JavaScript in an existing codebase and swap everything over to TypeScript. To me at least, that doesn't feel right. Anyway that's just my 2c!

jxnblk · 2020-05-22T19:54:24Z

I've opened a new issue to discuss the conversion of the Gatsby-related packages in #950. I've also updated the list in the description here and removed it from the details/summary so that the progress is visible in GitHub's UI.

jxnblk · 2020-05-22T19:55:52Z

I'd also suggest we decouple converting the docs site, since that isn't a published package and won't block a v0.4 release once the other packages are ready.

dcastil · 2020-05-22T21:08:19Z

chrome feat(chrome): update chrome to typescript #909
editor Convert editor to TypeScript #900
sidenav feat(sidenav): update sidenav to typescript #917

are all done now. @hasparus can you update?

blainekasten · 2020-06-16T19:52:50Z

Hey friends!

So, running into some issues. When I import this library, I get a lot of typescript errors right now that prevent me from using it. Specifically errors like this:

node_modules/@theme-ui/components/node_modules/@theme-ui/css/dist/types.d.ts:531:5 - error TS2411: Property 'root' of type 'ThemeUICSSProperties | CSSPseudoSelectorProps | CSSSelectorObject | VariantProperty | UseThemeFunction | undefined' is not assignable to string index type 'ThemeUIStyleObject'.

531     root?: ThemeUIStyleObject;

I cloned down this repo and ran tsc and it resulted in 199 errors. I've noticed that there isn't any CI setup to ensure that types are properly working before merging PRs.

Seems like ya'll need to:

Add a CI step to check typescript
Fix up all the existing type errors

hasparus · 2020-06-17T21:41:06Z

Hey @blainekasten 👋

I cloned down this repo and ran tsc and it resulted in 199 errors.

All packages in the monorepo have separate TypeScript configs. Many of them are not strict, while root tsconfig is.

We could make root TSConfig less rigid, and override it for stricter options in packages, but I suppose the intention was to recommend strict: true.

Right now to use theme-ui in TypeScript, one has to turn on skipLibChecks to true (this is a default in Next and CRA), and possibly add .d.ts for @theme-ui/color-modes 😢
This should be fixed before 0.4.0 release.

Specifically errors like this:

I think this should be fixed in #1002. I made @theme-ui/css strict there.

Add a CI step to check typescript

This is a good idea.

Right now, the tests and the tested API surface is typechecked in GitHub Actions (ts-jest fails on type errors), but the tsconfig for tests also isn't strict.

I think we should run tsc --noEmit at least on @theme-ui/css and @theme-ui/core to make sure the public API types are correct.

I have a PR open to add typecheck scripts to all packages, though it's grown pretty dusty and has a few merge conflicts.

hasparus · 2020-06-23T22:05:20Z

Knock knock :D Let's regroup.

We have 4 2 packages left.

color-modes ([WIP] Convert color-modes to TS #699)
components (Convert components package to TS #692)
mdx (feat(@theme-ui/mdx): add TypeScript support #703, (@theme-ui/mdx) adopt TypeScript #1031)
typography (@theme-ui/typography => Typescript #890)

We can totally leave the .d.ts file in components, as it has few PRs open (#850, #823, #817) and new Variant API will make TS adoption in components easier.

On top of it:

We need this CI step @blainekasten mentioned above.
- New PR or continue from the one I started with typecheck scripts?
I fixed few annoying things in Friendlier TypeScript errors. #1002. There's also a draft for TypeScript chapter in the docs there. I'm not a native speaker, so my draft might be actually terrible.
- Needs another review
Use const inside sx #907 should be also answered in the docs. This isn't the first time somebody is puzzled about it.

jxnblk · 2020-06-26T14:05:23Z

@hasparus thanks for the summary! Off the top of my head, I think we'll want to get part of #823 in for the components package, but that needs a closer review. As far as #1002 goes, I can take a look at the docs and leave suggestions if anything seems off

jxnblk · 2020-06-30T20:23:47Z

Another thing that I'm not sure whether we need to address for 0.4 or not is upgrading microbundle. It looks like there are some TS/testing related issues in #1022 -- any advise there would be appreciated

hasparus · 2020-07-01T05:15:29Z

hey @jxnblk #1022 is okay with current master (after merging #1002).

However, there is a small problem.
The docs deploy on merge to master, and not on release, so they might be a bit misleading right now. (The TypeScript guide especially.)

#890 and #1031 are ready for review now.

jxnblk · 2020-07-02T19:35:15Z

@hasparus I've temporarily changed the Netlify settings to not deploy the docs on master, but I can also roll-back to a previous deploy for the docs. I'm not sure how far back to roll them, but can at least find one before #1002 was merged

deadcoder0904 · 2020-07-16T05:36:41Z

Hey @mxstbr, some unchecked packages can be checked in the original comment so it's easier to see the progress. Only 2 are left.

mdx (feat(@theme-ui/mdx): add TypeScript support #703 & (@theme-ui/mdx) adopt TypeScript #1031)
typography (@theme-ui/typography => Typescript #890)
color-modes ([WIP] Convert color-modes to TS #699)
components (Convert components package to TS #692)

pkieltyka · 2020-09-03T23:44:33Z

any thoughts on porting styled-system to typescript as well? styled-system seems like an important foundational library that theme-ui is built upon

alexanderchan · 2020-09-15T20:59:18Z

Another thing that I'm not sure whether we need to address for 0.4 or not is upgrading microbundle. It looks like there are some TS/testing related issues in #1022 -- any advise there would be appreciated

@jxnblk we just converted our theme-ui mono-repo based project from microbundle to https://preconstruct.tools which is the same as what emotion uses.

It really sped up our build times (not insignificantly either, from 5 mins down to 12-15s) so it's worth considering. It also simplifies the build in that there only needs to be a single tsconfig and everything passes through babel and let's you use whatever typescript version you want.

hasparus · 2020-11-18T08:58:51Z

Okay, most code in the repo is in TypeScript for a long time already. Let's close this issue.

MarcStdt · 2020-11-18T11:22:01Z

Hey will there be types definitions (smth like index.d.ts) in this repo in the future?
Currently, if I am not mistaking, you have to also install @types/theme-ui.
I thought closing this issue would imply having all the type definitions in the theme-ui npm package as well.

dcastil · 2020-11-18T11:33:25Z

@MarcStdt Yes, from v0.4.0 on Theme UI provides type definitions for all packages.

hasparus · 2020-11-18T12:23:24Z

@MarcStdt 0.4.0 is not released yet (you can use next tag or 0.4.0-rc.X versions), but the conversion already happened, and the release should happen in the nearest future.

george-clark-s · 2022-03-10T10:53:56Z

@mxstbr I've been implementing themeui with a project and really enjoying using it apart from the typescript integration..
Do you have any advice on fixing this sort of issue:
Object literal may only specify known properties, and 'containers' does not exist in type 'Theme'
I thought containers should be part of the Theme?

hasparus · 2022-03-10T11:04:42Z

@george-clark-s theme.layout

https://theme-ui.com/components/container/#variants

george-clark-s · 2022-03-10T11:18:48Z

@george-clark-s theme.layout

https://theme-ui.com/components/container/#variants

Thanks so much @hasparus

Still getting type issues..

Initially we had this:

import { Theme } from 'theme-ui';
import { base } from '@theme-ui/presets';
import colors from './colors';
import typography from './typography';
import buttons from './buttons';
import containers from './containers';

const { desktopBackground, main, form, page, footer } = containers;

const theme: Theme = {
  ...base,
  ...colors,
  ...typography,
  ...buttons,
  containers: {
    ...desktopBackground,
    ...main,
    ...form,
    ...page,
    ...footer,
  },
  styles: {
    ...base.styles,
  },
};

console.log('theme', theme);

export default theme;

Now we have this:

import { Theme } from 'theme-ui';
import { base } from '@theme-ui/presets';
import colors from './colors';
import typography from './typography';
import buttons from './buttons';
import container from './container';

const { desktopBackground, main, form, page, footer } = container;

const theme: Theme = {
  ...base,
  ...colors,
  ...typography,
  ...buttons,
  layout: {
    container: {
      ...desktopBackground,
      ...main,
      ...form,
      ...page,
      ...footer,
    },
  },
  styles: {
    ...base.styles,
  },
};

console.log('theme', theme);

export default theme;

Basically just trying to add a mixture of themeui and user defined container layout variants without getting type errors?
It looks from the docs like a container variant needs to be under the theme.layout.container scope?
Is this right? because Types are still complaining..

hasparus · 2022-03-10T14:44:01Z

@george-clark-s, could you create a new issue, discussion or ask for help on Discord? This issue is from 2020 and it's pretty big, so any conversation here will land in notifications for a bunch of people.

george-clark-s · 2022-03-10T15:24:17Z

thanks @hasparus Cant find anything on discord related to theme-ui.. do you know the channel/server?

Edit (@hasparus here): Here you go, mate — https://discord.gg/theme-ui — it's linked in the readme if you need it again.

mxstbr added help wanted Extra attention is needed good first issue Good for newcomers labels Feb 14, 2020

mxstbr mentioned this issue Feb 14, 2020

Typescript support #121

Closed

LekoArts mentioned this issue Feb 15, 2020

fix(@theme-ui/custom-properties): TS conversion #671

Merged

hasparus mentioned this issue Feb 15, 2020

Adopt TS in theme-ui/color #672

Merged

This was referenced Feb 16, 2020

(@theme-ui/css) adopt TypeScript #673

Closed

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

Merged

Zolwiastyl mentioned this issue Feb 16, 2020

converted preset-base from .js to .ts #675

Merged

joestrouth1 mentioned this issue Feb 17, 2020

Convert tailwind package to TypeScript #686

Merged

joestrouth1 mentioned this issue Feb 19, 2020

Convert tachyons package to TS #691

Merged

LekoArts mentioned this issue Feb 20, 2020

@theme-ui/match-media : TypeScript conversion #696

Merged

timReynolds mentioned this issue Feb 20, 2020

task: add root tsconfig #700

Merged

This comment has been minimized.

Sign in to view

jxnblk mentioned this issue Jun 26, 2020

Missing prop forwarding (Link component) #990

Closed

jxnblk mentioned this issue Jul 8, 2020

Add highlight to @types/theme-ui in colors property #1050

Closed

deadcoder0904 mentioned this issue Jul 16, 2020

No types included in packages #1067

Closed

hasparus mentioned this issue Jul 18, 2020

Add typecheck scripts #1072

Merged

beerose mentioned this issue Jul 28, 2020

(@theme-ui/color-modes): migrate to typescript #1095

Merged

alexanderchan mentioned this issue Oct 2, 2020

Change to preconstruct to build #1204

Merged

hasparus mentioned this issue Nov 5, 2020

⛱ Release v0.4.0 #1239

Closed

21 tasks

hasparus closed this as completed Nov 18, 2020

Convert to TypeScript #668

Convert to TypeScript #668

Comments

mxstbr commented Feb 14, 2020 • edited by hasparus

jxnblk commented Feb 14, 2020

hasparus commented Feb 15, 2020 • edited

LekoArts commented Feb 15, 2020 • edited

hasparus commented Feb 16, 2020

Zolwiastyl commented Feb 16, 2020

jxnblk commented Feb 17, 2020

joestrouth1 commented Feb 17, 2020

PaulieScanlon commented Feb 18, 2020 • edited

hasparus commented Feb 18, 2020

PaulieScanlon commented Feb 18, 2020

mxstbr commented Feb 18, 2020

mxstbr commented Feb 19, 2020 • edited by hasparus

mxstbr commented Feb 19, 2020

This comment has been minimized.

LA1CH3 commented Feb 20, 2020

mxstbr commented Feb 21, 2020 • edited

Zolwiastyl commented Feb 21, 2020

dburles commented Feb 21, 2020

jxnblk commented May 22, 2020

jxnblk commented May 22, 2020

dcastil commented May 22, 2020

blainekasten commented Jun 16, 2020

hasparus commented Jun 17, 2020 • edited

hasparus commented Jun 23, 2020 • edited

jxnblk commented Jun 26, 2020

jxnblk commented Jun 30, 2020

hasparus commented Jul 1, 2020 • edited

jxnblk commented Jul 2, 2020

deadcoder0904 commented Jul 16, 2020 • edited by hasparus

pkieltyka commented Sep 3, 2020

alexanderchan commented Sep 15, 2020 • edited

hasparus commented Nov 18, 2020

MarcStdt commented Nov 18, 2020

dcastil commented Nov 18, 2020

hasparus commented Nov 18, 2020

george-clark-s commented Mar 10, 2022

hasparus commented Mar 10, 2022

george-clark-s commented Mar 10, 2022 • edited

hasparus commented Mar 10, 2022

george-clark-s commented Mar 10, 2022 • edited by hasparus

mxstbr commented Feb 14, 2020 •

edited by hasparus

hasparus commented Feb 15, 2020 •

edited

LekoArts commented Feb 15, 2020 •

edited

PaulieScanlon commented Feb 18, 2020 •

edited

mxstbr commented Feb 19, 2020 •

edited by hasparus

mxstbr commented Feb 21, 2020 •

edited

hasparus commented Jun 17, 2020 •

edited

hasparus commented Jun 23, 2020 •

edited

hasparus commented Jul 1, 2020 •

edited

deadcoder0904 commented Jul 16, 2020 •

edited by hasparus

alexanderchan commented Sep 15, 2020 •

edited

george-clark-s commented Mar 10, 2022 •

edited

george-clark-s commented Mar 10, 2022 •

edited by hasparus