diff --git a/analysis.json b/analysis.json index 3b3885e7..cf01db33 100644 --- a/analysis.json +++ b/analysis.json @@ -218,11 +218,11 @@ "metadata": {}, "sourceRange": { "start": { - "line": 159, + "line": 89, "column": 28 }, "end": { - "line": 159, + "line": 89, "column": 51 } }, @@ -241,11 +241,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1117, + "line": 1047, "column": 2 }, "end": { - "line": 1124, + "line": 1054, "column": 3 } }, @@ -259,11 +259,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 974, + "line": 904, "column": 2 }, "end": { - "line": 976, + "line": 906, "column": 3 } }, @@ -279,11 +279,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 984, + "line": 914, "column": 2 }, "end": { - "line": 988, + "line": 918, "column": 3 } }, @@ -305,11 +305,11 @@ "privacy": "protected", "sourceRange": { "start": { - "line": 999, + "line": 929, "column": 2 }, "end": { - "line": 1003, + "line": 933, "column": 3 } }, @@ -331,11 +331,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1008, + "line": 938, "column": 2 }, "end": { - "line": 1010, + "line": 940, "column": 3 } }, @@ -351,11 +351,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1029, + "line": 959, "column": 2 }, "end": { - "line": 1101, + "line": 1031, "column": 3 } }, @@ -377,11 +377,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1134, + "line": 1064, "column": 2 }, "end": { - "line": 1145, + "line": 1075, "column": 3 } }, @@ -400,11 +400,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1106, + "line": 1036, "column": 2 }, "end": { - "line": 1108, + "line": 1038, "column": 3 } }, @@ -423,11 +423,11 @@ "metadata": {}, "sourceRange": { "start": { - "line": 953, + "line": 883, "column": 0 }, "end": { - "line": 1146, + "line": 1076, "column": 1 } }, @@ -446,11 +446,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1117, + "line": 1047, "column": 2 }, "end": { - "line": 1124, + "line": 1054, "column": 3 } }, @@ -464,11 +464,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1494, + "line": 1424, "column": 4 }, "end": { - "line": 1494, + "line": 1424, "column": 17 } }, @@ -481,11 +481,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1504, + "line": 1434, "column": 4 }, "end": { - "line": 1504, + "line": 1434, "column": 15 } }, @@ -498,11 +498,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1516, + "line": 1446, "column": 4 }, "end": { - "line": 1516, + "line": 1446, "column": 18 } }, @@ -516,11 +516,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 974, + "line": 904, "column": 2 }, "end": { - "line": 976, + "line": 906, "column": 3 } }, @@ -533,15 +533,15 @@ }, { "name": "setRoutes", - "description": "Sets the routing config (replacing the existing one) and triggers a\nnavigation event so that the router outlet is refreshed according to the\ncurrent `window.location` and the new routing config.\n\nEach route object may have the following properties, listed here in the processing order:\n* `path` – the route path (relative to the parent route if any) in the\n[express.js syntax](https://expressjs.com/en/guide/routing.html#route-paths\").\n\n* `children` – an array of nested routes or a function that provides this\narray at the render time. The function can be synchronous or asynchronous:\nin the latter case the render is delayed until the returned promise is\nresolved. The `children` function is executed every time when this route is\nbeing rendered. This allows for dynamic route structures (e.g. backend-defined),\nbut it might have a performance impact as well. In order to avoid calling\nthe function on subsequent renders, you can override the `children` property\nof the route object and save the calculated array there\n(via `context.route.children = [ route1, route2, ...];`).\nParent routes are fully resolved before resolving the children. Children\n'path' values are relative to the parent ones.\n\n* `action` – the action that is executed before the route is resolved.\nThe value for this property should be a function, accepting `context`\nand `commands` parameters described below. If present, this function is\nalways invoked first, disregarding of the other properties' presence.\nThe action can return a result directly or within a `Promise`, which\nresolves to the result. If the action result is an `HTMLElement` instance,\na `commands.component(name)` result, a `commands.redirect(path)` result,\nor a `context.next()` result, the current route resolution is finished,\nand other route config properties are ignored.\nSee also **Route Actions** section in [Live Examples](#/classes/Router/demos/demo/index.html).\n\n* `redirect` – other route's path to redirect to. Passes all route parameters to the redirect target.\nThe target route should also be defined.\nSee also **Redirects** section in [Live Examples](#/classes/Router/demos/demo/index.html).\n\n* `bundle` – string containing the path to `.js` or `.mjs` bundle to load before resolving the route,\nor the object with \"module\" and \"nomodule\" keys referring to different bundles.\nEach bundle is only loaded once. If \"module\" and \"nomodule\" are set, only one bundle is loaded,\ndepending on whether the browser supports ES modules or not.\nThe property is ignored when either an `action` returns the result or `redirect` property is present.\nAny error, e.g. 404 while loading bundle will cause route resolution to throw.\nSee also **Code Splitting** section in [Live Examples](#/classes/Router/demos/demo/index.html).\n\n* `component` – the tag name of the Web Component to resolve the route to.\nThe property is ignored when either an `action` returns the result or `redirect` property is present.\nIf route contains the `component` property (or an action that return a component)\nand its child route also contains the `component` property, child route's component\nwill be rendered as a light dom child of a parent component.\n\n* `name` – the string name of the route to use in the\n[`router.urlForName(name, params)`](#/classes/Router#method-urlForName)\nnavigation helper method.\n\nFor any route function (`action`, `children`) defined, the corresponding `route` object is available inside the callback\nthrough the `this` reference. If you need to access it, make sure you define the callback as a non-arrow function\nbecause arrow functions do not have their own `this` reference.\n\n`context` object that is passed to `action` function holds the following properties:\n* `context.pathname` – string with the pathname being resolved\n\n* `context.search` – search query string\n\n* `context.hash` – hash string\n\n* `context.params` – object with route parameters\n\n* `context.route` – object that holds the route that is currently being rendered.\n\n* `context.next()` – function for asynchronously getting the next route\ncontents from the resolution chain (if any)\n\n`commands` object that is passed to `action` function has\nthe following methods:\n\n* `commands.redirect(path)` – function that creates a redirect data\nfor the path specified.\n\n* `commands.component(component)` – function that creates a new HTMLElement\nwith current context. Note: the component created by this function is reused if visiting the same path twice in row.", + "description": "Sets the routing config (replacing the existing one) and triggers a\nnavigation event so that the router outlet is refreshed according to the\ncurrent `window.location` and the new routing config.\n\nEach route object may have the following properties, listed here in the processing order:\n* `path` – the route path (relative to the parent route if any) in the\n[express.js syntax](https://expressjs.com/en/guide/routing.html#route-paths\").\n\n* `children` – an array of nested routes or a function that provides this\narray at the render time. The function can be synchronous or asynchronous:\nin the latter case the render is delayed until the returned promise is\nresolved. The `children` function is executed every time when this route is\nbeing rendered. This allows for dynamic route structures (e.g. backend-defined),\nbut it might have a performance impact as well. In order to avoid calling\nthe function on subsequent renders, you can override the `children` property\nof the route object and save the calculated array there\n(via `context.route.children = [ route1, route2, ...];`).\nParent routes are fully resolved before resolving the children. Children\n'path' values are relative to the parent ones.\n\n* `action` – the action that is executed before the route is resolved.\nThe value for this property should be a function, accepting `context`\nand `commands` parameters described below. If present, this function is\nalways invoked first, disregarding of the other properties' presence.\nThe action can return a result directly or within a `Promise`, which\nresolves to the result. If the action result is an `HTMLElement` instance,\na `commands.component(name)` result, a `commands.redirect(path)` result,\nor a `context.next()` result, the current route resolution is finished,\nand other route config properties are ignored.\nSee also **Route Actions** section in [Live Examples](#/classes/Router/demos/demo/index.html).\n\n* `redirect` – other route's path to redirect to. Passes all route parameters to the redirect target.\nThe target route should also be defined.\nSee also **Redirects** section in [Live Examples](#/classes/Router/demos/demo/index.html).\n\n* `component` – the tag name of the Web Component to resolve the route to.\nThe property is ignored when either an `action` returns the result or `redirect` property is present.\nIf route contains the `component` property (or an action that return a component)\nand its child route also contains the `component` property, child route's component\nwill be rendered as a light dom child of a parent component.\n\n* `name` – the string name of the route to use in the\n[`router.urlForName(name, params)`](#/classes/Router#method-urlForName)\nnavigation helper method.\n\nFor any route function (`action`, `children`) defined, the corresponding `route` object is available inside the callback\nthrough the `this` reference. If you need to access it, make sure you define the callback as a non-arrow function\nbecause arrow functions do not have their own `this` reference.\n\n`context` object that is passed to `action` function holds the following properties:\n* `context.pathname` – string with the pathname being resolved\n\n* `context.search` – search query string\n\n* `context.hash` – hash string\n\n* `context.params` – object with route parameters\n\n* `context.route` – object that holds the route that is currently being rendered.\n\n* `context.next()` – function for asynchronously getting the next route\ncontents from the resolution chain (if any)\n\n`commands` object that is passed to `action` function has\nthe following methods:\n\n* `commands.redirect(path)` – function that creates a redirect data\nfor the path specified.\n\n* `commands.component(component)` – function that creates a new HTMLElement\nwith current context. Note: the component created by this function is reused if visiting the same path twice in row.", "privacy": "public", "sourceRange": { "start": { - "line": 1708, + "line": 1623, "column": 2 }, "end": { - "line": 1716, + "line": 1631, "column": 3 } }, @@ -569,11 +569,11 @@ "privacy": "protected", "sourceRange": { "start": { - "line": 999, + "line": 929, "column": 2 }, "end": { - "line": 1003, + "line": 933, "column": 3 } }, @@ -596,11 +596,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1008, + "line": 938, "column": 2 }, "end": { - "line": 1010, + "line": 940, "column": 3 } }, @@ -617,11 +617,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1029, + "line": 959, "column": 2 }, "end": { - "line": 1101, + "line": 1031, "column": 3 } }, @@ -644,11 +644,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1134, + "line": 1064, "column": 2 }, "end": { - "line": 1145, + "line": 1075, "column": 3 } }, @@ -666,11 +666,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1528, + "line": 1458, "column": 2 }, "end": { - "line": 1592, + "line": 1515, "column": 3 } }, @@ -687,11 +687,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1604, + "line": 1527, "column": 2 }, "end": { - "line": 1609, + "line": 1532, "column": 3 } }, @@ -713,11 +713,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1616, + "line": 1539, "column": 2 }, "end": { - "line": 1618, + "line": 1541, "column": 3 } }, @@ -734,11 +734,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 1739, + "line": 1654, "column": 2 }, "end": { - "line": 1823, + "line": 1738, "column": 3 } }, @@ -765,11 +765,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1836, + "line": 1751, "column": 2 }, "end": { - "line": 1884, + "line": 1799, "column": 3 } }, @@ -790,11 +790,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1886, + "line": 1801, "column": 2 }, "end": { - "line": 1906, + "line": 1821, "column": 3 } }, @@ -811,11 +811,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1908, + "line": 1823, "column": 2 }, "end": { - "line": 1915, + "line": 1830, "column": 3 } }, @@ -832,11 +832,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1917, + "line": 1832, "column": 2 }, "end": { - "line": 1989, + "line": 1904, "column": 3 } }, @@ -853,11 +853,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1991, + "line": 1906, "column": 2 }, "end": { - "line": 2003, + "line": 1918, "column": 3 } }, @@ -883,11 +883,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2005, + "line": 1920, "column": 2 }, "end": { - "line": 2013, + "line": 1928, "column": 3 } }, @@ -913,11 +913,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2015, + "line": 1930, "column": 2 }, "end": { - "line": 2022, + "line": 1937, "column": 3 } }, @@ -937,11 +937,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2024, + "line": 1939, "column": 2 }, "end": { - "line": 2026, + "line": 1941, "column": 3 } }, @@ -958,11 +958,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2028, + "line": 1943, "column": 2 }, "end": { - "line": 2042, + "line": 1957, "column": 3 } }, @@ -985,11 +985,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2044, + "line": 1959, "column": 2 }, "end": { - "line": 2048, + "line": 1963, "column": 3 } }, @@ -1010,11 +1010,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2050, + "line": 1965, "column": 2 }, "end": { - "line": 2059, + "line": 1974, "column": 3 } }, @@ -1037,11 +1037,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2061, + "line": 1976, "column": 2 }, "end": { - "line": 2077, + "line": 1992, "column": 3 } }, @@ -1061,11 +1061,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2079, + "line": 1994, "column": 2 }, "end": { - "line": 2117, + "line": 2032, "column": 3 } }, @@ -1088,11 +1088,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2119, + "line": 2034, "column": 2 }, "end": { - "line": 2125, + "line": 2040, "column": 3 } }, @@ -1108,11 +1108,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2127, + "line": 2042, "column": 2 }, "end": { - "line": 2133, + "line": 2048, "column": 3 } }, @@ -1128,11 +1128,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2135, + "line": 2050, "column": 2 }, "end": { - "line": 2161, + "line": 2076, "column": 3 } }, @@ -1155,11 +1155,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2163, + "line": 2078, "column": 2 }, "end": { - "line": 2176, + "line": 2091, "column": 3 } }, @@ -1179,11 +1179,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2178, + "line": 2093, "column": 2 }, "end": { - "line": 2200, + "line": 2115, "column": 3 } }, @@ -1200,11 +1200,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 2208, + "line": 2123, "column": 2 }, "end": { - "line": 2210, + "line": 2125, "column": 3 } }, @@ -1220,11 +1220,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 2216, + "line": 2131, "column": 2 }, "end": { - "line": 2218, + "line": 2133, "column": 3 } }, @@ -1240,11 +1240,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 2220, + "line": 2135, "column": 2 }, "end": { - "line": 2228, + "line": 2143, "column": 3 } }, @@ -1264,11 +1264,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 2269, + "line": 2184, "column": 2 }, "end": { - "line": 2277, + "line": 2192, "column": 3 } }, @@ -1295,11 +1295,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 2290, + "line": 2205, "column": 2 }, "end": { - "line": 2295, + "line": 2210, "column": 3 } }, @@ -1328,11 +1328,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1106, + "line": 1036, "column": 2 }, "end": { - "line": 1108, + "line": 1038, "column": 3 } }, @@ -1353,11 +1353,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 2246, + "line": 2161, "column": 2 }, "end": { - "line": 2248, + "line": 2163, "column": 3 } }, @@ -1379,11 +1379,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 2308, + "line": 2223, "column": 2 }, "end": { - "line": 2313, + "line": 2228, "column": 3 } }, @@ -1413,11 +1413,11 @@ "metadata": {}, "sourceRange": { "start": { - "line": 1458, + "line": 1388, "column": 0 }, "end": { - "line": 2314, + "line": 2229, "column": 1 } }, diff --git a/demo/vaadin-router-code-splitting-demos.html b/demo/vaadin-router-code-splitting-demos.html index 2617f98d..94291f11 100644 --- a/demo/vaadin-router-code-splitting-demos.html +++ b/demo/vaadin-router-code-splitting-demos.html @@ -6,110 +6,6 @@ } -

Lazy Loading JS Bundles

-

- 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 bundle - property of the route object. -

-

- 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 bundle property to an object with the following structure: - - - -

- Note: If the bundle URL does not end with .js nor with - .mjs, Vaadin Router throws an Error 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. -

-

- This demo shows how to load the user.bundle.js - script which defines the custom element for the /user/:id route. - Check the network tab in the browser DevTools to see that the script is - loaded only after clicking the /user/guest link. -

- - - - -

Lazy Loading non-JS Bundles, e.g. HTML Imports

-

- In cases when loading .js and .mjs 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 - Route Actions). -

-

- This demo shows a way to lazily add an HTML import. The user.bundle.html - file contains entire Polymer 2 component definition including a template, a class, - and a script that defines a custom element. -

- - - -

Using Dynamic Imports

Vaadin Router allows you to implement your own loading mechanism for bundles using @@ -198,6 +94,52 @@

Splitting and Lazy-Loading the Routes Configuration

+ +

Lazy Loading non-JS Bundles, e.g. HTML Imports

+

+ In cases when loading .js and .mjs 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 + Route Actions). +

+

+ This demo shows a way to lazily add an HTML import. The user.bundle.html + file contains entire Polymer 2 component definition including a template, a class, + and a script that defines a custom element. +

+ + + +