How to use svelte-native - 10 common examples

To help you get started, we’ve selected a few svelte-native examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github halfnelson / svelte-native-realworld / app / app.ts View on Github external
/*
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, {});
github halfnelson / svelte-native-nativescript-ui / src / listview / index.ts View on Github external
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<View>;
        wrapper.setStyle("padding", 0)
        wrapper.setStyle("margin", 0)
        let nativeEl = wrapper.nativeView;

        let builder = (props: any) => {
            let componentInstance = new componentClass({
                target: wrapper,
                props: props
            });
            (nativeEl as any).__SvelteComponent__ = componentInstance;
        }
        //for certain view types we like to delay until we have the data
        if (viewType.toLowerCase() == ListViewViewType.ItemView.toLowerCase()
            || viewType.toLowerCase() == ListViewViewType.GroupView.toLowerCase()
        //    || viewType.toLowerCase() == ListViewViewType.ItemSwipeView.toLowerCase() doesn't work at the moment
        ) {
github halfnelson / svelte-native-realworld / app / app.ts View on Github external
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, {});
github halfnelson / svelte-native-nativescript-ui / src / listview / index.ts View on Github external
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);
        }
    }
github halfnelson / svelte-native-nativescript-ui / src / listview / index.ts View on Github external
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);
        }
github halfnelson / svelte-native-nativescript-ui / src / autocomplete / index.ts View on Github external
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) });
github halfnelson / svelte-native-nativescript-ui / src / autocomplete / index.ts View on Github external
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) });
github halfnelson / svelte-native-nativescript-ui / src / autocomplete / index.ts View on Github external
"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) });

    }
github halfnelson / svelte-native-nativescript-ui / src / autocomplete / index.ts View on Github external
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) });

    }
github halfnelson / svelte-native-nativescript-ui / src / autocomplete / index.ts View on Github external
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) });

    }