30-seconds-of-code/scripts/util/snippetParser.js

const fs = require('fs-extra'),
  path = require('path'),
  { red } = require('kleur'),
  crypto = require('crypto'),
  frontmatter = require('front-matter');
const sass = require('node-sass');
const caniuseDb = require('caniuse-db/data.json');
const config = require('../../config');

// Reade all files in a directory
const getFilesInDir = (directoryPath, withPath, exclude = null) => {
  try {
    let directoryFilenames = fs.readdirSync(directoryPath);
    directoryFilenames.sort((a, b) => {
      a = a.toLowerCase();
      b = b.toLowerCase();
      if (a < b) return -1;
      if (a > b) return 1;
      return 0;
    });

    if (withPath) {
      // a hacky way to do conditional array.map
      return directoryFilenames.reduce((fileNames, fileName) => {
        if (
          exclude == null ||
          !exclude.some(toExclude => fileName === toExclude)
        )
          fileNames.push(`${directoryPath}/${fileName}`);
        return fileNames;
      }, []);
    }
    return directoryFilenames.filter(v => v !== 'README.md');
  } catch (err) {
    console.log(`${red('ERROR!')} During snippet loading: ${err}`);
    process.exit(1);
  }
};
// Creates a hash for a value using the SHA-256 algorithm.
const hashData = val =>
  crypto
    .createHash('sha256')
    .update(val)
    .digest('hex');
// Gets the code blocks for a snippet file.
const getCodeBlocks = str => {
  const regex = /```[.\S\s]*?```/g;
  let results = [];
  let m = null;
  while ((m = regex.exec(str)) !== null) {
    if (m.index === regex.lastIndex) regex.lastIndex += 1;

    m.forEach((match, groupIndex) => {
      results.push(match);
    });
  }
  const replacer = new RegExp(
    `\`\`\`${config.language}([\\s\\S]*?)\`\`\``,
    'g',
  );
  const secondReplacer = new RegExp(
    `\`\`\`${config.secondLanguage}([\\s\\S]*?)\`\`\``,
    'g',
  );
  const optionalReplacer = new RegExp(
    `\`\`\`${config.optionalLanguage}([\\s\\S]*?)\`\`\``,
    'g',
  );
  results = results.map(v =>
    v
      .replace(replacer, '$1')
      .replace(secondReplacer, '$1')
      .replace(optionalReplacer, '$1')
      .trim()
  );
  if (results.length > 2)
    return {
      html: results[0],
      css: results[1],
      js: results[2],
    };
  return {
    html: results[0],
    css: results[1],
    js: '',
  };
};
// Gets the textual content for a snippet file.
const getTextualContent = str => {
  const regex = /([\s\S]*?)```/g;
  const results = [];
  let m = null;
  while ((m = regex.exec(str)) !== null) {
    if (m.index === regex.lastIndex) regex.lastIndex += 1;

    m.forEach((match, groupIndex) => {
      results.push(match);
    });
  }
  return results[1].replace(/\r\n/g, '\n');
};

// Gets the explanation for a snippet file.
const getExplanation = str => {
  const regex = /####\s*Explanation([\s\S]*)####/g;
  const results = [];
  let m = null;
  while ((m = regex.exec(str)) !== null) {
    if (m.index === regex.lastIndex) regex.lastIndex += 1;

    m.forEach((match, groupIndex) => {
      results.push(match);
    });
  }
  // console.log(results);
  return results[1].replace(/\r\n/g, '\n');
};

// Gets the browser support for a snippet file.
const getBrowserSupport = str => {
  const regex = /####\s*Browser [s|S]upport([\s\S]*)/g;
  const results = [];
  let m = null;
  while ((m = regex.exec(str)) !== null) {
    if (m.index === regex.lastIndex) regex.lastIndex += 1;

    m.forEach((match, groupIndex) => {
      results.push(match);
    });
  }
  let browserSupportText = results[1].replace(/\r\n/g, '\n');
  const supportPercentage = (browserSupportText.match(/https?:\/\/caniuse\.com\/#feat=.*/g) || []).map(
    feat => {
      const featData = caniuseDb.data[feat.match(/#feat=(.*)/)[1]];
      // caniuse doesn't count "untracked" users, which makes the overall share appear much lower
      // than it probably is. Most of these untracked browsers probably support these features.
      // Currently it's around 5.3% untracked, so we'll use 4% as probably supporting the feature.
      // Also the npm package appears to be show higher usage % than the main website, this shows
      // about 0.2% lower than the main website when selecting "tracked users" (as of Feb 2019).
      const UNTRACKED_PERCENT = 4;
      const usage = featData
        ? Number(featData.usage_perc_y + featData.usage_perc_a) + UNTRACKED_PERCENT
        : 100;
      return Math.min(100, usage);
    }
  )
  return {
    text: browserSupportText,
    supportPercentage: Math.min(...supportPercentage)
  }
};

// Synchronously read all snippets and sort them as necessary (case-insensitive)
const readSnippets = snippetsPath => {
  const snippetFilenames = getFilesInDir(snippetsPath, false);

  let snippets = {};
  try {
    for (let snippet of snippetFilenames) {
      let data = frontmatter(
        fs.readFileSync(path.join(snippetsPath, snippet), 'utf8'),
      );
      snippets[snippet] = {
        id: snippet.slice(0, -3),
        title: data.attributes.title,
        type: 'snippet',
        attributes: {
          fileName: snippet,
          text: getTextualContent(data.body),
          explanation: getExplanation(data.body),
          browserSupport: getBrowserSupport(data.body),
          codeBlocks: getCodeBlocks(data.body),
          tags: data.attributes.tags.split(',').map(t => t.trim()),
        },
        meta: {
          hash: hashData(data.body),
        },
      };
      snippets[snippet].attributes.codeBlocks.scopedCss = sass.renderSync({
        data: `[data-scope="${snippets[snippet].id}"] { ${snippets[snippet].attributes.codeBlocks.css} }`
      }).css.toString();
    }
  } catch (err) {
    console.log(`${red('ERROR!')} During snippet loading: ${err}`);
    process.exit(1);
  }
  return snippets;
};

module.exports = {
  getFilesInDir,
  hashData,
  getCodeBlocks,
  getTextualContent,
  getExplanation,
  getBrowserSupport,
  readSnippets,
};