Riot Lazy

Lazy wrapper for Riot.js components

Table of Contents

• Install
• Documentation

Install

npm i -S @riotjs/lazy

Documentation

The following examples show how you can lazy load Riot.js components using modern javascript bundlers like Webpack or Rollup.

You can lazy load any component providing a fallback component during the loading process for example:

<app>
  <user name={state.name}/>
  <sidebar/>

  <script>
    import lazy from '@riotjs/lazy'
    import Loader from './my-loader.riot'

    export default {
      components: {
        // use a fallback loader
        user: lazy(Loader, () => import('./user.riot'))
        // just lazy load the sidebar
        sidebar: lazy(() => import('./sidebar.riot'))
      }
    }
  </script>
</app>

When the component is loaded, Lazy will dispatch a 'load' event from the component root element.

This can be useful e.g. for removing splashscreen on app start:

<app>
  <user name={state.name} onload={ removeSplashscreen }/>

  <script>
    import lazy from '@riotjs/lazy'
    import Loader from './my-loader.riot'

    export default {
      components: {
        // use a fallback loader
        user: lazy(Loader, () => import('./user.riot'))
      },
      removeSplashscreen() {
        // the splashscreen, in this example, is create in pure html
        // in the main page, to avoid blank page loading
        const splashscreen = document.querySelector("#splashscreen");
        if (!splashscreen) {
          return;
        }
        splashcreen.parentElement.removeChild(splashscreen);
      }
    }
  </script>
</app>

Lazy loading Riot.js components is recommended combined with @riotjs/route

<app>
  <router>
    <route path="/user/:name">
      <!-- this component will be loaded only when the route will be matched -->
      <user name={route[0]}/>
    </route>
  </router>

  <script>
    import lazy from '@riotjs/lazy'
    import Loader from './my-loader.riot'

    export default {
      components: {
        user: lazy(Loader, () => import('./user.riot'))
      }
    }
  </script>
</app>