ui5-mobx-mst v1.0.3

ui5-mobx-mst

UI5 Reactive State Management Framework with MobX / MobX State Tree. Integrated with the latest Mobx 6 package.

Getting started

Install

With yarn:

yarn add ui5-mobx-mst

Or npm:

npm i ui5-mobx-mst -S

Configure

Register the following custom task in your project's ui5.yaml:

1. Define it as a ui5 dependency in your project's package.json:

{
  "ui5": {
    "dependencies": [
      "ui5-mobx-mst"
    ]
  }
}

Local development usage:

1. Install a middleware router, for example: ui5-middleware-route.

2. Set the custom middleware accordingly:

server:
  customMiddleware:
    # Static source routing for mobx state tree resources 
    - name: ui5-middleware-route
      mountPath: /resources/thirdparty
      beforeMiddleware: compression
      configuration:
        path: node_modules 

Production usage:

1. Configure your shims accordingly:

# Third party libraries
specVersion: '2.2'
kind: extension
type: project-shim
metadata:
  name: thirdparty # this can be your project shim name
shims:
  configurations:
    ui5-mobx-mst: # name as defined in package.json
      specVersion: '2.2'
      type: module # Use module type
      metadata:
        name: ui5-mobx-mst
      resources:
        configuration:
          paths:
            /resources/thirdparty/ui5-mobx-mst/: ""  # location where modules are stored            

2. Issue the following command to preload build for project and dependencies to "./dist"

ui5 build --all

In your UI5 app:

Example of defining it in Component.js

// This line below maybe necessary if you're using mobx/mobx state tree globals before the MobxModel is initialized. (For example: declaring a MST model type together with the MobxModel below) This will force synchronous loading of the bespoke globals ahead of the MobxModel - may needed for productive scenarios in ./dist
//$.sap.require("thirdparty/ui5-mobx-mst/MobxModel");

// Works for both configurations above 
sap.ui.define([
	"sap/ui/core/UIComponent",
	"thirdparty/ui5-mobx-mst/MobxModel"
], function(UIComponent, MobxModel) {
    ...
}

For older browser support, ui5-mobx-mst disables proxies by default:

mobx.configure({
    useProxies: "never"
});

If however, you want to override this, the mobx and mobxStateTree globals are available for you to do this, after you've loaded the MobxModel above.

About Mobx

👉 Official docs can be found at Mobx

About Mobx State Tree

👉 Official docs can be found at Mobx State Tree

About Mobx/Mobx State Tree and UI5 Integration

👉 Further reads:

Credits

• Christian Theilemann @geekflyer, a former SAP™ Employee - for the Mobx - UI5 Integration inspiration
• Leon van Ginneken @leon-vg for the Mobx State Tree - UI5 Integration inspiration