Specify URL Fetcher

[JSeligsohn]

Great library and component!

I see that this project relies on your other project, the Remote Module Loader, and in that project, one is able to specify their own fetcher. Do you have plans to expose this capability within the "remote component" itself? In other words, perhaps pass in a function that is responsible for retrieving the remote component source?

E.g.

const fetcher = const fetcher = url => axios.get(url).then(request => request.data);
const HelloWorld = props => <RemoteComponent url={url} fetcher={fetcher} {...props}  />;

My use case would be that I have multiple remote components already loaded and I want a way to specify which one to use here. I see that you have plans to implement a feature to allow multiple external urls, but I think my use case is slightly different.

[joelnet]

I need to update the docs. But because it's using the @paciolan/remote-module-loader, you should be able to pass in the fetcher.

Try this:

import axios from "axios";
import {
  createRemoteComponent,
  createRequires
} from "@paciolan/remote-component";
import { resolve } from "../remote-component.config.js";

const fetcher = url => axios.get(url).then(request => request.data);
const requires = createRequires(resolve);

export const RemoteComponent = createRemoteComponent({ requires, fetcher });

Then in your project you will import this custom RemoteComponent.

I haven't tested this, but in theory it should work. I'll do some testing on this and update the docs to reflect once I have confirmed it to be working.

Cheers 🍻

[JSeligsohn]

@joelnet Thanks for the prompt response!

That makes a lot of sense. I suppose I could have figured this out from a different case in the docs, where you describe importing dependencies without webpack. Thanks for clearly outlining here how to use my own fetcher. I'll give it a try.