These are chat archives for wooorm/remark

3rd
Oct 2016
Jesse
@motleydev
Oct 03 2016 09:05
@wooorm There's probably a lot of low-hanging fruit in the way of opimization, but here's the gist, I'll see about publishing it later.
Titus
@wooorm
Oct 03 2016 11:38
Loooks good!
I mainly suggest using a linter to remove some dead and unused code
Also: You’re using node.children[0] in there, which would break horribly if you’d have something other than plain text in a heading
I’d refactor it to the following:
'use strict';

/* Dependencies */
var visit = require('unist-util-visit');
var toString = require('hast-util-to-string');

/* Expose. */
module.exports = attacher;

function attacher() {
  return transformer;
}

function transformer(tree) {
  visit(tree, 'element', visitor);
}

function visitor(node) {
  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(node.tagName) === -1) {
    return;
  }

  let value = toString(node);
  let words = value.split(' ');

  node.children = [];

  words.forEach((word, index) => {
    node.children.push({
      type: 'element',
      tagName: 'span',
      properties: {},
      children: [{type: 'text', value: word}]
    });

    if (index < words.length - 1) {
      node.children.push({
        type: 'element',
        tagName: 'span',
        properties: {},
        children: [{type: 'text', value: ' '}]
      });
    }
  });
}
And finally, I’d even go with:
'use strict';

/* Dependencies */
var visit = require('unist-util-visit');
var toString = require('hast-util-to-string');
var h = require('hastscript');

/* Expose. */
module.exports = attacher;

function attacher() {
  return transformer;
}

function transformer(tree) {
  visit(tree, 'element', visitor);
}

function visitor(node) {
  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(node.tagName) === -1) {
    return;
  }

  let value = toString(node);
  let words = value.split(' ');

  node.children = [];

  words.forEach((word, index) => {
    node.children.push(h('span', word));

    if (index < words.length - 1) {
      node.children.push(h('span', ' '));
    }
  });
}
Jesse
@motleydev
Oct 03 2016 15:45
thanks for the code review! It cleaned up nicely. I'll have to impliment tonight and see how it works.
Jesse
@motleydev
Oct 03 2016 16:14
it seems like remark-parse is swallowing html, how can I allow raw html through? such as <div>test</div> and get an actual div on the otherside?
and here's the whole scope of what I'm trying to do, I'm trying to insert a div with a class="react-componentName" class and a data-custom-props="value" attribute that I will then run a render on for server side react components in my post
Titus
@wooorm
Oct 03 2016 20:26
Sure no problem
remark-parse is indeed swallowing embedded raw HTML
HTML in markdown is very complicated: it doesn’t need to be valid
and I haven’t found a good way to do it yet
Where do you want to add those react-componentName and data-custom-props?