How to use svelte-native - 10 common examples

/*
In NativeScript, the app.ts file is the entry point to your application.
You can use this file to perform app-level initialization, but the primary
purpose of the file is to pass control to the app’s first module.
*/

import { svelteNative, DomTraceCategory } from "svelte-native";
import { registerElement, NativeElementNode } from 'svelte-native/dom'
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'

import * as trace from "tns-core-modules/trace"

// register plugins
registerElement('radSideDrawer', () => new NativeElementNode('radSideDrawer', RadSideDrawer))


//enable trace
//trace.enable();
trace.addCategories(DomTraceCategory)


import App from  "./App.svelte";
svelteNative(App, {});

private loadView(viewType: string): View {
        if (viewType.toLowerCase() == ListViewViewType.ItemView.toLowerCase() && typeof this.nativeElement.itemTemplates == "object" ) {
            let keyedTemplate = this.nativeElement.itemTemplates.find(t => t.key == "default");
            if (keyedTemplate) {
                return keyedTemplate.createView()
            }
        }

        let componentClass = this.getComponentForView(viewType);
        if (!componentClass) return null;
        logger.debug("creating view for " + viewType);

        let wrapper = createElement('StackLayout') as NativeViewElementNode

import { registerElement, NativeElementNode } from 'svelte-native/dom'
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'

import * as trace from "tns-core-modules/trace"

// register plugins
registerElement('radSideDrawer', () => new NativeElementNode('radSideDrawer', RadSideDrawer))


//enable trace
//trace.enable();
trace.addCategories(DomTraceCategory)


import App from  "./App.svelte";
svelteNative(App, {});

let _view = view as any;
        if (!_view.__SvelteComponent__) {
            if (_view.__SvelteComponentBuilder__) {
                logger.debug("mounting to view "+view+" with props "+Object.keys(props).join(","));
                _view.__SvelteComponentBuilder__(props);
                _view.__SvelteComponentBuilder__ = null;
                return;
            }
        }

        if (_view.__SvelteComponent__) {
            componentInstance = _view.__SvelteComponent__
        }
    
        if (componentInstance) {
            logger.debug("updating view "+view+" with props "+Object.keys(props).join(","));
            componentInstance.$set(props)
        } else {
            console.error("Couldn't find component for ", view);
        }
    }

private updateViewWithProps(view: View, props: any) {
        let componentInstance:SvelteComponent;
        let _view = view as any;
        if (!_view.__SvelteComponent__) {
            if (_view.__SvelteComponentBuilder__) {
                logger.debug("mounting to view "+view+" with props "+Object.keys(props).join(","));
                _view.__SvelteComponentBuilder__(props);
                _view.__SvelteComponentBuilder__ = null;
                return;
            }
        }

        if (_view.__SvelteComponent__) {
            componentInstance = _view.__SvelteComponent__
        }
    
        if (componentInstance) {
            logger.debug("updating view "+view+" with props "+Object.keys(props).join(","));
            componentInstance.$set(props)
        } else {
            console.error("Couldn't find component for ", view);
        }

constructor() {
        super('radAutoCompleteTextView',  RadAutoCompleteTextView, null, {
            "closeButtonImageSrc": PropType.Value,
            "completionMode": PropType.Value,
            "displayMode": PropType.Value,
            "filteredItems": PropType.Value,
            "itemViewLoader": PropType.Value,
            "layoutMode": PropType.Value,
            "loadSuggestionsAsync": PropType.Value,
            "minimumCharactersToSearch": PropType.Value,
            "noResultsText": PropType.Value,
            "readOnly": PropType.Value,
            "selectedTokens": PropType.Value,
            "showCloseButton": PropType.Value,
            "suggestMode": PropType.Value,
            "suggestionView": PropType.Value,
            "text": PropType.Value,
            "items": PropType.Value,
            "hint": PropType.Value
        });
        this.nativeElement.itemViewLoader = (viewType: string) => this.loadView(viewType)
        this.nativeView.on(RadAutoCompleteTextView.itemLoadingEvent, (args) => { this.updateListItem(args as AutocompleteItemEventData) });

constructor() {
        super('radAutoCompleteTextView',  RadAutoCompleteTextView, null, {
            "closeButtonImageSrc": PropType.Value,
            "completionMode": PropType.Value,
            "displayMode": PropType.Value,
            "filteredItems": PropType.Value,
            "itemViewLoader": PropType.Value,
            "layoutMode": PropType.Value,
            "loadSuggestionsAsync": PropType.Value,
            "minimumCharactersToSearch": PropType.Value,
            "noResultsText": PropType.Value,
            "readOnly": PropType.Value,
            "selectedTokens": PropType.Value,
            "showCloseButton": PropType.Value,
            "suggestMode": PropType.Value,
            "suggestionView": PropType.Value,
            "text": PropType.Value,
            "items": PropType.Value,
            "hint": PropType.Value
        });
        this.nativeElement.itemViewLoader = (viewType: string) => this.loadView(viewType)
        this.nativeView.on(RadAutoCompleteTextView.itemLoadingEvent, (args) => { this.updateListItem(args as AutocompleteItemEventData) });

"closeButtonImageSrc": PropType.Value,
            "completionMode": PropType.Value,
            "displayMode": PropType.Value,
            "filteredItems": PropType.Value,
            "itemViewLoader": PropType.Value,
            "layoutMode": PropType.Value,
            "loadSuggestionsAsync": PropType.Value,
            "minimumCharactersToSearch": PropType.Value,
            "noResultsText": PropType.Value,
            "readOnly": PropType.Value,
            "selectedTokens": PropType.Value,
            "showCloseButton": PropType.Value,
            "suggestMode": PropType.Value,
            "suggestionView": PropType.Value,
            "text": PropType.Value,
            "items": PropType.Value,
            "hint": PropType.Value
        });
        this.nativeElement.itemViewLoader = (viewType: string) => this.loadView(viewType)
        this.nativeView.on(RadAutoCompleteTextView.itemLoadingEvent, (args) => { this.updateListItem(args as AutocompleteItemEventData) });

    }

constructor() {
        super('radAutoCompleteTextView',  RadAutoCompleteTextView, null, {
            "closeButtonImageSrc": PropType.Value,
            "completionMode": PropType.Value,
            "displayMode": PropType.Value,
            "filteredItems": PropType.Value,
            "itemViewLoader": PropType.Value,
            "layoutMode": PropType.Value,
            "loadSuggestionsAsync": PropType.Value,
            "minimumCharactersToSearch": PropType.Value,
            "noResultsText": PropType.Value,
            "readOnly": PropType.Value,
            "selectedTokens": PropType.Value,
            "showCloseButton": PropType.Value,
            "suggestMode": PropType.Value,
            "suggestionView": PropType.Value,
            "text": PropType.Value,
            "items": PropType.Value,
            "hint": PropType.Value
        });
        this.nativeElement.itemViewLoader = (viewType: string) => this.loadView(viewType)
        this.nativeView.on(RadAutoCompleteTextView.itemLoadingEvent, (args) => { this.updateListItem(args as AutocompleteItemEventData) });

    }

constructor() {
        super('radAutoCompleteTextView',  RadAutoCompleteTextView, null, {
            "closeButtonImageSrc": PropType.Value,
            "completionMode": PropType.Value,
            "displayMode": PropType.Value,
            "filteredItems": PropType.Value,
            "itemViewLoader": PropType.Value,
            "layoutMode": PropType.Value,
            "loadSuggestionsAsync": PropType.Value,
            "minimumCharactersToSearch": PropType.Value,
            "noResultsText": PropType.Value,
            "readOnly": PropType.Value,
            "selectedTokens": PropType.Value,
            "showCloseButton": PropType.Value,
            "suggestMode": PropType.Value,
            "suggestionView": PropType.Value,
            "text": PropType.Value,
            "items": PropType.Value,
            "hint": PropType.Value
        });
        this.nativeElement.itemViewLoader = (viewType: string) => this.loadView(viewType)
        this.nativeView.on(RadAutoCompleteTextView.itemLoadingEvent, (args) => { this.updateListItem(args as AutocompleteItemEventData) });

    }