02 Lookup Plugins

Duplication and extraction

The configs in the previous example do the job but there's a lot of duplication there. To DRY this code up, we can leverage a plugin in Battery.

const colorPlugin = {
  type: 'lookup',
  name: 'color',
  values: {
    black: "#000000",
    white: "#FFFFFF",
    transparent: "transparent"
  }
}

To use this plugin in our configs we can remove values and replace it with a plugin key. Once this is done each of these properties will have access to any value in the colorPlugin.

const backgroundColor = {
  property: "background-color",
  propertyIdentifier: "bg",
  pluginSeparator: "-",
  plugin: 'color'
}

const textColor = {
  property: "color",
  propertyIdentifier: "text",
  pluginSeparator: "-",
  plugin: 'color'
};

const fillColor = {
  property: "fill",
  propertyIdentifier: "fill",
  pluginSeparator: "-",
  plugin: 'color'
};

You can also see above that we've replaced the valueSeparator with pluginSeparator. This is because Battery allows you to use a plugin in addition to manually added values on your propertyConfig. In the next section we will see why this granularity is useful.

Design systems and keeping things in sync

The other big benefit of having a plugin is that if our Design team adds a new color to the Design System we can add that to the values object in the colorPlugin and it will become available to all properties that use colorPlugin.

const colorPlugin = {
  type: 'lookup',
  name: 'color',
  values: {
    black: "#000000",
    white: "#FFFFFF",
    transparent: "transparent",
    red: "#ff0000",
    green: "#00ff00",
    blue: "#0000ff",
  }
}

Now color, background-color and fill properties all have access to the red, green and blue values.