Ky: Add an ES5 build for older browsers

[kirillgroshkov]

I've read many similar closed issues, but haven't found a good documented solution on what can I do as a consumer of ky package if I need to support e.g iOS 10.0 browser (that breaks on async/await support currently).

I agree that it's not related to ky itself, but can be a nice help for the consumers of the package.

In our particular can we don't use babel (we use typescript), so I'm not sure what's the easiest way to transpile it without complicating our build step with babel and more tools.

I promise to post a solution here if I stumble upon one myself.

[sholladay]

If you are already using the TypeScript compiler, I don't think you need Babel. You just need to configure TypeScript such that it will compile Ky, which it does not do automatically.

Depending on your existing set up and configuration, you may need either or both of the following in your TypeScript configuration:

• Enable the allowJs option, because Ky uses ambient type definitions with the source code written in JS.
• Add the path or glob pattern for Ky to the include directive, in case it's being ignored as part of node_modules, so it looks something like this:
  json "include": [ "./node_modules/ky/**/*", ]

Give that a shot and if it works, we can consider adding something about it to the documentation. Or if that helps you find a resource we can link to, that would probably be even better.

[kirillgroshkov]

Thank you for your reply! I'll give it a shot!

I actually never thought that typescript can transpile anything inside node_modules, or anything that is not *.ts, but let's see if I'm wrong.

I spent few hours today already porting/forking ky back and forth to/from TypeScript, but with the ambient declarations it's harder than I thought.

My plan C would be to actually give up and adopt/learn Babel, and end up having TypeScript, Rollup and Babel all in one project (probably in every project that consumes ky).

Let's see..

[kirillgroshkov]

Oh wow, it almost worked! It did transpile it down to es2015 despite my disbelief!

I got this error:

node_modules/ky/index.js:3:1 - error TS9005: Declaration emit for this file requires using private name 'HTTPError'. An explicit type annotation may unblock declaration emit.

3 const globals = {};
  ~~~~~

And got this directory structure in my dist folder:

While my imports of ky are still kept like: const ky = require('ky'). So, I cannot ship it like that.

What I can do is "vendor" it: copy-paste ky's index.js and index.d.ts in a folder inside my project, then folder structure will be ok. But it'll become a "fork", so I'll lose updates from official ky, which is too bad (I hoped for a pure transpilation solution while I keep it in node_modules).

[kirillgroshkov]

Ok, actually, when trying the forementioned recipe in an Angular application, it completely worked.

So, including node_modules/ky/index.js in the include section of tsconfig, plus allowJs: true made it transpiled to es2015 (according to the target set in tsconfig) in the resulting bundle. Awesome! Thanks @sholladay !

Feel free to close this issue or wait until someone makes an actual documentation block of it. I believe we have an easy-to-follow recipe for TypeScript users.

[ohardy]

Hi,

I have similar problem with IE11 that doesn't support spread.

It's strange that this package is not compiled with babel or anything else during publish, all other packages do that, even more what is used on the browser side.

Why not just do a compilation to es5 during the publish of the ky package ?

[sholladay]

I think we would strongly consider publishing an ES5 build if a high quality PR shows up for it.

When Ky was first released, we didn't need or use a build step. Since then, though, we implemented UMD builds to make Node.js usage easier. I think ES5 is a logical next iteration since we have Rollup now.

[arthuryeti]

@sholladay I'm working on a pull request to improve the rollup config.

[kirillgroshkov]

@sholladay I'm working on a pull request to improve the rollup config.

Nice! 👍
Just wondering - are you planning to transpile down to es5 by using Babel or TypeScript (or something else)?

[ohardy]

@arthuryeti @sholladay maybe a typescript version compiled to javascript during publish should be good, no ?

[sholladay]

Let's start with Babel for now. I can see the benefits of going full TypeScript and using the compiler to output various builds, but then we lose the whole "one file that you can copy/paste" thing, which has some real value for a browser library. Also, we would need to set up linting for it - not too hard, just more to do. Rollup has a plugin for Babel and it should be simple to set up compared to going full TypeScript.

[kirillgroshkov]

Let's start with Babel for now. I can see the benefits of going full TypeScript and using the compiler to output various builds, but then we lose the whole "one file that you can copy/paste" thing, which has some real value for a browser library. Also, we would need to set up linting for it - not too hard, just more to do. Rollup has a plugin for Babel and it should be simple to set up compared to going full TypeScript.

I think it's possible to use TypeScript solely for transpilation down to es5, while keeping current index.js completely intact, by following your guide above (allowJs: true and friends).

But sure, I'm not deciding anything here, just saying that both Babel and TypeScript can solve that task.

[arthuryeti]

@sholladay I'm using Rollup and the babel plugin :)

[sholladay]

Yeah, you're probably right, may be simpler than I thought to use the TypeScript compiler without big changes. Sure, we can try it. Use CLI flags instead of tsconfig.json if you can.