From 9e18aee3a49aa2f957dbfae0db78f0e7970fd04a Mon Sep 17 00:00:00 2001
From: halfnelson <dpershouse@gmail.com>
Date: Wed, 19 Aug 2020 21:40:35 +1000
Subject: [PATCH 1/2] Fix formattedString support

---
 demo/app/App.svelte                       |  2 ++
 demo/app/pages/FormattedStringPage.svelte | 24 ++++++++++++++++++++++
 demo/app/tests/dom/TabStrip.ts            |  2 +-
 src/dom/native/NativeElementNode.ts       | 25 +++++++++++++++--------
 src/dom/nativescript-elements.ts          | 16 +++++++--------
 5 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 demo/app/pages/FormattedStringPage.svelte

diff --git a/demo/app/App.svelte b/demo/app/App.svelte
index 62a4b133..c1fcc6d7 100644
--- a/demo/app/App.svelte
+++ b/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();
diff --git a/demo/app/pages/FormattedStringPage.svelte b/demo/app/pages/FormattedStringPage.svelte
new file mode 100644
index 00000000..f490d9a0
--- /dev/null
+++ b/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>
diff --git a/demo/app/tests/dom/TabStrip.ts b/demo/app/tests/dom/TabStrip.ts
index 9477caca..52034764 100644
--- a/demo/app/tests/dom/TabStrip.ts
+++ b/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'
 
diff --git a/src/dom/native/NativeElementNode.ts b/src/dom/native/NativeElementNode.ts
index 5074222b..638674f4 100644
--- a/src/dom/native/NativeElementNode.ts
+++ b/src/dom/native/NativeElementNode.ts
@@ -14,15 +14,23 @@ 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) {
+                parent[propName] = current.splice(index, 0, value).slice();
+            } else {
+                parent[propName] = [...current, value];
+            }
         }
     }
 }
@@ -30,9 +38,10 @@ function setOnArrayProp(parent: any, value: any, propName: string, build: (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) current.splice(idx, 1);
 }
 
 const _normalizedKeys: Map<any, Map<string, string>> = new Map();
@@ -138,10 +147,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 +167,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);
diff --git a/src/dom/nativescript-elements.ts b/src/dom/nativescript-elements.ts
index 0146f2af..e70200e9 100644
--- a/src/dom/nativescript-elements.ts
+++ b/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())

From cf245fd14663b05e77c6b630572c0221ae942c70 Mon Sep 17 00:00:00 2001
From: halfnelson <dpershouse@gmail.com>
Date: Wed, 19 Aug 2020 22:31:01 +1000
Subject: [PATCH 2/2] fix handling of array props

---
 src/dom/native/NativeElementNode.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/dom/native/NativeElementNode.ts b/src/dom/native/NativeElementNode.ts
index 638674f4..f08c07d2 100644
--- a/src/dom/native/NativeElementNode.ts
+++ b/src/dom/native/NativeElementNode.ts
@@ -27,7 +27,9 @@ function setOnArrayProp(parent: any, value: any, propName: string, index: number
             }
         } else {
             if (index > -1) {
-                parent[propName] = current.splice(index, 0, value).slice();
+                const newArr = current.slice();
+                newArr.splice(index, 0, value);
+                parent[propName] = newArr
             } else {
                 parent[propName] = [...current, value];
             }
@@ -40,8 +42,18 @@ function removeFromArrayProp(parent: any, value: any, propName: string) {
     if (!current || !current.splice) {
         return;
     }
+    
     let idx = current.indexOf(value);
-    if (idx >= 0) current.splice(idx, 1);
+    if (idx < 0) return;
+        
+
+    if (current instanceof ObservableArray) {
+        current.splice(idx, 1);
+    } else {
+        const newArr = current.slice()
+        newArr.splice(idx, 1);
+        parent[propName] = newArr
+    }
 }
 
 const _normalizedKeys: Map<any, Map<string, string>> = new Map();