@cross/deepmerge

by pinta365

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Browser demo of deepMerge</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h3>Object merging using @cross/deepmerge</h3>
        <div id="output"></div>
    </div>
  </body>
</html>

CSS

.container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    font-family: sans-serif;
}

body {
  background: #323334;
  color: #EEE;
}

JavaScript

// Import @cross/deepmerge from esm.sh/jsr
import { 
  deepMerge
} from "https://esm.sh/jsr/@cross/deepmerge";

const outputDiv = document.getElementById('output');      
const object1 = { a: 1, b: { c: 2 } };
const object2 = { b: { d: 3 }, e: 4 };
const merged = deepMerge(object1, object2);

outputDiv.innerHTML += `<pre>Object1:${JSON.stringify(object1, null, 4)}</pre>`;
outputDiv.innerHTML += `<pre>Object2:${JSON.stringify(object2, null, 4)}</pre>`;      
outputDiv.innerHTML += `<pre>Merged:${JSON.stringify(merged, null, 4)}</pre>`;