Skip to content

Instantly share code, notes, and snippets.

@micahgodbolt
Last active January 16, 2017 21:38
Show Gist options
  • Save micahgodbolt/96c9cf35a6fe24d29f6886f47f30f8c8 to your computer and use it in GitHub Desktop.
Save micahgodbolt/96c9cf35a6fe24d29f6886f47f30f8c8 to your computer and use it in GitHub Desktop.

Theo lets you preprocess your JSON data before sending it through to its normal processes. This preprocess allows you to use a nested props structure, which is then converted to standard flat props.

props:
  BUTTON:
    BACKGROUND:
      value: blue
    COLOR:
      value: white 
    HOVER:
      BACKGROUND:
        value: blue
      COLOR:
        value: gray

is the same as this

props:
  BUTTON_BACKGROUND:
    value: blue
  BUTTON_COLOR:
    value: white 
  BUTTON_HOVER_BACKGROUND:
    value: blue
  BUTTON_HOVER_COLOR:
    value: gray
.pipe(theo.plugins.transform('web', {
includeRawValue: true,
jsonPreProcess: json => {
let resolveNestedProps = (props, parent = "") => {
let flatProps = {};
_.forEach(props, (value, key) => {
if (typeof value == 'object') {
let propName = (parent === "" ? "" : parent + "_") + key
flatProps = Object.assign(flatProps, resolveNestedProps(value, propName))
if (value.value) {
flatProps[propName] = value
}
}
})
return flatProps;
}
json.props = resolveNestedProps(json.props);
return json;
}
}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment