Using Riot.js with Lua on Beans

Riot.js is a lightweight component-based UI library that integrates seamlessly with Lua on Beans. Here's how to compile and use a Riot.js component in your project:

1. Create a Riot.js Component

First, create a .riot file in your project. For example, app/components/hello.riot:

<hello>
  <h3>Hello, { props.name }!</h3>

  <script>
    export default {
      onMounted(props) {
        console.log('Component mounted')
      }
    }
  </script>
</hello>

2. Compile the Riot.js Component

Use the following command to compile your Riot.js components:

beans -w

This command watches for changes in your .riot files and automatically compiles them into JavaScript.

3. Include Riot.js and the Compiled Component

In your layout file (e.g., app/views/layouts/app/index.html.etlua), include the Riot.js library and your compiled component:

<script src="https://unpkg.com/riot@9.4.0/riot.min.js"></script>

4. Mount the Component in Your View

Now, you can use the component in your view:

<hello name="World"></hello>
  <script type="module">
    // import the component JavaScript output generated via @riotjs/compiler
    import MyComponent from '/app/components/hello.riot.js'

    // register the riot component
    riot.register('hello', MyComponent)

    riot.mount('hello')
  </script>

By following these steps, you can easily integrate Riot.js components into your Lua on Beans project, allowing for dynamic and interactive user interfaces.

Here the mounted tag (check the console for the log):

5. Using Navigo.js for SPA Routing

To create a Single Page Application (SPA) with client-side routing, you can use Navigo.js alongside Riot.js. Here's how to integrate Navigo.js into your Lua on Beans project:

Step 1: Include Navigo.js

Add the Navigo.js library to your layout file (e.g., app/views/layouts/app/index.html.etlua):

<script src="https://unpkg.com/navigo@8.11.1/lib/navigo.min.js"></script>

Step 2: Set Up the Router

Create a new script to set up your router:

<script type="module">
    // Initialize the router
    const router = new Navigo('/');

    // Define your routes
    router
      .on('/', () => {
        // Load home component
        import('/app/components/home.riot.js').then((module) => {
          riot.register('home', module.default);
          riot.mount('div#app', 'home');
        });
      })
      .on('/about', () => {
        // Load about component
        import('/app/components/about.riot.js').then((module) => {
          riot.register('about', module.default);
          riot.mount('div#app', 'about');
        });
      })
      .on('/contact', () => {
        // Load contact component
        import('/app/components/contact.riot.js').then((module) => {
          riot.register('contact', module.default);
          riot.mount('div#app', 'contact');
        });
      });

    // Start the router
    router.resolve();
  </script>

Step 3: Create a Container for Your Components

Add a container div in your view where components will be mounted:

<div id="app"></div>

Step 4: Update Your Navigation

Update your navigation links to use Navigo.js:

<nav>
  <a href="/" data-navigo>Home</a>
  <a href="/about" data-navigo>About</a>
  <a href="/contact" data-navigo>Contact</a>
</nav>

By following these steps, you can create a smooth, client-side routing experience in your Lua on Beans project using Navigo.js and Riot.js. This approach allows you to build a responsive Single Page Application while leveraging the component-based architecture of Riot.js.