Comments (12)
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)
from es-react.
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.
from es-react.
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!
from es-react.
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
};
}
from es-react.
How does this work as an es-module; that is without a build step?
from es-react.
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.
from es-react.
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?
from es-react.
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
};
}
from es-react.
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.
from es-react.
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)
from es-react.
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?
from es-react.
@lukejacksonn @vovaguguiev 🙌 thanks, exactly what I need!
from es-react.
Related Issues (5)
- v 16.12.0 support HOT 1
- ReactDOMServer HOT 5
- Experimental React HOT 2
- Export named `React` members HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from es-react.