halfnelson / svelte-native Goto Github PK

View Code? Open in Web Editor NEW

1.7K 28.0 75.0 8.57 MB

Svelte controlling native components via Nativescript

License: MIT License

JavaScript 33.23% TypeScript 35.26% HTML 0.51% CSS 4.40% Batchfile 0.02% Dockerfile 0.06% Svelte 26.52%

svelte-native's Introduction

Svelte Native

Create Mobile applications using native widgets via Svelte and NativeScript.

See https://svelte-native.technology for docs and tutorials

Features

Svelte-Native includes Svelte specific integrations such as

The ability to use svelte components to create native applications on top of NativeScript core
Svelte specific navigation and modals eg navigate({ page: MySvelteComponent })
Integration with svelte's transistions eg <label transition:fade="{duration: 2000}">
Integration with sveltes scoped styles
Complete coverage of the Nativescript core UI modules
Uses unmodified Svelte and Nativescript modules

Work In Progress

While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

At least 1 emoji in readme.md 👍
More Tests 😳 #54

Installation

You can get started developing with this using the latest template

$ npm install -g nativescript
$ tns create myapp --template @nativescript/template-blank-svelte

A fresh Svelte Native app will be found in the myapp folder

Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

Usage

App.svelte

<page>
    <actionBar title="Svelte Native"></actionBar>
    <stackLayout>
        <label text={msg}></label>
        <button text="Change" on:tap="{toggle}"></button>
    </stackLayout>
</page>

<script>
  export let msg = 'Hello World!'
  const toggle = () => {
      msg = "Hi from svelte"
  }
</script>

Main.ts

import App from './components/App.svelte';

import { svelteNative } from 'svelte-native'

svelteNative(App, {msg: "Hi from launcher"});

Examples

Svelte Native HackerNews

Simple HackerNews client in Svelte Native.

See https://github.com/halfnelson/svelte-native-hackernews for the repo.

Svelte Native Grocery

Grocery app example in Svelte Native.

See https://github.com/halfnelson/svelte-native-grocery for the repo.

Svelte Native Realworld

Realworld implementation app in Svelte Native.

See https://github.com/halfnelson/svelte-native-realworld for the repo.

Credits

The DOM implementation is based on the one from Nativescript-Vue. Thanks! The API Docs were ported from the Nativescript-Vue Too The Site Design is from SvelteJS

svelte-native's People

Contributors

Stargazers

Watchers

Forkers

cfirmo33 rahimnathwani renesugar rixo ptzagk benbot haliltaskit rdlauer thonymg adrienbaron erudition vakrilov david-pershouse vehmloewff forkkit changeweb knobo hmmhmmhm jaksim zombiemachines hygor kokizzu farfromrefug matthieugicquel cybernetics soullivaneuh cramrov jansenicus hoangpq lgs dmgolembiowski millie-david mrsaeeddev k4ng-fork moh-affan fullstockdev 78nine unmellow crisfole ianmccue tristanfi jijuta shashank-sachan gabin-solomandimby onixus74 catchabus nostrorom uzarsalan linecode bearcanrun zone-frontend kayodebristol phorvicheka-svelte meplay gholi-dev muhammedalysawalhy prabhat-git-99 seanstrom dummdidumm rigor789 bytesnz khaledbasiony hetrickd voidarchive ppalonebot salisshuaibu11 c150pilot vallemar bsjung allisonwilliancandido 1muhammadyahya vestr-at-work danawoodman pouchcms a24ibrah

svelte-native's Issues

How to implement custom component

Children elements rendered at wrong position in parent

Here's a minimal reproduction case (run in the template app):

App.svelte

<script>
  import {onMount} from 'svelte'
  import Child from './Child.svelte'

  let stack
  let last

  onMount(() => {
    new Child({
      target: stack,
      anchor: last,
    })
  })
</script>

<page class="page">
  <stackLayout bind:this={stack} class="p-20">
    <label text="First" />
    <label bind:this={last} text="Last" />
  </stackLayout>
</page>

Child.svelte

                                          <= empty line
<label class="h2" text="Child-A" />
<label class="h2" text="Child-B" />
                                          <= empty line

There is a blank line (actually empty) at the beginning and end of the file, making it 4 LOC. Maybe those blank lines plays a part in the issue.

Result

It renders in this order:

First
Child-A
Last
Child-B

Expected

First
Child-A
Child-B
Last

Debugging

I've tracked my bug down to this line. The index in childNodes does not match the same position in the NS view here, because childNodes contains some text nodes for whitespaces that are absent on the NS side.

ListView component

The nativescript listview is a bit clunky to use with svelte and requires a ref and AsComponent wrapper:

<listView class="list-group" items={dones} on:itemTap="{onDoneTap}" style="height:75%" separatorColor="transparent" use:componentAsListItem="{() => completedItemTemplate}">
   <AsComponent bind:component={completedItemTemplate} let:item>
       <label text="{item.name}" class="completed-task" textWrap="true"  />
   </AsComponent>
</listView>

Ideally we could import a svelte specific one that would allow the above to become:

<ListView class="list-group" items={dones} on:itemTap="{onDoneTap}" style="height:75%" separatorColor="transparent" let:item>
       <label text="{item.name}" class="completed-task" textWrap="true"  />
</ListView>

Page fails if no viewController

{#if firebaseReady}
	{#if loggedIn}
		<page xmlns="tns">
			<label text="logged in"/>
		</page>
	{:else}
		<page xmlns="tns">
			<label text="not logged in"/>
		</page>
	{/if}
{:else}
	<Loading/>
{/if}

<page xmlns="tns">
	<label text="firebase is surely loading loading loading"/>
</page>

I actually think this is expected behavior, but it's probably worth a discussion. I get

** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: Required page does not have a viewController created.

From the above.

[docs] about the v-model references

The v-model attribute appears sometimes in the docs. This attribute is really used or it's just a mistake?

Replace console.log with Nativescript Trace

Console logs can be very verbose. Using Nativescript trace should clean it up for people who don't care about the debug data

Possible CLI 6.0 incompatibility with tutorial?

Just running through the tutorial now. After cloning the tutorial repo, I'm forced to run tns migrate as I'm on 6.0 of the {N} CLI. After I tns run I get the following error:

ERROR in ./App.svelte 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <page class="page">
|   <actionBar title="My Tasks" class="action-bar" />
| 
 @ ./app.ts 44:0-31 45:13-16

Maybe the svelte-loader isn't working properly?

Support for Nativescript professional UI

Ideally without having to make a svelte native package for each NativeScript UI package

Does this project use a webview or does it use real native components?

Can't create ListView

Hi, so far I've been unable to get the ListView component to work. To replicate, I cloned down the template repo, ran npm install, and changed App.svelte to this:

<page class="page">
    <actionBar title="My App" icon="" class="action-bar">
    </actionBar>
    <listView items="{items}">
        <template let:item>
            <label text="{item}" />
        </template>
    </listView>
</page>

<script>
    let items = [
        'asdf' ,
        'awogw powineg a' ,
        'awo;egin ;ae' ,
        'ah984ap94 wag'
    ]
</script>

With this code I get an error saying "'Template' is not defined". I don't get that error if I change Template to template, however i instead get this error:

System.err: TypeError: Cannot read property 'appendChild' of undefined
System.err: File: "<unknown>, line: 1, column: 265

Is there something I'm missing?

Document usage of nativescript plugins

We should document native plugin usage like here https://github.com/halfnelson/svelte-native-grocery/blob/4e5accdae6accbc53b67db938fe96f7c934ba37d/app/app.ts#L12

Certificate errors on website

https://svelte-native.technology/

Currently getting the "connection not private" warning before the page loads in Chrome and Firefox.

New contribution suggestion thread

Hey @halfnelson, If you could put together a checklist roadmap of sorts and point out where in the code someone would have to poke around to get some items checked off it might do a lot for potential contributors.

I know it'd help me out 😅

I'd hate to have you work on this basically solo.

Layouts not showing up correctly on nested components

This works fine:

<page xmlns="tns">
	{#if loggedIn}
		<label text="logged in"/>
	{:else}
		<label text="logged out"/>
	{/if}
</page>

But if I make them components and put layouts around them, like so:

<page xmlns="tns">
	{#if loggedIn}
		<LoggedIn/>
	{:else}
		<label text="logged out"/>
	{/if}
</page>

<flexboxLayout>
	<stackLayout>
		<label text="why doesn't this logged in label show up?"/>
	</stackLayout>
</flexboxLayout>

I don't see anything on the page.

Hunch: Svelte scoped CSS is somehow mangling things? Dunno/shrug.

Hot reload not working

When I run the svelte-native-template with tns run android --bundle and I update the source, the app is reinitialized.

class: directive broken

Svelte uses

 function toggle_class(element, name, toggle) {
	element.classList[toggle ? 'add' : 'remove'](name);
}

so we need to provide a classList object for each element.

Tutorial Link on Homepage points to Localhost

A relative a href link pointing to the tutorial is missing the leading / so it ends up pointing to localhost:3000/tutorial. Simply adding the / should make it work as intended.

native elements style

I was studying the source code of svelte-native-grocery and I saw that I must write <image> but on CSS I need to write Image. Is there any way we can adjust this? It's very confusing to have this difference in code.

How to make this compatible with Svelte Material UI

Hi,
I have been dealing some days with this already but i did not manage to use the components from https://github.com/hperrin/svelte-material-ui

despite the fact that is a pretty straight forward project, i couldn't solve an issue with the svelte-loader.
Particularly this one:
Error: Function called outside component initialization

Mainly coming from Svelte function get_current_component()
Frame: function:'get_current_component', file:'file:///node_modules/svelte/internal/index.js:532:0

Is there any way I can solve this issue or that svelte native supports this library?

Example app using svelte store with persistence

I used your sample app as the basis for a demo showing how to persist storage (even after the app quits).

Sharing it here in case you want to link to it or want me to submit a PR adding it as a second demo app.

how to import plugin from https://market.nativescript.org/

Svelte + native rocks ... :)

Is there easy way to import UI plugin (MaskedTextField for example ) from https://market.nativescript.org/
and use it in svelte markup as component?

Thanks

Navigation Support

Navigation requires sending navigate events to a frame and providing the frame with a NativeView to navigate towards. We should be able to expose this via a module or method that component authors can import eg import { navigateTo, navigateBack } from 'svelte-native'

We can use Nativescript-vue's docs as inspiration
https://nativescript-vue.org/en/docs/routing/manual-routing/

Implement listitem selector

https://medium.com/@alexander.vakrilov/faster-nativescript-listview-with-multiple-item-templates-8f903a32e48f

SvelteNativeDom: Navigate could not find frame with id

error on

navigate({
page: Tabs,
frame:"firstFrame"
})

not find frame .

Sapper like file based routing

Would be good to write a file based routing feature that supported code splitting and lazy loading like sapper

[Not an actual issue] Contact info?

Hey @halfnelson! This is Rob from the NativeScript Developer Relations team. We'd love to chat with you about this project as it's a really exciting addition to the {N} ecosystem. Can you drop me a note at [email protected]?

Remove hard coded top level Frame

Svelte native uses a top level implicit Frame. It requires this due to how the css is managed for the application. It was pointed out that there are some undocumented css methods that might be used to remove this requirement
https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/styling/style-scope.ts#L316

Note "Keep in mind that these methods (if I remember correctly) don't automatically refresh the styling, So you may need to call _onCssStateChange on the root view/the view you're changing."

site design suggestion

Break all feature titles in 2 lines in medium/large screens (notebooks and large screen desktops)

suggestion:

current:

A Nativescript app template for use with `tns create --template`

The Nativescript CLI can create applications using a template. Instead of having the user using degit, give them the option to use one of these templates. An example template is here
https://github.com/shirakaba/tns-template-blank-react
They are published as a npm package.

Allow installation via hooks into nativescript project

tns plugin install does some magic we can use to make setup easier (and remove need for template app)
We can also add a hook to the before prepare step that compiles the svelte files to their own bundle, thus bypassing the need to run with --bundle all the time

Migrate site to SiteKit

The Svelte Native site (in ./docs_src) was developed in the early days of Svelte 3 and used a clone of the site so that it may fit in with the other Svelte projects. The main shared components have since been extracted by Rich Harris into Site-Kit. We should change our site to use Site-Kit where possible, and the latest non-alpha version of Sapper :)

Examples page for the docs

We should add an examples page that shows off open source applications made with Svelte Native.
It would contain items such as

It should encourage users to contribute a PR with a link to their app

possible correction for quick start guide

It says degit halfnelson/svelte-native-template myapp.
Shouldn't that start with npx?

`class:` directive is removing base class

Repro:
https://svelte-native.technology/repl?version=3.0.0-beta.28&gist=19761da69b687169091e528980a537ce

A preprocessor

It would be good to have a pre-processor compatible with svelte's pre-process feature that could automatically add xmlns="tns" to the root elements of each svelte component. It could also act as a linter to pick up typos made to nativescript tag names

Error using `onMount` in App.svelte

Hi, I'm getting a strange error whenever I add an onMount callback to my main svelte component. I'm able to duplicate this both in my own app and with a newly-cloned template just by adding the onMount function. I've forked the template repo to demonstrate: https://github.com/PlaidPhantom/svelte-native-template. All I need to do to get the error is clone that repo, run npm install, and run tns run android.

tns --version returns 6.1.2.

I haven't ruled out user error; I'm new to most of this tech stack, but from what I've read so far I think this should work. Also, I'm pretty sure onMount worked when i was experimenting with Svelte Native a few months ago.

Here's the error I get when i run my app on the device:

An uncaught Exception occurred on "main" thread.
Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
Error: Function called outside component initialization
File: (file:///data/data/technology.sveltenative.template/files/app/vendor.js:3300:4)

StackTrace: 
	get_current_component(file:///data/data/technology.sveltenative.template/files/app/vendor.js:5537:15)
	at onMount(file:///data/data/technology.sveltenative.template/files/app/vendor.js:5544:5)
	at instance(file:///data/data/technology.sveltenative.template/files/app/bundle.js:134:59)
	at init(file:///data/data/technology.sveltenative.template/files/app/vendor.js:7999:11)
	at App(file:///data/data/technology.sveltenative.template/files/app/bundle.js:150:63)
	at createProxiedComponent(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3632:8)
	at ProxyComponent(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3276:86)
	at Proxy<App>(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3338:5)
	at resolveComponentElement(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4755:24)
	at navigate(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4768:37)
	at svelteNative(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4913:28)
	at (file:///data/data/technology.sveltenative.template/files/app/bundle.js:252:67)
	at ./app.ts(file:///data/data/technology.sveltenative.template/files/app/bundle.js:265:30)
	at __webpack_require__(file:///data/data/technology.sveltenative.template/files/app/runtime.js:751:30)
	at checkDeferredModules(file:///data/data/technology.sveltenative.template/files/app/runtime.js:44:23)
	at webpackJsonpCallback(file:///data/data/technology.sveltenative.template/files/app/runtime.js:31:19)
	at (file:///data/data/technology.sveltenative.template/files/app/bundle.js:2:57)
	at require(:1:266)


Error: Function called outside component initialization

StackTrace:
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
Error: Function called outside component initialization
File: (file:///data/data/technology.sveltenative.template/files/app/vendor.js:3300:4)

StackTrace: 
	get_current_component(file:///data/data/technology.sveltenative.template/files/app/vendor.js:5537:15)
	at onMount(file:///data/data/technology.sveltenative.template/files/app/vendor.js:5544:5)
	at instance(file:///data/data/technology.sveltenative.template/files/app/bundle.js:134:59)
	at init(file:///data/data/technology.sveltenative.template/files/app/vendor.js:7999:11)
	at App(file:///data/data/technology.sveltenative.template/files/app/bundle.js:150:63)
	at createProxiedComponent(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3632:8)
	at ProxyComponent(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3276:86)
	at Proxy<App>(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3338:5)
	at resolveComponentElement(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4755:24)
	at navigate(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4768:37)
	at svelteNative(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4913:28)
	at (file:///data/data/technology.sveltenative.template/files/app/bundle.js:252:67)
	at ./app.ts(file:///data/data/technology.sveltenative.template/files/app/bundle.js:265:30)
	at __webpack_require__(file:///data/data/technology.sveltenative.template/files/app/runtime.js:751:30)
	at checkDeferredModules(file:///data/data/technology.sveltenative.template/files/app/runtime.js:44:23)
	at webpackJsonpCallback(file:///data/data/technology.sveltenative.template/files/app/runtime.js:31:19)
	at (file:///data/data/technology.sveltenative.template/files/app/bundle.js:2:57)
	at require(:1:266)


Error: Function called outside component initialization
	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5925)
	at android.app.ActivityThread.access$1100(ActivityThread.java:200)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1656)
	at android.os.Handler.dispatchMessage(Handler.java:106)
	at android.os.Looper.loop(Looper.java:193)
	at android.app.ActivityThread.main(ActivityThread.java:6718)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: com.tns.NativeScriptException: Error calling module function 
Error: Function called outside component initialization
File: (file:///data/data/technology.sveltenative.template/files/app/vendor.js:3300:4)

StackTrace: 
	get_current_component(file:///data/data/technology.sveltenative.template/files/app/vendor.js:5537:15)
	at onMount(file:///data/data/technology.sveltenative.template/files/app/vendor.js:5544:5)
	at instance(file:///data/data/technology.sveltenative.template/files/app/bundle.js:134:59)
	at init(file:///data/data/technology.sveltenative.template/files/app/vendor.js:7999:11)
	at App(file:///data/data/technology.sveltenative.template/files/app/bundle.js:150:63)
	at createProxiedComponent(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3632:8)
	at ProxyComponent(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3276:86)
	at Proxy<App>(file:///data/data/technology.sveltenative.template/files/app/vendor.js:3338:5)
	at resolveComponentElement(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4755:24)
	at navigate(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4768:37)
	at svelteNative(file:///data/data/technology.sveltenative.template/files/app/vendor.js:4913:28)
	at (file:///data/data/technology.sveltenative.template/files/app/bundle.js:252:67)
	at ./app.ts(file:///data/data/technology.sveltenative.template/files/app/bundle.js:265:30)
	at __webpack_require__(file:///data/data/technology.sveltenative.template/files/app/runtime.js:751:30)
	at checkDeferredModules(file:///data/data/technology.sveltenative.template/files/app/runtime.js:44:23)
	at webpackJsonpCallback(file:///data/data/technology.sveltenative.template/files/app/runtime.js:31:19)
	at (file:///data/data/technology.sveltenative.template/files/app/bundle.js:2:57)
	at require(:1:266)


Error: Function called outside component initialization
	at com.tns.Runtime.runModule(Native Method)
	at com.tns.Runtime.runModule(Runtime.java:662)
	at com.tns.Runtime.run(Runtime.java:654)
	at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
	at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5920)
	... 8 more

Can't seem to get transitions working.

I've been trying to get a fade in transition working on the todo app example, but I can only seem to get them working through css and not the svelte transition:fade.

There aren't any errors or anything, just nothing happens.
I'd be glad to look into this myself if I could get a nudge in the right direction ;)

Here's the component code:

<page class="page">
	  <actionBar title="My Tasks" class="action-bar" />

	  <tabView height="100%" androidTabsPosition="bottom">

	      <tabViewItem title="To Do" textWrap="true">
            <stackLayout orientation="vertical" width="100%" height="100%">
	              <gridLayout columns="2*,*" rows="*" width="100%" height="25%">
		                <!-- Configures the text field and ensures that pressing Return on the keyboard
			                   produces the same result as tapping the button. -->
		                <textField col="0" row="0" bind:text="{textFieldValue}" hint="Type new task..." editable="true"
			                              on:returnPress="{onButtonTap}" />
		                <button in:fade col="1" row="0" text="Add task" on:tap="{onButtonTap}" />
	              </gridLayout>

	              <listView class="list-group" items="{todos}" on:itemTap="{onItemTap}" style="height:75%">
		                <Template let:item>
			                  <label transition:fade="{{ duration: 5000 }}" text="{item.name}" class="list-group-item-heading fade-in" textWrap="true" />
		                </Template>
	              </listView>
            </stackLayout>
	      </tabViewItem>

	      <tabViewItem title="Completed">
		        <label text="This tab will list completed tasks for tracking." textWrap="true" />
	      </tabViewItem>

	  </tabView>
</page>

<script>
 import { onMount, afterUpdate } from 'svelte';
 import { Template } from 'svelte-native/components';
 import { fade } from 'svelte-native/transitions';
 let todos = [];
 let textFieldValue = "";

 const onItemTap = args => {
     console.log('Item with index: ' + args.index + ' tapped');
 };

 const onButtonTap = async () => {
     if (textFieldValue === "") return;
     console.log('New task added: ' + textFieldValue);
     todos = [{ name: textFieldValue }, ...todos];
     textFieldValue = "";
 }

</script>

listView on:itemTap not sending item with event

When using a listView component, the event.item does not seem to be passed on:itemTap.

<script>
klasses = [ 
	{
		id: 1,
		name: "One"
	},
	{
		id: 2,
		name: "Two"
	}
]

function onItemTap(event) {
  console.log(event.index) // 1 (proper index)
  console.log(event.item) // undefined
}
</script>

Here is the relevant part of the template.

  <listView items="{klasses}" separatorColor="transparent" on:itemTap="{onItemTap}">
    <Template let:item>
      <label text="{item.name}" />
    </Template>
  </listView>

Tests would be nice

As always when proof of concept code becomes real code, you need to retrofit some tests. Work out the best way to do this. Can nativescript's unit testing be used for some UI stuff or do we need to go nativescript's appium route?

Svelte interface to Modal

NativeScript has modals, we probably want to launch a svelte component as a modal

Fatal error

After scanning the QR code in the REPL, I got the following error:

2019-09-18 18:27:13.592 nsplaydev[1306:411826] ***** Fatal JavaScript exception - application has been terminated. ***** 2019-09-18 18:27:13.592 nsplaydev[1306:411826] Native stack trace: 1 0x1018b72fc NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x1018fc2a4 -[TNSRuntime executeModule:referredBy:] 3 0x1028a21f8 -[UIApplication(PlayLiveSync) swizzled_executeModule:] 4 0x100fbb420 5 0x20405abb4 <redacted> 2019-09-18 18:27:13.593 nsplaydev[1306:411826] JavaScript stack trace: 2019-09-18 18:27:13.593 nsplaydev[1306:411826] dispatch_dev(file:///app/app.js:1331:27) at create_fragment(file:///app/app.js:1446:14) at init(file:///app/app.js:1294:34) at App(file:///app/app.js:1480:7) at resolveComponentElement(file:///app/app.js:999:36) at navigate(file:///app/app.js:1012:60) at svelteNative(file:///app/app.js:1085:32) at start(file:///app/app.js:1486:17) at anonymous(file:///app/main.js:18:10) at evaluate([native code]) at moduleEvaluation([native code]) at promiseReactionJob([native code]) 2019-09-18 18:27:13.593 nsplaydev[1306:411826] JavaScript error: file:///app/app.js:1331:27: JS ERROR TypeError: document.dispatchEvent is not a function. (In 'document.dispatchEvent(custom_event(type, detail))', 'document.dispatchEvent' is undefined) 2019-09-18 18:27:13.594 nsplaydev[1306:411826] PlayLiveSync: Uncaught Exception 2019-09-18 18:27:13.594 nsplaydev[1306:411826] *** JavaScript call stack: ( ) 2019-09-18 18:27:13.594 nsplaydev[1306:411826] *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: document.dispatchEvent is not a function. (In 'document.dispatchEvent(custom_event(type, detail))', 'document.dispatchEvent' is undefined) at dispatch_dev(file:///app/app.js:1331:27) at create_fragment(file:///app/app.js:1446:14) at init(file:///app/app.js:1294:34) at App(file:///app/app.js:1480:7) at resolveComponentElement(file:///app/app.js:999:36) at navigate(file:///app/app.js:1012:60) at svelteNative(file:///app/app.js:1085:32) at start(file:///app/app.js:1486:17) at anonymous(file:///app/main.js:18:10) at evaluate([native code]) at moduleEvaluation([native code]) at promiseReactionJob([native code]) ', reason: '(null)' *** First throw call stack: (0x204610ec4 0x2037e1a40 0x1018b7778 0x1018fc2a4 0x1028a21f8 0x100fbb420 0x20405abb4) libc++abi.dylib: terminating with uncaught exception of type NSException 2019-09-18 18:27:13.595 nsplaydev[1306:411826] PlayLiveSync: Uncaught Exception

I did not change the code in the REPL. Just scanned the QR and got the error.

Am I doing something wrong?

Inject Javascript into WebView component

The WebView component does not, at least in the documentation, have any support for injecting javascript, unlike the React Native WebView ( https://facebook.github.io/react-native/docs/webview ) which accepts injected Javascript and also lets you specify an onMessage prop. This makes it hard to build the WebView to go get something and return that to the main application.

Is it possible to do this, and just not documented, or can this be added?

Update svelte-native for SvelteJS component changes

After registering a custom element in a custom component, the current component is undefined resulting in a crash when firing an event to update the custom element.

#20

Example component for custom element:

https://github.com/opendomeco/nativescript-auto-fit-text

"set_current_component" has not been called in SvelteJS so "current_component" is undefined resulting in a crash.

            function createEventDispatcher() {
                const component = exports.current_component; <-- current_component not set
                return (type,detail)=>{
                    const callbacks = component.$$.callbacks[type];

ListView item text doesn't update

Expected Behavior

ListView displays the complete item array correctly.

Actual Behavior

ListView only displays the text of the initial items.

Steps to Reproduce the Problem

Do the Tutorial till the "Add Tasks" functionality
Type something into the textField (I typed foo, bar and baz)
The ListView only displays foo, but the console shows also bar and baz

Specifications

tns Version: 6.0.2

Device 1:

Android Version: 9.0 (Pie) - API 28
Emulator Version: 29.0.9-5537588
Kernel Version: Linux 5.0.0-21-generic x86_64
Platform: Ubuntu 19.04

Device 2:

Android Version: 9.0 (Pie) - API 28
NativeScript Playground Version: 1.8.0
NativeScript Preview Version: 1.23.0

Device 3:

Android Version: 9.0 (Pie) - API 28
Emulator Version: 29.0.11-5598178
Kernel Version: Linux 4.15.0-48-generic x86_64
Platform: Ubuntu 18.04 LTS

intro/outro animation support

To get best value from the svelte integration, we should support transitions and animations.

Some preliminary research shows us that svelte animations/transitions interact with the dom using these methods:
https://github.com/sveltejs/svelte/blob/2d3dbdd6a97d395408d0ae1eed3d4495bcc7d09e/src/internal/style_manager.js

This won't work with our current style shims as the NativeScript elements don't support the animation style property on the element itself.

Investigation of the NativeScript animation code shows that animations are parsed from CSS into KeyFrameAnimationInfo objects by:
https://github.com/NativeScript/NativeScript/blob/05c2460fc4989dae4d7fa1ee52f6d54e0c3113f5/tns-core-modules/ui/styling/css-animation-parser.ts

NativeScript's StyleScope uses these under the hood to apply animations to elements
via the https://docs.nativescript.org/api-reference/classes/_ui_animation_keyframe_animation_.keyframeanimation classes

We should be able to combine these to handle svelte animations

Let's Encrypt SSL certificate expired yesterday

Hello, first of all, congratulations to this amazing project!

It seems that, after #35, the Let's Encrypt auto update isn't working well yet.

'text' is not a valid binding

Hey,

If I follow the tutorial, I get an error on the first step:
'text' is not a valid binding

If I remove bind:, everything works as expected: If I change the initial text to something other then '', it gets added as a task.

On a sidenote: I noticed that my vs-code editor is removing the hyphens, for example:
bind:text={textFieldValue}

I would be happy to update the docs as soon as I can get them to work.

UI Test Application

Nativescript Vue and Angular have a full test application that contains an instance of each supported component. We should add a complete test application for use with e2e tests and to help ensure that new versions of Nativescript or Svelte don't break us.

List of features that Svelte has that Svelte Native is missing.

Could we build a checklist of these features? Even if they're not planned for svelte native for whatever reason.

It would probably be useful to all current and future contributers AND would be a useful doc page for devs looking to use svelte native.

Question on using Rollup as bundler

I would prefer to use Rollup as the bundler for this template.

I realise that it is Nativescript that has opted for webpack as the bundler for projects but I would be interested if there are any docs that can point me to how this template could be setup to use Rollup instead.