Dynamic Props & Classes

Concisely update component props without updating the component

Why Dynamic Props & Classes

Previously in WebLabs, we updated a whole component in case we wanted to update anything about it, be it props or something else.

This means WebLabs would build the component from scratch even if you wish to update only a class or a property.

Dynamic Props & Classes builds the class value and property value when those state values are updated, instead of building the entire component that is expensive

Dynamic Prop

The core/components now comes with a new method, .dynamicProp() method. This function takes a state type ( for TS only ).

You provide the name of the property, a value builder function and a dependency to depend on the update. This uses the latest State Subscription from weblabs.

Let's see it in action!

style.css

#green {
  color: green;
}

#purple {
  color: purple
}

main.ts

import './style.css';

import { render, State } from '@weblabsjs/core';
import { div } from '@weblabsjs/core/components';

function App() {
  const color = State<string>('green');

  return div('Hello World')
      .dynamicProp('id', () => color.get(), color)
      .event('click', () => {
          const current = color.get();
          if (current == 'green') color.set('purple');
          else color.set('green');
        });
}

render('app', App());

Above, you can see a div with a dynamic property of id, with a value builder function that returns the value of the color set, and obvious state dependency is the state itself, i.e color.

We did not wrap our component in $() function, but this will still update, but it will update only the id of the div component.

This will improve the performance very much since all the other stuff will not be re-created is you wish to update something that is not data-related.

Dynamic Class

The core/components now come with another new method .dynamicClass() that takes a value builder function, and returns a single no-space separated character.

In this function, you provide a value builder function, which MUST return a single string that needs to be updated, and link it to a state that it might depend on.

Here is an example:

import './style.css';

import { render, State } from '@weblabsjs/core';
import { div } from '@weblabsjs/core/components';

function App() {
  const color = State<string>('red');

  return div('Hello World')
      .dynamicClass(() => color.get(), color)
      .event('click', () => {
          const current = color.get();
          if (current == 'red') color.set('blue');
          else color.set('red');
      });
}

render('app', App());

In the style.css file, there is the classes for red and blue. It will update only the class name specifically the one that you are linking to, without recreating the component from scratch.

DO NOT USE LIKE THIS

.dynamicClass(() => `someclass ${update.get()} someotherclass`, update)

The dynamic class is made to handle only a singular string value with no spaces as of now.

DO THIS INSTEAD

.dynamicClass(() => update.get(), update).class('someclass someotherclass')

This will keep the dynamic class apart from constant class names, it is easier to read as well, and it is very performant

If you have multiple dynamic classes that needs to be updated, use the .dynamicClass() function multiple times, as it can only return a singular string that needs to be updated.