History State Suspension, I need some help with this

Photoshop
,
1

Hi I am new here, not too familiar with javascript and uxp, can someone help me, I have been trying to add the History state suspension to this but I can not figure it out, where to place the code in the js.

Where does this code go? How do I make it work in my main.js? And am I missing something? I have been using the console and I am getting no where.

async function historyStateSample(executionContext) {
    let hostControl = executionContext.hostControl;

    // Get an ID for a target document
    let documentID = await getTargetDocument();

    // Suspend history state on the target document
    // This will coalesce all changes into a single history state called
    // 'Custom Command'
    let suspensionID = await hostControl.suspendHistory({
        "documentID": documentID,
        "name": "Custom Command"
    });

    // modify the document
    // . . .

    // resume the history state
    await hostControl.resumeHistory(suspensionID);
}

main.js

function showLayerNames() {
    const app = require("photoshop").app;
    const allLayers = app.activeDocument.layers;
    const allLayerNames = allLayers.map(layer => layer.name);
    const sortedNames = allLayerNames.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
    document.getElementById("layers").innerHTML = `
      <ul>${
        sortedNames.map(name => `<li>${name}</li>`).join("")
      }</ul>`;
}
document.getElementById("layer").addEventListener("click", layerTest);



	async function layerTest(){
		const {executeAsModal} = require("photoshop").core;
const {batchPlay} = require("photoshop").action;

async function actionCommands() {
   const result = await batchPlay(
      [

{
   "_obj": "duplicate",
   "_target": [
      {
         "_ref": "layer",
         "_enum": "ordinal",
         "_value": "targetEnum"
      }
   ],
   "version": 5,
   "_isCommand": true
}

      ],
      {}
   );
}

async function runModalFunction() {
   await executeAsModal(actionCommands, {"commandName": "Action Commands"});
}

await runModalFunction();
	}

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <sp-button id="layer">Add Layer</sp-button>

  <footer>

  </footer>
</body>
</html>