Skip to content

Latest commit

 

History

History
137 lines (104 loc) · 4.7 KB

MIGRATION-PHASE-1-SUMMARY.md

File metadata and controls

137 lines (104 loc) · 4.7 KB

Phase 1 Migration Summary: Simple @Input Properties to Signals

Overview

Successfully migrated simple @Input() decorators to input() signals in ngx-extended-pdf-viewer.component.ts.

Migration Statistics

Completed in Phase 1

  • 89 simple @Input properties migrated to input() signals
  • Imports updated: Added input to Angular core imports (model, output, viewChild will be added in future phases)

Remaining for Future Phases

  • 16 @Input properties with setters (NOT migrated in Phase 1 - requires effect() conversion)
  • 37 @Output properties (to be migrated to output() in Phase 2)
  • 5 @ViewChild properties (to be migrated to viewChild() in Phase 3)

Examples of Migrated Properties

Template References (undefined default)

// Before:
@Input()
public customFindbarInputArea: TemplateRef<any> | undefined;

// After:
public customFindbarInputArea = input<TemplateRef<any>>();

Boolean with default value

// Before:
@Input()
public showFreeFloatingBar = true;

// After:
public showFreeFloatingBar = input(true);

Typed with complex expression

// Before:
@Input()
public showCommentEditor: ResponsiveVisibility = pdfDefaultOptions.enableComment ? 'xxl' : false;

// After:
public showCommentEditor = input<ResponsiveVisibility>(pdfDefaultOptions.enableComment ? 'xxl' : false);

Required inputs (definite assignment)

// Before:
@Input()
public rotation!: 0 | 90 | 180 | 270;

// After:
public rotation = input.required<0 | 90 | 180 | 270>();

Properties with Setters (NOT Migrated Yet)

These 16 properties require effect() conversion and will be handled in Phase 2:

  1. formData (line 165) - with getter/setter
  2. pageViewMode (line 187) - complex setter logic
  3. scrollMode (line 315) - with getter/setter
  4. enablePrintAutoRotate (line 357) - with getter/setter
  5. minifiedJSLibraries (line 398) - with getter/setter
  6. src (line 434) - complex async setter
  7. base64Src (line 490) - complex async setter
  8. height (line 520) - with getter/setter
  9. showSidebarButton (line 621) - with getter/setter
  10. sidebarVisible (line 646) - with getter/setter
  11. showRotateButton (line 730) - setter that modifies other properties
  12. handTool (line 742) - with getter/setter
  13. showScrollingButtons (line 770) - setter that modifies other properties
  14. page (line 790) - with getter/setter
  15. zoomLevels (line 865) - with getter/setter
  16. mobileFriendlyZoom (line 933) - complex setter logic

Known Issues (Expected)

The component will NOT compile yet because:

  1. Setter methods trying to assign to signals: Properties like showScrollingButtons have setters that try to assign values to the now-readonly input signals:

    // This will error because showVerticalScrollButton is now an InputSignal
this.showVerticalScrollButton = show;

  2. Interface compatibility: NgxHasHeight interface expects minHeight: string but we now have minHeight: InputSignal<string | undefined>

  3. Compile errors are expected: These will be fixed in Phase 2 when setters are converted to effects

These issues are EXPECTED and will be resolved in subsequent phases when:

  • Phase 2: Convert @Input setters to effect() and migrate @Output to output()
  • Phase 3: Migrate @ViewChild to viewChild()
  • Phase 4: Update interface implementations

Files Modified

  • /workspace/ngx-extended-pdf-viewer/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts
    • Imports updated (lines 1-25)
    • 89 simple @Input properties converted to input() signals

Backup

A backup of the original file was created at:

  • projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts.backup

Next Steps for Phase 2

  1. Identify all @Input() set patterns
  2. Convert each setter to:
    • An input signal: public prop = input<Type>(defaultValue);
    • An effect: effect(() => { /* setter logic using this.prop() */ });
  3. Update any code that directly assigns to these properties to use prop.set(value) or handle via effect

Verification

To verify the migration:

# Count migrated input signals
grep -E "public \w+ = input" projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts | wc -l
# Output: 89

# Count remaining @Input decorators
grep -c "^\s*@Input()" projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts
# Output: 16

# Count @Output decorators
grep -c "^\s*@Output()" projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts
# Output: 37

# Count @ViewChild decorators
grep -c "^\s*@ViewChild" projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts
# Output: 5