ueca-react 1.0.5 → 1.0.7

package/README.md

@@ -1,57 +1,119 @@
 ![logo](/docs/logo.png)
-
-# Unified Encapsulated Component Architecture
-
-## From the Author
-
-The UECA framework was initially developed as a fun pet project to explore the unification of building blocks (components) in React-based applications. The rationale behind this was straightforward: developing large-scale React applications, especially the business logic, using pure React and the recommended React patterns is unequivocally challenging. Even with a well-organized, experienced, and motivated development team, pure React code often appears overly complex, creating unnecessary cognitive load for developers. This complexity usually leads to poor code structure, numerous bugs, tensions among developers, and frequently missed deadlines, ultimately harming the business.
-
-React, while powerful, is a relatively low-level technology that demands developers not only have substantial React programming experience but also meticulously organize their code to avoid confusion. This approach is labor-intensive during both development and maintenance. Statistically, low-level, non-templated code tends to have more bugs than code built on a foundation of higher-order architectural principles. Ideally, low-level programming patterns should be encapsulated behind a facade of these principles.
-
-In most cases, UI application development employs a component-based approach. The user interface is constructed from various unified parts called components, and React is built on this model. However, standard React patterns force developers to worry excessively about component interactions. As a result, developers often write different code that serves similar functions. In a team environment, this issue can multiply exponentially. Normalizing such logic is either prohibitively expensive or nearly impossible. Unfortunately, businesses often prioritize enhancements over code refactoring, leaving teams to manage redundant code that becomes increasingly costly to support over time. Statistically, the likelihood of bugs in the system increases with the volume of code.
-
-UECA addresses this problem by encapsulating routine code, allowing developers to focus on high-level logic and unifying the code structure. Additionally, UECA mitigates the need for highly experienced React developers. The code pattern requires minimal React experience, making the primary technologies TypeScript and JSX. Even a group of junior developers, guided by a UI architect, can perform well using this framework.
-
-The UECA library has already been successfully employed to develop a large-scale commercial web application. Initially, the project began with pure React, but it gradually became unmanageable. Adopting UECA saved the project from shutdown, preserved developers' jobs, and ultimately allowed the product to be released. This is a true success story. 
-
-Special thanks to *Artem Tsetkhalin, Roman Ilyuchonak, Roman Nekliukov, Andrey Solovyov, and Pavel Borodaev* for their testing and bug reports.
-
-If you have any questions or comments, please feel free to reach out to me at cranesoft@protonmail.com.
-
-Thank you very much for your interest in and support of UECA ideas. Happy coding! 😎
-
-## UECA Basic Documentation
-
-Comprehensive documentation detailing UECA aspects, code patterns, and examples will be available soon.
-
-### [1. Component Mental Model](/docs/component-mental-model.md)
-
-### [2. Component Integration Model](/docs/component-intergation-model.md)
-
-### [3. Introduction to UECA](/docs/introduction.md)
-
-### [4. Technology of UECA ](/docs/technology.md)
-
-### [5. Base Concepts of UECA ](/docs/base-concepts.md)
-
-### [6. General Code Structure](/docs/general-code-structure.md)
-
-### [7. Property Bindings ](/docs/bindings-overview.md)
-
-### [8. Message Bus ](/docs/message-bus.md)
-
-### [9. Standard Code Template](/docs/code-template.md)
-
-## Code Examples on CodeSandbox
-#### [UECA Basics: Application (Code Examples Menu)](https://codesandbox.io/p/sandbox/frosty-banach-jsf84c)
-
-Additional code examples will be available soon. Check the CodeSandbox UECA project.
-
-#
-
-<iframe src="https://codesandbox.io/embed/8x7yst?view=preview&module=%2Fsrc%2Fcomponents%2FappMessages.ts&hidenavigation=1"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="UECA Basics: Message Bus"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-/>
+# UECA-React
+
+## Why UECA?
+
+Building large-scale React apps can be a mess—complex code, bug-prone patterns, and endless refactoring. UECA (Unified Encapsulated Component Architecture) changes that. Born as a pet project, it simplifies React development by hiding the low-level chaos behind a clean, unified structure.
+
+Curious about easier React development? Here’s what UECA brings to the table:
+
+**Simple Learning Curve**: No React or MobX expertise needed—just plain TypeScript and JSX.
+```typescript
+const struct = { 
+  props: {text: "" },
+  View: () => <div>{model.text}</div>
+};
+```
+
+**Single Principle**: Model-View approach keeps code predictable.
+```typescript
+View: () => <button onClick={() => model.onClick?.()}>{model.text}</button>
+```
+
+**Strong Typing Everywhere**: Full TypeScript support ensures safety and clarity across all components.
+```typescript
+// 'API.getTime' is literal type
+model.time = await model.bus.getAsync("API.getTime");
+  
+// 'onChangeTemperature' is auto-event for property 'temperature'
+onChangeTemperature={() => { console.log("Temperature changed"); }}
+```
+
+**Homogeneous Structure**: Every component looks the same—easy to read, review, and test.
+```typescript
+type ButtonStruct = UEC.ComponentStruct<{
+  props: {
+    caption: string;
+    clickMode: "click" | "toggle";
+    active: boolean;
+    disabled: boolean;
+  };
+
+  events: {
+    onClick: () => void;
+  };
+
+  methods: {
+    click: () => void;
+  };
+}>;
+```
+
+**Stateful Simplicity**: State (MobX) and React are hidden, freeing you for business logic.
+```typescript
+model.value = "new text"; // Fires onChangeValue event and auto-updates UI
+```
+
+**Powerful Bindings**: Link properties effortlessly.
+```typescript
+lastNameInput: useInput({
+  label: "Last Name:",    
+  value: UEC.bindProp(() => model.lastName, "lastName"), // two-ways binding
+  disabled: () => !model.allowEditing  // one-way binding
+}),
+```
+
+**Built-in Events**: Automatic `onChange`/`onChanging` events when property changes.
+```typescript
+onChangeTemperature={() => { model.pressure = model.calcPressure(model.temperature); }}
+```
+
+**Message Bus**: Async communication between components.
+```typescript
+messages: { 
+  "API.getItemName": async (id) => await model.apiClient.get("get-item-name?id:", { id })
+},
+```
+
+**Lifecycle Hooks**: `init`, `mount`, `unmount` out of the box.
+```typescript
+init: async () => {
+  model.itemName = await model.bus.getAsync("API.getItemName", { id: model.itemId }),
+} 
+```
+
+**Large Scale**: Perfect for large-scale apps, proven in production.
+
+**Easier Project Management**: Team leads and architects breathe easier with UECA.
+Its uniform component structure and strong typing mean predictable code—no wild variations or guesswork. Onboarding is fast, reviews are straightforward, and scaling doesn’t spiral out of control. Spend less time micromanaging and more on steering the project.
+
+UECA saved a real-world project from collapse, turning chaos into a shipped product. Ready to simplify your React journey? Try it out!
+
+Questions? Reach me at [cranesoft@protonmail.com](mailto:cranesoft@protonmail.com). Happy coding!
+
+## Current Version: 1.0.7
+
+The latest stable release of `ueca-react` is version 1.0.7. This version provides a solid UECA foundation for building React applications.
+
+### Installation
+```bash
+npm install ueca-react
+```
+Dependency npm packages (react, react-dom, lodash) should be installed separately in your React project. Compatible React versions: 16.8.0–19.1.0. Ensure your react-dom version matches your react version.
+
+## Upcoming Version: 2.0
+
+Version 2.0 of `ueca-react` is in development and testing, bringing a major upgrade:
+
+- **Fresh Core**: Rewritten from scratch for rock-solid consistency.
+- **Dynamic Content**: Seamless support for functional components in JSX.
+- **Model Cache**: Models persist through unmounts, reused on remount.
+- **New Lifecycle**: `constr`, `init`, `deinit`, `mount`, `unmount`, `draw`, `erase` hooks for finer control.
+- **Async Power**: Better async handling with centralized error management.
+- **Advanced Messaging**: `broadcast`, `castTo`, and `unicast` for flexible communication.
+- **Richer Event Log**: Enhanced component model logging.
+
+Stay tuned—2.0 will turbocharge your UECA projects! Meanwhile, 1.0.7 keeps things steady.
+
+## Getting Started
+Check out the [examples](https://codesandbox.io/p/sandbox/frosty-banach-jsf84c) and [documentation](/docs/index.md) to start building with `ueca-react`. For questions or contributions, feel free to reach out at [cranesoft@protonmail.com](mailto:cranesoft@protonmail.com).

package/dist/componentModel.js

@@ -1,7 +1,48 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$ = exports.getFC = exports.componentModelDebug = exports.bindProp = exports.bind = exports.blankView = exports.mergeStruct = exports.useComponent = exports.newComponentModelTrapRegistry = exports.useComponentModelTrap = exports.ComponentModelTrap = void 0;
-const React = require("react");
+exports.$ = exports.blankView = exports.ComponentModelTrap = void 0;
+exports.useComponentModelTrap = useComponentModelTrap;
+exports.newComponentModelTrapRegistry = newComponentModelTrapRegistry;
+exports.useComponent = useComponent;
+exports.mergeStruct = mergeStruct;
+exports.bind = bind;
+exports.bindProp = bindProp;
+exports.componentModelDebug = componentModelDebug;
+exports.getFC = getFC;
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const lodash_1 = require("lodash");
 const mobx_1 = require("mobx");
@@ -197,7 +238,6 @@ function useComponent(struct, params) {
     const model = useComponentModel(() => newComponent(struct, params), params);
     return model;
 }
-exports.useComponent = useComponent;
 function useComponentModel(modelConstructor, params) {
     const ownerScopeContext = useComponentModelTrap();
     const paramOwner = params === null || params === void 0 ? void 0 : params.owner;
@@ -334,7 +374,6 @@ function mergeStruct(struct, extStruct, model) {
     }
     return mergedStruct;
 }
-exports.mergeStruct = mergeStruct;
 function createProxy(struct) {
     const mobxState = {};
     let disableOnChangeCount = 0;
@@ -426,11 +465,9 @@ function createProxy(struct) {
                         throw Error("Observable View is not allowed");
                     }
                     if (isReadWriteBinding(target[prop])) {
-                        target[prop][1](value);
-                    }
-                    if (!isReadBinding(target[prop])) {
-                        _assignObservableProperty(prop, value);
+                        (0, mobx_1.runInAction)(() => target[prop][1](value));
                     }
+                    _assignObservableProperty(prop, value);
                 }
                 else {
                     target[prop] = value;
@@ -636,7 +673,6 @@ function bind(get, set) {
     const bond = [get, set];
     return bond;
 }
-exports.bind = bind;
 function bindProp(obj, prop) {
     const bond = bind(() => {
         let o;
@@ -659,7 +695,7 @@ function bindProp(obj, prop) {
             componentModelDebug(e);
         }
         if (o) {
-            o[prop] = value;
+            (0, mobx_1.runInAction)(() => { o[prop] = value; });
         }
         else {
             componentModelDebug(`Attempt to set bound property "${prop.toString()}" of undefined`);
@@ -667,7 +703,6 @@ function bindProp(obj, prop) {
     });
     return bond;
 }
-exports.bindProp = bindProp;
 function newComponentModelTrapRegistry(cache) {
     const trap = {
         _hookCallsCount: -1,
@@ -714,13 +749,11 @@ function newComponentModelTrapRegistry(cache) {
     };
     return trap;
 }
-exports.newComponentModelTrapRegistry = newComponentModelTrapRegistry;
 const ComponentModelTrap = (0, react_1.createContext)(undefined);
 exports.ComponentModelTrap = ComponentModelTrap;
 function useComponentModelTrap() {
     return (0, react_1.useContext)(ComponentModelTrap);
 }
-exports.useComponentModelTrap = useComponentModelTrap;
 function getFC(modelHook) {
     return (params) => {
         const hookName = modelHook.name;
@@ -732,10 +765,8 @@ function getFC(modelHook) {
         return model.View();
     };
 }
-exports.getFC = getFC;
 window.componentModelDebug = false;
 window.componentModelHashHtmlId = false;
 function componentModelDebug(text) {
     window.componentModelDebug && console.debug(text);
 }
-exports.componentModelDebug = componentModelDebug;

package/dist/dynamicContent.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDynamicContent = exports.DynamicContent = void 0;
-const react_1 = require("react");
+exports.DynamicContent = void 0;
+exports.useDynamicContent = useDynamicContent;
+const react_1 = __importDefault(require("react"));
 const lodash_1 = require("lodash");
 const componentModel_1 = require("./componentModel");
 const utils_1 = require("./utils");
@@ -58,7 +62,7 @@ function useDynamicContent(params) {
                 model.destroyModels();
             }
             model._childrenFromJSX = !!(props === null || props === void 0 ? void 0 : props.children);
-            (0, react_1.useEffect)(() => {
+            react_1.default.useEffect(() => {
                 trap.updateCache(model);
                 model._staticChildrenModels = trap.models;
             });
@@ -72,6 +76,5 @@ function useDynamicContent(params) {
     }
     return model;
 }
-exports.useDynamicContent = useDynamicContent;
 const DynamicContent = (0, componentModel_1.getFC)(useDynamicContent);
 exports.DynamicContent = DynamicContent;

package/dist/messageBus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type AnyName = string;
 type InParam = {
     in: any;

package/dist/messageBus.js

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultMessageBus = exports.createMessageBus = exports.useCustomMessaging = exports.useMessaging = exports.messageBusEventPost = exports.Messaging = void 0;
+exports.messageBusEventPost = exports.Messaging = void 0;
+exports.useMessaging = useMessaging;
+exports.useCustomMessaging = useCustomMessaging;
+exports.createMessageBus = createMessageBus;
+exports.defaultMessageBus = defaultMessageBus;
 const react_1 = require("react");
-const uuid_1 = require("uuid");
 function useMessaging(incoming, name) {
     return useCustomMessaging((0, react_1.useContext)(Messaging), incoming, name);
 }
-exports.useMessaging = useMessaging;
 function useCustomMessaging(bus, incoming, name) {
     (0, react_1.useEffect)(() => {
         if (incoming) {
             const messageRecepient = {
-                id: (0, uuid_1.v4)(),
+                id: generateId(),
                 name: name,
                 messages: incoming
             };
@@ -20,8 +22,10 @@ function useCustomMessaging(bus, incoming, name) {
         }
     }, [incoming, bus, name]);
     return bus;
+    function generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substring(2, 5);
+    }
 }
-exports.useCustomMessaging = useCustomMessaging;
 function createMessageBus(name) {
     const bus = {
         name: name,
@@ -118,7 +122,6 @@ function createMessageBus(name) {
         }
     }
 }
-exports.createMessageBus = createMessageBus;
 ;
 const messageBusEventPost = "messagebus.post";
 exports.messageBusEventPost = messageBusEventPost;
@@ -136,4 +139,3 @@ exports.Messaging = Messaging;
 function defaultMessageBus() {
     return _defaultMessageBus;
 }
-exports.defaultMessageBus = defaultMessageBus;

package/dist/utils.d.ts

@@ -3,6 +3,6 @@ declare function IF(props: {
     condition: boolean;
     children: React.ReactNode;
 }): JSX.Element;
-declare function renderNode(node: React.ReactNode): any;
+declare function renderNode(node: React.ReactNode | (() => React.ReactNode)): any;
 declare function isSimpleNode(node: React.ReactNode): boolean;
 export { IF, renderNode, isSimpleNode };

package/dist/utils.js

@@ -1,17 +1,52 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSimpleNode = exports.renderNode = exports.IF = void 0;
-const React = require("react");
-const lodash_1 = require("lodash");
+exports.IF = IF;
+exports.renderNode = renderNode;
+exports.isSimpleNode = isSimpleNode;
+const React = __importStar(require("react"));
+const _ = __importStar(require("lodash"));
 function IF(props) {
     return props.condition ? React.createElement(React.Fragment, null, renderNode(props.children)) : null;
 }
-exports.IF = IF;
 function renderNode(node) {
-    return (0, lodash_1.isFunction)(node) ? node() : node;
+    return _.isFunction(node) ? node() : node;
 }
-exports.renderNode = renderNode;
 function isSimpleNode(node) {
-    return (0, lodash_1.isString)(node) || (0, lodash_1.isNumber)(node) || (0, lodash_1.isBoolean)(node) || null || undefined;
+    if (_.isString(node) || _.isNumber(node) || _.isBoolean(node) || _.isNull(node) || _.isUndefined(node)) {
+        return true;
+    }
+    return false;
 }
-exports.isSimpleNode = isSimpleNode;

package/docs/base-concepts.md

@@ -0,0 +1,192 @@
+# UECA Base Concepts
+
+This section covers the base concepts of UECA, providing you with a foundational understanding of the architecture and its principles. By mastering these concepts, you'll be well-equipped to develop scalable, maintainable, and modular applications.
+
+## Introduction to UECA
+
+UECA is a modern framework designed to enhance the development of web applications by promoting encapsulation, modularity, and maintainability. It leverages TypeScript and JSX to create robust, type-safe components with minimal reliance on React-specific features.
+
+## Core Principles of UECA
+
+### Encapsulation
+
+Encapsulation is a core principle of UECA, ensuring that each component manages its own state and behavior while exposing only necessary interfaces. This reduces code complexity and enhances maintainability by keeping implementation details hidden from other components.
+
+### Declarative and Modular Code Style
+
+UECA emphasizes a declarative and modular approach to coding. This means focusing on what the application should do rather than how it should do it, and breaking down the application into smaller, reusable components. This approach enhances readability and maintainability.
+
+### Minimal React Usage
+
+UECA uses React's custom hooks for component model instantiation but avoids other React features like class components, `useState`, and `useEffect`. This simplifies the architecture and makes the codebase more approachable for developers with a TypeScript background.
+
+### Consistency
+
+Consistency is key in UECA. By using [standard code templates](./code-template.md) and maintaining a uniform structure across components, developers can easily navigate and understand the codebase. This consistency reduces the cognitive load and helps maintain high code quality.
+
+## Base Components of UECA
+
+### TypeScript
+
+TypeScript is the primary language used in UECA development. It provides static typing, enhancing code quality and maintainability. TypeScript's type system helps catch errors early and ensures that components are used correctly throughout the application.
+
+### JSX
+
+JSX is used to describe the UI in a syntax familiar to both JavaScript and HTML. Combined with TypeScript, JSX allows for type-checked components, reducing runtime errors and improving development efficiency.
+
+### React Custom Hooks
+
+Custom hooks are the only React feature heavily used in UECA. They are employed to instantiate and manage the lifecycle of component models, integrating React’s state and effect management seamlessly into UECA.
+
+## Component Structure
+
+A typical UECA component consists of the following sections:
+
+### Props
+
+Props are properties that serve as inputs to the component. They define the initial state and configuration of the component.
+
+```typescript
+props: {
+  title: "Default Title",
+},
+```
+
+### Events
+
+Events are custom events that the component can trigger and handle. They allow for interaction and communication within the component.
+
+```typescript
+events: {
+  onAction: () => {
+    console.log("Action triggered");
+  },
+},
+```
+
+### Children
+
+Children are the nested components within this component. They promote reusability and modularity by allowing components to be composed together.
+
+```typescript
+children: {
+  okButton: useButton({
+    caption: "OK",
+    onClick: () => _processOrder()
+  }),
+},
+```
+
+### Methods
+
+Methods are functions that the component can execute. They define the behavior and logic of the component.
+
+```typescript
+methods: {
+  performAction: () => {
+    console.log("Action performed");
+  },
+
+  toolbarView: () => JSX.Element,
+},
+```
+
+### Messages
+
+Messages are used for inter-component communication via the message bus system. They promote a decoupled architecture by allowing components to send and receive messages without direct dependencies.
+
+```typescript
+// Component 1 - message sender
+children: {
+  okButton: useButton({
+    caption: "OK",
+    onClick: async () => {
+      const reportData = await model.getAsync("API.getReportData", { reportId: model.reportId });
+      _updateReportPreview(reportData);
+    }
+  }),
+},
+
+// Component 2 - message receiver
+messages: {
+  "API.getReportData": async ({ reportId }) => await model.apiService.getReportData(reportId),
+},
+```
+
+### Lifecycle Hooks
+
+Lifecycle hooks manage the initialization, mounting, and unmounting processes of the component.
+
+```typescript
+init: () => {
+  console.log("Model create. Component initialized.");
+},
+
+mount: () => {
+  console.log("Component mounted to React DOM");
+},
+
+unmount: () => {
+  console.log("Component unmounted from React DOM");
+},
+```
+
+### View
+
+The `View` function defines the JSX that represents the component's UI. It should end with "View" if it returns JSX.
+
+```typescript
+View: () => (
+  <div>
+    <model.toolbar.View />
+    <div>
+      <model.mainMenu.View />
+      <div>
+        <model.topBar.View />
+        <model.activeScreen.View />
+        <model.bottomBar.View />
+      </div>      
+    </div>
+    <model.copirightBandView />
+  </div>
+),
+```
+
+## Automatic Events
+
+UECA supports automatic events for properties, such as `onChange$Property$` and `onChanging$Property$`. These events are triggered when a property changes, facilitating reactive programming within components.
+
+### onChange$Property$
+
+The `onChange$Property$` event is triggered after a property value is updated. It allows you to react to changes in the property.
+
+```typescript
+events: {
+  onChangeTitle: (newValue: string) => {
+    console.log(`Title changed to ${newValue}`);
+  },
+
+  onChangeMyProperty: (newValue: MyType) => {
+    console.log(`MyProperty changed to ${newValue}`);
+  },
+},
+```
+
+### onChanging$Property$
+
+The `onChanging$Property$` event acts as a value change interceptor, allowing you to validate or modify the value before it is committed.
+
+```typescript
+events: {
+  onChangingTitle: (newValue: string, oldValue: string) => {
+    if (newValue.trim() === "") {
+      return oldValue; // Revert to old value if new value is invalid
+    }
+    return newValue;
+  },
+},
+```
+
+## Conclusion
+
+Understanding these base concepts is crucial for mastering UECA. By focusing on encapsulation, modularity, and consistency, UECA provides a robust framework for developing scalable and maintainable web applications. This tutorial will guide you through the practical applications of these concepts, helping you build efficient and high-quality components.

package/docs/general-code-structure.md

@@ -0,0 +1,177 @@
+# UECA General Code Structure
+
+This section will guide you through the general structure of UECA components, explaining each section with simple code examples.
+
+## Component Structure
+
+Each UECA component follows a [structured template](./code-template.md) that includes properties (`props`), events (`events`), children (`children`), methods (`methods`), and messages (`messages`). Let's break down each part of the structure.
+
+### Example Component: MyComponent
+
+```typescript
+import * as React from "react";
+import * as UEC from "ueca-react";
+
+// Component structure declaration
+type MyComponentStruct = UEC.ComponentStruct<{
+  props: {
+    title: string;
+  };
+
+  events: {
+    onAction: () => void;
+  };
+
+  children: {
+    childComponent: ChildComponentModel;
+  };
+
+  methods: {       
+    performAction: () => void;
+  };  
+}>;
+
+type MyComponentParams = UEC.ComponentParams<MyComponentStruct>;
+type MyComponentModel = UEC.ComponentModel<MyComponentStruct>;
+
+function useMyComponent(params?: MyComponentParams): MyComponentModel {
+  const struct: MyComponentStruct = {
+    props: {
+      title: "Default Title",
+    },
+
+    events: {
+      onAction: () => {
+        console.log("Action triggered");
+      },
+    },
+
+    children: {
+      childComponent: useChildComponent(),
+    },
+
+    methods: {
+      performAction: () => {
+        console.log("Action performed");
+      },
+    },
+
+    messages: {
+      "Component.Message": (payload: { data: string }) => {
+        console.log(`Message received with data: ${payload.data}`);
+      },
+    },
+
+    init: () => {
+      console.log("Component initialized");
+    },
+
+    mount: () => {
+      console.log("Component mounted");
+    },
+
+    unmount: () => {
+      console.log("Component unmounted");
+    },
+
+    View: () => (
+      <div>
+        <h1>{model.title}</h1>
+        <button onClick={() => model.performAction()}>
+          Perform Action
+        </button>
+        <model.childComponent.View />
+      </div>
+    ),
+  };
+
+  const model: MyComponentModel = UEC.useComponent(struct, params);
+  return model;
+
+  // Private methods
+}
+
+const MyComponent = UEC.getFC(useMyComponent);
+
+export { MyComponentModel, useMyComponent, MyComponent };
+```
+
+### Explanation of Each Section
+
+1. **Props**:
+   - Props are the properties of the component, serving as the inputs. They are defined in the `props` section of the `struct`.
+
+    ```typescript
+    props: {
+      title: "Default Title",
+    },
+    ```
+
+2. **Events**:
+   - Events are custom events that the component can trigger and handle. They are defined in the `events` section.
+
+    ```typescript
+    events: {
+      onAction: () => {
+        console.log("Action triggered");
+      },
+    },
+    ```
+
+3. **Children**:
+   - Children are the child components nested within this component. They are defined in the `children` section.
+
+    ```typescript
+    children: {
+      childComponent: useChildComponent(),
+    },
+    ```
+
+4. **Methods**:
+   - Methods are the functions that the component can execute. They are defined in the `methods` section.
+
+    ```typescript
+    methods: {
+      performAction: () => {
+        console.log("Action performed");
+      },
+    },
+    ```
+
+5. **Lifecycle Hooks**:
+   - **Init**: Runs once when the component is created.
+   - **Mount**: Runs when the component mounts to React DOM.
+   - **Unmount**: Runs when the component unmounts from React DOM.
+
+    ```typescript
+    init: () => {
+      console.log("Component initialized");
+    },
+
+    mount: () => {
+      console.log("Component mounted");
+    },
+
+    unmount: () => {
+      console.log("Component unmounted");
+    },
+    ```
+
+6. **View**:
+   - The `View` function defines the JSX that represents the component's UI.
+
+    ```typescript
+    View: () => (
+      <div>
+        <h1>{model.title}</h1>
+        <button onClick={() => model.performAction()}>
+          Perform Action
+        </button>
+        <model.childComponent.View />
+      </div>
+    ),
+    ```
+
+### Conclusion
+
+This template provides a comprehensive scaffold for creating UECA components. By following this structure, you ensure that your components are modular, maintainable, and adhere to the principles of UECA. Use this guide as a reference for building new components and extending the functionality of your React application.

package/docs/index.md

@@ -0,0 +1,24 @@
+![logo](/docs/logo.png)
+
+## UECA Programming Documentation
+
+### [1. Component Mental Model](/docs/component-mental-model.md)
+
+### [2. Component Integration Model](/docs/component-intergation-model.md)
+
+### [3. Introduction to UECA](/docs/introduction.md)
+
+### [4. Technology of UECA ](/docs/technology.md)
+
+### [5. Base Concepts of UECA ](/docs/base-concepts.md)
+
+### [6. General Code Structure](/docs/general-code-structure.md)
+
+### [7. Property Bindings ](/docs/bindings-overview.md)
+
+### [8. Message Bus ](/docs/message-bus.md)
+
+### [9. Standard Code Template](/docs/code-template.md)
+
+## Code Examples on CodeSandbox
+#### [UECA Basics: Application (Code Examples Menu)](https://codesandbox.io/p/sandbox/frosty-banach-jsf84c)

package/docs/message-bus.md

@@ -0,0 +1,177 @@
+# UECA Message Bus
+
+In Unified Encapsulated Component Architecture (UECA), the messaging system plays a crucial role in enabling components to communicate in a decoupled manner. This section will provide an overview of the messaging system, including the message type declaration and a simple example of messaging usage.
+
+## What is the Messaging System?
+
+The messaging system in UECA allows components to send and receive messages without direct dependencies. This promotes a modular architecture where components can interact seamlessly, enhancing maintainability and scalability. Components can post messages to the message bus and subscribe to handle specific messages, facilitating communication across different parts of the application.
+
+## Message Type Declaration
+
+To use the messaging system, you first need to declare the message types. This declaration specifies the structure of the messages, including the input parameters and the output data.
+
+### Example Message Type Declaration
+
+```typescript
+// Application Messages: "message-type": { in: <parameter-type>, out: <parameter-type> }
+// Properties "in" and "out" describe value type of input and output parameters.
+// Both properties "in" and "out" are optional
+
+type AppMessage = {
+  "Api.GetWeatherForecast": {
+    in: { zip_code: string; date: Date };
+    out: { temperature: number; rainProbability: number };
+  };
+};
+```
+
+In this example, the `AppMessage` type defines a message `Api.GetWeatherForecast` with input parameters `zip_code` and `date`, and output data `temperature` and `rainProbability`.
+
+## Using the Messaging System
+
+To use the messaging system, follow these steps:
+
+1. **Define the Message Types**: Declare the structure of the messages as shown above.
+2. **Subscribe to Messages**: Use the message bus to subscribe to specific messages in the components that need to handle them.
+3. **Post Messages**: Send messages to the bus from components that need to trigger actions in other components.
+
+### Example: WeatherForm and WeatherService Components
+
+Let's walk through a simple example where a `WeatherForm` component sends a message to request weather data, and a `WeatherService` component handles the message and retrieves the data.
+
+### WeatherForm Component
+
+The `WeatherForm` component sends a message to request weather data.
+
+```typescript
+import * as UEC from "ueca-react";
+
+type WeatherFormStruct = UEC.ComponentStruct<{
+  children: {
+    zipcodeInputModel: MyInputModel;
+    dateInputModel: MyInputModel;
+    submitButtonModel: MyButtonModel;
+    weatherDisplayModel: WeatherDisplayModel;
+  };
+}, AppMessage>;
+
+type WeatherFormParams = UEC.ComponentParams<WeatherFormStruct, AppMessage>;
+type WeatherFormModel = UEC.ComponentModel<WeatherFormStruct, AppMessage>;
+
+function useWeatherForm(params?: WeatherFormParams): WeatherFormModel {
+  const struct: WeatherFormStruct = {    
+    children: {
+      zipcodeInputModel: useMyInput({ placeholder: "Zip Code" }),
+
+      dateInputModel: useMyInput({ placeholder: "Date" }),
+
+      submitButtonModel: useMyButton({
+        caption: "Submit",
+        onClick: async () => {
+          await _handleSubmit();
+        },
+      }),
+
+      weatherDisplayModel: useWeatherDisplay(),
+    },
+
+    View: () => (
+      <div>
+        <div>
+          <label>Zip Code:</label>
+          <model.zipcodeInputModel.View />
+        </div>
+        <div>
+          <label>Date:</label>
+          <model.dateInputModel.View />
+        </div>
+        <div>
+          <model.submitButtonModel.View />
+        </div>
+        <model.weatherDisplayModel.View />
+      </div>
+    ),
+  };
+
+  const model: WeatherFormModel = UEC.useComponent(struct, params);
+  return model;
+
+  // Private methods
+  async function _handleSubmit() {
+    model.weatherDisplayModel.data = await model.bus.getAsync(
+      "Api.GetWeatherForecast",
+      {
+        zip_code: model.zipcodeInputModel.value,
+        date: new Date(model.dateInputModel.value),
+      }
+    );
+  } 
+}
+
+const WeatherForm = UEC.getFC(useWeatherForm);
+
+export { WeatherFormModel, useWeatherForm, WeatherForm };
+```
+
+### WeatherService Component
+
+The `WeatherService` component subscribes to the message and handles the data retrieval.
+
+```typescript
+import * as UEC from "ueca-react";
+
+// Service Component Structure
+type WeatherServiceStruct = UEC.ComponentStruct<{}, AppMessage>;
+
+type WeatherServiceParams = UEC.ComponentParams<WeatherServiceStruct, AppMessage>;
+type WeatherServiceModel = UEC.ComponentModel<WeatherServiceStruct, AppMessage>;
+
+function useWeatherService(params?: WeatherServiceParams): WeatherServiceModel {
+  const struct: WeatherServiceStruct = {    
+    messages: {
+      "Api.GetWeatherForecast": async ({ zip_code, date }) => {
+        const response = await fetch(`https://api.weather.com/v3/wx/forecast/daily/5day?postalKey=${zip_code}&format=json`);
+        const data = await response.json();
+
+        return {
+          temperature: data.temperature,
+          rainProbability: data.rainProbability,
+        };
+      },
+    }
+  };
+
+  const model: WeatherServiceModel = UEC.useComponent(struct, params);
+  return model;
+}
+
+const WeatherService = UEC.getFC(useWeatherService);
+
+export { WeatherServiceModel, useWeatherService, WeatherService };
+```
+
+### Integration in the App
+
+Integrate the `WeatherForm` and `WeatherService` components in the main application.
+
+```typescript
+import * as React from "react";
+import { WeatherForm } from "./WeatherForm";
+import { WeatherService } from "./WeatherService";
+
+function App() {
+  return (
+    <div>
+      <h1>UECA Messaging System Example</h1>
+      <WeatherForm />
+      <WeatherService />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Conclusion
+
+The UECA messaging system facilitates decoupled communication between components, promoting a modular and maintainable architecture. By defining message types, subscribing to messages, and posting messages, you can create a flexible communication system within your UECA application. This overview and example demonstrate the basic usage of the messaging system, enabling you to integrate it into your projects effectively.

package/package.json

@@ -1,42 +1,76 @@
 {
   "name": "ueca-react",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Unified Encapsulated Component Architecture for React",
   "keywords": [
-    "ueca", "react", "typescript", "framework", "abstraction",
-    "unified", "encapsulated", "component", "architecture",
-    "message bus", "bindings"
+    "ueca",
+    "react",
+    "typescript",
+    "framework",
+    "abstraction",
+    "unified",
+    "encapsulated",
+    "component",
+    "architecture",
+    "message bus",
+    "bindings"
   ],
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",  
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/nekutuzov/ueca-react-npm.git"
   },
-
   "files": [
     "dist",
     "docs",
     "README.md",
-    "LICENSE"    
+    "LICENSE"
   ],
   "scripts": {
     "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "author": "Aleksey Suvorov",
   "license": "ISC",
-  "dependencies": {
-    "lodash": "^4.17.21",
-    "mobx": "^6.12.3",
-    "mobx-react": "^9.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "uuid": "^9.0.1"
+  "dependencies": {            
+    "mobx-react": "^9.1.1"
   },
-  "devDependencies": {
+  "peerDependencies": {    
+    "lodash": "^4.17.21"    
+  },
+  "devDependencies": {    
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.2",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.4",
-    "@types/node": "^20.12.12",
-    "@types/react": "^18.3.2"
+    "@types/node": "^20.12.12",    
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "typescript": "^5.8.3"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "**/?(*.)+(test).[jt]s?(x)"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx"
+    ],
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-dom"
+    ],
+    "moduleNameMapper": {
+      "ueca": "<rootDir>/src/index.ts"
+    }
   }
-}
+}