$render Components

A component is a part of an object that is detachable and pluggable to another object of the same family. For example, a computer has several components such as the monitor, keyboard, mouse and system unit to mention few. For you to have a computer, you need to bring these components together.

Just like in a computer, $render components are detachable and pluggable to another component that supplies suitable props. Components in $render and React are similar except $render uses JavaScript template literals to wrap every HTML string to be returned.

A component without props.

app.js

// using an arrow function
const App = () => {
  return `
    <div id="main">
      <article>
        <Player />
        <Playlist />
        <Overlay />
      </article>
    </div>
  `;
}
 
<App />

A component with props.

list.js

// using an native function
function List(items) {
  return `
    <div id="list">
      <ul>
        ${items.map((item) => `<li>${item.title}</li>`)}
      </ul>
    </div>
  `;
}
//usage
const list = [{
  name: 'Alice',
  age: 24
}];
 
<List list=${stringify(list)} />

Or

list.js

// using an arrow function
const List = (items) => {
  return `
    <div id="list">
      <ul>
        ${items.map((item) => `<li>${item.title}</li>`)}
      </ul>
    </div>
  `;
}
//usage
const list = [{
  name: 'Alice',
  age: 24
}];
 
<List list=${stringify(list)} />

Placeholding component

It is a component that return a string of HTML tags that occupies a position for another components to be rendered later.

const ModalPlaceholder = () => '<div class="hidden" id="modal"></div>';
 
//usage
<ModalPlaceholder />

Whenever you want to use a modal in $render, you need to add a component placeholder to your page so that you can add or replace its content later.

Component parameter

A component can only take zero or one parameter of any data type that can have a default value.

A parameter without a default value

Any component with a parameter that has no default value expects an argument whenever it is used as JSX <Component songs=${stringify(songs)} />. This is mostly used when you want a component to depend on its parent Component for props.

Unit state

counter.js

const Counter = (count) => {
  return `
    <div id="counter">
      <button 
        onClick="$render(Counter, ${count + 1})" 
        style="height:30px; width:100px">Count is ${count}
      </button>
    </div>
  `;
};

Composite state

props without destructuring

function Profile(item) {
  return `
    <div 
      id="${item.id}" 
      person="${item.person}"> 
      ${item.children.a} 
    </div>
  `;
}

props with destructuring

function Profile({ id, person, children }) {
  return `
    <div 
      id="${id}" 
      person="${stringify(person)}"> 
      ${children.a} 
    </div>
  `;
}

Render components that have no default value.

  <!-- As HTML tag -->
  <Counter count="0" /> 
  <Profile user=${stringify(user)} />

or

  //In a component/function body
  $render(Counter, 0); 
  $render(Profile, user);
 
  // As an event handler
  onclick="$render(Counter, 0)"
  onhover="$render(Profile, '${stringify(user)}')";

ℹ️

Note: You can't $render a component in its own body but you can use it has its own event handler.

A parameter with a default value

Any component with a parameter that has a default value doesn't expect an argument whenever it is used. This is mostly used when you want a component to be self containted or independent.

Unit state

counter.js

const Counter = (count = 0) => {
  return `
    <div id="counter">
      <button 
        onClick="$render(Counter, ${count + 1})" 
        style="height:30px; width:100px">Count is ${count}
      </button>
    </div>
  `;
};

Composite state

default value without destructuring

profile.js

  function Profile(item = { id: 1, person: {}, children: { a: "yes" } }) {
    return `
      <div 
        id="${item.id}" 
        person="${item.person}"> 
        ${item.children.a} 
      </div>
    `;
  }

default value with destructuring

profile.js

  function Profile({ id = 1, person = {}, children = { a: "yes" } } = {}) {
    return `
      <div 
        id="${id}" 
        person=${stingify(person)}> 
        ${children.a} 
      </div>
    `;
  }

Basically, a $render component is still a JavaScript function that has a name with PascalCase.

A common error to avoid in $render or React while crafting components is Prop Drilling. Learn more from How to avoid Prop Drilling in React or $render (opens in a new tab)

Installation Contexts