[Request] Typings for es-react

[lukejacksonn]

[Request] Typings for es-react

[okhomenko]

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)

[okhomenko]

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.

[lukejacksonn]

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!

[okhomenko]

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
    };
}

[lukejacksonn]

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

[okhomenko]

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.

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

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

I hope it all makes sense.

[lukejacksonn]

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?

[okhomenko]

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
    };
}

[okhomenko]

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.

[lukejacksonn]

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)

[lukejacksonn]

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?

[okhomenko]

@lukejacksonn @vovaguguiev 🙌 thanks, exactly what I need!