ueca-react 1.0.7 → 2.0.0

package/docs/Property Bindings in UECA-React.md

@@ -0,0 +1,191 @@
+# Property Bindings in UECA-React
+#bindings #props #state #reactivity
+
+## Description
+Property bindings in UECA-React are crucial for managing state and component interactions. They are passed to the component model hook via parameters, establishing efficient data flow and synchronization, ensuring seamless propagation of state changes across components. UECA-React supports three primary types of bindings:
+
+- **Unidirectional Binding**: Synchronizes target property with the source value, ideal for one-way data flow.
+- **Bidirectional Binding**: Synchronizes state between two properties, allowing updates in both directions.
+- **Custom Binding**: Offers flexibility to transform values during binding, accommodating complex use cases.
+
+These bindings are:
+- **Reactive**: Automatically update dependent components when bound properties change.
+- **Type-Safe**: Built with TypeScript for reliable and error-free data binding.
+- **Flexible**: Support a wide range of scenarios, from simple displays to advanced state transformations.
+
+---
+
+## API/Methods
+
+### Custom Binding
+- **UECA.bind(getter, setter)**  
+  Returns a binding object with user-defined getter and setter functions for transforming values.
+  - **Parameters**:  
+    - `getter`: A function without parameters that returns the source value for target component's property synchronization.  
+    - `setter`: A function with one parameter (new value) that updates the source value.
+  - **Returns**: A binding object for use in a target component's property synchronization.
+
+### Bidirectional Binding
+- **UECA.bind(sourceObject, propName)**  
+  A simplified version of Custom Binding. Creates a bidirectional binding that synchronizes state between two properties, allowing changes to propagate in both directions.
+  - **Parameters**:  
+    - `sourceObject`: The object containing the source property.  
+    - `propName`: The name of the source object property to bind.
+  - **Returns**: A binding object for use in a target component's property synchronization.    
+
+### Unidirectional Binding
+- **Arrow function returning value**
+  A shorthand for Custom Binding with a defined getter but an undefined setter. A function without parameters that returns the source value for target component's property synchronization.
+  - **Returns**: A value for use in target component's property synchronization.
+
+---
+
+## Code Examples
+
+### Unidirectional and Bidirectional Bindings
+
+This example demonstrates input components that both read and update the form's userName property. Additionally, the form can be configured to operate in read-only mode.
+
+```typescript
+// Parent component (Edit Form)
+type EditFormStruct = UECA.ComponentStruct<{
+    props: {
+        readOnly: boolean,
+        userName: {
+            firstName?: string;
+            lastName?: string
+        }
+    };
+    children: {
+        firstNameInput: InputModel,
+        lastNameInput: InputModel
+    };
+}>;
+
+type EditFormParams = UECA.ComponentParams<EditFormStruct>;
+type EditFormModel = UECA.ComponentModel<EditFormStruct>;
+
+function useEditForm(params?: EditFormParams): EditFormModel {
+    const struct: EditFormStruct = {
+        props: {
+            readOnly: false,
+            userName: {}
+        },
+        children: {
+            firstNameInput: useInput({
+                readOnly: () => model.readOnly, // Unidirectional binding
+                value: UECA.bind(() => model.userName, "firstName"), // Bidirectional binding
+            }),
+
+            lastNameInput: useInput({
+                readOnly: () => model.readOnly, // Unidirectional binding
+                value: UECA.bind(() => model.userName, "lastName"), // Bidirectional binding
+            })
+        },
+        View: () =>
+            <div id={model.htmlId()}>
+                <model.firstNameInput.View />
+                <model.lastNameInput.View />
+            </div>
+    };
+    const model = UECA.useComponent(struct, params);
+    return model;
+}
+
+// Child Component (Input)
+type InputStruct = UECA.ComponentStruct<{
+    props: {
+        readOnly: boolean
+        value: string
+    };
+}>;
+
+type InputParams = UECA.ComponentParams<InputStruct>;
+type InputModel = UECA.ComponentModel<InputStruct>;
+
+function useInput(params?: InputParams): InputModel {
+    const struct: InputStruct = {
+        props: {
+            readOnly: false,
+            value: ""
+        },
+        View: () =>
+            <div id={model.htmlId()}>
+                <input
+                    type="text"
+                    readOnly={model.readOnly}
+                    value={model.value}
+                    onChange={(e) => model.value = e.target.value}
+                />
+            </div>
+    };
+    const model = UECA.useComponent(struct, params);
+    return model;
+}
+```
+
+- **Explanation**:  
+  The parent binds `userName.firstName` and `userName.lastName` to the children's `value` property. Changes in the inputs update the form’s state, keeping everything in sync. The form's `readOnly` property unidirectionally propagates to the `readOnly` properties of the inputs.
+
+### Custom Binding
+This example formats a phone number for display while storing it as digits only.
+
+```typescript
+type ContactFormStruct = UECA.ComponentStruct<{
+    props: {
+        phoneNumber: string
+    };
+    children: {
+        phoneInput: InputModel
+    };
+}>;
+
+type ContactFormParams = UECA.ComponentParams<ContactFormStruct>;
+type ContactFormModel = UECA.ComponentModel<ContactFormStruct>;
+
+function useContactForm(params?: ContactFormParams): ContactFormModel {
+    const struct: ContactFormStruct = {
+        props: {
+            phoneNumber: ""
+        },
+        children: {
+            phoneInput: useInput({
+                value: UECA.bind(
+                    () => _formatPhoneNumber(model.phoneNumber),  // Getter: format for display
+                    (value) => (model.phoneNumber = value.replace(/\D/g, ''))  // Setter: store only digits
+                )
+            })
+        },
+        View: () =>
+            <div id={model.htmlId()}>
+                <model.phoneInput.View />
+            </div>
+    };
+    const model = UECA.useComponent(struct, params);
+    return model;
+
+    // Private methods
+    function _formatPhoneNumber(phoneNumber: string): string {
+        const cleaned = ('' + phoneNumber).replace(/\D/g, '');
+        const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+        return match ? `(${match[1]}) ${match[2]}-${match[3]}` : phoneNumber;
+    }
+}
+```
+- **Explanation**:  
+  The getter formats the phone number for display (e.g., `(123) 456-7890`), while the setter stores it as digits (e.g., `1234567890`), ensuring a clean model state.
+
+---
+
+## Best Practices
+- **Unidirectional Binding**: Use for read-only data display to maintain simplicity and predictability.
+- **Bidirectional Binding**: Apply to interactive elements like forms where child components need to update the parent.
+- **Custom Binding**: Leverage for formatting or transforming data between the model and UI, keeping logic clear and concise.
+- **Minimize Complexity**: Keep binding logic straightforward to optimize performance and maintainability.
+
+---
+
+## Notes
+- Bindings are fully reactive, ensuring real-time updates across components.
+- They support all data types, including primitives, objects, and arrays.
+- For interactions beyond parent-child relationships, explore the UECA Message Bus.

package/docs/State Management in UECA-React.md

@@ -0,0 +1,128 @@
+# State Management in UECA-React
+#state #management #basics #api #example #best_practices
+
+## Description
+State management is a core aspect of building dynamic applications in UECA-React. Unlike traditional React, which relies heavily on `useState` and `useReducer` for local state management, UECA-React introduces a model-based approach that simplifies state handling and integrates seamlessly with its lifecycle hooks. This article explores how state is managed in UECA-React, provides practical examples, and compares it to traditional React state management techniques.
+
+### Key Concepts
+- **Model-Based State**: State is stored in a component's model, making it accessible across lifecycle hooks and methods.
+- **Reactive Updates**: Changes to the model automatically trigger UI updates, similar to React's state system.
+- **Simplified API**: No need for multiple hooks or complex reducers for basic state management.
+- **Model Cache**: Enhanced support for state persistence and caching.
+
+## How State Works in UECA-React
+
+In UECA-React, state is managed through the component's `model`, which is created using the `useComponent` hook. The model contains:
+- **Props**: Initial properties passed to the component.
+- **State**: Any mutable data defined in the model, such as counters, flags, or computed values.
+- **Methods**: Functions that can modify the state.
+
+The model is reactive—any changes to its properties trigger a re-render of the `View` component, ensuring the UI stays in sync with the state.
+
+### Defining State
+State is typically defined in the `props` section of the component structure or initialized in the `constr` or `init` lifecycle hooks. For example:
+- Define initial state in `props`: `{ count: 0 }`.
+- Update state in methods: `model.count++`.
+
+### Updating State
+State updates are performed directly on the `model` object. UECA-React detects these changes and re-renders the component automatically. No additional hooks like `setState` are required.
+
+## Comparison to Traditional React
+
+In traditional React, state management often involves:
+- **useState**: For simple state updates.
+- **useReducer**: For complex state logic.
+- **Context**: For global state sharing.
+
+For example, a counter in React might look like this:
+```typescript
+const [count, setCount] = useState(0);
+const increment = () => setCount(count + 1);
+```
+
+In UECA-React, the same logic is simpler:
+```typescript
+props: { count: 0 },
+methods: { increment: () => model.count++ },
+```
+
+Key differences:
+- **No Explicit Setter**: UECA-React modifies state directly on the model.
+- **Fewer Hooks**: No need for `useState` or `useReducer` for basic state.
+- **Tighter Integration**: State is tied to the model and lifecycle hooks, reducing boilerplate.
+
+## Code Example
+
+Below is an example of a toggle button component that manages a boolean state in UECA-React.
+
+```typescript
+import * as UECA from "ueca-react";
+
+// Declare the component structure
+type ToggleStruct = UECA.ComponentStruct<{
+  props: {
+    isOn: boolean 
+  };
+  methods: {
+    toggle: () => void
+  };
+}>;
+
+// Declare the parameters type
+type ToggleParams = UECA.ComponentParams<ToggleStruct>;
+
+// Declare the model type
+type ToggleModel = UECA.ComponentModel<ToggleStruct>;
+
+// Custom hook
+function useToggle(params?: ToggleParams): ToggleModel {
+  const struct: ToggleStruct = {
+    props: {
+      id: useToggle.name,
+      isOn: false
+    },
+    constr: () => console.log("constr: Toggle model created"),
+    init: () => {
+      console.log("init: Toggle model initialized");
+      model.isOn = false; // Reset state on initialization
+    },
+    mount: () => console.log("mount: Toggle mounted to DOM"),
+    unmount: () => console.log("unmount: Toggle removed from DOM"),
+    methods: {
+      toggle: () => (model.isOn = !model.isOn),
+    },
+    View: () => (
+      <div id={model.htmlId()}>
+        <p>Toggle is {model.isOn ? "ON" : "OFF"}</p>
+        <button onClick={model.toggle}>Toggle</button>
+      </div>
+    ),
+  };
+  const model = UECA.useComponent(struct, params);
+  return model;
+}
+
+// Functional component
+const Toggle = UECA.getFC(useToggle);
+
+// Export for use in parent components
+export { ToggleModel, useToggle, Toggle };
+```
+
+In this example:
+- The `isOn` state is initialized as `false` in `props`.
+- The `toggle` method flips the `isOn` value, triggering a re-render.
+- Lifecycle hooks log events for demonstration purposes.
+
+## Best Practices
+- **Initialize State in `props`**: Define default state values in the `props` section to make them reactive.
+- **Reset State in `init`**: Use the `init` hook to reset state when the component is reactivated from cache.
+- **Keep Methods Simple**: State updates in methods should be straightforward to maintain predictability.
+- **Avoid Overcomplicating the Model**: For complex state logic, consider breaking it into smaller components or using external stores.
+- **Leverage Lifecycle Hooks**: Use hooks like `mount` or `draw` to perform state-dependent actions (e.g., fetching data when mounted).
+
+## Notes
+- State in UECA-React is local to the component’s model by default. For global state, consider integrating with root level component (e.g. App) via message bus.
+- The reactive system ensures that only changed properties trigger re-renders, optimizing performance.
+- State can persist across component mounts when cached, thanks to the `init` and `deinit` hooks.
+- Unlike React, there’s no need to memoize state updates, as the model handles reactivity internally.

package/docs/Technology of UECA-React.md

@@ -0,0 +1,45 @@
+# Technology of UECA-React
+
+Unified Encapsulated Component Architecture (UECA) for React 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-React development:
+
+## TypeScript
+
+- **Core Language**: TypeScript is the primary language used for UECA-React development. It provides static typing, which enhances code quality and maintainability.
+- **General Usage**: Most of the UECA-React 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-React 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 creation, initialization, deinitialization, 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-React 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-React 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-React 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-React 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.

package/docs/Tracing in UECA-React.md

@@ -0,0 +1,110 @@
+# Tracing in UECA-React
+#tracing #debug #log
+
+Logging is a crucial part of debugging and monitoring your `ueca-react` application. The UECA framework provides a built-in logging mechanism that helps you trace component behavior, track property changes, and debug application flow. This section explains how to set up and use UECA logging effectively.
+
+## Overview
+
+UECA logging is designed to:
+- Capture component lifecycle events.
+- Log property changes and updates.
+- Provide insights into the internal workings of your components.
+
+By default, UECA uses the browser's `console` for output, but you can customize it to suit your needs.
+
+## Setting Up Logging
+
+To enable logging in `ueca-react`, you need to set the `traceLog` flag in the global settings. This can be done in your entry file (e.g., `index.tsx`):
+
+```typescript
+import * as UECA from "ueca-react";
+
+// Enable logging
+UECA.globalSettings.traceLog = true;
+```
+
+To disable logging, set `traceLog` to `false`:
+
+```typescript
+import * as UECA from "ueca-react";
+
+// Disable logging
+UECA.globalSettings.traceLog = false;
+```
+
+## Log Structure
+
+When `traceLog` is enabled, UECA outputs detailed logs to the browser's console. Each log entry captures a specific event, such as:
+
+- **Model Creation**: When a new component model is instantiated.
+- **Property Changes**: Updates to component properties.
+- **Lifecycle Events**: Hooks like `constr`, `init`, `mount`, `unmount`, `deinit`, `draw`, and `erase`.
+- **Rendering**: When a component's view is rendered.
+
+Every log entry includes:
+- **Event Type**: The action being logged (e.g., `create model`, `change prop`).
+- **Model ID**: A unique identifier for the component model (e.g., `model=#123456`).
+- **Path**: The component’s hook name or its full path in the parent-child hierarchy (e.g., `useButton` or `app.ui.mainForm.button`).
+- **Details**: Specifics like property values or changes (e.g., `"localhost"➝"127.0.0.1"`).
+
+### Example Log
+
+Here’s a sample log from changing a property in an input component:
+
+```plaintext
+change prop model=#817544 path=app.ui.appRouter.appLayout.router.generalScreen.postgresHostInput[value] "localhost"➝"127.0.0.1"
+render view model=#817544 path=app.ui.appRouter.appLayout.router.generalScreen.postgresHostInput
+```
+
+- **Event**: Property change (`change prop`).
+- **Model ID**: `#817544`.
+- **Path**: `app.ui.appRouter.appLayout.router.generalScreen.postgresHostInput`.
+- **Details**: The `value` property changed from `"localhost"` to `"127.0.0.1"`, triggering a re-render.
+
+Another example, showing the creation and initialization of a button component:
+
+```plaintext
+create model=#123456 path=useButton
+init model=#123456 path=app.ui.mainForm.button
+change prop model=#123456 path=app.ui.mainForm.button[caption] ""➝"Click Me"
+render view model=#123456 path=app.ui.mainForm.button
+```
+
+- **Events**: Model creation, initialization, property change, and rendering.
+- **Model ID**: `#123456`.
+- **Path**: Transitions from `useButton` to `app.ui.mainForm.button` as the component is integrated into the application hierarchy.
+
+## Benefits for Developers
+
+- **Traceability**: Easily track which component and property changed using `model=#<id>` and `path`.
+- **Debugging Ease**: Observe the sequence of lifecycle events (`constr`, `init`, `mount`, etc.) to diagnose issues.
+- **State Clarity**: Monitor property updates to verify reactive behavior.
+- **Testing Support**: Combine with `model.fullId()` to map logs to specific components for automated tests.
+
+## Reading the Log
+
+To interpret a log entry:
+1. **Identify the Event**: Determine the action (e.g., `change prop`).
+2. **Check the Model ID**: Use `model=#<id>` to follow a specific component across events.
+3. **Note the Path**: Understand the component’s location in the application hierarchy.
+4. **Review Details**: See what changed or what action was performed.
+
+For example:
+
+```plaintext
+change prop model=#817544 path=app.ui.appRouter.appLayout.router.generalScreen.postgresHostInput[value] "localhost"➝"127.0.0.1"
+```
+
+- **Event**: Property change.
+- **Model ID**: `#817544`.
+- **Path**: Indicates the component is an input field on the `generalScreen`.
+- **Details**: The `value` property was updated, likely due to user input.
+
+## Best Practices
+
+- **Enable During Development**: Use `traceLog: true` during development or debugging to gain insights.
+- **Disable in Production**: Set `traceLog: false` in production to avoid console clutter and improve performance.
+- **Filter by Model ID**: Search logs for a specific `model=#<id>` to focus on one component.
+- **Combine with Component IDs**: Use `model.fullId()` (e.g., `app.ui.mainForm.button`) to map logs to your component hierarchy.
+
+With UECA’s tracing system, you can gain a clear window into your application’s behavior, making development and debugging more efficient.

package/docs/code-template.md

@@ -1,13 +1,12 @@
-# UECA Code Template
+# UECA-React Code Template
 
 ### TypeScript Code
 
 ```typescript
-import * as React from "react";
-import * as UEC from "ueca-react";
+import * as UECA from "ueca-react";
 
-// Component structure declaration
-type MyCompStruct = UEC.ComponentStruct<{
+// Component structure declaration. All sections (props, events, children, etc) are optional.
+type MyCompStruct = UECA.ComponentStruct<{
     props: {
         // declaration of properties
     },
@@ -25,14 +24,15 @@ type MyCompStruct = UEC.ComponentStruct<{
     }
 }>;
 
-type MyCompParams = UEC.ComponentParams<MyCompStruct>; // component parameters type (props & events from Struct)
-type MyCompModel = UEC.ComponentModel<MyCompStruct>;   // component model type
+type MyCompParams = UECA.ComponentParams<MyCompStruct>; // component parameters type (props & events & hooks from MyCompStruct)
+type MyCompModel = UECA.ComponentModel<MyCompStruct>;   // component model type
 
 // Custom react hook. Returns component model.
 function useMyComp(params?: MyCompParams): MyCompModel {
     const struct: MyCompStruct = {
         props: {
             // initialization of properties
+            id: useMyComp.name
         },
 
         children: {
@@ -51,31 +51,50 @@ function useMyComp(params?: MyCompParams): MyCompModel {
             // initialization of listening messages
         },
 
+        constr: () => { 
+            // called once when the component model is created
+        },
+
         init: () => { 
-            // final initialization. called once for a newly created component model instance
+            // called after constr() when the model is first created or when it is retrieved from the cache
+        },
+
+        deinit: () => { 
+            // called when the component loses its React context, making the model inactive (e.g., when it's cached but not in use)
         },
 
         mount: () => {
-            // called on component mounting to React DOM
+            // called when the component is mounted into React DOM
          },
 
         unmount: () => { 
-            // called on component unmounting from React DOM
+            // called when the component is removed from React DOM
         },
 
-        // Component UI presentation
-        View: () => null
+        draw: () => { 
+            // called when the component's view is rendered
+        },
+
+        erase: () => { 
+            // called when the component's UI is about to be removed
+        },
+
+        // сomponent UI presentation
+        View: () => <></>
     }
 
-    //instantiate component model. return previously created model for subsequent calls.
-    const model: MyCompModel = UEC.useComponent(struct, params);
+    // returns new component model or cached model (for subsequent calls)
+    const model: MyCompModel = UECA.useComponent(struct, params);
     return model;
 
-    // Private methods      
+    // Private methods  
+    function _somePrivateMethod() {
+        
+    }
 }
 
 // React functional component
-const MyComp = UEC.getFC(useMyComp);
+const MyComp = UECA.getFC(useMyComp);
 
 export { MyCompModel, useMyComp, MyComp }
 
@@ -83,14 +102,13 @@ export { MyCompModel, useMyComp, MyComp }
 
 ### VisualCode Code Snippets
 ```json
-"UECA Component": {
+"UECA-React Component": {
   "prefix": "ueca-component",
   "body": [
-    "import * as React from \"react\";",
-    "import * as UEC from \"ueca-react\";",
+    "import * as UECA from \"ueca-react\";",
     "",
-    "// Component structure declaration",
-    "type ${1:MyComp}Struct = UEC.ComponentStruct<{",
+    "// Component structure declaration. All sections (props, events, children, etc) are optional.",
+    "type ${1:MyComp}Struct = UECA.ComponentStruct<{",
     "    props: {",
     "        // declaration of properties",
     "    },",
@@ -108,14 +126,15 @@ export { MyCompModel, useMyComp, MyComp }
     "    }",
     "}>;",
     "",
-    "type ${1:MyComp}Params = UEC.ComponentParams<${1:MyComp}Struct>; // component parameters type (props & events from Struct)",
-    "type ${1:MyComp}Model = UEC.ComponentModel<${1:MyComp}Struct>;   // component model type",
+    "type ${1:MyComp}Params = UECA.ComponentParams<${1:MyComp}Struct>; // component parameters type (props, events and hooks from ${1:MyComp}Struct)",
+    "type ${1:MyComp}Model = UECA.ComponentModel<${1:MyComp}Struct>;   // component model type",
     "",
     "// Custom react hook. Returns component model.",
     "function use${1:MyComp}(params?: ${1:MyComp}Params): ${1:MyComp}Model {",
     "    const struct: ${1:MyComp}Struct = {",
     "        props: {",
     "            // initialization of properties",
+    "            id: use${1:MyComp}.name",
     "        },",
     "",
     "        children: {",
@@ -134,6 +153,10 @@ export { MyCompModel, useMyComp, MyComp }
     "            // initialization of listening messages",
     "        },",
     "",
+    "        constr: () => { ",
+    "            // called once when the component model is created",
+    "        },",
+    "",
     "        init: () => { ",
     "            // final initialization. called once for a newly created component model instance",
     "        },",
@@ -147,22 +170,25 @@ export { MyCompModel, useMyComp, MyComp }
     "        },",
     "",
     "        // Component UI presentation",
-    "        View: () => null",
+    "        View: () => <></>",
     "    }",
     "",
     "    //instantiate component model. return previously created model for subsequent calls.",
-    "    const model: ${1:MyComp}Model = UEC.useComponent(struct, params);",
+    "    const model: ${1:MyComp}Model = UECA.useComponent(struct, params);",
     "    return model;",
     "",
     "    // Private methods      ",
+    "    function _somePrivateMethod() {",
+    "",
+    "    }",
     "}",
     "",
     "// React functional component",
-    "const ${1:MyComp}= UEC.getFC(use${1:MyComp});",
+    "const ${1:MyComp}= UECA.getFC(use${1:MyComp});",
     "",
     "export { ${1:MyComp}Model, use${1:MyComp}, ${1:MyComp} }",
     ""
   ],
-  "description": "UECA Component"
+  "description": "UECA-React Component"
 }
 ```