The avatar for @gordonsmith
Gordon Smith
Public
Edited
Nov 22, 2022
Fork of Bringing the TypeScript Language Server to Observable
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vfs = import("https://cdn.jsdelivr.net/npm/@typescript/vfs@1.4.0/+esm")
Insert cell
ts = (await import("https://cdn.jsdelivr.net/npm/typescript@4.8.4/+esm")).default
Insert cell
Insert cell
tsEnv = {
const {createSystem, createVirtualTypeScriptEnvironment, createDefaultMapFromCDN} = vfs;
const fsMap = await createDefaultMapFromCDN({target: ts.ScriptTarget.ES2021}, ts.version, true, ts);
const system = createSystem(fsMap);
const tsEnv = createVirtualTypeScriptEnvironment(system, [], ts, {allowJs: true});
tsEnv.createFile("/index.js", " "); // This is where our code will go. Note: can’t be empty 😅
return tsEnv;
}
Insert cell
Insert cell
completions = {
tsEnv.updateFile("/index.js", editor1.code || " ");
return tsEnv.languageService.getCompletionsAtPosition("/index.js", editor1.offset, {});
}
Insert cell
Insert cell
Insert cell
Insert cell
help = {
tsEnv.updateFile("/index.js", editor2.code || " ");
return tsEnv.languageService.getSignatureHelpItems("/index.js", editor2.offset, {});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more