A compact version of WUX Javascript library to build component based user interface in a simple way.
Here is also an example of Javascript microfrontend using single-spa framework and micro-wux library:
micro-wux-app- typescript application with micro-wux librarysingle-spa-app- single-spa applicationsingle-spa-root- single-spa root config
The single-spa root config has been created with npx create-single-spa.
git clone https://github.com/giosil/micro-wux.gitnpm install typescript -gtsc --declaration --project ./micro-wux-app/ts/wux/tsconfig.json
cd micro-wux-app.\build.cmdor./build.sh- compile micro-wux application.\deploy.cmdor./deploy.sh- generateindex.jsinmicro-wux-app/srcfolder
cd micro-wux-appnpm run build- compile micro-wux applicationnpm run deploy- copyindex.jsandmicro-wux-app.jsinmicro-wux-app/srcfolder
Start single-spa-app:
cd single-spa-appnpm installnpm start- to serve single-spa applications at http://localhost:8080/index.js
Start single-spa-root:
cd single-spa-rootnpm installnpm start- to start single-spa root config at http://localhost:9000
namespace APP {
export class Main extends WUX.WComponent {
protected render() {
return '<div>Hello World.</div>';
}
}
}<!DOCTYPE html>
<html>
<head>
<title>Micro WUX</title>
</head>
<body>
<div id="view-root"></div>
<script src="dist/wux.min.js"></script>
<script src="dist/app.min.js"></script>
<script type="text/javascript">
WuxDOM.render(new APP.Main(), 'view-root');
</script>
</body>
</html>import APP, {WuxDOM, WUX} from "./micro-wux-app.js";
export function bootstrap(props) {
return Promise.resolve().then(() => {
// One-time initialization code goes here
console.log('[' + props.name + '] bootstrap...');
});
}
export function mount(props) {
return Promise.resolve().then(() => {
// Do framework UI rendering here
console.log('[' + props.name + '] mount...');
WuxDOM.render(new APP.Main(), 'single-spa-application:' + props.name);
});
}
export function unmount(props) {
return Promise.resolve().then(() => {
// Do framework UI unrendering here
console.log('[' + props.name + '] unmount...');
WuxDOM.unmount('single-spa-application:' + props.name);
});
}
export function unload(props) {
return Promise.resolve().then(() => {
// Hot-reloading implementation goes here
console.log('[' + props.name + '] unload...');
});
}Start minimal-spa-app:
cd minimal-spa-appnpm installnpm start- to serve single-spa applications at http://localhost:8080/index.js
Here is the public/index.js:
System.register([], function(_export, _context) {
// Inject the application here:
// var WuxDOM,WUX,APP;
// ...
return {
execute: function() {
_export({
bootstrap: (props) => {
return Promise.resolve().then(() => {
// One-time initialization code goes here
console.log('[' + props.name + '] bootstrap...');
});
},
mount: (props) => {
return Promise.resolve().then(() => {
// Do framework UI rendering here
console.log('[' + props.name + '] mount...');
// Use micro-wux application here:
// WuxDOM.render(new APP.Main(), 'single-spa-application:' + props.name);
document.getElementById("single-spa-application:" + props.name).innerHTML = 'Hello world!';
});
},
unmount: (props) => {
return Promise.resolve().then(() => {
// Do framework UI unrendering here
console.log('[' + props.name + '] unmount...');
// Use micro-wux application here:
// WuxDOM.unmount('single-spa-application:' + props.name);
document.getElementById("single-spa-application:" + props.name).innerHTML = '';
});
},
unload: (props) => {
return Promise.resolve().then(() => {
// Hot-reloading implementation goes here
console.log('[' + props.name + '] unload...');
});
}
});
}
}
});<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 82 72" xmlns="http://www.w3.org/2000/svg">
<text style="fill: rgb(0, 0, 0); font-family: Consolas; font-size: 50px;" x="0" y="40">{µ}</text>
<text style="fill: rgb(0, 0, 0); font-family: Consolas; font-size: 14px;" x="7" y="65">micro-wux</text>
</svg> |
 |
