Improvement ideas for helper.bs.js in https://hackdoor.io/articles/myNBk3px/calling-reasonml-from-typescript-or-flow-the-easy-way?utm_source=twitter

a_description.md

Reading the (already impressive) compiled output in helper.bs.js in the tutorial by Michele Riva on Calling ReasonML from TypeScript, I thought the output could be made nearly identical (bar comments and some weird nest paren wrapping) to what an experienced dev might write by hand

If we:

1. have Flat-variants-(and polymorphic-variants)-as-strings (see
2. Omit String(x) when x is already a string (already merged): rescript-lang/rescript-compiler#4293
3. Propogate the variable names from destructuring a tuple to the output (see ideal_output_2.bs.js)
4. Don't do nested parens inside of {j|$x foo $y bar $z baz|j} output

Then the output (minus the /* tuple */ comments) would be exactly what you'd write by hand!

a_source.re

type color =
  | Primary
  | Red
  | Yellow
  | White;

type size =
  | Small
  | Medium
  | Large;

type outlined = bool;

type buttonProps = {
  color,
  size,
  outlined,
};

type textTheme = {
  primary: string,
  dark: string,
  white: string,
};

type themeColors = {
  primary: string,
  dark: string,
  white: string,
  yellow: string,
  red: string,
};

type theme = {
  text: textTheme,
  colors: themeColors,
};

[@genType]
let useColors = (inputColor, inputTheme) =>
  switch (inputColor) {
  | Primary => (inputTheme.text.primary, inputTheme.colors.primary)
  | Red => (inputTheme.colors.white, inputTheme.colors.red)
  | Yellow => (inputTheme.colors.dark, inputTheme.colors.yellow)
  | White => (inputTheme.colors.dark, inputTheme.colors.white)
  | _ => ("", "")
  };

[@genType]
let getColor = (color: color, theme: theme): string => {
  let (color, background) = useColors(color, theme);
  {j|
    color:      $color;
    background: $background;
  |j};
};

current_output.bs.js

// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE

function useColors(inputColor, inputTheme) {
  switch (inputColor) {
    case /* Primary */ 0:
      return /* tuple */ [inputTheme.text.primary, inputTheme.colors.primary]
    case /* Red */ 1:
      return /* tuple */ [inputTheme.colors.white, inputTheme.colors.red]
    case /* Yellow */ 2:
      return /* tuple */ [inputTheme.colors.dark, inputTheme.colors.yellow]
    case /* White */ 3:
      return /* tuple */ [inputTheme.colors.dark, inputTheme.colors.white]
  }
}

function getColor(color, theme) {
  var match = useColors(color, theme)
  return (
    '\n    color:      ' +
    (String(match[0]) + (';\n    background: ' + (String(match[1]) + ';\n  ')))
  )
}

export { useColors, getColor }
/* No side effect */

ideal_output_1.bs.js

// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE

function useColors(inputColor, inputTheme) {
  switch (inputColor) {
    case 'primary':
      return /* tuple */ [inputTheme.text.primary, inputTheme.colors.primary]
    case 'red':
      return /* tuple */ [inputTheme.colors.white, inputTheme.colors.red]
    case 'yellow':
      return /* tuple */ [inputTheme.colors.dark, inputTheme.colors.yellow]
    case 'white':
      return /* tuple */ [inputTheme.colors.dark, inputTheme.colors.white]
  }
}

function getColor(color, theme) {
  var match = useColors(color, theme)
  return (
    '\n    color:      ' +
    (match[0] + ';\n    background: ' + match[1] + ';\n  ')
  )
}

export { useColors, getColor }
/* No side effect */

ideal_output_2.bs.js

// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE

function useColors(inputColor, inputTheme) {
  switch (inputColor) {
    case 'primary':
      return /* tuple */ [inputTheme.text.primary, inputTheme.colors.primary]
    case 'red':
      return /* tuple */ [inputTheme.colors.white, inputTheme.colors.red]
    case 'yellow':
      return /* tuple */ [inputTheme.colors.dark, inputTheme.colors.yellow]
    case 'white':
      return /* tuple */ [inputTheme.colors.dark, inputTheme.colors.white]
  }
}

function getColor(color, theme) {
  /* set variable names from destructured tuple names in source */
  var match = useColors(color, theme)
  var color = match[0]
  var theme = match[1]
  return '\n    color:      ' + color + ';\n    background: ' + theme + ';\n  '
}

export { useColors, getColor }
/* No side effect */