Trying to inject a live preview SVG into my panel but have a timing issue

[Inventsable]

EDIT: Please don't move my thread. I get great answers at this forum and whenever I'm pushed to Add-ons, I never get any answers. Please let me keep my thread here where I originally posted it.

I want to make a panel that can package customized SVGs, creating a companion stylesheet and replacing 'cls-1' and etc. with dynamic class names along with other ways of prepping the files. I have it working to inject the SVG into my panel:

But the problem is that I'm having to click twice for an accurate preview because my evalScript function is slower than my reading function. I've tried calling the evalScript before reading, using an anonymous function as the callback of the evalScript and deploying reading from there, using a sleep() function to force a delay on the reading, and sending an event from JSX to JS at the end of my evalScript function and triggering the read from there. No luck even though the event looks like it's the most accurate.

So my problem is that I'm telling Illustrator to export, but all the methods of reading the file I'm using keep happening before my export is finished despite being afterwards in code. Is there a better way to do this? How can I solve this timing issue?

Relevant JSX:

function exportDocument(name){
  exportSVG(name);
  JSXEvent(name, "com.mightySVG.svgReady")
}
function setOptionsForSVGExport(){
  var options = new ExportOptionsWebOptimizedSVG();
  options.artboardRange = '1';
  options.coordinatePrecision = 2;
  options.fontType = SVGFontType.OUTLINEFONT;
  options.svgId = SVGIdType.SVGIDREGULAR;
  options.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;
  return options;
}
function exportSVG(name){
  var newName = setPath + "/" + name + ".svg";
  var thisFile = new File(newName);
  var type = ExportType.WOSVG;
  doc.exportFile(thisFile, type, setOptionsForSVGExport());
}
function JSXEvent(payload, eventType) {
  try {
    var xLib = new ExternalObject("lib:\PlugPlugExternalObject");
  } catch (e) {
    JSXEvent(e, 'console')
  }
  if (xLib) {
  var eventObj = new CSXSEvent();
  eventObj.type = eventType;
  eventObj.data = payload;
  eventObj.dispatch();
  }
  return;
}

and Javascript:

var preview = document.getElementById('preview');
// export the SVG on click of button
var btnExport = document.getElementById('push');
btnExport.addEventListener('click', function(e){
  var name = appUI.data.doc;
  csInterface.evalScript(`exportDocument('${name}')`, function(e){
    var thisFile = previewPath + "/" + name + ".svg";
    // sleep(1000);
    var result = window.cep.fs.readFile(thisFile);
    if (0 == result.err)
      newPreview(result.data, name);
    else
      console.log(`Error ${result.err}`);
  })
}, false)
// the event that is meant to fire when the file is ready,
// currently fires before the file is written
csInterface.addEventListener('com.mightySVG.svgReady', function(evt) {
  updatePreview(evt.data);
});
// inject the SVG into preview through AJAX
function updatePreview(file){
  clearPreview();
  // https://stackoverflow.com/a/14070928
  client = new XMLHttpRequest();
  client.open("GET","../preview/" + file + ".svg",false);
  client.overrideMimeType("image/svg+xml");
  client.send("");
  document.getElementById('preview')
  .appendChild(client.responseXML.documentElement);
}
// remove previous svg preview
function clearPreview(){
  while(preview.firstChild){
      preview.removeChild(preview.firstChild);
  }
}
// this parses the created SVG file, creating a stylesheet and SVG file with style omitted
function newPreview(data, name) {
  // ... long ...
}
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

This post moved from Illustrator Scripting to Extensions/AddOns Development. [Moderator]

[Silly-V]

Try to just read the svg as text right after you export and sending the text via your jsxevent.  Hey, I'm also interested in SVGs a lot, especially in panels that help manipulate them. You got a LinkedIn profile I can add?

[Inventsable]

I do this all recreationally so I don't have a LinkedIn, but I can share other ways -- my username on reddit is u/PortablePawnShop and on GitHub I'm Contactician, you actually started following me on GitHub a few weeks back and I have all the code for this repo posted there. I'd welcome any help or teaming up, but I'm very new to coding in general. I tried reading and sending from JSX, and noticed that it does work as expected if there's an alert() anywhere in the stack, but once I take the alert out I'm back to the same JSX lag. Right now I'm using a single folder, but I'm thinking having a temporary folder could be more useful because I could scan for when there's a file in that temp folder as a way to verify the timing of the export then read that file, push it to a verified folder and delete the temp one. Right now I'm constantly rewriting a single file and my trouble is that I'm reading the old iteration of the file prior to the export/rewrite.

JSX:

var console = {
  log : function(data) {JSXEvent(data, 'console')}
};
function verifyFile(name){
  var newFile = File(setPath + "/" + name + ".svg");
  try {newFile.open('r');
    } catch(e){alert(e)};
  var contents = newFile.read();
  return contents;
}
function exportSVG(name){
  var newName = setPath + "/" + name + ".svg";
  var thisFile = new File(newName);
  var type = ExportType.WOSVG;
  doc.exportFile(thisFile, type, setOptionsForSVGExport());
  console.log(verifyFile(name));
}

JS:

  csInterface.addEventListener('console', function(evt) {
    console.log(evt.data);
  });

Is this what you mean?

My plan is to 'arm' the SVG to create the a preview and generate input controls for all included classes, then crawl through both the stylesheet and the resulting SVG to RegExp or replace the default class names on export along with a few other options. I'd like to have the ability to hover over one of the inputs for renaming and highlight the parts of the preview of that corresponding class (so you know what you're renaming before export).

[Silly-V]

Yea that's exactly what I meant - did it work?

I think what you may need is the C++ SDK where you can add ad-hoc annotations to artwork that people can see but not touch. Or touch and it does something special.

In the realm of SVGs, it would be nice to actually Ink-Scapify Illustrator, but it would most certainly involve needing to create an own SVG export function from Illustrator which is so so far beyond me at this time!

LinkedIn doesn't mean you have to be doing it 'professionally'... there's rappers on there and stuff - with mixtapes and what not!