ueca-react 1.0.7 → 2.0.0

package/docs/Component Extension in UECA-React.md

@@ -0,0 +1,275 @@
+# Component Extension in UECA-React
+#components #extension #inheritance #modularity #typescript
+
+## Description
+Component extension in UECA-React allows developers to create a hierarchy of components by inheriting functionality from a base component while adding or customizing features in derived components. This promotes code reuse, modularity, and maintainability, enabling the creation of reusable base library components (e.g., with validation or common props) that extended components inherit. The mechanism uses TypeScript generics for type safety and supports unlimited levels of inheritance, making it ideal for building scalable component libraries.
+
+Key features:
+- **Inheritance**: Derived components inherit props, methods, and events from the base component.
+- **Type-Safe**: Leverages TypeScript generics for robust typing across the hierarchy.
+- **Modular**: Facilitates reusable base components for common functionality.
+- **Flexible**: Supports multi-level component hierarchies without restrictions.
+
+---
+
+## API/Methods
+
+### Base Component Structure
+- **BaseStruct**  
+  Defines the common properties, methods, and events for the base component.  
+  - **Example**: A base structure with validation logic, such as `EditControl` with props like `disabled` and methods like `validate`.
+
+### Extending Components
+- **UECA.ComponentStruct<T>**  
+  A generic type that extends a base structure with additional properties, methods, or events.  
+  - **Parameters**:  
+    - `T`: The extended structure to merge with the base.  
+  - **Usage**: Combines base and extended structures for type safety.
+
+- **UECA.useExtendedComponent(baseStruct, extStruct, params, baseHook?)**  
+  Creates a model that merges the base component’s structure with the extended structure.  
+  - **Parameters**:  
+    - `baseStruct`: The base component’s structure (e.g., validation logic).  
+    - `extStruct`: The extended component’s structure (e.g., input-specific props).  
+    - `params`: Optional parameters for initialization.  
+    - `baseHook`: Optional base hook (defaults to `UECA.useComponent`).  
+  - **Returns**: A model combining base and extended functionality.
+
+---
+
+## Code Examples
+
+### Example 1: Base EditControl Component
+This example defines a generic `EditControl<T>` base component that provides validation functionality and common properties.
+
+```typescript
+import * as UECA from "ueca-react";
+
+type BaseStruct = UECA.ComponentStruct<{
+  props: {
+    disabled: boolean;
+    readOnly: boolean;
+    mandatory: boolean;
+    style: React.CSSProperties;
+    modelsToValidate: EditControlModel[];
+    _internalValidationError: string;
+  };
+  methods: {
+    getValidationError: () => string;
+    validate: (errorText?: string) => Promise<void>;
+    isValid: () => boolean;
+    resetValidationErrors: () => void;
+  };
+  events: {
+    onInternalValidate: () => Promise<string>;
+    onValidate: () => Promise<string>;
+  };
+}>;
+
+type EditControlStruct<T extends UECA.GeneralComponentStruct> = BaseStruct & UECA.ComponentStruct<T>;
+type EditControlParams<T extends BaseStruct = EditControlStruct<{}>> = UECA.ComponentParams<T>;
+type EditControlModel<T extends BaseStruct = BaseStruct> = UECA.ComponentModel<T>;
+
+function useEditControl<T extends BaseStruct>(extStruct: T, params?: EditControlParams<T>): EditControlModel<T> {
+  const struct: BaseStruct = {
+    props: {
+      disabled: false,
+      readOnly: false,
+      mandatory: false,
+      style: undefined,
+      modelsToValidate: [],
+      _internalValidationError: undefined
+    },
+    methods: {
+      getValidationError: () => {
+        const errors: string[] = [];
+        model.modelsToValidate?.forEach(x => {
+          const err = x.getValidationError();
+          err && errors.push(err);
+        });
+        model._internalValidationError && errors.push(model._internalValidationError);
+        return errors.length && errors.join("\r\n") || undefined;
+      },
+      validate: async (errorText?: string) => {
+        await Promise.all(model.modelsToValidate?.map(x => x.validate()));
+        model._internalValidationError = await model.onInternalValidate?.();
+        if (model._internalValidationError) return;
+        model._internalValidationError = await model.onValidate?.();
+        if (model._internalValidationError) return;
+        model._internalValidationError = errorText;
+      },
+      isValid: () => !model.getValidationError(),
+      resetValidationErrors: () => {
+        model.modelsToValidate?.map(async x => x.resetValidationErrors());
+        model._internalValidationError = undefined;
+      }
+    }
+  };
+  const model = UECA.useExtendedComponent(struct, extStruct, params);
+  return model;
+}
+
+export { useEditControl, EditControlModel, EditControlStruct, EditControlParams };
+```
+
+- **Explanation**:  
+  - Defines a base `EditControl` with validation-related props (`disabled`, `mandatory`), methods (`validate`, `isValid`), and events (`onInternalValidate`, `onValidate`).  
+  - Uses generics (`T`) to allow extension with additional functionality.  
+  - `UECA.useExtendedComponent` merges the base and extended structures.
+
+### Example 2: Extended Input Component
+This example extends `EditControl` to create an `Input` component with text input functionality and inherited validation.
+
+```typescript
+import { getFC } from "ueca-react";
+import { Div, Input as RawInput } from "@components";
+import { EditControlModel, EditControlParams, EditControlStruct, useEditControl } from "./EditControl";
+
+type Struct = EditControlStruct<{
+  props: {
+    label: string;
+    value: string;
+    placeholder: string;
+  };
+  events: {
+    onClick: () => void;
+    onChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+    onEnterKey: () => void;
+  };
+}>;
+
+type InputParams = EditControlParams<Struct>;
+type InputModel = EditControlModel<Struct>;
+
+function useInput(params?: InputParams): InputModel {
+  const struct: Struct = {
+    props: {
+      id: useInput.name,
+      value: undefined,
+      label: undefined,
+      placeholder: undefined,
+    },
+    events: {
+      onInternalValidate: async () => {
+        if (model.mandatory && !model.value) {
+          return `${model.label || "This field"} cannot be empty`;
+        }
+      },
+      onChangeValue: () => model.resetValidationErrors()
+    },
+    View: () => (
+      <Div id={model.htmlId()}>
+        <RawInput
+          value={model.value}
+          placeholder={model.placeholder}
+          label={model.label}
+          mandatory={model.mandatory}
+          disabled={model.disabled}
+          readOnly={model.readOnly}
+          validationError={model.getValidationError()}
+          style={model.style}
+          onChange={(value: string, e: React.ChangeEvent<HTMLInputElement>) => {
+            model.value = value;
+            model.onChange?.(value, e);
+          }}
+          onClick={() => model.onClick?.()}
+          onEnterKey={() => model.onEnterKey?.()}
+        />
+      </Div>
+    )
+  };
+  const model = useEditControl(struct, params);
+  return model;
+}
+
+const Input = getFC(useInput);
+export { InputModel, useInput, Input };
+```
+
+- **Explanation**:  
+  - Extends `EditControl` to inherit validation props, methods, and events.  
+  - Adds input-specific props (`value`, `label`, `placeholder`) and events (`onClick`, `onChange`, `onEnterKey`).  
+  - Implements `onInternalValidate` for mandatory field validation.  
+  - The `View` uses a `RawInput` component, leveraging inherited props.
+
+### Example 3: Using the Input Component in a Form
+This example shows the `Input` component in a form with a button to trigger validation.
+
+```typescript
+import * as UECA from "ueca-react";
+import { useInput, InputModel } from "./Input";
+import { ButtonModel, useButton } from "./Button";
+
+type FormStruct = UECA.ComponentStruct<{
+  props: {
+    formValid: boolean
+  };
+  children: {
+    nameInput: InputModel,
+    okButton: ButtonModel,
+  };
+}>;
+
+function useForm(): UECA.ComponentModel<FormStruct> {
+  const struct: FormStruct = {
+    props: {
+      formValid: false
+    },
+    children: {
+      nameInput: useInput({
+        mandatory: true,
+        label: "Name",
+        onValidate: async () => {
+          return model.nameInput.value ? undefined : "Name is required";
+        },
+        onChange: () => {
+          model.nameInput.resetValidationErrors();
+          model.formValid = true;
+        }
+      }),
+      okButton: useButton({
+        text: "OK",
+        onClick: async () => {
+          await model.nameInput.validate();
+          model.formValid = model.nameInput.isValid();
+        }
+      }),
+    },
+    View: () => (
+      <div>
+        <model.nameInput.View />
+        <model.okButton.View />
+        <p>Form Valid: {model.formValid.toString()}</p>
+      </div>
+    ),
+  };
+  const model = UECA.useComponent(struct);
+  return model;
+}
+
+const Form = UECA.getFC(useForm);
+export { Form };
+```
+
+- **Explanation**:  
+  - The `nameInput` inherits `EditControl`’s validation logic, with `onValidate` checking for empty input.  
+  - The `onChange` event resets validation errors and sets `formValid` to `true`.  
+  - The `okButton` triggers validation and updates `formValid`.
+
+---
+
+## Best Practices
+- **Centralize Common Logic**: Place shared functionality (e.g., validation) in base components for reuse.  
+- **Use TypeScript Generics**: Ensure type safety with `UECA.ComponentStruct<T>` for extensions.  
+- **Keep Extensions Minimal**: Add only necessary props or methods to derived components.  
+- **Leverage Inherited Methods**: Use base methods like `validate` for consistent behavior.
+- **Chain Event Handlers**: Combine inherited events (e.g., `onChangeValue`) with custom handlers for flexibility.
+
+---
+
+## Notes
+- Component extension supports unlimited hierarchy levels for complex libraries.  
+- The `model` returned by `useExtendedComponent` includes both base and extended props/methods.  
+- Set the `id` prop (e.g., `useInput.name`) for proper model caching and identification.  
+- Errors in extended components are caught by `UECA.globalSettings.errorHandler`.  
+- Event handlers like `onChange` chain with inherited handlers (e.g., `onChangeValue` from `EditControl`).

package/docs/Component IDs in UECA-React.md

@@ -0,0 +1,181 @@
+# Component IDs in UECA-React
+#component-ids #basics #api #example #best_practices
+
+## Description
+In UECA-React, every component is assigned a unique identifier, or **ID**, which plays a critical role in managing the component's lifecycle, tracing, and integration with the DOM. The ID system ensures that each component can be uniquely identified within the application, which is essential for features like caching, logging, and automated testing. This article explains how component IDs are generated, how to use them, and their significance in the UECA-React ecosystem.
+
+### Key Concepts
+- **Component ID**: A unique string that identifies a component instance within the application.
+- **Full ID**: A hierarchical path that represents the component's position in the parent-child structure (e.g., `app.ui.mainForm.button`).
+- **HTML ID**: A DOM-compatible ID generated from the full ID, used to identify the component's root element in the DOM.
+- **ID Initialization**: The ID is typically initialized using the hook's name for consistency and tracing purposes.
+
+### Importance of Component IDs
+- **Uniqueness**: Ensures each component can be distinctly identified, preventing conflicts in large applications.
+- **Tracing**: Component IDs are used in logs to trace component creation, updates, and lifecycle events.
+- **DOM Integration**: The HTML ID allows for easy selection and manipulation of the component's root element.
+- **Testing**: Automated testing tools (e.g., UI Vision) can use the HTML ID to interact with specific components.
+
+## How Component IDs Work
+
+### 1. Initializing the Component ID
+When defining a UECA component, the `id` property is typically set in the `props` section of the component structure. By convention, it is initialized to the name of the custom hook (e.g., `useMyComponent.name`), which provides a default unique identifier.
+
+```typescript
+props: {
+  id: useMyComponent.name, // e.g., "myComponent"
+}
+```
+
+- **Note**: The `id` is a built-in property provided by `UECA.ComponentStruct` and is automatically included in the model. It can be overridden if needed, but using the hook's name is a best practice for consistency.
+
+### 2. Full ID
+The **full ID** is a hierarchical string that represents the component's path in the parent-child structure. It is constructed by concatenating the IDs of all parent components, separated by dots.
+
+For example, if a `Button` component is nested inside a `Form` component, which is inside the `App` component, the full ID of the button would be:
+```
+app.form.button
+```
+
+- **Accessing the Full ID**: The full ID can be retrieved using the `model.fullId()` method.
+  ```typescript
+  const fullId = model.fullId(); // e.g., "app.form.button"
+  ```
+
+### 3. HTML ID
+The **HTML ID** is derived from the full ID and is used as the `id` attribute for the component's root element in the DOM. In development, it typically matches the full ID, but in production, it can be hashed for optimization.
+
+- **Accessing the HTML ID**: The HTML ID can be retrieved using the `model.htmlId()` method.
+  ```typescript
+  const htmlId = model.htmlId(); // e.g., "app.form.button" or a hashed version
+  ```
+
+- **Usage in JSX**: The HTML ID should be applied to the top-level element in the component's `View`.
+  ```typescript
+  View: () => (
+    <div id={model.htmlId()}>
+      {/* Component UI */}
+    </div>
+  )
+  ```
+
+### 4. ID in Tracing
+Component IDs are essential for tracing. When `globalSettings.traceLog` is enabled, the framework logs events such as model creation, property changes, and lifecycle hooks, using the component's ID for identification.
+
+- **Example Log Entry**:
+  ```
+  create model=#123456 path=useMyComponent
+  change prop model=#123456 path=app.ui.myComponent[count] 0➝1
+  ```
+
+- The `path` in the log corresponds to the component's full ID, making it easy to trace events back to specific components.
+
+## API/Methods
+- **`model.fullId(): string`**: Returns the full hierarchical ID of the component.
+- **`model.htmlId(): string`**: Returns the DOM-compatible ID for the component's root element.
+- **`model.id: string`**: The unique identifier of the component instance.
+
+## Code Example
+
+### Simple Button Component with ID
+This example demonstrates how to initialize and use the component ID in a simple button component.
+
+```typescript
+import * as UECA from "ueca-react";
+
+// Declare the component structure
+type ButtonStruct = UECA.ComponentStruct<{
+  props: {
+    caption: string;
+  };
+  methods: {
+    click: () => void;
+  };
+}>;
+
+// Declare the parameters type
+type ButtonParams = UECA.ComponentParams<ButtonStruct>;
+
+// Declare the model type
+type ButtonModel = UECA.ComponentModel<ButtonStruct>;
+
+// Custom hook
+function useButton(params?: ButtonParams): ButtonModel {
+  const struct: ButtonStruct = {
+    props: {
+      id: useButton.name,
+      caption: "Click Me", // Default caption
+    },
+    methods: {
+      click: () => {
+        console.log(`Button ${model.id} clicked`);
+      },
+    },
+    View: () => (
+      <button id={model.htmlId()} onClick={model.click}>
+        {model.caption}
+      </button>
+    ),
+  };
+  const model = UECA.useComponent(struct, params);
+  return model;
+}
+
+// Functional component
+const Button = UECA.getFC(useButton);
+
+// Export for use in parent components
+export { ButtonModel, useButton, Button };
+```
+
+### Using the Button in a Parent Component
+This example shows how to integrate the `Button` component into a parent component and access its ID.
+
+```typescript
+import * as UECA from "ueca-react";
+import { useButton, ButtonModel } from "./Button";
+
+type AppStruct = UECA.ComponentStruct<{
+  children: {
+    button: ButtonModel;
+  };
+}>;
+
+function useApp(): UECA.ComponentModel<AppStruct> {
+  const struct: AppStruct = {
+    props: {
+      id: "App"
+    },
+    children: {
+      button: useButton({ caption: "Submit" }), // Initialize Button with custom caption
+    },
+    View: () => (
+      <div id={model.htmlId()}>
+        <h1>App</h1>
+        {model.button.View}
+        <p>Button ID: {model.button.id}</p>
+        <p>Button Full ID: {model.button.fullId()}</p>
+      </div>
+    ),
+  };
+  const model = UECA.useComponent(struct);
+  return model;
+}
+
+const App = UECA.getFC(useApp);
+export default App;
+```
+
+- The parent component accesses the button's ID and full ID via `model.button.id` and `model.button.fullId()`.
+
+## Best Practices
+- **Initialize ID with Hook Name**: Always set `id: useMyComponent.name` in the `props` section for consistency and easier tracing.
+- **Use Full ID for Logging**: When logging custom messages, include the full ID to trace the component's location in the hierarchy.
+- **Apply HTML ID to Root Element**: Always set `id={model.htmlId()}` on the top-level JSX element to ensure proper DOM integration.
+- **Avoid Manual ID Overrides**: Unless necessary, avoid overriding the ID after model creation to maintain uniqueness.
+- **Use IDs in Tests**: Leverage the HTML ID in automated tests to target specific components (e.g., with UI Vision).
+
+## Notes
+- The `id` is automatically included in the model as a built-in property and does not need to be redefined in the component's `props` unless overriding the default value.
+- In production, the HTML ID can be hashed for optimization by setting `globalSettings.hashHtmlId = true`.
+- The full ID is constructed dynamically based on the component hierarchy, ensuring uniqueness even for components with the same base ID.

package/docs/{component-intergation-model.md → Component Integration Model in UECA-React.md }

@@ -1,6 +1,7 @@
-# Component Integration Model
+# Component Integration Model in UECA-React
+#components #integration #composition #message_bus
 
-The UEC architecture employs two primary methods for component interaction: direct model calls and communication through a common message bus. Each method serves distinct purposes and maintains different aspects of component interaction.
+UECA-React employs two primary methods for component interaction: direct model calls and communication through a common message bus. Each method serves distinct purposes and maintains different aspects of component interaction.
 
 <p align="center"><img src="component-integration.png" /></p>
 
@@ -41,4 +42,4 @@ The diagram visually represents these interactions, emphasizing the dual approac
 
 ## Conclusion
 
-By utilizing these two methods, the UECA ensures clear, maintainable, and scalable component interactions. This approach not only improves code readability and modularity but also facilitates testing and reduces the likelihood of bugs.
+By utilizing these two methods, the UECA-React ensures clear, maintainable, and scalable component interactions. This approach not only improves code readability and modularity but also facilitates testing and reduces the likelihood of bugs.

package/docs/{component-mental-model.md → Component Mental Model in UECA-React.md }

@@ -1,11 +1,12 @@
-# Component Mental Model
+# Component Mental Model in UECA-React
+#components #model #structure #integration #composition
 
 ## Rationale of creating UECA
 
 In UI application development, the component approach is widely used, where the user interface is constructed from various unified parts called components. React, as a framework, is based on this model. However, standard React patterns often require developers to focus heavily on the interactions between these components, leading to redundant code and inconsistencies, especially in larger teams. This redundancy increases support costs and the likelihood of bugs over time.
 
-## What is UECA component?
-The UECA addresses the issue by encapsulating routine code and allowing developers to focus on the core principles of components. Here are the fundamental principles, visualized in the provided diagram.
+## What is UECA-React component?
+The UECA-React addresses the issue by encapsulating routine code and allowing developers to focus on the core principles of components. Here are the fundamental principles, visualized in the provided diagram.
 
 <p align="center"><img src="component-mental-model.svg" /></p>
 

package/docs/Introduction to UECA-React Components.md

@@ -0,0 +1,190 @@
+# Introduction to UECA-React Components
+#components #basics #api #example #best_practices
+
+## Description
+UECA-React (Unified Encapsulated Component Architecture) provides a structured approach to building React applications by encapsulating component logic, state, and UI within a consistent template. Components in UECA-React are defined using a custom hook that creates a reactive model, leveraging MobX for state management. This article introduces the anatomy of a UECA component, explaining how to create and use components based on the standard template. All sections of the template are optional, allowing flexibility while maintaining uniformity.
+
+UECA components offer:
+- **Modularity**: Clear separation of concerns within a single structure.
+- **Type Safety**: Full TypeScript support for robust development.
+- **Reactivity**: Automatic UI updates via MobX integration.
+- **Decoupled Logic**: Support for lifecycle hooks, events, and messaging.
+
+## Component Template
+
+The standard UECA component template consists of a TypeScript structure, a custom hook, and a functional component. Below is a breakdown of the template’s key elements.
+
+### Structure Declaration
+The component structure is defined using a TypeScript interface, specifying optional sections:
+- **props**: Properties for state and configuration.
+- **events**: Event handlers for component interactions.
+- **children**: Nested UECA component models.
+- **methods**: Functions available on the model.
+
+```typescript
+type MyCompStruct = UECA.ComponentStruct<{
+  props: { /* properties */ };
+  events: { /* event handlers */ };
+  children: { /* child components */ };
+  methods: { /* methods */ };
+}>;
+```
+
+### Properties and methods derived from UECA.ComponentStruct
+- **props**: `id: string`, `cacheable: boolean`, `bus: MessageBus`
+- **methods**: `disableOnChange()`, `enableOnChange()`, `changeNotifyDisabled(): boolean`, `fullId(): string`, `htmlId(): string`, `birthMark(): string`, `clearModelCache()`, `getChildrenModels(): AnyComponentModel[]`, `invalidateView()`
+
+
+### Type Definitions
+- **Parameters**: `UECA.ComponentParams<MyCompStruct>` defines the input parameters (props, events, hooks).
+- **Model**: `UECA.ComponentModel<MyCompStruct>` defines the component’s reactive model.
+
+```typescript
+type MyCompParams = UECA.ComponentParams<MyCompStruct>;
+type MyCompModel = UECA.ComponentModel<MyCompStruct>;
+```
+
+### Custom Hook
+The custom hook (`useMyComp`) creates the component model using `UECA.useComponent`. It initializes the structure with optional sections:
+- **props**: Initial state or configuration.
+- **children**: Child component models.
+- **methods**: Model methods.
+- **events**: Event handlers.
+- **messages**: Message bus handlers for listenning messages (for inter-component communication).
+- **Lifecycle Hooks**: `constr`, `init`, `deinit`, `mount`, `unmount`, `draw`, `erase`.
+- **View**: The component’s UI, returned as JSX.
+
+```typescript
+function useMyComp(params?: MyCompParams): MyCompModel {
+  const struct: MyCompStruct = {
+    View: () => <div>Hello World!</div>, // UI (otional)
+    // Include only needed sections and hooks
+  };
+  const model = UECA.useComponent(struct, params);
+  return model; // members of struct sections (props, events, methods and children) are accessible directly from model (e.g. model.id). 
+}
+```
+
+### Functional Component
+The functional component is generated using `UECA.getFC` to wrap the custom hook.
+
+```typescript
+const MyComp = UECA.getFC(useMyComp);
+```
+
+### Exports
+Export the model type, hook, and component for use in parent components.
+
+```typescript
+export { MyCompModel, useMyComp, MyComp };
+```
+
+## API/Methods
+- **UECA.useComponent(struct, params)**: Creates or retrieves a reactive component model.
+  - **Example**: `const model = UECA.useComponent(struct, params);`
+- **UECA.getFC(hook)**: Converts a custom hook into a React functional component.
+  - **Example**: `const MyComp = UECA.getFC(useMyComp);`
+
+## Code Example
+### Simple Counter Component
+This example creates a `Counter` component with a single state property (`count`) and a method to increment it.
+
+```typescript
+import * as UECA from "ueca-react";
+
+// Declare the component structure
+type CounterStruct = UECA.ComponentStruct<{
+  props: {
+    count: number
+  };
+  methods: { 
+    increment: () => void 
+  };
+}>;
+
+// Declare the parameters type
+type CounterParams = UECA.ComponentParams<CounterStruct>;
+
+// Declare the model type
+type CounterModel = UECA.ComponentModel<CounterStruct>;
+
+// Custom hook
+function useCounter(params?: CounterParams): CounterModel {
+  const struct: CounterStruct = {
+    props: {
+      id: useCounter.name, // Initial ID set to the hook name for tracing log
+      count: 0 // Initial state
+    }, 
+    methods: {
+      increment: () => {
+        model.count++; // Update state
+      }
+    },
+    View: () => (
+      <div id={model.htmlId()}> {/* DOM element ID */}
+        <p>Count: {model.count}</p>
+        <button onClick={model.increment}>Increment</button>
+      </div>
+    )
+  };
+  const model = UECA.useComponent(struct, params);
+  return model;
+}
+
+// Functional component
+const Counter = UECA.getFC(useCounter);
+
+// Export for use in parent components
+export { CounterModel, useCounter, Counter };
+```
+
+### Using the Counter in a Parent Component
+This shows how to integrate the `Counter` component into a parent.
+
+```typescript
+import * as UECA from "ueca-react";
+import { useCounter, CounterModel } from "./Counter";
+
+type AppStruct = UECA.ComponentStruct<{
+  children: {
+    counter: CounterModel
+  };
+}>;
+
+function useApp(): UECA.ComponentModel<AppStruct> {
+  const struct: AppStruct = {
+    props: {
+      id: "App", // ID of the application container      
+    }, 
+    children: {
+      counter: useCounter({ count: 10 }) // Initialize Counter and set the count property to 10
+    },
+    View: () => (
+      <div id={model.htmlId()}>
+        <h1>My App</h1>
+        {model.counter.View} {/* Render Counter */}
+      </div>
+    )
+  };
+  const model = UECA.useComponent(struct);
+  return model;
+}
+
+const App = UECA.getFC(useApp);
+export default App;
+```
+
+## Best Practices
+- **Use Minimal Sections**: Only include necessary sections (e.g., `props`, `methods`, `View`) to keep components lightweight.
+- **Leverage Type Safety**: Always define `props` and other sections with TypeScript for robust integration.
+- **Keep View Simple**: Delegate complex logic to methods, private methods or lifecycle hooks.
+- **Export Model Type**: Ensure `MyCompModel` is exported for parent components to use in their `children` section.
+- **Organize Private Methods**: Place helper functions after the `return model` statement for clarity.
+- **Private Members**: Prefix names of private properties and methods with `_` for better organizing.
+
+## Notes
+- All template sections (`props`, `events`, `methods`, etc.) including `View` and hooks (`constr`, `init`, `deinit`, etc.) are optional.
+- The model is reactive by default, powered by MobX, ensuring automatic UI updates when properties in `props` change.
+- Only initialized properties in `props` are reactive (MobX observable), but properties starting with two underscores (e.g., `__itemList`) are non-reactive and considered private.
+- Model properties and methods which names end with `View` are MobX observers (e.g. `TableHeaderView`).
+- Components are cached (controlled by `cacheable` and `globalSettings.modelCacheMode`), preserving state across mounts.