ueca-react 1.0.5 → 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,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDynamicContent = exports.DynamicContent = void 0;
-const react_1 = 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);
-            (0, react_1.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;
-}
-exports.useDynamicContent = useDynamicContent;
-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,47 +0,0 @@
-/// <reference types="react" />
-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,139 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultMessageBus = exports.createMessageBus = exports.useCustomMessaging = exports.useMessaging = exports.messageBusEventPost = exports.Messaging = void 0;
-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)(),
-                name: name,
-                messages: incoming
-            };
-            bus.subscribe(messageRecepient);
-            return () => bus.unsubscribe(messageRecepient);
-        }
-    }, [incoming, bus, name]);
-    return bus;
-}
-exports.useCustomMessaging = useCustomMessaging;
-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);
-        }
-    }
-}
-exports.createMessageBus = createMessageBus;
-;
-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;
-}
-exports.defaultMessageBus = 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): any;
-declare function isSimpleNode(node: React.ReactNode): boolean;
-export { IF, renderNode, isSimpleNode };

package/dist/utils.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSimpleNode = exports.renderNode = exports.IF = void 0;
-const React = require("react");
-const lodash_1 = 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;
-}
-exports.renderNode = renderNode;
-function isSimpleNode(node) {
-    return (0, lodash_1.isString)(node) || (0, lodash_1.isNumber)(node) || (0, lodash_1.isBoolean)(node) || null || undefined;
-}
-exports.isSimpleNode = isSimpleNode;

package/docs/bindings-overview.md

@@ -1,164 +0,0 @@
-# Bindings Overview
-
-Unified Encapsulated Component Architecture (UECA) offers various binding mechanisms to manage state and interactions between components. Understanding these bindings is crucial for building efficient, maintainable, and scalable applications. This tutorial covers all types of bindings available in UECA.
-
-## Types of Bindings in UECA
-
-UECA supports three primary types of bindings:
-
-1. **Unidirectional Binding**: Simplifies state management by ensuring the target property reflects the source property.
-2. **Bidirectional Binding**: Synchronizes state between two properties, allowing changes to propagate in both directions.
-3. **Custom Binding**: Provides flexibility to transform values during the binding process.
-
-### 1. Unidirectional Binding
-
-Unidirectional binding ensures that the value of a property in the source component is reflected in the target component. It is particularly useful for simple data flows where the target property should always match the source property.
-
-#### Example
-
-```typescript
-// skip...
-
-// Component structure declaration
-type MyComponentStruct = UEC.ComponentStruct<{
-  props: {  
-      caption: string;      
-  };
-  children: {
-      someInput: InputModel;
-  }
-}
-
-// skip...
-
-// Custom react hook. Returns component model.
-function useMyComponent(params?: MyComponentParams): MyComponentModel {
-  const struct: MyComponentStruct = {
-    props: {
-      // initialization of properties
-      caption: "",      
-    },
-
-    children: {      
-      // initialization of children
-      someInput: useInput({            
-        // Unidirectional binding (read-only).
-        label: () => model.caption,            
-      }),
-
-// skip...          
-```
-
-In this example, `model.someInput.label` will always have the value of `model.caption`.
-
-### 2. Bidirectional Binding
-
-Bidirectional binding synchronizes state between two properties, allowing changes to propagate in both directions. This is useful when both components need to update each other.
-
-#### Example
-
-
-```typescript
-// skip...
-
-// Component structure declaration
-type MyComponentStruct = UEC.ComponentStruct<{
-  props: {  
-    caption: string;      
-    userName: { firstName?: string; lastName?: string };
-  };
-  children: {
-    someInput: InputModel;        
-  }
-}
-
-// skip...
-
-// Custom react hook. Returns component model.
-function useMyComponent(params?: MyComponentParams): MyComponentModel {
-  const struct: MyComponentStruct = {
-    props: {
-      // initialization of properties
-      caption: "",   
-      userName: {},   
-    },
-
-    children: {      
-      // initialization of children
-      someInput: useInput({                        
-        label: () => model.caption,    
-        // Bidirectional binding (read-write).
-        value: UEC.bindProp(() => model.userName, "firstName"),       
-      }),
-
-// skip...           
-```
-In this example, `model.userName.firstName` and `model.someInput.value` will always be in sync, reflecting changes made to either property.
-
-### 3. Custom Binding
-
-Custom binding provides the flexibility to transform values during the binding process. This is useful for cases where the displayed value and stored value need to be different or require specific formatting.
-
-#### Example
-
-In this example, we'll create a form component called `ContactForm` where the user enters their phone number. The phone number will be displayed in a formatted way (e.g., (123) 456-7890), but it will be stored in the model without formatting.
-
-```typescript
-// skip...
-
-// Component structure declaration
-type MyComponentStruct = UEC.ComponentStruct<{
-  props: {  
-    phoneNumber: string;
-  };
-  children: {
-    phoneNumberInput: InputModel;       
-  }
-}
-
-// skip...
-
-// Custom react hook. Returns component model.
-function useMyComponent(params?: MyComponentParams): MyComponentModel {
-  const struct: MyComponentStruct = {
-    props: {
-      // initialization of properties
-      phoneNumber: ""
-    },
-
-    children: {      
-      // initialization of children
-      phoneNumberInput: useMyInput({
-        label: "Phone Number",
-        // Custom binding
-        value: UEC.bind(
-          () => _formatPhoneNumber(model.phoneNumber),  // Display formatted phone number
-          (value) => (model.phoneNumber = value.replace(/\D/g, ''))  // Store only digits
-        ),        
-      }),
-
-// skip...
-
-  // Private methods
-  function _formatPhoneNumber(phoneNumber: string): string {
-    // Remove all non-numeric characters
-    const cleaned = ('' + phoneNumber).replace(/\D/g, '');
-    // Match and format phone number
-    const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
-    if (match) {
-      return `(${match[1]}) ${match[2]}-${match[3]}`;
-    }
-    return phoneNumber;
-  }
-}
-
-// skip...
-```
-
-**Custom Binding for Phone Number:**
-   - **Getter Function**: `() => _formatPhoneNumber(model.phoneNumber)` ensures that the phone number is always displayed in a formatted way.
-   - **Setter Function**: `(value) => (model.phoneNumber = value.replace(/\D/g, ''))` stores the phone number with only digits, removing any non-numeric characters.
-
-### Summary
-
-Understanding and leveraging different types of bindings in UECA can significantly enhance your application's flexibility, maintainability, and overall design. By using unidirectional, bidirectional, and custom bindings appropriately, you can create robust and scalable applications with ease.

package/docs/introduction.md

@@ -1,56 +0,0 @@
-# Introduction
-
-Welcome to the Unified Encapsulated Component Architecture (UECA) tutorial. UECA is a modern framework designed to create scalable, maintainable, and modular web applications. This introduction will cover the base features of UECA, providing you with a comprehensive understanding of its core principles and benefits.
-
-## What is UECA?
-
-UECA stands for Unified Encapsulated Component Architecture. It is a framework that emphasizes encapsulation, modularity, and maintainability in web development. UECA leverages TypeScript and JSX to create robust and type-safe components, with minimal reliance on React-specific features.
-
-## Base Features of UECA
-
-### TypeScript Integration
-
-TypeScript is the primary language used in UECA development. It provides static typing, enhancing code quality and maintainability. By using TypeScript, developers can catch errors early and enjoy a more robust development experience.
-
-### Minimal React Usage
-
-UECA uses React's custom hooks for component model instantiation, but other React features (like class components, useState, useEffect) are avoided. This minimal reliance on React simplifies the learning curve for developers new to React while leveraging the power of React's component-based architecture.
-
-### Declarative and Modular Code Style
-
-The UECA code style emphasizes a declarative and modular approach. This approach focuses on consistency, encapsulation, and readability, ensuring that components are maintainable and scalable.
-
-### Standard Code Template
-
-To maintain consistency across different components, UECA encourages using [a standard code template](code-template.md). This ensures a uniform structure across the codebase, making it easier to navigate and understand.
-
-### Comprehensive Binding System
-
-UECA provides a comprehensive binding system with three types of bindings:
-1. **Unidirectional Binding**: Reflects the value of a property without allowing modifications.
-2. **Bidirectional Binding**: Synchronizes state between two properties, allowing changes to propagate in both directions.
-3. **Custom Binding**: Provides flexibility to transform values during the binding process.
-
-### View Rules and Patterns
-
-UECA has specific rules for handling views:
-- **View-Type Methods**: Methods returning JSX should end with "View" to become observers of all observable dependencies.
-- **View-Type Properties**: Properties storing JSX should end with "View" to avoid rendering issues and potential application crashes.
-- **Rendering**: Use `UEC.renderNode(model.someView)` for methods returning `ReactNode` and `<model.someView />` for those returning `JSX.Element`.
-
-### Messaging System
-
-UECA includes a messaging system that allows components to communicate in a decoupled manner. Components can send and receive messages without direct dependencies, promoting a modular architecture.
-
-### Lifecycle Management
-
-UECA components have lifecycle methods (`init`, `mount`, `unmount`) to manage initialization, mounting, and unmounting processes. These methods ensure that resources are appropriately managed throughout the component's lifecycle.
-
-### Encapsulation
-
-Encapsulation is a core principle of UECA. Each component encapsulates its implementation details, exposing only necessary interfaces. This reduces code complexity and enhances maintainability.
-
-## Conclusion
-
-UECA is a powerful framework designed to create maintainable, scalable, and modular web applications. By leveraging TypeScript, minimizing React usage, and following a declarative and modular code style, UECA provides a robust foundation for modern web development. This tutorial will guide you through the core features of UECA, helping you build efficient and maintainable applications.
-

package/docs/technology.md

@@ -1,45 +0,0 @@
-# Technology of UECA
-
-Unified Encapsulated Component Architecture (UECA) development leverages a blend of modern web technologies to create scalable, maintainable, and modular applications. Below is a summary of the key technologies and coding practices employed in UECA development:
-
-## TypeScript
-
-- **Core Language**: TypeScript is the primary language used for UECA development. It provides static typing, which enhances code quality and maintainability.
-- **General Usage**: Most of the UECA code is written in general TypeScript, focusing on type safety and modern JavaScript features.
-
-## JSX
-
-- **User Interface**: JSX is used to describe the UI in a syntax familiar to both JavaScript and HTML, making it easier to build and understand component structures.
-- **Integration with TypeScript**: Combined with TypeScript, JSX allows for type-checked components, reducing runtime errors and improving development efficiency.
-
-## React
-
-- **Minimal Usage**: The only React feature utilized in UECA is custom hooks for component model instantiation. This minimizes the reliance on React-specific code and simplifies the learning curve for developers new to React.
-- **Custom Hooks**: Custom hooks are used to instantiate and manage the lifecycle of component models, integrating React’s state and effect management seamlessly into UECA.
-
-## Coding Techniques
-- **Property Bindings**: Synchronizes state between components and their properties automatically, reducing the need for manual updates.
-- **Automatic OnChange$Property$ Events**: Automatically triggers events when a property changes, allowing components to react to updates or intercept changes for validation.
-- **Component Lifecycle Hooks**:
-Manages initialization, mounting, and unmounting of components, ensuring predictable behavior and proper resource management.
-- **Interaction via Message Bus**:
-Facilitates decoupled communication between components, promoting a modular architecture by allowing components to interact without direct dependencies.
-
-## Coding Style
-
-- **Declarative and Modular Approach**: The UECA code style emphasizes a declarative and modular approach, focusing on consistency, encapsulation, and readability to create maintainable and scalable component-based applications.
-- **Utility Classes**: While the procedural approach is preferred, utility classes can be used where appropriate, particularly for reusable functions and routines.
-
-## Standard Code Template
-
-- **Consistency**: To maintain consistency across different components, developers are encouraged to use a [standard code template](/docs/code-template.md) for creating new components. This ensures that all components have a uniform structure, making the codebase easier to navigate and understand.
-- **Structural Similarity**: Keeping the code structurally similar from component to component helps in maintaining readability and reducing the cognitive load on developers when switching between different parts of the application.
-
-## React and TypeScript
-
-- **Web Application Foundation**: A typical UECA application is a web application built using React and TypeScript. React provides the component-based architecture, while TypeScript offers strong typing and modern JavaScript features.
-- **Ban on Other React Features**: Besides custom hooks, other React features (like class components, useState, useEffect) are banned from the application code to simplify the architecture and make the codebase more approachable for developers with a TypeScript background.
-
-## Conclusion
-
-UECA development emphasizes the use of TypeScript and JSX, with minimal reliance on React-specific features. By focusing on a declarative and modular approach and maintaining structural consistency, UECA aims to create maintainable and scalable web applications that are easy to understand and develop. Developers familiar with TypeScript and JSX can quickly adapt to UECA, even without extensive experience in React.