fix: observables not work as expected in repeat directive and change functions

[YonatanKra]

🐛 Bug Report

When setting observables their Changed lifecycle methods do not fire on change and the repeat directive does not show them correctly.

💻 Repro or Code Sample

CodePen

🤔 Expected Behavior

I expect the repeat directive to show only the values in the array and not keep the old value. I'd expect the Changed lifecycle methods to fire.

😯 Current Behavior

1. I empty the array (myStrings.length = 0) and yet the template still shows the old value in addition to the new ones in the repeat
2. The myStringsChanged and myBooleanChanged did not fire No errors are shown.

💁 Possible Solution

If I use myStrings.pop() instead of myStrings.length = 0, I get the directive to update correctly. I assume it has something to do with overriding the original array methods.

🔦 Context

It's a basic binding example. I cannot use FAST until this is resolved.

🌍 Your Environment

• OS & Device: MacOS
• Browser: Chrome
• Fast Element Version: 2.6.0

[KingOfTac]

Have you checked if setting useDefineForClassFields: false and experimentalDecorators: true in your tsconfig fixes the behavior? Typescript has since aligned with the newer platform behavior for class fields and the latest version of the decorators proposal, however FAST's decorators haven't been updated to match yet and still rely on the old behavior in order to work properly.