loadax

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 or yarn init
• npm install loadax or yarn add loadax
• loadax create-instance
• npm run dev or yarn 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.js
• loadax build - build app as Loadax module
• loadax create-instance - create loadax pwa main app
• loadax 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

[e-mail]