ueca-react 1.0.7 → 2.0.1

package/dist/dynamicContent.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-import { AnyComponentModel, ComponentModel, ComponentParams, ComponentStruct, DynamicChildren } from "./componentModel";
-type Struct = ComponentStruct<{
-    props: {
-        children: React.ReactNode;
-        _baseProps: string[];
-        _staticChildrenModels: AnyComponentModel[];
-        _childrenFromJSX: boolean;
-        _forceUpdate: boolean;
-    };
-    children: DynamicChildren;
-    methods: {
-        destroyModels: () => void;
-        forceUpdate: (children?: React.ReactNode) => void;
-        getModels: () => AnyComponentModel[];
-        getChildrenNames: () => string[];
-    };
-}>;
-type DynamicContentModel = ComponentModel<Struct> & Record<string, ComponentModel<ComponentStruct<{}>>>;
-declare function useDynamicContent(params?: ComponentParams<Struct>): DynamicContentModel;
-declare const DynamicContent: (params: ComponentParams<Struct, {}>) => JSX.Element;
-export { DynamicContentModel, DynamicContent, useDynamicContent };

package/dist/dynamicContent.js

@@ -1,80 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-function useDynamicContent(params) {
-    var _a;
-    const struct = {
-        props: {
-            id: useDynamicContent.name,
-            children: undefined,
-            _baseProps: [],
-            _staticChildrenModels: [],
-            _childrenFromJSX: false,
-            _forceUpdate: false
-        },
-        methods: {
-            forceUpdate: (children) => {
-                model._forceUpdate = true;
-                try {
-                    model.children = undefined;
-                    model.destroyModels();
-                    model._childrenFromJSX = false;
-                    model.children = children;
-                }
-                finally {
-                    model._forceUpdate = false;
-                }
-            },
-            getModels: () => {
-                var _a;
-                let res = [];
-                if ((_a = model._baseProps) === null || _a === void 0 ? void 0 : _a.length) {
-                    const childrenNames = model.getChildrenNames();
-                    res = childrenNames.map(name => model[name]);
-                }
-                return res;
-            },
-            getChildrenNames: () => {
-                return Reflect.ownKeys(model).filter(c => (0, lodash_1.isString)(c) && !model._baseProps.find(p => p === c));
-            },
-            destroyModels: () => {
-                var _a;
-                const childrenNames = model.getChildrenNames();
-                const didDestroy = !!(childrenNames.length || ((_a = model._staticChildrenModels) === null || _a === void 0 ? void 0 : _a.length));
-                childrenNames.forEach(name => model[componentModel_1.$].__deleteMember(name));
-                model._staticChildrenModels = undefined;
-                didDestroy && (0, componentModel_1.componentModelDebug)(`DynamicContent: clear cache in model=#${model.birthMark()} path=${model.htmlId()}`);
-            },
-        },
-        events: {
-            onChangeChildren: () => !model._forceUpdate && !model.calledFromJSX() && !model._childrenFromJSX && model.destroyModels(),
-        },
-        View: (props) => {
-            if (model._childrenFromJSX !== !!(props === null || props === void 0 ? void 0 : props.children)) {
-                model.destroyModels();
-            }
-            model._childrenFromJSX = !!(props === null || props === void 0 ? void 0 : props.children);
-            react_1.default.useEffect(() => {
-                trap.updateCache(model);
-                model._staticChildrenModels = trap.models;
-            });
-            const trap = (0, componentModel_1.newComponentModelTrapRegistry)(model._staticChildrenModels);
-            return (react_1.default.createElement(componentModel_1.ComponentModelTrap.Provider, { value: trap }, (0, utils_1.renderNode)(model._childrenFromJSX ? props.children : model.children)));
-        }
-    };
-    const model = (0, componentModel_1.useComponent)(struct, params);
-    if (!((_a = model._baseProps) === null || _a === void 0 ? void 0 : _a.length)) {
-        model._baseProps = Reflect.ownKeys(model).filter(x => (0, lodash_1.isString)(x));
-    }
-    return model;
-}
-const DynamicContent = (0, componentModel_1.getFC)(useDynamicContent);
-exports.DynamicContent = DynamicContent;

package/dist/index.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSimpleNode = exports.renderNode = exports.IF = exports.useDynamicContent = exports.DynamicContent = exports.defaultMessageBus = exports.createMessageBus = exports.useCustomMessaging = exports.useMessaging = exports.messageBusEventPost = exports.Messaging = exports.$ = exports.getFC = exports.componentModelDebug = exports.bindProp = exports.bind = exports.blankView = exports.mergeStruct = exports.useComponent = exports.newComponentModelTrapRegistry = exports.useComponentModelTrap = exports.ComponentModelTrap = void 0;
-var componentModel_1 = require("./componentModel");
-Object.defineProperty(exports, "ComponentModelTrap", { enumerable: true, get: function () { return componentModel_1.ComponentModelTrap; } });
-Object.defineProperty(exports, "useComponentModelTrap", { enumerable: true, get: function () { return componentModel_1.useComponentModelTrap; } });
-Object.defineProperty(exports, "newComponentModelTrapRegistry", { enumerable: true, get: function () { return componentModel_1.newComponentModelTrapRegistry; } });
-Object.defineProperty(exports, "useComponent", { enumerable: true, get: function () { return componentModel_1.useComponent; } });
-Object.defineProperty(exports, "mergeStruct", { enumerable: true, get: function () { return componentModel_1.mergeStruct; } });
-Object.defineProperty(exports, "blankView", { enumerable: true, get: function () { return componentModel_1.blankView; } });
-Object.defineProperty(exports, "bind", { enumerable: true, get: function () { return componentModel_1.bind; } });
-Object.defineProperty(exports, "bindProp", { enumerable: true, get: function () { return componentModel_1.bindProp; } });
-Object.defineProperty(exports, "componentModelDebug", { enumerable: true, get: function () { return componentModel_1.componentModelDebug; } });
-Object.defineProperty(exports, "getFC", { enumerable: true, get: function () { return componentModel_1.getFC; } });
-Object.defineProperty(exports, "$", { enumerable: true, get: function () { return componentModel_1.$; } });
-var messageBus_1 = require("./messageBus");
-Object.defineProperty(exports, "Messaging", { enumerable: true, get: function () { return messageBus_1.Messaging; } });
-Object.defineProperty(exports, "messageBusEventPost", { enumerable: true, get: function () { return messageBus_1.messageBusEventPost; } });
-Object.defineProperty(exports, "useMessaging", { enumerable: true, get: function () { return messageBus_1.useMessaging; } });
-Object.defineProperty(exports, "useCustomMessaging", { enumerable: true, get: function () { return messageBus_1.useCustomMessaging; } });
-Object.defineProperty(exports, "createMessageBus", { enumerable: true, get: function () { return messageBus_1.createMessageBus; } });
-Object.defineProperty(exports, "defaultMessageBus", { enumerable: true, get: function () { return messageBus_1.defaultMessageBus; } });
-var dynamicContent_1 = require("./dynamicContent");
-Object.defineProperty(exports, "DynamicContent", { enumerable: true, get: function () { return dynamicContent_1.DynamicContent; } });
-Object.defineProperty(exports, "useDynamicContent", { enumerable: true, get: function () { return dynamicContent_1.useDynamicContent; } });
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "IF", { enumerable: true, get: function () { return utils_1.IF; } });
-Object.defineProperty(exports, "renderNode", { enumerable: true, get: function () { return utils_1.renderNode; } });
-Object.defineProperty(exports, "isSimpleNode", { enumerable: true, get: function () { return utils_1.isSimpleNode; } });

package/dist/messageBus.d.ts

@@ -1,46 +0,0 @@
-type AnyName = string;
-type InParam = {
-    in: any;
-};
-type OutParam = {
-    out: any;
-};
-type AnyMessage = Record<string, InParam | OutParam | InParam & OutParam | {}>;
-type ParamIn<TMsg extends AnyMessage, Msg extends keyof TMsg> = TMsg[Msg] extends InParam ? TMsg[Msg][keyof InParam] : undefined;
-type ParamOut<TMsg extends AnyMessage, Msg extends keyof TMsg> = TMsg[Msg] extends OutParam ? TMsg[Msg][keyof OutParam] : undefined;
-type GetMethod<TMsg extends AnyMessage> = <Msg extends keyof TMsg>(message: Msg, param: ParamIn<TMsg, Msg>, callback: (param: ParamOut<TMsg, Msg>) => void) => void;
-type PostMethod<TMsg extends AnyMessage> = <Msg extends keyof TMsg>(message: Msg, param: ParamIn<TMsg, Msg>, callback?: (param: ParamOut<TMsg, Msg>) => void) => void;
-type AsyncMethod<TMsg extends AnyMessage> = <Msg extends keyof TMsg>(message: Msg, param: ParamIn<TMsg, Msg>) => Promise<ParamOut<TMsg, Msg>>;
-type TargetGetMethod<TMsg extends AnyMessage, TName extends AnyName> = <Msg extends keyof TMsg>(target: TName, message: Msg, param: ParamIn<TMsg, Msg>, callback: (param: ParamOut<TMsg, Msg>) => void) => void;
-type TargetPostMethod<TMsg extends AnyMessage, TName extends AnyName> = <Msg extends keyof TMsg>(target: TName, message: Msg, param: ParamIn<TMsg, Msg>, callback?: (param: ParamOut<TMsg, Msg>) => void) => void;
-type TargetAsyncMethod<TMsg extends AnyMessage, TName extends AnyName> = <Msg extends keyof TMsg>(target: TName, message: Msg, param: ParamIn<TMsg, Msg>) => Promise<ParamOut<TMsg, Msg>>;
-interface IMessageBus<TMsg extends AnyMessage, TName extends AnyName> {
-    readonly name?: TName;
-    readonly get: GetMethod<TMsg>;
-    readonly post: PostMethod<TMsg>;
-    readonly getFrom: TargetGetMethod<TMsg, TName>;
-    readonly postTo: TargetPostMethod<TMsg, TName>;
-    readonly getAsync: AsyncMethod<TMsg>;
-    readonly postAsync: AsyncMethod<TMsg>;
-    readonly getFromAsync: TargetAsyncMethod<TMsg, TName>;
-    readonly postToAsync: TargetAsyncMethod<TMsg, TName>;
-    as<M extends AnyMessage, N extends AnyName = TName>(): IMessageBus<M, N>;
-}
-type MessageHandler<TMsg extends AnyMessage, Msg extends keyof TMsg> = (param: ParamIn<TMsg, Msg>) => ParamOut<TMsg, Msg> extends undefined ? Promise<void> : Promise<ParamOut<TMsg, Msg>>;
-type MessageHandlerNoPar<TMsg extends AnyMessage, Msg extends keyof TMsg> = () => ParamOut<TMsg, Msg> extends undefined ? Promise<void> : Promise<ParamOut<TMsg, Msg>>;
-type Messages<TMsg extends AnyMessage> = {
-    [Msg in keyof TMsg]?: ParamIn<TMsg, Msg> extends undefined ? MessageHandlerNoPar<TMsg, Msg> : MessageHandler<TMsg, Msg>;
-};
-declare function useMessaging<TMsg extends AnyMessage, TName extends AnyName>(incoming?: Messages<TMsg>, name?: TName): IMessageBus<TMsg, TName>;
-declare function useCustomMessaging<TMsg extends AnyMessage, TName extends AnyName>(bus: IMessageBus<TMsg, TName>, incoming?: Messages<TMsg>, name?: TName): IMessageBus<TMsg, TName>;
-declare function createMessageBus<TMsg extends AnyMessage, TName extends AnyName>(name?: string): IMessageBus<TMsg, TName>;
-declare const messageBusEventPost = "messagebus.post";
-type MessageBusEvent = Event & {
-    detail: {
-        message: string;
-        params?: any;
-    };
-};
-declare const Messaging: import("react").Context<IMessageBus<AnyMessage, any>>;
-declare function defaultMessageBus<TMsg extends AnyMessage>(): IMessageBus<TMsg, any>;
-export { IMessageBus, Messages, AsyncMethod, AnyMessage, MessageBusEvent, AnyName, Messaging, messageBusEventPost, useMessaging, useCustomMessaging, createMessageBus, defaultMessageBus };

package/dist/messageBus.js

@@ -1,141 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.messageBusEventPost = exports.Messaging = void 0;
-exports.useMessaging = useMessaging;
-exports.useCustomMessaging = useCustomMessaging;
-exports.createMessageBus = createMessageBus;
-exports.defaultMessageBus = defaultMessageBus;
-const react_1 = require("react");
-function useMessaging(incoming, name) {
-    return useCustomMessaging((0, react_1.useContext)(Messaging), incoming, name);
-}
-function useCustomMessaging(bus, incoming, name) {
-    (0, react_1.useEffect)(() => {
-        if (incoming) {
-            const messageRecepient = {
-                id: generateId(),
-                name: name,
-                messages: incoming
-            };
-            bus.subscribe(messageRecepient);
-            return () => bus.unsubscribe(messageRecepient);
-        }
-    }, [incoming, bus, name]);
-    return bus;
-    function generateId() {
-        return Date.now().toString(36) + Math.random().toString(36).substring(2, 5);
-    }
-}
-function createMessageBus(name) {
-    const bus = {
-        name: name,
-        subscribers: [],
-        messageQueue: [],
-        as: () => bus,
-        get: (messageType, param, callback) => _queueMessage({ message: messageType, param: param, callback: callback }),
-        getFrom: (target, messageType, param, callback) => _queueMessage({ target: target, message: messageType, param: param, callback: callback }),
-        post: (messageType, param, callback) => _queueMessage({ message: messageType, param: param, callback: callback }),
-        postTo: (target, messageType, param, callback) => _queueMessage({ target: target, message: messageType, param: param, callback: callback }),
-        getAsync: (messageType, param) => {
-            return new Promise((resolve, reject) => bus.get(messageType, param, result => _promiseCallback(result, messageType, resolve, reject)));
-        },
-        getFromAsync: (target, messageType, param) => {
-            return new Promise((resolve, reject) => bus.getFrom(target, messageType, param, result => _promiseCallback(result, messageType, resolve, reject)));
-        },
-        postAsync: (messageType, param) => {
-            return new Promise((resolve, reject) => bus.post(messageType, param, result => _promiseCallback(result, messageType, resolve, reject)));
-        },
-        postToAsync: (target, messageType, param) => {
-            return new Promise((resolve, reject) => bus.postTo(target, messageType, param, result => _promiseCallback(result, messageType, resolve, reject)));
-        }
-    };
-    bus.subscribe = (recipient) => {
-        let subscriber = bus.subscribers.find((s) => s.id === recipient.id);
-        subscriber ?
-            subscriber.messages = recipient.messages :
-            bus.subscribers.push(recipient);
-    };
-    bus.unsubscribe = (recipient) => {
-        bus.subscribers = bus.subscribers.filter((s) => s.id !== recipient.id);
-    };
-    function isValidResult(result) {
-        return !(result && (result instanceof Error));
-    }
-    bus.processMessages = () => {
-        const msgCount = bus.messageQueue.length;
-        if (msgCount === 0)
-            return;
-        bus.messageQueue.forEach(message => {
-            let dispatched = false;
-            let targetFound = false;
-            bus.subscribers.forEach(subscriber => {
-                const method = subscriber.messages[message.message];
-                targetFound = targetFound || (message.target ? message.target === subscriber.name : false);
-                if (method !== undefined && (!message.target || message.target === subscriber.name)) {
-                    const methodPromise = method(message.param);
-                    if (methodPromise) {
-                        methodPromise.catch(reason => { var _a; return (_a = message.callback) === null || _a === void 0 ? void 0 : _a.call(message, reason); });
-                        methodPromise.then(methodResult => { var _a; return (_a = message.callback) === null || _a === void 0 ? void 0 : _a.call(message, methodResult); }, reason => { var _a; return (_a = message.callback) === null || _a === void 0 ? void 0 : _a.call(message, reason); });
-                    }
-                    dispatched = true;
-                }
-            });
-            if (!dispatched) {
-                if (!message.target) {
-                    console.warn(`MessageBus (${bus.name}): no subscribers for message "${String(message.message)}"`);
-                }
-                else {
-                    (targetFound
-                        ? console.warn(`MessageBus (${bus.name}): target "${message.target}" has no subscription for message "${String(message.message)}"`)
-                        : console.warn(`MessageBus (${bus.name}): target "${message.target}" not found"`));
-                }
-                if (message.callback) {
-                    message.callback(undefined);
-                }
-            }
-        });
-        if (bus.messageQueue.length > msgCount) {
-            bus.messageQueue = bus.messageQueue.splice(msgCount);
-        }
-        else {
-            bus.messageQueue = [];
-        }
-    };
-    return bus;
-    function _queueMessage(msg) {
-        bus.messageQueue.push(msg);
-        setTimeout(() => {
-            try {
-                bus.processMessages();
-            }
-            catch (e) {
-                console.error("Message bus crashed", e);
-            }
-        }, 0);
-    }
-    function _promiseCallback(result, messageType, resolve, reject) {
-        if (isValidResult(result)) {
-            resolve(result);
-        }
-        else {
-            reject(result);
-        }
-    }
-}
-;
-const messageBusEventPost = "messagebus.post";
-exports.messageBusEventPost = messageBusEventPost;
-function createDefaultMessageBus() {
-    const defaultMessageBus = createMessageBus("Default Message Bus");
-    window.addEventListener(messageBusEventPost, _onPost);
-    return defaultMessageBus;
-    function _onPost(event) {
-        defaultMessageBus.post(event.detail.message, event.detail.params);
-    }
-}
-const _defaultMessageBus = createDefaultMessageBus();
-const Messaging = (0, react_1.createContext)(_defaultMessageBus);
-exports.Messaging = Messaging;
-function defaultMessageBus() {
-    return _defaultMessageBus;
-}

package/dist/utils.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-declare function IF(props: {
-    condition: boolean;
-    children: React.ReactNode;
-}): JSX.Element;
-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,52 +0,0 @@
-"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.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;
-}
-function renderNode(node) {
-    return _.isFunction(node) ? node() : node;
-}
-function isSimpleNode(node) {
-    if (_.isString(node) || _.isNumber(node) || _.isBoolean(node) || _.isNull(node) || _.isUndefined(node)) {
-        return true;
-    }
-    return false;
-}

package/docs/base-concepts.md

@@ -1,192 +0,0 @@
-# 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.