open-props

open-props copied to clipboard

When I am trying to import any of the Props into a TypeScript project,

import sizes from "open-props/src/sizes"

I get a ts(2307) Error: Cannot find module 'open-props/src/sizes' or its corresponding type declarations.

---

Svelte-kit project, TypeScript version: 4.4.3, target: "es2020",

---

A workaround I found for this is declaring my own modules for the exports[] in package.json.

open-props.d.ts

declare module "open-props/src/sizes";

---

I am not sure if this is a problem with OpenProps or TypeScript / SvelteKit. Once I find time, I will try and set it up in a React Project and see what happens there.

import sizes from "open-props/src/props.sizes.js"

does that resolve the issue? this way you're referencing a file directly and not leaning on the exports map in package.json.

not sure why declaring the module resolves it tho? the file you're importing is some basic ecma js

thanks for reporting, we'll get ya through it, and maybe i can update the docs to help others in the future

Unfortunately importing via open-props/src/props.sizes.js doesn't work. I forgot to mention that.

I am getting a different error though: [vite] Internal server error: Missing "./src/props.sizes.js" export in "open-props" package

It actually doesn't really block me since I am not actually using the props in javascript. Was just trying things out.

glad you're not blocked, but still a bit disconcerting. are you able to import other props, or all props kinda give you the same issues with missing exports?

Sizes was just used as example here. I am actually not able to import any props.

I was digging a bit deeper and from what I can see, the index.js in /src is re-exporting the props.xyz.js objects through

const OpenProps = mapToObjectNotation({
  ...Animations,
  ...Sizes,
  ...Colors,
  ...ColorsHSL,
  ...Fonts,
  ...Borders,
  ...Aspects,
  ...Easings,
  ...SVG,
  ...Gradients,
  ...StaticShadows,
  ...Zindex,
});

My guess is that the signature gets lost there since the export of index.js is actually "OpenProps" which then has a signature of (props: any) => any instead of the various props objects.

wanna help Open Props ship typings for ts importers?

Hey, sorry for the late reply. Was rly busy with a project. Sounds really interesting, although I am not too sure if I am the right guy for the job.

I'll have a look at it on the weekend and open a PR if I find a good solution.

Interesting! I might look into debugging this and/or helping out with TS typings later this week.

OK, I think I've got typing to work on my fork of open-props. PR forthcoming.

Hey folks, sorry for not responding for far too long. I was just too busy with stuff unfortunately.

@hchiam Thanks for stepping in. You are the real MVP here!! I had a quick look over your PR and from what I can tell it's a simple and effective solution! Kudos!