VSCode Observable JS Extension (v0.4.2)

  • v0.0.0 - This is my first stab at a VSCode Extension for Observable JS
  • v0.1.0 - Added import cells from ObservableHQ command
  • v0.2.0 - Added basic FileAttachement support
  • v0.2.1 - Improved runtime error / value reporting
  • v0.3.0 - Added “Export to HTML” command
  • v0.4.0 - Added “Observable Markdown” (.omd) support
  • v0.4.1 - Fixed OMD Issue
  • v0.4.2 - “Import Notebook” correctly supports “shared” notebook URLs

https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js

Command Shortcut Description
OJS: Check Syntax F7 Syntax Check
OJS: Preview Web Page Ctrl+K V Preview notebook in an embedded Web Page
OJS: Import Notebook Import published or shared notebook cells into current document
OJS: Export to HTML Export as a self contained HTML file
Setting Default Description
ojs.refreshPreviewOnSave true Refresh preview (if visible) when OJS document is saved
ojs.showRuntimeValues false Show runtime values as diagnostic info

All comments and suggestions appreciated…

10 Likes

Very cool!

How does it handle the whole concept of reactive cells? Are they automatically detected at the global scope somehow?

Its using the same runtime as ObservableHQ (https://github.com/observablehq/runtime) so works the same way…

Each individual “statement” becomes an individual “cell”.

FWIW this is essentially a refactor of: https://raw.githack.com/hpcc-systems/Visualization/master/demos/storyboard/index.html which means I can now make the “ObservableMD” documents becoming a simple pre-parse on top of the (new) ojs files. (you will see it already has the HTML export working etc.)

1 Like

v0.3.0 now available: https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js

v0.4.0 now available: https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js

This version adds support for “Observable Markdown” (.omd). This file format is essentially regular Markdown, but with Observable JS inside code sections:

For example:

# Generator Test
_Simple Generator test_

```
function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}
```

# Import Test
_Simple Import Test_

```
import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;
```

### Selection:

```json
${JSON.stringify(cars, undefined, 2)}
``` 
2 Likes

I’ve tested it this morning, it’s very nice. Do you think it would be hard to import shared notebooks? (Accessing private notebooks would need a login, so that’s another story).

@Fil Do you mean from a local file:

import {viewof selection as cars} from "./shared/brushable-scatterplot";

Type of thing?

If so it is on my radar…

No I was thinking more "import https://observablehq.com/d/44cf25342beb49cb"

The following should work:

import {dataText} from "44cf25342beb49cb";

dataText;

As does:

import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;

(from above)

Sorry I wasn’t clear. I was trying to “OJS: import notebook” that shared notebook into VS Code.

The following URL imports fine: https://observablehq.com/44cf25342beb49cb?

I suspect I should auto handle the “d” part of the url when there is no “@user” however (you can open an issue if you like)…

EDIT: This has been resolved in v0.4.2

1 Like

v0.4.2 Released: https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js

1 Like

I’m getting this error on VSC Linux when I try to preview via CTRL+K V:

image

Luckily, opening the preview via the menu works just fine, so there is an easy work-around. Plus it auto-updates on save, so after setting up the preview window once the extension still works great!

(also, maybe an “immediately open preview when opening file” setting could be nice?)

@Job - The command is “Ctrl+K, V” and not “Ctrl+K,Ctrl+V” (this should be the same combination that the Markdown preview uses).

So this is kind of weird… I was already typing Ctrl+k, V, and it gave me that error. So then on a whim I tried turning on caps lock to see what that would do, which then gave me this error:

image

… and then when I turned the caps lock off and tried Ctrl+k, V again it didn’t rever to the previous error, but kept showing this one (I wouldn’t be surprised if this is a VSC-on-Linux bug, not something in your code. Keyboard shortcuts have always been a bit wonky there)

1 Like

v0.4.3 Released: https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js

Consolidated the code base with @hpcc-js/observable-md: https://raw.githack.com/hpcc-systems/Visualization/master/demos/storyboard/index.html)

2 Likes

I’m getting that too on a windows machine.
Is there are markdown extensions that I need to also install to get a preview?

I think we worked out it was a VS Code hot key issue (and I am unable to reproduce locally)?

Is the command palette working:

Oh and it only works when a OJS or OMD file is active!

It started working. I installed another extension (Markdown Preview Enhanced
) and when I uninstalled it, the ojs preview started working.

Tried installing the Markdown preview again to see if there was a conflict and the ojs preview still worked.

Thanks for the help and the extension.

The actual Markdown + Preview is one of the default included extensions in VS Code FWIW

1 Like