Other Utilities
Hypermedia

Hypermedia (htmx)

Hypermedia is a set of customizable utilities to fetch components in form of HTML string from the backend. htmx takes two arguments, domain name which is compulsory and http headers which is optional.

Setup htmx utility

Create hypermedia.js

If you scaffold your application with create-render-app, hypermedia.js file is located in utilities folder. If you're using a script tag, you need to create hypermedia.js file in your project and add the code from hypermedia.js (opens in a new tab) to it.

Set default domain to fetch components

In the code you copied from hypermedia.js, add your default domain name.

export function htmx(baseUrl, headers){
  const __baseUrl = baseUrl || 'https://raw.githubusercontent.com';
  // The rest of the code
}

Set default application headers

Add your default application headers to the object.

export function htmx(baseUrl, headers){
  const __baseUrl = baseUrl || 'https://raw.githubusercontent.com';
  const __headers = headers || {'Content-Type': 'text/html'};
  // The rest of the code
}

Use htmx.

  • Remove export from htmx function in hypermedia.js
function htmx(baseUrl, headers){
  const __baseUrl = baseUrl || 'https://raw.githubusercontent.com';
  // The rest of the code
}
  • Add hypermedia.js to the HTML page where you want to fetch components.
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="root"></div>
 
    <script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script>
    <script src="hypermedia.js"></script>
  </body>
</html>
  • Use htmx with default domain and headers; then make htmx available globally, if not, it won't be accessible in event handlers because they only have access to global identifiers.
appFunctions.js
    const $view = htmx().$view;
    $register($view);
  • Use $view in event handlers.
appFunctions.js
    <button 
      onClick="$view('codingnninja/Web-Design-for-Beginners-Coding-in-HTML-CSS-by-example/master/card%20source%20code/section')">
      get todo
    </button>
  }
ℹ️

Note: The response from the request must be a string of HTML if not, an error will be thrown.

  • Use htmx without or by overrinding default domain and HTTP headers and make htmx available globally, if not, it won't be accessible in event handlers because they only have access to global identifiers.
ℹ️

Note: You only need to $register view once in the top most component or part of your application.

appFunctions.js
    const baseUrl = "https://raw.githubusercontent.com";
    const headers = {
        'Content-Type': 'text/html'
        Cache-Control: max-age=0
    }
    const $view = htmx(baseUrl, headers).$view;
    $register($view);
  • Ignoring htmx optional parameter (headers)
appFunctions.js
    const baseUrl = "https://raw.githubusercontent.com";
 
    const $view = htmx(baseUrl).$view;
    $register($view);
  • Use $view in event handlers.
todo.html
    <button 
      onClick="$view('codingnninja/Web-Design-for-Beginners-Coding-in-HTML-CSS-by-example/master/card%20source%20code/section')">
      get todo
    </button>
  • Use $view in event handlers with data (browser-rendered).
todos.html
 <button onClick="$view('todos', '{$stringify(data)}')">
   get todos
 </button>
  • Use $view in event handlers with data (server rendered).
todos.html
 <button onClick="$view('todos', {name:'Doe'})">
   get todos
 </button>
  • Get components from multiple servers
    const serverUrl1 = "https://jsonplaceholder.typicode.com";
    const serverUrl2 = "https://facebook.com";
 
    const $viewFromServerOne = htmx(serverUrl1).$view;
    const $viewFromServerTwo = htmx(serverUrl2).$view;
    $register($viewFromServerOne, $viewFromServerOne);
 
    //use viewFromServerOne
 
    <button onClick="$viewFromServerOne('todos/1')">
      get todos
    </button>
 
    //use viewFromServerTwo
 
    <button onClick="$viewFromServerTwo('feeds/1')">
      get todos
    </button>

Now, you can get component from single and multiple servers.

  • Playground

Click to check the common errors in using Hypermedia.

$utils()Gallery