Lazy loading example

Profiscience · Mar 15, 2017 · fefbfea · fefbfea
1 parent 2139c34
commit fefbfea
Show file tree

Hide file tree

Showing 16 changed files with 95 additions and 1 deletion.
diff --git a/examples/.babelrc b/examples/.babelrc
@@ -1,4 +1,3 @@
 {
-  "presets": ["es2017"],
   "plugins": ["syntax-dynamic-import"]
 }
diff --git a/examples/index.html b/examples/index.html
@@ -9,6 +9,7 @@
 <body>
   <ul>
     <li><a href="hashbang">hashbang</a></li>
+    <li><a href="lazy-loading">lazy-loading</a></li>
     <li><a href="mvc">mvc</a></li>
     <li><a href="path-binding">path-binding</a></li>
   </ul>

diff --git a/examples/lazy-loading/index.html b/examples/lazy-loading/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>ko-component-router lazy-loading example</title>
+</head>
+<body>
+  <h1>Check the network panel in the dev tools</h1>
+  <hr>
+  <app></app>
+  <script src="/dist/lazy-loading.js"></script>
+</body>
+</html>
diff --git a/examples/lazy-loading/index.js b/examples/lazy-loading/index.js
@@ -0,0 +1,20 @@
+import ko from 'knockout'
+import Router from 'ko-component-router'
+import lazyComponentLoaderPlugin from './plugins/lazy-component-loader'
+
+Router.setConfig({ base: '/lazy-loading', hashbang: true })
+
+Router.usePlugin(lazyComponentLoaderPlugin)
+
+Router.useRoutes({
+  '/':    'list',
+  '/foo': 'foo',
+  '/bar': 'bar',
+  '/baz': 'baz',
+  '/qux': 'qux'
+}
+)
+
+ko.components.register('app', { template: '<ko-component-router></ko-component-router>' })
+
+ko.applyBindings()
diff --git a/examples/lazy-loading/plugins/lazy-component-loader.js b/examples/lazy-loading/plugins/lazy-component-loader.js
@@ -0,0 +1,22 @@
+import ko from 'knockout'
+
+export default function plugin(componentName) {
+  return [
+    // we return an array that the router understands, so first we'll
+    // include the name of the component
+    componentName,
+
+    // then some middleware to load that component...
+    (ctx) => {
+      // bail if already loaded
+      if (ko.components.isRegistered(componentName)) {
+        return
+      }
+
+      // https://webpack.js.org/guides/code-splitting-import/
+      return import('../views/' + componentName + '/index.js')
+        .then((exports) => ko.components.register(componentName, exports))
+        .catch((err) => console.error('Error fetching component', componentName, err))
+    }
+  ]
+}
diff --git a/examples/lazy-loading/views/bar/index.js b/examples/lazy-loading/views/bar/index.js
@@ -0,0 +1 @@
+export { default as template } from './template.html'
diff --git a/examples/lazy-loading/views/bar/template.html b/examples/lazy-loading/views/bar/template.html
@@ -0,0 +1,5 @@
+<h2>bar</h2>
+
+<hr>
+
+<a data-bind="path: '/'">back</a>
diff --git a/examples/lazy-loading/views/baz/index.js b/examples/lazy-loading/views/baz/index.js
@@ -0,0 +1 @@
+export { default as template } from './template.html'
diff --git a/examples/lazy-loading/views/baz/template.html b/examples/lazy-loading/views/baz/template.html
@@ -0,0 +1,5 @@
+<h2>baz</h2>
+
+<hr>
+
+<a data-bind="path: '/'">back</a>
diff --git a/examples/lazy-loading/views/foo/index.js b/examples/lazy-loading/views/foo/index.js
@@ -0,0 +1 @@
+export { default as template } from './template.html'
diff --git a/examples/lazy-loading/views/foo/template.html b/examples/lazy-loading/views/foo/template.html
@@ -0,0 +1,5 @@
+<h2>foo</h2>
+
+<hr>
+
+<a data-bind="path: '/'">back</a>
diff --git a/examples/lazy-loading/views/list/index.js b/examples/lazy-loading/views/list/index.js
@@ -0,0 +1 @@
+export { default as template } from './template.html'
diff --git a/examples/lazy-loading/views/list/template.html b/examples/lazy-loading/views/list/template.html
@@ -0,0 +1,11 @@
+<a data-bind="path: '/foo'">foo</a>
+<br>
+
+<a data-bind="path: '/bar'">bar</a>
+<br>
+
+<a data-bind="path: '/baz'">baz</a>
+<br>
+
+<a data-bind="path: '/qux'">qux</a>
+<br>
diff --git a/examples/lazy-loading/views/qux/index.js b/examples/lazy-loading/views/qux/index.js
@@ -0,0 +1 @@
+export { default as template } from './template.html'
diff --git a/examples/lazy-loading/views/qux/template.html b/examples/lazy-loading/views/qux/template.html
@@ -0,0 +1,5 @@
+<h2>qux</h2>
+
+<hr>
+
+<a data-bind="path: '/'">back</a>
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -5,6 +5,7 @@ const path = require('path')
 module.exports = {
   entry: {
     'hashbang': path.resolve(__dirname, './hashbang/index.js'),
+    'lazy-loading': path.resolve(__dirname, './lazy-loading/index.js'),
     'mvc': path.resolve(__dirname, './mvc/index.js'),
     'path-binding': path.resolve(__dirname, './path-binding/index.js')
   },