updated: dependencies and add the lazy.export method

README.md

@@ -18,6 +18,7 @@ npm i -S @riotjs/lazy
 
 ## Documentation
 
+The following examples show how you can lazy load Riot.js components using modern javascript bundlers like [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/).
 
 You can lazy load any component providing a fallback component during the loading process for example:
 

index.next.js

@@ -6,56 +6,61 @@ const cache = new WeakMap()
 // expose the cache as static property
 lazy.cache = cache
 
-export default function lazy(Loader, Component) {
+// static attribute in case we want to just export a lazy riot component
+lazy.export = function lazyExport(Loader, Component) {
   // it could be that the user don't want to use a loader for whatever reason
   const hasLoader = Loader && Component
   const LazyComponent = hasLoader ? Component : Loader
   const load = () => typeof LazyComponent === 'function' ? LazyComponent() : Promise.resolve(LazyComponent)
   const cachedComponent = cache.get(LazyComponent)
 
-  return {
-    name: 'lazy',
-    exports: pure(({ slots, attributes, props }) => ({
-      mount(el, parentScope) {
-        this.el = el
-        this.isMounted = true
-        const mount = () => this.mountLazyComponent(parentScope)
+  return pure(({ slots, attributes, props }) => ({
+    mount(el, parentScope) {
+      this.el = el
+      this.isMounted = true
+      const mount = () => this.mountLazyComponent(parentScope)
+
+      if (cachedComponent) {
+        mount()
+      } else {
+        if (hasLoader) this.createManagedComponent(Loader, parentScope)
 
-        if (cachedComponent) {
+        load().then(data => {
+          cache.set(LazyComponent, data.default || data)
           mount()
-        } else {
-          if (hasLoader) this.createManagedComponent(Loader, parentScope)
-
-          load().then(data => {
-            cache.set(LazyComponent, data.default || data)
-            mount()
-          })
-        }
-      },
-      createManagedComponent(Child, parentScope) {
-        this.component = component(Child)(this.el, props, {
-          attributes, slots, parentScope
         })
-      },
-      mountLazyComponent(parentScope) {
-      // if this component was unmounted just return here
-        if (!this.isMounted) return
-
-        // unmount the loader if it was previously created
-        // notice the true flat to keep the root node
-        if (this.component) this.component.unmount(true)
-
-        // replace the old component instance with the new lazy loaded component
-        this.createManagedComponent(cache.get(LazyComponent), parentScope)
-      },
-      update(parentScope) {
-        if (this.isMounted && this.component) this.component.update({}, parentScope)
-      },
-      unmount(...args) {
-        this.isMounted = false
-
-        if (this.component) this.component.unmount(...args)
       }
-    }))
+    },
+    createManagedComponent(Child, parentScope) {
+      this.component = component(Child)(this.el, props, {
+        attributes, slots, parentScope
+      })
+    },
+    mountLazyComponent(parentScope) {
+      // if this component was unmounted just return here
+      if (!this.isMounted) return
+
+      // unmount the loader if it was previously created
+      // notice the true flat to keep the root node
+      if (this.component) this.component.unmount(true)
+
+      // replace the old component instance with the new lazy loaded component
+      this.createManagedComponent(cache.get(LazyComponent), parentScope)
+    },
+    update(parentScope) {
+      if (this.isMounted && this.component) this.component.update({}, parentScope)
+    },
+    unmount(...args) {
+      this.isMounted = false
+
+      if (this.component) this.component.unmount(...args)
+    }
+  }))
+}
+
+export default function lazy(Loader, Component) {
+  return {
+    name: 'lazy',
+    exports: lazy.export(Loader, Component)
   }
 }

package.json

@@ -27,12 +27,12 @@
     "eslint": "^6.8.0",
     "eslint-config-riot": "^3.0.0",
     "esm": "^3.2.25",
-    "jsdom": "16.1.0",
+    "jsdom": "16.2.0",
     "jsdom-global": "3.0.2",
-    "mocha": "^7.0.1",
+    "mocha": "^7.1.0",
     "nyc": "^15.0.0",
-    "riot": "^4.8.9",
-    "rollup": "^1.31.0",
+    "riot": "^4.10.0",
+    "rollup": "^1.32.0",
     "rollup-plugin-terser": "^5.2.0"
   }
 }