-
+
+
+
NativeScript-Vue3
- -NativeScript-Vue now supports Vue 3 and is generally available! This version brings improved reactivity, a modern plugin system, and better TypeScript support. - -## Quick Start - -To get started, you can use the [StackBlitz Template](https://stackblitz.com/fork/github/nativescript-vue/nativescript-vue/tree/main/packages/stackblitz-template?file=src%2Fcomponents%2FHome.vue&title=NativeScript%20Starter%20Vue3). - -Or, set up locally: - -```sh -ns create myAwesomeApp --template @nativescript-vue/template-blank@latest - -cd myAwesomeApp -ns run ios|android -``` - -## Upgrading to v3 - -Please refer to our [Upgrade Guide](https://nativescript-vue.org/docs/essentials/upgrade-guide). - -## Using Vue Devtools - -To enable Vue Devtools, run: - -```sh -ns run ios|android --env.vueDevtools -``` - -🛠️ **Android Users:** -To allow Vue Devtools to connect, enable **cleartext HTTP traffic** in your `AndroidManifest.xml`: - -```diff -
+ 
+ 
+ 
+ 
Supporting NativeScript-Vue
+ +NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: + + +
+
+ 
+
+ |
+
+
+ 
+
+ |
+
+
+ 
+
+ |
+
, use
.'
+ )
+ }
+ }
+ if (staticClass) {
+ el.staticClass = JSON.stringify(staticClass)
+ }
+ const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
+ if (classBinding) {
+ el.classBinding = classBinding
+ }
+}
+
+function genData(el) {
+ let data = ''
+ if (el.staticClass) {
+ data += `staticClass:${el.staticClass},`
+ }
+ if (el.classBinding) {
+ data += `class:${el.classBinding},`
+ }
+ return data
+}
+
+export default {
+ staticKeys: ['staticClass'],
+ transformNode,
+ genData
+}
diff --git a/platform/nativescript/compiler/modules/for.js b/platform/nativescript/compiler/modules/for.js
new file mode 100644
index 00000000..0e6b8294
--- /dev/null
+++ b/platform/nativescript/compiler/modules/for.js
@@ -0,0 +1,42 @@
+import { getAndRemoveAttr, addRawAttr } from 'compiler/helpers'
+import { normalizeElementName } from '../../element-registry'
+import { parseFor } from 'compiler/parser/index'
+import { warn } from 'core/util/debug'
+
+function preTransformNode(el) {
+ let vfor
+
+ if (normalizeElementName(el.tag) === 'nativelistview') {
+ vfor = getAndRemoveAttr(el, 'v-for')
+ delete el.attrsMap['v-for']
+ if (process.env.NODE_ENV !== 'production' && vfor) {
+ warn(
+ `The v-for directive is not supported on a ${el.tag}, ` +
+ 'Use the "for" attribute instead. For example, instead of ' +
+ `<${el.tag} v-for="${vfor}"> use <${el.tag} for="${vfor}">.`
+ )
+ }
+ }
+
+ const exp = getAndRemoveAttr(el, 'for') || vfor
+ if (!exp) return
+
+ const res = parseFor(exp)
+ if (!res) {
+ if (process.env.NODE_ENV !== 'production') {
+ warn(`Invalid for expression: ${exp}`)
+ }
+ return
+ }
+
+ addRawAttr(el, ':items', res.for)
+ addRawAttr(el, '+alias', res.alias)
+
+ if (res.iterator1) {
+ addRawAttr(el, '+index', res.iterator1)
+ }
+}
+
+export default {
+ preTransformNode
+}
diff --git a/platform/nativescript/compiler/modules/index.js b/platform/nativescript/compiler/modules/index.js
new file mode 100644
index 00000000..d387711e
--- /dev/null
+++ b/platform/nativescript/compiler/modules/index.js
@@ -0,0 +1,8 @@
+import class_ from './class'
+import style from './style'
+import for_ from './for'
+import router from './router'
+import vTemplate from './v-template'
+import view from './view'
+
+export default [class_, style, vTemplate, for_, router, view]
diff --git a/platform/nativescript/compiler/modules/router.js b/platform/nativescript/compiler/modules/router.js
new file mode 100644
index 00000000..fcf9f414
--- /dev/null
+++ b/platform/nativescript/compiler/modules/router.js
@@ -0,0 +1,13 @@
+import { normalizeElementName } from '../../element-registry'
+import { addAttr } from 'compiler/helpers'
+
+function preTransformNode(el) {
+ if (el.tag !== 'router-view') return
+ if (normalizeElementName(el.parent.tag) === 'nativeframe') {
+ addAttr(el.parent, 'hasRouterView', 'true')
+ }
+}
+
+export default {
+ preTransformNode
+}
diff --git a/platform/nativescript/compiler/modules/style.js b/platform/nativescript/compiler/modules/style.js
new file mode 100644
index 00000000..00551548
--- /dev/null
+++ b/platform/nativescript/compiler/modules/style.js
@@ -0,0 +1,75 @@
+import { getAndRemoveAttr, getBindingAttr, baseWarn } from 'compiler/helpers'
+import { parseText } from 'compiler/parser/text-parser'
+import { cached, camelize } from 'shared/util'
+
+const normalize = cached(camelize)
+
+function transformNode(el, options) {
+ const warn = options.warn || baseWarn
+ const staticStyle = getAndRemoveAttr(el, 'style')
+ const { dynamic, styleResult } = parseStaticStyle(staticStyle, options)
+ if (process.env.NODE_ENV !== 'production' && dynamic) {
+ warn(
+ `style="${String(staticStyle)}": ` +
+ 'Interpolation inside attributes has been deprecated. ' +
+ 'Use v-bind or the colon shorthand instead.'
+ )
+ }
+ if (!dynamic && styleResult) {
+ el.staticStyle = styleResult
+ }
+ const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
+ if (styleBinding) {
+ el.styleBinding = styleBinding
+ } else if (dynamic) {
+ el.styleBinding = styleResult
+ }
+}
+
+function genData(el) {
+ let data = ''
+ if (el.staticStyle) {
+ data += `staticStyle:${el.staticStyle},`
+ }
+ if (el.styleBinding) {
+ data += `style:${el.styleBinding},`
+ }
+ return data
+}
+
+function parseStaticStyle(staticStyle, options) {
+ // "width: 200px; height: 200px;" -> {width: 200, height: 200}
+ // "width: 200px; height: {{y}}" -> {width: 200, height: y}
+ let dynamic = false
+ let styleResult = ''
+ if (staticStyle) {
+ const styleList = staticStyle
+ .trim()
+ .split(';')
+ .map(style => {
+ const result = style.trim().split(':')
+ if (result.length !== 2) {
+ return
+ }
+ const key = normalize(result[0].trim())
+ const value = result[1].trim()
+ const dynamicValue = parseText(value, options.delimiters)
+ if (dynamicValue) {
+ dynamic = true
+ return key + ':' + dynamicValue
+ }
+ return key + ':' + JSON.stringify(value)
+ })
+ .filter(result => result)
+ if (styleList.length) {
+ styleResult = '{' + styleList.join(',') + '}'
+ }
+ }
+ return { dynamic, styleResult }
+}
+
+export default {
+ staticKeys: ['staticStyle'],
+ transformNode,
+ genData
+}
diff --git a/platform/nativescript/compiler/modules/v-template.js b/platform/nativescript/compiler/modules/v-template.js
new file mode 100644
index 00000000..319bae1a
--- /dev/null
+++ b/platform/nativescript/compiler/modules/v-template.js
@@ -0,0 +1,15 @@
+function preTransformNode(el) {
+ if (el.parent && el.parent.tag === 'v-template') {
+ let alias = el.parent.parent.attrsMap['+alias'] || 'item'
+ let index = el.parent.parent.attrsMap['+index'] || '$index'
+ el.slotScope = buildScopeString(alias, index)
+ }
+}
+
+export default {
+ preTransformNode
+}
+
+export function buildScopeString(alias, index) {
+ return `{ ${alias}, ${index}, $even, $odd }`
+}
diff --git a/platform/nativescript/compiler/modules/view.js b/platform/nativescript/compiler/modules/view.js
new file mode 100644
index 00000000..fd67130b
--- /dev/null
+++ b/platform/nativescript/compiler/modules/view.js
@@ -0,0 +1,21 @@
+import { getAndRemoveAttr, addDirective } from 'compiler/helpers'
+
+// transforms ~test -> v-view:test
+function transformNode(el) {
+ const attr = Object.keys(el.attrsMap).find(attr => attr.startsWith('~'))
+
+ if (attr) {
+ const attrName = attr.substr(1)
+ let [arg, ...modifiers] = attrName.split('.')
+ modifiers = modifiers.reduce((mods, mod) => {
+ mods[mod] = true
+ return mods
+ }, {})
+ getAndRemoveAttr(el, attr, true)
+ addDirective(el, 'view', `v-view:${attrName}`, '', arg, false, modifiers)
+ }
+}
+
+export default {
+ transformNode
+}
diff --git a/platform/nativescript/compiler/sfc/parser.js b/platform/nativescript/compiler/sfc/parser.js
new file mode 100644
index 00000000..22431e85
--- /dev/null
+++ b/platform/nativescript/compiler/sfc/parser.js
@@ -0,0 +1,133 @@
+/* @flow */
+
+/**
+ * This file is a fork of https://github.com/vuejs/vue/blob/dev/src/sfc/parser.js
+ * which allows multiple template and script blocks in a SFC
+ */
+import deindent from 'de-indent'
+import { parseHTML } from 'compiler/parser/html-parser'
+import { makeMap } from 'shared/util'
+
+const splitRE = /\r?\n/g
+const replaceRE = /./g
+const isSpecialTag = makeMap('script,style,template', true)
+
+type Attribute = {
+ name: string,
+ value: string
+}
+
+/**
+ * Parse a single-file component (*.vue) file into an SFC Descriptor Object.
+ */
+export function parseComponent(
+ content: string,
+ options?: Object = {}
+): SFCDescriptor {
+ const sfc: SFCDescriptor = {
+ template: null,
+ templates: [],
+ script: null,
+ scripts: [],
+ styles: [],
+ customBlocks: []
+ }
+ let depth = 0
+ let currentBlock: ?SFCBlock = null
+
+ function start(
+ tag: string,
+ attrs: Array,
+ unary: boolean,
+ start: number,
+ end: number
+ ) {
+ if (depth === 0) {
+ currentBlock = {
+ type: tag,
+ content: '',
+ start: end,
+ attrs: attrs.reduce((cumulated, { name, value }) => {
+ cumulated[name] = value || true
+ return cumulated
+ }, {})
+ }
+ if (isSpecialTag(tag)) {
+ checkAttrs(currentBlock, attrs)
+ if (tag === 'style') {
+ sfc.styles.push(currentBlock)
+ } else if (tag === 'script') {
+ sfc.scripts.push(currentBlock)
+ } else if (tag === 'template') {
+ sfc.templates.push(currentBlock)
+ }
+ } else {
+ // custom blocks
+ sfc.customBlocks.push(currentBlock)
+ }
+ }
+ if (!unary) {
+ depth++
+ }
+ }
+
+ function checkAttrs(block: SFCBlock, attrs: Array) {
+ for (let i = 0; i < attrs.length; i++) {
+ const attr = attrs[i]
+ if (attr.name === 'lang') {
+ block.lang = attr.value
+ }
+ if (attr.name === 'scoped') {
+ block.scoped = true
+ }
+ if (attr.name === 'module') {
+ block.module = attr.value || true
+ }
+ if (attr.name === 'src') {
+ block.src = attr.value
+ }
+ }
+ }
+
+ function end(tag: string, start: number, end: number) {
+ if (depth === 1 && currentBlock) {
+ currentBlock.end = start
+ let text = deindent(content.slice(currentBlock.start, currentBlock.end))
+ // pad content so that linters and pre-processors can output correct
+ // line numbers in errors and warnings
+ if (currentBlock.type !== 'template' && options.pad) {
+ text = padContent(currentBlock, options.pad) + text
+ }
+ currentBlock.content = text
+ currentBlock = null
+ }
+ depth--
+ }
+
+ function padContent(block: SFCBlock, pad: true | 'line' | 'space') {
+ if (pad === 'space') {
+ return content.slice(0, block.start).replace(replaceRE, ' ')
+ } else {
+ const offset = content.slice(0, block.start).split(splitRE).length
+ const padChar = block.type === 'script' && !block.lang ? '//\n' : '\n'
+ return Array(offset).join(padChar)
+ }
+ }
+
+ parseHTML(content, {
+ start,
+ end
+ })
+
+ // set template property for backwards compat
+ if (sfc.templates.length) {
+ sfc.template = sfc.templates[sfc.templates.length - 1]
+ }
+
+ // set script property for backwards compat
+ if (sfc.scripts.length) {
+ sfc.script = sfc.scripts[sfc.scripts.length - 1]
+ }
+
+ return sfc
+}
diff --git a/platform/nativescript/constants.js b/platform/nativescript/constants.js
new file mode 100644
index 00000000..8fd865ec
--- /dev/null
+++ b/platform/nativescript/constants.js
@@ -0,0 +1 @@
+export const VUE_VM_REF = '__vue_vm_ref__'
diff --git a/platform/nativescript/element-registry.js b/platform/nativescript/element-registry.js
new file mode 100644
index 00000000..9a506b8b
--- /dev/null
+++ b/platform/nativescript/element-registry.js
@@ -0,0 +1,372 @@
+import * as builtInComponents from './runtime/components'
+
+const elementMap = {}
+const nativeRegExp = /Native/gi
+const dashRegExp = /-/g
+
+const defaultViewMeta = {
+ skipAddToDom: false,
+ isUnaryTag: false,
+ tagNamespace: '',
+ canBeLeftOpenTag: false,
+ model: null,
+ component: null
+}
+
+export function normalizeElementName(elementName) {
+ return `native${elementName
+ .replace(nativeRegExp, '')
+ .replace(dashRegExp, '')
+ .toLowerCase()}`
+}
+
+export function registerElement(elementName, resolver, meta) {
+ const normalizedName = normalizeElementName(elementName)
+
+ meta = Object.assign({}, defaultViewMeta, meta)
+
+ if (elementMap[normalizedName]) {
+ throw new Error(`Element for ${elementName} already registered.`)
+ }
+
+ if (!meta.component) {
+ // if no Vue component is passed, wrap the simpler vue component
+ // which bind the events and attributes to the NS one
+ meta.component = {
+ functional: true,
+ model: meta.model,
+ render: (h, { data, children }) => {
+ return h(normalizedName, data, children)
+ }
+ }
+ }
+ meta.component.name = elementName
+
+ const entry = {
+ resolver: resolver,
+ meta: meta
+ }
+ elementMap[normalizedName] = entry
+}
+
+export function getElementMap() {
+ return elementMap
+}
+
+export function getViewClass(elementName) {
+ const normalizedName = normalizeElementName(elementName)
+ const entry = elementMap[normalizedName]
+
+ if (!entry) {
+ throw new TypeError(`No known component for element ${elementName}.`)
+ }
+
+ try {
+ return entry.resolver()
+ } catch (e) {
+ throw new TypeError(`Could not load view for: ${elementName}. ${e}`)
+ }
+}
+
+export function getViewMeta(elementName) {
+ const normalizedName = normalizeElementName(elementName)
+
+ let meta = defaultViewMeta
+ const entry = elementMap[normalizedName]
+
+ if (entry && entry.meta) {
+ meta = entry.meta
+ }
+
+ return meta
+}
+
+export function isKnownView(elementName) {
+ return elementMap[normalizeElementName(elementName)]
+}
+
+registerElement(
+ 'ActionBar',
+ () => require('tns-core-modules/ui/action-bar').ActionBar,
+ {
+ removeChild(parent, child) {
+ try {
+ parent.nativeView._removeView(child.nativeView)
+ } catch (e) {
+ // ignore exception - child is likely already removed/replaced
+ // fixes #76
+ }
+ },
+ component: builtInComponents.ActionBar
+ }
+)
+
+registerElement(
+ 'ActionItem',
+ () => require('tns-core-modules/ui/action-bar').ActionItem
+)
+
+registerElement('android', null, {
+ component: builtInComponents.android
+})
+
+registerElement('ios', null, {
+ component: builtInComponents.ios
+})
+
+registerElement(
+ 'ListView',
+ () => require('tns-core-modules/ui/list-view').ListView,
+ {
+ component: builtInComponents.ListView
+ }
+)
+
+registerElement(
+ 'NavigationButton',
+ () => require('tns-core-modules/ui/action-bar').NavigationButton
+)
+
+registerElement(
+ 'TabView',
+ () => require('tns-core-modules/ui/tab-view').TabView,
+ {
+ model: {
+ prop: 'selectedIndex',
+ event: 'selectedIndexChange'
+ },
+ component: builtInComponents.TabView
+ }
+)
+
+registerElement(
+ 'TabViewItem',
+ () => require('tns-core-modules/ui/tab-view').TabViewItem,
+ {
+ skipAddToDom: true,
+ component: builtInComponents.TabViewItem
+ }
+)
+
+registerElement('transition', null, {
+ component: builtInComponents.transition
+})
+
+registerElement('v-template', null, {
+ component: builtInComponents.VTemplate
+})
+
+// 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, {
+ model: {
+ prop: 'text',
+ event: 'textChange'
+ }
+})
+
+registerElement(
+ 'DatePicker',
+ () => require('tns-core-modules/ui/date-picker').DatePicker,
+ {
+ model: {
+ prop: 'date',
+ event: 'dateChange'
+ }
+ }
+)
+
+registerElement(
+ 'AbsoluteLayout',
+ () => require('tns-core-modules/ui/layouts/absolute-layout').AbsoluteLayout
+)
+registerElement(
+ '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(
+ 'ContentView',
+ () => require('tns-core-modules/ui/content-view').ContentView
+)
+registerElement(
+ 'DockLayout',
+ () => require('tns-core-modules/ui/layouts/dock-layout').DockLayout
+)
+registerElement(
+ 'GridLayout',
+ () => require('tns-core-modules/ui/layouts/grid-layout').GridLayout
+)
+registerElement(
+ 'HtmlView',
+ () => require('tns-core-modules/ui/html-view').HtmlView
+)
+registerElement('Image', () => require('tns-core-modules/ui/image').Image)
+registerElement('img', () => require('tns-core-modules/ui/image').Image)
+registerElement(
+ 'ListPicker',
+ () => require('tns-core-modules/ui/list-picker').ListPicker,
+ {
+ model: {
+ prop: 'selectedIndex',
+ event: 'selectedIndexChange'
+ }
+ }
+)
+registerElement('Page', () => require('tns-core-modules/ui/page').Page, {
+ skipAddToDom: true,
+ component: builtInComponents.Page
+})
+
+registerElement(
+ 'Placeholder',
+ () => require('tns-core-modules/ui/placeholder').Placeholder
+)
+registerElement(
+ 'Progress',
+ () => require('tns-core-modules/ui/progress').Progress,
+ {
+ model: {
+ prop: 'value',
+ event: 'valueChange'
+ }
+ }
+)
+registerElement(
+ 'ProxyViewContainer',
+ () => require('tns-core-modules/ui/proxy-view-container').ProxyViewContainer
+)
+// registerElement(
+// 'Repeater',
+// () => require('tns-core-modules/ui/repeater').Repeater
+// )
+registerElement(
+ 'ScrollView',
+ () => require('tns-core-modules/ui/scroll-view').ScrollView
+)
+registerElement(
+ 'SearchBar',
+ () => require('tns-core-modules/ui/search-bar').SearchBar,
+ {
+ model: {
+ prop: 'text',
+ event: 'textChange'
+ }
+ }
+)
+registerElement(
+ 'SegmentedBar',
+ () => require('tns-core-modules/ui/segmented-bar').SegmentedBar,
+ {
+ model: {
+ prop: 'selectedIndex',
+ event: 'selectedIndexChange'
+ }
+ }
+)
+registerElement(
+ 'SegmentedBarItem',
+ () => require('tns-core-modules/ui/segmented-bar').SegmentedBarItem
+)
+registerElement('Slider', () => require('tns-core-modules/ui/slider').Slider, {
+ model: {
+ prop: 'value',
+ event: 'valueChange'
+ }
+})
+registerElement(
+ 'StackLayout',
+ () => require('tns-core-modules/ui/layouts/stack-layout').StackLayout
+)
+registerElement(
+ 'FlexboxLayout',
+ () => require('tns-core-modules/ui/layouts/flexbox-layout').FlexboxLayout
+)
+registerElement('Switch', () => require('tns-core-modules/ui/switch').Switch, {
+ model: {
+ prop: 'checked',
+ event: 'checkedChange'
+ }
+})
+
+registerElement(
+ 'TextField',
+ () => require('tns-core-modules/ui/text-field').TextField,
+ {
+ model: {
+ prop: 'text',
+ event: 'textChange'
+ }
+ }
+)
+registerElement(
+ 'TextView',
+ () => require('tns-core-modules/ui/text-view').TextView,
+ {
+ model: {
+ prop: 'text',
+ event: 'textChange'
+ }
+ }
+)
+registerElement(
+ 'TimePicker',
+ () => require('tns-core-modules/ui/time-picker').TimePicker,
+ {
+ model: {
+ prop: 'time',
+ event: 'timeChange'
+ }
+ }
+)
+registerElement(
+ 'WebView',
+ () => require('tns-core-modules/ui/web-view').WebView
+)
+registerElement(
+ 'WrapLayout',
+ () => require('tns-core-modules/ui/layouts/wrap-layout').WrapLayout
+)
+registerElement(
+ 'FormattedString',
+ () => require('tns-core-modules/text/formatted-string').FormattedString
+)
+registerElement('Span', () => require('tns-core-modules/text/span').Span)
+
+registerElement(
+ 'DetachedContainer',
+ () => require('tns-core-modules/ui/proxy-view-container').ProxyViewContainer,
+ {
+ skipAddToDom: true
+ }
+)
+registerElement(
+ 'DetachedText',
+ () => require('tns-core-modules/ui/placeholder').Placeholder,
+ {
+ skipAddToDom: true
+ }
+)
+registerElement(
+ 'Comment',
+ () => require('tns-core-modules/ui/placeholder').Placeholder
+)
+
+registerElement(
+ 'Document',
+ () => require('tns-core-modules/ui/proxy-view-container').ProxyViewContainer,
+ {
+ skipAddToDom: true
+ }
+)
+
+registerElement('Frame', () => require('tns-core-modules/ui/frame').Frame, {
+ insertChild(parentNode, childNode, atIndex) {
+ // if (normalizeElementName(childNode.tagName) === 'nativepage') {
+ // parentNode.nativeView.navigate({ create: () => childNode.nativeView })
+ // }
+ },
+ component: builtInComponents.Frame
+})
diff --git a/platform/nativescript/framework.js b/platform/nativescript/framework.js
new file mode 100644
index 00000000..7f1b03c4
--- /dev/null
+++ b/platform/nativescript/framework.js
@@ -0,0 +1,53 @@
+import inspect from 'util-inspect'
+import Vue from './runtime/index'
+import ModalPlugin from './plugins/modal-plugin'
+import NavigatorPlugin from './plugins/navigator-plugin'
+
+import { setVue } from './util'
+
+Vue.config.silent = true
+
+setVue(Vue)
+
+Vue.use(ModalPlugin)
+Vue.use(NavigatorPlugin)
+
+const newLineRegExp = /\\n/g
+
+console.log = (function(log, inspect, Vue) {
+ return function(...args) {
+ return log.call(
+ this,
+ ...Array.prototype.map.call(args, function(arg) {
+ return inspect(arg, {
+ depth: 2,
+ colors: Vue.config.debug,
+ showHidden: true
+ }).replace(newLineRegExp, '\n')
+ })
+ )
+ }
+})(console.log, inspect, Vue)
+
+global.__onLiveSyncCore = () => {
+ const frame = require('tns-core-modules/ui/frame').topmost()
+ if (frame) {
+ if (frame.currentPage && frame.currentPage.modal) {
+ frame.currentPage.modal.closeModal()
+ }
+
+ if (frame.currentPage) {
+ frame.currentPage.addCssFile(
+ require('tns-core-modules/application').getCssFileName()
+ )
+ }
+ }
+}
+
+// Fix a rollup problem which does not define
+// module.export.default = Vue
+// so a `import Vue from 'nativescript-vue'` will
+// fail from a Typescript file
+Vue.default = Vue
+
+export default Vue
diff --git a/platform/nativescript/hooks/before-checkForChanges.js b/platform/nativescript/hooks/before-checkForChanges.js
new file mode 100644
index 00000000..c047d66f
--- /dev/null
+++ b/platform/nativescript/hooks/before-checkForChanges.js
@@ -0,0 +1,19 @@
+const { isBundleCheckRequired } = require('./helpers')
+
+module.exports = function(hookArgs, $errors, $injector) {
+ const shouldCheckBundleOption = isBundleCheckRequired($injector)
+
+ if (shouldCheckBundleOption) {
+ const bundle =
+ hookArgs &&
+ hookArgs.checkForChangesOpts &&
+ hookArgs.checkForChangesOpts.projectChangesOptions &&
+ hookArgs.checkForChangesOpts.projectChangesOptions.bundle
+
+ if (!bundle) {
+ $errors.failWithoutHelp(
+ "Nativescript-vue doesn't work without --bundle option. Please specify --bundle option to the command and execute it again."
+ )
+ }
+ }
+}
diff --git a/platform/nativescript/hooks/before-watch.js b/platform/nativescript/hooks/before-watch.js
new file mode 100644
index 00000000..aad240a1
--- /dev/null
+++ b/platform/nativescript/hooks/before-watch.js
@@ -0,0 +1,18 @@
+const { isBundleCheckRequired } = require('./helpers')
+
+module.exports = function(hookArgs, $errors, $injector) {
+ const shouldCheckBundleOption = isBundleCheckRequired($injector)
+
+ if (shouldCheckBundleOption) {
+ const bundle =
+ hookArgs &&
+ hookArgs.config &&
+ hookArgs.config.appFilesUpdaterOptions &&
+ hookArgs.config.appFilesUpdaterOptions.bundle
+ if (!bundle) {
+ $errors.failWithoutHelp(
+ "Nativescript-vue doesn't work without --bundle option. Please specify --bundle option to the command and execute it again."
+ )
+ }
+ }
+}
diff --git a/platform/nativescript/hooks/helpers.js b/platform/nativescript/hooks/helpers.js
new file mode 100644
index 00000000..b5b4a2d1
--- /dev/null
+++ b/platform/nativescript/hooks/helpers.js
@@ -0,0 +1,14 @@
+function isBundleCheckRequired($injector) {
+ try {
+ const $staticConfig = $injector.resolve('$staticConfig')
+ const version = $staticConfig && $staticConfig.version
+ const majorVersion = (version || '').split('.')[0]
+ // If the major version is not available, probably we are in some new version of CLI, where the staticConfig is not available
+ // So it definitely should work with bundle;
+ return !majorVersion || +majorVersion < 6
+ } catch (err) {
+ return false
+ }
+}
+
+module.exports.isBundleCheckRequired = isBundleCheckRequired
diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
new file mode 100644
index 00000000..b3ceadce
--- /dev/null
+++ b/platform/nativescript/plugins/modal-plugin.js
@@ -0,0 +1,70 @@
+function _findParentModalEntry(vm) {
+ if (!vm) {
+ return false
+ }
+
+ let entry = vm.$parent
+ while (entry && entry.$options.name !== 'ModalEntry') {
+ entry = entry.$parent
+ }
+
+ return entry
+}
+
+export default {
+ install(Vue) {
+ Vue.mixin({
+ created() {
+ const self = this
+ this.$modal = {
+ close(data) {
+ const entry = _findParentModalEntry(self)
+
+ if (entry) {
+ entry.closeCb(data)
+ }
+ }
+ }
+ }
+ })
+
+ Vue.prototype.$showModal = function(component, options) {
+ return new Promise(resolve => {
+ let resolved = false
+ const closeCb = data => {
+ if (resolved) return
+
+ resolved = true
+ resolve(data)
+ modalPage.closeModal()
+
+ // emitted to show up in devtools
+ // for debugging purposes
+ navEntryInstance.$emit('modal:close', data)
+ navEntryInstance.$destroy()
+ }
+
+ // build options object with defaults
+ options = Object.assign({}, options, {
+ context: null,
+ closeCallback: closeCb
+ })
+
+ const navEntryInstance = new Vue({
+ name: 'ModalEntry',
+ parent: this.$root,
+ methods: {
+ closeCb
+ },
+ render: h =>
+ h(component, {
+ props: options.props
+ })
+ })
+ const modalPage = navEntryInstance.$mount().$el.nativeView
+
+ this.$el.nativeView.showModal(modalPage, options)
+ })
+ }
+ }
+}
diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js
new file mode 100644
index 00000000..ca8472e3
--- /dev/null
+++ b/platform/nativescript/plugins/navigator-plugin.js
@@ -0,0 +1,90 @@
+import { isObject, isDef, isPrimitive } from 'shared/util'
+import { getFrame } from '../util/frame'
+
+export function getFrameInstance(frame) {
+ // get the frame that we need to navigate
+ // this can be a frame id (String)
+ // a Vue ref to a frame
+ // a Frame ViewNode
+ // or a Frame instance
+ if (isObject(frame) && isDef(frame.$el)) {
+ frame = frame.$el.nativeView
+ } else if (isPrimitive(frame)) {
+ frame = require('tns-core-modules/ui/frame').getFrameById(frame)
+ } else if (isDef(frame.nativeView)) {
+ frame = frame.nativeView
+ }
+ // finally get the component instance for this frame
+ return getFrame(frame.id)
+}
+
+export function findParentNavigationEntry(vm) {
+ if (!vm) {
+ return false
+ }
+
+ let entry = vm.$parent
+ while (entry && entry.$options.name !== 'NavigationEntry') {
+ entry = entry.$parent
+ }
+
+ return entry
+}
+
+export default {
+ install(Vue) {
+ Vue.prototype.$navigateBack = function(options, backstackEntry = null) {
+ const navEntry = findParentNavigationEntry(this)
+ const defaultOptions = {
+ frame: navEntry ? navEntry.$options.frame : 'default'
+ }
+ options = Object.assign({}, defaultOptions, options)
+ const frame = getFrameInstance(options.frame)
+
+ frame.back(backstackEntry)
+ }
+
+ Vue.prototype.$navigateTo = function(component, options) {
+ const defaultOptions = {
+ frame: 'default'
+ }
+ // build options object with defaults
+ options = Object.assign({}, defaultOptions, options)
+
+ return new Promise(resolve => {
+ const frame = getFrameInstance(options.frame)
+ const navEntryInstance = new Vue({
+ name: 'NavigationEntry',
+ parent: this.$root,
+ frame,
+ props: {
+ frame: {
+ default: frame.id
+ }
+ },
+ render: h => h(component, { props: options.props })
+ })
+ const page = navEntryInstance.$mount().$el.nativeView
+
+ const handler = args => {
+ if (args.isBackNavigation) {
+ page.off('navigatedFrom', handler)
+ navEntryInstance.$destroy()
+ }
+ }
+ page.on('navigatedFrom', handler)
+
+ // ensure that the navEntryInstance vue instance is destroyed when the
+ // page is disposed (clearHistory: true for example)
+ const dispose = page.disposeNativeView
+ page.disposeNativeView = (...args) => {
+ navEntryInstance.$destroy()
+ dispose.call(page, args)
+ }
+
+ frame.navigate(Object.assign({}, options, { create: () => page }))
+ resolve(page)
+ })
+ }
+ }
+}
diff --git a/platform/nativescript/renderer/CommentNode.js b/platform/nativescript/renderer/CommentNode.js
new file mode 100644
index 00000000..89050ce6
--- /dev/null
+++ b/platform/nativescript/renderer/CommentNode.js
@@ -0,0 +1,10 @@
+import ElementNode from './ElementNode'
+
+export default class CommentNode extends ElementNode {
+ constructor(text) {
+ super('comment')
+
+ this.nodeType = 8
+ this.text = text
+ }
+}
diff --git a/platform/nativescript/renderer/DocumentNode.js b/platform/nativescript/renderer/DocumentNode.js
new file mode 100644
index 00000000..701d7433
--- /dev/null
+++ b/platform/nativescript/renderer/DocumentNode.js
@@ -0,0 +1,35 @@
+import CommentNode from './CommentNode'
+import ElementNode from './ElementNode'
+import ViewNode from './ViewNode'
+import TextNode from './TextNode'
+
+export default class DocumentNode extends ViewNode {
+ constructor() {
+ super()
+
+ this.nodeType = 9
+ this.documentElement = new ElementNode('document')
+
+ // make static methods accessible via this
+ this.createComment = this.constructor.createComment
+ this.createElement = this.constructor.createElement
+ this.createElementNS = this.constructor.createElementNS
+ this.createTextNode = this.constructor.createTextNode
+ }
+
+ static createComment(text) {
+ return new CommentNode(text)
+ }
+
+ static createElement(tagName) {
+ return new ElementNode(tagName)
+ }
+
+ static createElementNS(namespace, tagName) {
+ return new ElementNode(namespace + ':' + tagName)
+ }
+
+ static createTextNode(text) {
+ return new TextNode(text)
+ }
+}
diff --git a/platform/nativescript/renderer/ElementNode.js b/platform/nativescript/renderer/ElementNode.js
new file mode 100644
index 00000000..a4d4126f
--- /dev/null
+++ b/platform/nativescript/renderer/ElementNode.js
@@ -0,0 +1,41 @@
+import { getViewClass } from '../element-registry'
+import ViewNode from './ViewNode'
+
+export const VUE_ELEMENT_REF = '__vue_element_ref__'
+
+export default class ElementNode extends ViewNode {
+ constructor(tagName) {
+ super()
+
+ this.nodeType = 1
+ this.tagName = tagName
+
+ const viewClass = getViewClass(tagName)
+ this._nativeView = new viewClass()
+ this._nativeView[VUE_ELEMENT_REF] = this
+ }
+
+ appendChild(childNode) {
+ super.appendChild(childNode)
+
+ if (childNode.nodeType === 3) {
+ this.setText(childNode.text)
+ }
+ }
+
+ insertBefore(childNode, referenceNode) {
+ super.insertBefore(childNode, referenceNode)
+
+ if (childNode.nodeType === 3) {
+ this.setText(childNode.text)
+ }
+ }
+
+ removeChild(childNode) {
+ super.removeChild(childNode)
+
+ if (childNode.nodeType === 3) {
+ this.setText('')
+ }
+ }
+}
diff --git a/platform/nativescript/renderer/TextNode.js b/platform/nativescript/renderer/TextNode.js
new file mode 100644
index 00000000..9ed539e1
--- /dev/null
+++ b/platform/nativescript/renderer/TextNode.js
@@ -0,0 +1,19 @@
+import ViewNode from './ViewNode'
+
+export default class TextNode extends ViewNode {
+ constructor(text) {
+ super()
+
+ this.nodeType = 3
+ this.text = text
+
+ this._meta = {
+ skipAddToDom: true
+ }
+ }
+
+ setText(text) {
+ this.text = text
+ this.parentNode.setText(text)
+ }
+}
diff --git a/platform/nativescript/renderer/ViewNode.js b/platform/nativescript/renderer/ViewNode.js
new file mode 100644
index 00000000..c804937b
--- /dev/null
+++ b/platform/nativescript/renderer/ViewNode.js
@@ -0,0 +1,271 @@
+import set from 'set-value'
+
+import { getViewMeta, normalizeElementName } from '../element-registry'
+import * as viewUtil from './utils'
+
+const XML_ATTRIBUTES = Object.freeze([
+ 'style',
+ 'rows',
+ 'columns',
+ 'fontAttributes'
+])
+
+export default class ViewNode {
+ constructor() {
+ this.nodeType = null
+ this._tagName = null
+ this.parentNode = null
+ this.childNodes = []
+ this.prevSibling = null
+ this.nextSibling = null
+
+ this._ownerDocument = null
+ this._nativeView = null
+ this._meta = null
+
+ /* istanbul ignore next
+ * make vue happy :)
+ */
+ this.hasAttribute = this.removeAttribute = () => false
+ }
+
+ /* istanbul ignore next */
+ toString() {
+ return `${this.constructor.name}(${this.tagName})`
+ }
+
+ set tagName(name) {
+ this._tagName = normalizeElementName(name)
+ }
+
+ get tagName() {
+ return this._tagName
+ }
+
+ get firstChild() {
+ return this.childNodes.length ? this.childNodes[0] : null
+ }
+
+ get lastChild() {
+ return this.childNodes.length
+ ? this.childNodes[this.childNodes.length - 1]
+ : null
+ }
+
+ get nativeView() {
+ return this._nativeView
+ }
+
+ set nativeView(view) {
+ if (this._nativeView) {
+ throw new Error(`Can't override native view.`)
+ }
+
+ this._nativeView = view
+ }
+
+ get meta() {
+ if (this._meta) {
+ return this._meta
+ }
+
+ return (this._meta = getViewMeta(this.tagName))
+ }
+
+ /* istanbul ignore next */
+ get ownerDocument() {
+ if (this._ownerDocument) {
+ return this._ownerDocument
+ }
+
+ let el = this
+ while ((el = el.parentNode).nodeType !== 9) {
+ // do nothing
+ }
+
+ return (this._ownerDocument = el)
+ }
+
+ getAttribute(key) {
+ return this.nativeView[key]
+ }
+
+ /* istanbul ignore next */
+ setAttribute(key, value) {
+ const { isAndroid, isIOS } = require('tns-core-modules/platform')
+ const nv = this.nativeView
+
+ try {
+ if (XML_ATTRIBUTES.indexOf(key) !== -1) {
+ nv[key] = value
+ } else {
+ // detect expandable attrs for boolean values
+ // See https://vuejs.org/v2/guide/components-props.html#Passing-a-Boolean
+ if (
+ require('tns-core-modules/utils/types').isBoolean(nv[key]) &&
+ value === ''
+ ) {
+ value = true
+ }
+
+ if (isAndroid && key.startsWith('android:')) {
+ set(nv, key.substr(8), value)
+ } else if (isIOS && key.startsWith('ios:')) {
+ set(nv, key.substr(4), value)
+ } else if (key.endsWith('.decode')) {
+ set(
+ nv,
+ key.slice(0, -7),
+ require('tns-core-modules/xml').XmlParser._dereferenceEntities(
+ value
+ )
+ )
+ } else {
+ set(nv, key, value)
+ }
+ }
+ } catch (e) {
+ // ignore
+ }
+ }
+
+ /* istanbul ignore next */
+ setStyle(property, value) {
+ if (!(value = value.trim()).length) {
+ return
+ }
+
+ if (property.endsWith('Align')) {
+ // NativeScript uses Alignment instead of Align, this ensures that text-align works
+ property += 'ment'
+ }
+ this.nativeView.style[property] = value
+ }
+
+ /* istanbul ignore next */
+ setText(text) {
+ if (this.nodeType === 3) {
+ this.parentNode.setText(text)
+ } else {
+ this.setAttribute('text', text)
+ }
+ }
+
+ /* istanbul ignore next */
+ addEventListener(event, handler) {
+ this.nativeView.on(event, handler)
+ }
+
+ /* istanbul ignore next */
+ removeEventListener(event) {
+ this.nativeView.off(event)
+ }
+
+ insertBefore(childNode, referenceNode) {
+ if (!childNode) {
+ throw new Error(`Can't insert child.`)
+ }
+
+ // in some rare cases insertBefore is called with a null referenceNode
+ // this makes sure that it get's appended as the last child
+ if (!referenceNode) {
+ return this.appendChild(childNode)
+ }
+
+ if (referenceNode.parentNode !== this) {
+ throw new Error(
+ `Can't insert child, because the reference node has a different parent.`
+ )
+ }
+
+ if (childNode.parentNode && childNode.parentNode !== this) {
+ throw new Error(
+ `Can't insert child, because it already has a different parent.`
+ )
+ }
+
+ if (childNode.parentNode === this) {
+ // we don't need to throw an error here, because it is a valid case
+ // for example when switching the order of elements in the tree
+ // fixes #127 - see for more details
+ // fixes #240
+ // throw new Error(`Can't insert child, because it is already a child.`)
+ }
+
+ let index = this.childNodes.indexOf(referenceNode)
+
+ childNode.parentNode = this
+ childNode.nextSibling = referenceNode
+ childNode.prevSibling = this.childNodes[index - 1]
+
+ referenceNode.prevSibling = childNode
+ this.childNodes.splice(index, 0, childNode)
+
+ viewUtil.insertChild(this, childNode, index)
+ }
+
+ appendChild(childNode) {
+ if (!childNode) {
+ throw new Error(`Can't append child.`)
+ }
+
+ if (childNode.parentNode && childNode.parentNode !== this) {
+ throw new Error(
+ `Can't append child, because it already has a different parent.`
+ )
+ }
+
+ if (childNode.parentNode === this) {
+ // we don't need to throw an error here, because it is a valid case
+ // for example when switching the order of elements in the tree
+ // fixes #127 - see for more details
+ // fixes #240
+ // throw new Error(`Can't append child, because it is already a child.`)
+ }
+
+ childNode.parentNode = this
+
+ if (this.lastChild) {
+ childNode.prevSibling = this.lastChild
+ this.lastChild.nextSibling = childNode
+ }
+
+ this.childNodes.push(childNode)
+
+ viewUtil.insertChild(this, childNode, this.childNodes.length - 1)
+ }
+
+ removeChild(childNode) {
+ if (!childNode) {
+ throw new Error(`Can't remove child.`)
+ }
+
+ if (!childNode.parentNode) {
+ throw new Error(`Can't remove child, because it has no parent.`)
+ }
+
+ if (childNode.parentNode !== this) {
+ throw new Error(`Can't remove child, because it has a different parent.`)
+ }
+
+ childNode.parentNode = null
+
+ if (childNode.prevSibling) {
+ childNode.prevSibling.nextSibling = childNode.nextSibling
+ }
+
+ if (childNode.nextSibling) {
+ childNode.nextSibling.prevSibling = childNode.prevSibling
+ }
+
+ // reset the prevSibling and nextSibling. If not, a keep-alived component will
+ // still have a filled nextSibling attribute so vue will not
+ // insert the node again to the parent. See #220
+ childNode.prevSibling = null
+ childNode.nextSibling = null
+
+ this.childNodes = this.childNodes.filter(node => node !== childNode)
+
+ viewUtil.removeChild(this, childNode)
+ }
+}
diff --git a/platform/nativescript/renderer/utils.js b/platform/nativescript/renderer/utils.js
new file mode 100644
index 00000000..4627b605
--- /dev/null
+++ b/platform/nativescript/renderer/utils.js
@@ -0,0 +1,91 @@
+export function isView(view) {
+ return view instanceof require('tns-core-modules/ui/core/view').View
+}
+
+export function isLayout(view) {
+ return (
+ view instanceof
+ require('tns-core-modules/ui/layouts/layout-base').LayoutBase
+ )
+}
+
+export function isContentView(view) {
+ return view instanceof require('tns-core-modules/ui/content-view').ContentView
+}
+
+export function insertChild(parentNode, childNode, atIndex = -1) {
+ if (!parentNode) {
+ return
+ }
+
+ if (parentNode.meta && typeof parentNode.meta.insertChild === 'function') {
+ return parentNode.meta.insertChild(parentNode, childNode, atIndex)
+ }
+
+ if (childNode.meta.skipAddToDom) {
+ return
+ }
+
+ const parentView = parentNode.nativeView
+ const childView = childNode.nativeView
+
+ if (isLayout(parentView)) {
+ if (childView.parent === parentView) {
+ let index = parentView.getChildIndex(childView)
+ if (index !== -1) {
+ parentView.removeChild(childView)
+ }
+ }
+ if (atIndex !== -1) {
+ parentView.insertChild(childView, atIndex)
+ } else {
+ parentView.addChild(childView)
+ }
+ } else if (isContentView(parentView)) {
+ if (childNode.nodeType === 8) {
+ parentView._addView(childView, atIndex)
+ } else {
+ parentView.content = childView
+ }
+ } else if (parentView && parentView._addChildFromBuilder) {
+ parentView._addChildFromBuilder(
+ childNode._nativeView.constructor.name,
+ childView
+ )
+ } else {
+ // throw new Error("Parent can"t contain children: " + parent.nodeName + ", " + parent);
+ }
+}
+
+export function removeChild(parentNode, childNode) {
+ if (!parentNode) {
+ return
+ }
+
+ if (parentNode.meta && typeof parentNode.meta.removeChild === 'function') {
+ return parentNode.meta.removeChild(parentNode, childNode)
+ }
+
+ if (childNode.meta.skipAddToDom) {
+ return
+ }
+
+ const parentView = parentNode.nativeView
+ const childView = childNode.nativeView
+
+ if (isLayout(parentView)) {
+ parentView.removeChild(childView)
+ } else if (isContentView(parentView)) {
+ if (parentView.content === childView) {
+ parentView.content = null
+ }
+
+ if (childNode.nodeType === 8) {
+ parentView._removeView(childView)
+ }
+ } else if (isView(parentView)) {
+ parentView._removeView(childView)
+ } else {
+ // throw new Error("Unknown parent type: " + parent);
+ }
+}
diff --git a/platform/nativescript/runtime/components/action-bar.js b/platform/nativescript/runtime/components/action-bar.js
new file mode 100644
index 00000000..d1a975c3
--- /dev/null
+++ b/platform/nativescript/runtime/components/action-bar.js
@@ -0,0 +1,7 @@
+export default {
+ template: `
+
+
+ `
+}
diff --git a/platform/nativescript/runtime/components/android.js b/platform/nativescript/runtime/components/android.js
new file mode 100644
index 00000000..22bd4aae
--- /dev/null
+++ b/platform/nativescript/runtime/components/android.js
@@ -0,0 +1,8 @@
+export default {
+ functional: true,
+ render(h, { children }) {
+ if (require('tns-core-modules/platform').isAndroid) {
+ return children
+ }
+ }
+}
diff --git a/platform/nativescript/runtime/components/frame.js b/platform/nativescript/runtime/components/frame.js
new file mode 100644
index 00000000..3f7ec078
--- /dev/null
+++ b/platform/nativescript/runtime/components/frame.js
@@ -0,0 +1,221 @@
+import { setFrame, getFrame, deleteFrame } from '../../util/frame'
+import { isHMRChecking, resetHMRChecking } from '../../util/hmr'
+
+let idCounter = 1
+
+export default {
+ props: {
+ id: {
+ default: 'default'
+ },
+ transition: {
+ type: [String, Object],
+ required: false,
+ default: null
+ },
+ 'ios:transition': {
+ type: [String, Object],
+ required: false,
+ default: null
+ },
+ 'android:transition': {
+ type: [String, Object],
+ required: false,
+ default: null
+ },
+ // injected by the template compiler
+ hasRouterView: {
+ default: false
+ }
+ },
+ data() {
+ return {
+ properties: {}
+ }
+ },
+ created() {
+ let properties = {}
+
+ if (getFrame(this.$props.id)) {
+ properties.id = this.$props.id + idCounter++
+ }
+
+ this.properties = Object.assign({}, this.$attrs, this.$props, properties)
+
+ setFrame(this.properties.id, this)
+ },
+ destroyed() {
+ deleteFrame(this.properties.id)
+ },
+ render(h) {
+ return h(
+ 'NativeFrame',
+ {
+ attrs: this.properties,
+ on: this.$listeners
+ },
+ this.$slots.default
+ )
+ },
+ methods: {
+ _getFrame() {
+ return this.$el.nativeView
+ },
+
+ _ensureTransitionObject(transition) {
+ if (typeof transition === 'string') {
+ return { name: transition }
+ }
+ return transition
+ },
+
+ _composeTransition(entry) {
+ const isAndroid = require('tns-core-modules/platform').isAndroid
+ const platformEntryProp = `transition${isAndroid ? 'Android' : 'iOS'}`
+ const entryProp = entry[platformEntryProp]
+ ? platformEntryProp
+ : 'transition'
+ const platformProp = `${isAndroid ? 'android' : 'ios'}:transition`
+ const prop = this[platformProp] ? platformProp : 'transition'
+
+ if (entry[entryProp]) {
+ entry[entryProp] = this._ensureTransitionObject(entry[entryProp])
+ } else if (this[prop]) {
+ entry[entryProp] = this._ensureTransitionObject(this[prop])
+ }
+
+ return entry
+ },
+
+ notifyPageMounted(pageVm) {
+ let options = {
+ create: () => pageVm.$el.nativeView
+ }
+
+ this.$nextTick(() => {
+ if (isHMRChecking()) {
+ this.replace(options)
+ } else {
+ this.navigate(options)
+ }
+ })
+ },
+
+ replace(entry) {
+ const frame = this._getFrame()
+ const page = entry.create()
+ entry.create = () => page
+
+ const backstackEntry = {
+ entry: entry,
+ resolvedPage: page,
+ navDepth: undefined,
+ fragmentTag: undefined
+ }
+ // TODO: this should be in a specific NS Frame method
+ if (require('tns-core-modules/platform').isIOS) {
+ let viewController = backstackEntry.resolvedPage.ios
+ if (!viewController) {
+ throw new Error(
+ 'Required page does not have a viewController created.'
+ )
+ }
+ viewController['_transition'] = { name: 'non-animated' }
+ viewController['_delegate'] = null
+ frame._ios.controller.delegate = null
+ viewController['_entry'] = backstackEntry
+
+ if (require('tns-core-modules/utils/utils').ios.MajorVersion > 10) {
+ // Reset back button title before pushing view controller to prevent
+ // displaying default 'back' title (when NavigationButton custom title is set).
+ let barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(
+ '',
+ UIBarButtonItemStyle.Plain,
+ null,
+ null
+ )
+ viewController.navigationItem.backBarButtonItem = barButtonItem
+ }
+
+ let newControllers = NSMutableArray.alloc().initWithArray(
+ frame._ios.controller.viewControllers
+ )
+ if (newControllers.count === 0) {
+ throw new Error('Wrong controllers count.')
+ }
+
+ // the code below fixes a phantom animation that appears on the Back button in this case
+ viewController.navigationItem.hidesBackButton =
+ frame.backStack.length === 0
+
+ // swap the top entry with the new one
+ const skippedNavController = newControllers.lastObject
+ skippedNavController.isBackstackSkipped = true
+ newControllers.removeLastObject()
+ newControllers.addObject(viewController)
+
+ // replace the controllers instead of pushing directly
+ frame._ios.controller.setViewControllersAnimated(newControllers, false)
+ } else {
+ const frameId = frame._android.frameId
+ frame._isBack = false
+ backstackEntry.frameId = frameId
+
+ const manager = frame._getFragmentManager()
+ const currentEntry = frame._currentEntry
+
+ const newFragmentTag = `fragment${frameId}[-1]`
+ const newFragment = frame.createFragment(backstackEntry, newFragmentTag)
+ const animated = false
+ const navigationTransition = null
+
+ const transaction = manager.beginTransaction()
+ require('tns-core-modules/ui/frame/fragment.transitions')._setAndroidFragmentTransitions(
+ animated,
+ navigationTransition,
+ currentEntry,
+ backstackEntry,
+ transaction,
+ frameId
+ )
+ transaction.remove(currentEntry.fragment)
+ transaction.replace(frame.containerViewId, newFragment, newFragmentTag)
+ transaction.commitAllowingStateLoss()
+ }
+ resetHMRChecking()
+ },
+
+ navigate(entry, back = false) {
+ const frame = this._getFrame()
+
+ if (back) {
+ return frame.goBack(entry)
+ }
+
+ // resolve the page from the entry and attach a navigatedTo listener
+ // to fire the frame events
+ const page = entry.create()
+ page.once('navigatedTo', () => {
+ this.$emit('navigated', entry)
+ })
+
+ const handler = args => {
+ if (args.isBackNavigation) {
+ page.off('navigatedFrom', handler)
+
+ this.$emit('navigatedBack', entry)
+ }
+ }
+ page.on('navigatedFrom', handler)
+
+ entry.create = () => page
+
+ this._composeTransition(entry)
+ frame.navigate(entry)
+ },
+
+ back(backstackEntry = null) {
+ this.navigate(backstackEntry, true)
+ }
+ }
+}
diff --git a/platform/nativescript/runtime/components/index.js b/platform/nativescript/runtime/components/index.js
new file mode 100644
index 00000000..f20d3fe2
--- /dev/null
+++ b/platform/nativescript/runtime/components/index.js
@@ -0,0 +1,10 @@
+export { default as ActionBar } from './action-bar'
+export { default as android } from './android'
+export { default as Frame } from './frame'
+export { default as ios } from './ios'
+export { default as ListView } from './list-view'
+export { default as Page } from './page'
+export { default as TabView } from './tab-view'
+export { default as TabViewItem } from './tab-view-item'
+export { default as transition } from './transition'
+export { default as VTemplate } from './v-template'
diff --git a/platform/nativescript/runtime/components/ios.js b/platform/nativescript/runtime/components/ios.js
new file mode 100644
index 00000000..97a9b224
--- /dev/null
+++ b/platform/nativescript/runtime/components/ios.js
@@ -0,0 +1,8 @@
+export default {
+ functional: true,
+ render(h, { children }) {
+ if (require('tns-core-modules/platform').isIOS) {
+ return children
+ }
+ }
+}
diff --git a/platform/nativescript/runtime/components/list-view.js b/platform/nativescript/runtime/components/list-view.js
new file mode 100644
index 00000000..d1f50668
--- /dev/null
+++ b/platform/nativescript/runtime/components/list-view.js
@@ -0,0 +1,113 @@
+import { VUE_VIEW } from './v-template'
+import { extend } from 'shared/util'
+
+export default {
+ props: {
+ items: {
+ type: Object,
+ validator: val => {
+ const ObservableArray = require('tns-core-modules/data/observable-array')
+ return Array.isArray(val) || val instanceof ObservableArray
+ },
+ required: true
+ },
+ '+alias': {
+ type: String,
+ default: 'item'
+ },
+ '+index': {
+ type: String
+ }
+ },
+
+ template: `
+
+
+ `,
+
+ watch: {
+ items: {
+ handler(newVal) {
+ this.$refs.listView.setAttribute('items', newVal)
+ this.refresh()
+ },
+ deep: true
+ }
+ },
+
+ created() {
+ // we need to remove the itemTap handler from a clone of the $listeners
+ // object because we are emitting the event ourselves with added data.
+ const listeners = extend({}, this.$listeners)
+ delete listeners.itemTap
+ this.listeners = listeners
+
+ this.getItemContext = getItemContext.bind(this)
+ },
+
+ mounted() {
+ if (!this.$templates) {
+ return
+ }
+
+ this.$refs.listView.setAttribute(
+ '_itemTemplatesInternal',
+ this.$templates.getKeyedTemplates()
+ )
+ this.$refs.listView.setAttribute('_itemTemplateSelector', (item, index) => {
+ return this.$templates.selectorFn(this.getItemContext(item, index))
+ })
+ },
+
+ methods: {
+ onItemTap(args) {
+ this.$emit('itemTap', extend({ item: this.getItem(args.index) }, args))
+ },
+ onItemLoading(args) {
+ if (!this.$templates) {
+ return
+ }
+
+ const index = args.index
+ const items = args.object.items
+
+ const currentItem = this.getItem(index)
+
+ const name = args.object._itemTemplateSelector(currentItem, index, items)
+ const context = this.getItemContext(currentItem, index)
+ const oldVnode = args.view && args.view[VUE_VIEW]
+
+ args.view = this.$templates.patchTemplate(name, context, oldVnode)
+ },
+ refresh() {
+ this.$refs.listView.nativeView.refresh()
+ },
+ getItem(idx) {
+ return typeof this.items.getItem === 'function'
+ ? this.items.getItem(idx)
+ : this.items[idx]
+ }
+ }
+}
+
+function getItemContext(
+ item,
+ index,
+ alias = this.$props['+alias'],
+ index_alias = this.$props['+index']
+) {
+ return {
+ [alias]: item,
+ [index_alias || '$index']: index,
+ $even: index % 2 === 0,
+ $odd: index % 2 !== 0
+ }
+}
diff --git a/platform/nativescript/runtime/components/page.js b/platform/nativescript/runtime/components/page.js
new file mode 100644
index 00000000..158f2cc1
--- /dev/null
+++ b/platform/nativescript/runtime/components/page.js
@@ -0,0 +1,67 @@
+import {
+ findParentNavigationEntry,
+ getFrameInstance
+} from '../../plugins/navigator-plugin'
+import { isHMRChecking } from '../../util/hmr'
+
+export const PAGE_REF = '__vuePageRef__'
+
+export default {
+ render(h) {
+ return h(
+ 'NativePage',
+ {
+ attrs: this.$attrs,
+ on: this.$listeners
+ },
+ this.$slots.default
+ )
+ },
+ mounted() {
+ this.$el.nativeView[PAGE_REF] = this
+
+ let frame = null
+
+ if (isHMRChecking() && !require('tns-core-modules/platform').isAndroid) {
+ const navEntry = findParentNavigationEntry(this)
+ const options = {
+ frame: navEntry ? navEntry.$options.frame : 'default'
+ }
+ frame = getFrameInstance(options.frame)
+ } else {
+ frame = this._findParentFrame()
+ }
+
+ if (frame) {
+ frame.notifyPageMounted(this)
+ }
+
+ const handler = e => {
+ if (e.isBackNavigation) {
+ this.$el.nativeView.off('navigatedFrom', handler)
+ this.$parent.$destroy()
+ }
+ }
+
+ this.$el.nativeView.on('navigatedFrom', handler)
+
+ // ensure that the parent vue instance is destroyed when the
+ // page is disposed (clearHistory: true for example)
+ const dispose = this.$el.nativeView.disposeNativeView
+ this.$el.nativeView.disposeNativeView = (...args) => {
+ this.$parent.$destroy()
+ dispose.call(this.$el.nativeView, args)
+ }
+ },
+ methods: {
+ _findParentFrame() {
+ let frame = this.$parent
+
+ while (frame && frame.$options.name !== 'Frame') {
+ frame = frame.$parent
+ }
+
+ return frame
+ }
+ }
+}
diff --git a/platform/nativescript/runtime/components/tab-view-item.js b/platform/nativescript/runtime/components/tab-view-item.js
new file mode 100644
index 00000000..9fd35697
--- /dev/null
+++ b/platform/nativescript/runtime/components/tab-view-item.js
@@ -0,0 +1,15 @@
+import { warn } from 'core/util/debug'
+
+export default {
+ template: ` component managing this
+ // transition. One edge case to check is when the is placed
+ // as the root node of a child component. In that case we need to check
+ // 's parent for appear check.
+ let context = activeInstance
+ let transitionNode = activeInstance.$vnode
+ while (transitionNode && transitionNode.parent) {
+ transitionNode = transitionNode.parent
+ context = transitionNode.context
+ }
+
+ const isAppear = !context._isMounted || !vnode.isRootInsert
+
+ if (isAppear && !appear && appear !== '') {
+ return
+ }
+
+ const startClass = isAppear && appearClass ? appearClass : enterClass
+ const activeClass =
+ isAppear && appearActiveClass ? appearActiveClass : enterActiveClass
+ const toClass = isAppear && appearToClass ? appearToClass : enterToClass
+
+ const beforeEnterHook = isAppear ? beforeAppear || beforeEnter : beforeEnter
+ const enterHook = isAppear
+ ? typeof appear === 'function'
+ ? appear
+ : enter
+ : enter
+ const afterEnterHook = isAppear ? afterAppear || afterEnter : afterEnter
+ const enterCancelledHook = isAppear
+ ? appearCancelled || enterCancelled
+ : enterCancelled
+
+ const explicitEnterDuration = toNumber(
+ isObject(duration) ? duration.enter : duration
+ )
+
+ if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) {
+ checkDuration(explicitEnterDuration, 'enter', vnode)
+ }
+
+ const expectsCSS = css !== false
+ const userWantsControl = getHookArgumentsLength(enterHook)
+
+ const cb = (el._enterCb = once(() => {
+ if (expectsCSS) {
+ removeTransitionClass(el, toClass)
+ removeTransitionClass(el, activeClass)
+ }
+ if (cb.cancelled) {
+ if (expectsCSS) {
+ removeTransitionClass(el, startClass)
+ }
+ enterCancelledHook && enterCancelledHook(el)
+ } else {
+ afterEnterHook && afterEnterHook(el)
+ }
+ el._enterCb = null
+ }))
+
+ if (!vnode.data.show) {
+ // remove pending leave element on enter by injecting an insert hook
+ mergeVNodeHook(vnode, 'insert', () => {
+ const parent = el.parentNode
+ const pendingNode =
+ parent && parent._pending && parent._pending[vnode.key]
+ if (
+ pendingNode &&
+ pendingNode.tag === vnode.tag &&
+ pendingNode.elm._leaveCb
+ ) {
+ pendingNode.elm._leaveCb()
+ }
+ enterHook && enterHook(el, cb)
+ })
+ }
+
+ // start enter transition
+ beforeEnterHook && beforeEnterHook(el)
+ if (expectsCSS) {
+ addTransitionClass(el, startClass)
+ addTransitionClass(el, activeClass)
+ nextFrame(() => {
+ removeTransitionClass(el, startClass)
+ if (!cb.cancelled) {
+ addTransitionClass(el, toClass)
+ if (!userWantsControl) {
+ if (isValidDuration(explicitEnterDuration)) {
+ setTimeout(cb, explicitEnterDuration)
+ } else {
+ //whenTransitionEnds(el, type, cb)
+ }
+ }
+ }
+ })
+ }
+
+ if (vnode.data.show) {
+ toggleDisplay && toggleDisplay()
+ enterHook && enterHook(el, cb)
+ }
+
+ if (!expectsCSS && !userWantsControl) {
+ cb()
+ }
+}
+
+export function leave(vnode, rm) {
+ const el = vnode.elm
+
+ // call enter callback now
+ if (isDef(el._enterCb)) {
+ el._enterCb.cancelled = true
+ el._enterCb()
+ }
+
+ const data = resolveTransition(vnode.data.transition)
+ if (isUndef(data) || el.nodeType !== 1) {
+ return rm()
+ }
+
+ /* istanbul ignore if */
+ if (isDef(el._leaveCb)) {
+ return
+ }
+
+ const {
+ css,
+ type,
+ leaveClass,
+ leaveToClass,
+ leaveActiveClass,
+ beforeLeave,
+ leave,
+ afterLeave,
+ leaveCancelled,
+ delayLeave,
+ duration
+ } = data
+
+ const expectsCSS = css !== false
+ const userWantsControl = getHookArgumentsLength(leave)
+
+ const explicitLeaveDuration = toNumber(
+ isObject(duration) ? duration.leave : duration
+ )
+
+ if (process.env.NODE_ENV !== 'production' && isDef(explicitLeaveDuration)) {
+ checkDuration(explicitLeaveDuration, 'leave', vnode)
+ }
+
+ const cb = (el._leaveCb = once(() => {
+ if (el.parentNode && el.parentNode._pending) {
+ el.parentNode._pending[vnode.key] = null
+ }
+ if (expectsCSS) {
+ removeTransitionClass(el, leaveToClass)
+ removeTransitionClass(el, leaveActiveClass)
+ }
+ if (cb.cancelled) {
+ if (expectsCSS) {
+ removeTransitionClass(el, leaveClass)
+ }
+ leaveCancelled && leaveCancelled(el)
+ } else {
+ rm()
+ afterLeave && afterLeave(el)
+ }
+ el._leaveCb = null
+ }))
+
+ if (delayLeave) {
+ delayLeave(performLeave)
+ } else {
+ performLeave()
+ }
+
+ function performLeave() {
+ // the delayed leave may have already been cancelled
+ if (cb.cancelled) {
+ return
+ }
+ // record leaving element
+ if (!vnode.data.show) {
+ ;(el.parentNode._pending || (el.parentNode._pending = {}))[
+ vnode.key
+ ] = vnode
+ }
+ beforeLeave && beforeLeave(el)
+ if (expectsCSS) {
+ addTransitionClass(el, leaveClass)
+ addTransitionClass(el, leaveActiveClass)
+ nextFrame(() => {
+ removeTransitionClass(el, leaveClass)
+ if (!cb.cancelled) {
+ addTransitionClass(el, leaveToClass)
+ if (!userWantsControl) {
+ if (isValidDuration(explicitLeaveDuration)) {
+ setTimeout(cb, explicitLeaveDuration)
+ } else {
+ //whenTransitionEnds(el, type, cb)
+ }
+ }
+ }
+ })
+ }
+ leave && leave(el, cb)
+ if (!expectsCSS && !userWantsControl) {
+ cb()
+ }
+ }
+}
+
+// only used in dev mode
+function checkDuration(val, name, vnode) {
+ if (typeof val !== 'number') {
+ warn(
+ ` explicit ${name} duration is not a valid number - ` +
+ `got ${JSON.stringify(val)}.`,
+ vnode.context
+ )
+ } else if (isNaN(val)) {
+ warn(
+ ` explicit ${name} duration is NaN - ` +
+ 'the duration expression might be incorrect.',
+ vnode.context
+ )
+ }
+}
+
+function isValidDuration(val) {
+ return typeof val === 'number' && !isNaN(val)
+}
+
+/**
+ * Normalize a transition hook's argument length. The hook may be:
+ * - a merged hook (invoker) with the original in .fns
+ * - a wrapped component method (check ._length)
+ * - a plain function (.length)
+ */
+function getHookArgumentsLength(fn) {
+ if (isUndef(fn)) {
+ return false
+ }
+ const invokerFns = fn.fns
+ if (isDef(invokerFns)) {
+ // invoker
+ return getHookArgumentsLength(
+ Array.isArray(invokerFns) ? invokerFns[0] : invokerFns
+ )
+ } else {
+ return (fn._length || fn.length) > 1
+ }
+}
+
+function _enter(_, vnode) {
+ if (vnode.data.show !== true) {
+ enter(vnode)
+ }
+}
+
+export default {
+ create: _enter,
+ activate: _enter,
+ remove(vnode, rm) {
+ /* istanbul ignore else */
+ if (vnode.data.show !== true) {
+ leave(vnode, rm)
+ } else {
+ rm()
+ }
+ }
+}
diff --git a/platform/nativescript/runtime/node-ops.js b/platform/nativescript/runtime/node-ops.js
new file mode 100644
index 00000000..bd70f4f9
--- /dev/null
+++ b/platform/nativescript/runtime/node-ops.js
@@ -0,0 +1,75 @@
+import { default as document } from '../renderer/DocumentNode'
+import { trace } from '../util'
+
+export const namespaceMap = {}
+
+export function createElement(tagName, vnode) {
+ trace(`CreateElement(${tagName})`)
+ return document.createElement(tagName)
+}
+
+export function createElementNS(namespace, tagName) {
+ trace(`CreateElementNS(${namespace}#${tagName})`)
+ return document.createElementNS(namespace, tagName)
+}
+
+export function createTextNode(text) {
+ trace(`CreateTextNode(${text})`)
+ return document.createTextNode(text)
+}
+
+export function createComment(text) {
+ trace(`CreateComment(${text})`)
+
+ return document.createComment(text)
+}
+
+export function insertBefore(parentNode, newNode, referenceNode) {
+ trace(`InsertBefore(${parentNode}, ${newNode}, ${referenceNode})`)
+ return parentNode.insertBefore(newNode, referenceNode)
+}
+
+export function removeChild(node, child) {
+ trace(`RemoveChild(${node}, ${child})`)
+ return node.removeChild(child)
+}
+
+export function appendChild(node, child) {
+ trace(`AppendChild(${node}, ${child})`)
+
+ return node.appendChild(child)
+}
+
+export function parentNode(node) {
+ trace(`ParentNode(${node}) -> ${node.parentNode}`)
+
+ return node.parentNode
+}
+
+export function nextSibling(node) {
+ trace(`NextSibling(${node}) -> ${node.nextSibling}`)
+
+ return node.nextSibling
+}
+
+export function tagName(elementNode) {
+ trace(`TagName(${elementNode}) -> ${elementNode.tagName}`)
+
+ return elementNode.tagName
+}
+
+export function setTextContent(node, text) {
+ trace(`SetTextContent(${node}, ${text})`)
+
+ node.setText(text)
+}
+
+export function setAttribute(node, key, val) {
+ trace(`SetAttribute(${node}, ${key}, ${val})`)
+
+ node.setAttribute(key, val)
+}
+
+export function setStyleScope(node, scopeId) {
+ node.setAttribute(scopeId, '')
+}
diff --git a/platform/nativescript/runtime/patch.js b/platform/nativescript/runtime/patch.js
new file mode 100644
index 00000000..1a5022c1
--- /dev/null
+++ b/platform/nativescript/runtime/patch.js
@@ -0,0 +1,12 @@
+import { createPatchFunction } from 'core/vdom/patch'
+import baseModules from 'core/vdom/modules/index'
+
+import platformModules from './modules/index'
+import * as nodeOps from './node-ops'
+
+const modules = platformModules.concat(baseModules)
+
+export const patch = createPatchFunction({
+ nodeOps,
+ modules
+})
diff --git a/platform/nativescript/util/entity-decoder.js b/platform/nativescript/util/entity-decoder.js
new file mode 100644
index 00000000..81fc9043
--- /dev/null
+++ b/platform/nativescript/util/entity-decoder.js
@@ -0,0 +1,8 @@
+export default {
+ decode
+}
+
+export function decode(html) {
+ // todo?
+ return html
+}
diff --git a/platform/nativescript/util/frame.js b/platform/nativescript/util/frame.js
new file mode 100644
index 00000000..93300d0a
--- /dev/null
+++ b/platform/nativescript/util/frame.js
@@ -0,0 +1,13 @@
+const frames = new Map()
+
+export function setFrame(id, frame) {
+ return frames.set(id, frame)
+}
+
+export function getFrame(id) {
+ return frames.get(id)
+}
+
+export function deleteFrame(id) {
+ return frames.delete(id)
+}
diff --git a/platform/nativescript/util/hmr.js b/platform/nativescript/util/hmr.js
new file mode 100644
index 00000000..9c490a86
--- /dev/null
+++ b/platform/nativescript/util/hmr.js
@@ -0,0 +1,17 @@
+let hmrChecking = false
+
+export const isHMRChecking = () => {
+ return hmrChecking
+}
+
+export const resetHMRChecking = () => {
+ hmrChecking = false
+}
+
+if (module.hot) {
+ module.hot.addStatusHandler(status => {
+ if (status === 'check') {
+ hmrChecking = true
+ }
+ })
+}
diff --git a/platform/nativescript/util/index.js b/platform/nativescript/util/index.js
new file mode 100644
index 00000000..89e27c24
--- /dev/null
+++ b/platform/nativescript/util/index.js
@@ -0,0 +1,113 @@
+import { isKnownView, getViewMeta, getViewClass } from '../element-registry'
+import { makeMap, once } from 'shared/util'
+import { VUE_VM_REF } from '../constants'
+
+export const isReservedTag = makeMap('template', true)
+
+let _Vue
+
+export function setVue(Vue) {
+ _Vue = Vue
+}
+
+export const canBeLeftOpenTag = function(el) {
+ return getViewMeta(el).canBeLeftOpenTag
+}
+
+export const isUnaryTag = function(el) {
+ return getViewMeta(el).isUnaryTag
+}
+
+export function mustUseProp() {
+ // console.log('mustUseProp')
+}
+
+export function getTagNamespace(el) {
+ return getViewMeta(el).tagNamespace
+}
+
+export function isUnknownElement(el) {
+ return !isKnownView(el)
+}
+
+export function isPage(el) {
+ return el && el.tagName === 'nativepage'
+}
+
+/** @deprecated */
+export function ensurePage(el, vm) {
+ if (!isPage(el)) {
+ const page = new (getViewClass('page'))()
+ page.content = el.nativeView
+ if (vm) {
+ page[VUE_VM_REF] = vm
+ page.disposeNativeView = after(page.disposeNativeView, page, () =>
+ vm.$destroy()
+ )
+ }
+ return page
+ }
+
+ if (vm) {
+ el.nativeView[VUE_VM_REF] = vm
+ el.disposeNativeView = after(el.disposeNativeView, el, () => vm.$destroy())
+ }
+
+ return el.nativeView
+}
+
+export function query(el, renderer, document) {
+ // Todo
+}
+
+export const VUE_VERSION = process.env.VUE_VERSION
+export const NS_VUE_VERSION = process.env.NS_VUE_VERSION
+
+const infoTrace = once(() => {
+ console.log(
+ `NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.`
+ )
+})
+
+export function trace(message) {
+ if (_Vue && _Vue.config.silent) {
+ return infoTrace()
+ }
+
+ console.log(
+ `{NSVue (Vue: ${VUE_VERSION} | NSVue: ${NS_VUE_VERSION})} -> ${message}`
+ )
+}
+
+export function before(original, thisArg, wrap) {
+ return function(...args) {
+ wrap.call(null, ...args)
+ original.call(thisArg, ...args)
+ }
+}
+
+export function after(original, thisArg, wrap) {
+ return function(...args) {
+ original.call(thisArg, ...args)
+ wrap.call(null, ...args)
+ }
+}
+
+export function deepProxy(object, depth = 0) {
+ return new Proxy(object, {
+ get(target, key) {
+ if (key === 'toString' || key === 'valueOf') {
+ return () => ''
+ }
+
+ if (key === Symbol.toPrimitive) {
+ return hint => hint
+ }
+
+ if (depth > 10) {
+ throw new Error('deepProxy over 10 deep.')
+ }
+ return deepProxy({}, depth + 1)
+ }
+ })
+}
diff --git a/postinstall.js b/postinstall.js
new file mode 100644
index 00000000..195635eb
--- /dev/null
+++ b/postinstall.js
@@ -0,0 +1,2 @@
+var hook = require("nativescript-hook")(__dirname);
+hook.postinstall();
\ No newline at end of file
diff --git a/preuninstall.js b/preuninstall.js
new file mode 100644
index 00000000..c2951f12
--- /dev/null
+++ b/preuninstall.js
@@ -0,0 +1,2 @@
+var hook = require("nativescript-hook")(__dirname);
+hook.preuninstall();
\ No newline at end of file
diff --git a/samples/.npmrc b/samples/.npmrc
new file mode 100644
index 00000000..43c97e71
--- /dev/null
+++ b/samples/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/samples/app/127.js b/samples/app/127.js
new file mode 100644
index 00000000..07ca8735
--- /dev/null
+++ b/samples/app/127.js
@@ -0,0 +1,25 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+ data: {
+ foo: false
+ },
+ template: `
+
+
+
+
+
+
+
+
+ `,
+ created() {
+ console.log(Vue.compile(this.$options.template).render.toString())
+ }
+}).$start()
diff --git a/samples/app/171.js b/samples/app/171.js
new file mode 100644
index 00000000..bdb77b69
--- /dev/null
+++ b/samples/app/171.js
@@ -0,0 +1,25 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.silent = false
+
+new Vue({
+ data: {
+ password: 'mypass'
+ },
+ template: `
+
+
+
+
+
+
+
+ `
+}).$start()
diff --git a/samples/app/217.js b/samples/app/217.js
new file mode 100644
index 00000000..b5c79cbe
--- /dev/null
+++ b/samples/app/217.js
@@ -0,0 +1,44 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+const CustomComponent = {
+ // defining props breaks this on iOS
+ // props: ['text'],
+ template: ``
+}
+
+const PageContent = {
+ data() {
+ return {
+ normal: false,
+ custom: false
+ }
+ },
+ template: `
+
+
+
+
+
+ `,
+ components: {
+ CustomComponent
+ }
+}
+
+new Vue({
+ data: {
+ content: PageContent
+ },
+ template: `
+
+
+
+
+ `
+}).$start()
diff --git a/samples/app/220.js b/samples/app/220.js
new file mode 100644
index 00000000..1d7bb09b
--- /dev/null
+++ b/samples/app/220.js
@@ -0,0 +1,41 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+const CompButton = {
+ template: `
+
+ `,
+ name: 'CompButton',
+ props: ['label', 'counter'],
+ destroyed() {
+ console.log('Component destroyed. This should not happen')
+ }
+}
+
+new Vue({
+ data: {
+ counter: 0
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+ `,
+ created() {
+ console.log(Vue.compile(this.$options.template).render.toString())
+ },
+ components: {
+ CompButton
+ }
+}).$start()
diff --git a/samples/app/229.js b/samples/app/229.js
new file mode 100644
index 00000000..cfad5b7e
--- /dev/null
+++ b/samples/app/229.js
@@ -0,0 +1,24 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.silent = false
+
+new Vue({
+ data: {
+ items: [{ color: 'red' }, { color: 'blue' }]
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ `
+}).$start()
diff --git a/samples/app/231.js b/samples/app/231.js
new file mode 100644
index 00000000..8ed462fe
--- /dev/null
+++ b/samples/app/231.js
@@ -0,0 +1,56 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.silent = false
+
+const ImageCard = {
+ props: {
+ src: {
+ type: String,
+ required: true
+ }
+ },
+ template: '
+
+
+
+
+
+
+
+
+ `,
+
+ data() {
+ return {
+ imgs: [],
+ surprise: false,
+ q: ''
+ }
+ },
+
+ methods: {
+ search() {
+ this.$refs.search.nativeView.dismissSoftInput()
+ fetch(`${url}?api_key=${key}&q=${this.q}&${filter}`)
+ .then(response => response.json())
+ .then(json => (this.imgs = json.data))
+ }
+ }
+}).$start()
diff --git a/samples/app/240.js b/samples/app/240.js
new file mode 100644
index 00000000..12e835fa
--- /dev/null
+++ b/samples/app/240.js
@@ -0,0 +1,163 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+ computed: {
+ filteredFoo() {
+ if (this.submittedPhrase == '') {
+ return this.fooList
+ }
+
+ let foo = this.fooList.filter(item => {
+ return (
+ item.title
+ .toLowerCase()
+ .indexOf(this.submittedPhrase.toLowerCase()) !== -1
+ )
+ })
+
+ return foo
+ },
+ filteredBar() {
+ if (this.submittedPhrase == '') {
+ return this.barList
+ }
+
+ let bar = this.barList.filter(item => {
+ return (
+ item.title
+ .toLowerCase()
+ .indexOf(this.submittedPhrase.toLowerCase()) !== -1
+ )
+ })
+
+ return bar
+ },
+ filteredFooBar() {
+ if (this.submittedPhrase == '') {
+ return this.fooBarList
+ }
+
+ let fooBar = this.fooBarList.filter(item => {
+ return (
+ item.title
+ .toLowerCase()
+ .indexOf(this.submittedPhrase.toLowerCase()) !== -1
+ )
+ })
+
+ return fooBar
+ }
+ },
+ methods: {
+ onSearchSubmit(args) {
+ let searchBar = args.object
+ console.log('You are searching for [' + searchBar.text + ']')
+
+ this.submittedPhrase = searchBar.text
+ }
+ },
+ data() {
+ return {
+ searchPhrase: '',
+ submittedPhrase: '',
+ fooList: [
+ {
+ id: 1,
+ title: 'Foo 1'
+ },
+ {
+ id: 2,
+ title: 'Foo 2'
+ },
+ {
+ id: 3,
+ title: 'Foo 3'
+ }
+ ],
+ barList: [
+ {
+ id: 11,
+ title: 'Bar 1'
+ },
+ {
+ id: 12,
+ title: 'Bar 2'
+ },
+ {
+ id: 13,
+ title: 'Bar 3'
+ }
+ ],
+ fooBarList: [
+ {
+ id: 21,
+ title: 'Foo Bar 1'
+ },
+ {
+ id: 22,
+ title: 'Foo Bar 2'
+ },
+ {
+ id: 23,
+ title: 'Foo Bar 3'
+ }
+ ]
+ }
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+}).$start()
diff --git a/samples/app/272.js b/samples/app/272.js
new file mode 100644
index 00000000..12b45161
--- /dev/null
+++ b/samples/app/272.js
@@ -0,0 +1,42 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+class User {
+ constructor(name) {
+ this.name = name.toUpperCase()
+ }
+}
+
+new Vue({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ data() {
+ return {
+ userList: [new User('John'), new User('Paul')]
+ }
+ },
+ methods: {
+ onTap({ object }) {
+ console.log(`Tapped on ${object.text}`)
+ }
+ }
+}).$start()
diff --git a/samples/app/339.js b/samples/app/339.js
new file mode 100644
index 00000000..5efddc74
--- /dev/null
+++ b/samples/app/339.js
@@ -0,0 +1,92 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+let step1_id = 0
+const Step1 = {
+ template: `
+
+
+
+
+
+
+ `,
+ created() {
+ console.log('Step 1 created.')
+ this.stepid = ++step1_id
+ this.interval = setInterval(() => {
+ console.log(`[${this.stepid}] step 1 is alive`)
+ }, 1000)
+ },
+ beforeDestroy() {
+ console.log('Destroying step 1...')
+ },
+ destroyed() {
+ console.log('Step 1 destroyed.')
+ clearInterval(this.interval)
+ },
+ methods: {
+ next() {
+ this.$navigateTo(Step2)
+ }
+ }
+}
+
+const Step2 = {
+ template: `
+
+
+
+
+
+
+ `,
+ created() {
+ console.log('Step 2 created.')
+ },
+ beforeDestroy() {
+ console.log('Destroying step 2...')
+ },
+ destroyed() {
+ console.log('Step 2 destroyed.')
+ },
+ methods: {
+ next() {
+ this.$navigateTo(Step3, { transition: 'slideTop' })
+ }
+ }
+}
+
+const Step3 = {
+ template: `
+
+
+
+
+
+
+ `,
+ created() {
+ console.log('Step 3 created.')
+ },
+ beforeDestroy() {
+ console.log('Destroying step 3...')
+ },
+ destroyed() {
+ console.log('Step 3 destroyed.')
+ },
+ methods: {
+ reset() {
+ this.$navigateTo(Step1, { clearHistory: true })
+ }
+ }
+}
+
+new Vue({
+ render: h => h('frame', [h(Step1)])
+}).$start()
diff --git a/samples/app/344.js b/samples/app/344.js
new file mode 100644
index 00000000..a798120a
--- /dev/null
+++ b/samples/app/344.js
@@ -0,0 +1,142 @@
+const Vue = require('nativescript-vue')
+const VueDevtools = require('nativescript-vue-devtools')
+Vue.use(VueDevtools)
+Vue.config.debug = true
+Vue.config.silent = false
+
+const CustomButton = {
+ template: ``,
+ props: ['text']
+}
+
+let step1_id = 0
+const Step1 = {
+ template: `
+
+
+
+
+
+
+
+
+ `,
+ components: { CustomButton },
+
+ created() {
+ console.log('Step 1 created.')
+ },
+
+ beforeDestroy() {
+ console.log('Destroying step 1...')
+ },
+
+ destroyed() {
+ console.log('Step 1 destroyed.')
+ },
+
+ methods: {
+ next() {
+ this.$navigateTo(Step2, { frame: 'second' })
+ }
+ }
+}
+
+const Step2 = {
+ template: `
+
+
+
+
+
+
+ `,
+ created() {
+ console.log('Step 2 created.')
+ },
+ beforeDestroy() {
+ console.log('Destroying step 2...')
+ },
+ destroyed() {
+ console.log('Step 2 destroyed.')
+ },
+ methods: {
+ next() {
+ this.$navigateTo(Step3, { frame: 'second' })
+ }
+ }
+}
+
+const Step3 = {
+ template: `
+
+
+
+
+
+
+ `,
+ created() {
+ console.log('Step 3 created.')
+ },
+ beforeDestroy() {
+ console.log('Destroying step 3...')
+ },
+ destroyed() {
+ console.log('Step 3 destroyed.')
+ },
+ methods: {
+ reset() {
+ this.$navigateTo(Step1, { frame: 'second', clearHistory: true })
+ }
+ }
+}
+
+const FirstTab = {
+ template: `
+
+
+
+
+
+ `
+}
+
+const TabBar = {
+ template: `
+
+
+
+
+
+
+
+
+ `,
+ components: { FirstTab, Step1 },
+
+ data() {
+ return {
+ screen: 0
+ }
+ }
+}
+
+new Vue({
+ render: h => h(TabBar)
+}).$start()
diff --git a/samples/app/445.js b/samples/app/445.js
new file mode 100644
index 00000000..5605ccc3
--- /dev/null
+++ b/samples/app/445.js
@@ -0,0 +1,36 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+ components: {
+ ComponentWithSlot: {
+ data() {
+ return {
+ counter: 0
+ }
+ },
+ template: `
+
+
+ `
+ }
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+ `
+}).$start()
diff --git a/samples/app/464.js b/samples/app/464.js
new file mode 100644
index 00000000..8a6eb8ed
--- /dev/null
+++ b/samples/app/464.js
@@ -0,0 +1,31 @@
+const Vue = require('./nativescript-vue')
+const {
+ ObservableArray
+} = require('tns-core-modules/data/observable-array/observable-array')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+ data: {
+ items: new ObservableArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+ },
+ methods: {
+ onItemTap({ item }) {
+ this.items.push(`Item clicked: ${item} (shouldn't be \`undefined\`)`)
+ }
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+ `
+}).$start()
diff --git a/samples/app/76.js b/samples/app/76.js
new file mode 100644
index 00000000..4eb3488a
--- /dev/null
+++ b/samples/app/76.js
@@ -0,0 +1,37 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+ data: {
+ selectedTab: 0
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ created() {
+ console.log(Vue.compile(this.$options.template).render.toString())
+ }
+}).$start()
diff --git a/samples/app/App_Resources/Android/app.gradle b/samples/app/App_Resources/Android/app.gradle
new file mode 100644
index 00000000..2c02c1d3
--- /dev/null
+++ b/samples/app/App_Resources/Android/app.gradle
@@ -0,0 +1,11 @@
+// Add your native dependencies here:
+
+android {
+ defaultConfig {
+ generatedDensities = []
+ applicationId = "org.nativescript.application"
+ }
+ aaptOptions {
+ additionalParameters "--no-version-vectors"
+ }
+}
diff --git a/samples/app/App_Resources/Android/src/main/AndroidManifest.xml b/samples/app/App_Resources/Android/src/main/AndroidManifest.xml
new file mode 100644
index 00000000..1fb79118
--- /dev/null
+++ b/samples/app/App_Resources/Android/src/main/AndroidManifest.xml
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/App_Resources/Android/src/main/res/drawable-xhdpi/background.png b/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png
similarity index 97%
rename from demo/App_Resources/Android/src/main/res/drawable-xhdpi/background.png
rename to samples/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png
index 3541570c..64200327 100644
Binary files a/demo/App_Resources/Android/src/main/res/drawable-xhdpi/background.png and b/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png b/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png
new file mode 100644
index 00000000..117b444a
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png b/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png
new file mode 100644
index 00000000..711905f3
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png differ
diff --git a/demo/App_Resources/Android/src/main/res/drawable-ldpi/background.png b/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png
similarity index 93%
rename from demo/App_Resources/Android/src/main/res/drawable-ldpi/background.png
rename to samples/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png
index f6a08eea..03befc22 100644
Binary files a/demo/App_Resources/Android/src/main/res/drawable-ldpi/background.png and b/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png b/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png
new file mode 100644
index 00000000..bd04848e
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png b/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png
new file mode 100644
index 00000000..af908e46
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png differ
diff --git a/demo/App_Resources/Android/src/main/res/drawable-mdpi/background.png b/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png
similarity index 94%
rename from demo/App_Resources/Android/src/main/res/drawable-mdpi/background.png
rename to samples/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png
index 0c90f0f7..cfe4a7c2 100644
Binary files a/demo/App_Resources/Android/src/main/res/drawable-mdpi/background.png and b/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png b/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png
new file mode 100644
index 00000000..32aa6176
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png b/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png
new file mode 100644
index 00000000..c21ae444
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png differ
diff --git a/demo/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml b/samples/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml
similarity index 100%
rename from demo/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml
rename to samples/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml
diff --git a/demo/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png b/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png
similarity index 98%
rename from demo/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png
rename to samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png
index abb0fc70..b06ae267 100644
Binary files a/demo/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png and b/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png b/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png
new file mode 100644
index 00000000..12950046
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png b/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png
new file mode 100644
index 00000000..4ad5346d
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png differ
diff --git a/demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png b/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png
similarity index 98%
rename from demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png
rename to samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png
index 10897752..9bc7f010 100644
Binary files a/demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png and b/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png b/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png
new file mode 100644
index 00000000..541e7591
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png b/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png
new file mode 100644
index 00000000..bcc40119
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png b/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png
new file mode 100644
index 00000000..d93c3d8f
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png b/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png
new file mode 100644
index 00000000..072b6013
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png differ
diff --git a/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png b/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png
new file mode 100644
index 00000000..96acb1ec
Binary files /dev/null and b/samples/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png differ
diff --git a/demo/App_Resources/Android/src/main/res/values/ic_launcher_background.xml b/samples/app/App_Resources/Android/src/main/res/values-v21/colors.xml
similarity index 52%
rename from demo/App_Resources/Android/src/main/res/values/ic_launcher_background.xml
rename to samples/app/App_Resources/Android/src/main/res/values-v21/colors.xml
index c5d5899f..a64641a9 100644
--- a/demo/App_Resources/Android/src/main/res/values/ic_launcher_background.xml
+++ b/samples/app/App_Resources/Android/src/main/res/values-v21/colors.xml
@@ -1,4 +1,4 @@
- #FFFFFF
+ #3d5afe
\ No newline at end of file
diff --git a/samples/app/App_Resources/Android/src/main/res/values-v21/strings.xml b/samples/app/App_Resources/Android/src/main/res/values-v21/strings.xml
new file mode 100644
index 00000000..a625ad4d
--- /dev/null
+++ b/samples/app/App_Resources/Android/src/main/res/values-v21/strings.xml
@@ -0,0 +1,5 @@
+
+
+ NativeScript-Vue Application
+ NativeScript-Vue Application
+
diff --git a/demo/App_Resources/Android/src/main/res/values-v21/styles.xml b/samples/app/App_Resources/Android/src/main/res/values-v21/styles.xml
similarity index 50%
rename from demo/App_Resources/Android/src/main/res/values-v21/styles.xml
rename to samples/app/App_Resources/Android/src/main/res/values-v21/styles.xml
index 04d8a065..acff7c9c 100644
--- a/demo/App_Resources/Android/src/main/res/values-v21/styles.xml
+++ b/samples/app/App_Resources/Android/src/main/res/values-v21/styles.xml
@@ -1,34 +1,23 @@
-
-
+
+
-
-
-
-
+
\ No newline at end of file
diff --git a/samples/app/App_Resources/Android/src/main/res/values/colors.xml b/samples/app/App_Resources/Android/src/main/res/values/colors.xml
new file mode 100644
index 00000000..74ad8829
--- /dev/null
+++ b/samples/app/App_Resources/Android/src/main/res/values/colors.xml
@@ -0,0 +1,7 @@
+
+
+ #F5F5F5
+ #757575
+ #33B5E5
+ #272734
+
\ No newline at end of file
diff --git a/samples/app/App_Resources/Android/src/main/res/values/strings.xml b/samples/app/App_Resources/Android/src/main/res/values/strings.xml
new file mode 100644
index 00000000..a625ad4d
--- /dev/null
+++ b/samples/app/App_Resources/Android/src/main/res/values/strings.xml
@@ -0,0 +1,5 @@
+
+
+ NativeScript-Vue Application
+ NativeScript-Vue Application
+
diff --git a/demo/App_Resources/Android/src/main/res/values/styles.xml b/samples/app/App_Resources/Android/src/main/res/values/styles.xml
similarity index 93%
rename from demo/App_Resources/Android/src/main/res/values/styles.xml
rename to samples/app/App_Resources/Android/src/main/res/values/styles.xml
index 4f91b610..fae0f4b7 100644
--- a/demo/App_Resources/Android/src/main/res/values/styles.xml
+++ b/samples/app/App_Resources/Android/src/main/res/values/styles.xml
@@ -10,8 +10,8 @@
- @color/ns_accent
- @drawable/splash_screen
-
- - true
+
+ - true
- true
@@ -30,7 +30,7 @@
-
+