feat: add searchParams for RouterLocation

demo/vaadin-router-route-parameters-demos.html

@@ -186,11 +186,7 @@ <h3>Search Query Parameters</h3>
     </p>
     <p>
       Use <code>location.search</code> to access the raw search query string.
-      For parsing the parameters, use <code>URLSearchParams</code> native API.
-    </p>
-    <p>
-      Note: The <code>URLSearchParams</code> API is absent in IE 11, make sure
-      to have <a href="#">the <code>URLSearchParams</code> polyfill</a>.
+      Use <code>location.searchParams</code> to get the <code>URLSearchParams</code> wrapper of the search query string.
     </p>
     <vaadin-demo-snippet id="vaadin-router-route-parameters-demo-5" iframe-src="iframe.html">
       <template preserve-content>
@@ -216,7 +212,7 @@ <h3>Search Query Parameters</h3>
             }
 
             getPageNumber(location) {
-              return new URLSearchParams(location.search).get('page') || 'none';
+              return location.searchParams.get('page') || 'none';
             }
           }
           customElements.define(PageNumberViewElement.is, PageNumberViewElement);

demo/vaadin-router-url-generation-demos.html

@@ -234,10 +234,6 @@ <h3>Generating URLs with search query parameters and hash string</h3>
       For serialising parameters into a query string, use the native
       <code>URLSearchParams</code> API.
     </p>
-    <p>
-      Note: The <code>URLSearchParams</code> API is absent in IE 11, make sure
-      to have <a href="#">the <code>URLSearchParams</code> polyfill</a>.
-    </p>
     <vaadin-demo-snippet id="vaadin-router-url-generation-demo-search-hash" iframe-src="iframe.html">
       <template preserve-content>
         <div id="outlet"></div>

docs/vaadin-router/demo/vaadin-router-code-splitting-demos.html

@@ -6,110 +6,6 @@
       }
     </style>
 
-    <h3>Lazy Loading JS Bundles</h3>
-    <p>
-      Vaadin Router works great with code splitting. If your build tool allows
-      you to split your code into various bundles which can then be loaded on
-      demand, Vaadin Router can load these bundled lazily just-in-time before
-      rendering a route.
-      In order to use this feature specify a bundle URL in the <code>bundle
-      </code> property of the route object.
-    </p>
-    <p>
-      By default Vaadin Router loads route bundles as regular JavaScript files (async),
-      but it supports ES module bundles as well. In order to use a ES module as a route bundle,
-      set the <code>bundle</code> property to an object with the following structure:
-      <marked-element>
-        <script type="text/markdown">
-          ```js
-          {
-            bundle: {
-              module: '/bundle.esm.js', // for browsers supporting ES modules
-              nomodule: '/bundle.es5.js' // fallback for older browsers
-            }
-          }
-          ```
-        </script>
-      </marked-element>
-    </p><p>
-      Note: If the bundle URL does not end with <code>.js</code> nor with <code>
-      .mjs</code>, Vaadin Router throws an <code>Error</code> and does not
-      attempt to load it. Use a custom route action as shown in the next demo if
-      you need to load non-js bundles.
-    </p>
-    <p>
-      This demo shows how to load the <code>user.bundle.js</code>
-      script which defines the custom element for the <code>/user/:id</code> route.
-      Check the network tab in the browser DevTools to see that the script is
-      loaded only after clicking the <code>/user/guest</code> link.
-    </p>
-    <vaadin-demo-snippet id="vaadin-router-code-splitting-1" iframe-src="iframe.html">
-      <template preserve-content="">
-        <a href="/">Home</a>
-        <a href="/user/guest">User Profile</a>
-        <div id="outlet"></div>
-        <script>
-          // import {Router} from '@vaadin/router'; // for Webpack / Polymer CLI
-          // const Router = Vaadin.Router; // for vaadin-router.umd.js
-
-          const router = new Router(document.getElementById('outlet'));
-          router.setRoutes([
-            {path: '/', component: 'x-home-view'},
-            {
-              path: '/user/:id',
-              bundle: `${Vaadin.Demo.componentsRoot}/user.bundle.js`,
-              component: 'x-user-js-bundle-view' // <-- defined in the bundle
-            },
-          ]);
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Lazy Loading non-JS Bundles, e.g. HTML Imports</h3>
-    <p>
-      In cases when loading <code>.js</code> and <code>.mjs</code> is not
-      enough—most notably, when using HTML imports in Polymer-based
-      apps—the lazy loading feature can be implemented with a custom route
-      action (for more details see <a href="#vaadin-router-route-actions-demos">
-      Route Actions</a>).
-    </p>
-    <p>
-      This demo shows a way to lazily add an HTML import. The <code>user.bundle.html</code>
-      file contains entire Polymer 2 component definition including a template, a class,
-      and a script that defines a custom element.
-    </p>
-    <vaadin-demo-snippet id="vaadin-router-code-splitting-2" iframe-src="iframe.html">
-      <template preserve-content="">
-        <link rel="import" href="../../polymer/lib/utils/import-href.html">
-        <a href="/">Home</a>
-        <a href="/user/admin">User Profile</a>
-        <div id="outlet"></div>
-        <script>
-          // import {Router} from '@vaadin/router'; // for Webpack / Polymer CLI
-          // const Router = Vaadin.Router; // for vaadin-router.umd.js
-
-          const loadCustomBundle = (context) => {
-            // This is one way of loading a bundle lazily (works for Polymer apps).
-            // Other apps might use different ways.
-            Polymer.importHref(
-              `${Vaadin.Demo.componentsRoot}/user.bundle.html`,
-              null,
-              function(err) {
-                throw new Error('bundle not found');
-              },
-              true
-            );
-          };
-
-          const router = new Router(document.getElementById('outlet'));
-          router.setRoutes([
-            {path: '/', component: 'x-home-view'},
-            {path: '/user/:id', action: loadCustomBundle, component: 'x-user-html-bundle-view'}
-          ]);
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
     <h3>Using Dynamic Imports</h3>
     <p>
       Vaadin Router allows you to implement your own loading mechanism for bundles using
@@ -197,6 +93,52 @@ <h3>Splitting and Lazy-Loading the Routes Configuration</h3>
         </script>
       </template>
     </vaadin-demo-snippet>
+
+    <h3>Lazy Loading non-JS Bundles, e.g. HTML Imports</h3>
+    <p>
+      In cases when loading <code>.js</code> and <code>.mjs</code> is not
+      enough—most notably, when using HTML imports in Polymer-based
+      apps—the lazy loading feature can be implemented with a custom route
+      action (for more details see <a href="#vaadin-router-route-actions-demos">
+      Route Actions</a>).
+    </p>
+    <p>
+      This demo shows a way to lazily add an HTML import. The <code>user.bundle.html</code>
+      file contains entire Polymer 2 component definition including a template, a class,
+      and a script that defines a custom element.
+    </p>
+    <vaadin-demo-snippet id="vaadin-router-code-splitting-2" iframe-src="iframe.html">
+      <template preserve-content="">
+        <link rel="import" href="../../polymer/lib/utils/import-href.html">
+        <a href="/">Home</a>
+        <a href="/user/admin">User Profile</a>
+        <div id="outlet"></div>
+        <script>
+          // import {Router} from '@vaadin/router'; // for Webpack / Polymer CLI
+          // const Router = Vaadin.Router; // for vaadin-router.umd.js
+
+          const loadCustomBundle = (context) => {
+            // This is one way of loading a bundle lazily (works for Polymer apps).
+            // Other apps might use different ways.
+            Polymer.importHref(
+              `${Vaadin.Demo.componentsRoot}/user.bundle.html`,
+              null,
+              function(err) {
+                throw new Error('bundle not found');
+              },
+              true
+            );
+          };
+
+          const router = new Router(document.getElementById('outlet'));
+          router.setRoutes([
+            {path: '/', component: 'x-home-view'},
+            {path: '/user/:id', action: loadCustomBundle, component: 'x-user-html-bundle-view'}
+          ]);
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=babelHelpers.getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=babelHelpers.getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return babelHelpers.possibleConstructorReturn(this,result)}}function _isNativeReflectConstruct(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{Date.prototype.toString.call(Reflect.construct(Date,[],function(){}));return!0}catch(e){return!1}}var VaadinRouterCodeSplittingDemos=/*#__PURE__*/function(_DemoReadyEventEmitte){babelHelpers.inherits(VaadinRouterCodeSplittingDemos,_DemoReadyEventEmitte);var _super=_createSuper(VaadinRouterCodeSplittingDemos);function VaadinRouterCodeSplittingDemos(){babelHelpers.classCallCheck(this,VaadinRouterCodeSplittingDemos);return _super.apply(this,arguments)}babelHelpers.createClass(VaadinRouterCodeSplittingDemos,null,[{key:"is",get:function get(){return"vaadin-router-code-splitting-demos"}}]);return VaadinRouterCodeSplittingDemos}(DemoReadyEventEmitter(ElementDemo(Polymer.Element)));customElements.define(VaadinRouterCodeSplittingDemos.is,VaadinRouterCodeSplittingDemos);</script>
 </dom-module>

docs/vaadin-router/demo/vaadin-router-route-parameters-demos.html

@@ -185,11 +185,7 @@ <h3>Search Query Parameters</h3>
     </p>
     <p>
       Use <code>location.search</code> to access the raw search query string.
-      For parsing the parameters, use <code>URLSearchParams</code> native API.
-    </p>
-    <p>
-      Note: The <code>URLSearchParams</code> API is absent in IE 11, make sure
-      to have <a href="#">the <code>URLSearchParams</code> polyfill</a>.
+      Use <code>location.searchParams</code> to get the <code>URLSearchParams</code> wrapper of the search query string.
     </p>
     <vaadin-demo-snippet id="vaadin-router-route-parameters-demo-5" iframe-src="iframe.html">
       <template preserve-content="">
@@ -215,7 +211,7 @@ <h3>Search Query Parameters</h3>
             }
 
             getPageNumber(location) {
-              return new URLSearchParams(location.search).get('page') || 'none';
+              return location.searchParams.get('page') || 'none';
             }
           }
           customElements.define(PageNumberViewElement.is, PageNumberViewElement);

docs/vaadin-router/demo/vaadin-router-url-generation-demos.html

@@ -231,10 +231,6 @@ <h3>Generating URLs with search query parameters and hash string</h3>
       For serialising parameters into a query string, use the native
       <code>URLSearchParams</code> API.
     </p>
-    <p>
-      Note: The <code>URLSearchParams</code> API is absent in IE 11, make sure
-      to have <a href="#">the <code>URLSearchParams</code> polyfill</a>.
-    </p>
     <vaadin-demo-snippet id="vaadin-router-url-generation-demo-search-hash" iframe-src="iframe.html">
       <template preserve-content="">
         <div id="outlet"></div>

interfaces.d.ts

@@ -150,6 +150,7 @@ declare module './dist/vaadin-router' {
     redirectFrom?: string;
     route: Route | null;
     routes: Array<Route>;
+    searchParams: URLSearchParams;
 
     getUrl(params?: Params): string;
   }

src/documentation/location.js

@@ -42,6 +42,14 @@ export class Location {
      */
     this.search;
 
+    /**
+     * The query search parameters of the current url.
+     *
+     * @public
+     * @type {URLSearchParams}
+     */
+    this.searchParams;
+
     /**
      * The fragment identifier (including hash character) for the current page.
      *

src/router.js

@@ -39,6 +39,7 @@ function createLocation({pathname = '', search = '', hash = '', chain = [], para
     route: route || routes.length && routes[routes.length - 1] || null,
     params,
     redirectFrom,
+    searchParams: new URLSearchParams(search),
     getUrl: (userParams = {}) => getPathnameForRouter(
       compile(
         getMatchedPath(routes)

test/router/router.spec.html

@@ -846,6 +846,7 @@
 
             expect(router.location.pathname).to.equal('/admin');
             expect(router.location.search).to.equal('?a=b');
+            expect(router.location.searchParams.get('a')).to.equal('b');
             expect(router.location.hash).to.equal('#hash');
           });
 
@@ -878,6 +879,7 @@
 
             expect(router.location.pathname).to.equal('/admin');
             expect(router.location.search).to.equal('');
+            expect(router.location.searchParams.values().next().done).to.be.true;
             expect(router.location.hash).to.equal('');
           });
 

test/typescript/compile_fixture.ts

@@ -72,6 +72,7 @@ expectTypeOfValue<string>(router.location.baseUrl);
 expectTypeOfValue<object>(router.location.params);
 expectTypeOfValue<string>(router.location.pathname);
 expectTypeOfValue<Route | null>(router.location.route);
+expectTypeOfValue<URLSearchParams>(router.location.searchParams);
 expectTypeOfValue<Route[]>(router.location.routes);
 expectTypeOfValue<string>(router.location.getUrl());
 expectTypeOfValue<string>(router.location.getUrl({}));