├── tsconfig.json
├── .npmignore
├── src
├── global.d.ts
├── vendor
│ ├── utils.ts
│ ├── pluginUtils.d.ts
│ ├── tsWorker.d.ts
│ ├── ds
│ │ └── createDesignSystem.d.ts
│ ├── typescript-vfs.d.ts
│ ├── playground.d.ts
│ └── sandbox.d.ts
└── index.ts
├── README.md
├── .gitignore
├── package.json
├── rollup.config.js
├── CONTRIBUTING.md
├── scripts
└── getDTS.js
└── yarn.lock
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "noEmit": true,
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | .gitignore
3 | rollup.config.jss
4 | !dist
5 | scripts
6 | .vscode
7 | yarn*
8 | tsconfig.json
9 | rollup*
10 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | import { Playground } from "./vendor/playground";
2 |
3 | declare global {
4 | interface Window {
5 | playground: Playground;
6 | }
7 | }
8 |
9 | export {};
10 |
--------------------------------------------------------------------------------
/src/vendor/utils.ts:
--------------------------------------------------------------------------------
1 | /** Get a relative URL for something in your dist folder depending on if you're in dev mode or not */
2 | export const requireURL = (path: string) => {
3 | // https://unpkg.com/browse/typescript-playground-presentation-mode@0.0.1/dist/x.js => unpkg/browse/typescript-playground-presentation-mode@0.0.1/dist/x
4 | const isDev = document.location.host.includes('localhost')
5 | const prefix = isDev ? 'local/' : 'unpkg/typescript-playground-presentation-mode/dist/'
6 | return prefix + path
7 | }
8 |
9 | /** Use this to make a few dumb element generation funcs */
10 | export const el = (str: string, el: string, container: Element) => {
11 | const para = document.createElement(el)
12 | para.innerHTML = str
13 | container.appendChild(para)
14 | }
15 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## TypeScript Playground Plugin
2 |
3 | TypeScript Playground plugin to save on format
4 |
5 | ## Features
6 |
7 | - Format code with prettier with CTRL+S
8 | - Customizable prettier config
9 | - Prevents playground link to be copied into clipboard
10 | - Support for prettifying dts output (check the .D.TS panel)
11 |
12 | ## Running this plugin
13 |
14 | - [Click this link](https://www.typescriptlang.org/play?install-plugin=playground-format-on-save) to install
15 |
16 | or
17 |
18 | - Open up the TypeScript Playground
19 | - Go the "Plugins" in the sidebar
20 | - Look for "Plugins from npm"
21 | - Add "[name]"
22 | - Reload the browser
23 |
24 | Then it will show up as a tab in the sidebar.
25 |
26 | ## Contributing
27 |
28 | See [CONTRIBUTING.md](./CONTRIBUTING.md) for the full details, however, TLDR:
29 |
30 | ```sh
31 | git clone ...
32 | yarn install
33 | yarn start
34 | ```
35 |
36 | Then tick the box for starting plugin development inside the TypeScript Playground.
37 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | dist
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground-format-on-save",
3 | "version": "0.1.0",
4 | "main": "dist/index.js",
5 | "description": "TypeScript Playground plugin to save on format",
6 | "license": "MIT",
7 | "keywords": [
8 | "playground-plugin"
9 | ],
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/anuraghazra/playground-format-on-save"
13 | },
14 | "scripts": {
15 | "build": "rollup -c rollup.config.js",
16 | "compile": "tsc",
17 | "bootstrap": "node scripts/getDTS.js",
18 | "watch": "yarn rollup -c rollup.config.js --watch",
19 | "start": "concurrently -p \"[{name}]\" -n \"ROLLUP,SITE\" -c \"bgBlue.bold,bgMagenta.bold\" \"yarn rollup -c rollup.config.js --watch\" \"yarn serve dist -p 5000\"",
20 | "prepublish": "yarn build",
21 | "postinstall": "yarn bootstrap && yarn build"
22 | },
23 | "devDependencies": {
24 | "@rollup/plugin-commonjs": "^21.0.1",
25 | "@rollup/plugin-json": "^4.1.0",
26 | "@rollup/plugin-node-resolve": "^13.1.3",
27 | "@rollup/plugin-typescript": "^8.3.0",
28 | "@types/react": "^16.9.23",
29 | "concurrently": "^7.0.0",
30 | "esbuild": "^0.14.21",
31 | "monaco-editor": "^0.29.1",
32 | "node-fetch": "^2.6.0",
33 | "rollup": "^2.67.2",
34 | "rollup-plugin-esbuild": "^4.8.2",
35 | "serve": "^13.0.2",
36 | "typescript": "latest"
37 | },
38 | "dependencies": {
39 | "chokidar": "^3.5.3",
40 | "prettier": "^3.2.5",
41 | "tslib": "^1.10.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import esbuild from "rollup-plugin-esbuild";
2 | // import typescript from "@rollup/plugin-typescript";
3 | import node from "@rollup/plugin-node-resolve";
4 | import commonjs from "@rollup/plugin-commonjs";
5 | import json from "@rollup/plugin-json";
6 |
7 | // You can have more root bundles by extending this array
8 | const rootFiles = ["index.ts"];
9 |
10 | export default rootFiles.map((name) => {
11 | /** @type { import("rollup").RollupOptions } */
12 | const options = {
13 | input: `src/${name}`,
14 | external: ["typescript"],
15 | output: {
16 | name,
17 | dir: "dist",
18 | format: "amd",
19 | },
20 | plugins: [esbuild({ tsconfig: 'tsconfig.json' }), commonjs(), node(), json()],
21 | }
22 |
23 | return options;
24 | });
25 |
26 | /** Note:
27 | * if you end up wanting to import a dependency which relies on typescript, you will need
28 | * settings which adds these extra options. It will re-use the window.ts for the typescript
29 | * dependency, and I've not figured a way to remove fs and path.
30 | *
31 | const options = {
32 | external: ['typescript', 'fs', 'path'],
33 | output: {
34 | paths: {
35 | "typescript":"typescript-sandbox/index",
36 | "fs":"typescript-sandbox/index",
37 | "path":"typescript-sandbox/index",
38 | },
39 | },
40 | plugins: [typescript({ tsconfig: "tsconfig.json" }), externalGlobals({ typescript: "window.ts" }), commonjs(), node(), json()]
41 | };
42 | *
43 | */
44 |
--------------------------------------------------------------------------------
/src/vendor/pluginUtils.d.ts:
--------------------------------------------------------------------------------
1 | import type React from "react";
2 | /** Creates a set of util functions which is exposed to Plugins to make it easier to build consistent UIs */
3 | export declare const createUtils: (sb: any, react: typeof React) => {
4 | /** Use this to make a few dumb element generation funcs */
5 | el: (str: string, elementType: string, container: Element) => HTMLElement;
6 | /** Get a relative URL for something in your dist folder depending on if you're in dev mode or not */
7 | requireURL: (path: string) => string;
8 | /** The Gatsby copy of React */
9 | react: typeof React;
10 | /**
11 | * The playground plugin design system. Calling any of the functions will append the
12 | * element to the container you pass into the first param, and return the HTMLElement
13 | */
14 | createDesignSystem: (container: Element) => {
15 | container: Element;
16 | clear: () => void;
17 | code: (code: string) => HTMLElement;
18 | title: (title: string) => HTMLElement;
19 | subtitle: (subtitle: string) => HTMLElement;
20 | p: (subtitle: string) => HTMLElement;
21 | showEmptyScreen: (message: string) => HTMLDivElement;
22 | listDiags: (model: import("monaco-editor").editor.ITextModel, diags: import("typescript").DiagnosticRelatedInformation[]) => HTMLUListElement;
23 | clearDeltaDecorators: (force?: true | undefined) => void;
24 | localStorageOption: (setting: import("./ds/createDesignSystem").LocalStorageOption) => HTMLLIElement;
25 | showOptionList: (options: import("./ds/createDesignSystem").LocalStorageOption[], style: import("./ds/createDesignSystem").OptionsListConfig) => void;
26 | createTextInput: (config: {
27 | id: string;
28 | placeholder: string;
29 | onChanged?: ((text: string, input: HTMLInputElement) => void) | undefined;
30 | onEnter: (text: string, input: HTMLInputElement) => void;
31 | value?: string | undefined;
32 | keepValueAcrossReloads?: true | undefined;
33 | isEnabled?: ((input: HTMLInputElement) => boolean) | undefined;
34 | }) => HTMLFormElement;
35 | createASTTree: (node: import("typescript").Node, settings?: {
36 | closedByDefault?: true | undefined;
37 | } | undefined) => HTMLDivElement;
38 | button: (settings: {
39 | label: string;
40 | onclick?: ((ev: MouseEvent) => void) | undefined;
41 | }) => HTMLInputElement;
42 | createTabBar: () => HTMLDivElement;
43 | createTabButton: (text: string) => HTMLButtonElement;
44 | declareRestartRequired: (i?: ((key: string) => string) | undefined) => void;
45 | createSubDesignSystem: () => any;
46 | };
47 | /** Flashes a HTML Element */
48 | flashHTMLElement: (element: HTMLElement) => void;
49 | /** Add a little red button in the top corner of a plugin tab with a number */
50 | setNotifications: (pluginID: string, amount: number) => void;
51 | };
52 | export type PluginUtils = ReturnType;
53 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing to a TypeScript Playground Plugin
2 |
3 | ## Contributing
4 |
5 | You can use `yarn start` to set up both a copy of Rollup to generate the JS, and Serve to host it.
6 |
7 | ```sh
8 | yarn start
9 | ```
10 |
11 | Then set up the TypeScript playground to connect to a dev plugin at `http://localhost:5000/`.
12 |
13 | #### Plugin API
14 |
15 | The plugin API is documented in the [interface PlaygroundPlugin in `./src/index.ts`](src/index.ts).
16 |
17 | Roughly:
18 |
19 | - There are a set of mounting and un-mounting functions which you can use to handle your UI in the sidebar
20 | - There are `modelChanged` methods, which are shortcuts to knowing when the code in monaco editor has changed
21 |
22 | ### Sandbox
23 |
24 | The plugins are passed copies of the TypeScript sandbox, which is a high level API wrapper to the [`monaco-editor`](https://microsoft.github.io/monaco-editor/). You can learn more about the sandbox on [the TypeScript website](http://www.typescriptlang.org/v2/dev/sandbox/).
25 |
26 | #### Rollup
27 |
28 | [Rollup](https://rollupjs.org) is a JavaScript bundler, that will take all of the TypeScript + JavaScript code you reference and then create an AMD bundle for it all. AMD bundles are used in Monaco, TypeScript Sandbox and the Playground - so, this is used for consistency with the rest of the ecosystem.
29 |
30 | ## Adding a dependency
31 |
32 | Because most node_modules expect to be running in node, you might have to do some work to get the dependency working on the web.
33 |
34 | The route to handle this is via rollup:
35 |
36 | - add a new dependency via `yarn add xyz`
37 | - import it into your `index.ts`
38 | - run `yarn build` - did it provide some error messages?
39 | - If it did, you may need to edit your `rollup.config.js`.
40 | - You could probably start by taking the [rollup config from `playground-plugin-tsquery`](https://github.com/orta/playground-plugin-tsquery/blob/master/rollup.config.js) and by adding any extra externals and globals.
41 |
42 | #### Serve
43 |
44 | [Serve](https://github.com/zeit/serve) is used to make a web-server for the dist folder.
45 |
46 | ## Deployment
47 |
48 | This module should be deployed to npm when you would like the world to see it, this may mean making your code handle a staging vs production environment (because the URLs will be different.)
49 |
50 | For example, this is how you can handle getting the URL for a CSS file which is included in your `dist` folder:
51 |
52 | ```ts
53 | const isDev = document.location.host.includes("localhost")
54 | const unpkgURL = "https://unpkg.com/typescript-playground-presentation-mode@latest/dist/slideshow.css"
55 | const cssHref = isDev ? "http://localhost:5000/slideshow.css" : unpkgURL
56 | ```
57 |
58 | ### Post-Deploy
59 |
60 | Once this is deployed, you can test it on the TypeScript playground by passing in the name of your plugin on npm to the custom plugin box. This is effectively your staging environment.
61 |
62 | Once you're happy and it's polished, you can apply to have it in the default plugin list.
63 |
64 | ## Support
65 |
66 | Ask questions either on the TypeScript Website issues](https://github.com/microsoft/TypeScript-Website/issues), or in the [TypeScript Community Discord](https://discord.gg/typescript) - in the TypeScript Website channel.
67 |
--------------------------------------------------------------------------------
/src/vendor/tsWorker.d.ts:
--------------------------------------------------------------------------------
1 | import ts from "typescript";
2 | export declare class TypeScriptWorker implements ts.LanguageServiceHost {
3 | private _ctx;
4 | private _extraLibs;
5 | private _languageService;
6 | private _compilerOptions;
7 | constructor(ctx: any, createData: any);
8 | getCompilationSettings(): ts.CompilerOptions;
9 | getScriptFileNames(): string[];
10 | private _getModel;
11 | getScriptVersion(fileName: string): string;
12 | getScriptSnapshot(fileName: string): ts.IScriptSnapshot | undefined;
13 | getScriptKind?(fileName: string): ts.ScriptKind;
14 | getCurrentDirectory(): string;
15 | getDefaultLibFileName(options: ts.CompilerOptions): string;
16 | isDefaultLibFileName(fileName: string): boolean;
17 | private static clearFiles;
18 | getSyntacticDiagnostics(fileName: string): Promise;
19 | getSemanticDiagnostics(fileName: string): Promise;
20 | getSuggestionDiagnostics(fileName: string): Promise;
21 | getCompilerOptionsDiagnostics(fileName: string): Promise;
22 | getCompletionsAtPosition(fileName: string, position: number): Promise;
23 | getCompletionEntryDetails(fileName: string, position: number, entry: string): Promise;
24 | getSignatureHelpItems(fileName: string, position: number): Promise;
25 | getQuickInfoAtPosition(fileName: string, position: number): Promise;
26 | getOccurrencesAtPosition(fileName: string, position: number): Promise | undefined>;
27 | getDefinitionAtPosition(fileName: string, position: number): Promise | undefined>;
28 | getReferencesAtPosition(fileName: string, position: number): Promise;
29 | getNavigationBarItems(fileName: string): Promise;
30 | getFormattingEditsForDocument(fileName: string, options: ts.FormatCodeOptions): Promise;
31 | getFormattingEditsForRange(fileName: string, start: number, end: number, options: ts.FormatCodeOptions): Promise;
32 | getFormattingEditsAfterKeystroke(fileName: string, position: number, ch: string, options: ts.FormatCodeOptions): Promise;
33 | findRenameLocations(fileName: string, position: number, findInStrings: boolean, findInComments: boolean, providePrefixAndSuffixTextForRename: boolean): Promise;
34 | getRenameInfo(fileName: string, position: number, options: ts.RenameInfoOptions): Promise;
35 | getEmitOutput(fileName: string): Promise;
36 | getCodeFixesAtPosition(fileName: string, start: number, end: number, errorCodes: number[], formatOptions: ts.FormatCodeOptions): Promise>;
37 | updateExtraLibs(extraLibs: IExtraLibs): void;
38 | readFile(path: string, encoding?: string | undefined): string | undefined;
39 | fileExists(path: string): boolean;
40 | }
41 | export interface IExtraLib {
42 | content: string;
43 | version: number;
44 | }
45 | export interface IExtraLibs {
46 | [path: string]: IExtraLib;
47 | }
48 |
--------------------------------------------------------------------------------
/scripts/getDTS.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | // Grab the DTS files from the TypeScript website
4 | // then do a bit of string manipulation in order to make it
5 | // compile without _all_ of the dependencies
6 |
7 | const nodeFetch = require("node-fetch").default
8 | const { writeFileSync, existsSync, mkdirSync } = require("fs")
9 | const { join } = require("path")
10 |
11 | const getFileAndStoreLocally = async (url, path, editFunc) => {
12 | const editingFunc = editFunc ? editFunc : text => text
13 | const packageJSON = await nodeFetch(url)
14 | const contents = await packageJSON.text()
15 | writeFileSync(join(__dirname, "..", path), editingFunc(contents), "utf8")
16 | }
17 |
18 | const go = async () => {
19 | const vendor = join("src", "vendor")
20 | const ds = join("src", "vendor", "ds")
21 |
22 | if (!existsSync(vendor)) mkdirSync(vendor)
23 | if (!existsSync(ds)) mkdirSync(ds)
24 |
25 | const host = "https://www.staging-typescript.org"
26 |
27 | // For playground-dev purposes
28 | // const host = "http://localhost:8000";
29 |
30 | // The API for the monaco typescript worker
31 | await getFileAndStoreLocally(host + "/js/sandbox/tsWorker.d.ts", join(vendor, "tsWorker.d.ts"))
32 |
33 | // The Design System DTS
34 | await getFileAndStoreLocally(
35 | host + "/js/playground/ds/createDesignSystem.d.ts",
36 | join(ds, "createDesignSystem.d.ts"),
37 | text => {
38 | const renameImport = text.replace("typescriptlang-org/static/js/sandbox", "../sandbox")
39 | return renameImport
40 | }
41 | )
42 |
43 | // Util funcs
44 | await getFileAndStoreLocally(host + "/js/playground/pluginUtils.d.ts", join(vendor, "pluginUtils.d.ts"), text => {
45 | const renameImport = text.replace('from "@typescript/sandbox"', 'from "./sandbox"')
46 | return renameImport
47 | })
48 |
49 | // TS-VFS
50 | await getFileAndStoreLocally(
51 | host + "/js/sandbox/vendor/typescript-vfs.d.ts",
52 | join(vendor, "typescript-vfs.d.ts"),
53 | text => {
54 | const removeImports = text.replace('/// ', "")
55 | const removedLZ = removeImports.replace('import("lz-string").LZStringStatic', "any")
56 | return removedLZ
57 | }
58 | )
59 |
60 | // Sandbox
61 | await getFileAndStoreLocally(host + "/js/sandbox/index.d.ts", join(vendor, "sandbox.d.ts"), text => {
62 | const removeImports = text.replace(/^import/g, "// import").replace(/\nimport/g, "\n// import")
63 | const replaceTSVFS = removeImports.replace(
64 | '// import * as tsvfs from "./vendor/typescript-vfs"',
65 | "\nimport * as tsvfs from './typescript-vfs'"
66 | )
67 | const removedLZ = replaceTSVFS.replace("lzstring: typeof lzstring", "// lzstring: typeof lzstring")
68 | const addedTsWorkerImport = 'import { TypeScriptWorker } from "./tsWorker";' + removedLZ
69 | return addedTsWorkerImport
70 | })
71 |
72 | // Playground
73 | await getFileAndStoreLocally(host + "/js/playground/index.d.ts", join(vendor, "/playground.d.ts"), text => {
74 | const replaceSandbox = text.replace('"@typescript/sandbox"', '"./sandbox"')
75 | const replaceTSVFS = replaceSandbox.replace(
76 | /typescriptlang-org\/static\/js\/sandbox\/vendor\/typescript-vfs/g,
77 | "./typescript-vfs"
78 | )
79 | const removedLZ = replaceTSVFS.replace("lzstring: typeof", "// lzstring: typeof")
80 | const removedWorker = removedLZ.replace("getWorkerProcess", "// getWorkerProcess")
81 | const removedUI = removedWorker.replace("ui:", "// ui:")
82 | return removedUI
83 | })
84 | }
85 |
86 | go()
87 |
--------------------------------------------------------------------------------
/src/vendor/ds/createDesignSystem.d.ts:
--------------------------------------------------------------------------------
1 | import type { Sandbox } from "@typescript/sandbox";
2 | import type { DiagnosticRelatedInformation, Node } from "typescript";
3 | export type LocalStorageOption = {
4 | blurb: string;
5 | flag: string;
6 | display: string;
7 | emptyImpliesEnabled?: true;
8 | oneline?: true;
9 | requireRestart?: true;
10 | onchange?: (newValue: boolean) => void;
11 | };
12 | export type OptionsListConfig = {
13 | style: "separated" | "rows";
14 | requireRestart?: true;
15 | };
16 | export type DesignSystem = ReturnType>;
17 | export declare const createDesignSystem: (sandbox: Sandbox) => (container: Element) => {
18 | /** The element of the design system */
19 | container: Element;
20 | /** Clear the sidebar */
21 | clear: () => void;
22 | /** Present code in a pre > code */
23 | code: (code: string) => HTMLElement;
24 | /** Ideally only use this once, and maybe even prefer using subtitles everywhere */
25 | title: (title: string) => HTMLElement;
26 | /** Used to denote sections, give info etc */
27 | subtitle: (subtitle: string) => HTMLElement;
28 | /** Used to show a paragraph */
29 | p: (subtitle: string) => HTMLElement;
30 | /** When you can't do something, or have nothing to show */
31 | showEmptyScreen: (message: string) => HTMLDivElement;
32 | /**
33 | * Shows a list of hoverable, and selectable items (errors, highlights etc) which have code representation.
34 | * The type is quite small, so it should be very feasible for you to massage other data to fit into this function
35 | */
36 | listDiags: (model: import("monaco-editor").editor.ITextModel, diags: DiagnosticRelatedInformation[]) => HTMLUListElement;
37 | /** Lets you remove the hovers from listDiags etc */
38 | clearDeltaDecorators: (force?: true) => void;
39 | /** Shows a single option in local storage (adds an li to the container BTW) */
40 | localStorageOption: (setting: LocalStorageOption) => HTMLLIElement;
41 | /** Uses localStorageOption to create a list of options */
42 | showOptionList: (options: LocalStorageOption[], style: OptionsListConfig) => void;
43 | /** Shows a full-width text input */
44 | createTextInput: (config: {
45 | id: string;
46 | placeholder: string;
47 | onChanged?: ((text: string, input: HTMLInputElement) => void) | undefined;
48 | onEnter: (text: string, input: HTMLInputElement) => void;
49 | value?: string | undefined;
50 | keepValueAcrossReloads?: true | undefined;
51 | isEnabled?: ((input: HTMLInputElement) => boolean) | undefined;
52 | }) => HTMLFormElement;
53 | /** Renders an AST tree */
54 | createASTTree: (node: Node, settings?: {
55 | closedByDefault?: true;
56 | }) => HTMLDivElement;
57 | /** Creates an input button */
58 | button: (settings: {
59 | label: string;
60 | onclick?: ((ev: MouseEvent) => void) | undefined;
61 | }) => HTMLInputElement;
62 | /** Used to re-create a UI like the tab bar at the top of the plugins section */
63 | createTabBar: () => HTMLDivElement;
64 | /** Used with createTabBar to add buttons */
65 | createTabButton: (text: string) => HTMLButtonElement;
66 | /** A general "restart your browser" message */
67 | declareRestartRequired: (i?: ((key: string) => string) | undefined) => void;
68 | /** Create a new Design System instance and add it to the container. You'll need to cast
69 | * this after usage, because otherwise the type-system circularly references itself
70 | */
71 | createSubDesignSystem: () => any;
72 | };
73 |
--------------------------------------------------------------------------------
/src/vendor/typescript-vfs.d.ts:
--------------------------------------------------------------------------------
1 | type System = import("typescript").System;
2 | type CompilerOptions = import("typescript").CompilerOptions;
3 | type CustomTransformers = import("typescript").CustomTransformers;
4 | type LanguageServiceHost = import("typescript").LanguageServiceHost;
5 | type CompilerHost = import("typescript").CompilerHost;
6 | type SourceFile = import("typescript").SourceFile;
7 | type TS = typeof import("typescript");
8 | export interface VirtualTypeScriptEnvironment {
9 | sys: System;
10 | languageService: import("typescript").LanguageService;
11 | getSourceFile: (fileName: string) => import("typescript").SourceFile | undefined;
12 | createFile: (fileName: string, content: string) => void;
13 | updateFile: (fileName: string, content: string, replaceTextSpan?: import("typescript").TextSpan) => void;
14 | }
15 | /**
16 | * Makes a virtual copy of the TypeScript environment. This is the main API you want to be using with
17 | * @typescript/vfs. A lot of the other exposed functions are used by this function to get set up.
18 | *
19 | * @param sys an object which conforms to the TS Sys (a shim over read/write access to the fs)
20 | * @param rootFiles a list of files which are considered inside the project
21 | * @param ts a copy pf the TypeScript module
22 | * @param compilerOptions the options for this compiler run
23 | * @param customTransformers custom transformers for this compiler run
24 | */
25 | export declare function createVirtualTypeScriptEnvironment(sys: System, rootFiles: string[], ts: TS, compilerOptions?: CompilerOptions, customTransformers?: CustomTransformers): VirtualTypeScriptEnvironment;
26 | /**
27 | * Grab the list of lib files for a particular target, will return a bit more than necessary (by including
28 | * the dom) but that's OK, we're really working with the constraint that you can't get a list of files
29 | * when running in a browser.
30 | *
31 | * @param target The compiler settings target baseline
32 | * @param ts A copy of the TypeScript module
33 | */
34 | export declare const knownLibFilesForCompilerOptions: (compilerOptions: CompilerOptions, ts: TS) => string[];
35 | /**
36 | * Sets up a Map with lib contents by grabbing the necessary files from
37 | * the local copy of typescript via the file system.
38 | *
39 | * The first two args are un-used, but kept around so as to not cause a
40 | * semver major bump for no gain to module users.
41 | */
42 | export declare const createDefaultMapFromNodeModules: (_compilerOptions: CompilerOptions, _ts?: typeof import("typescript"), tsLibDirectory?: string) => Map;
43 | /**
44 | * Adds recursively files from the FS into the map based on the folder
45 | */
46 | export declare const addAllFilesFromFolder: (map: Map, workingDir: string) => void;
47 | /** Adds all files from node_modules/@types into the FS Map */
48 | export declare const addFilesForTypesIntoFolder: (map: Map) => void;
49 | /**
50 | * Create a virtual FS Map with the lib files from a particular TypeScript
51 | * version based on the target, Always includes dom ATM.
52 | *
53 | * @param options The compiler target, which dictates the libs to set up
54 | * @param version the versions of TypeScript which are supported
55 | * @param cache should the values be stored in local storage
56 | * @param ts a copy of the typescript import
57 | * @param lzstring an optional copy of the lz-string import
58 | * @param fetcher an optional replacement for the global fetch function (tests mainly)
59 | * @param storer an optional replacement for the localStorage global (tests mainly)
60 | */
61 | export declare const createDefaultMapFromCDN: (options: CompilerOptions, version: string, cache: boolean, ts: TS, lzstring?: typeof import("lz-string"), fetcher?: typeof fetch, storer?: typeof localStorage) => Promise