Compile TS to native JS modules

[phaux]

RxJS version: 5.4.3

Code to reproduce:

<script type="module">
import * as Rx from './node_modules/rxjs/Rx.js'
</script>

Expected behavior: There should be a way to load RxJS via native JS module

Actual behavior: Can't access Rx when using JS modules (error: require is not defined)

[kwonoj]

This one requires build target for ES2015 modules, which we started include in #2804 . I think there'll be still some churns to actually able to use it but please give it a shot with 5.5 b.

[phaux]

I tried again with RxJS 5.5.0 and the only thing that is missing are js extensions in import statements. Without them I get 404 errors.

[phaux]

I configured the server to rewrite urls to include the extension and it works! Another problem that remains is that typescript can't find typings for the imports.

[kaste]

@kwonoj I tried the newer esm2015 build. But for native browser support you can't omit the file extension '.js' on import statements. AFAIK this won't be added as compile step to tsc. So there is the option to post-process the built files, or to add the extension everywhere in the source ts files. This looks ugly or unfamiliar, but I think people are doing this already.

[phaux]

From my experience the typings files should be emitted together with JS in the same directory

[kwonoj]

I am not using native modules at this moment so bit unclear things to me, please share details if you don't mind.

1. about extension
   : is this meaning you can't import esm as native module? or it's another enhancement to be added?
2. typings
   : what does this exactly mean with native module import environments?

[phaux]

about extension

Take a look at the file @reactivex/rxjs/dist/esm2015/Observable.js. All the imports there should have .js extensions. Otherwise importing Observable into your app will fail with 404 error (e.g. ./util/root should be ./util/root.js). I worked around that by setting up URL rewriting in apache/nginx.

typings

Example code:

import {Observable} from '../node_modules/@reactivex/rxjs/dist/esm2015/Observable.js'

The detected type of Observable is any. It should work if the declarations from /dist/typings were also copied to /dist/esm2015.

It seems that tsc will only look at "typings" in package.json when importing a module using CJS/Node syntax (import "@reactivex/rxjs" without mentioning node_modules or subpath)

[kwonoj]

/cc @jasonaden for visibility. Seems this requires postprocessing script.

[phaux]

I think it would make more sense if such script was implemented as part of build process in typescript itself after all 🤔

[kwonoj]

Maybe worth to ask tsc team as issue? (Or already there is?)

[kaste]

To quote myself

AFAIK this won't be added as compile step to tsc.

I actually went to tsc first b/c I thought that's their fault, but from reading the issues I got the feeling they don't want to do that. BUT ... from their replies, I also got the feeling that they didn't quite get what the users wanted and thought 'user fault' too early. An issue raised by RxJS would be treated differently.

I don't think that they can get away with compiling to esm2015 but not supporting the browser import loader. I mean the browser loader is by far more important than the node module resolution algo and rollup and the rest of them together.

And AFAIK the browser agreed on that they only accept fully qualified names (in the end: URLs) as module names.

[phaux]

Let's sum up all the ES module quirks again:

1. Imports must include .js extensions, because they are basically relative urls that the browser will use to download scripts.
2. Imports of other libraries must use relative path (../node_modules/some-lib/dist/lib.js instead of just some-lib)
3. Typings (.d.ts files) should be in the same directory that the js files are. "typings" property of package.json is used only when importing a library using node syntax (using only the package name as the path, so it doesn't work with ES modules)

(3) is actually the default behavior of TS. (1) and (2) would need a post processing script if TS wont implement it.

Post processing script pseudo code:

for (every Import statement) {

    if (Import points to other package) {
        
        path = find_relative_path_to('node_modules') + path
        path += read('package.json')['main'] // read main property from module's package.json

    }
    
    if (path points to directory) { path += '/index.js' }
    else { path += '.js' }

}

[kaste]

Friendly ping.

Any progress on this? What direction will Rx go?

/Cc @benlesh you asked me for a link to this issue.