Skip to content

riot/lazy

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

Riot Lazy

Riot.js lazy logo

Build Status Code Quality NPM version NPM downloads MIT License Coverage Status

Lazy wrapper for Riot.js components

Table of Contents

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>

About

Lazy components loader for Riot.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published