Embedding cells in an Electron App

Community Help
1

Following the Observable meetup in January, I thought of a way Observable could make my life a lot easier. I’m building an Electron app that helps researchers to request some APIs (i.e. Scopus) and display the results as D3 graphs just by clicking buttons. A new feature I’m implementing is a D3 slider, so that people don’t need to alternate between that Electron App and their PowerPoint slides. And since it’s a D3 slider, slides could contain observable cells. Or so I thought.

This is how I’m trying to create the cells:

const createObsCell = (slide,id,userName,notebookName) => {
  // Create a DIV in the DOM
  var cell = document.createElement("DIV");
  cell.id = "observablehq-"+id; 
  document.getElementById(slide).append(cell);

  // Create a path for the define script
  let modStorePath = userDataPath + "/flatDatasets/"+userName+"+"+notebookName+".js";

  // Check if already accessed in the past and hence already available
  if (fs.existsSync(modStorePath)) {

require = require('esm')(module);
var define = require(modStorePath);
const inspect = Inspector.into("#observablehq-"+id);
(new Runtime).module(define, name => (name === "chart") && inspect());
  
  // If not, download it from the Observable API  
  } else {

  let optionsRequest = {
// Prepare options for the Request-Promise-Native Package
uri:"https://api.observablehq.com/"+userName+"/"+notebookName+".js?v=3", // URI to be accessed
headers: { "User-Agent": "Request-Promise" }, // User agent to access is Request-promise
json: false // don't automatically parse as JSON
  };

  rpn(optionsRequest) // RPN stands for Request-promise-native (Request + Promise)
.then(mod =>{
  // Write the file in the app's user directory
  fs.writeFile(modStorePath, mod, "utf8", err => {
    if (err) throw err;
    require = require('esm')(module);
    var define = require(modStorePath);
    const inspect = Inspector.into("#observablehq-"+id);
    (new Runtime).module(define, name => (name === "chart") && inspect());
  });
})
  }
}

The error I get when I try
createObsCell('xtype','761b1ced','@jashkenas','global-alcohol-consumption-2015')
is the following

PANDORAE/node_modules/@observablehq/runtime/dist/runtime.umd.js:2 Uncaught TypeError: e is not a function
at zt.value (PANDORAE/node_modules/@observablehq/runtime/dist/runtime.umd.js:2)
at createObsCell (slider.js:20)
at :1:1

Any idea how I could fix that, or do things differently in a way that is safe-ish in an Electron context? I’m using Electron V5.0.3 and Runtime V4.6.4.

2 Likes
2

Found the solution. define as loaded by esm is in fact define.default which should hence be ran as runtime.module(**define.default**, name => (name === "chart") && inspect());