npm - impact-analysis - Versions diffs - 1.0.2 → 1.0.3 - Mend

impact-analysis 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/impact-analysis.html ADDED Viewed

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Impact Analysis</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <style>
+      body { font-family: "Exo 2", serif; background-color: #282828; color: #fff; overflow-x: hidden;
+      font-optical-sizing: auto; margin: 0; padding: 0; text-align: center; font-weight: 400;}
+      svg { width: 100%; height: 100vh; }
+      circle { cursor: pointer; }
+      text { font-size: 12px; fill: #fff; }
+      line { stroke: #fefefe; stroke-opacity: 0.6; }
+      #tooltip { position: absolute; background: #fff;color: #000; padding: 8px; border: 1px solid #ddd; display: none; }
+      .svg-wrapper{ padding: 10px; }
+      .impact-file-list {
+        display: list-item;
+        list-style: number;
+        text-align: left;
+        padding-left: 7px;
+      }
+      .impact-analysis-table {
+        width: 100%; border-collapse: collapse;
+      }
+      .impact-analysis-table td {
+        padding: 10px 20px;
+      }
+      th {
+        padding: 10px;
+      }
+      td:first-child {
+        background: #91fd9117;
+      }
+      .btn-theme {
+        min-width: 142px;
+        padding: 12px 16px;
+        font-size: 14px;
+        border-radius: 100px;
+        border: 1px solid #565454;
+        outline: none;
+        box-shadow: none;
+        cursor: pointer;
+        transition: all .3s ease-in-out;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        font-family: "Exo 2", serif;
+        background: #222;
+        color: #fff;
+      }
+      .btn-active {
+          background: #1f4afe;
+          background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
+          color: #fff
+      }
+      .btn-svg path {
+        fill: #fefefe;
+      }
+      .btn-active:hover svg path {
+        fill: #1f4afe;
+      }
+      .btn-theme:hover svg path {
+        fill: #1f4afe;
+      }
+      .btn-theme:hover {
+        background: #fff;
+        color: #1f4afe;
+        border: 1px solid #1F4AFE
+      }
+      .btn-svg {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      th {
+        background: #1f4afe;
+        background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
+        width: 50%;
+      }
+      th:last-child {
+        background: #1f4afe;
+        background: linear-gradient(-90deg,#1f4afe 35%,#167cfc);
+      }
+  </style>
+</head>
+<body>
+  <h1>Impact Analysis</h1>
+  <div id="tooltip"></div>
+  <div style="text-align: center; margin-bottom: 10px;">
+      <button id="graphViewBtn" class="btn-theme btn-active"><svg class="btn-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+      <g><g><path fill="#000000" d="M224.5,7.9c-11.8,0-21.5,9.6-21.5,21.5c0,7.4,3.8,14,9.6,17.9l-40.5,106.9c-1.1-0.2-2.3-0.3-3.4-0.3c-5.2,0-9.8,1.9-13.5,4.9l-40.6-33.5c1.6-3,2.6-6.4,2.6-10c0-11.8-9.6-21.5-21.5-21.5c-11.8,0-21.5,9.6-21.5,21.5c0,6.4,2.9,12.1,7.3,16l-43.3,75.3c-2.2-0.7-4.5-1.3-6.9-1.3c-11.8,0-21.5,9.6-21.5,21.5c0,11.8,9.6,21.5,21.5,21.5c11.8,0,21.5-9.6,21.5-21.5c0-6.3-2.8-11.9-7.1-15.8l43.3-75.4c2.1,0.7,4.3,1.2,6.7,1.2c5.1,0,9.7-1.9,13.4-4.8l40.6,33.6c-1.6,3-2.5,6.3-2.5,9.9c0,11.8,9.6,21.5,21.5,21.5c11.8,0,21.5-9.6,21.5-21.5c0-7.6-4-14.3-10-18.1l40.5-106.7c1.3,0.2,2.6,0.4,3.9,0.4c11.8,0,21.5-9.6,21.5-21.5C246,17.5,236.4,7.9,224.5,7.9L224.5,7.9z M31.5,239.6c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C44.3,233.8,38.6,239.6,31.5,239.6z M95.7,128c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C108.6,122.3,102.8,128,95.7,128z M168.7,188.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C181.6,182.3,175.8,188.1,168.7,188.1L168.7,188.1z M224.5,42.2c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C237.4,36.5,231.6,42.2,224.5,42.2L224.5,42.2z"/></g></g>
+      </svg> Graph View</button>
+      <button id="tableViewBtn" class="btn-theme"><svg class="btn-svg" width="12px" height="12px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </defs>
+          <g id="64px-Line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g id="db-table">
+      </g>
+              <path d="M56,12 C56,9.794 54.206,8 52,8 L10,8 C7.794,8 6,9.794 6,12 L6,54 C6,56.206 7.794,58 10,58 L52,58 C54.206,58 56,56.206 56,54 L56,12 L56,12 Z M30,22 L30,32 L20,32 L20,22 L30,22 L30,22 Z M42,22 L42,32 L32,32 L32,22 L42,22 L42,22 Z M54,22 L54,32 L44,32 L44,22 L54,22 L54,22 Z M18,32 L8,32 L8,22 L18,22 L18,32 L18,32 Z M8,34 L18,34 L18,44 L8,44 L8,34 L8,34 Z M20,34 L30,34 L30,44 L20,44 L20,34 L20,34 Z M30,46 L30,56 L20,56 L20,46 L30,46 L30,46 Z M32,46 L42,46 L42,56 L32,56 L32,46 L32,46 Z M32,44 L32,34 L42,34 L42,44 L32,44 L32,44 Z M44,34 L54,34 L54,44 L44,44 L44,34 L44,34 Z M10,10 L52,10 C53.103,10 54,10.897 54,12 L54,20 L8,20 L8,12 C8,10.897 8.897,10 10,10 L10,10 Z M8,54 L8,46 L18,46 L18,56 L10,56 C8.897,56 8,55.103 8,54 L8,54 Z M52,56 L44,56 L44,46 L54,46 L54,54 C54,55.103 53.103,56 52,56 L52,56 Z" id="Shape" fill="#000000">
+      </path>
+          </g>
+      </svg> Table View</button>
+  </div>
+  <div id="graphView" style="display: block;">
+      <svg id="svgGraph" width="1000" height="600"></svg>
+  </div>
+  <div id="tableView" style="display: none;padding: 20px;">
+      <table class="impact-analysis-table" border="1">
+          <thead>
+              <tr>
+                  <th>Changed File</th>
+                  <th>Impacted Files</th>
+              </tr>
+          </thead>
+          <tbody id="tableBody"></tbody>
+      </table>
+  </div>
+  <script>
+  const impactData = [];
+  function getFileName(path) {
+    return path.split(/[/\\\\]/).pop();
+}
+  const nodesMap = new Map();
+        impactData.forEach(d => {
+            nodesMap.set(d.changedFile, { id: d.changedFile, name: getFileName(d.changedFile), isChangedFile: true });
+            d.impactsTo.forEach(target => {
+                nodesMap.set(target, { id: target, name: getFileName(target), isChangedFile: false });
+            });
+        });
+        const nodes = Array.from(nodesMap.values());
+        const links = [];
+        const impactMap = new Map();
+        impactData.forEach(d => {
+            d.impactsTo.forEach(target => {
+                links.push({ source: d.changedFile, target });
+                if (!impactMap.has(target)) impactMap.set(target, new Set());
+                impactMap.get(target).add(d.changedFile);
+            });
+        });
+        impactMap.forEach((sources, target) => {
+            sources.forEach(source1 => {
+                sources.forEach(source2 => {
+                    if (source1 !== source2) {
+                        links.push({ source: source1, target: source2 });
+                    }
+                });
+            });
+        });
+        const graph = { nodes, links };
+        const width = window.innerWidth;
+        const height = window.innerHeight - 100;
+        const svg = d3.select("#svgGraph")
+            .attr("width", width)
+            .attr("height", height);
+        const simulation = d3.forceSimulation(graph.nodes)
+            .force("link", d3.forceLink(graph.links)
+                .id(d => d.id)
+                .distance(80) // Reduce distance for a more compact layout
+            )
+            .force("charge", d3.forceManyBody()
+                .strength(-50) // Decrease negative strength to reduce spacing
+            )
+            .force("center", d3.forceCenter(width / 2, height / 2))
+            .force("collision", d3.forceCollide()
+                .radius(35) // Adjust radius to ensure nodes don't overlap but are closer
+            )
+            .on("tick", ticked);
+        const link = svg.append("g")
+            .selectAll("line")
+            .data(graph.links)
+            .enter().append("line")
+            .attr("stroke", "#aaa");
+        const nodeGroup = svg.append("g")
+            .selectAll("g")
+            .data(graph.nodes)
+            .enter().append("g")
+            .call(d3.drag()
+                .on("start", dragStarted)
+                .on("drag", dragged)
+                .on("end", dragEnded));
+        const node = nodeGroup.append("circle")
+            .attr("r", 10)
+            .attr("fill", d => d.isChangedFile ? "red" : "steelblue");
+        const labels = nodeGroup.append("text")
+            .attr("x", 12)
+            .attr("y", 5)
+            .text(d => d.name);
+        simulation.on("tick", () => {
+              link.attr("x1", d => d.source.x)
+                  .attr("y1", d => d.source.y)
+                  .attr("x2", d => d.target.x)
+                  .attr("y2", d => d.target.y);
+              nodeGroup.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+          });
+        function dragStarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+        function dragEnded(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+        document.getElementById("graphViewBtn").addEventListener("click", function () {
+            document.getElementById("graphView").style.display = "block";
+            document.getElementById("tableView").style.display = "none";
+            setActiveButton(this);
+        });
+        document.getElementById("tableViewBtn").addEventListener("click", function () {
+            document.getElementById("graphView").style.display = "none";
+            document.getElementById("tableView").style.display = "block";
+            setActiveButton(this);
+            generateTableView(impactData);
+        });
+        function setActiveButton(activeBtn) {
+            document.querySelectorAll(".btn-theme").forEach(button => {
+                button.classList.remove("btn-active");
+            });
+            activeBtn.classList.add("btn-active");
+        }
+        function generateTableView(data) {
+            const tableBody = document.getElementById("tableBody");
+            tableBody.innerHTML = "";
+            data.forEach(row => {
+                const tr = document.createElement("tr");
+                const tdFile = document.createElement("td");
+                tdFile.textContent = row.changedFile;
+                tr.appendChild(tdFile);
+                const tdImpact = document.createElement("td");
+                tdImpact.textContent = row.impactsTo.length ? row.impactsTo.join(", ") : "None";
+                tr.appendChild(tdImpact);
+                tableBody.appendChild(tr);
+            });
+        }
+        function ticked() {
+          node.attr("cx", d => d.x = Math.max(20, Math.min(width - 20, d.x)))
+              .attr("cy", d => d.y = Math.max(20, Math.min(height - 20, d.y)));
+          link.attr("x1", d => d.source.x)
+              .attr("y1", d => d.source.y)
+              .attr("x2", d => d.target.x)
+              .attr("y2", d => d.target.y);
+      }
+  </script>
+</body>
+</html>

package/index.mjs CHANGED Viewed

@@ -149,7 +149,7 @@ function generateGraphData(dependencyData) {
           if (!nodes.has(impactedFile)) {
               nodes.set(impactedFile, { id: impactedFileName, path: impactedFile,  isChangedFile: false });
           }
-          links.push({ source: changedFile, target: impactedFileName });
+          links.push({ id: changedFile, source: changedFile, target: impactedFileName });
       });
   });
@@ -160,7 +160,6 @@ function generateGraphData(dependencyData) {
 }
 const graphData = generateGraphData(results);
 const htmlContent = `
 <!DOCTYPE html>
 <html lang="en">
@@ -249,6 +248,7 @@ const htmlContent = `
       th {
         background: #1f4afe;
         background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
+        width: 50%;
       }
       th:last-child {
@@ -295,151 +295,161 @@ const htmlContent = `
   <script>
-  const graph = ${JSON.stringify(graphData)};
-  const width = window.innerWidth;
-  const height = window.innerHeight - 100;
-  const svg = d3.select("#svgGraph")
-      .attr("width", width)
-      .attr("height", height);
-  const simulation = d3.forceSimulation(graph.nodes)
-      .force("link", d3.forceLink(graph.links).id(d => d.id).distance(150))  // Increased distance for better spacing
-      .force("charge", d3.forceManyBody().strength(-200))  // Stronger repulsion to avoid overlap
-      .force("center", d3.forceCenter(width / 2, height / 2))  // Centering the graph
-      .force("collision", d3.forceCollide().radius(20))  // Prevents overlap
-      .on("tick", ticked);
-  const link = svg.selectAll("line")
-      .data(graph.links)
-      .enter().append("line");
-  const node = svg.selectAll("circle")
-      .data(graph.nodes)
-      .enter().append("circle")
-      .attr("r", d => d.isChangedFile ? 18 : 12)  // Slightly larger nodes
-      .attr("fill", d => d.isChangedFile ? "#ff4500" : "#007bff")  // Bright orange for changedFile, blue for others
-      .style("stroke", "#fff")  // White border for clarity
-      .style("stroke-width", 2)
-      .call(drag(simulation));
-  const tooltip = d3.select("#tooltip");
-  node.on("mouseover", (event, d) => {
-      tooltip.style("display", "block")
-          .html(\`<strong>\${d.isChangedFile ? d.id : d.path}</strong>\`)
-          .style("left", (event.pageX + 10) + "px")
-          .style("top", (event.pageY - 10) + "px");
-  }).on("mouseout", () => tooltip.style("display", "none"));
-  svg.selectAll("text")
-      .data(graph.nodes)
-      .enter().append("text")
-      .attr("dy", 4)
-      .attr("x", 12)
-      .text(d => d.isChangedFile ? d.name : d.id);
-  simulation.on("tick", () => {
-      link.attr("x1", d => clamp(d.source.x, 0, width))
-          .attr("y1", d => clamp(d.source.y, 0, height))
-          .attr("x2", d => clamp(d.target.x, 0, width))
-          .attr("y2", d => clamp(d.target.y, 0, height));
-      node.attr("cx", d => clamp(d.x, 10, width - 10))
-          .attr("cy", d => clamp(d.y, 10, height - 10));
-      svg.selectAll("text")
-          .attr("x", d => clamp(d.x + 20, 10, width - 10))
-          .attr("y", d => clamp(d.y + 6, 10, height - 10));
-  });
-  function clamp(value, min, max) {
-      return Math.max(min, Math.min(max, value));
-  }
+  const impactData = ${JSON.stringify(dependencyJson)};
+  function getFileName(path) {
+    return path.split(/[/\\\\\\\\]/).pop();
+}
-  function drag(simulation) {
-      function dragstarted(event, d) {
-          if (!event.active) simulation.alphaTarget(0.3).restart();
-          d.fx = d.x;
-          d.fy = d.y;
-      }
+  const nodesMap = new Map();
+        impactData.forEach(d => {
+            nodesMap.set(d.changedFile, { id: d.changedFile, name: getFileName(d.changedFile), isChangedFile: true });
+            d.impactsTo.forEach(target => {
+                nodesMap.set(target, { id: target, name: getFileName(target), isChangedFile: false });
+            });
+        });
+        const nodes = Array.from(nodesMap.values());
+        const links = [];
+        const impactMap = new Map();
+        impactData.forEach(d => {
+            d.impactsTo.forEach(target => {
+                links.push({ source: d.changedFile, target });
+                if (!impactMap.has(target)) impactMap.set(target, new Set());
+                impactMap.get(target).add(d.changedFile);
+            });
+        });
-      function dragged(event, d) {
-          d.fx = clamp(event.x, 10, width - 10);
-          d.fy = clamp(event.y, 10, height - 10);
-      }
+        impactMap.forEach((sources, target) => {
+            sources.forEach(source1 => {
+                sources.forEach(source2 => {
+                    if (source1 !== source2) {
+                        links.push({ source: source1, target: source2 });
+                    }
+                });
+            });
+        });
-      function dragended(event, d) {
-          if (!event.active) simulation.alphaTarget(0);
-          d.fx = null;
-          d.fy = null;
-      }
+        const graph = { nodes, links };
+        const width = window.innerWidth;
+        const height = window.innerHeight - 100;
+        const svg = d3.select("#svgGraph")
+            .attr("width", width)
+            .attr("height", height);
+        const simulation = d3.forceSimulation(graph.nodes)
+            .force("link", d3.forceLink(graph.links)
+                .id(d => d.id)
+                .distance(80)
+            )
+            .force("charge", d3.forceManyBody()
+                .strength(-50)
+            )
+            .force("center", d3.forceCenter(width / 2, height / 2))
+            .force("collision", d3.forceCollide()
+                .radius(35)
+            )
+            .on("tick", ticked);
+        const link = svg.append("g")
+            .selectAll("line")
+            .data(graph.links)
+            .enter().append("line")
+            .attr("stroke", "#aaa");
+        const nodeGroup = svg.append("g")
+            .selectAll("g")
+            .data(graph.nodes)
+            .enter().append("g")
+            .call(d3.drag()
+                .on("start", dragStarted)
+                .on("drag", dragged)
+                .on("end", dragEnded));
+        const node = nodeGroup.append("circle")
+            .attr("r", 10)
+            .attr("fill", d => d.isChangedFile ? "red" : "steelblue");
+        const labels = nodeGroup.append("text")
+            .attr("x", 12)
+            .attr("y", 5)
+            .text(d => d.name);
+        simulation.on("tick", () => {
+              link.attr("x1", d => d.source.x)
+                  .attr("y1", d => d.source.y)
+                  .attr("x2", d => d.target.x)
+                  .attr("y2", d => d.target.y);
+              nodeGroup.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+          });
+        function dragStarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
-      return d3.drag()
-          .on("start", dragstarted)
-          .on("drag", dragged)
-          .on("end", dragended);
-  }
-  function ticked() {
-    link
-        .attr("x1", d => d.source.x)
-        .attr("y1", d => d.source.y)
-        .attr("x2", d => d.target.x)
-        .attr("y2", d => d.target.y);
-    node
-        .attr("cx", d => d.x)
-        .attr("cy", d => d.y);
-    label
-        .attr("x", d => d.x + 10)
-        .attr("y", d => d.y + 5);
-}
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
-document.getElementById("graphViewBtn").addEventListener("click", function () {
-  document.getElementById("graphView").style.display = "block";
-  document.getElementById("tableView").style.display = "none";
-  setActiveButton(this);
-});
-document.getElementById("tableViewBtn").addEventListener("click", function () {
-  document.getElementById("graphView").style.display = "none";
-  document.getElementById("tableView").style.display = "block";
-  setActiveButton(this);
-  generateTableView(${JSON.stringify(dependencyJson)});
-});
-function setActiveButton(activeBtn) {
-  document.querySelectorAll(".btn-theme").forEach(button => {
-      button.classList.remove("btn-active");
-  });
-  activeBtn.classList.add("btn-active");
-}
+        function dragEnded(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
-function generateTableView(data) {
-  const tableData = data;
-  var tableBody = document.getElementById("tableBody");
-  tableBody.innerHTML = "";
-  if (!Array.isArray(tableData) || tableData.length === 0) {
-      tableBody.innerHTML = '<tr><td colspan="2">No data available</td></tr>';
-      return;
-  }
-  tableData.forEach(function (result) {
-      var row = document.createElement("tr");
+        document.getElementById("graphViewBtn").addEventListener("click", function () {
+            document.getElementById("graphView").style.display = "block";
+            document.getElementById("tableView").style.display = "none";
+            setActiveButton(this);
+        });
-      var changedFileCell = document.createElement("td");
-      changedFileCell.textContent = result.changedFile;
+        document.getElementById("tableViewBtn").addEventListener("click", function () {
+            document.getElementById("graphView").style.display = "none";
+            document.getElementById("tableView").style.display = "block";
+            setActiveButton(this);
+            generateTableView(impactData);
+        });
-      var impactsToCell = document.createElement("td");
-      impactsToCell.innerHTML = result.impactsTo.map(function (file) {
-          return '<div class="impact-file-list">' + file + '</div>';
-      }).join("");
+        function setActiveButton(activeBtn) {
+            document.querySelectorAll(".btn-theme").forEach(button => {
+                button.classList.remove("btn-active");
+            });
+            activeBtn.classList.add("btn-active");
+        }
+        function generateTableView(data) {
+            const tableBody = document.getElementById("tableBody");
+            tableBody.innerHTML = "";
+            data.forEach(row => {
+                const tr = document.createElement("tr");
+                const tdFile = document.createElement("td");
+                tdFile.textContent = row.changedFile;
+                tr.appendChild(tdFile);
+                const tdImpact = document.createElement("td");
+                tdImpact.textContent = row.impactsTo.length ? row.impactsTo.join(", ") : "No Impact";
+                tr.appendChild(tdImpact);
+                tableBody.appendChild(tr);
+            });
+        }
+        function ticked() {
+          node.attr("cx", d => d.x = Math.max(20, Math.min(width - 20, d.x)))
+              .attr("cy", d => d.y = Math.max(20, Math.min(height - 20, d.y)));
+          link.attr("x1", d => d.source.x)
+              .attr("y1", d => d.source.y)
+              .attr("x2", d => d.target.x)
+              .attr("y2", d => d.target.y);
+      }
-      row.appendChild(changedFileCell);
-      row.appendChild(impactsToCell);
-      tableBody.appendChild(row);
-  });
-}
   </script>

package/index.zip ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "impact-analysis",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Tool to analyze code impact based on changed files and dependencies.",
   "main": "index.js",
   "scripts": {