Merge pull request #7 from electron/type-definitions

Add TypeScript definitions for Electron

src/renderer/app.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render } from 'react-dom';
 import * as loader from 'monaco-loader';
 import { observable } from 'mobx';
+import * as MonacoType from 'monaco-editor';
 
 import { mainTheme } from './themes';
 import { getContent } from './content';
@@ -31,8 +32,9 @@ class App {
  renderer: null,
  html: null
  };
- public monaco: any = null;
+ public monaco: typeof MonacoType | null = null;
  public name = 'test';
+ public typeDefDisposable = null;
 
  constructor() {
  this.getValues = this.getValues.bind(this);
@@ -52,7 +54,9 @@ class App {
  }
 
  private createThemes() {
- this.monaco.editor.defineTheme('main', mainTheme);
+ if (!this.monaco) return;
+
+ this.monaco.editor.defineTheme('main', mainTheme as any);
  }
 
  private createEditor(id: string) {
@@ -72,7 +76,7 @@ class App {
  value
  };
 
- return this.monaco.editor.create(element, options);
+ return this.monaco.editor.create(element!, options);
  }
 
  private getValues() {
@@ -93,4 +97,5 @@ class App {
  }
 }
 
-(window as any).electronFiddle = new App();
+// tslint:disable-next-line:no-string-literal
+window['electronFiddle'] = new App();

src/renderer/components/output.tsx

@@ -19,7 +19,6 @@ export class Output extends React.Component<CommandsProps, {}> {
  const timestamp = <span className='timestamp'>{ts}</span>;
  const lines = entry.text.split(/\r?\n/);
 
-
  return lines.map((text) => (
  <p>{timestamp}{text}</p>
  ));

src/renderer/components/version-chooser.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 
 import { normalizeVersion } from '../../utils/normalize-version';
 import { AppState } from '../app';
+import { updateEditorTypeDefinitions } from '../fetch-types';
 
 export interface VersionChooserState {
  value: string;
@@ -19,7 +20,7 @@ export class VersionChooser extends React.Component<VersionChooserProps, Version
  super(props);
 
  this.handleChange = this.handleChange.bind(this);
- this.updateDownloadedVersionState();
+ this.handleVersionChange(this.props.appState.version);
  }
 
  public async updateDownloadedVersionState() {
@@ -39,10 +40,17 @@ export class VersionChooser extends React.Component<VersionChooserProps, Version
 
  public handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
  const version = normalizeVersion(event.target.value);
+ this.handleVersionChange(version);
+ }
+
+ public handleVersionChange(version: string) {
  console.log(`Version Chooser: Switching to v${version}`);
 
  this.props.appState.version = version;
 
+ // Update TypeScript definitions
+ updateEditorTypeDefinitions(version);
+
  // Fetch new binaries, maybe?
  if ((this.props.appState.versions[version] || { state: '' }).state === 'ready') return;
 

src/renderer/fetch-types.ts

@@ -0,0 +1,103 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import * as MonacoType from 'monaco-editor';
+
+import { userData } from './constants';
+
+const definitionPath = path.join(userData, 'electron-typedef');
+
+
+/**
+ * Fetch TypeScript definitions for the current version of Electron (online)
+ *
+ * @param {string} version
+ * @returns {Promise<string>}
+ */
+export function fetchTypeDefinitions(version: string): Promise<string> {
+ const url = `https://unpkg.com/electron@${version}/electron.d.ts`;
+
+ return window.fetch(url)
+ .then((response) => response.text())
+ .catch((error) => {
+ console.warn(`Fetch Types: Could not fetch definitions`, error);
+ return '';
+ });
+}
+
+/**
+ * Get the path for offline TypeScript definitions
+ *
+ * @param {string} version
+ * @returns {string}
+ */
+export function getOfflineTypeDefinitionPath(version: string): string {
+ return path.join(definitionPath, 'electron-typedef', version, 'electron.d.ts');
+}
+
+/**
+ * Do TypeScript definitions for the current version of Electron exist on disk?
+ *
+ * @param {string} version
+ * @returns {boolean}
+ */
+export function getOfflineTypeDefinitions(version: string): boolean {
+ return fs.existsSync(getOfflineTypeDefinitionPath(version));
+}
+
+/**
+ * Get TypeScript defintions for a version of Electron. If none can't be
+ * found, returns null.
+ *
+ * @param {string} version
+ * @returns {void}
+ */
+export async function getTypeDefinitions(version: string): Promise<string | null> {
+ await fs.mkdirp(definitionPath);
+
+ const offlinePath = getOfflineTypeDefinitionPath(version);
+
+ if (getOfflineTypeDefinitions(version)) {
+ try {
+ return fs.readFile(offlinePath, 'utf-8');
+ } catch (error) {
+ return null;
+ }
+ } else {
+ const typeDefs = await fetchTypeDefinitions(version);
+
+ if (typeDefs && typeDefs.length > 0) {
+ try {
+ await fs.outputFile(offlinePath, typeDefs);
+
+ return typeDefs;
+ } catch (error) {
+ console.warn(`Fetch Types: Could not write to disk`, error);
+ return null;
+ }
+ }
+
+ return null;
+ }
+}
+
+/**
+ * Tries to update the editor with type definitions.
+ *
+ * @param {string} version
+ */
+export async function updateEditorTypeDefinitions(version: string) {
+ const monaco: typeof MonacoType = (window as any).electronFiddle.monaco;
+ const typeDefs = await getTypeDefinitions(version);
+
+ if ((window as any).electronFiddle.typeDefDisposable) {
+ (window as any).electronFiddle.typeDefDisposable.dispose();
+ }
+
+ if (typeDefs) {
+ console.log(`Fetch Types: Updating Monaco types with electron.d.ts@${version}`);
+ const disposable = monaco.languages.typescript.javascriptDefaults.addExtraLib(typeDefs);
+ (window as any).electronFiddle.typeDefDisposable = disposable;
+ } else {
+ console.log(`Fetch Types: No type definitons for ${version} 😢`);
+ }
+}