fix: allow using for attribute in custom components

Author: rigor789

platform/nativescript/compiler/modules/list-view.js renamed to platform/nativescript/compiler/modules/for.js

@@ -1,21 +1,21 @@
-import { getAndRemoveAttr, addRawAttr } from 'compiler/helpers'
-import { normalizeElementName } from '../../element-registry'
-import { parseFor } from 'compiler/parser/index'
-import { warn } from 'core/util/debug'
+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) {
-  if (normalizeElementName(el.tag) !== 'listview') {
-    return
-  }
+  let vfor
 
-  const 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}, ` +
+  if (normalizeElementName(el.tag) === 'listview') {
+    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

platform/nativescript/compiler/modules/index.js

@@ -1,7 +1,7 @@
 import class_ from './class'
 import style from './style'
-import listView from './list-view'
+import for_ from './for'
 import vTemplate from './v-template'
 import view from './view'
 
-export default [class_, style, vTemplate, listView, view]
+export default [class_, style, vTemplate, for_, view]

samples/app/app-with-pager.js

@@ -0,0 +1,41 @@
+const Vue = require('./nativescript-vue')
+const Pager = require('nativescript-pager/vue')
+
+Vue.use(Pager)
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+  data() {
+    return {
+      selected: 2
+    }
+  },
+  template: `
+    <Page>
+      <StackLayout>
+        <Button text="go to first" @tap="selected = 0"/>
+        <Button text="go to last" @tap="selected = 3"/>
+        
+        <Pager for="i in [0,1,2,3]" v-model="selected" pagesCount="4">
+          <v-template>
+              <Label :text="i" backgroundColor="red" />
+          </v-template>
+          
+          <v-template if="i === 1">
+              <Label :text="i" style="color: red;" backgroundColor="blue" />
+          </v-template>
+          
+          <v-template if="i === 2">
+              <Label :text="i" style="color: blue;" backgroundColor="green" />
+          </v-template>
+          
+          <v-template if="i === 3">
+              <Label :text="i" style="color: green;" backgroundColor="yellow" />
+          </v-template>
+        </Pager>
+      </StackLayout>
+    </Page> 
+  `
+}).$start()

samples/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "nativescript-gradient": "^2.0.1",
+    "nativescript-pager": "^7.1.0",
     "nativescript-pro-ui": "^3.3.0",
     "nativescript-theme-core": "^1.0.4",
     "tns-core-modules": "^3.4.0",