add Template component and tag along with ListViewElement

Rearrang dom folders, they were getting messy

src/components/Template.svelte

@@ -0,0 +1,11 @@
+<svelte:options bind:props={props} />
+<template {...props} component="{template}" xmlns="tns" />
+<AsComponent bind:component="{template}" let:item>
+    <slot item="{item}" />
+</AsComponent>
+
+<script>
+    import { AsComponent } from "./AsComponent"
+    let template;
+    let props;
+</script>

src/components/index.ts

@@ -1,3 +1,3 @@
 export { AsComponent } from "./AsComponent";
-
+export { default as Template } from "./Template.svelte";
 

src/dom/basicdom/element-registry.ts

@@ -1,10 +1,8 @@
 import { normalizeElementName } from './ViewNode'
 import ElementNode from './ElementNode';
 
-export type NodeResolver = () => ElementNode;
-
 interface ElementEntry {
-    resolver: NodeResolver,
+    resolver: () => ElementNode,
 }
 
 const elementMap: { [index: string]: ElementEntry } = {}
@@ -17,7 +15,7 @@ function registerElementResolver(elementName: string, entry: ElementEntry) {
     elementMap[normalizedName] = entry
 }
 
-export function registerCustomElementNode(elementName: string, resolver: NodeResolver) {
+export function registerElement(elementName: string, resolver: () => ElementNode) {
     registerElementResolver(elementName, { resolver: resolver })
 }
 

src/dom/basicdom/index.ts

@@ -4,4 +4,4 @@ export { default as CommentNode } from "./CommentNode"
 export { default as PropertyNode } from "./PropertyNode"
 export { default as ViewNode, normalizeElementName } from "./ViewNode"
 export { default as TextNode } from "./TextNode"
-export { registerCustomElementNode, createElement } from "./element-registry"
+export { registerElement, createElement } from "./element-registry"

src/dom/index.ts

@@ -1,11 +1,12 @@
-import { registerSvelteElements } from './SvelteElements'
-import { registerNativeElements } from './NativescriptElements'
-import SvelteNativeDocument from './SvelteNativeDocument'
-import NativeElementNode from './NativeElementNode'
-export { default as FrameElement } from "./FrameElement"
-export { default as SvelteNativeDocument } from './SvelteNativeDocument'
-export { default as NativeElementNode } from './NativeElementNode'
-export { registerCustomElementNode, createElement, ViewNode } from './basicdom'
+import { registerSvelteElements } from './svelte-elements'
+import { registerNativeElements } from './nativescript-elements'
+import SvelteNativeDocument from './svelte/SvelteNativeDocument'
+import NativeElementNode from './native/NativeElementNode'
+
+export { default as FrameElement } from "./native/FrameElement"
+export { default as SvelteNativeDocument } from './svelte/SvelteNativeDocument'
+export { default as NativeElementNode } from './native/NativeElementNode'
+export { registerElement, createElement, ViewNode } from './basicdom'
 export { navigate, goBack, showModal, NavigationOptions, BackNavigationOptions } from './navigation'
 
 

src/dom/FrameElement.ts → src/dom/native/FrameElement.ts

@@ -1,4 +1,4 @@
-import { createElement, ViewNode } from "./basicdom";
+import { createElement, ViewNode } from "../basicdom";
 import { Frame } from 'tns-core-modules/ui/frame'
 import NativeElementNode from "./NativeElementNode";
 import PageElement from "./PageElement";

src/dom/native/ListViewElement.ts

@@ -0,0 +1,62 @@
+import { ListView, ItemEventData, ItemsSource } from 'tns-core-modules/ui/list-view'
+import NativeElementNode from "./NativeElementNode";
+import TemplateElement from '../svelte/TemplateElement';
+import { createElement } from '../basicdom';
+
+
+export default class ListViewElement extends NativeElementNode {
+    constructor() {
+        super('listview', ListView, null);
+
+        this.nativeView.on(ListView.itemLoadingEvent, (args) => { this.updateListItem(args as ItemEventData) });
+    }
+
+    updateListItem(args: ItemEventData) {
+        let item;
+        let listView = this.nativeView;
+        let items = listView.items;
+
+        if (args.index >= items.length) {
+            console.log("Got request for item at index that didn't exists", items, args.index)
+            return;
+        }
+
+        if ((items as ItemsSource).getItem) {
+            item = (items as ItemsSource).getItem(args.index);
+        } else {
+            item = (items as any)[args.index]
+        }
+
+        if (!args.view || !(args.view as any).__SvelteComponent__) {
+            console.log("creating view for ", args.index, item.name)
+            let wrapper = createElement('StackLayout') as NativeElementNode;
+            let componentInstance = new (this.itemTemplateComponent)({
+                target: wrapper,
+                props: {
+                    item
+                }
+            });
+
+            let nativeEl = wrapper.nativeView;
+            (nativeEl as any).__SvelteComponent__ = componentInstance;
+            args.view = nativeEl;
+        } else {
+            let componentInstance: SvelteComponent = (args.view as any).__SvelteComponent__
+            console.log("updating view for ", args.index, item.name, args.view)
+            componentInstance.$set({ item })
+        }
+    }
+
+    get itemTemplateComponent(): typeof SvelteComponent {
+        const templateNode = this.childNodes.find(x => x instanceof TemplateElement) as TemplateElement
+        return templateNode ? templateNode.component : null;
+    }
+
+    get nativeView(): ListView {
+        return super.nativeView as ListView
+    }
+
+    set nativeView(view: ListView) {
+        super.nativeView = view
+    }
+}

src/dom/NativeElementNode.ts → src/dom/native/NativeElementNode.ts

@@ -1,9 +1,9 @@
 
-import ViewNode from './basicdom/ViewNode'
+import ViewNode from '../basicdom/ViewNode'
 import { KeyframeAnimation } from 'tns-core-modules/ui/animation/keyframe-animation';
 import { CssAnimationParser } from 'tns-core-modules/ui/styling/css-animation-parser';
 import { Page, View, isAndroid, isIOS, EventData, ContentView } from 'tns-core-modules/ui/page/page';
-import ElementNode from './basicdom/ElementNode';
+import ElementNode from '../basicdom/ElementNode';
 import { LayoutBase } from 'tns-core-modules/ui/layouts/layout-base';
 
 interface IStyleProxy {

src/dom/PageElement.ts → src/dom/native/PageElement.ts

@@ -1,4 +1,3 @@
-import { createElement } from "./basicdom";
 import { Page } from 'tns-core-modules/ui/page'
 import NativeElementNode from "./NativeElementNode";
 

src/dom/NativescriptElements.ts → src/dom/nativescript-elements.ts

@@ -1,42 +1,37 @@
-import { registerCustomElementNode } from './basicdom'
-import NativeElementNode, { ComponentMeta } from './NativeElementNode'
+import { registerElement } from './basicdom'
+import NativeElementNode, { ComponentMeta } from './native/NativeElementNode'
 import { View } from 'tns-core-modules/ui/page/page'
-import FrameElement from './FrameElement';
-import PageElement from './PageElement';
+import FrameElement from './native/FrameElement';
+import PageElement from './native/PageElement';
+import ListViewElement from './native/ListViewElement';
 
-export function registerElement(elementName: string, resolver: () => typeof View, meta: ComponentMeta = null) {
-  registerCustomElementNode(elementName, () => new NativeElementNode(elementName, resolver(), meta));
+export function registerNativeElement(elementName: string, resolver: () => typeof View, meta: ComponentMeta = null) {
+  registerElement(elementName, () => new NativeElementNode(elementName, resolver(), meta));
 }
 
 
 export function registerNativeElements() {
-  registerElement(
+  registerNativeElement(
     'ActionBar',
     () => require('tns-core-modules/ui/action-bar').ActionBar
   )
 
-  registerElement(
+  registerNativeElement(
     'ActionItem',
     () => require('tns-core-modules/ui/action-bar').ActionItem
   )
 
-
-  registerElement(
-    'ListView',
-    () => require('tns-core-modules/ui/list-view').ListView
-  )
-
-  registerElement(
+  registerNativeElement(
     'NavigationButton',
     () => require('tns-core-modules/ui/action-bar').NavigationButton
   )
 
-  registerElement(
+  registerNativeElement(
     'TabView',
     () => require('tns-core-modules/ui/tab-view').TabView
   )
 
-  registerElement(
+  registerNativeElement(
     'TabViewItem',
     () => require('tns-core-modules/ui/tab-view').TabViewItem
   )
@@ -45,124 +40,118 @@ export function registerNativeElements() {
   // NS components which uses the automatic registerElement Vue wrapper
   // as they do not need any special logic
 
-  registerElement('Label', () => require('tns-core-modules/ui/label').Label)
+  registerNativeElement('Label', () => require('tns-core-modules/ui/label').Label)
 
-  registerElement(
+  registerNativeElement(
     'DatePicker',
     () => require('tns-core-modules/ui/date-picker').DatePicker,
   )
 
-  registerElement(
+  registerNativeElement(
     'AbsoluteLayout',
     () => require('tns-core-modules/ui/layouts/absolute-layout').AbsoluteLayout
   )
-  registerElement(
+  registerNativeElement(
     'ActivityIndicator',
     () => require('tns-core-modules/ui/activity-indicator').ActivityIndicator
   )
-  registerElement('Border', () => require('tns-core-modules/ui/border').Border)
-  registerElement('Button', () => require('tns-core-modules/ui/button').Button)
-  registerElement(
+  registerNativeElement('Border', () => require('tns-core-modules/ui/border').Border)
+  registerNativeElement('Button', () => require('tns-core-modules/ui/button').Button)
+  registerNativeElement(
     'ContentView',
     () => require('tns-core-modules/ui/content-view').ContentView
   )
-  registerElement(
+  registerNativeElement(
     'DockLayout',
     () => require('tns-core-modules/ui/layouts/dock-layout').DockLayout
   )
-  registerElement(
+  registerNativeElement(
     'GridLayout',
     () => require('tns-core-modules/ui/layouts/grid-layout').GridLayout
   )
-  registerElement(
+  registerNativeElement(
     'HtmlView',
     () => require('tns-core-modules/ui/html-view').HtmlView
   )
-  registerElement('Image', () => require('tns-core-modules/ui/image').Image)
-  registerElement(
+  registerNativeElement('Image', () => require('tns-core-modules/ui/image').Image)
+  registerNativeElement(
     'ListPicker',
     () => require('tns-core-modules/ui/list-picker').ListPicker,
   )
 
-  registerElement(
+  registerNativeElement(
     'Placeholder',
     () => require('tns-core-modules/ui/placeholder').Placeholder
   )
-  registerElement(
+  registerNativeElement(
     'Progress',
     () => require('tns-core-modules/ui/progress').Progress,
   )
-  registerElement(
+  registerNativeElement(
     'ProxyViewContainer',
     () => require('tns-core-modules/ui/proxy-view-container').ProxyViewContainer
   )
   // registerElement(
   //   'Repeater',
   //   () => require('tns-core-modules/ui/repeater').Repeater
   // )
-  registerElement(
+  registerNativeElement(
     'ScrollView',
     () => require('tns-core-modules/ui/scroll-view').ScrollView
   )
-  registerElement(
+  registerNativeElement(
     'SearchBar',
     () => require('tns-core-modules/ui/search-bar').SearchBar,
   )
-  registerElement(
+  registerNativeElement(
     'SegmentedBar',
     () => require('tns-core-modules/ui/segmented-bar').SegmentedBar,
   )
-  registerElement(
+  registerNativeElement(
     'SegmentedBarItem',
     () => require('tns-core-modules/ui/segmented-bar').SegmentedBarItem
   )
-  registerElement('Slider', () => require('tns-core-modules/ui/slider').Slider)
-  registerElement(
+  registerNativeElement('Slider', () => require('tns-core-modules/ui/slider').Slider)
+  registerNativeElement(
     'StackLayout',
     () => require('tns-core-modules/ui/layouts/stack-layout').StackLayout
   )
-  registerElement(
+  registerNativeElement(
     'FlexboxLayout',
     () => require('tns-core-modules/ui/layouts/flexbox-layout').FlexboxLayout
   )
-  registerElement('Switch', () => require('tns-core-modules/ui/switch').Switch)
+  registerNativeElement('Switch', () => require('tns-core-modules/ui/switch').Switch)
 
-  registerElement(
+  registerNativeElement(
     'TextField',
     () => require('tns-core-modules/ui/text-field').TextField,
 
   )
-  registerElement(
+  registerNativeElement(
     'TextView',
     () => require('tns-core-modules/ui/text-view').TextView,
 
   )
-  registerElement(
+  registerNativeElement(
     'TimePicker',
     () => require('tns-core-modules/ui/time-picker').TimePicker,
 
   )
-  registerElement(
+  registerNativeElement(
     'WebView',
     () => require('tns-core-modules/ui/web-view').WebView
   )
-  registerElement(
+  registerNativeElement(
     'WrapLayout',
     () => require('tns-core-modules/ui/layouts/wrap-layout').WrapLayout
   )
-  registerElement(
+  registerNativeElement(
     'FormattedString',
     () => require('tns-core-modules/text/formatted-string').FormattedString
   )
-  registerElement('Span', () => require('tns-core-modules/text/span').Span)
-
-  /*
-   registerElement('Frame', () => require('tns-core-modules/ui/frame').Frame, {
-     insertChild() {
-       //dont bother
-     }
-   })
- */
-  registerCustomElementNode('Frame', () => new FrameElement())
-  registerCustomElementNode('Page', () => new PageElement())
+  registerNativeElement('Span', () => require('tns-core-modules/text/span').Span)
+
+  registerElement('Frame', () => new FrameElement())
+  registerElement('Page', () => new PageElement())
+  registerElement('ListView', () => new ListViewElement())
 }

src/dom/navigation.ts

@@ -1,8 +1,8 @@
 import { topmost, NavigationTransition, Frame, getFrameById, Page, BackstackEntry, ViewBase } from "tns-core-modules/ui/frame/frame";
-import FrameElement from "./FrameElement";
+import FrameElement from "./native/FrameElement";
 import { createElement } from "./basicdom";
-import PageElement from "./PageElement";
-import NativeElementNode from "./NativeElementNode";
+import PageElement from "./native/PageElement";
+import NativeElementNode from "./native/NativeElementNode";
 
 export type FrameSpec = Frame | FrameElement | string
 export type PageSpec = typeof SvelteComponent;