From browser using HTML
To use the warped module from a Browser script, you need first to import the warped module. You also need to import the WarpJS Engine that will provide you access to the functions of the module you want to use in your script.
Import the warped module
In order to use it from HTML, the warped module should have been build in umd
format.
In your html, you have to import it using a script:
<script src="warped_module.js"></script>
Get access to the module
Now you loaded it, you need to get access to it.
<script>
const MicroService = window['warped_module-client']
</script>
Load WarpJS engine
Next step is to load the WarpJS engine. WarpJS engine provides you the way to call functions of your warped module. You have 2 ways to load it : using loadEngine
warped module function or using a WarpJS engine module dependency.
loadEngine()
Using A warped-module provides a loadEngine
function. That function will load the latest compatible release of the WarpJS engine for the warped module build. We recommend using this way because you never have to manage the WarpJS engine version.
<script>
const MicroService = window['warped_module-client']
MicroService.loadEngine().then( ... )
</script>
or
<script>
const MicroService = window['warped_module-client']
async function start() {
await MicroService.loadEngine()
}
start()
</script>
Using an engine script
In case you cannot use or adapt your code to be asynchronous and use the loadEngine
way, you can directly import the engine from an url before loading the warped module. At each release of a warp engine we push it on a CDN. You then have to load the right engine version which should match with the WarpJS version you used when building the warped module.
<script src="https://cdn.scaledynamics.com/warp-engine/4.0.4/engine-web-prod.js"></script>
<script src="warped_module.js"></script>
Note that you have to manage yourself the dependency of the WarpJS engine that must be compatible with your warped module build.
Get warped module functions and use them
Now you have load the warped module and warp engine you can set your functions and call them.
<script>
const MicroService = window['warped_module-client']
MicroService.loadEngine().then(()=> {
const { hello } = new MicroService()
hello('World').then((message) => {
console.log(message)
})
})
</script>
Full example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Warped module use</title>
</head>
<body>
...
<script src="warped_module.js"></script>
<script>
const MicroService = window['warped_module-client']
MicroService.loadEngine().then(()=> {
const { hello } = new MicroService()
hello('World').then((message) => {
console.log(message)
})
})
</script>
</body>
</html>