Nodejs support

[aminya]

It would be nice to have Nodejs support. fetch is not supported in Nodejs. You can use something like https://github.com/node-fetch/node-fetch.

[tylervipond]

Hey, thanks for your interest in this package! I was wondering, have you tried the instructions for patching fetch in node found here https://github.com/node-fetch/node-fetch#loading-and-configuring-the-module? I haven't tried it myself but in theory it should work out.

[tylervipond]

This would also need to be patched onto global https://github.com/southpolesteve/node-abort-controller

[aminya]

I need to try that. I guess it is a good idea to fix this in a pull request.

[tylervipond]

It really depends, there's an open question here: If the user is using a browser should I force them to download packages to support node? If the user is using node, but is using other fetch packages, should I also force them to download the fetch packages that I'm using here? Or would it be better to add instructions for using the packages of their choice to patch global?

[aminya]

It is better to write a code that supports multiple platforms than saving 100KB of bandwidth. The library itself is 0.4KB which is nothing. If dynamic loading is used, that will not be loaded by the browser.

Take a look at this too: https://github.com/wasm-tool/rollup-plugin-rust/blob/6138501796e8d67ef21365f280c88bf60a8b512e/index.js#L275

[tylervipond]

Alright I'll give this some thought. Out of curiosity, what context are you trying to use this in? (SSR, statically rendered?)

[aminya]

Inside Electron (Atom specifically)

[tylervipond]

I'll work on this. In the meantime if this is urgent, could you try patching fetch and AbortController in node and let me know how it goes?

[tylervipond]

@aminya do you have a repo/branch I could take a look at? I'd like to see specifically how React is being used here. I suspect it might be more complex than adding node-fetch. Are you rendering your React components inside node? (I guess you must be) and are they being hydrated in the browser?

[aminya]

Electron uses Chrome for rendering, but some of the API is not available there such as fetch.

There are many electron-react templates which should do the job:

https://github.com/diego3g/electron-typescript-react
https://github.com/electron-react-boilerplate/electron-react-boilerplate

I can set up a branch for Atom if you want to try that instead.

[tylervipond]

So, I made this earlier today to test with: https://github.com/tylervipond/use-as-bind-electron-example, it's built on https://github.com/electron-react-boilerplate/electron-react-boilerplate and fetch appears to be working without any additional work, perhaps it's being added somewhere. I'll try it out with https://github.com/diego3g/electron-typescript-react

[tylervipond]

@aminya I was able to get the hook working in both of the boilerplate projects listed, without the the need to add node-fetch. So I'm thinking there must be something different in the way that React is being used in your situation, would you be able to send me that branch so I can take a look?

[aminya]

@tylervipond Yes. I will set up a branch and will let you know once it is ready.

[aminya]

I'm quite busy this week. I can make the branch in the coming weekend.

[tylervipond]

@aminya hate to bug, any luck on this?

[aminya]

Sorry about this. I'll do it this weekend!

[tylervipond]

No worries 👍 and thanks!

[aminya]

I have made a real-world feature that uses React inside Atom. I still need to add a React hook for use-as-bind.

https://github.com/atom-ide-community/atom-ide-base/blob/float-pane/src-commons-ui/float-pane/ViewContainer.tsx
atom-community/atom-ide-base#23

Testing it is not that straight forward though (sorry about it)! You need to have Atom, pnpm, and some deps installed.

npm install -g pnpm

Then:

git clone https://github.com/atom-ide-community/atom-ide-base
cd atom-ide-base
git checkout float-pane
pnpm install
pnpm build.commons-ui

Now, link this to atom-ide-datatip

git clone https://github.com/atom-ide-community/atom-ide-datatip
cd atom-ide-datatip
pnpm install path_to_atom_ide_base_folder
pnpm install
pnpm debug
apm link .

For testing:

apm install atom-ide-javascript

Reload Atom (Ctrl+Shift+F5), and hover on some word in a JavaScript file. The datatip is made from ViewContainer!

I use two terminals to build projects:

pnpm build.commons-ui
pnpm debug

I use two instances of Atom for developing and testing. I edit in one and use the other one for seeing the result (by reloading)

[tylervipond]

Thanks so much @aminya! I'll dig into this this weekend

[tylervipond]

Got a bit busy and this got put on the back-burner for a bit. I came back to it today. Using the installation instructions above, I'm not able to run pnpm build.commons-ui in atom-ide-base as I get a number of TS errors atm.