JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

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

JavaScript

function isObject(item) {
  return (item && typeof item === 'object');
}

function isArray(item) {
  return (isObject(item) && Array.isArray(item));
}

function assign(target, key, value) {
	if(isArray(target)) {
		console.log(target)
		const newArr = Object.assign([], key, value)
		target = [...target, ...newArr]
	} else if(isObject(target)) {
		Object.assign(target, { [key]: value });
	}
}

function mergeDeep(itemA, itemB) {
  if(typeof target !== typeof source) {
  	return itemA;
  }
  
  let output = Object.assign({}, itemA);
  
  if (isObject(itemA) && isObject(itemB)) {
    Object.keys(itemB).forEach(key => {
      if (isObject(itemB[key])) {
        if (!(key in itemA)) {
          assign(output, key, itemB[key] );
		} else{
			console.log(itemA[key], itemB[key])
          output[key] = mergeDeep(itemA[key], itemB[key]);
		}
      } else {
          assign(output, key, itemB[key] );
      }
    });
  }
  return output;
  
}

const a = {
	allowerAttributes: {
		p: ['class'],
		ul: ['class'],
		li: ['class'],
	}
}

const b = {
	allowerAttributes: {
		p: ['data-type'],
		ul: ['class'],
		li: ['class'],
	}
}

const c = mergeDeep(a, b)



console.log(c)