From f5e030fac8df3a5c41b83f1a1f185234323bff52 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 12 Apr 2018 16:41:18 +0200 Subject: [PATCH] Start work on adopting latest monaco editor --- package-lock.json | 6 ++--- package.json | 2 +- src/editor/components/SourceEditor.tsx | 5 ++-- src/editor/components/files/FilePreview.tsx | 3 ++- src/editor/module.ts | 29 ++++++++++++++------- src/editor/monaco/MonacoEditor.tsx | 23 ++++++++-------- src/editor/monaco/configureFor.ts | 7 ++--- src/editor/monaco/getCompilationOutput.ts | 5 +++- src/editor/monaco/initialize.ts | 13 ++++++--- src/editor/monaco/modelStore.ts | 6 ++++- src/editor/monaco/monaco.ts | 3 +++ webpack.config.js | 2 +- 12 files changed, 65 insertions(+), 39 deletions(-) create mode 100644 src/editor/monaco/monaco.ts diff --git a/package-lock.json b/package-lock.json index a13eb77..f263869 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7539,9 +7539,9 @@ "dev": true }, "monaco-editor": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.10.1.tgz", - "integrity": "sha1-jJbE8VtrUli/ksvek8rYp+MAfhQ=" + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.12.0.tgz", + "integrity": "sha512-mScjXSKwH5LCmx6JCABkVpMnRHhi86IJwEmEXkH5O61dDXadWBdWQdC8N+NLmKT17/ugZYITCajUAWNRyKKZ9g==" }, "morgan": { "version": "1.9.0", diff --git a/package.json b/package.json index 324a91e..365684d 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "firebase": "4.10.1", "hyperapp": "1.1.2", "marked": "0.3.17", - "monaco-editor": "0.10.1", + "monaco-editor": "0.12.0", "spectre.css": "0.5.1", "typescript": "2.8.1" }, diff --git a/src/editor/components/SourceEditor.tsx b/src/editor/components/SourceEditor.tsx index ecd5d57..59a3d98 100644 --- a/src/editor/components/SourceEditor.tsx +++ b/src/editor/components/SourceEditor.tsx @@ -1,3 +1,4 @@ +import { editor } from "monaco-editor" import { h } from "hyperapp" import { SourceNode } from "projects/FileTree" @@ -25,8 +26,8 @@ function getOptions(): any { export function SourceEditor(props: SourceEditorProps) { const { state, actions, source } = props - function onModelContentChanged(editor: monaco.editor.IEditor) { - const model = editor.getModel() as monaco.editor.IModel + function onModelContentChanged(editor: editor.IEditor) { + const model = editor.getModel() as editor.IModel actions.setFileContent({ path: model.uri.path, content: model.getValue() diff --git a/src/editor/components/files/FilePreview.tsx b/src/editor/components/files/FilePreview.tsx index d64696e..7561b33 100644 --- a/src/editor/components/files/FilePreview.tsx +++ b/src/editor/components/files/FilePreview.tsx @@ -1,3 +1,4 @@ +import { editor } from "monaco-editor" import { h } from "hyperapp" import { SourceNode } from "projects/fileTree" @@ -57,7 +58,7 @@ const Preview = (props: PreviewProps) => { return SourcePreview(props) } -const getOptions = (): monaco.editor.IEditorOptions => { +const getOptions = (): editor.IEditorOptions => { return { minimap: { enabled: false }, folding: true, diff --git a/src/editor/module.ts b/src/editor/module.ts index 1beade5..d63521b 100644 --- a/src/editor/module.ts +++ b/src/editor/module.ts @@ -2,7 +2,7 @@ import { ModuleImpl } from "lib/modules" import { local } from "lib/store/local" import { replace } from "lib/router" import { set } from "lib/immutable" -import { guid } from "lib/utils" +import { guid, getErrorMessage } from "lib/utils" import * as projects from "projects" import * as global from "api" @@ -105,15 +105,24 @@ const _editor: ModuleImpl = { init: (globalActions: global.Actions) => (state, actions) => { usersActions = globalActions.users projectsActions = globalActions.projects - monaco.initialize().then(() => { - actions._setMonacoLoaded() - if (projectToOpen) { - const user = usersActions.getState().user - actions._setState( - openProject(state, actions, projectToOpen, user ? user.id : null) - ) - } - }) + monaco + .initialize() + .then(() => { + actions._setMonacoLoaded() + if (projectToOpen) { + const user = usersActions.getState().user + actions._setState( + openProject(state, actions, projectToOpen, user ? user.id : null) + ) + } + }) + .catch(e => { + globalActions.logger.log({ + severity: "error", + message: getErrorMessage(e) + }) + throw e + }) }, _setMonacoLoaded: () => ({ monacoLoaded: true }), _setState: (state: Partial) => state, diff --git a/src/editor/monaco/MonacoEditor.tsx b/src/editor/monaco/MonacoEditor.tsx index 1471ae2..c93e25c 100644 --- a/src/editor/monaco/MonacoEditor.tsx +++ b/src/editor/monaco/MonacoEditor.tsx @@ -1,11 +1,13 @@ -import "monaco-editor" +import { editor } from "monaco-editor" import { h } from "hyperapp" +import monaco from "./monaco" + const EDITOR = "__EDITOR" const RESIZE_LISTENER = "__RESIZE_LISTENER" const hasEditor = e => !!e[EDITOR] -const getEditor = e => e[EDITOR] as monaco.editor.IEditor +const getEditor = e => e[EDITOR] as editor.IEditor const createEditor = (e: HTMLElement, props: MonacoEditorProps) => { if (monaco && !hasEditor(e)) { @@ -52,16 +54,13 @@ const destroyEditor = (e: HTMLElement, props: MonacoEditorProps) => { } export interface MonacoEditorProps { - getOptions(): monaco.editor.IEditorConstructionOptions - getOverrides?: () => monaco.editor.IEditorOverrideServices - onEditorCreated?: (editor: monaco.editor.IEditor, e: HTMLElement) => void - onEditorDeleted?: (editor: monaco.editor.IEditor, e: HTMLElement) => void - onModelChanged?: ( - editor: monaco.editor.IEditor, - oldModel: monaco.editor.IModel - ) => void - onModelContentChanged?: (editor: monaco.editor.IEditor) => void - model?: monaco.editor.IModel + getOptions(): editor.IEditorConstructionOptions + getOverrides?: () => editor.IEditorOverrideServices + onEditorCreated?: (editor: editor.IEditor, e: HTMLElement) => void + onEditorDeleted?: (editor: editor.IEditor, e: HTMLElement) => void + onModelChanged?: (editor: editor.IEditor, oldModel: editor.IModel) => void + onModelContentChanged?: (editor: editor.IEditor) => void + model?: editor.IModel key?: string /** * Defaults to "monaco-editor" diff --git a/src/editor/monaco/configureFor.ts b/src/editor/monaco/configureFor.ts index 7301beb..0f698dd 100644 --- a/src/editor/monaco/configureFor.ts +++ b/src/editor/monaco/configureFor.ts @@ -1,4 +1,4 @@ -import "monaco-editor" +import { languages } from "monaco-editor" import { FileTree } from "projects" @@ -6,8 +6,10 @@ import { State } from "../api" import { getLanguage } from "./languages" import { createModel, hasModel, deleteAllModels } from "./modelStore" +import monaco from "./monaco" + const configureCompiler = (): void => { - const compilerDefaults: monaco.languages.typescript.CompilerOptions = { + const compilerDefaults: languages.typescript.CompilerOptions = { jsxFactory: "h", reactNamespace: "", jsx: monaco.languages.typescript.JsxEmit.React, @@ -35,7 +37,6 @@ const configureCompiler = (): void => { monaco.languages.typescript.typescriptDefaults.setCompilerOptions( compilerDefaults ) - monaco.languages.typescript.javascriptDefaults.setCompilerOptions( compilerDefaults ) diff --git a/src/editor/monaco/getCompilationOutput.ts b/src/editor/monaco/getCompilationOutput.ts index 3ee5548..d571bc2 100644 --- a/src/editor/monaco/getCompilationOutput.ts +++ b/src/editor/monaco/getCompilationOutput.ts @@ -1,5 +1,8 @@ +import { Uri } from "monaco-editor" import { LanguageService, EmitOutput, Diagnostic } from "lib/typescript" +import monaco from "./monaco" + export interface CompilationOutput { emit: EmitOutput compilerOptionsDiagnostics: Diagnostic[] @@ -46,7 +49,7 @@ export const getCompilationOutput = ( path: string, language: string ): Promise => { - const uri = monaco.Uri.from({ path }) + const uri = Uri.from({ path }) if (language === "javascript") { return getOutput( monaco.languages.typescript diff --git a/src/editor/monaco/initialize.ts b/src/editor/monaco/initialize.ts index 8ec5ede..5f8cca0 100644 --- a/src/editor/monaco/initialize.ts +++ b/src/editor/monaco/initialize.ts @@ -1,9 +1,13 @@ +import { languages } from "monaco-editor" + +import monaco from "./monaco" + declare const require: any const configure = ( - service: monaco.languages.typescript.LanguageServiceDefaults + service: languages.typescript.LanguageServiceDefaults ): void => { - service.setMaximunWorkerIdleTime(-1) + service.setMaximumWorkerIdleTime(-1) service.setEagerModelSync(true) service.setDiagnosticsOptions({ noSemanticValidation: false, @@ -12,6 +16,7 @@ const configure = ( } const onresolve = (resolve: Function) => () => { + console.log(monaco) configure(monaco.languages.typescript.typescriptDefaults) configure(monaco.languages.typescript.javascriptDefaults) @@ -29,11 +34,11 @@ export const initialize = (): Promise => new Promise((resolve, reject) => { const loaderScript = document.createElement("script") loaderScript.type = "text/javascript" - loaderScript.src = "https://unpkg.com/monaco-editor@0.10.1/min/vs/loader.js" + loaderScript.src = "https://unpkg.com/monaco-editor@0.12.0/min/vs/loader.js" loaderScript.addEventListener("load", () => { const req = window["require"] req.config({ - paths: { vs: "https://unpkg.com/monaco-editor@0.10.1/min/vs" } + paths: { vs: "https://unpkg.com/monaco-editor@0.12.0/min/vs" } }) // proxy instantiation of web workers through a same-domain script diff --git a/src/editor/monaco/modelStore.ts b/src/editor/monaco/modelStore.ts index 78fa566..0497171 100644 --- a/src/editor/monaco/modelStore.ts +++ b/src/editor/monaco/modelStore.ts @@ -1,5 +1,9 @@ +import { editor } from "monaco-editor" + +import monaco from "./monaco" + interface Models { - [path: string]: monaco.editor.IModel + [path: string]: editor.IModel } const models: Models = {} diff --git a/src/editor/monaco/monaco.ts b/src/editor/monaco/monaco.ts new file mode 100644 index 0000000..13df93d --- /dev/null +++ b/src/editor/monaco/monaco.ts @@ -0,0 +1,3 @@ +declare let monaco: any + +export default monaco diff --git a/webpack.config.js b/webpack.config.js index cbd1ffd..5c02991 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -72,7 +72,7 @@ module.exports = function(env) { rollup: "rollup", typescript: "ts", // actual name not needed, just that this is an external and it exists - "monaco-editor": "firebase", + "monaco-editor": "ts", vs: "vs" }, devServer: {