Custom theme-based TypeScript Intellisense

[nandorojo]

Another goal of this library is to have a script that detects your theme, and builds TypeScript intellisense into your components based on your custom theme values. But this isn't made yet. I'd love help with it.

For example, if you have a theme like this:

export default {
  colors: {
    primary: 'blue',
    muted: '#e8e8e8',
  },
};

Then you would get intellisense like this:

^ The gif might take sec to load.

I think this could be achieved with some TypeScript wizardry, where a command line takes in the theme file and generates a typescript hidden file in your repository. This hidden file would globally declare values that override the sx prop, injecting in type suggestions. The command would probably be placed in a given project's postinstall, so that it runs every time you run yarn or npm install

@slorber recommended I look here.

I think generating something like this would work?

[nandorojo]

This requires some TypeScript codegen wizardry that I just don't have. I'll probably close this until some TS genius stumbles upon it and can solve it.

[nandorojo]

There's an exciting theme UI PR which seems like it could solve this system-ui/theme-ui#1090. Still have to look more into it, but I've re-opened this issue.

[nandorojo]

Relevant: https://material-ui.com/components/about-the-lab/#typescript

[nandorojo]

After many months, I'm excited to say that this feature is close to landing. @hasparus has been hard at work with many great additions to theme-ui, and one of them will address this issue. This means our sx prop will get strict types based on our theme.

To follow: system-ui/theme-ui#1090

[nandorojo]

#72

[nandorojo]

Alright, let's make this happen.

[nandorojo]

Gosh, this is sooo hard with all of theme-ui's complex types in the way rn.

@cmaycumber I think this is the start of v3 of Dripsy. Remove theme-ui altogether, copy over the types ourselves, and have great type safety.

(I accidentally wrote this on the other thread first)

[nandorojo]

This cool new project by @intergalacticspacehighway has good custom types: https://github.com/intergalacticspacehighway/react-native-styled-variants/blob/9d6a801683b5ffbc8641b5937b62f24425e504de/src/types.ts#L32

[cmaycumber]

@nandorojo Have you seen react-native-styled-variants: https://styled-variants.vercel.app/

[nandorojo]

Haha yeah good timing. I'd want to make sure that the type creator there from the custom theme is performant. For massive TS objects, you can get into slow performance if you recurse too much (see millsp/ts-toolbelt#154)

[nandorojo]

Looks like TS performance has improved for this, which is good news microsoft/TypeScript#45711

[cmaycumber]

Haha yeah good timing. I'd want to make sure that the type creator there from the custom theme is performant. For massive TS objects, you can get into slow performance if you recurse too much (see millsp/ts-toolbelt#154)

That makes a lot of sense. We should definitely make sure that's the case. I wonder if we can build off of some of the work from react-native-styled-variants.

[nandorojo]

Yeah, I wrote more about my vision for how this could work at #72 a while ago

I feel like a good UX is

const theme = createTheme({
  ...
})

type MyTheme = typeof theme

declare module 'dripsy' {
  interface UserTheme extends MyTheme {}
}

But I'm open to anything, also could make it like the styled variants for sure. The one missing piece is adding all of the custom scales p, px, etc)

[cmaycumber]

I think that's definitely a good UX imo. Let me reread #72. I'm super pumped to get this started

[nandorojo]

Starting at #124

[nandorojo]

Omg. still work to do here but...

[nandorojo]

Adding variant support too...

Theme here (just to mock)

[nandorojo]

Gradient support working...

[nandorojo]

Added sx prop as a function support (not sure why tbh, but why not)

[nandorojo]

I published the first version of this at 3.0.0, would love help testing:

yarn add dripsy@canary

[nandorojo]

2 things left:

1. Make sure that the Tokenizer is actually performant
2. Maybe add per-scale styles? As in, bg only sees scales from the theme.colors. It's just a lot of time / effort.

[nandorojo]

Shorthand support working...

[nandorojo]

Props now narrow down to the specific themeKey for a given style 😎

[rafaelrinaldi]

Popping in to say I thoroughly appreciate all the work being put into this. It will be such a great addition to Dripsy!

[nandorojo]

Thanks, glad you think so! You can see more details at #124

[nandorojo]

Will be closed with the release of v3.