JSFiddle - React, Tailwind, and code Playground

by neonDog

JavaScript

const arraysMatch = function (arr1, arr2, checkLength=true) {
	// Check if the arrays are the same length
	const lengthsMatch = arr1.length === arr2.length;
	if (!checkLength && !lengthsMatch) return false;

	// Check if all items exist and are in the same order
	// If there is a difference then return the index where the arrays don't match
	for (let i = 0, l = arr1.length; i < l; i++) {
		if (arr1[i] !== arr2[i]) return i;
	}

	// This MUST return lengthsMatch, not simply true
	// Otherwise if arr1 is shorter than arr2, it will return true when they don't match
	return lengthsMatch;
};

const convertIfNumeric = function (n) {
	return isNumeric(n) ? parseInt(n) : n;
};
const isNumeric = function (n) {
	return !isNaN(parseFloat(n)) && isFinite(n);
};

const pathToArray = function (path, seperator = '/', convertToInt=false) {
	if (typeof path === 'string') {

		const firstChar = path.charAt(0);
		if (firstChar === seperator || firstChar === '#') {
			path = path.split(seperator);
			path.shift();

			if (convertToInt) {
				for (let i=0,l=length; i < l; i++) {
					if (isNumeric(path[i])) {
						path[i] = parseInt(path[i]);
					}
				}
			}

		}

	} else if (Array.isArray(path)) {
		return path;
	}

	return path;
};

const fillInPatchBlanks = function(patch, obj) {
	
  const patchPaths = [];
  const newPatch = [];
  
	for (let i=0, l=patch.length; i < l; i++) {
		if (patch[i].op !== 'remove') {
      patchPaths.push(patch[i].path);
		}
	}
  
  for (let i=0, l=patch.length; i < l; i++) {
  	const prependPatches = addPatchWhereNotExist(obj, patchPaths, patchPaths[i]);
    newPatch.push(...prependPatches, patch[i]);
  }
  
  return newPatch;

};

const addPatchWhereNotExist = function(obj, patchPaths, path) {

	const patch = [];
	path = pathToArray(path, '/', true);
  const length = path.length;
  const pathCopy = [];
	
	//console.error('patchPatchs', patchPaths);
	if (length === 0) return [];
	let index = 0;
  let nextPathExists = false;
  
	while (index < length)...