JSX extension and data in page: how to mix / coordinate the two?

Help / Discuss
1

I’ve succesfully integrated the IBM Gantt Chart Component via a simple JSX extension.

Here’s a portion of it:

require.config({
  paths: {
    'ibm-gantt-chart': 'https://unpkg.com/ibm-gantt-chart@0.5.27/dist/ibm-gantt-chart'
  }
});

require(['ibm-gantt-chart'], function(gantt) {
  var data = [
  {
    id: 'NURSES+Anne',
    name: 'Anne',
    activities: [
      {
        id: 'SHIFTS+Emergency+Monday+2+8',
        name: 'Emergency',
        start: 1474880400000,
        end: 1474902000000,
      },
// ...

    ],
  },
];

const config = {
  data: {
    // ...Configures how to fetch resources for the Gantt
    resources: {
      data, // resources are provided in an array. Instead, we could configure a request to the server.
      // Activities of the resources are provided along with the 'activities' property of resource objects.
      // Alternatively, they could be listed from the 'data.activities' configuration.
      activities: 'activities',
      name: 'name', // The name of the resource is provided with the name property of the resource object.
      id: 'id', // The id of the resource is provided with the id property of the resource object.
    },
    // 
// ...
};

  // ...
  new Gantt('gantt' /* the id of the DOM element to contain the Gantt chart */, config);
});

As you can see both the library setup and component initialization (together with the dataset) are in the same place here.

What I’d like to do is move the data set (and the new Gant(...) init invocation probably) within the page, to ease editing, i.e. in a script block: is this possible? Or will I incur in race conditions where the JSX block could finish after the page script block is being run?