Documentation

Building Seamless User Experiences: Documentation for Routemamba

Welcome to Routemamba, a powerful JavaScript library designed to enhance web applications by transforming them into fully functional single-page applications (SPAs). This guide will walk you through the process of getting started with Routemamba and showcase its capabilities in creating dynamic and engaging user experiences.

Introduction

Routemamba was developed with the goal of making websites single-page applications (SPAs) without the need for large dependencies or frameworks like React.js, Next.js, or Vue.js. It is specially designed for raw developers who prefer to develop their websites using custom coding and want full control over their applications. With Routemamba, you can create SPAs and enjoy dynamic user experiences without relying on extensive external libraries. Whether you're an experienced developer looking to enhance your web applications or new to the world of SPAs, this documentation is tailored to meet your needs. With Routemamba, you can take full control over your application by custom coding, allowing you to deliver dynamic and engaging user experiences seamlessly.

If you have any questions that are beyond the scope of this project, Please feel free to join our Discord Channel.

Getting Started

To begin using Routemamba in your projects, follow the steps outlined in this documentation. You will learn how to integrate the library, set up routing, and handle view rendering, among other features that Routemamba offers. Armed with this knowledge and the resources provided, you'll be able to unlock the full potential of Routemamba and elevate your web applications to the next level. Next, let's dive into the installation process and start building powerful single-page applications with Routemamba. Get ready to transform your projects into dynamic and interactive experiences for your users!

If you prefer a visual guide to learn Routemamba, you can check out our video tutorial series:

The video tutorial series provides step-by-step instructions and demonstrations on how to use Routemamba effectively in your PHP projects. Whether you're new to Routemamba or want to enhance your existing knowledge, this tutorial series can be a valuable resource.

Click on the play button above to watch the video tutorial playlist.

Installation Guide

To start using Routemamba in your PHP projects, follow these simple steps:

Step 1: Install via npm (Node Package Manager)
If you prefer using npm, open your terminal or command prompt and run the following command:
```
npm install routemamba
```
This will install Routemamba and its dependencies in your project.
Step 2: Link via script tag
Alternatively, you can include Routemamba directly in your HTML file by adding the following script tag:
```
<script src="https://unpkg.com/routemamba/dist/routemamba.min.js"></script>
```
Place this script tag within the <head> tags of your HTML file.
Step 3: Copy the Routemamba folder (if using npm)
If you chose to install Routemamba using npm, navigate to the node_modules/ folder in your project directory. Locate the routemamba folder and copy it.

Next, navigate to your project's /assets folder and paste the routemamba folder there. This step ensures that the library is accessible within your project.
Step 4: Link the Routemamba library
In your HTML file, add the following script tag to link the Routemamba library:
```
<script src="./assets/routemamba/dist/routemamba.min.js"></script>
```
Make sure this script tag is placed within the <head> tags of your HTML file.
Step 5: Create the app.js file
In the root folder of your project, create a file named app.js. This file will serve as the entry point for your Routemamba code.
Step 6: app.js file setup example:
app.js File code example as our demo test project: (you can find it in the /example folder)

First of all, you need to set Server Host. It can be your full URL, for example: https://example.com/ or https://localhost/ for your localhost.
```
// set server host
routemamba.registerServerHost('http://example.com/');
                
```
Then set a meta content url to get meta content, mainly using PHP for dynamic meta content. Check the /test/app.js file in this project directory.
```
// set meta content
routemamba.registerMetaUrl('inc/meta-content.php');
                
```
After setting the meta content path, you need to add a <meta></meta> tag in the <head> section.
```
<head>
  <meta></meta>
</head>
                
```
Note: After adding this, the meta content will be loaded. However, you may face an issue with SEO since search engine crawlers cannot retrieve your SEO information from the meta content due to it loading after document ready. To fix this problem, you need to add additional meta info using PHP. More info in SEO configuration.

Await Rendering:
RouteMamba's Await Rendering feature offers developers the ability to render all components simultaneously after ensuring that all components have been loaded properly. By default, RouteMamba utilizes Await Rendering, guaranteeing a seamless rendering experience. However, if a developer prefers the traditional rendering method, they can easily switch to it by setting routemamba.await_rendering(false). This flexibility allows developers to choose the rendering approach that best suits their project requirements.
```
// set meta content
routemamba.await_rendering(true); // true / false
                
```
Step 7: Link the app.js file
Finally, include the app.js file in the footer of your HTML file using the following script tag:
```
<script src="/app.js"></script>
```
Place this script tag just before the closing </body> tag of your HTML file.

Congratulations! You have successfully installed Routemamba in your project. Now you're ready to harness the power of Routemamba and create exceptional single-page applications with PHP.

Note: You have the flexibility to choose the installation method that suits your preferences. Whether you prefer npm or including the library via a script tag, Routemamba will work seamlessly in your project.

Please refer to the Routemamba documentation for further details on configuring and utilizing the library to maximize its potential in your PHP web application.

Project Setup

To properly set up your project to use Routemamba, follow the file and folder structure outlined below:


project_root
├── assets
|   └── routemamba
|       └── routemamba.min.js
├── components
|   ├── header-layout
|   |   └── header-component.php
|   ├── footer-layout
|   |   └── footer-component.php
|   ├── about-component.php
|   └── index-component.php
├── include
|   ├── header.php
|   ├── footer.php
|   └── meta-content.php
├── index.php
├── about.php
└── app.js

The above file and folder structure provides a recommended organization for your Routemamba-powered PHP project. Here's a breakdown of the different directories and files:

assets/routemamba: This folder contains the routemamba.min.js file, which is the main Routemamba library. Make sure to include this file in your project for Routemamba functionality.
components: This directory holds various components that make up your web application, such as the header and footer layouts, as well as specific components for pages like the about page and index page.
include: This folder includes common files that are included in multiple pages, such as the header, footer, and meta content files. These files can be used to maintain consistency across different pages of your application.
index.php, about.php: These PHP files represent the different pages of your application. You can customize these files as per your requirements and utilize Routemamba to create single-page application functionality.
app.js: This file serves as the entry point for your Routemamba code. You can include your Routemamba-specific JavaScript code in this file.

By organizing your files and folders in this manner, you can effectively utilize Routemamba and maintain a structured project setup.

Please note that this file and folder structure is a suggested setup, and you can modify it based on your specific project requirements.

HTML Structure

When using Routemamba in your PHP projects, you need to follow a specific HTML structure. Below is an example of the required structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Here The meta information will load specially for SEO -->
    <meta></meta>
    <!-- Add any additional meta tags if required -->

    <!-- Include the Routemamba library -->
    <script src="./dist/routemamba.min.js"></script>

    <!-- Include Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

    <!-- To load all components in page, root is required -->
    <root></root>

    <!-- Include your app.js file -->
    <script src="./web/app.js"></script>
</body>
</html>

If you need more information, please join our Discord Channel

SEO Configuration

Example: Configuring SEO with Routemamba

To configure SEO with Routemamba, you need to set up the following files:

In the `header.php` file:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta>
      <?php
      include 'inc/meta-content.php';
      ?>
    
      </meta>
      
      <script src="https://unpkg.com/routemamba/dist/routemamba.min.js"></script>
    </head>
    <body>

In the header.php file, we define the HTML document structure and set the appropriate title based on the current route. This ensures that each page has a unique and descriptive title for better SEO.

In the `meta-content.php` file:

<?php
            if (isset($_GET['route'])) {
        $route = $_GET['route'];
      }else {
        $route = basename($_SERVER['PHP_SELF']);
      }

      switch ($route) {
        case '/':
          $title = 'Home';
          break;
        case '/about.php':
          $title = 'About';
          break;

        default:
          $title = 'Home';
          break;
      }
    ?>
      
    <title><?php echo $title; ?></title>

In the meta-content.php file, we handle dynamic meta content generation. Based on the current route, we set the appropriate meta title. This allows search engine crawlers to retrieve relevant information for indexing.

Make sure to include the necessary PHP code to fetch and handle any additional parameters passed via the URL in the meta-content.php file.

By following this SEO configuration approach, you can ensure that each page has an appropriate title and meta information, improving the search engine visibility and ranking of your web application.

Language Support

The Routemamba.js library is currently supported with seo in the following languages:

PHP
Javascript (Express Js) - (Example project)
Golang (Fiber framework) - (Example project)

If you are using Routemamba.js with any of these languages, you can take advantage of its features and benefits.

For more information, you can join our discord channel.

Routing and routes configuration

Overview of Routing and Routes Configuration

Routing in Routemamba involves defining how your web application handles different URLs or routes. By configuring routes, you can map specific URLs to corresponding actions, controllers, or components within your application.

Routes configuration consists of defining URL patterns and associating them with the appropriate actions or components. This allows users to access specific content or trigger specific functionality based on the URL they visit.

HTTP Routes Configuration

Overview of HTTP Routes

In Routemamba, HTTP routes are the URLs that users will visit to access specific content or trigger specific functionality within your web application. To handle these routes effectively, you need to configure HTTP routes by defining an array of route objects.

HTTP Routes Configuration Example

Let's take a look at an example from our test project's `app.js` file to understand how to configure HTTP routes:

For php:

// HTTP routes setup
routemamba.register_http_routes([
  {
    method: "GET",
    meta_loader: true,
    content_url: "content/home.php",
    
    data: {},
    preloader: 'loading...',
    error_content: 'error',
    http_url_change: false,
    http_url: "/"
  },
  {
    method: "GET",
    meta_loader: true,
    content_url: "content/about.php",
    
    data: {},
    preloader: 'loading...',
    error_content: 'error',
    http_url_change: false,
    http_url: "/about.php"
  },
  {
    method: "GET",
    meta_loader: true,
    content_url: "content/privacy.php",
    
    data: {},
    preloader: 'loading...',
    error_content: 'error',
    http_url_change: false,
    http_url: "/privacy.php"
  }
]);

For express js:


routemamba.register_http_routes([
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/home',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/about',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/about',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/privacy',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/privacy',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/tabs-example',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/tabs-example',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/post',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/post/:id',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/news',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/news/:date/:title',
  },
]);

The above code represents an array of HTTP route objects. Each object defines the configuration for a specific route, including the method, meta loader, content URL, container, preloader, error content, HTTP URL change, and HTTP URL.

Explanation of HTTP Route Object

Let's explore the properties of the HTTP route object:

method: Specifies the request method (POST or GET) for the route.
meta_loader: A boolean value indicating whether the meta content should change for the specific route.
content_url: The path to the content file that will be loaded for the route.
preloader: HTML content or message to be shown as a preloader while the content is loading.
error_content: HTML content or message to be displayed if there is an error loading the content.
http_url_change: A boolean value indicating whether the HTTP URL should change in the browser's URL bar for the specific route.
http_url: The HTTP URL that will be visible in the browser's URL bar for the specific route.

Setting Headers and Footers for Routes

You can also set different headers and footers for specific routes or use the same header and footer content for multiple routes. To achieve this, you can utilize the `register_routes_headers()` and `register_routes_footers()` functions.

Setting Headers for Routes

If you want to set different headers for specific routes, you can use the `register_routes_headers()` function. Here's an example code snippet:

For php:

// Set pages headers
  routemamba.register_routes_headers([
    {
      content_url: "content/header.php",
      
      preloader: 'loading...',
      error_content: 'error',
      http_url: ["/", "/about.php", "/privacy.php"]
    },
  ]);

For express js:

routemamba.register_routes_headers([
  {
    content_url: '/components/header',
    preloader: 'loading...',
    error_content: 'error',
    http_url: [
      '/',
      '/about',
      '/privacy',
      '/tabs-example',
      '/post/:id',
      '/news/:date/:title'
    ],
  },
]);

In the above code, an array of header objects is defined. Each object specifies the content URL, container selector, preloader, error content, and the HTTP URLs for which the header should be displayed. This allows you to have different headers for different routes.

Setting Footers for Routes

Similarly, if you want to set different footers for specific routes, you can use the `register_routes_footers()` function. Here's an example code snippet:

For php:

routemamba.register_routes_footers([
    {
      content_url: "content/footer.php",
      
      preloader: 'loading...',
      error_content: 'error',
      http_url: ["/", "/about.php", "/privacy.php"]
    },
  ]);

For express js:

routemamba.register_routes_footers([
  {
    content_url: '/components/footer',
    preloader: 'loading...',
    error_content: 'error',
    http_url: [
      '/',
      '/about',
      '/privacy',
      '/tabs-example',
      '/post/:id',
      '/news/:date/:title'
    ],
  },
]);

In the above code, an array of footer objects is defined. Each object specifies the content URL, container selector, preloader, error content, and the HTTP URLs for which the footer should be displayed. This allows you to have different footers for different routes.

By configuring headers and footers for routes, you can customize the appearance and content of specific sections of your web application based on the current route, providing a more tailored and consistent user experience.

Pop Route and Push Route

The Routemamba library provides functionality to navigate between routes by popping and pushing routes onto the navigation stack. This allows users to go back to the previous route or move forward to the next route within the application. Here's an example of how to use the pop and push route methods:

// Pop Route
routemamba.pop_route();

// Push Route
routemamba.push_route();

The `pop_route()` function is used to go back to the previous route in the navigation stack. It simulates clicking the browser's back button. On the other hand, the `push_route()` function is used to move forward to the next route, similar to clicking the browser's forward button.

It's important to note that these functions should be called within an appropriate event listener to trigger the desired navigation behavior. For example:

back.addEventListener('click', () => {
   routemamba.pop_route();
});

next.addEventListener('click', () => {
   routemamba.push_route();
});

In the above code snippet, the `pop_route()` function is called when the user clicks the "back" button, while the `push_route()` function is called when the user clicks the "next" button. This allows for intuitive navigation within the application.

By utilizing the pop and push route functionality, you can create a smooth and interactive browsing experience for your users, enabling them to easily navigate through different routes within your application.

Navigate Method

The `navigate()` method in Routemamba allows you to navigate from one page to another within your application without reloading the entire website. This provides a seamless and fast user experience. Here's an example of how to use the `navigate()` method:

For php:

if (bookmarks_btn != undefined) {
   bookmarks_btn.addEventListener('click', (event) => {
      event.preventDefault(); // Stop double-click
      event.stopImmediatePropagation(); // Stop immediate propagation

      // routemamba.navigate(, , );
      routemamba.navigate("/bookmarks.php", {
         id: 345345,
         name: "rezwan",
      }, {
         header_load: true,
         footer_load: true
      });

      // Additional examples:
      routemamba.navigate("/bookmarks.php?id=4545&name=rezwan", {}, {
         meta_loader: true,
         method: "GET",
         http_url_change: true,
         header_load: true,
         footer_load: true
      });

      routemamba.navigate("/bookmarks.php?id=4545&name=rezwan", {}, {});
      routemamba.navigate("/bookmarks.php?id=4545&name=rezwan");
      routemamba.navigate("/bookmarks.php");
   });
}

For express js:

if (bookmarks_btn != undefined) {
  bookmarks_btn.addEventListener('click', (event) => {
    event.preventDefault(); // Stop double-click
    event.stopImmediatePropagation(); // Stop immediate propagation

    // routemamba.navigate(, , );
    routemamba.navigate('/bookmarks', {
      id: 345345,
      name: 'rezwan',
    }, {
      header_load: true,
      footer_load: true,

      // Additional examples:
      meta_loader: true,
      method: 'GET',
      http_url_change: true,
    });

    routemamba.navigate('/bookmarks?id=4545&name=rezwan', {}, {});
    routemamba.navigate('/bookmarks?id=4545&name=rezwan');
    routemamba.navigate('/bookmarks');
  });
}
// path param example:
routemamba.navigate('/bookmarks/4545/rezwan'); // this is for path param pattern: /bookmarks/:id/:name
// path param wwith query data date_add
routemamba.navigate('/bookmarks/4545/rezwan?date_add=2021-01-01'); // this is for path param pattern: /bookmarks/:id/:name
// to see more example check /projects/expressjs/ folder in routemamba github repo

In the above code, when the `bookmarks_btn` is clicked, the `navigate()` method is called to navigate to the "bookmarks.php" page. You can pass additional data as an object, which will be available on the destination page. The third parameter allows you to specify options for the navigation process.

Options you can provide include:

`header_load`: Specify whether to load the header content for the destination page.
`footer_load`: Specify whether to load the footer content for the destination page.
`meta_loader`: Specify whether to load the meta content for the destination page.
`method`: Specify the HTTP method to use for the request (default is "GET").
`http_url_change`: Specify whether the URL should change in the browser's URL bar (default is `true`).

By customizing these options, you can control the behavior of the navigation process. It's important to note that if you encounter issues with double-clicking or multiple content loads, you should use `event.preventDefault()` and `event.stopImmediatePropagation()` within your click event listener to prevent unwanted behavior.

With the `navigate()` method, you can create dynamic and interactive navigation within your application, allowing users to move between pages smoothly and efficiently.

Rendering Method

The `render()` method in Routemamba is a crucial step to ensure that the content loads correctly. Without calling the `render()` method, the content may not be displayed on the page. Here's an example of how to use the `render()` method:

// Rendering
routemamba.render();

In the above code, the `render()` method is called to initiate the rendering process. It ensures that the content specified in the routing configuration is loaded and displayed correctly on the page.

By invoking the `render()` method, you trigger the routing engine to start loading the appropriate content based on the current URL or route. It's essential to include this method in your code to ensure that the content is rendered and visible to the user.

Make sure to place the `render()` method at the appropriate location within your code, typically after setting up the routing configuration and registering the necessary routes. This ensures that the content is loaded and displayed when the page is accessed or navigated to.

By incorporating the `render()` method, you guarantee that your application's content is dynamically rendered and available to users, enhancing their browsing experience.

Example Usage of app.js

Below is an example that demonstrates the usage of `app.js` from the `/example` project. The code sets up various routes, headers, footers, and defines event listeners for navigation. Let's explore the example:

For php:

routemamba.registerMetaUrl('inc/meta-content.php');

routemamba.registerServerHost('http://localhost:3000/example/');

routemamba.register_http_routes([
  {
    method: 'GET',
    meta_loader: true,
    content_url: 'content/home.php',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/example/',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: 'content/home.php',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/example/index.php',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: 'content/about.php',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/example/about.php',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: 'content/privacy.php',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/example/privacy.php',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: 'content/tabs-example.php',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/example/tabs-example.php',
  },
]);

routemamba.register_routes_headers([
  {
    content_url: 'content/header.php',
    preloader: 'loading...',
    error_content: 'error',
    http_url: [
      '/example/',
      '/example/about.php',
      '/example/privacy.php',
      '/example/tabs-example.php',
    ],
  },
]);

routemamba.register_routes_footers([
  {
    content_url: 'content/footer.php',
    preloader: 'loading...',
    error_content: 'error',
    http_url: [
      '/example/',
      '/example/about.php',
      '/example/privacy.php',
      '/example/tabs-example.php',
    ],
  },
]);

routemamba.render();

var home_btn = document.getElementById('home');
var about_btn = document.getElementById('about');
var privacy_btn = document.getElementById('privacy');
var tabs_example_btn = document.getElementById('tabs-example');
var back = document.getElementById('back');
var next = document.getElementById('next');

back.addEventListener('click', () => {
  routemamba.pop_route();
});

next.addEventListener('click', () => {
  routemamba.push_route();
});

home_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/example/',
    {},
    {
      header_load: true,
      footer_load: true,
    }
  );
});

about_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/example/about.php',
    {
      id: 43345,
      name: 'rezwan',
    },
    {
      header_load: true,
      footer_load: true,
    }
  );
});

privacy_btn.addEventListener('click', () => {
  routemamba.navigate('/example/privacy.php');
});

tabs_example_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/example/tabs-example.php',
    {},
    {
      meta_loader: true,
      method: 'GET',
      http_url_change: true,
      header_load: true,
      footer_load: true,
    }
  );
});

For express js:

routemamba.registerMetaUrl('/components/meta');

routemamba.registerServerHost('http://localhost:3001/');

routemamba.register_http_routes([
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/home',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/about',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/about',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/privacy',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/privacy',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/tabs-example',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/tabs-example',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/post',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/post/:id',
  },
  {
    method: 'GET',
    meta_loader: true,
    content_url: '/components/news',
    preloader: '<h1>loading...</h1>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/news/:date/:title',
  },
]);

routemamba.register_routes_headers([
  {
    content_url: '/components/header',
    preloader: 'loading...',
    error_content: 'error',
    http_url: [
      '/',
      '/about',
      '/privacy',
      '/tabs-example',
      '/post/:id',
      '/news/:date/:title'
    ],
  },
]);

routemamba.register_routes_footers([
  {
    content_url: '/components/footer',
    preloader: 'loading...',
    error_content: 'error',
    http_url: [
        '/',
        '/about',
        '/privacy',
        '/tabs-example',
        '/post/:id',
        '/news/:date/:title'
    ],
  },
]);

routemamba.render();

var home_btn = document.getElementById('home');
var about_btn = document.getElementById('about');
var privacy_btn = document.getElementById('privacy');
var tabs_example_btn = document.getElementById('tabs-example');
var post_btn = document.getElementById('post');
var news_btn = document.getElementById('news');
var back = document.getElementById('back');
var next = document.getElementById('next');

back.addEventListener('click', () => {
  routemamba.pop_route();
});

next.addEventListener('click', () => {
  routemamba.push_route();
});

home_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/',
    {},
    {
      header_load: true,
      footer_load: true,
    }
  );
});

about_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/about/',
    {
      id: 43345,
      name: 'rezwan',
    },
    {
      header_load: true,
      footer_load: true,
    }
  );
});

privacy_btn.addEventListener('click', () => {
  routemamba.navigate('/privacy');
});


tabs_example_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/tabs-example/',
    {},
    {
      meta_loader: true,
      method: 'GET',
      http_url_change: true,
      header_load: true,
      footer_load: true,
    }
  );
});

post_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/post/56456546546/?test=1',
    {},
    {
      header_load: true,
      footer_load: true,
    }
  );
});

news_btn.addEventListener('click', () => {
  routemamba.navigate(
    '/news/01-05-2023/Currency-inflation-rate-is-higher-in-bangladesh/',
    {},
    {
      header_load: true,
      footer_load: true,
    }
  );
});

The above code attaches event listeners to the respective buttons, enabling navigation within the app. When a button is clicked, the corresponding route is loaded using `routemamba.navigate()`. You can customize the route parameters and specify options such as loading headers and footers. This example demonstrates how to configure routes, headers, footers, and handle navigation within your app using the app.js module. Feel free to modify the code and customize it to fit your specific application's needs.

Creating Tabs

Some people also want to create a tabs system easily. With Routemamba, you can accomplish this by using the `routemamba.initTabs()` method. Below is an example of how to create tabs using Routemamba:

JavaScript Initialization:


routemamba.initTabs([
  {
    tabSwitcher: ".tab-switcher",
    initialTab: "tab1",
    activeSwitcherClass: "tab-active",
    activeTabClass: "activeTab",
    tabs: [
      {
        tabRoute: "tab1",
        content_url: "content/tabs/tab1.php",
        preloader: 'loading...',
        error_handler: 'error',
      },
      {
        tabRoute: "tab2",
        content_url: "content/tabs/tab2.php",
        preloader: 'loading...',
        error_handler: 'error',
      },
      {
        tabRoute: "tab3",
        content_url: "content/tabs/tab3.php",
        preloader: 'loading...',
        error_handler: 'error',
      },
    ]
  },
]);

Note: You can initialize multiple tabs by adding more objects to the `routemamba.initTabs()` method.

For a more detailed example, you can refer to the code in the Tabs example code file.

HTML Code Example:


  <style>
  .TabRoot {
    width: 500px;
    height: 500px;
    background-color: green;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }
  /* Add your custom styles for tabs here */
</style>

<div class="TabRoot">
  <div class="tabs-btns">
    <!-- Tab switcher buttons -->
    <button class="tab-switcher" tabRoute="tab1">Tab1</button>
    <button class="tab-switcher" tabRoute="tab2">Tab2</button>
    <button class="tab-switcher" tabRoute="tab3">Tab3</button>
  </div>
  <div class="tab-contents">
    <!-- Tab containers -->
    <div id="tab1" class="tab-container"></div>
    <div id="tab2" class="tab-container"></div>
    <div id="tab3" class="tab-container"></div>
  </div>
</div>

Please note that you may need to adjust the styles and class names in the HTML code snippet to match your specific design and implementation. Customize the styles in the `<style>` section according to your requirements to achieve the desired look and feel of your tabs.

Reactive System by State Management in Routemamba

In Routemamba, you can leverage state management to create reactive systems. This allows you to handle and display data that dynamically updates based on changes within a specific section or multiple sections of your application.

Local States

Local states are used to showcase data reactivity within a particular section or multiple sections. To utilize local states, follow the steps outlined below:

Declare a local state using the routemamba.localState.useState() method.
Specify an initial value for the state and provide a selector to identify the section(s) where changes will be displayed.
Use the setCount() function to update the state's value whenever necessary.
Retrieve the current value of the state by calling the state variable as a function (e.g., count()).

Here's an example showcasing the usage of local states:

// To display changes in a particular section
const [count, setCount] = routemamba.localState.useState(0, "#count1");

// To display changes in multiple sections simultaneously
const [count, setCount] = routemamba.localState.useState(0, ["#count1", "#count2"]);

// Update the state value
setCount(4534);

// Retrieve the current state value
console.log("Total count is:", count());

In the code snippet above, we define a local state named count using the routemamba.localState.useState() method. The initial value is set to 0, and changes to this state will be displayed in the section(s) identified by the selector, such as #count1 or ["#count1", "#count2"].

To update the state value, we use the setCount() function, passing the new value as an argument. We can access the current value of the state by invoking the count() function, which returns the latest value.

By utilizing local states, you can create reactive components that update their displayed data based on changes, providing a dynamic user experience within specific sections of your application.

Contributing

We welcome and appreciate contributions from the community to enhance Routemamba. To ensure a smooth and collaborative development process, we follow the "fork-and-pull" Git workflow. Please follow the steps outlined below to contribute:

Fork the Routemamba repository on GitHub.
Clone the project to your local machine.
Make changes and additions in your forked repository. Focus your changes primarily on the src/ and __tests__/ folders, as well as the README.md file.
- Most of your modifications should be made within the src/ and __tests__/ folders, which contain the source code and tests, respectively.
- Note that certain files such as /dist/routemamba.min.js and /dist/routemamba.min.js.LICENSE.txt are automatically generated when running tests (npm run build) and should not be modified manually.
Ensure that you write or update tests if necessary to maintain test coverage.
Run the tests locally and verify that they pass successfully.
If needed, make corresponding updates to the README.md file to reflect the changes you have made.
Commit your changes to a new branch within your forked repository.
Before submitting your changes, merge the latest changes from the "upstream" repository into your branch, and resolve any conflicts if necessary.
Repeat the process of making changes, running tests, and committing as needed.
Push your work back to your forked repository.
Submit a Pull Request from your forked repository to the original Routemamba repository. This allows us to review and incorporate your changes.

We appreciate your contributions and will review your Pull Request promptly. Please ensure that your changes align with the project's guidelines and best practices.

Thank you for your interest in contributing to Routemamba!

Changelog

See what's new added, changed, fixed, improved, or updated in the latest versions.

For Future Updates Follow Us @facebook

Version v5.1.0-latest (26 Jul, 2024)

What's Changed

Bump github.com/gofiber/fiber/v2 from 2.46.0 to 2.49.2 in /projects/golang by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/12
Bump @babel/traverse from 7.20.1 to 7.23.2 by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/14
Bump github.com/gofiber/fiber/v2 from 2.49.2 to 2.50.0 in /projects/golang by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/13
Bump express from 4.18.2 to 4.19.2 in /projects/expressjs by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/20
Bump express from 4.18.2 to 4.19.2 by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/19
Bump webpack-dev-middleware from 5.3.3 to 5.3.4 by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/18
Bump follow-redirects from 1.15.2 to 1.15.6 by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/17
Bump github.com/gofiber/fiber/v2 from 2.50.0 to 2.52.1 in /projects/golang by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/16
Bump ejs from 3.1.9 to 3.1.10 in /projects/expressjs by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/22
Bump github.com/gofiber/fiber/v2 from 2.52.1 to 2.52.5 in /projects/golang by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/24
Bump braces from 3.0.2 to 3.0.3 by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/23
Bump braces from 3.0.2 to 3.0.3 in /projects/expressjs by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/26
Bump ws and puppeteer by @dependabot in https://github.com/rezwanahmedsami/routemamba/pull/25

Full Changelog: https://github.com/rezwanahmedsami/routemamba/compare/v5.0.4...v5.1.0-latest

Version v5.0.4 (7 Sep, 2023)

Full Changelog: https://github.com/rezwanahmedsami/routemamba/compare/v5.0.3...v5.0.4 bug fixing of the preloader was not properly loading.

Version v5.0.3 (6 Aug, 2023)

Full Changelog: https://github.com/rezwanahmedsami/routemamba/compare/v5.0.2...v5.0.3

Version v5.0.2 (2 Aug, 2023)

What's Changed

Body Not Rendering Without Header & Footer Issue Fixed by @AzazAhmedLipu79 in https://github.com/rezwanahmedsami/routemamba/pull/11

New Contributors

@AzazAhmedLipu79 made their first contribution in https://github.com/rezwanahmedsami/routemamba/pull/11

Full Changelog: https://github.com/rezwanahmedsami/routemamba/compare/v5.0.1...v5.0.2

Version v5.0.1 (30 Jul, 2023)

no register found for / issue is fixed, and patch updated

Version v5.0.0 (27 Jul, 2023)

Path param features were added and some major bugs were fixed. From now developers can work by path param like: /news/:date/:title , actual url will be: /news/01-05-2023/Currency-inflation-rate-is-higher-in-bangladesh/ check example code here: https://github.com/rezwanahmedsami/routemamba/blob/main/projects/expressjs/public/app.js

Version v4.2.0 (18 Jul, 2023)

/ issue fixed, and now its mandatory to use / in http url and in navigate

example:

{
    method: 'GET',
    meta_loader: true,
    content_url: '/web/components/about.html',
    //   container: "#root", -- Removed at V4.0.0
    preloader: '<h1>loading...</h2>',
    data: {},
    error_content: 'error',
    http_url_change: false,
    http_url: '/about.html',
  },

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="navbar-collapse">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" id="home_nav" href="/">Home</a>
        <a class="nav-item nav-link" id="about_nav" href="/about.html">About</a>
        <a class="nav-item nav-link" id="tabs_nav" href="/tabs.html">Tabs</a>
        <a class="nav-item nav-link" id="about_nav2" href="/sub/about.html">About 2</a>
      </div>
    </div>
  </nav>

Version v4.1.2 (14 Jul, 2023)

callback function added in navigate() method, where developer can pass a callback function to execute it after render page of navigation

navigate = (
  route_to: NavigateRoute,
  data: NavigateData = null,
  options: NavigateOptions = {},
  callback: Function | null = null
)

Example usecase:

routemamba.navigate(url, {}, {
                            header_load: true,
                            footer_load: false
                          }, ()=>{
                            alert("page loaded");
                          });

Version v4.0.2 (30 May, 2023)

'Page body not loading without header and footer components' bug fixed

Version v4.0.1 (28 May, 2023)

Inefficient regular expression issue fixed

Version v4.0.0 (26 May, 2023)

Bug fixed: Header loader and footer loader now function correctly. Previously, they were loading headers and footers even when set to "false" in the navigate method.
New feature added: Await Rendering. Developers can now take advantage of the await rendering feature, ensuring all components are loaded before rendering. (Example: routemamba.await_renderring(true))
Improved container selection: The old method of specifying a custom container class or ID has been removed. Basically in register_http_routes,register_routes_headers,register_routes_footers container field removed. Instead, developers are now required to add the <root></root> tag directly in the HTML. The header and footer components will automatically load without the need for specifying a container selector.

What's Changed

Major update completed in routemamba by @rezwanahmodsami in https://github.com/rezwanahmodsami/routemamba/pull/6

Full Changelog: https://github.com/rezwanahmodsami/routemamba/compare/v3.1.3...v4.0.0

Version v3.1.3 (16 May, 2023)

From url params the get method data is not sending to components issue is fixed.

Version v3.1.2 (4 Dec, 2022)

What's Changed

Rm state management by @rezwanahmodsami in https://github.com/rezwanahmodsami/routemamba/pull/5

Full Changelog: https://github.com/rezwanahmodsami/routemamba/compare/v3.1.1...v3.1.2

Fixed invalid server host problem on domain

Version v3.1.1 (23 Nov, 2022)

Fixed some minor bugs.

Version v3.1.0 (23 Nov, 2022)

New Reactive state management system added.

In routemamba you can perform reactive system also by managing states. You can manage state by two types:

Local states.
Global States. (Coming soon)

Local states:

Local states are used for particular section, Suppose you want to show a data reactively in single particular section or mutiple section, then you can use it.

To use local states you have to do like that:


    // To display changes in particular section
    const [count, setCount] = routemamba.localState.useState(0, "#count1");

    // to display changes at a time multiple section
    const [count, setCount] = routemamba.localState.useState(0, ["#count1", "#count2"]);

    // use setCount() to set state value
    setCount(4534);

    // call count to get count value
    console.log("Total count is:", count());

Version v3.0.0 (16 Nov, 2022)

Routemamba re-writed by typescript to fix some bugs and keep safe from human error.

And now routemamba easy to contribute for others developers.

Improved performance.
fixed push_route() multiple rendering bugs.
fixed grammatical errors.
removed route(), header_load(), footer_load() method.
navigate() method is primary now.
renamed few core functions to:register_http_routes(), register_routes_headers(), register_routes_footers().

Version v2.2.0 (30 Oct, 2022)

routemamba.navigate() method added as feature to navigate one page to another page

Version v2.1.1 (29 Oct, 2022)

Render body fixed for tauri

Version v2.1.0 (11 Oct, 2022)

Tab creating system added, now by routemamba everyone can create tabs easily.

Version v2.0.1 (7 Oct, 2022)

file:// scema added to use locally without server, and make non-reload desktop application in electronjs by using routemamba

Version v2.0.0 (20 Sep, 2022)

Jquery dependency removed, now routemamba is a standalone library

Version v1.0.0 (10 Aug, 2022)

Latest and stable version of routemamba

Documentation

Introduction

Getting Started

Installation Guide

Project Setup

HTML Structure

SEO Configuration

Example: Configuring SEO with Routemamba

In the header.php file:

In the meta-content.php file:

Language Support

Routing and routes configuration

Overview of Routing and Routes Configuration

HTTP Routes Configuration

Overview of HTTP Routes

HTTP Routes Configuration Example

For php:

For express js:

Explanation of HTTP Route Object

Setting Headers and Footers for Routes

Setting Headers for Routes

For php:

For express js:

Setting Footers for Routes

For php:

For express js:

Pop Route and Push Route

Navigate Method

For php:

For express js:

Rendering Method

Example Usage of app.js

For php:

For express js:

Creating Tabs

JavaScript Initialization:

HTML Code Example:

Reactive System by State Management in Routemamba

Local States

Contributing

Changelog

Version v5.1.0-latest (26 Jul, 2024)

What's Changed

Version v5.0.4 (7 Sep, 2023)

Version v5.0.3 (6 Aug, 2023)

Version v5.0.2 (2 Aug, 2023)

What's Changed

New Contributors

Version v5.0.1 (30 Jul, 2023)

Version v5.0.0 (27 Jul, 2023)

Version v4.2.0 (18 Jul, 2023)

Version v4.1.2 (14 Jul, 2023)

Version v4.0.2 (30 May, 2023)

Version v4.0.1 (28 May, 2023)

Version v4.0.0 (26 May, 2023)

What's Changed

Version v3.1.3 (16 May, 2023)

Version v3.1.2 (4 Dec, 2022)

What's Changed

Version v3.1.1 (23 Nov, 2022)

Version v3.1.0 (23 Nov, 2022)

New Reactive state management system added.

Local states:

Version v3.0.0 (16 Nov, 2022)

Routemamba re-writed by typescript to fix some bugs and keep safe from human error.

Version v2.2.0 (30 Oct, 2022)

Version v2.1.1 (29 Oct, 2022)

Version v2.1.0 (11 Oct, 2022)

Version v2.0.1 (7 Oct, 2022)

Version v2.0.0 (20 Sep, 2022)

Version v1.0.0 (10 Aug, 2022)

In the `header.php` file:

In the `meta-content.php` file: