loadax v1.45.0
Loadax - micro front-end solution! v1.44.x
Today we can create app on vue, react, angular, svelte, ember or any other... With Loadax - in the same time!!!
Loadax is a powerful solution which opens the way to a new age of web application development!
Full use case you can find at DevOptions ... soon
Install Loadax PWA instance
npm init
oryarn init
npm install loadax
oryarn add loadax
loadax create-instance
npm run dev
oryarn dev
Install Loadax module for PWA
loadax create-module
loadax build
Once Loadax installed will add loadax.config.js
to your project directory
Loadax configuration file
This file automatic added after Loadax installed! It needed for build project as Loadax module. More information of Loadax and Loadax modules you can find at DevOptions ... soon
module.exports = {
dist: "dist/loadax-manifest", // output path for Loadax manifest file
module: {
version: "0.0.0", // Version of App
type: 0, // type of module: 0 - main app enterpoint , 1 - as app pages, 2 - as service lib, 3 - as single reusabel component
name: "AppName",
route: "/", // routes as string delemited with ","! Ex.: "/,/main"
children: "/", // children routes delimited like as "route" props,
path: "/js/app.js", // URL path to module for loading in Loadax,
css: "/css/app.css" // url path to modiule styles for loading in Loadax
}
}
For build Application as Loadax-module execute in terminal: loadax build
Loadax CLI
Execute $: loadax
in terminal for details
laodax init
- auto-execute after installing by default. Create loadax.config.jsloadax build
- build app as Loadax moduleloadax create-instance
- create loadax pwa main apploadax create-module
- create loadax pwa module for main app- wip:
loadax docker
- create Docker file for Loadax - wip:
loadax add:app
- add Lodax default app template - wip:
loadax add:tests
- add full testing - wip:
loadax add:test:unit
- added Loadax unit testing - wip:
loadax add:test:system
- added Loadax system testing - wip:
loadax add:test:e2e
- added Loadax function testing
Simple use case: Multi modules
import Loadax from "loadax"
const Loader = new Loadax('https://rest.api/modules')
Loader.injectAllModules().then(addedModules => {
console.log(addedModules)
Loadax.executeModule(addedModules[0].name)
})
Simple use case: Single module
import Loadax from "loadax"
const Loader = new Loadax('https://rest.api/modules')
Loader.injectModule("news").then(addedModule => {
if (addedModule) {
console.log(addedModule)
Loadax.executeModule(addedModule.name)
}
})
Simple use your own types
import Loadax, { ModuleBase, LoadedModuleBase } from "loadax"
export type ModuleDate = { createdAt: Date }
export type ShortModuleInfo = ModuleBase & ModuleDate
export type FullModuleInfo = LoadedModuleBase & ModuleDate
const Loader = new Loadax<ShortModuleInfo, FullModuleInfo>('https://rest.api/modules')
Simple use case: Multi modules w\o Loadax instance
import Loadax from "loadax"
Loadax.injectFloatModules('https://rest.api/modules').then(floatModules => {
console.log(floatModules)
Loadax.executeFloatModule(floatModules[0].name)
})
Simple use case: Single module w\o Loadax instance
import Loadax from "loadax"
Loadax.injectFloatModule("news", "https://rest.api/modules").then(addedFloatModule => {
if (addedFloatModule) {
console.log(addedFloatModule)
Loadax.executeFloatModule(addedFloatModule.name)
}
})
Simple use your own types for float modules
import Loadax, { ModuleBase } from "loadax"
export type ModuleDate = { createdAt: Date }
export type ShortModuleInfo = ModuleBase & ModuleDate
Loadax.injectFloatModules<ShortModuleInfo>('https://rest.api/modules').then(floatModules => {
console.log(floatModules)
Loadax.executeFloatModule(floatModules[0].name)
})
Simple use case: PWA
For run Loadax as PWA application execute in terminal loadax pwa
and all necessary files will be added at project directory. Sync application data store for all modules:
const Loader = new Loadax('https://rest.api/modules');
Loader.asPwa({ asInstance: true }) || Loader.asInstance()
Loadax PWA properties example:
const Loader = new Loadax('https://rest.api/modules');
Loadaer.asPwa({
app, // (Required) Loadax mount Application entepoint method: 'mount(ctx)'. Where ctx - ServiceWorker context
store, // (required) Lodax application processing Store
asInstance, // (custom) props for set as Main Application enterpoint mode
url // (custom) URL for ServceWorker file, default as public/main/ws-loadax.js
})
Loadax as PWA demo case. This is recommended work mode for Loadax, because this mode provide default store sync of Loadax modules.
import Loadax from "loadax";
const Loader = new Loadax('https://rest.api/modules');
const App = {
version: "1.0.0",
mount (node: HTMLElement) {
const elem = document.createElement("h1")
elem.innerText = `Click: ${App.version}`
Loader.storeEmit(data => elem.innerText = `Click: ${data.app.version}`, 'app.version.ust')
node.appendChild(elem)
node.onclick = () => Loader.storeAction<string>({
namespace: "app.version",
payload: (Math.random()*100).toString()
})
}
}
const mountApp = () => {
App.mount(document.body)
}
Loader.asPwa({
app: mountApp,
asInstance: true,
store: [
{
name: "app",
value: {
version: App.version
}
}
]
})
Contacts
npm@devoptions.ru
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago