lukejacksonn/es-react

[Request] Typings for es-react

okhomenko opened this issue ยท 12 comments

Typescript support would be greatly appreciated

To make it work for now I have installed @types/react, @types/react-dom and created typings.d.ts file where I just reexported typings.

// src/typings.d.ts
declare module 'https://unpkg.com/es-react' {
    import React from 'react';
    import ReactDOM from 'react-dom';

    export {
        React,
        ReactDOM
    };
}

How does this work as an es-module; that is without a build step?

With build step. Typescript generates es-modules from .tsx files.

But without typings IDE doesn't know what is inside of the 'https://unpkg.com/es-react' module.

Screen Shot 2019-12-06 at 6 17 20 AM

After I added typings.d.ts it now understand what is React, ReactDOM.

Screen Shot 2019-12-06 at 6 17 42 AM

Here is example of the project https://github.com/okhomenko/es-react-typescript

I hope it all makes sense.

Ahh, so you are doing this to get type suggestions in your editor? That makes more sense. Where do you get the type definitions from?

My main concern is type safety, suggestions is an extra score. Type definitions I get from @types/react and @types/react-dom.

When I import React in .tsx:

import React from 'react';

typescript read functionality from react module, and definitions from @types/react module.

In the example below I use definition file .d.ts (not regular .ts), so when I import React from 'react' it reads type definitions from @types/react.

// src/typings.d.ts
declare module 'https://unpkg.com/es-react' {
    import React from 'react';
    import ReactDOM from 'react-dom';

    export {
        React,
        ReactDOM
    };
}

My initial idea is to replace commonjs module react with es module react.
I started with replacing imports React from 'react' to import { React } from 'https://unpkg.com/es-react'. Typescript started complaining that there is unresolved module 'https://unpkg.com/es-react' and from this point I've lost all type definition for React Components.

That's the main source of this issue.

Ok, well I kind of understand the issue but I feel like these two approaches are quite contradictory. If you are using typescript (and so presumably bundling your app) then why would you use es-react and not just react? I'm not saying you shouldn't per se but rather trying to understand your motivations for using es-react over just react.

(disclaimer I am only just myself starting to look at how types work with buildstep-less architectures)

That's the point, I don't want to bundle. Typescript can generate commonjs or es modules. It doesn't bundle them all together, just compiles to .js. Webpack is what's bundling them all together.

create-react-app/whatever tool chain. It usually contains everything: preprocessor for css (sass/less/etc), compiler (babel/typescript/etc) and bundler (webpack/rollup). CSS Preprocessor and JS compiler generate commonjs modules. Next step bundler bundles commonjs files all together.

My motivation is to:

  • stop using bundlers
  • keep using Typescript for type safety
  • start using es-modules (since there is vast support of http2 and es-modules)

Cool. Well sounds like you know what you want but I don't know how to help as I am not familiar enough with typescript or the type files. What I would suggest is cloning this repo (an older version of it which just contained the bare essential files) then try adding the appropriate files to that and making a pull request so that we can see what it might look like.

How does that sound to you?

Sounds good!

Thank @lukejacksonn for this package and all the questions ๐Ÿ˜Ž

When I started this issue I didn't know exactly what I want and how it suppose to work. Now at least I have an idea.

Hey @okhomenko hopefully this is fixed for you now thanks to @vovaguguiev and #14. Closing here, feel free to re-open if you have any further issues!

@lukejacksonn @vovaguguiev ๐Ÿ™Œ thanks, exactly what I need!