nativescript-vue · msaelices · May 20, 2019 · Apr 9, 2019 · Apr 9, 2019 · Apr 9, 2019
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -29,7 +29,7 @@ After cloning the repo, run:
 # Commonly used NPM scripts
 
 ```bash
-$ # watch and auto re-build samples/app/nativescript-vue.js
+$ # watch and auto re-build dist/index.js
 $ npm run dev
 ```
 
@@ -39,6 +39,8 @@ To test the sample applications provided in the repository, you need to `npm run
 
 Next, open up a new terminal window and run `npm run samples`. This will bring up a list of all the available sample applications which you can choose from with your arrow keys. Pressing enter/return will select that sample, and prompt you to choose the platform you'd like to run the sample on. After selecting the platform the application should start on your emulator, and the output will be in your terminal.
 
+If you want to test the sample apps with HMR activated, please run `npm run samples -- --hmr` instead. Actually, we can pass any arguments to the `tns debug platform` command placing them after the `--` separator.
+
 # Project Structure
 
 - `build`: Directory for the custom tooling for managing and building the project
@@ -57,7 +59,7 @@ Next, open up a new terminal window and run `npm run samples`. This will bring u
 
 There is [currently] a bug in devDependencies husky 0.15 beta that aborts `npm install` if `.git/hooks` is missing.
 
-https://github.com/typicode/husky/issues/195 
+https://github.com/typicode/husky/issues/195
 
 ```
 > husky@0.15.0-rc.3 postinstall /.../nativescript-vue/node_modules/husky

diff --git a/build/sample-runner.js b/build/sample-runner.js
@@ -6,6 +6,7 @@ const samplePackage = require('../samples/app/package.json')
 const originalMain = samplePackage.main
 
 let tns
+let args = process.argv.slice(2)
 
 const files = fs
   .readdirSync(path.resolve(__dirname, '../samples/app'))
@@ -40,11 +41,11 @@ inquirer
   })
 
 function runPlatform(platform) {
-  tns = spawn('tns', ['debug', platform], {
+  tns = spawn('tns', ['debug', platform, '--syncAllFiles', '--bundle'].concat(args), {
     cwd: path.resolve(__dirname, '../samples')
   })
 
-  tns.on('error', err => console.log(err))
+  tns.on('error', err => console.error(err))
   tns.stdout.on('data', data => process.stdout.write(platform + ': ' +data))
 }
 

diff --git a/package.json b/package.json
@@ -15,8 +15,7 @@
     "test": "jest",
     "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",
+    "dev": "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}\"",

diff --git a/samples/app/127.js b/samples/app/127.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/171.js b/samples/app/171.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.silent = false
 

diff --git a/samples/app/217.js b/samples/app/217.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/220.js b/samples/app/220.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/229.js b/samples/app/229.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.silent = false
 

diff --git a/samples/app/231.js b/samples/app/231.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.silent = false
 

diff --git a/samples/app/240.js b/samples/app/240.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/272.js b/samples/app/272.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/339.js b/samples/app/339.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/344.js b/samples/app/344.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueDevtools = require('nativescript-vue-devtools')
 Vue.use(VueDevtools)
 Vue.config.debug = true

diff --git a/samples/app/445.js b/samples/app/445.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false
@@ -14,7 +14,7 @@ new Vue({
       template: `
         <StackLayout :color="counter < 5 ? 'red' : 'blue'">
             <slot :counter="counter"/>
-            
+
             <Button text="+1" @tap="counter++"/>
         </StackLayout>
       `

diff --git a/samples/app/76.js b/samples/app/76.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/app-to-check-android-events.js b/samples/app/app-to-check-android-events.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const application = require('tns-core-modules/application')
 const platform = require('tns-core-modules/platform')
 

diff --git a/samples/app/app-to-check-hmr.js b/samples/app/app-to-check-hmr.js
@@ -0,0 +1,15 @@
+const Vue = require('nativescript-vue')
+const application = require('tns-core-modules/application')
+const platform = require('tns-core-modules/platform')
+
+Vue.config.silent = false
+Vue.config.debug = true
+
+import Home from './components/Home'
+
+new Vue({
+  components: {
+    Home
+  },
+  render: h => h('frame', [h(Home)])
+}).$start()
diff --git a/samples/app/app-to-check-v-slot.js b/samples/app/app-to-check-v-slot.js
@@ -0,0 +1,13 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.silent = false
+Vue.config.debug = true
+
+import VSlot from './components/VSlot'
+
+new Vue({
+  components: {
+    VSlot
+  },
+  render: h => h('frame', [h(VSlot)])
+}).$start()
diff --git a/samples/app/app-with-all-components.js b/samples/app/app-with-all-components.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const frame = require('tns-core-modules/ui/frame')
 const platform = require('tns-core-modules/platform')
 const utils = require('tns-core-modules/utils/utils')

diff --git a/samples/app/app-with-android-ios.js b/samples/app/app-with-android-ios.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 new Vue({
   template: `

diff --git a/samples/app/app-with-formatted-string.js b/samples/app/app-with-formatted-string.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 new Vue({
   template: `

diff --git a/samples/app/app-with-frame.js b/samples/app/app-with-frame.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueDevtools = require('nativescript-vue-devtools')
 
 Vue.use(VueDevtools)

diff --git a/samples/app/app-with-frames.js b/samples/app/app-with-frames.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.silent = false
 Vue.config.debug = true

diff --git a/samples/app/app-with-gauge.js b/samples/app/app-with-gauge.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 const application = require('tns-core-modules/application')
 const observable_array = require('tns-core-modules/data/observable-array')

diff --git a/samples/app/app-with-http-requests.js b/samples/app/app-with-http-requests.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const http = require('http')
 
 Vue.config.debug = true

diff --git a/samples/app/app-with-list-view.js b/samples/app/app-with-list-view.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const http = require('http')
 
 Vue.config.debug = true

diff --git a/samples/app/app-with-nested-object-list-view.js b/samples/app/app-with-nested-object-list-view.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 new Vue({
   template: `

diff --git a/samples/app/app-with-ns-router.js b/samples/app/app-with-ns-router.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 
 Vue.config.silent = false

diff --git a/samples/app/app-with-page-routing.js b/samples/app/app-with-page-routing.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 
 Vue.config.silent = false

diff --git a/samples/app/app-with-pager.js b/samples/app/app-with-pager.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const Pager = require('nativescript-pager/vue')
 
 Vue.use(Pager)

diff --git a/samples/app/app-with-pages.js b/samples/app/app-with-pages.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 Vue.config.silent = false

diff --git a/samples/app/app-with-radsidedrawer-tabs-and-router.js b/samples/app/app-with-radsidedrawer-tabs-and-router.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 const application = require('tns-core-modules/application')
 

diff --git a/samples/app/app-with-router-component.js b/samples/app/app-with-router-component.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('./vue-router')
 
 Vue.config.silent = false

diff --git a/samples/app/app-with-router-pages.js b/samples/app/app-with-router-pages.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 
 Vue.use(VueRouter)

diff --git a/samples/app/app-with-router-v2.js b/samples/app/app-with-router-v2.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 
 Vue.config.silent = false

diff --git a/samples/app/app-with-router.js b/samples/app/app-with-router.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
 
 Vue.config.silent = false

diff --git a/samples/app/app-with-shared-actionbar.js b/samples/app/app-with-shared-actionbar.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const VueDevtools = require('nativescript-vue-devtools')
 
 Vue.use(VueDevtools)

diff --git a/samples/app/app-with-tab-view.js b/samples/app/app-with-tab-view.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.debug = true
 

diff --git a/samples/app/app-with-v-template-components.js b/samples/app/app-with-v-template-components.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.config.silent = false
 Vue.config.debug = true

diff --git a/samples/app/app-with-v-template.js b/samples/app/app-with-v-template.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 new Vue({
   data() {

diff --git a/samples/app/app-with-view-directive.js b/samples/app/app-with-view-directive.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.registerElement(
   'RadSideDrawer',

diff --git a/samples/app/app-with-vmodel.js b/samples/app/app-with-vmodel.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 new Vue({
   data: {

diff --git a/samples/app/app-with-vuex.js b/samples/app/app-with-vuex.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 const Vuex = require('vuex')
 
 Vue.use(Vuex)

diff --git a/samples/app/app.css b/samples/app/app.css
@@ -1,5 +1,3 @@
-@import 'nativescript-theme-core/css/core.light.css';
-
 /* Your CSS goes here */
 
 .even {

diff --git a/samples/app/app.js b/samples/app/app.js
@@ -1,4 +1,4 @@
-const Vue = require('./nativescript-vue')
+const Vue = require('nativescript-vue')
 
 Vue.component('image-viewer', {
   props: ['imgSrc'],

diff --git a/samples/app/components/ComponentWithSlot.vue b/samples/app/components/ComponentWithSlot.vue
@@ -0,0 +1,16 @@
+<template>
+  <StackLayout :color="counter < 5 ? 'red' : 'blue'">
+    <slot :counter="counter"/>
+    <Button text="+1" @tap="counter++"/>
+  </StackLayout>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      counter: 0
+    }
+  },
+}
+</script>
diff --git a/samples/app/components/Details.vue b/samples/app/components/Details.vue
@@ -0,0 +1,23 @@
+<template>
+  <Page>
+    <ActionBar class="action-bar" title="Details Page">
+      <ActionItem text="Action"></ActionItem>
+    </ActionBar>
+    <StackLayout>
+      <Label :text="'Details ' + Math.random()" />
+      <Button text="another" @tap="openDetails" />
+      <Button text="back" @tap="goBack" />
+    </StackLayout>
+  </Page>
+</template>
+
+<script>
+const page = {
+  methods: {
+    openDetails() {
+      this.$navigateTo(page)
+    }
+  }
+}
+export default page;
+</script>