yoga/src/transpile.html

<script src="Layout.js"></script>

<style>
textarea {
  height: 200px;
  width: 800px;
  border: 1px solid black;
  font-size: 12px;
  font-family: monospace;
}
</style>

<h1>layoutCode</h1>
<textarea id="layout_code" onclick="this.select()"></textarea>
<script>
document.getElementById('layout_code').value = computeLayout.toString()
  .replace(/\.children\.length/g, '.children_count')
  .replace(/\.width/g, '.dimensions[CSS_WIDTH]')
  .replace(/\.height/g, '.dimensions[CSS_HEIGHT]')
  .replace(/layout\[dim/g, 'layout.dimensions[dim')
  .replace(/layout\[pos/g, 'layout.position[pos')
  .replace(/layout\[leading/g, 'layout.position[leading')
  .replace(/style\[dim/g, 'style.dimensions[dim')
  .replace(/node.children\[i\]/g, '&node.children[i]')
  .replace(/node\./g, 'node->')
  .replace(/child\./g, 'child->')
  .replace(/var\/\*([^\/]+)\*\//g, '$1')
  .replace(/ === /g, ' == ')
  .replace(/\n  /g, '\n')
  .replace(/\/[*]!([^*]+)[*]\//g, '$1')
  .split('\n').slice(1).join('\n');
</script>

<h1>Tests</h1>
<textarea id="test_code" onclick="this.select()"></textarea>
<script src="Layout-test-utils.js"></script>
<script>
var currentTest = '';
var allTests = [];
var computeDOMLayout = layoutTestUtils.computeDOMLayout;
var computeLayout = layoutTestUtils.computeLayout;
var reduceTest = layoutTestUtils.reduceTest;
var text = layoutTestUtils.text;
var layoutTestUtils = {
  testLayout: function(node, expectedLayout) {
    allTests.push({name: currentTest, node: node, expectedLayout: expectedLayout});
  },
  testRandomLayout: function(node, i) {
    allTests.push({name: 'Random #' + i, node: node, expectedLayout: computeDOMLayout(node)});
  },
  computeLayout: computeLayout,
  computeDOMLayout: computeDOMLayout,
  reduceTest: reduceTest,
  text: text
};
function describe(name, cb) { cb(); }
function it(name, cb) { currentTest = name; cb(); }
</script>
<script src="__tests__/Layout-test.js"></script>
<script>

function printLayout(test) {
  var level = 1;
  var res = [];

  function add(str) {
    res.push(indent(level) + str);
  }

  function indent(level) {
    var result = '';
    for (var i = 0; i < level; ++i) {
      result += '  ';
    }
    return result;
  }

  function addEnum(node, js_key, c_key, dict) {
    if (js_key in node.style) {
      add('node->style' + '.' + c_key + ' = ' + dict[node.style[js_key]] + ';');
    }
  }

  function addFloat(positive, node, js_key, c_key) {
    if (js_key in node.style) {
      if (positive === 'positive' && node.style[js_key] < 0) {
        // do nothing
      } else {
        add('node->style' + '.' + c_key + ' = ' + node.style[js_key] + ';');
      }
    }
  }

  function addSpacing(positive, node, spacing, suffix) {
    addFloat(positive, node, spacing + suffix, spacing + '[CSS_LEFT]');
    addFloat(positive, node, spacing + suffix, spacing + '[CSS_TOP]');
    addFloat(positive, node, spacing + suffix, spacing + '[CSS_RIGHT]');
    addFloat(positive, node, spacing + suffix, spacing + '[CSS_BOTTOM]');

    addFloat(positive, node, spacing + 'Left' + suffix, spacing + '[CSS_LEFT]');
    addFloat(positive, node, spacing + 'Top' + suffix, spacing + '[CSS_TOP]');
    addFloat(positive, node, spacing + 'Right' + suffix, spacing + '[CSS_RIGHT]');
    addFloat(positive, node, spacing + 'Bottom' + suffix, spacing + '[CSS_BOTTOM]');
  }

  function addMeasure(node) {
    if ('measure' in node.style) {
      add('node->style.measure = measure;');
      add('node->style.measure_context = "' + node.style.measure.toString() + '";');
    }
  }

  add('{');
  level++;

  // Output the style node
  add('css_node_t *root_node = new_css_node();');
  add('{');
  level++;
  add('css_node_t *node = root_node;');
  function rec_style(node) {
    addEnum(node, 'flexDirection', 'flex_direction', {
      'row': 'CSS_FLEX_DIRECTION_ROW',
      'column': 'CSS_FLEX_DIRECTION_COLUMN'
    });
    addEnum(node, 'justifyContent', 'justify_content', {
      'flex-start': 'CSS_JUSTIFY_FLEX_START',
      'center': 'CSS_JUSTIFY_CENTER',
      'flex-end': 'CSS_JUSTIFY_FLEX_END',
      'space-between': 'CSS_JUSTIFY_SPACE_BETWEEN',
      'space-around': 'CSS_JUSTIFY_SPACE_AROUND'
    });
    addEnum(node, 'alignItems', 'align_items', {
      'flex-start': 'CSS_ALIGN_FLEX_START',
      'center': 'CSS_ALIGN_CENTER',
      'flex-end': 'CSS_ALIGN_FLEX_END',
      'stretch': 'CSS_ALIGN_STRETCH'
    });
    addEnum(node, 'alignSelf', 'align_self', {
      'flex-start': 'CSS_ALIGN_FLEX_START',
      'center': 'CSS_ALIGN_CENTER',
      'flex-end': 'CSS_ALIGN_FLEX_END',
      'stretch': 'CSS_ALIGN_STRETCH'
    });
    addEnum(node, 'flex', 'flex', {
      'none': 'CSS_FLEX_NONE',
      '1': 'CSS_FLEX_ONE'
    });
    addEnum(node, 'position', 'position_type', {
      'relative': 'CSS_POSITION_RELATIVE',
      'absolute': 'CSS_POSITION_ABSOLUTE'
    });
    addFloat('positive', node, 'width', 'dimensions[CSS_WIDTH]');
    addFloat('positive', node, 'height', 'dimensions[CSS_HEIGHT]');
    addSpacing('all', node, 'margin', '');
    addSpacing('positive', node, 'padding', '');
    addSpacing('positive', node, 'border', 'Width');
    addFloat('all', node, 'left', 'position[CSS_LEFT]');
    addFloat('all', node, 'top', 'position[CSS_TOP]');
    addFloat('all', node, 'right', 'position[CSS_RIGHT]');
    addFloat('all', node, 'bottom', 'position[CSS_BOTTOM]');
    addMeasure(node);

    if (node.children) {
      add('init_css_node_children(node, ' + node.children.length + ');');
      add('{');
      level++;
      add('css_node_t *outer_node_' + (level - 3) + ' = node;');
      add('css_node_t *node;');

      for (var i = 0; i < node.children.length; ++i) {
        add('node = &outer_node_' + (level - 3) + '->children[' + i + '];');
        rec_style(node.children[i]);
      }

      level--;
      add('}');
    }
  }
  rec_style(test.node);
  level--;
  add('}');
  add('');

  // Output the expected layout node
  add('css_node_t *root_layout = new_css_node();');
  add('{');
  level++;
  add('css_node_t *node = root_layout;');

  function rec_layout(node) {
    add('node->layout.position[CSS_TOP] = ' + node.top + ';');
    add('node->layout.position[CSS_LEFT] = ' + node.left + ';');
    add('node->layout.dimensions[CSS_WIDTH] = ' + node.width + ';');
    add('node->layout.dimensions[CSS_HEIGHT] = ' + node.height + ';');

    if (node.children) {
      add('init_css_node_children(node, ' + node.children.length + ');');
      add('{');
      level++;
      add('css_node_t *outer_node_' + (level - 3) + ' = node;');
      add('css_node_t *node;');

      for (var i = 0; i < node.children.length; ++i) {
        add('node = &outer_node_' + (level - 3) + '->children[' + i + '];');
        rec_layout(node.children[i]);
      }

      level--;
      add('}');
    }
  }
  rec_layout(test.expectedLayout);
  level--;
  add('}');
  add('');

  // Do the test
  add('test("' + test.name.replace(/"/g, '\\"') + '", root_node, root_layout);');
  level--;
  add('}');

  return res.join('\n');
}
document.getElementById('test_code').value = allTests.map(printLayout).join('\n\n');
</script>