donjayamanne / typescript-notebook

Run JavaScript and TypeScript in node.js within VS Code notebooks with excellent support for debugging, tensorflowjs visulizations, plotly, danfojs, etc

Node.js Notebooks

Features

• Enhanced REPL experience for Node.js in Notebooks (with top level awaits)
• Run & debug JavaScript, TypeScript code in node.js
• Built in support for typescript (ships with TypeScript & ts-node).
• Built in support for plotly (plotly.js is shipped with the extension)
• Rich (inline visualizations) using @tensorflow/tfjs-vis & Tensorboards
• Excellent support for danfo.js (rich HTML output and plots)
• Excellent support for arquero (rich HTML output)
• Run shell scripts within the notebook cell.
• Quickly prototype and view HTML/JavaScript/CSS output
• Support for user input using readline

Packages such plotly, tfjs-vis & danfo.js support rich visualization only in the browser, however, this extension leverages the power of Notebooks to provide the same rich visualizations when targeting node.js.

Use the command Open a sample node.js notebook to open a sample notebook to get started with plotly.js, danfo.js, tensorflow.js, etc.

Getting started

• For a REPL experience use the command Open Node.js REPL
  • Consider installing the Jupyter extension for an enhance user interface (toolbars).
• For a notebook experience, create a file with the extension *.nnb, e.g. sample.nnb
  • Or use the menu item New File... to create a Node.js notebook

Examples

• Use the command Open a sample node.js notebook to open a sample notebook.
• Use the command Welcome: Open Walkthrough... to checkout the samples.

Requirements

• node.js >= 12
• node.js needs to be in the current path

Roadmap

• Open a plain js/ts file as a notebook & vice versa.
• Better renderers for tabular data (arquero, danfo.js, etc)
• Vega plots without having to install vega
• Custom node arguments

Known issues, workarounds and technical details

• See here for more details

Thanks

Thanks to the various packages we provide integrations with which help make this extension useful:

• ts-node
• Tensorflow.js
• plotly
• danfo.js
• node-pty
• arquero

typescript-notebook's Issues

Add support for arquero

https://github.com/uwdata/arquero

Javascript/Typescript not compiling / Stuck at pending

I was excited to start using this but I can't get anything javascript/typescript to compile.

No errors pops up, it's just stuck at Pending. I have tried installing the Node REPL extension in vscode but that didn't help.

I have typescript installed globally

• Typescript version: 4.4.4
• Node version: 12.20.0
• npm version: 6.14.8

If I switch the compiler to HTML everything is rendered.

Add support for observablehq/plot

https://github.com/observablehq/plot

Unused imports are not available in subsequent cells

Cell 1:
import * as fs from 'fs'
Cell 2:
console.log(fs === undefined)

Problem - Typescript drops unused imports

Relative imports work during execution but not when editing

In a typescript notebook cell, if I have code like:

import { main } from './my-module';
main();

Where my-module.ts is a sibling file to the notebook, typescript is unable to resolve the module at edit time. Executing the cell works fine.

For some reason, something like this works at edit-time, but fails obviously at evaluation:

import { main } from '../../../../../../my-module';
main();

I don't remember the exact number of ../s required, but typescript seems to think the "current" module is deeply nested in the workspace somewhere.

Error on console.log

zlicvsKkK4.mp4

Typescript code not recognized since v2

This is a bug.

Since v2 (and creating .nnb instead of .ipynb), all type annotations are displaying an error:

It executes correctly though.

JSON and vars issues

Great extension. However, I ran into a few issues with it.

1. I can't use JSON.parse to parse json data. I get an error that JSON is not found.
2. Cell vars are local? I get an error for the csvString var in my test notebook, even tho I can see csv data ouput:

see this ticket in my data table renderer repo for more info: RandomFractals/vscode-data-table#27

Can't connect to TypeScript kernel on Windows

I installed the extension, wrote a console.log in a blank notebook, and ran it. It will show a progress notification and eventually ends with:

Tried this on both VS Code Stable and Insiders. And I said No to the prompt about installing Python.

Error: Cannot find module 'arquero'

Hi, this is an awesome extension. I tried the new release 2.02. However, an error message popped when I tried to import 'arquero'

Error: Cannot find module 'arquero'
Require stack:
- <repl>
node:internal/modules/cjs/loader:936
  throw err;
  ^

    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.b._load (/Users/integrator/.vscode/extensions/donjayamanne.typescript-notebook-2.0.2/out/extension/server/index.js:2:115314)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at <Cell 1> [1, 66]
    at Script.runInContext (node:vm:139:12)
    at Script.runInNewContext (node:vm:144:17)
    at Object.runInNewContext (node:vm:298:38)
    at x (/Users/integrator/.vscode/extensions/donjayamanne.typescript-notebook-2.0.2/out/extension/server/index.js:2:113287)

Danfo.js plotting support for latest version

Hi @DonJayamanne

Thanks once again for supporting Danfo.js in the Nodejs notebook. It works very well for Danfojs v0.2.7

Sadly, plotting does not work for the latest version (v0.3.3). I am curious as to how you're supporting plotting directly from the danfojs-node, as we did not package it with Plotly features.

Did you write a custom renderer for this? And if yes, how do we support the latest version of Danfojs.

If there's any way I can be of help, do let me know.

Cheers, and great work!

"Unexpected pending rebuildTimer" when re-installing node_modules

My vscode is setup to work with the local version of typescript (from ./node_modules). Whenever I start a yarn install from the root folder of my workspace, I get a Unexpected pending rebuildTimer error when running a cell.

Gather still showing up

Gather icon still showing up in the cell toolbar for TypeScript notebook.
I can't get the kernel to connect or run, but potentially user issues when user tries to click Gather.

Debugging should work event if a source cell has been deleted

If we have 2 cells and the first cell has been deleted or altered, then we should open a separate editor and let the user debug there

Launch separate editor when:

• If the source cell doesn't exist
• If the source cell (version) has changed (ie. user changed the code)

Add Variable Explorer Functionality

Would be awesome to add variable explorer :)

Remove Tensorflow from activity bar

I'm excited to try your TS notebook support! But the most recent update added an icon to my already cluttered sidebar.

I understand it's only a couple clicks to hide it. But the sidebar is usually reserved for cross-functional features like explorers or source control. It was also tricky to track down which extension contributed Tensorflow. I found it in settings but there's no visual cue and I have no ML extensions installed.

I propose moving Tensorflow to a panel with a more contextual name 🙏🏼

Support for observable notebooks

Plan is to add this in the next release
Provides rich visualizations

Use a rich table visulization package for danfo, arquero & other tables

Plain html tables are too boring.

Code completion ?

Hi ! Very nice to you to bring this in vscode :)

However, autocompletion stops working when you import local node_modules, or local files:

• path.cwd() is correct
• Path completion seems to think I am in %localappdata% (see screenshot)
• Imports are not typed (therefore losing a bit of Typescript developper friendliness)
• ... but it runs.

I'm not sure wether if this is an issue with your extension, or with tslabs, nor if it can be fixed

Thanks !

When using Danfo and querying a DataFrame, it no longer formats the result.

I'm using Danfo to load, query, and display data. When I load a new DataFrame, it displays correctly. However, once I query the DataFrame in any way (such as sorting or selecting specific columns) the DataFrame no longer displays. See the following screen snip.

If I dump the DataFrame into json, and reload it, it displays again.

Not sure if I'm doing something wrong, would appreciate any help.

Thanks! Really enjoying this notebook feature!

Support top level awaits

• Variables must be available in subsequent cells
• Support class/function hoisting

Support existing renderers when rendering plotly, vega and other output

E.g. rely on Jupyter notebook renderer to render plotly.
Improve portability of notebooks.

node-pty doesn't work on windows

It seems to be just using node to run shell scripts.

Issue with Images

Type inference issues

I ran into some weird type inference issues when using this extension:

VS Code infers the type correctly as number, not unknown or 1 as the error suggests:

The code itself compiles correctly when running it through the TS compiler directly. So at first, I thought that this may be an tslab issue. However, when executing the same script it in Jupyter, it runs without issues:

Any idea what might cause this? 🤔

Unable to run TS code

Suddenly I'm unable to run TS code in Notebooks even though I was able to in the past. I see this:

It seems like it's stuck on using python even though I set the kernel to be TS:

The logs from TS Notebook:

Native Notebook already setup
Native Notebook Editor already setup
Kernels directory exists '/Users/tanha/Library/Jupyter/kernels'
KernelSpec already exists /Users/tanha/Library/Jupyter/kernels/typescript/kernel.json
tslab --version, stdout: tslab 1.0.15, stderr: 
tslab is already installed

Logs from TS:

[Info  - 16:16:51.218] Starting TS Server 
[Info  - 16:16:51.218] Using tsserver from: /Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js
[Info  - 16:16:51.218] <syntax> Forking...
[Info  - 16:16:51.220] <syntax> Starting...
[Info  - 16:16:51.236] <semantic> Forking...
[Info  - 16:16:51.238] <semantic> Starting...

why jupyter notebook extension need install python extension

I want to install jupyter notebook extension to support tool bar, but It require to install python extension. I don't write python, so I don't want to install python extension. Any idea about it?

Any plans for es6?

Hi,

Love the concept, but the lack of es6 support makes it practically unusable.

Any plans to implement it, either via babel or ...?

Thanks

Ignore top level keyword `export`

Just as we ignore const we should ignore export

Readline (user input) usage

Hello!

First of all, I'd like to thank you a lot for this awesome project.
I've been waiting for years for a tool like Jupyter in Visual Studio Code for Node development.

Could you provide an example of how to get the user input?
I tried different ways to use readline without any success.

Other question. Is there a way to input a file?
I was thinking of using HTML but could not find a way to communicate between the JavaScript from HTML cells and the the JavasScript from the notebook.

Publish platform specific extension

Shipping of node-pty per OS will have to be done using the new platform specific extensions

Support interactive window experience (REPL) for node.js

Ensure value of last expression is displayed in output

Take the following code:

var abc = 1234;
abc

The value of abc must be printed out.

Code in REPL and notebooks not running, stuck at working

nodejs_notebook_not_working.mp4

Above video explains what's happening, code in notebook cells and REPL is just not executing at all

Notebook doesn't output as expected

Did I miss a config step or stumble across an incompatibility of some sort?

REPL and example notebooks behave the same.

I installed the extension and the MS Jupyter extension and followed the Getting Started.

Cell interrupts

Unfortunately this will not be possible, node.js doesn't support this.
The only way to stop any current execution is to restart the kernel.

notebook not working with wsl2 Integration

I was trying to use Node.js Notebook with my normal vscode setup.

I use vscode with an WSL2 Integration. Node is installed inside wsl and Windows itself.

Trying to use the notebook with a wsl Integration enabled results in following behaviour:

It stays pending and never resolves the status. Doing the same under a "native" vscode instance works fine.

WSL: Ubuntu
Node version: 16.10.0 (WSL) / 16.13.0 (Windows)

Star activation causes a slew of activations

Because of

typescript-notebook/package.json

Lines 45 to 46 in 0daecb6

	"activationEvents": [
	"*",

when you open a new empty VS Code window - no open folder and no open files - the Jupyter extension activates which in turn activates the Python extension.

Support plain text *.js & *.ts files for opening notebooks

I.e. use plain text files as backing store.

Cannot connect to kernel on Ubuntu [Solved]

I solved the issue but I will share here just to let you know.
I couldn't run a cell after changing its language to Typescript. The logs of Jupyter was like this:

Error 2021-08-09 13:47:39: Failed to execute cells in CellExecutionQueue c [Error]: Kernel  is not usable. Check the Jupyter output tab for more information.
    at r (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/extension.js:24:124325)
    at i (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/extension.js:24:124455)
    at o (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:1:57940)
    at Object.e.emit (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:1:57654)
    at e.emit (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:1:55891)
    at c.dispose (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:3:540979)
    at /home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:3:545415
    at Object.t.each (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:1:63059)
    at m (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:3:545331)
    at /home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:3:544210
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at t.SessionManager.requestRunning (/home/sahin/.vscode/extensions/ms-toolsai.jupyter-2021.8.1195043623/out/client/node_modules/@jupyterlab/services.js:3:537701) {
  category: 'invalidkernel',
  kernelConnectionMetadata: {
    kernelModel: {
      _createSocket: [Function (anonymous)],
      _onWSOpen: [Function (anonymous)],
      _onWSMessage: [Function (anonymous)],
      _onWSClose: [Function (anonymous)],
      _id: '815b79b7-0955-4497-a926-6a073e83c673',
      _name: 'javascript',
      _status: 'dead',
      _kernelSession: '',
      _clientId: 'abf47e06-1521-4ab1-ba38-fbfb3c85e4ef',
      _isDisposed: true,
      _wsStopped: true,
      _ws: null,
      _username: '',
      _reconnectLimit: 7,
      _reconnectAttempt: 0,
      _isReady: false,
      _readyPromise: [e],
      _initialized: false,
      _futures: Map(0) {},
      _comms: Map(0) {},
      _targetRegistry: [Object: null prototype] {},
      _info: null,
      _pendingMessages: [],
      _statusChanged: [e],
      _iopubMessage: [e],
      _anyMessage: [e],
      _unhandledMessage: [e],
      _displayIdToParentIds: Map(0) {},
      _msgIdToDisplayIds: Map(0) {},
      _terminated: [e],
      _msgChain: null,
      _noOp: [Function (anonymous)],
      serverSettings: [Object],
      handleComms: true,
      lastActivityTime: 2021-08-09T10:47:39.533Z,
      numberOfConnections: 0,
      session: [Object]
    },
    kind: 'connectToLiveKernel',
    id: undefined
  },
  vslsStack: [
    CallSite {}, CallSite {},
    CallSite {}, CallSite {},
    CallSite {}, CallSite {},
    CallSite {}, CallSite {},
    CallSite {}, CallSite {},
    CallSite {}, CallSite {},
    CallSite {}
  ]
}
Info 2021-08-09 13:47:39: Cancel pending cells
Info 2021-08-09 13:47:39: Cell Index:0, state:2, exec: undefined. Execution cancelled
Info 2021-08-09 13:47:39: Cell Index:0, state:2, exec: undefined. Completed due to cancellation
Info 2021-08-09 13:47:39: Cell Index:0, state:2, exec: undefined. Cell cancelled & resolving
Info 2021-08-09 13:47:39: Cell Index:0, state:2, exec: undefined. Execution disposed
Info 2021-08-09 13:47:39: Process Execution: > /usr/bin/python3 -m vscode_datascience_helpers.daemon --daemon-module=vscode_datascience_helpers.jupyter_daemon -v
> /usr/bin/python3 -m vscode_datascience_helpers.daemon --daemon-module=vscode_datascience_helpers.jupyter_daemon -v
Info 2021-08-09 13:47:39: Process Execution: > /usr/bin/python3 -m vscode_datascience_helpers.daemon --daemon-module=vscode_datascience_helpers.jupyter_daemon -v
> /usr/bin/python3 -m vscode_datascience_helpers.daemon --daemon-module=vscode_datascience_helpers.jupyter_daemon -v

I tried to run Typescript on a blank Jupyter-notebook, on the browser, and I realized that it wasn't working there either.
So I decided to install tslab from https://github.com/yunabe/tslab#installing-tslab-1

For a fast installation you can copy paste:

npm install -g tslab
tslab install --version # see if it is installed
tslab install --python=python3 # register with python3
jupyter kernelspec list # see if typescript exists

After installing tslab, the jupyter with typescript on vs code worked. Thanks

Ensure local variables are displayed correctly when debugging cells with top level awaits

Currently when debugging cells without any top level awaits, we see local variables.
However with top level awaits no such scope (because of the IIFE).

Solutions:

• Keep track of the new global variables & display them as locals
  I.e. any variable created after running cells are now considered locals
  • Always wrap cells with IIFE (consistency)

Export to PDF

Great extension! 😊

I was hoping for a way to export a notebook to PDF similar to Jupyter: Export to PDF.

Even after installing the Jupyter-Extension there is no command for exporting PDFs for nnb-Files.

Could you add this functionality?

All the best.

TSError: ⨯ Unable to compile TypeScript:

I got this error when trying to import my code:

TSError: ⨯ Unable to compile TypeScript:
signal.ts(8,28): error TS2583: Cannot find name 'Promise'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.
signal.ts(10,18): error TS2552: Cannot find name 'Date'. Did you mean 'date'?
signal.ts(24,20): error TS2304: Cannot find name 'Date'.
c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\dist\index.js:289
            throw error;
            ^

    at createTSError (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\src\index.ts:692:12)
    at reportTSError (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\src\index.ts:696:19)
    at getOutput (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\src\index.ts:883:36)
    at Object.compile (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\src\index.ts:1185:30)
    at Module.m._compile (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\src\index.ts:1309:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Object.require.extensions.<computed> [as .ts] (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\resources\scripts\node_modules\ts-node\src\index.ts:1313:12)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Function._._load (c:\Users\Khanh\.vscode\extensions\donjayamanne.typescript-notebook-2.0.3\out\extension\server\index.js:2:115324)

Any suggestion to fix it would be appreciated

Generic function returns `false` rather than an object

I've declared a generic function in a TypeScript file:

export function create<T>(template: T): Wrapper<T> {
    return new Wrapper<T>(template);
}

When I call the function from a Notebook, the answer is the boolean false.

const template: Product = {}
const product = create<Product>(template)
product

false

If I remove the explicit generic and allow the type to be inferred, an object is returned.

const template: Product = {}
const product = create(template)
product

Wrapper {}

Repro attached:

Repro.zip

First line of error stack is not presented

For some reason the first line of any error thrown in a cell is trimmed.
i assume there is some sort of cleanup going on to remove internal frames, but the first line with the message should always be shown.

to reproduce simply throw an error in a code cell in a notebook (see pic).

Version & OS Info

Version: 1.64.2
Commit: f80445acd5a3dadef24aa209168452a3d97cc326
Date: 2022-02-09T22:00:58.347Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.2.0

Fix ordering of execution result & console output

Sample code:

var abc = 1234;
console.log('Hello World');
abc

The output should be:

Hello World
1234

But sometimes we get

1234
Hello World

Solutions:

• Solution 1:
  • Once execution has been completed, write to console with special GUID console.log(GUID)
  • Then send execution result
  • At extension end, wait for GUID before we add the execution result

ECMAScript module support?

Does this support the new-style ES modules? (ie. "type": "module" in package.json etc.)

I have a Node.js TypeScript project that compiles to native ES modules (recently migrated, due to depending on some other libraries that are now only shipped as ES modules), and I can't seem to be able to import any of the project's modules in a notebook (inside that project), whichever way I try.

Add Vega and Vega-Lite charts support

@DonJayamanne I noticed you have Vega plots on your roadmap: https://github.com/DonJayamanne/typescript-notebook#roadmap

Not sure you've seen it, but some time ago I created Vega Viewer vscode extension to load and render preview of Vega and Vega-Lite charts in vscode: https://github.com/RandomFractals/vscode-vega-viewer

That extension has a few integrations with online Vega Editor too and ships with built-in examples.

My extension is somewhat outdated, but I think you can peruse it for Vega and Vega-Lite chart rendering, theming, and data loading setup.

See: https://github.com/RandomFractals/vscode-vega-viewer/blob/master/web/scripts/vega-viewer.js

and Vega Viewer/Preview panel code here: https://github.com/RandomFractals/vscode-vega-viewer/blob/master/src/vega.preview.ts

Add support for better language server (concatenated notebook documents)

Custom TypeScript language and language service extension for better DX

Hey there! Super into this project!

Bear in mind, i may be missing crucial bits of information to this project as i'm new to it, and what i've done may not be the most ideal.

I noticed a few quirks within TypeScript cells, such as top level awaits showing up as errors (for a few possible reasons such as requiring "module": "ESNext"), and that TypeScript doesn't know about variables shared between cells.

I've been playing around with making this work, and had a bit of sucess with shipping a new language and language service extension (cloned from the existing typescript extensions), as this allowed me to change one tiny detail:

which made top level awaits work (if you import something):

I'm completely aware that this may be a drastic change (shipping a new language) however i'm hoping that it just becomes a matter of importing and augmenting the existing extensions rather than shipping 99% of the same code...if that makes any sense?

My question is: would you accept this kind of contribution given it was designed well?

Also, some background: i'm also trying to solve the same issue for a similar side project https://dmisdm.github.io/ts-notebook/

I haven't yet thought of a cleaner way to solve these issues, and i'm not 100% a new language is the best way.
E.g. i also thought a lot could be done using a custom "typescript.tsdk" (VSCode config), similar to what @yarnpkg/pnpify does (it augments typescript/lib/tsserver.js to support loading definitions in a PnP environment), however this has it's drawbacks too.