feat: multiple frames (#325)

* feat(frame and page): added frame and page component wrappers

This change should allow a frame which is not topmost to still navigate a child page

* feat: handle backstack caching / restoring

* refactor: wip frame/page changes

* feat(frame): fire frame events from the frame wrapper

* feat: allow passing frame to $navigateTo

BREAKING CHANGE: the options object of $navigateTo has been simplified

fix #213

* refactor: add frames to sample

* refactor: add <Frame> element to all samples 

* Fix typo error which happens in case-sensitive filesystems.

* Add <Frame> node to all the samples.

* refactor: remove configuration object from $start

* fix: wrong conditional for v-for warning on listview

* feat: inject hasRouterView property during template compilation

* refactor: remove navigation call from renderer

* feat: add support for <router-view> in Frame

and fix wrong parent frame search function

* refactor: add back button handler to sample - optional

* refactor: remove old RouterPlugin

* feat: <router-view> nested in <Frame> (#286)

* chore: update backers

* feat: Starting router chores

* horror: Juggling router-views

* fix: rollup

* fix: Add a missing method.

* add: frame transition support

* fix: back transition not detected
add: back transition auto flips direction (for predefined {N} transitions) - configurable with back-transition="flip|mirror" - default: flip.

* chore: Remove some nextTicks that are seemingly not needed.
chore: cache regexps.
add: Try adding some profiling stats.

* add: remove buble in order to use ES2015+ as both Android and iOS engines are quite new.
add: Add some ES2015+ operators where possible
add: return elements where they should be returnes
add: start implementing support for push/replace/go with animation object.
fix: change one deprecated command

* fix: specifying Page transition on push/replace/go.
chore: convert NativeScriptHistory to class.

* fix: remove the back-transition setting, as it breaks page reusability. This breaks ListView events after back navigation though.

* fix: the back problem (hopefully) - needs more testing first

* fix: remove buble references
fix: speed up default slide transitions to match Angular ones
add: prop.decode modifier to decode HTML entities

* fix: the page is still reactive while leaving it - causes changes to $route to be visible.

* fix: really destroy the page when it should be (previous on back navigation)

* fix: router back on app root

* fix: iOS back button skips the router
chore: some formatting

* fix: rename transition props to ios:transition and android:transition

* refactor: clean up unneded code

* chore: build into samples dir

* test: update sample app for router v2

* Sample app for testing routing with vue-router, tabs and RadSideDrawer. See #292

* fix: fixed . See #292

* feat: frame and router changes (#321)

* add: dev:dist script to run ns-vue locally

* chore: refactor router plugin to History only

* fix: remove default on require
temp: test some performance tweaks

* fix: formatting

* fix: the way router is used
add: export router from ns-vue

* fix: router replace

* chore: formatting

* chore: formatting

* fix: better plugin and remove router from ns-vue

* fix: use a simpler factory mixin for the extensibility point

* fix: back transition after mingling with components

* fix: possibility to stop back button handling

* add: start implementing router cache

* fix: simplify page

* fix: more simplification

* chore: remove a row

* fix: linting

Author: rigor789

build/config.js

@@ -1,7 +1,6 @@
 const alias = require('rollup-plugin-alias')
 const commonjs = require('rollup-plugin-commonjs')
 const resolve = require('rollup-plugin-node-resolve')
-const buble = require('rollup-plugin-buble')
 const replace = require('rollup-plugin-replace')
 const flow = require('rollup-plugin-flow-no-whitespace')
 const path = require('path')
@@ -65,6 +64,9 @@ const genConfig = (name) => {
         treeshake: {
             pureExternalModules: id => id.startsWith('weex')
         },
+        watch: {
+            chokidar: false
+        },
         plugins: [
             replace({
                 __WEEX__: false,
@@ -75,7 +77,6 @@ const genConfig = (name) => {
                 'process.env.NS_VUE_VERSION': `'${NSVueVersion}'`
             }),
             flow(),
-            buble(),
             alias(aliases),
             resolve(),
             commonjs(),

package.json

@@ -13,6 +13,7 @@
     "tdd": "jest --watch",
     "samples": "node build/sample-runner.js",
     "dev": "rollup -c build/config.js -w --o samples/app/nativescript-vue.js --environment TARGET:nativescript-vue",
+    "dev:dist": "rollup -c build/config.js -w --o dist/index.js --environment TARGET:nativescript-vue",
     "build": "node build/build.js",
     "build:docs": "cd docs && npm run build",
     "prettier": "prettier --no-semi --single-quote --write \"{{platform,__test__}/**/*.js,samples/app/*.js}\"",
@@ -65,18 +66,17 @@
     "jest-junit": "^3.5.0",
     "lint-staged": "^6.1.0",
     "prettier": "^1.10.2",
-    "rollup": "^0.55.3",
+    "rollup": "^0.62.0",
     "rollup-plugin-alias": "^1.4.0",
-    "rollup-plugin-buble": "^0.18.0",
-    "rollup-plugin-commonjs": "^8.3.0",
+    "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-flow-no-whitespace": "^1.0.0",
-    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-resolve-aliases": "^0.2.0",
     "rollup-watch": "^4.3.1",
     "semver": "^5.5.0",
     "set-value": "^2.0.0",
-    "tns-core-modules": "4.0.0",
+    "tns-core-modules": "4.1.0",
     "util-inspect": "^0.1.8",
     "vue": "^2.5.17"
   },

platform/nativescript/compiler/modules/for.js

@@ -6,7 +6,7 @@ import { warn } from 'core/util/debug'
 function preTransformNode(el) {
   let vfor
 
-  if (normalizeElementName(el.tag) === 'listview') {
+  if (normalizeElementName(el.tag) === 'nativelistview') {
     vfor = getAndRemoveAttr(el, 'v-for')
     delete el.attrsMap['v-for']
     if (process.env.NODE_ENV !== 'production' && vfor) {

platform/nativescript/compiler/modules/index.js

@@ -1,7 +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_, view]
+export default [class_, style, vTemplate, for_, router, view]

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
+}

platform/nativescript/element-registry.js

@@ -1,6 +1,8 @@
 import * as builtInComponents from './runtime/components'
 
-const elementMap = new Map()
+const elementMap = {}
+const nativeRegExp = /Native/gi
+const dashRegExp = /-/g
 
 const defaultViewMeta = {
   skipAddToDom: false,
@@ -13,8 +15,8 @@ const defaultViewMeta = {
 
 export function normalizeElementName(elementName) {
   return `native${elementName
-    .replace(/Native/gi, '')
-    .replace(/-/g, '')
+    .replace(nativeRegExp, '')
+    .replace(dashRegExp, '')
     .toLowerCase()}`
 }
 
@@ -23,7 +25,7 @@ export function registerElement(elementName, resolver, meta) {
 
   meta = Object.assign({}, defaultViewMeta, meta)
 
-  if (elementMap.has(normalizedName)) {
+  if (elementMap[normalizedName]) {
     throw new Error(`Element for ${elementName} already registered.`)
   }
 
@@ -44,7 +46,7 @@ export function registerElement(elementName, resolver, meta) {
     resolver: resolver,
     meta: meta
   }
-  elementMap.set(normalizedName, entry)
+  elementMap[normalizedName] = entry
 }
 
 export function getElementMap() {
@@ -53,7 +55,7 @@ export function getElementMap() {
 
 export function getViewClass(elementName) {
   const normalizedName = normalizeElementName(elementName)
-  const entry = elementMap.get(normalizedName)
+  const entry = elementMap[normalizedName]
 
   if (!entry) {
     throw new TypeError(`No known component for element ${elementName}.`)
@@ -70,7 +72,7 @@ export function getViewMeta(elementName) {
   const normalizedName = normalizeElementName(elementName)
 
   let meta = defaultViewMeta
-  const entry = elementMap.get(normalizedName)
+  const entry = elementMap[normalizedName]
 
   if (entry && entry.meta) {
     meta = entry.meta
@@ -80,7 +82,7 @@ export function getViewMeta(elementName) {
 }
 
 export function isKnownView(elementName) {
-  return elementMap.has(normalizeElementName(elementName))
+  return elementMap[normalizeElementName(elementName)]
 }
 
 registerElement(
@@ -214,8 +216,10 @@ registerElement(
   }
 )
 registerElement('Page', () => require('tns-core-modules/ui/page').Page, {
-  skipAddToDom: true
+  skipAddToDom: true,
+  component: builtInComponents.Page
 })
+
 registerElement(
   'Placeholder',
   () => require('tns-core-modules/ui/placeholder').Placeholder
@@ -360,8 +364,9 @@ registerElement(
 
 registerElement('Frame', () => require('tns-core-modules/ui/frame').Frame, {
   insertChild(parentNode, childNode, atIndex) {
-    if (normalizeElementName(childNode.tagName) === 'nativepage') {
-      parentNode.nativeView.navigate({ create: () => childNode.nativeView })
-    }
-  }
+    // if (normalizeElementName(childNode.tagName) === 'nativepage') {
+    // parentNode.nativeView.navigate({ create: () => childNode.nativeView })
+    // }
+  },
+  component: builtInComponents.Frame
 })

platform/nativescript/framework.js

@@ -9,7 +9,6 @@ import application from 'tns-core-modules/application'
 import Vue from './runtime/index'
 import ModalPlugin from './plugins/modal-plugin'
 import NavigatorPlugin from './plugins/navigator-plugin'
-import RouterPlugin from './plugins/router-plugin'
 
 import { setVue } from './util'
 
@@ -19,18 +18,19 @@ setVue(Vue)
 
 Vue.use(ModalPlugin)
 Vue.use(NavigatorPlugin)
-Vue.use(RouterPlugin)
+
+const newLineRegExp = /\\n/g
 
 console.log = (function(log, inspect, Vue) {
-  return function() {
-    return log.apply(
+  return function(...args) {
+    return log.call(
       this,
-      Array.prototype.map.call(arguments, function(arg) {
+      ...Array.prototype.map.call(args, function(arg) {
         return inspect(arg, {
           depth: 2,
           colors: Vue.config.debug,
           showHidden: true
-        }).replace(/\\n/g, '\n')
+        }).replace(newLineRegExp, '\n')
       })
     )
   }

platform/nativescript/plugins/navigator-plugin.js

@@ -1,33 +1,52 @@
-import { topmost } from 'tns-core-modules/ui/frame'
-import { ensurePage } from '../util'
+import { isObject, isDef, isPrimitive } from 'shared/util'
+import { getFrame } from '../util/frame'
+import { getFrameById } from 'tns-core-modules/ui/frame'
+
+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 = getFrameById(frame)
+  } else if (isDef(frame.nativeView)) {
+    frame = frame.nativeView
+  }
+  // finally get the component instance for this frame
+  return getFrame(frame.id)
+}
 
 export default {
   install(Vue) {
-    Vue.navigateBack = Vue.prototype.$navigateBack = function() {
-      return topmost().goBack()
-    }
+    Vue.prototype.$navigateBack = function(options) {
+      const defaultOptions = {
+        frame: 'default'
+      }
+      options = Object.assign({}, defaultOptions, options)
+      const frame = getFrameInstance(options.frame)
 
-    Vue.navigateTo = Vue.prototype.$navigateTo = function(
-      component,
-      options = {},
-      pageCb = () => {}
-    ) {
-      return new Promise(resolve => {
-        const navigationEntry = {
-          create() {
-            const vm = new (Vue.extend(component))(options.context)
-
-            vm.$mount()
-            const pageInstance = ensurePage(vm.$el, vm)
+      frame.back()
+    }
 
-            pageCb(pageInstance)
-            resolve(pageInstance)
+    Vue.prototype.$navigateTo = function(component, options) {
+      const defaultOptions = {
+        frame: 'default'
+      }
+      // build options object with defaults
+      options = Object.assign({}, defaultOptions, options)
 
-            return pageInstance
-          }
-        }
+      return new Promise(resolve => {
+        const frame = getFrameInstance(options.frame)
+        const page = new Vue({
+          parent: this,
+          render: h => h(component, { props: options.props })
+        }).$mount().$el.nativeView
 
-        topmost().navigate(Object.assign({}, navigationEntry, options))
+        frame.navigate(Object.assign({}, options, { create: () => page }))
+        resolve(page)
       })
     }
   }