Fix/formattedstring

demo/app/App.svelte

@@ -9,6 +9,7 @@
                      <label text="Tabs" class:current={$current_page == TabsPage} padding="10" on:tap="{() => gotoPage(TabsPage)}" />
                      <label text="Text Nodes" class:current={$current_page == TextNodePage} padding="10" on:tap="{() => gotoPage(TextNodePage)}" />
                      <label text="SegmentedBar" class:current={$current_page == SegmentedBarPage} padding="10" on:tap="{() => gotoPage(SegmentedBarPage)}" />
+                     <label text="Formatted String" class:current={$current_page == FormattedStringPage} padding="10" on:tap="{() => gotoPage(FormattedStringPage)}" />
                 </stackLayout>
             </scrollView>
         </gridLayout>
@@ -25,6 +26,7 @@
     import TabsPage from './pages/TabsPage.svelte'
     import TextNodePage from './pages/TextNodePage.svelte'
     import SegmentedBarPage from './pages/SegmentedBarPage.svelte'
+    import FormattedStringPage from './pages/FormattedStringPage.svelte'
 
     function gotoPage(page) {
         drawer.closeDrawer();

demo/app/pages/FormattedStringPage.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Header from "../Header.svelte";
+  let alive = true;
+</script>
+
+<page>
+  <Header title="Formatted String" />
+  <stackLayout>
+    <button on:tap={() => (alive = true)}>Alive</button>
+    <button on:tap={() => (alive = false)}>Dead</button>
+    <label>
+      <formattedString>
+        {#if alive}
+          <span text="Alive" />
+          <span class="fas" text="&#xf004;"/>
+        {:else}
+          <span text="Dead" />
+          <span class="fas" text="&#xf54c;"/>
+        {/if}
+      </formattedString>
+    </label>
+  </stackLayout>
+
+</page>

demo/app/tests/dom/TabStrip.ts

@@ -1,5 +1,5 @@
 import { NativeViewElementNode, createElement, initializeDom } from "svelte-native/dom";
-import { TabStrip } from "@nativescript/core/ui/tab-navigation-base/tab-strip/tab-strip";
+import { TabStrip } from "@nativescript/core/ui/tab-navigation-base/tab-strip";
 import { tick } from "svelte";
 import TabsHarness from './TabsHarness.svelte'
 

src/dom/native/NativeElementNode.ts

@@ -14,24 +14,45 @@ export interface NativeElementPropConfig {
     [key: string]: NativeElementPropType
 }
 
-function setOnArrayProp(parent: any, value: any, propName: string, build: (value: any) => any = null) {
+function setOnArrayProp(parent: any, value: any, propName: string, index: number, build: (value: any) => any = null) {
     let current = parent[propName];
     if (!current || !current.push) {
         parent[propName] = build ? build(value) : [value];
     } else {
         if (current instanceof ObservableArray) {
-            current.push(value)
+            if (index > -1) {
+                current.splice(index, 0, value)
+            } else {
+                current.push(value);
+            }
         } else {
-            parent[propName] = [...current, value];
+            if (index > -1) {
+                const newArr = current.slice();
+                newArr.splice(index, 0, value);
+                parent[propName] = newArr
+            } else {
+                parent[propName] = [...current, value];
+            }
         }
     }
 }
 
 function removeFromArrayProp(parent: any, value: any, propName: string) {
     let current = parent[propName];
     if (!current || !current.splice) {
-        let idx = current.indexOf(value);
-        if (idx >= 0) current.splice(idx, 1);
+        return;
+    }
+
+    let idx = current.indexOf(value);
+    if (idx < 0) return;
+
+
+    if (current instanceof ObservableArray) {
+        current.splice(idx, 1);
+    } else {
+        const newArr = current.slice()
+        newArr.splice(idx, 1);
+        parent[propName] = newArr
     }
 }
 
@@ -138,10 +159,10 @@ export default class NativeElementNode<T> extends ElementNode {
         propName = this._normalizedKeys.get(propName) || propName
         switch (this.propConfig[propName]) {
             case NativeElementPropType.Array:
-                setOnArrayProp(this.nativeElement, childNode.nativeElement, propName)
+                setOnArrayProp(this.nativeElement, childNode.nativeElement, propName, index)
                 return;
             case NativeElementPropType.ObservableArray:
-                setOnArrayProp(this.nativeElement, childNode.nativeElement, propName, (v) => new ObservableArray(v))
+                setOnArrayProp(this.nativeElement, childNode.nativeElement, propName, index, (v) => new ObservableArray(v))
                 return;
             default:
                 this.setAttribute(propName, childNode);
@@ -158,7 +179,7 @@ export default class NativeElementNode<T> extends ElementNode {
         switch (this.propConfig[propName]) {
             case NativeElementPropType.Array:
             case NativeElementPropType.ObservableArray:
-                removeFromArrayProp(this.nativeElement, childNode, propName)
+                removeFromArrayProp(this.nativeElement, childNode.nativeElement, propName)
                 return;
             default:
                 this.setAttribute(propName, null);

src/dom/nativescript-elements.ts

@@ -31,11 +31,8 @@ export function registerNativeElements() {
     () => require('@nativescript/core/ui/tab-view').TabViewItem
   )
 
-  // NS components which uses the automatic registerElement Vue wrapper
-  // as they do not need any special logic
-
   registerNativeViewElement('Label', () => require('@nativescript/core/ui/label').Label)
-
+  
   registerNativeViewElement(
     'DatePicker',
     () => require('@nativescript/core/ui/date-picker').DatePicker,
@@ -142,11 +139,12 @@ export function registerNativeElements() {
     'WrapLayout',
     () => require('@nativescript/core/ui/layouts/wrap-layout').WrapLayout
   )
-  registerNativeViewElement(
-    'FormattedString',
-    () => require('@nativescript/core/text/formatted-string').FormattedString
-  )
-  registerNativeViewElement('Span', () => require('@nativescript/core/text/span').Span)
+
+  registerNativeViewElement('FormattedString', () => require('@nativescript/core').FormattedString, "formattedText", {
+    "spans": NativeElementPropType.ObservableArray
+  })
+
+  registerNativeViewElement('Span', () => require('@nativescript/core/text/span').Span, "spans")
 
   registerElement('ActionBar', () => new ActionBarElement())
   registerElement('Frame', () => new FrameElement())