JSFiddle - React, Tailwind, and code Playground

by Sahin Deniz

JavaScript

const chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g;
const exprRegex = {
  ID: /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,
  CLASS: /\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?![^[\]]+])/g,
  NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,
  ATTR: /\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/g,
  TAG: /^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,
  CLONE: /\:(\d+)(?=$|[:[])/,
  COMBINATOR: /^[>~+]$/,
};
const doc = document;
const cache = {};
const attrMap = {
  for: 'htmlFor',
  class: 'className',
  html: 'innerHTML',
};
const callbackTypes = ['ID', 'CLASS', 'NAME', 'ATTR'];
const exprCallback = {
  ID(match, node) {
    node.id = match[1];
  },
  CLASS(match, node) {
    const cls = node.className.replace(/^\s+$/, '');
    node.className = cls ? `${cls} ${match[1]}` : match[1];
  },
  NAME(match, node) {
    node.name = match[1];
  },
  ATTR(match, node) {
    const attr = match[1];
    const val = match[4] || true;

    if (val === true || attr === 'innerHTML' || attrMap.hasOwnProperty(attr)) {
      node[attrMap[attr] || attr] = val;
    } else {
      node.setAttribute(attr, val);
    }
  },
};

function create(part, n) {
  const tag = exprRegex.TAG.exec(part);
  const node = doc.createElement(tag && tag[1] !== '*' ? tag[1] : 'div');
  const fragment = doc.createDocumentFragment();
  let c = callbackTypes.length;
  let match;
  let regex;
  let callback;

  while (c--) {
    regex = exprRegex[callbackTypes[c]];
    callback = exprCallback[callbackTypes[c]];

    if (regex.global) {
      while ((match = regex.exec(part)) !== null) {
        callback(match, node);
      }

      continue;
    }

    if ((match = regex.exec(part))) {
      callback(match, node);
    }
  }

  while (n--) {
    fragment.appendChild(node.cloneNode(true));
  }

  return fragment;
}

function multiAppend(parents, children) {
  parents = parents.childNodes;

  let i = parents.length;
  let...