fix: livesync and HMR fixes for NativeScript 6.0 (#508)

* fix (ns6): fix samples build and run for NS 6 * pr checks in travis and sauce labs (#481) * fix: loading of css when using webpack bundle * chore: add custom webpack.config in order to use bundle during the build using current nativescript-dev-webpack plugin 0.21 * chore: add travis file to orchestrate the testing flow and tests * fix: ios build in travis * feat (ns6): Use the NS 6.0 version and the webpack only version for nativescript-dev-webpackl for the samples * fix (ns6): Fix livesync issues with nativescript@next and nativescript-dev-webpack@webpack * chore (samples): Add a goBack() method to complete the HMR test * fix: appium local * fix: rename packages * fix: build compiler
nativescript-vue · Jul 10, 2019 · be95893 · be95893
1 parent c770745
commit be95893
Show file tree

Hide file tree

Showing 25 changed files with 312 additions and 158 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,10 @@ samples/package-lock.json
 samples/platforms
 samples/app/nativescript-vue.js
 samples/app/nativescript-vue.js.map
+samples/hooks/
+samples/mochawesome-report/
+samples/e2e/reports/
+test-results.xml
 dist/
 packages/nativescript-vue-template-compiler/index.js
 !docs/dist/

diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,95 @@
+env:
+  global:
+    - ANDROID_PACKAGE_VUE='nativescript-vue-tests.apk'
+    - ANDROID_PACKAGE_FOLDER_VUE=$TRAVIS_BUILD_DIR/samples/outputs
+    - SAUCE_STORAGE="https://saucelabs.com/rest/v1/storage/$SAUCE_USER"
+    - IOS_PACKAGE_VUE='nativescript-vue-tests.zip'
+    - IOS_PACKAGE_FOLDER_VUE=$TRAVIS_BUILD_DIR/samples/outputs
+
+git:
+  depth: 1
+
+branches:
+  only:
+    - master
+
+matrix:
+  include:
+    - stage: "Unit Tests"
+      language: node_js
+      os: linux
+      node_js: "11"
+      script: npm ci && npm run test
+    - stage: "Build app"
+      os: osx
+      env:
+        - WebpackiOS="12.0"
+        - Type="VueJS"
+      osx_image: xcode10.0
+      language: node_js
+      node_js: "11"
+      jdk: oraclejdk8
+      script:
+        - npm ci && npm run dev:core && npm run dev:compiler
+        - cd samples && npm i && tns build ios --copy-to "./outputs/nativescript-vue-tests.app"
+        - cd $IOS_PACKAGE_FOLDER_VUE && zip -r $IOS_PACKAGE_VUE nativescript-vue-tests.app
+        - "curl -u $SAUCE_USER:$SAUCE_KEY -X POST -H 'Content-Type: application/octet-stream' $SAUCE_STORAGE/$IOS_PACKAGE_VUE?overwrite=true --data-binary @$IOS_PACKAGE_FOLDER_VUE/$IOS_PACKAGE_VUE"
+    - language: android
+      os: linux
+      env:
+        - WebpackAndroid="28"
+        - Type="VueJS"
+      jdk: oraclejdk8
+      before_install: nvm install 11
+      script:
+        - npm ci && npm run dev:core && npm run dev:compiler
+        - cd samples && npm i && tns build android --copy-to "./outputs/nativescript-vue-tests.apk"
+        - "curl -u $SAUCE_USER:$SAUCE_KEY -X POST -H 'Content-Type: application/octet-stream' $SAUCE_STORAGE/$ANDROID_PACKAGE_VUE?overwrite=true --data-binary @$ANDROID_PACKAGE_FOLDER_VUE/$ANDROID_PACKAGE_VUE"
+    - stage: "UI Tests"
+      env:
+        - iOS="12.0"
+        - Type="VueJS"
+      language: node_js
+      os: linux
+      node_js: "11"
+      script:
+        - npm i -g appium
+        - cd samples && npm i
+        - travis_wait travis_retry npm run e2e -- --runType sim12iPhoneX --sauceLab --appPath $IOS_PACKAGE_VUE
+    - os: linux
+      env:
+        - Android="24"
+        - Type="VueJS"
+      language: node_js
+      node_js: "11"
+      script:
+        - npm i -g appium
+        - cd samples && npm i
+        - travis_wait travis_retry npm run e2e -- --runType android24.sauce --sauceLab --appPath $ANDROID_PACKAGE_VUE
+
+android:
+  components:
+    - tools
+    - platform-tools
+    - build-tools-28.0.3
+    - android-28
+    - android-23
+    - extra-android-m2repository
+
+before_cache:
+    - rm -f $HOME/.gradle/caches/modules-2/modules-2.lock
+
+cache:
+    directories:
+        - .nvm
+        - $HOME/.gradle/caches/
+        - $HOME/.gradle/wrapper/
+
+before_install:
+    - sudo pip install --upgrade pip
+    - sudo pip install six
+
+install:
+    - echo no | npm install -g nativescript
+    - tns usage-reporting disable
+    - tns error-reporting disable
diff --git a/build/sample-runner.js b/build/sample-runner.js
@@ -41,7 +41,7 @@ inquirer
   })
 
 function runPlatform(platform) {
-  tns = spawn('tns', ['debug', platform, '--syncAllFiles', '--bundle'].concat(args), {
+  tns = spawn('tns', ['debug', platform].concat(args), {
     cwd: path.resolve(__dirname, '../samples')
   })
 

diff --git a/package.json b/package.json
@@ -15,9 +15,9 @@
     "test": "jest",
     "tdd": "jest --watch",
     "samples": "node build/sample-runner.js",
-    "dev": "npm run dev:core & npm run dev:compiler",
-    "dev:core": "rollup -c build/config.js -w --o dist/index.js --environment TARGET:nativescript-vue",
-    "dev:compiler": "rollup -c build/config.js -w --environment TARGET:nativescript-vue-template-compiler",
+    "dev": "npm run dev:core -- -w & npm run dev:compiler -- -w",
+    "dev:core": "rollup -c build/config.js --o dist/index.js --environment TARGET:nativescript-vue",
+    "dev:compiler": "rollup -c build/config.js --environment TARGET:nativescript-vue-template-compiler",
     "build": "node build/build.js",
     "prettier": "prettier --no-semi --single-quote --write \"{{platform,__test__}/**/*.js,samples/app/*.js}\"",
     "release": "node build/releaser.js",

diff --git a/platform/nativescript/runtime/components/frame.js b/platform/nativescript/runtime/components/frame.js
@@ -1,5 +1,4 @@
 import { setFrame, getFrame, deleteFrame } from '../../util/frame'
-import { isHMRChecking, resetHMRChecking } from '../../util/hmr'
 
 let idCounter = 1
 
@@ -93,98 +92,10 @@ export default {
       }
 
       this.$nextTick(() => {
-        if (isHMRChecking()) {
-          this.replace(options)
-        } else {
-          this.navigate(options)
-        }
+        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()
 

diff --git a/platform/nativescript/runtime/components/page.js b/platform/nativescript/runtime/components/page.js
@@ -1,9 +1,3 @@
-import {
-  findParentNavigationEntry,
-  getFrameInstance
-} from '../../plugins/navigator-plugin'
-import { isHMRChecking } from '../../util/hmr'
-
 export const PAGE_REF = '__vuePageRef__'
 
 export default {
@@ -20,17 +14,7 @@ export 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()
-    }
+    let frame = this._findParentFrame()
 
     if (frame) {
       frame.notifyPageMounted(this)

diff --git a/platform/nativescript/util/hmr.js b/platform/nativescript/util/hmr.js
diff --git a/samples/app/README.md b/samples/app/README.md
diff --git a/samples/app/app-to-check-hmr.js b/samples/app/app-to-check-hmr.js
@@ -1,12 +1,10 @@
+import Home from './components/Home'
+
 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

diff --git a/samples/app/app-with-radsidedrawer-tabs-and-router.js b/samples/app/app-with-radsidedrawer-tabs-and-router.js
@@ -1,6 +1,5 @@
 const Vue = require('nativescript-vue')
 const VueRouter = require('vue-router')
-const application = require('tns-core-modules/application')
 
 Vue.registerElement(
   'RadSideDrawer',
@@ -21,8 +20,8 @@ const Home = {
 
 const Tabs = {
   template: `
-    <TabView
-      androidTabsPosition="bottom"
+  <GridLayout>
+    <TabView androidTabsPosition="bottom"
       :selectedIndex="selectedTabIndex" >
       <TabViewItem title="Tab 1">
         <StackLayout>
@@ -34,7 +33,8 @@ const Tabs = {
           <Label text="You are on Tab 2" />
         </StackLayout>
       </TabViewItem>
-    </TabView>`,
+    </TabView>
+  </GridLayout>`,
   data() {
     return {
       selectedTabIndex: 0,
@@ -103,7 +103,7 @@ new Vue({
         </RadSideDrawer>
       </Page>
     </Frame>
-  `,
+`,
   data() {
     return {}
   },

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

diff --git a/samples/app/components/Details.vue b/samples/app/components/Details.vue
@@ -16,6 +16,9 @@ const page = {
   methods: {
     openDetails() {
       this.$navigateTo(page)
+    },
+    goBack() {
+      this.$navigateBack()
     }
   }
 }

diff --git a/samples/app/components/VSlot.vue b/samples/app/components/VSlot.vue
@@ -17,4 +17,4 @@ export default {
     ComponentWithSlot,
   },
 }
-</script>
+</script>
diff --git a/samples/app/package.json b/samples/app/package.json
@@ -1,5 +1,5 @@
 {
-  "main": "modals.js",
-  "name": "nativescript-template-tutorial",
+  "main": "app-to-check-v-slot.js",
+  "name": "nativescript-vue-tests",
   "version": "1.0.1"
-}
+}