A runtime library designed to help host apps initialise the runtime on the client-side and dynamically load components from an external component registry.
This client-side runtime library is part of the Extensible Frontends project. It enables host applications to initialise a runtime environment that can dynamically load and manage components from an external component registry.
- Node.js
- npm or yarn
Install the package using npm or yarn:
npm install ef-runtime-client
To initialise the runtime, provide the system code for your host application:
import * as EFRuntime from "ef-runtime-client";
EFRuntime.init({ systemCode: "ef-demo-host" });
If needed, you can override specific entries in the component registry. Specify separate URLs for JavaScript and CSS like so:
EFRuntime.init({
systemCode: "ef-demo-host",
overrides: {
"my-component": {
js: "http://localhost:3000/my-component.js",
css: "http://localhost:3000/my-component.css",
},
},
});
Instead of modifing the init function in the page's code, you can use the Extensible-Frontends override UI to test your component locally. To do so, You can add the key efui
to your browser's localStorage manually and set its value to "true" or by running the following command in your browser's console:
localStorage.setItem("efui", "true")
If the EFUI
button is showing in the page you are developing and you would like to disable it, simple remove the key from your browser's localStorage manually or by running the following command in your browser's console:
localStorage.removeItem("efui")
The runtime allows you to implement custom logging. You can utilize this feature to integrate your own logging system or to assist in debugging. Pass a logging object during initialisation with custom functions for info
, warn
, error
, and debug
.
Here's an example:
EFRuntime.init({
systemCode: "ef-demo-host",
logging: {
info: (message, ...args) => customLogger.info(message, ...args),
warn: (message, ...args) => customLogger.warn(message, ...args),
error: (message, ...args) => customLogger.error(message, ...args),
debug: (message, ...args) => customLogger.debug(message, ...args),
},
});
If you do not provide specific functions, default console methods are used for errors, and other logs are suppressed.
Execute the test suite with the following command:
npm test