@paciolan/remote-module-loader

Remote Module Loader

Loads a module from a remote url.

Install

npm install @paciolan/remote-module-loader

Simple Example

If your module has no external dependencies, this is the easiest method to fetch the remote module.

/**
 * src/lib/loadRemoteModule.js
 */

import { createLoadRemoteModule } from "@paciolan/remote-module-loader";

export default createLoadRemoteModule();

/**
 * src/index.js
 */

import loadRemoteModule from "./lib/loadRemoteModule";

const myModule = loadRemoteModule("http://fake.url/modules/my-module.js");

myModule.then(m => {
  const value = m.default();
  console.log({ value });
});

Require Example

You can pass dependencies to the module.

/**
 * src/lib/loadRemoteModule.js
 */

import { createLoadRemoteModule } from "@paciolan/remote-module-loader";

// dependencies for the loaded module.
const dependencies = {
  react: require("react")
};

// requires method exposes dependencies to the loaded module.
const requires = name => dependencies[name];

export default createLoadRemoteModule({ requires });

/**
 * src/index.js
 */

import loadRemoteModule from "./lib/loadRemoteModule";

const myModule = loadRemoteModule("http://fake.url/modules/my-module.js");

myModule.then(m => {
  const value = m.default();
  console.log({ value });
});

Using your own fetcher

By default loadRemoteModule will use the XMLHttpRequest object avaiable in the browser. This can be overridden if you want to use an alternate method.

/**
 * src/lib/loadRemoteModule.js
 */

import { createLoadRemoteModule } from "@paciolan/remote-module-loader";
import axios from "axios";

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

export default createLoadRemoteModule({ fetcher });

/**
 * src/index.js
 */

import loadRemoteModule from "./lib/loadRemoteModule";

const myModule = loadRemoteModule("http://fake.url/modules/my-module.js");

myModule.then(m => {
  const value = m.default();
  console.log({ value });
});

React Hooks

The same techniques to include a requires and a fetcher with createLoadRemoteModule also work with createUseRemoteComponent. No need to go over them again.

/**
 * src/lib/useRemoteComponent.js
 */

import { createUseRemoteComponent } from "@paciolan/remote-module-loader";

export default createUseRemoteComponent();

Contributors

Joel Thoms ([e-mail])

Icon made by Freepik from www.flaticon.com