Merge pull request halfnelson#91 from halfnelson/feature/support-config-elements

Feature/support config elements

Author: halfnelson

CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.0]
+
+### Breaking Changes
+  - Renamed NativeElementNode to NativeViewElementNode and added a parent class NativeElementNode which handles nativescript entities not derived from View
+  - Removed "meta" legacy onInsert and Remove hook container
+
+### Added
+  - support for `prop:` directive to set the value of the containing node to the nativeView of the current node e.g `<gridLayout prop:mainContent>` for sideDrawer
+  - Added a parameter to NativeElementNode that configures the prop: behaviour and defines the correct casing of any property
+  - Added a parameter `setsParentProp` to NativeElementNode that specifies a property on the perent node to set to constructed element when inserted.
+  - Added registerNativeViewElement and registerNativeConfigElement exports. These help change:
+```
+  registerElement('myTag', () => new NativeViewElementNode('myTag', require('some-tns-plugin/mytag').MyTag))
+```
+into
+```
+  registerNativeViewElement('myTag', () => require('some-tns-plugin/mytag').MyTag )
+```
+  - Added `svelteNativeNoFrame` which allows you to launch your app without an implicit root frame. Great for when you are using RadSidebar
+
+
+### Changes
+  - Refactored property name normalization to cache based on object prototype so we aren't walking all defined properties every time we get or set.
+  - Use the new 'scoped styles' boolean parameter when calling addCss if we don't detect any :global() styles. This should improve perf.
+  
+  
 ## [0.5.3]
   - Add support for itemTemplateSelector closes [#86](https://github.com/halfnelson/svelte-native/issues/86)
 
@@ -59,4 +85,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Introduced a Changelog
 
 ### Changed
- - Bumped versions to use freshly released Svelte 3.0.0
+ - Bumped versions to use freshly released Svelte 3.0.0

demo/app/tests/components/Template.ts

@@ -1,6 +1,8 @@
 import { Template } from "svelte-native/components"
 import TemplateHarness from './TemplateHarness.svelte'
 import { createElement, NativeElementNode } from "svelte-native/dom";
+import { Label } from "tns-core-modules/ui/label/label";
+import { NativeViewElementNode } from "svelte-native/dom";
 
 describe('Template', function () {
 
@@ -49,7 +51,7 @@ describe('Template', function () {
             });
 
             it('uses the provided props', function () {
-                let el = mount_point.firstElement() as NativeElementNode;
+                let el = mount_point.firstElement() as NativeViewElementNode<Label>;
                 assert.equal(el.getAttribute('text'), 'test text prop_value')
             });
 
@@ -60,8 +62,8 @@ describe('Template', function () {
                     props: { item: "prop_value2" }
                 })
 
-                let el1 = mount_point.firstElement() as NativeElementNode;
-                let el2 = mount_point2.firstElement() as NativeElementNode;
+                let el1 = mount_point.firstElement() as NativeViewElementNode<Label>;
+                let el2 = mount_point2.firstElement() as NativeViewElementNode<Label>;
                 assert.equal(el1.getAttribute('text'), 'test text prop_value')
                 assert.equal(el2.getAttribute('text'), 'test text prop_value2')
             })

demo/app/tests/dom/ListViewNode.ts

@@ -1,10 +1,10 @@
-import { createElement, NativeElementNode } from 'svelte-native/dom'
+import { createElement, NativeViewElementNode } from 'svelte-native/dom'
 import { ListView } from 'tns-core-modules/ui/list-view'
 
 import ListViewMultiTemplate from './ListViewMultiTemplate.svelte'
 
 describe('ListViewNode', function () {
-    let test_subject: NativeElementNode
+    let test_subject: NativeViewElementNode<ListView>
     before(async function () {
         let el = createElement('fragment');
         let harness = new ListViewMultiTemplate({ target: el });
@@ -13,7 +13,7 @@ describe('ListViewNode', function () {
     })
 
     it('detects keyed templates', async function () {
-        let listview = test_subject.nativeView as ListView;
+        let listview = test_subject.nativeView;
         assert.equal(listview.itemTemplates.length, 2, `expected 2 keyed item templates`)
     })
 

demo/app/tests/dom/NativeElement.ts

@@ -1,12 +1,13 @@
-import { createElement, NativeElementNode } from 'svelte-native/dom'
+import { createElement, NativeElementNode, NativeViewElementNode } from 'svelte-native/dom'
 import NativeElementHarness from './NativeElementHarness.svelte'
 import MountParent from './MountParent.svelte'
 import MountChild from './MountChild.svelte'
 import { LayoutBase } from 'tns-core-modules/ui/layouts/layout-base'
 import { Label } from 'tns-core-modules/ui/label'
+import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout'
 
 describe('NativeElementNode', function () {
-    let test_subject: NativeElementNode;
+    let test_subject: NativeViewElementNode<Label>;
     before(async function () {
         let el = createElement('fragment');
         let harness = new NativeElementHarness({ target: el });
@@ -15,31 +16,31 @@ describe('NativeElementNode', function () {
     })
 
     it('sets known properties onto its nativeView', function () {
-        assert.equal((test_subject.nativeView as any).textWrap, true);
+        assert.equal(test_subject.nativeElement.textWrap, true);
     })
 
     it('sets text node children as text property of nativeView', function () {
-        assert.equal((test_subject.nativeView as any).text, 'Text Content');
+        assert.equal(test_subject.nativeElement.text, 'Text Content');
     })
 
     it('sets class property on nativeView', function () {
-        assert.isTrue((test_subject.nativeView as any).cssClasses.has("testlabel"));
+        assert.isTrue(test_subject.nativeElement.cssClasses.has("testlabel"));
     })
 
     it('supports class directive', function () {
-        assert.isTrue((test_subject.nativeView as any).cssClasses.has('boolclass'));
-        assert.isFalse((test_subject.nativeView as any).cssClasses.has('boolclassf'))
+        assert.isTrue(test_subject.nativeElement.cssClasses.has('boolclass'));
+        assert.isFalse(test_subject.nativeElement.cssClasses.has('boolclassf'))
     })
 
 
     it('sets style properties on native view', function () {
-        assert.equal((test_subject.nativeView as any).style.color.name, 'red');
-        assert.equal((test_subject.nativeView as any).color.name, 'red');
+        assert.equal(test_subject.nativeElement.style.color.name, 'red');
+        assert.equal(test_subject.nativeElement.color.name, 'red');
     })
 });
 
 describe('NativeElementNode mounting', function () {
-    let mount_parent: { $destroy: any, stack: NativeElementNode, first: NativeElementNode, last: NativeElementNode } = null;
+    let mount_parent: { $destroy: any, stack: NativeViewElementNode<StackLayout>, first: NativeViewElementNode<Label>, last: NativeViewElementNode<Label> } = null;
     beforeEach(async function () {
         let el = createElement('fragment');
         let harness = new MountParent({ target: el });
@@ -58,13 +59,13 @@ describe('NativeElementNode mounting', function () {
     }
 
     it('can mount child element at the end', function () {
-        let mount_child: { $destroy: any, childA: NativeElementNode, childB: NativeElementNode } = new MountChild({ target: mount_parent.stack }) as any;
+        let mount_child: { $destroy: any, childA: NativeViewElementNode<Label>, childB: NativeViewElementNode<Label> } = new MountChild({ target: mount_parent.stack }) as any;
         try {
-            assertChildrenMatch(mount_parent.stack.nativeView as LayoutBase, [
-                mount_parent.first.nativeView as Label,
-                mount_parent.last.nativeView as Label,
-                mount_child.childA.nativeView as Label,
-                mount_child.childB.nativeView as Label
+            assertChildrenMatch(mount_parent.stack.nativeView, [
+                mount_parent.first.nativeView,
+                mount_parent.last.nativeView,
+                mount_child.childA.nativeView,
+                mount_child.childB.nativeView
             ])
         } finally {
             mount_child.$destroy()
@@ -73,13 +74,13 @@ describe('NativeElementNode mounting', function () {
     })
 
     it('can mount child element before an anchor', function () {
-        let mount_child: { $destroy: any, childA: NativeElementNode, childB: NativeElementNode } = new MountChild({ target: mount_parent.stack, anchor: mount_parent.last }) as any;
+        let mount_child: { $destroy: any, childA: NativeViewElementNode<Label>, childB: NativeViewElementNode<Label> } = new MountChild({ target: mount_parent.stack, anchor: mount_parent.last }) as any;
         try {
-            assertChildrenMatch(mount_parent.stack.nativeView as LayoutBase, [
-                mount_parent.first.nativeView as Label,
-                mount_child.childA.nativeView as Label,
-                mount_child.childB.nativeView as Label,
-                mount_parent.last.nativeView as Label,
+            assertChildrenMatch(mount_parent.stack.nativeView, [
+                mount_parent.first.nativeView,
+                mount_child.childA.nativeView,
+                mount_child.childB.nativeView,
+                mount_parent.last.nativeView,
             ])
         } finally {
             mount_child.$destroy()
@@ -88,13 +89,13 @@ describe('NativeElementNode mounting', function () {
     })
 
     it('can mount child element at the start', function () {
-        let mount_child: { $destroy: any, childA: NativeElementNode, childB: NativeElementNode } = new MountChild({ target: mount_parent.stack, anchor: mount_parent.first }) as any;
+        let mount_child: { $destroy: any, childA: NativeViewElementNode<Label>, childB: NativeViewElementNode<Label> } = new MountChild({ target: mount_parent.stack, anchor: mount_parent.first }) as any;
         try {
-            assertChildrenMatch(mount_parent.stack.nativeView as LayoutBase, [
-                mount_child.childA.nativeView as Label,
-                mount_child.childB.nativeView as Label,
-                mount_parent.first.nativeView as Label,
-                mount_parent.last.nativeView as Label,
+            assertChildrenMatch(mount_parent.stack.nativeView, [
+                mount_child.childA.nativeView,
+                mount_child.childB.nativeView,
+                mount_parent.first.nativeView,
+                mount_parent.last.nativeView,
             ])
         } finally {
             mount_child.$destroy()

demo/app/tests/dom/PropDirective.ts

@@ -0,0 +1,33 @@
+import { createElement, NativeViewElementNode } from 'svelte-native/dom'
+import PropDirectiveHarness from './PropDirectiveHarness.svelte'
+import { Label } from 'tns-core-modules/ui/label/label';
+import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
+
+describe('PropDirective', function () {
+    let test_subject: NativeViewElementNode<StackLayout>
+    let harness;
+    before(async function () {
+        let el = createElement('fragment');
+        harness = new PropDirectiveHarness({ target: el });
+        test_subject = (harness as any).test_subject
+        assert.isNotNull(test_subject)
+    })
+
+    it('sets a property on its parent element', async function () {
+        assert.isNotNull(test_subject.getAttribute('testproperty'))
+    })
+
+    it('the property set is an nativeelement', async function () {
+        assert.instanceOf(test_subject.getAttribute('testproperty'), Label);
+    })
+
+    it('is not added to the native parent view', async function () {
+        assert.equal(test_subject.nativeView.getChildrenCount(), 0);
+    })
+
+
+    it('sets a property to null when removed', async function () {
+        harness.enabled = false;
+        assert.isNull(test_subject.getAttribute('testproperty'))
+    })
+});

demo/app/tests/dom/PropDirectiveHarness.svelte

@@ -0,0 +1,12 @@
+<svelte:options accessors={true}/>
+
+<stackLayout bind:this={test_subject}>
+   {#if enabled}
+   <label prop:testproperty text="test label"/>
+   {/if}
+</stackLayout>
+
+<script>
+    export let test_subject;
+    export let enabled = true;
+</script>

demo/app/tests/dom/Tabs.ts

@@ -1,6 +1,7 @@
-import { createElement, TabsElement, TabStripElement } from 'svelte-native/dom'
+import { createElement, TabsElement, NativeViewElementNode } from 'svelte-native/dom'
 import { tick } from 'svelte';
 import TabsHarness from './TabsHarness.svelte'
+import { TabStrip } from 'tns-core-modules/ui/tab-navigation-base/tab-strip'
 
 
 describe('Tabs', function () {
@@ -41,7 +42,7 @@ describe('Tabs', function () {
 });
 
 describe('TabStrip', function () {
-    let test_subject: TabStripElement;
+    let test_subject: NativeViewElementNode<TabStrip>;
     let harness: TabsHarness;
     before(async function () {
         let el = createElement('fragment');

demo/tsconfig.json

@@ -6,9 +6,9 @@
         "emitDecoratorMetadata": true,
         "noEmitHelpers": true,
         "noEmitOnError": true,
+        "skipLibCheck": true,
         "lib": [
-            "es6",
-            "dom"
+            "es6"
         ],
         "baseUrl": ".",
         "paths": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-native",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Svelte integration for NativeScript",
   "private": true,
   "repository": {
@@ -21,7 +21,7 @@
   "author": "David Pershouse",
   "license": "MIT",
   "peerDependencies": {
-    "tns-core-modules": "^6.1.1",
+    "tns-core-modules": "^6.1.2",
     "svelte": "^3.12.1"
   },
   "devDependencies": {
@@ -31,7 +31,7 @@
     "rollup-plugin-svelte": "^5.1.0",
     "rollup-plugin-typescript2": "^0.24.0",
     "svelte": "^3.12.1",
-    "tns-core-modules": "^6.1.1",
+    "tns-core-modules": "^6.1.2",
     "typescript": "^3.5.3",
     "rimraf": "^2.6.3"
   }