inref

Create self referencing objects

Usage

import inref from 'infref';

export const theme = inref(ref => ({
  typography: {
    normal: 1,
    header6: ref(root => root.typography.normal * 0.923),
    header5: ref(root => root.typography.normal * 1),
    header4: ref(root => root.typography.normal * 1.154),
    header3: ref(root => root.typography.normal * 1.538),
    header2: ref(root => root.typography.normal * 2),
    header1: ref(root => root.typography.normal * 3),
  },
  components: {
    titleColor: ref(root => root.colors.primary),
  },
  colors: {
    blue: '#0084FF',
    red: '#E81717',
    orange: '#FF9500',
    green: '#17E852',
    cyan: '#15ECC6',
    purple: '#A215E4',
    pink: '#E415DC',
    primary: ref(root => root.colors.blue),
    secondary: ref(root => root.colors.purple),
}));

console.log(theme.components.titleColor); // -> '#0084FF'

Optimising

In order to reset the ref value, inref traverses the root object. This is done so that the return value is an actual, non-proxied, object. All computations are eager.

However, this also means that large, nested, sub-objects (such as huge arrays) may be scanned for no good reason. When you'd like to optimise this behaviour away, you can use the second argument of the inref function:

import inref from "inref";

// un-optimised
const o = infer(ref => ({
  foo: true,
  array: Array.from({ length: 100000 }),
  bar: ref(root => root.foo)
}));

// optimised
const o = infer((ref, unref) => ({
  foo: true,
  array: unref(Array.from({ length: 100000 })),
  bar: ref(root => root.foo)
}));