[build] 1.3.8

Author: michaeltintiuc

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80
+}

README.md

@@ -39,13 +39,14 @@ Apart from minor improvements and further testing of various mixes of Ionic comp
 | Router keep-alive | :heavy_check_mark: | [Pending](https://github.com/ionic-team/ionic/pull/18561) | - |
 | Functional Inputs | :heavy_check_mark: | [Pending](https://github.com/ionic-team/ionic/pull/19087) | - |
 | Import controllers directly | :heavy_check_mark: | [Pending](https://github.com/ionic-team/ionic/pull/19573) | Improve treeshaking and sync with react and angular implementations |
+| Restore scroll on navigation | :heavy_check_mark: | - | When going back through history restore the scroll position |
 | Unit tests  | :x: | :x: |  Outdated as were originally written in plain JS, need to be updated for TS |
 
 ## Ionic versions 4 and 5
 :warning: Moving forward all versions of `ionic-vue` will be supporting Ionic 5 only, if you'd like to continue using Ionic 4 please use `ionic-vue` version `1.3.4`
 
 ## Vue 3
-:construction: We are actively developing the next major version of this library. It will support Vue 3 and all of the new APIs like Composition, new transition features, etc. 
+:construction: We are actively developing the next major version of this library. It will support Vue 3 and all of the new APIs like Composition, new transition features, etc.
 
 ## Installing / Getting started
 

build/release.sh

@@ -5,20 +5,20 @@ echo "Enter release version: "
 read VERSION
 
 read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
-echo    # (optional) move to a new line
+echo # move to new line
+
 if [[ $REPLY =~ ^[Yy]$ ]]
 then
-  npm run lint.fix
   echo "Releasing $VERSION ..."
   VERSION=$VERSION npm run prod
 
   # commit
+  npm version $VERSION --no-git-tag-version
   git add -A
-  git commit --allow-empty -m "[build] $VERSION"
-  npm version $VERSION --message "[release] $VERSION"
+  git commit -m "[build] $VERSION"
+  git tag v$VERSION
 
   # publish
-  git push origin refs/tags/v$VERSION
-  git push
+  git push --tags
   npm publish
 fi

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@modus/ionic-vue",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Ionic integration adapters for Vue",
   "homepage": "https://moduscreate.com",
   "author": "Michael Tintiuc <michael.tintiuc@moduscreate.com>",
@@ -49,9 +49,8 @@
   "scripts": {
     "dev": "rollup -c ./build/rollup.config.js",
     "watch": "rollup -w -c ./build/rollup.config.js",
-    "prod": "npm run clean && NODE_ENV=production rollup -c ./build/rollup.config.js --configProd",
-    "lint": "tslint --project .",
-    "lint.fix": "tslint --project . --fix",
+    "prod": "npm run lint && npm run clean && NODE_ENV=production rollup -c ./build/rollup.config.js --configProd",
+    "lint": "tslint --project . --fix",
     "test": "jest --coverage --verbose",
     "install.peer": "npm i --no-save vue vue-template-compiler vue-router @ionic/core",
     "clean": "node ./scripts/clean.js"

package.json

@@ -50,8 +50,10 @@ export default {
         leave: (el: HTMLElement, done: TransitionDone) => {
           leave(parent, props as Props, el, done);
         },
+        enter: (el: HTMLElement, done: TransitionDone) => {
+          enter(parent, el, done);
+        },
         beforeEnter,
-        enter,
         afterEnter,
         beforeLeave,
         afterLeave,
@@ -107,28 +109,19 @@ function catchIonicGoBack(parent: Vue, event: Event): void {
 }
 
 // Transition when we leave the route
-function leave(
+async function leave(
   parent: Vue,
   props: Props,
   el: HTMLElement,
   done: TransitionDone
 ) {
-  const promise = transition(parent, props, el);
-
-  // Skip any transition if we don't get back a Promise
-  if (!promise) {
-    done();
-    return;
-  }
+  await parent.$router.saveScroll(el);
 
   // Perform navigation once the transition was finished
-  parent.$router.transition = new Promise(resolve => {
-    promise
-      .then(() => {
-        resolve();
-        done();
-      })
-      .catch(console.error);
+  parent.$router.transition = new Promise(async resolve => {
+    await transition(parent, props, el);
+    done();
+    resolve();
   });
 }
 
@@ -180,8 +173,14 @@ function beforeEnter(el: HTMLElement) {
 }
 
 // Enter the new route
-function enter(_el: HTMLElement, done: TransitionDone) {
-  done();
+function enter(parent: Vue, el: HTMLElement, done: TransitionDone) {
+  if (parent.$router.direction === 'back') {
+    parent.$router
+      .restoreScroll(el, parent.$router.currentRoute.fullPath)
+      .then(done);
+  } else {
+    done();
+  }
 }
 
 // Vue transition stub functions

src/components/ion-vue-router.ts

@@ -8,6 +8,8 @@ declare module 'vue-router/types/router' {
     direction: RouterDirection;
     directionOverride: RouterDirection | null;
     transition: Promise<void>;
+    saveScroll(el: HTMLElement): Promise<void>;
+    restoreScroll(el: HTMLElement, key: string): Promise<void>;
     canGoBack(): boolean;
   }
 }
@@ -42,16 +44,28 @@ export interface IonicWindow extends Window {
 }
 
 export interface FrameworkDelegate {
-  attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | Vue, opts?: object, classes?: string[]): Promise<HTMLElement>;
-  removeViewFromDom(parentElement: HTMLElement, childElement: HTMLVueElement): Promise<void>;
+  attachViewToDom(
+    parentElement: HTMLElement,
+    component: HTMLElement | WebpackFunction | object | Vue,
+    opts?: object,
+    classes?: string[]
+  ): Promise<HTMLElement>;
+  removeViewFromDom(
+    parentElement: HTMLElement,
+    childElement: HTMLVueElement
+  ): Promise<void>;
 }
 
 export interface IonBackButton extends HTMLStencilElement {
   defaultHref?: string;
 }
 
 export interface IonRouterOutlet extends HTMLStencilElement {
-  commit(enterinEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: object | undefined): Promise<boolean>;
+  commit(
+    enterinEl: HTMLElement,
+    leavingEl: HTMLElement | undefined,
+    opts?: object | undefined
+  ): Promise<boolean>;
 }
 
 export interface ApiCache {

src/interfaces.ts

@@ -10,13 +10,18 @@ export default class Router extends VueRouter {
   directionOverride: RouterDirection | null;
   viewCount: number;
   prevRouteStack: Route[];
+  cachedPrevRoute: Route;
   history: any;
+  scroll: Map<string, { top: number; left: number }>;
   static installed: boolean;
   static install: PluginFunction<never>;
 
   constructor(args: RouterArgs = {} as RouterArgs) {
     super(args);
 
+    // Set default scroll stack
+    this.scroll = new Map();
+
     // The direction user navigates in
     this.direction = args.direction || 'forward';
 
@@ -41,6 +46,10 @@ export default class Router extends VueRouter {
     });
   }
 
+  get prevRoute(): Route | undefined {
+    return this.prevRouteStack[this.prevRouteStack.length - 1];
+  }
+
   extendTransitionConfirmation() {
     this.history._confirmTransition = this.history.confirmTransition;
     this.history.confirmTransition = async (...opts: any) => {
@@ -82,13 +91,13 @@ export default class Router extends VueRouter {
   }
 
   guessDirection(nextRoute: Route): RouterDirection {
-    if (this.prevRouteStack.length !== 0) {
-      const prevRoute: Route = this.prevRouteStack[this.prevRouteStack.length - 1];
+    this.cachedPrevRoute = this.history.current;
 
+    if (this.prevRoute) {
       // Last route is the same as the next one - go back
       // If we're going to / reset the stack otherwise pop a route
-      if (prevRoute.fullPath === nextRoute.fullPath) {
-        if (prevRoute.fullPath.length === 1) {
+      if (this.prevRoute.fullPath === nextRoute.fullPath) {
+        if (this.prevRoute.fullPath.length === 1) {
           this.prevRouteStack = [];
         } else {
           this.prevRouteStack.pop();
@@ -101,8 +110,27 @@ export default class Router extends VueRouter {
     if (this.history.current.fullPath !== nextRoute.fullPath) {
       this.prevRouteStack.push(this.history.current);
     }
+
     return 'forward';
   }
+
+  async saveScroll(el: HTMLElement): Promise<void> {
+    const ionContent = el.querySelector('ion-content');
+    const scrollElement = ionContent && (await ionContent.getScrollElement());
+
+    if (scrollElement) {
+      this.scroll.set(this.cachedPrevRoute.fullPath, {
+        top: scrollElement?.scrollTop || 0,
+        left: scrollElement?.scrollLeft || 0,
+      });
+    }
+  }
+
+  async restoreScroll(el: HTMLElement, key: string): Promise<void> {
+    const ionContent = el.querySelector('ion-content');
+    const scrollElement = ionContent && (await ionContent.getScrollElement());
+    scrollElement?.scrollTo(this.scroll.get(key) || { top: 0, left: 0 });
+  }
 }
 
 Router.install = (Vue) => {

src/router.ts

@@ -1,2 +1,2 @@
-export * from "./createOverlayComponent";
-export * from "./createInputComponent";
+export * from './createOverlayComponent';
+export * from './createInputComponent';

src/utils/index.ts

@@ -7,6 +7,8 @@ declare module 'vue-router/types/router' {
         direction: RouterDirection;
         directionOverride: RouterDirection | null;
         transition: Promise<void>;
+        saveScroll(el: HTMLElement): Promise<void>;
+        restoreScroll(el: HTMLElement, key: string): Promise<void>;
         canGoBack(): boolean;
     }
 }