You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Rules and workflow for migrating Angular TypeScript components to plain ES module JavaScript for the scripts/ bridge layer
4
+
---
5
+
6
+
## Angular TS → JS Migration Rules
7
+
8
+
When migrating `.ts` (Angular) components to `.js`:
9
+
1. Remove all Angular imports, decorators (`@Component`, `@Input`), and TypeScript types
10
+
2. Remove interfaces and type annotations
11
+
3. Remove all Angular lifecycle interfaces
12
+
4. For simple fields components extend `FieldBaseComponent` if possible and reasonable.
13
+
5. For Container components extend `ContainerBaseComponent` if possible and reasonable.
14
+
6. For rest of components extend `BaseComponent`
15
+
7.`ngOnInit` → `init()` with `componentsManager.onComponentAdded(this)`
16
+
8.`ngOnDestroy` → `destroy()` with `super.destroy()` and `componentsManager.onComponentRemoved(this)`
17
+
9. Merge `onStateChange` into `checkAndUpdate()`
18
+
10.`updateSelf` → `#updateSelf()` (private); add `#sendPropsUpdate()` at end
19
+
11. Add `update(pConn, ...)` method for external re-rendering
20
+
12. Replace `this.pConn$` → `this.pConn`; remove all `as any` casts
21
+
13. Normalize quotes to double quotes
22
+
14. If there is some external dependency try to look in additional provided ts files and copy its content to migrated js. If nothing is found try to find existing equivalent in js files or create mocked implementation.
23
+
15. When migrating parts of code prefer copy-paste over code modification.
24
+
16. Never change logic of migrated components.
25
+
17. In sdk-pega-component-map.js uncomment migrated component entry in pegaSdkComponentMap and also import line. Fix imported component path.
description: Rules and guidelines for creating components in the core Kotlin module
4
+
---
5
+
### Creating components in core kotlin module
6
+
Core components are in 'core' module in commonMain in components folder
7
+
8
+
1. Create component file in appropriate folder with name equal to component type.
9
+
- Container and template components -> 'containers' folder
10
+
- Form fields components -> 'fields' folder
11
+
- Other components -> 'widgets'
12
+
2. Create class with name '<ComponentType>Component'
13
+
3. Extend and implement appropriate base classes and interfaces:
14
+
- For containers containing childern extend ContainerComponent
15
+
- For fields extend FieldComponent
16
+
- For components containing options extend SelectableComponent
17
+
- In other cases extend BaseComponent
18
+
- For components with 'visible' property implement HideableComponent (if none of its parent classes implements it)
19
+
4. When creating component's class properties look into component related javascript file to this.props object to see which properties are being sent via bridge to native side
20
+
5. Each class property which will contain prop send from js should be mutable state
21
+
6. Js props should be read in 'applyProps' function
22
+
7. Any UI event should be handled by component class method (e.g.: 'updateValue' in FieldComponent or 'onOptionClick' in CheckboxComponent).
23
+
- Method should call context.sendComponentEvent with ComponentEvent object as argument.
24
+
- ComponentEvent object should be created in component class method. If event is used by more then one component then creation method can be moved to ComponentEvent companion object.
25
+
- ComponentEvent should be filled with appropriate type and componentData. Optional eventData can be filled.
26
+
8. Add new type in ComponentTypes object
27
+
9. Add bew entry in DefaultDefinitions (it is alphabetically ordered by component type value)
description: Rules and guidelines for creating component renderers in the ui-renderer-cmp Kotlin module
4
+
---
5
+
6
+
### Creating component renderers in ui-remderer-cmp kotlin module
7
+
8
+
Components renderers are in 'ui-renderer-cmp' module in commonMain
9
+
10
+
1. Create renderer file in appropriate folder with name '<ComponentType>Renderer'
11
+
- Container and template renderers -> 'containers' folder
12
+
- Form fields renderers -> 'fields' folder
13
+
- Other renderers -> 'widgets'
14
+
2. Create class with name '<ComponentType>Renderer'
15
+
3. Extend ComponentRenderer with appropriate component template type.
16
+
4. Add 'Render' extension function implementation.
17
+
- This function will contain actual Compose Multiplatform UI.
18
+
- It should be using CMP UI components from 'ui-components-cmp' module
19
+
- If none of the CMP UI components can be used, standard CMP components may be used.
20
+
- If added 'Render' content can be considered as separate CMP UI component and can be potentially used by other renderers please add it to 'ui-components-cmp' module. (Load the `ui-components-cmp-component` skill for the full guidelines and rules.)
21
+
5. Add entry in 'DefaultRenderers' map. Entries are sorted alphabetically.
Copy file name to clipboardExpand all lines: AGENTS.md
+15-30Lines changed: 15 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -157,35 +157,20 @@ All components extend `BaseComponent`. Required methods in order:
157
157
158
158
### Angular TS → JS Migration Rules
159
159
160
-
When migrating `.ts` (Angular) components to `.js`:
161
-
1. Remove all Angular imports, decorators (`@Component`, `@Input`), and TypeScript types
162
-
2. Remove interfaces and type annotations
163
-
3. Remove all Angular lifecycle interfaces
164
-
4. For simple fields components extend `FieldBaseComponent`" if possible and reasonable.
165
-
5. For Container components extend `ContainerBaseComponent` if possible and reasonable.
166
-
6. For rest of components extend `BaseComponent`
167
-
7.`ngOnInit` → `init()` with `componentsManager.onComponentAdded(this)`
168
-
8.`ngOnDestroy` → `destroy()` with `super.destroy()` and `componentsManager.onComponentRemoved(this)`
169
-
9. Merge `onStateChange` into `checkAndUpdate()`
170
-
10.`updateSelf` → `#updateSelf()` (private); add `#sendPropsUpdate()` at end
171
-
11. Add `update(pConn, ...)` method for external re-rendering
172
-
12. Replace `this.pConn$` → `this.pConn`; remove all `as any` casts
173
-
13. Normalize quotes to double quotes
174
-
14. If there is some external dependency try to look in additional provided ts files and copy its content to migrated js. If nothing is found try to find existing equivalent in js files or create mocked implementation.
175
-
15. When migrating parts of code prefer copy-paste over code modification.
176
-
16. Never change logic of migrated components.
160
+
Load the `angular-ts-to-js-migration` skill for the full migration rules and workflow.
177
161
178
162
### Writing Unit-tests for JS components
179
-
1. this.pConn should be mocked
180
-
2. PCore should be mocked if needed
181
-
3. please test the following methods:
182
-
- init()
183
-
- update(pConn)
184
-
- updateSelf()
185
-
- fieldOnChange(value, event)
186
-
- fieldOnBlur(value,event)
187
-
- onEvent(event)
188
-
4. test interactions with this.componentManager
189
-
5. test interactions with this.pConn
190
-
6. test interactions with PCore (if needed)
191
-
7. evaluate props sent in onComponentPropsUpdate() method of componentManager in one test if resonable
163
+
164
+
Load the `js-component-unit-tests` skill for the full guidelines and rules.
165
+
166
+
### Creating components in core kotlin module
167
+
168
+
Load the `core-kotlin-component` skill for the full guidelines and rules.
169
+
170
+
### Creating component renderers in ui-remderer-cmp kotlin module
171
+
172
+
Load the `ui-renderer-cmp-component` skill for the full guidelines and rules.
173
+
174
+
### Creating Compose Multiplatform UI components in ui-components-cmp
175
+
176
+
Load the `ui-components-cmp-component` skill for the full guidelines and rules.
0 commit comments