VarEx

Let Variable Expressions brighten up your project ⭐

Github Repository | NPM Package | Example

_{Built with ❤︎ by Ola Hulleberg}

Table of Contents

• Goal
• Install
• Usage
• Why, or when to use this?

Goal

VarEx aims to solve the problem of resolving variables you don't yet have access to (but know you will), when writing the template.

Install

Install package:

npm i varex

Usage

Supply string and object to resolve from

const { varEx } = require("varex");

varEx("Any string you want plus a $[variable] block", objectToResolveFrom);

Example

// Include varEx
const { varEx } = require("varex");

// This is the object we use to resolve variables
const object = {
  var1: "Example",
  var2: "Yet another one",
  var3: "You can even include [] brackets here, even $[variable blocks] doesn't break this",
  varObj: {
    var1: "Supports nesting as well!",
    varArray: ["Need arrays? Have at it!"],
  },
};

// Output the result
console.log(
  varEx(
    "This is an $[var1], and here is $[var2]. $[var3]. $[varObj.var1] $[varObj.varArray[0]]",
    object
  )
);

Why use this?

VarEx is ideal for cases like dynamic table formatting, where you want to define a format upfront and apply it to any input data.

Let me start of by saying that if you simply want to resolve a variable or function into a string, you should just use Javascript's built-in template literals ${}

VarEx only aims to solve the problem of resolving variables you don't yet have access to (but know you will), when writing the template.

This function was originally created because I ran into a problem with table formatting. I didn't want to create an entire function just to format data at runtime into a table, and then have to repeat this process for another. I wanted to be able to create a simple table component where you could specify beforehand how your data was supposed to be formatted, and that it would work with any input data whatsoever.

This is the table component that spawned the need for this function:

<List
  data={{
    headers: [
      {
        title: "Coffee Type",
        data: " ($[bean_type.product_name.grams_of_coffee] g)",
      },
      {
        title: "Grinding",
        data: "$[grinding_setting]",
      },
      {
        title: "Water",
        data: "$[water_in_liter] l",
      },
    ],
    items: this.state.items,
  }}
  filters={this.state.filters}
/>

The part where VarEx came in handy was in the data part, where we try to resolve the data with a certain format. Sure this doesn't need a function like VarEx to begin with, but having to constantly repeat simple but slightly different table formatting functions each time, eventually taints the codebase. I wanted a reusable function to format each different table with an already defined format config.

data: " ($[grams_of_coffee] g)";

Using VarEx it really was as simple as creating a table component that runs VarEx() on every item displayed. No need to create a custom switch case for displaying water in liters, coffee beans in grams and so on.