remove use of getDocument/getWindow

stencil-community · Apr 19, 2019 · 026378f · 026378f
1 parent a8f98fb
commit 026378f
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 115 deletions.
diff --git a/packages/router/src/components/redirect/redirect.tsx b/packages/router/src/components/redirect/redirect.tsx
@@ -3,9 +3,9 @@ import { RouterHistory } from '../../global/interfaces';
 import ActiveRouter from '../../global/active-router';
 
 // Get the URL for this route link without the root from the router
-function getUrl(url: string, root: string) {
+const getUrl = (url: string, root: string) => {
   // Don't allow double slashes
-  if(url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
+  if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
     return root.slice(0, root.length-1) + url;
   }
   return root + url;

diff --git a/packages/router/src/components/route-title/route-title.tsx b/packages/router/src/components/route-title/route-title.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Watch, ComponentInterface, getDocument } from '@stencil/core';
+import { Component, Prop, Element, Watch, ComponentInterface } from '@stencil/core';
 import ActiveRouter from '../../global/active-router';
 
 /**
@@ -11,14 +11,16 @@ import ActiveRouter from '../../global/active-router';
   tag: 'stencil-route-title'
 })
 export class RouteTitle implements ComponentInterface {
-  doc = getDocument(this);
   @Element() el!: HTMLElement;
   @Prop() titleSuffix: string = '';
   @Prop() pageTitle: string = '';
 
   @Watch('pageTitle')
   updateDocumentTitle() {
-    this.doc.title = `${this.pageTitle}${this.titleSuffix || ''}`;
+    const el = this.el;
+    if (el.ownerDocument) {
+      el.ownerDocument.title = `${this.pageTitle}${this.titleSuffix || ''}`;
+    }
   }
 
   componentWillLoad() {

diff --git a/packages/router/src/components/router/router.tsx b/packages/router/src/components/router/router.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, State, ComponentInterface, getDocument, getWindow, h } from '@stencil/core';
+import { Component, Element, Prop, State, ComponentInterface, h } from '@stencil/core';
 import createHistory from '../../utils/createBrowserHistory';
 import createHashHistory from '../../utils/createHashHistory';
 import { LocationSegments, HistoryType, RouterHistory, RouteViewOptions } from '../../global/interfaces';
@@ -31,7 +31,7 @@ const HISTORIES: { [key in HistoryType]: (win: Window) => RouterHistory } = {
   tag: 'stencil-router'
 })
 export class Router implements ComponentInterface {
-  win = getWindow(this);
+  @Element() el!: HTMLElement;
   @Prop() root: string = '/';
   @Prop({ context: 'isServer' }) private isServer!: boolean;
   @Prop({ context: 'queue'}) queue!: QueueApi;
@@ -47,18 +47,18 @@ export class Router implements ComponentInterface {
   @State() history?: RouterHistory;
 
   componentWillLoad() {
-    this.history = HISTORIES[this.historyType](this.win);
+    this.history = HISTORIES[this.historyType]((this.el.ownerDocument as any).defaultView);
 
-    this.history.listen(async (location: LocationSegments) => {
+    this.history.listen((location: LocationSegments) => {
       location = getLocation(location, this.root);
       this.location = location;
     });
     this.location = getLocation(this.history.location, this.root);
   }
 
   routeViewsUpdated = (options: RouteViewOptions = {}) => {
-    if (options.scrollToId && this.historyType === 'browser') {
-      const elm = getDocument(this).getElementById(options.scrollToId);
+    if (this.history && options.scrollToId && this.historyType === 'browser') {
+      const elm = this.history.win.document.getElementById(options.scrollToId);
       if (elm) {
         return elm.scrollIntoView();
       }
@@ -67,20 +67,22 @@ export class Router implements ComponentInterface {
   }
 
   scrollTo(scrollToLocation?: number) {
-    if (scrollToLocation == null || this.isServer || !this.history) {
+    const history = this.history;
+
+    if (scrollToLocation == null || this.isServer || !history) {
       return;
     }
 
-    if (this.history.action === 'POP' && Array.isArray(this.history.location.scrollPosition)) {
+    if (history.action === 'POP' && Array.isArray(history.location.scrollPosition)) {
       return this.queue.write(() => {
-        if (this.history && this.history.location && Array.isArray(this.history.location.scrollPosition)) {
-          this.win.scrollTo(this.history.location.scrollPosition[0], this.history.location.scrollPosition[1]);
+        if (history && history.location && Array.isArray(history.location.scrollPosition)) {
+          history.win.scrollTo(history.location.scrollPosition[0], history.location.scrollPosition[1]);
         }
       });
     }
     // okay, the frame has passed. Go ahead and render now
     return this.queue.write(() => {
-      this.win.scrollTo(0, scrollToLocation);
+      history.win.scrollTo(0, scrollToLocation);
     });
   }
 

diff --git a/packages/router/src/global/interfaces.ts b/packages/router/src/global/interfaces.ts
@@ -53,6 +53,7 @@ export interface RouterHistory {
   goForward: () => void;
   block: (prompt?: string | Prompt) => () => void;
   listen: (listener: Function) => () => void;
+  win: Window;
 }
 
 export interface RouterGroup {

diff --git a/packages/router/src/utils/createBrowserHistory.ts b/packages/router/src/utils/createBrowserHistory.ts
@@ -34,37 +34,39 @@ interface NextState {
 const PopStateEvent = 'popstate';
 const HashChangeEvent = 'hashchange';
 
-const getHistoryState = (win: Window) => {
-  try {
-    return win.history.state || {};
-  } catch (e) {
-    // IE 11 sometimes throws when accessing window.history.state
-    // See https://github.com/ReactTraining/history/pull/289
-    return {};
-  }
-};
-
 /**
  * Creates a history object that uses the HTML5 history API including
  * pushState, replaceState, and the popstate event.
  */
-const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions = {}): RouterHistory => {
+const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions = {}) => {
   let forceNextPop = false;
 
   const globalHistory = win.history;
+  const globalLocation = win.location;
+  const globalNavigator = win.navigator;
   const canUseHistory = supportsHistory(win);
-  const needsHashChangeListener = !supportsPopStateOnHashChange(win.navigator);
+  const needsHashChangeListener = !supportsPopStateOnHashChange(globalNavigator);
   const scrollHistory = createScrollHistory(win);
 
   const forceRefresh = (props.forceRefresh != null) ? props.forceRefresh : false;
   const getUserConfirmation = (props.getUserConfirmation != null) ? props.getUserConfirmation : getConfirmation;
   const keyLength = (props.keyLength != null) ? props.keyLength : 6;
   const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
 
-  const getDOMLocation = (win: Window, historyState: LocationSegments) => {
+  const getHistoryState = () => {
+    try {
+      return win.history.state || {};
+    } catch (e) {
+      // IE 11 sometimes throws when accessing window.history.state
+      // See https://github.com/ReactTraining/history/pull/289
+      return {};
+    }
+  };
+
+  const getDOMLocation = (historyState: LocationSegments) => {
     historyState = historyState || {};
     const { key, state } = historyState;
-    const { pathname, search, hash } = win.location;
+    const { pathname, search, hash } = globalLocation;
 
     let path = pathname + search + hash;
 
@@ -103,13 +105,13 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
 
   const handlePopState = (event: any) => {
     // Ignore extraneous popstate events in WebKit.
-    if (!isExtraneousPopstateEvent(win.navigator, event)) {
-      handlePop(getDOMLocation(win, event.state));
+    if (!isExtraneousPopstateEvent(globalNavigator, event)) {
+      handlePop(getDOMLocation(event.state));
     }
   };
 
   const handleHashChange = () => {
-    handlePop(getDOMLocation(win, getHistoryState(win)));
+    handlePop(getDOMLocation(getHistoryState()));
   };
 
 
@@ -138,13 +140,12 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     // Instead, we just default to 0 for keys we don't know.
 
     let toIndex = allKeys.indexOf(toLocation.key);
+    let fromIndex = allKeys.indexOf(fromLocation.key);
 
     if (toIndex === -1) {
       toIndex = 0;
     }
 
-    let fromIndex = allKeys.indexOf(fromLocation.key);
-
     if (fromIndex === -1) {
       fromIndex = 0;
     }
@@ -157,7 +158,7 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     }
   };
 
-  const initialLocation = getDOMLocation(win, getHistoryState(win));
+  const initialLocation = getDOMLocation(getHistoryState());
   let allKeys = [ initialLocation.key ];
   let listenerCount = 0;
   let isBlocked = false;
@@ -190,7 +191,7 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
         globalHistory.pushState({ key, state }, '', href);
 
         if (forceRefresh) {
-          win.location.href = href;
+          globalLocation.href = href;
         } else {
           const prevIndex = allKeys.indexOf(history.location.key);
           const nextKeys = allKeys.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
@@ -206,7 +207,7 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
           'Browser history cannot push state in browsers that do not support HTML5 history'
         );
 
-        win.location.href = href;
+        globalLocation.href = href;
       }
     });
   };
@@ -233,7 +234,8 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
         globalHistory.replaceState({ key, state }, '', href);
 
         if (forceRefresh) {
-          win.location.replace(href);
+          globalLocation.replace(href);
+
         } else {
           const prevIndex = allKeys.indexOf(history.location.key);
 
@@ -249,7 +251,7 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
           'Browser history cannot replace state in browsers that do not support HTML5 history'
         );
 
-        win.location.replace(href);
+        globalLocation.replace(href);
       }
     });
   };
@@ -308,7 +310,7 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     };
   };
 
-  const history = {
+  const history: RouterHistory = {
     length: globalHistory.length,
     action: 'POP',
     location: initialLocation,
@@ -319,7 +321,8 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     goBack,
     goForward,
     block,
-    listen
+    listen,
+    win: win
   };
 
   return history;