Yuzu Async Component Loader


Keywords
async, lazy, loadable, yuzu, component, dom
License
MIT
Install
npm install yuzu-loadable@2.0.1

Documentation

Yuzu

old school component management

Why?

There are scenarios where you need to add interactivity to a web page or web application where the HTML is already in place, rendered by a server-side service.

To address these scenarios you can use Yuzu to organize your application in a component-based, progressive enhanced architecture.

Learn more at https://dwightjack.github.io/yuzu/.

Example

<div class="timer">
  <p class="timer__value">0</p>
  <p></p>
</div>
import { Component } from 'yuzu';

class Timer extends Component {
  selectors = {
    value: '.timer__value',
  };

  state = {
    elapsed: 0,
  };

  actions = {
    elapsed: 'update',
  };

  mounted() {
    this.interval = setInterval(() => {
      this.setState(({ elapsed }) => ({ elapsed: elapsed + 1 }));
    }, 1000);
  }

  beforeDestroy() {
    clearInterval(this.interval);
  }

  update() {
    this.$els.value.innerText = this.state.elapsed;
  }
}

new Timer().mount('.timer');

Edit Yuzu Demo

Read the core package documentation to learn more.

Packages