JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@visualstorytelling/[email protected]/dist/provenance-core.umd.js" />

JavaScript

// by loading from unpkg, everything is imported in the `provenanceCore` variable. We can put everything on `window` so that the code is more consistent with a typical web app where you would use e.g. `import { ProvenanceGraph } from '@visualstorytelling/provenance-core'`.
window = Object.assign(window, provenanceCore);

const setupPage = () => {
	const counter = document.createElement('span');
  counter.innerHTML = '5';

  const button = document.createElement('button');
  button.innerHTML = 'Increase';

	const actionsDiv = document.createElement('div');

  document.body.appendChild(counter);  
  document.body.appendChild(document.createElement('br'));
	document.body.appendChild(button);
  document.body.appendChild(actionsDiv);
  
	return {counter, button, actionsDiv};
}

const setupProvenance = () => {
	// the provenance graph stores all the interaction information
  const application = { name: 'button-demo', version: '1.0.0' };
  const graph = new ProvenanceGraph(application);

  // the registry holds all the actions that can be tracked
  const registry = new ActionFunctionRegistry();

  // the tracker tracks actions from the registry and adds them to the provenance graph
  const tracker = new ProvenanceTracker(registry, graph);

  // We can now register the increase function as an action. Note the async: all registered actions must actually return a Promise that resolves when the action is completed. This could also be written as:
  //registry.register('increase', (amount) => Promise.resolve(increase(amount)));
  registry.register('increase', async (amount) => { increase(amount); });

  return { graph, registry, tracker };
};

const {counter, button, actionsDiv} = setupPage();
const increase = (amount) => {
  counter.innerHTML = amount + parseInt(counter.innerHTML);
};
button.addEventListener('click', () => increase(1));

const { graph, registry, tracker } = setupProvenance();

// We should let the tracker apply the action when the button is pressed. If the...