JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

JavaScript

const {find, includes} = _
const print = (label, ...args) =>
  document.body.innerHTML += `<p><strong>${label}</strong><ul>${args
    .map(([n, v]) => `<li>${n} <code>${JSON.stringify(v)}</code></li>`)
  	.join('')
	}</ul></p>`;
  
const groups = [
	['a', 'b', 'c'],
  ['c', 'd', 'e'],
]

{
  const isInline = (nodeName, tagName) =>
    includes(
      find(groups, group => includes(group, tagName)),
      nodeName)
      
	print('find-based implementation',
    ['is b inline in c?', isInline('b', 'c')],
    ['is d inline in c?', isInline('d', 'c')],
    ['is d inline in b?', isInline('d', 'b')],
    ['is b inline in d?', isInline('b', 'd')]
  )
}

{
  const isInline = (nodeName, tagName) =>
  	groups.some(g =>
    	includes(g, nodeName) && includes(g, tagName))

	print('some-based implementation',
    ['is b inline in c?', isInline('b', 'c')],
    ['is d inline in c?', isInline('d', 'c')],
    ['is d inline in b?', isInline('d', 'b')],
    ['is b inline in d?', isInline('b', 'd')]
  )
}

{
  const isInline = (nodeName, tagName) =>
  	groups.some(g => {
    	let hasFoundNode, hasFoundTag
    	for (let i = 0, l = g.length; i < l; i++) {
      	if (g[i] === nodeName) {
        	hasFoundNode = true
        } else if (g[i] === tagName) {
        	hasFoundTag = true
        }
        
        if (hasFoundNode && hasFoundTag) {
          return true
        }
      }
      
      return false
    })

	print('for-based implementation',
    ['is b inline in c?', isInline('b', 'c')],
    ['is d inline in c?', isInline('d', 'c')],
    ['is d inline in b?', isInline('d', 'b')],
    ['is b inline in d?', isInline('b', 'd')]
  )
}