Add a way to create a new notebook? about vscode-ojs HOT 5 OPEN

You can - you just need to create new file with one of the following extensions:

• ojs
• omd
• ojsnb

from vscode-ojs.

Could you explain how?

When I create an new file with an ojs extension, it says "Observable JavaScript (OJS)" in the lower right, but it just behaves like a regular JavaScript file, and I don't see how to create a new cell.

By contrast, for Jupyter, there is a "Create: New Jupyter Notebook" command. It creates an unsaved file named "Untitled-1.ipynb" with a blank cell. I can type '2+2' and shift-return, and it execute and return 4.

The only way I see to get an ojs notebook that works is with the "OJS: Download Notebook" command.

Edit: I see now, the extension to use is .ojsnb. But what are the other extensions for?

from vscode-ojs.

An OJS file is essentially one big Observable Cell, without being limited to one statement, so the following would be valid:

md`# Hello Wold ${mol}`;

mol = 42;

{
  const context = DOM.context2d(width, height);
  let frame;
  
  (function tick() {
    const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius;
    context.clearRect(0, 0, width, height);
    context.beginPath();
    context.arc(x, height / 2, radius, 0, 2 * Math.PI);
    context.fill();
    frame = requestAnimationFrame(tick);
  })();
  
  invalidation.then(() => cancelAnimationFrame(frame));  
  return context.canvas;
}

radius = 11;
height = 22;

Press the preview to see it:

OMD docs are essentially markdown documents, that expect valid ojs inside code pips:

from vscode-ojs.

Thanks!

Clearly, I wasn't reading very carefully. Sorry about that!

In retrospect, I picked the .ojs extension because it was the first one listed and you use 'OJS' as an abbreviation for the Observable JS extension itself, so I thought that was the main file extension to use. But .ojsnb is the one that behaves like a notebook.

I think that for the other extensions, if it's going to display the result for each 'cell', it might make sense to also display the variable name? Showing 'height = 22' in the output would be more meaningful than just '22'.

Displaying the source code that generated the variable might make sense too? On the Observable HQ website, you can choose whether to expand or collapse the source code for each cell. Similarly, it would make sense for the author of a Markdown document to somehow decide whether to show the source code for each 'cell' as well as what the expression evaluated to.

from vscode-ojs.

Thanks for the feedback - In the past I have debated this with myself as well and with the addition of the "ojsnb" support decided that it catered for the folks who wanted similar features.

I think the OMD format has scope to add additional meta information (next to the pips) per code cell, but for OJS it would be an all or nothing type switch (like a "debug" mode in the preview pane).

FWIW - If you use the "export to HTML" feature:

You will see that I am simply reusing the official Observable "Inspector" to render the cells.

from vscode-ojs.