From aceaa54a29ab7b1e964f347049e442c742561f3e Mon Sep 17 00:00:00 2001 From: pablopunk Date: Thu, 10 Sep 2020 13:06:35 +0200 Subject: [PATCH 1/6] Support prettier config in package.json --- .../src/app/overmind/effects/vscode/index.ts | 229 +++++++++--------- .../CodeFormatting/Prettier.tsx | 9 +- 2 files changed, 123 insertions(+), 115 deletions(-) diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts index 16d55990495..671f6a616dd 100644 --- a/packages/app/src/app/overmind/effects/vscode/index.ts +++ b/packages/app/src/app/overmind/effects/vscode/index.ts @@ -1,5 +1,4 @@ import DEFAULT_PRETTIER_CONFIG from '@codesandbox/common/lib/prettify-default-config'; -import { resolveModule } from '@codesandbox/common/lib/sandbox/modules'; import getTemplate from '@codesandbox/common/lib/templates'; import { CurrentUser, @@ -148,7 +147,7 @@ export class VSCodeEffect { this.prepareElements(); this.options.reaction( - state => ({ + (state) => ({ fileComments: json(state.comments.fileComments), currentCommentId: state.comments.currentCommentId, }), @@ -170,18 +169,18 @@ export class VSCodeEffect { import( // @ts-ignore 'worker-loader?publicPath=/&name=client-ext-host-worker.[hash:8].worker.js!./extensionHostWorker/bootstrappers/client-ext-host' - ).then(ExtHostWorkerLoader => { + ).then((ExtHostWorkerLoader) => { this.clientExtensionHost = ExtHostWorkerLoader.default; }); import( // @ts-ignore 'worker-loader?publicPath=/&name=container-ext-host-worker.[hash:8].worker.js!./extensionHostWorker/bootstrappers/container-ext-host' - ).then(ExtHostWorkerLoader => { + ).then((ExtHostWorkerLoader) => { this.containerExtensionHost = ExtHostWorkerLoader.default; }); - this.initialized = this.initializeFileSystem().then(mfs => { + this.initialized = this.initializeFileSystem().then((mfs) => { this.mountableFilesystem = mfs; // We want to initialize before VSCode, but after browserFS is configured // For first-timers initialize a theme in the cache so it doesn't jump colors @@ -205,14 +204,14 @@ export class VSCodeEffect { // most important one is Live. If you're in a classroom live session as spectator, // you should not be allowed to edit. options.reaction( - state => + (state) => (state.editor.currentSandbox && Boolean(state.editor.currentSandbox.git)) || !state.live.isLive || state.live.roomInfo?.mode === 'open' || (state.live.roomInfo?.mode === 'classroom' && state.live.isCurrentEditor), - canEdit => { + (canEdit) => { this.setReadOnly(!canEdit); } ); @@ -245,7 +244,7 @@ export class VSCodeEffect { const commentGlyphs = document.querySelectorAll( '.editor-comments-glyph' ); - const el = Array.from(commentGlyphs).find(glyphEl => + const el = Array.from(commentGlyphs).find((glyphEl) => glyphEl.className.includes(commentId) ); @@ -452,7 +451,7 @@ export class VSCodeEffect { if (isFirstLoad) { const container = this.elements.editor; - await new Promise(resolve => { + await new Promise((resolve) => { loadScript(true, ['vs/editor/codesandbox.editor.main'])(resolve); }).then(() => this.loadEditor(window.monaco, container)); } @@ -496,7 +495,7 @@ export class VSCodeEffect { const groupsToClose = this.editorApi.editorService.editorGroupService.getGroups(); await Promise.all( - groupsToClose.map(group => + groupsToClose.map((group) => Promise.all([ group.closeAllEditors(), this.editorApi.editorService.editorGroupService.removeGroup(group), @@ -517,7 +516,7 @@ export class VSCodeEffect { // allowing for a paint, like selections in explorer. For this to work we have to ensure // that we are actually indeed still trying to open this file, as we might have changed // the file - return new Promise(resolve => { + return new Promise((resolve) => { requestAnimationFrame(async () => { const currentModule = this.options.getCurrentModule(); if (currentModule && module.id === currentModule.id) { @@ -543,10 +542,10 @@ export class VSCodeEffect { if (errors.length > 0) { const currentPath = this.getCurrentModelPath(); const thisModuleErrors = errors.filter( - error => error.path === currentPath + (error) => error.path === currentPath ); const errorMarkers = thisModuleErrors - .map(error => { + .map((error) => { if (error) { return { severity: this.monaco.MarkerSeverity.Error, @@ -560,7 +559,7 @@ export class VSCodeEffect { return null; }) - .filter(x => x); + .filter((x) => x); this.monaco.editor.setModelMarkers( activeEditor.getModel(), @@ -621,8 +620,8 @@ export class VSCodeEffect { if (corrections.length > 0) { const currentPath = this.getCurrentModelPath(); const correctionMarkers = corrections - .filter(correction => correction.path === currentPath) - .map(correction => { + .filter((correction) => correction.path === currentPath) + .map((correction) => { if (correction) { return { severity: @@ -640,7 +639,7 @@ export class VSCodeEffect { return null; }) - .filter(x => x); + .filter((x) => x); this.monaco.editor.setModelMarkers( activeEditor.getModel(), @@ -741,7 +740,7 @@ export class VSCodeEffect { private createContainerForkHandler() { return () => { const host = this.containerExtensionHost(); - host.addEventListener('message', event => { + host.addEventListener('message', (event) => { if (event.data.$type === 'request_lsp_endpoint') { event.target.postMessage({ $type: 'respond_lsp_endpoint', @@ -862,7 +861,7 @@ export class VSCodeEffect { private initializeReactions() { const { reaction } = this.options; - reaction(state => state.preferences.settings, this.changeSettings, { + reaction((state) => state.preferences.settings, this.changeSettings, { nested: true, immediate: true, }); @@ -873,7 +872,7 @@ export class VSCodeEffect { .promise; const extensionIdentifier = ( await extensionEnablementService.getDisabledExtensions() - ).find(ext => ext.id === id); + ).find((ext) => ext.id === id); if (extensionIdentifier) { // Sadly we have to call a private api for this. Might change this once we have extension management @@ -929,13 +928,13 @@ export class VSCodeEffect { r('vs/platform/contextview/browser/contextView'), ]; - const { serviceCollection } = await new Promise(resolve => { + const { serviceCollection } = await new Promise((resolve) => { monaco.editor.create( container, { - codesandboxService: i => + codesandboxService: (i) => new SyncDescriptor(CodeSandboxService, [this.controller, this]), - codesandboxConfigurationUIService: i => + codesandboxConfigurationUIService: (i) => new SyncDescriptor(CodeSandboxConfigurationUIService, [ this.customEditorApi, ]), @@ -944,91 +943,93 @@ export class VSCodeEffect { ); }); - return new Promise(resolve => { + return new Promise((resolve) => { // It has to run the accessor within the callback - serviceCollection.get(IInstantiationService).invokeFunction(accessor => { - // Initialize these services - accessor.get(CodeSandboxConfigurationUIService); - accessor.get(ICodeSandboxEditorConnectorService); - - const statusbarPart = accessor.get(IStatusbarService); - const menubarPart = accessor.get('menubar'); - const commandService = accessor.get(ICommandService); - const extensionService = accessor.get(IExtensionService); - const extensionEnablementService = accessor.get( - IExtensionEnablementService - ); + serviceCollection + .get(IInstantiationService) + .invokeFunction((accessor) => { + // Initialize these services + accessor.get(CodeSandboxConfigurationUIService); + accessor.get(ICodeSandboxEditorConnectorService); + + const statusbarPart = accessor.get(IStatusbarService); + const menubarPart = accessor.get('menubar'); + const commandService = accessor.get(ICommandService); + const extensionService = accessor.get(IExtensionService); + const extensionEnablementService = accessor.get( + IExtensionEnablementService + ); - this.commandService.resolve(commandService); - this.extensionService.resolve(extensionService); + this.commandService.resolve(commandService); + this.extensionService.resolve(extensionService); - this.extensionEnablementService.resolve(extensionEnablementService); + this.extensionEnablementService.resolve(extensionEnablementService); - const editorPart = accessor.get(IEditorGroupsService); + const editorPart = accessor.get(IEditorGroupsService); - const codeEditorService = accessor.get(ICodeEditorService); - const textFileService = accessor.get(ITextFileService); - const editorService = accessor.get(IEditorService); - const contextViewService = accessor.get(IContextViewService); + const codeEditorService = accessor.get(ICodeEditorService); + const textFileService = accessor.get(ITextFileService); + const editorService = accessor.get(IEditorService); + const contextViewService = accessor.get(IContextViewService); - contextViewService.setContainer(container); + contextViewService.setContainer(container); - this.editorApi = { - openFile(path) { - return codeEditorService.openCodeEditor({ - resource: monaco.Uri.file('/sandbox' + path), - }); - }, - getActiveCodeEditor() { - return codeEditorService.getActiveCodeEditor(); - }, - textFileService, - editorPart, - editorService, - codeEditorService, - extensionService, - }; - - window.CSEditor = { - editor: this.editorApi, - monaco, - }; - - if (process.env.NODE_ENV === 'development') { - // eslint-disable-next-line - console.log(accessor); - } + this.editorApi = { + openFile(path) { + return codeEditorService.openCodeEditor({ + resource: monaco.Uri.file('/sandbox' + path), + }); + }, + getActiveCodeEditor() { + return codeEditorService.getActiveCodeEditor(); + }, + textFileService, + editorPart, + editorService, + codeEditorService, + extensionService, + }; - statusbarPart.create(this.elements.statusbar); - menubarPart.create(this.elements.menubar); - editorPart.create(this.elements.editorPart); - editorPart.layout(container.offsetWidth, container.offsetHeight); + window.CSEditor = { + editor: this.editorApi, + monaco, + }; - editorPart.parent = container; + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line + console.log(accessor); + } - container.appendChild(this.elements.editorPart); + statusbarPart.create(this.elements.statusbar); + menubarPart.create(this.elements.menubar); + editorPart.create(this.elements.editorPart); + editorPart.layout(container.offsetWidth, container.offsetHeight); - this.initializeReactions(); + editorPart.parent = container; - this.configureMonacoLanguages(monaco); + container.appendChild(this.elements.editorPart); - editorService.onDidActiveEditorChange(this.onActiveEditorChange); - this.initializeCodeSandboxAPIListener(); + this.initializeReactions(); - if (!this.linter && this.settings.lintEnabled) { - this.createLinter(); - } + this.configureMonacoLanguages(monaco); - const lifecycleService = accessor.get(ILifecycleService); + editorService.onDidActiveEditorChange(this.onActiveEditorChange); + this.initializeCodeSandboxAPIListener(); - // Trigger all VSCode lifecycle listeners - lifecycleService.phase = 2; // Restoring - requestAnimationFrame(() => { - lifecycleService.phase = 3; // Running - }); + if (!this.linter && this.settings.lintEnabled) { + this.createLinter(); + } - resolve(); - }); + const lifecycleService = accessor.get(ILifecycleService); + + // Trigger all VSCode lifecycle listeners + lifecycleService.phase = 2; // Restoring + requestAnimationFrame(() => { + lifecycleService.phase = 3; // Running + }); + + resolve(); + }); }); } @@ -1064,7 +1065,7 @@ export class VSCodeEffect { 'html', 'markdown', 'json', - ].forEach(language => { + ].forEach((language) => { monaco.languages.registerDocumentFormattingEditProvider(language, { provideDocumentFormattingEdits: this.provideDocumentFormattingEdits, }); @@ -1078,7 +1079,7 @@ export class VSCodeEffect { this.getPrettierConfig(), () => false, token - ).then(newCode => [ + ).then((newCode) => [ { range: model.getFullModelRange(), text: newCode, @@ -1100,21 +1101,27 @@ export class VSCodeEffect { } private getPrettierConfig = () => { - try { - const sandbox = this.options.getCurrentSandbox(); - if (!sandbox) { - return null; - } - const module = resolveModule( - '/.prettierrc', - sandbox.modules, - sandbox.directories - ); + const sandbox = this.options.getCurrentSandbox(); + if (!sandbox) { + return null; + } - return JSON.parse(module.code || ''); - } catch (e) { - return this.settings.prettierConfig || DEFAULT_PRETTIER_CONFIG; + const packageJsonFile = sandbox.modules.find( + (m) => m.type === 'file' && m.path === '/package.json' + ); + const packageJson = JSON.parse(packageJsonFile.code); + if (packageJson.prettier) { + return packageJson.prettier; } + + const prettierConfigFile = sandbox.modules.find( + (m) => m.type === 'file' && m.path === '/.prettierrc' + ); + if (prettierConfigFile?.code) { + return JSON.parse(prettierConfigFile.code); + } + + return this.settings.prettierConfig || DEFAULT_PRETTIER_CONFIG; }; private onOperationApplied = (data: OnOperationAppliedData) => { @@ -1196,7 +1203,7 @@ export class VSCodeEffect { r1.endLineNumber !== r2.endLineNumber || r1.endColumn !== r2.endColumn; - this.modelViewRangeListener = activeEditor.onDidScrollChange(e => { + this.modelViewRangeListener = activeEditor.onDidScrollChange((e) => { const [range] = activeEditor.getVisibleRanges(); if ( @@ -1209,7 +1216,7 @@ export class VSCodeEffect { }); this.modelCursorPositionListener = activeEditor.onDidChangeCursorPosition( - cursor => { + (cursor) => { if ( sandbox && sandbox.featureFlags.comments && @@ -1226,12 +1233,12 @@ export class VSCodeEffect { ); this.modelSelectionListener = activeEditor.onDidChangeCursorSelection( - selectionChange => { + (selectionChange) => { const model = activeEditor.getModel(); const lines = model.getLinesContent() || []; const data: onSelectionChangeData = { primary: getSelection(lines, selectionChange.selection), - secondary: selectionChange.secondarySelections.map(s => + secondary: selectionChange.secondarySelections.map((s) => getSelection(lines, s) ), source: selectionChange.source, @@ -1339,7 +1346,7 @@ export class VSCodeEffect { } private listenToCommentClick() { - window.addEventListener('click', event => { + window.addEventListener('click', (event) => { const target = event.target as HTMLElement; if (target.classList.contains('editor-comments-glyph')) { /* diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx index d1aa9773d4f..9c984674c05 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx @@ -26,7 +26,7 @@ export const Prettier: FunctionComponent = () => { } = useOvermind(); const bindValue = (name: string) => ({ - setValue: value => + setValue: (value) => settingChanged({ name: `prettierConfig.${name}`, value }), value: prettierConfig[name], }); @@ -36,14 +36,15 @@ export const Prettier: FunctionComponent = () => { This configuration can be overridden by a{' '} + "prettier" key in the package.json{' '} + or by a .prettierrc file at the route of the sandbox.{' '} - .prettierrc - {' '} - JSON file at the root of the sandbox. + More info... + From c880056b6438c50e09318331256ac7eade71b575 Mon Sep 17 00:00:00 2001 From: pablopunk Date: Thu, 10 Sep 2020 13:28:15 +0200 Subject: [PATCH 2/6] Fix type check --- .../src/app/overmind/effects/vscode/index.ts | 2 +- .../app/overmind/effects/vscode/index.ts.rej | 219 ++++++++++++++++++ 2 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 packages/app/src/app/overmind/effects/vscode/index.ts.rej diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts index 671f6a616dd..e427db1a1c6 100644 --- a/packages/app/src/app/overmind/effects/vscode/index.ts +++ b/packages/app/src/app/overmind/effects/vscode/index.ts @@ -1110,7 +1110,7 @@ export class VSCodeEffect { (m) => m.type === 'file' && m.path === '/package.json' ); const packageJson = JSON.parse(packageJsonFile.code); - if (packageJson.prettier) { + if (packageJson?.prettier) { return packageJson.prettier; } diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts.rej b/packages/app/src/app/overmind/effects/vscode/index.ts.rej new file mode 100644 index 00000000000..9c95802bf87 --- /dev/null +++ b/packages/app/src/app/overmind/effects/vscode/index.ts.rej @@ -0,0 +1,219 @@ +diff a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts (rejected hunks) +@@ -498 +498 @@ export class VSCodeEffect { +- groupsToClose.map(group => ++ groupsToClose.map((group) => +@@ -519 +519 @@ export class VSCodeEffect { +- return new Promise(resolve => { ++ return new Promise((resolve) => { +@@ -545 +545 @@ export class VSCodeEffect { +- error => error.path === currentPath ++ (error) => error.path === currentPath +@@ -548 +548 @@ export class VSCodeEffect { +- .map(error => { ++ .map((error) => { +@@ -562 +562 @@ export class VSCodeEffect { +- .filter(x => x); ++ .filter((x) => x); +@@ -623,2 +623,2 @@ export class VSCodeEffect { +- .filter(correction => correction.path === currentPath) +- .map(correction => { ++ .filter((correction) => correction.path === currentPath) ++ .map((correction) => { +@@ -642 +642 @@ export class VSCodeEffect { +- .filter(x => x); ++ .filter((x) => x); +@@ -743 +743 @@ export class VSCodeEffect { +- host.addEventListener('message', event => { ++ host.addEventListener('message', (event) => { +@@ -864 +864 @@ export class VSCodeEffect { +- reaction(state => state.preferences.settings, this.changeSettings, { ++ reaction((state) => state.preferences.settings, this.changeSettings, { +@@ -875 +875 @@ export class VSCodeEffect { +- ).find(ext => ext.id === id); ++ ).find((ext) => ext.id === id); +@@ -931 +931 @@ export class VSCodeEffect { +- const { serviceCollection } = await new Promise(resolve => { ++ const { serviceCollection } = await new Promise((resolve) => { +@@ -935 +935 @@ export class VSCodeEffect { +- codesandboxService: i => ++ codesandboxService: (i) => +@@ -937 +937 @@ export class VSCodeEffect { +- codesandboxConfigurationUIService: i => ++ codesandboxConfigurationUIService: (i) => +@@ -946 +946 @@ export class VSCodeEffect { +- return new Promise(resolve => { ++ return new Promise((resolve) => { +@@ -948,12 +948,14 @@ export class VSCodeEffect { +- serviceCollection.get(IInstantiationService).invokeFunction(accessor => { +- // Initialize these services +- accessor.get(CodeSandboxConfigurationUIService); +- accessor.get(ICodeSandboxEditorConnectorService); +- +- const statusbarPart = accessor.get(IStatusbarService); +- const menubarPart = accessor.get('menubar'); +- const commandService = accessor.get(ICommandService); +- const extensionService = accessor.get(IExtensionService); +- const extensionEnablementService = accessor.get( +- IExtensionEnablementService +- ); ++ serviceCollection ++ .get(IInstantiationService) ++ .invokeFunction((accessor) => { ++ // Initialize these services ++ accessor.get(CodeSandboxConfigurationUIService); ++ accessor.get(ICodeSandboxEditorConnectorService); ++ ++ const statusbarPart = accessor.get(IStatusbarService); ++ const menubarPart = accessor.get('menubar'); ++ const commandService = accessor.get(ICommandService); ++ const extensionService = accessor.get(IExtensionService); ++ const extensionEnablementService = accessor.get( ++ IExtensionEnablementService ++ ); +@@ -961,2 +963,2 @@ export class VSCodeEffect { +- this.commandService.resolve(commandService); +- this.extensionService.resolve(extensionService); ++ this.commandService.resolve(commandService); ++ this.extensionService.resolve(extensionService); +@@ -964 +966 @@ export class VSCodeEffect { +- this.extensionEnablementService.resolve(extensionEnablementService); ++ this.extensionEnablementService.resolve(extensionEnablementService); +@@ -966 +968 @@ export class VSCodeEffect { +- const editorPart = accessor.get(IEditorGroupsService); ++ const editorPart = accessor.get(IEditorGroupsService); +@@ -968,4 +970,4 @@ export class VSCodeEffect { +- const codeEditorService = accessor.get(ICodeEditorService); +- const textFileService = accessor.get(ITextFileService); +- const editorService = accessor.get(IEditorService); +- const contextViewService = accessor.get(IContextViewService); ++ const codeEditorService = accessor.get(ICodeEditorService); ++ const textFileService = accessor.get(ITextFileService); ++ const editorService = accessor.get(IEditorService); ++ const contextViewService = accessor.get(IContextViewService); +@@ -973 +975 @@ export class VSCodeEffect { +- contextViewService.setContainer(container); ++ contextViewService.setContainer(container); +@@ -975,25 +977,20 @@ export class VSCodeEffect { +- this.editorApi = { +- openFile(path) { +- return codeEditorService.openCodeEditor({ +- resource: monaco.Uri.file('/sandbox' + path), +- }); +- }, +- getActiveCodeEditor() { +- return codeEditorService.getActiveCodeEditor(); +- }, +- textFileService, +- editorPart, +- editorService, +- codeEditorService, +- extensionService, +- }; +- +- window.CSEditor = { +- editor: this.editorApi, +- monaco, +- }; +- +- if (process.env.NODE_ENV === 'development') { +- // eslint-disable-next-line +- console.log(accessor); +- } ++ this.editorApi = { ++ openFile(path) { ++ return codeEditorService.openCodeEditor({ ++ resource: monaco.Uri.file('/sandbox' + path), ++ }); ++ }, ++ getActiveCodeEditor() { ++ return codeEditorService.getActiveCodeEditor(); ++ }, ++ textFileService, ++ editorPart, ++ editorService, ++ codeEditorService, ++ extensionService, ++ }; ++ ++ window.CSEditor = { ++ editor: this.editorApi, ++ monaco, ++ }; +@@ -1001,4 +998,4 @@ export class VSCodeEffect { +- statusbarPart.create(this.elements.statusbar); +- menubarPart.create(this.elements.menubar); +- editorPart.create(this.elements.editorPart); +- editorPart.layout(container.offsetWidth, container.offsetHeight); ++ if (process.env.NODE_ENV === 'development') { ++ // eslint-disable-next-line ++ console.log(accessor); ++ } +@@ -1006 +1003,4 @@ export class VSCodeEffect { +- editorPart.parent = container; ++ statusbarPart.create(this.elements.statusbar); ++ menubarPart.create(this.elements.menubar); ++ editorPart.create(this.elements.editorPart); ++ editorPart.layout(container.offsetWidth, container.offsetHeight); +@@ -1008 +1008 @@ export class VSCodeEffect { +- container.appendChild(this.elements.editorPart); ++ editorPart.parent = container; +@@ -1010 +1010 @@ export class VSCodeEffect { +- this.initializeReactions(); ++ container.appendChild(this.elements.editorPart); +@@ -1012 +1012 @@ export class VSCodeEffect { +- this.configureMonacoLanguages(monaco); ++ this.initializeReactions(); +@@ -1014,2 +1014 @@ export class VSCodeEffect { +- editorService.onDidActiveEditorChange(this.onActiveEditorChange); +- this.initializeCodeSandboxAPIListener(); ++ this.configureMonacoLanguages(monaco); +@@ -1017,3 +1016,2 @@ export class VSCodeEffect { +- if (!this.linter && this.settings.lintEnabled) { +- this.createLinter(); +- } ++ editorService.onDidActiveEditorChange(this.onActiveEditorChange); ++ this.initializeCodeSandboxAPIListener(); +@@ -1021 +1019,3 @@ export class VSCodeEffect { +- const lifecycleService = accessor.get(ILifecycleService); ++ if (!this.linter && this.settings.lintEnabled) { ++ this.createLinter(); ++ } +@@ -1023,5 +1023 @@ export class VSCodeEffect { +- // Trigger all VSCode lifecycle listeners +- lifecycleService.phase = 2; // Restoring +- requestAnimationFrame(() => { +- lifecycleService.phase = 3; // Running +- }); ++ const lifecycleService = accessor.get(ILifecycleService); +@@ -1029,2 +1025,8 @@ export class VSCodeEffect { +- resolve(); +- }); ++ // Trigger all VSCode lifecycle listeners ++ lifecycleService.phase = 2; // Restoring ++ requestAnimationFrame(() => { ++ lifecycleService.phase = 3; // Running ++ }); ++ ++ resolve(); ++ }); +@@ -1066 +1068 @@ export class VSCodeEffect { +- ].forEach(language => { ++ ].forEach((language) => { +@@ -1080 +1082 @@ export class VSCodeEffect { +- ).then(newCode => [ ++ ).then((newCode) => [ +@@ -1204 +1206 @@ export class VSCodeEffect { +- this.modelViewRangeListener = activeEditor.onDidScrollChange(e => { ++ this.modelViewRangeListener = activeEditor.onDidScrollChange((e) => { +@@ -1217 +1219 @@ export class VSCodeEffect { +- cursor => { ++ (cursor) => { +@@ -1234 +1236 @@ export class VSCodeEffect { +- selectionChange => { ++ (selectionChange) => { +@@ -1239 +1241 @@ export class VSCodeEffect { +- secondary: selectionChange.secondarySelections.map(s => ++ secondary: selectionChange.secondarySelections.map((s) => +@@ -1347 +1349 @@ export class VSCodeEffect { +- window.addEventListener('click', event => { ++ window.addEventListener('click', (event) => { From bd3a7d3ff57666a120d38bde64faf682399fdd92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 10 Sep 2020 13:41:50 +0200 Subject: [PATCH 3/6] Delete index.ts.rej --- .../app/overmind/effects/vscode/index.ts.rej | 219 ------------------ 1 file changed, 219 deletions(-) delete mode 100644 packages/app/src/app/overmind/effects/vscode/index.ts.rej diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts.rej b/packages/app/src/app/overmind/effects/vscode/index.ts.rej deleted file mode 100644 index 9c95802bf87..00000000000 --- a/packages/app/src/app/overmind/effects/vscode/index.ts.rej +++ /dev/null @@ -1,219 +0,0 @@ -diff a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts (rejected hunks) -@@ -498 +498 @@ export class VSCodeEffect { -- groupsToClose.map(group => -+ groupsToClose.map((group) => -@@ -519 +519 @@ export class VSCodeEffect { -- return new Promise(resolve => { -+ return new Promise((resolve) => { -@@ -545 +545 @@ export class VSCodeEffect { -- error => error.path === currentPath -+ (error) => error.path === currentPath -@@ -548 +548 @@ export class VSCodeEffect { -- .map(error => { -+ .map((error) => { -@@ -562 +562 @@ export class VSCodeEffect { -- .filter(x => x); -+ .filter((x) => x); -@@ -623,2 +623,2 @@ export class VSCodeEffect { -- .filter(correction => correction.path === currentPath) -- .map(correction => { -+ .filter((correction) => correction.path === currentPath) -+ .map((correction) => { -@@ -642 +642 @@ export class VSCodeEffect { -- .filter(x => x); -+ .filter((x) => x); -@@ -743 +743 @@ export class VSCodeEffect { -- host.addEventListener('message', event => { -+ host.addEventListener('message', (event) => { -@@ -864 +864 @@ export class VSCodeEffect { -- reaction(state => state.preferences.settings, this.changeSettings, { -+ reaction((state) => state.preferences.settings, this.changeSettings, { -@@ -875 +875 @@ export class VSCodeEffect { -- ).find(ext => ext.id === id); -+ ).find((ext) => ext.id === id); -@@ -931 +931 @@ export class VSCodeEffect { -- const { serviceCollection } = await new Promise(resolve => { -+ const { serviceCollection } = await new Promise((resolve) => { -@@ -935 +935 @@ export class VSCodeEffect { -- codesandboxService: i => -+ codesandboxService: (i) => -@@ -937 +937 @@ export class VSCodeEffect { -- codesandboxConfigurationUIService: i => -+ codesandboxConfigurationUIService: (i) => -@@ -946 +946 @@ export class VSCodeEffect { -- return new Promise(resolve => { -+ return new Promise((resolve) => { -@@ -948,12 +948,14 @@ export class VSCodeEffect { -- serviceCollection.get(IInstantiationService).invokeFunction(accessor => { -- // Initialize these services -- accessor.get(CodeSandboxConfigurationUIService); -- accessor.get(ICodeSandboxEditorConnectorService); -- -- const statusbarPart = accessor.get(IStatusbarService); -- const menubarPart = accessor.get('menubar'); -- const commandService = accessor.get(ICommandService); -- const extensionService = accessor.get(IExtensionService); -- const extensionEnablementService = accessor.get( -- IExtensionEnablementService -- ); -+ serviceCollection -+ .get(IInstantiationService) -+ .invokeFunction((accessor) => { -+ // Initialize these services -+ accessor.get(CodeSandboxConfigurationUIService); -+ accessor.get(ICodeSandboxEditorConnectorService); -+ -+ const statusbarPart = accessor.get(IStatusbarService); -+ const menubarPart = accessor.get('menubar'); -+ const commandService = accessor.get(ICommandService); -+ const extensionService = accessor.get(IExtensionService); -+ const extensionEnablementService = accessor.get( -+ IExtensionEnablementService -+ ); -@@ -961,2 +963,2 @@ export class VSCodeEffect { -- this.commandService.resolve(commandService); -- this.extensionService.resolve(extensionService); -+ this.commandService.resolve(commandService); -+ this.extensionService.resolve(extensionService); -@@ -964 +966 @@ export class VSCodeEffect { -- this.extensionEnablementService.resolve(extensionEnablementService); -+ this.extensionEnablementService.resolve(extensionEnablementService); -@@ -966 +968 @@ export class VSCodeEffect { -- const editorPart = accessor.get(IEditorGroupsService); -+ const editorPart = accessor.get(IEditorGroupsService); -@@ -968,4 +970,4 @@ export class VSCodeEffect { -- const codeEditorService = accessor.get(ICodeEditorService); -- const textFileService = accessor.get(ITextFileService); -- const editorService = accessor.get(IEditorService); -- const contextViewService = accessor.get(IContextViewService); -+ const codeEditorService = accessor.get(ICodeEditorService); -+ const textFileService = accessor.get(ITextFileService); -+ const editorService = accessor.get(IEditorService); -+ const contextViewService = accessor.get(IContextViewService); -@@ -973 +975 @@ export class VSCodeEffect { -- contextViewService.setContainer(container); -+ contextViewService.setContainer(container); -@@ -975,25 +977,20 @@ export class VSCodeEffect { -- this.editorApi = { -- openFile(path) { -- return codeEditorService.openCodeEditor({ -- resource: monaco.Uri.file('/sandbox' + path), -- }); -- }, -- getActiveCodeEditor() { -- return codeEditorService.getActiveCodeEditor(); -- }, -- textFileService, -- editorPart, -- editorService, -- codeEditorService, -- extensionService, -- }; -- -- window.CSEditor = { -- editor: this.editorApi, -- monaco, -- }; -- -- if (process.env.NODE_ENV === 'development') { -- // eslint-disable-next-line -- console.log(accessor); -- } -+ this.editorApi = { -+ openFile(path) { -+ return codeEditorService.openCodeEditor({ -+ resource: monaco.Uri.file('/sandbox' + path), -+ }); -+ }, -+ getActiveCodeEditor() { -+ return codeEditorService.getActiveCodeEditor(); -+ }, -+ textFileService, -+ editorPart, -+ editorService, -+ codeEditorService, -+ extensionService, -+ }; -+ -+ window.CSEditor = { -+ editor: this.editorApi, -+ monaco, -+ }; -@@ -1001,4 +998,4 @@ export class VSCodeEffect { -- statusbarPart.create(this.elements.statusbar); -- menubarPart.create(this.elements.menubar); -- editorPart.create(this.elements.editorPart); -- editorPart.layout(container.offsetWidth, container.offsetHeight); -+ if (process.env.NODE_ENV === 'development') { -+ // eslint-disable-next-line -+ console.log(accessor); -+ } -@@ -1006 +1003,4 @@ export class VSCodeEffect { -- editorPart.parent = container; -+ statusbarPart.create(this.elements.statusbar); -+ menubarPart.create(this.elements.menubar); -+ editorPart.create(this.elements.editorPart); -+ editorPart.layout(container.offsetWidth, container.offsetHeight); -@@ -1008 +1008 @@ export class VSCodeEffect { -- container.appendChild(this.elements.editorPart); -+ editorPart.parent = container; -@@ -1010 +1010 @@ export class VSCodeEffect { -- this.initializeReactions(); -+ container.appendChild(this.elements.editorPart); -@@ -1012 +1012 @@ export class VSCodeEffect { -- this.configureMonacoLanguages(monaco); -+ this.initializeReactions(); -@@ -1014,2 +1014 @@ export class VSCodeEffect { -- editorService.onDidActiveEditorChange(this.onActiveEditorChange); -- this.initializeCodeSandboxAPIListener(); -+ this.configureMonacoLanguages(monaco); -@@ -1017,3 +1016,2 @@ export class VSCodeEffect { -- if (!this.linter && this.settings.lintEnabled) { -- this.createLinter(); -- } -+ editorService.onDidActiveEditorChange(this.onActiveEditorChange); -+ this.initializeCodeSandboxAPIListener(); -@@ -1021 +1019,3 @@ export class VSCodeEffect { -- const lifecycleService = accessor.get(ILifecycleService); -+ if (!this.linter && this.settings.lintEnabled) { -+ this.createLinter(); -+ } -@@ -1023,5 +1023 @@ export class VSCodeEffect { -- // Trigger all VSCode lifecycle listeners -- lifecycleService.phase = 2; // Restoring -- requestAnimationFrame(() => { -- lifecycleService.phase = 3; // Running -- }); -+ const lifecycleService = accessor.get(ILifecycleService); -@@ -1029,2 +1025,8 @@ export class VSCodeEffect { -- resolve(); -- }); -+ // Trigger all VSCode lifecycle listeners -+ lifecycleService.phase = 2; // Restoring -+ requestAnimationFrame(() => { -+ lifecycleService.phase = 3; // Running -+ }); -+ -+ resolve(); -+ }); -@@ -1066 +1068 @@ export class VSCodeEffect { -- ].forEach(language => { -+ ].forEach((language) => { -@@ -1080 +1082 @@ export class VSCodeEffect { -- ).then(newCode => [ -+ ).then((newCode) => [ -@@ -1204 +1206 @@ export class VSCodeEffect { -- this.modelViewRangeListener = activeEditor.onDidScrollChange(e => { -+ this.modelViewRangeListener = activeEditor.onDidScrollChange((e) => { -@@ -1217 +1219 @@ export class VSCodeEffect { -- cursor => { -+ (cursor) => { -@@ -1234 +1236 @@ export class VSCodeEffect { -- selectionChange => { -+ (selectionChange) => { -@@ -1239 +1241 @@ export class VSCodeEffect { -- secondary: selectionChange.secondarySelections.map(s => -+ secondary: selectionChange.secondarySelections.map((s) => -@@ -1347 +1349 @@ export class VSCodeEffect { -- window.addEventListener('click', event => { -+ window.addEventListener('click', (event) => { From df8410a3201c4fcf01961943122eccfe447dc55d Mon Sep 17 00:00:00 2001 From: pablopunk Date: Sat, 12 Sep 2020 01:07:23 +0200 Subject: [PATCH 4/6] WIP --- packages/app/package.json | 3 +- .../src/app/overmind/effects/vscode/index.ts | 18 +--- .../effects/vscode/prettier-config.ts | 91 +++++++++++++++++++ yarn.lock | 8 ++ 4 files changed, 104 insertions(+), 16 deletions(-) create mode 100644 packages/app/src/app/overmind/effects/vscode/prettier-config.ts diff --git a/packages/app/package.json b/packages/app/package.json index ccc1b69f84c..de2a1ce13bb 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -235,7 +235,8 @@ "vue-hot-reload-api": "^2.3.3", "vue-template-compiler": "^2.6.10", "vue-template-es2015-compiler": "^1.9.1", - "xterm": "3.7.0" + "xterm": "3.7.0", + "yamljs": "^0.3.0" }, "devDependencies": { "@babel/cli": "^7.5.5", diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts index e427db1a1c6..e3f23a8428d 100644 --- a/packages/app/src/app/overmind/effects/vscode/index.ts +++ b/packages/app/src/app/overmind/effects/vscode/index.ts @@ -46,6 +46,7 @@ import { OnOperationAppliedData, onSelectionChangeData, } from './ModelsHandler'; +import { getPrettierConfigFromSandbox } from './prettier-config'; import SandboxFsSync from './SandboxFsSync'; import { getSelection } from './utils'; import loadScript from './vscode-script-loader'; @@ -1106,22 +1107,9 @@ export class VSCodeEffect { return null; } - const packageJsonFile = sandbox.modules.find( - (m) => m.type === 'file' && m.path === '/package.json' - ); - const packageJson = JSON.parse(packageJsonFile.code); - if (packageJson?.prettier) { - return packageJson.prettier; - } - - const prettierConfigFile = sandbox.modules.find( - (m) => m.type === 'file' && m.path === '/.prettierrc' - ); - if (prettierConfigFile?.code) { - return JSON.parse(prettierConfigFile.code); - } + const config = getPrettierConfigFromSandbox(sandbox) - return this.settings.prettierConfig || DEFAULT_PRETTIER_CONFIG; + return config || this.settings.prettierConfig || DEFAULT_PRETTIER_CONFIG; }; private onOperationApplied = (data: OnOperationAppliedData) => { diff --git a/packages/app/src/app/overmind/effects/vscode/prettier-config.ts b/packages/app/src/app/overmind/effects/vscode/prettier-config.ts new file mode 100644 index 00000000000..fd3286ff148 --- /dev/null +++ b/packages/app/src/app/overmind/effects/vscode/prettier-config.ts @@ -0,0 +1,91 @@ +import { resolveModule } from '@codesandbox/common/lib/sandbox/modules'; +import { Directory, Module, Sandbox } from '@codesandbox/common/lib/types'; +import YAML from 'yamljs'; +import toml from 'markty-toml'; + +// Get the prettier config object looking for all +// the possible sources, in order of precedence: +// https://prettier.io/docs/en/configuration.html +export function getPrettierConfigFromSandbox(sandbox: Sandbox) { + const { modules } = sandbox; + return ( + getPrettierFromPackageJson(modules) || + getPrettierFromPrettierRC(modules) || + getPrettierFromPrettierRCWithExtension(modules) || + getPrettierFromModule(modules, sandbox.directories) || + getPrettierFromTOML(modules) + ); +} + +function getPrettierFromPackageJson(modules: Module[]) { + const packageJsonFile = modules.find( + m => m.type === 'file' && m.path === '/package.json' + ); + const packageJson = JSON.parse(packageJsonFile.code); + + return packageJson?.prettier; +} + +function lookForFileAndParse( + modules: Module[], + fileNames: string[], + parse: (s: string) => Object +): Object { + const foundFile = modules.find( + m => m.type === 'file' && fileNames.includes(m.path) + ); + + if (foundFile?.code) { + return parse(foundFile.code); + } + + return null; +} + +function getPrettierFromPrettierRC(modules: Module[]) { + return lookForFileAndParse(modules, ['/.prettierrc'], code => { + try { + return JSON.parse(code); + } catch (err) { + return YAML.parse(code); + } + }); +} + +function getPrettierFromPrettierRCWithExtension(modules: Module[]) { + const prettierConfig = lookForFileAndParse( + modules, + ['/.prettierrc.json', '/.prettierrc.json5'], + JSON.parse + ); + + if (prettierConfig) { + return prettierConfig; + } + + return lookForFileAndParse( + modules, + ['/prettier.yml', '/.prettierrc.yaml'], + YAML.parse + ); +} + +function getPrettierFromModule(modules: Module[], directories: Directory[]) { + [ + '/.prettierrc.js', + '/.prettierrc.cjs', + '/prettier.config.js', + '/prettier.config.cjs' + ].forEach(path => { + try { + const prettierConfig = resolveModule(path, modules, directories); + return prettierConfig; + } catch (err) { + return null; + } + }); +} + +function getPrettierFromTOML(modules: Module[]) { + return lookForFileAndParse(modules, ['/.prettierrc.toml'], toml); +} diff --git a/yarn.lock b/yarn.lock index 767fee25047..996d9c60dcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -31645,6 +31645,14 @@ yaml@^1.7.2, yaml@^1.8.3: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e" integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg== +yamljs@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/yamljs/-/yamljs-0.3.0.tgz#dc060bf267447b39f7304e9b2bfbe8b5a7ddb03b" + integrity sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ== + dependencies: + argparse "^1.0.7" + glob "^7.0.5" + yargs-parser@10.x, yargs-parser@^10.0.0: version "10.1.0" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8" From 91c3a89772860fa92513b0dd5d52c6d3e7e36f59 Mon Sep 17 00:00:00 2001 From: pablopunk Date: Sun, 13 Sep 2020 12:28:16 +0200 Subject: [PATCH 5/6] Fix type checks --- .../effects/vscode/prettier-config.ts | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/app/src/app/overmind/effects/vscode/prettier-config.ts b/packages/app/src/app/overmind/effects/vscode/prettier-config.ts index fd3286ff148..c90e853f8f8 100644 --- a/packages/app/src/app/overmind/effects/vscode/prettier-config.ts +++ b/packages/app/src/app/overmind/effects/vscode/prettier-config.ts @@ -19,20 +19,25 @@ export function getPrettierConfigFromSandbox(sandbox: Sandbox) { function getPrettierFromPackageJson(modules: Module[]) { const packageJsonFile = modules.find( - m => m.type === 'file' && m.path === '/package.json' + (m) => m.type === 'file' && m.path === '/package.json' ); - const packageJson = JSON.parse(packageJsonFile.code); - return packageJson?.prettier; + if (packageJsonFile?.code) { + const packageJson = JSON.parse(packageJsonFile.code); + + return packageJson?.prettier; + } + + return null; } function lookForFileAndParse( modules: Module[], fileNames: string[], parse: (s: string) => Object -): Object { +) { const foundFile = modules.find( - m => m.type === 'file' && fileNames.includes(m.path) + (m) => m.type === 'file' && fileNames.includes(m.path) ); if (foundFile?.code) { @@ -43,7 +48,7 @@ function lookForFileAndParse( } function getPrettierFromPrettierRC(modules: Module[]) { - return lookForFileAndParse(modules, ['/.prettierrc'], code => { + return lookForFileAndParse(modules, ['/.prettierrc'], (code) => { try { return JSON.parse(code); } catch (err) { @@ -75,8 +80,8 @@ function getPrettierFromModule(modules: Module[], directories: Directory[]) { '/.prettierrc.js', '/.prettierrc.cjs', '/prettier.config.js', - '/prettier.config.cjs' - ].forEach(path => { + '/prettier.config.cjs', + ].forEach((path) => { try { const prettierConfig = resolveModule(path, modules, directories); return prettierConfig; From d9828d89df21571c8a36623aa47d98a1e204eab9 Mon Sep 17 00:00:00 2001 From: pablopunk Date: Sun, 4 Oct 2020 18:17:47 +0200 Subject: [PATCH 6/6] parses rc yaml --- packages/common/src/templates/configuration/parse.ts | 7 ++++++- .../common/src/templates/configuration/prettierRC/ui.tsx | 9 +++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/common/src/templates/configuration/parse.ts b/packages/common/src/templates/configuration/parse.ts index 097c5b20a7d..e6aa457e7ce 100644 --- a/packages/common/src/templates/configuration/parse.ts +++ b/packages/common/src/templates/configuration/parse.ts @@ -1,4 +1,5 @@ import toml from 'markty-toml'; +import YAML from 'yamljs'; import { parse } from '../../forked-vendors/jsonlint.browser'; import { ConfigurationFile } from '../../templates/configuration/types'; import { ParsedConfigurationFiles } from '../template'; @@ -94,7 +95,11 @@ export default function parseConfigurations( // never throws parsed = toml(code); } else { - parsed = parse(code); + try { + parsed = YAML.parse(code); + } catch (yamlErr) { + parsed = parse(code); + } } configurations[configurationFile.type] = { diff --git a/packages/common/src/templates/configuration/prettierRC/ui.tsx b/packages/common/src/templates/configuration/prettierRC/ui.tsx index fa424cdda7f..6f8155ff00f 100644 --- a/packages/common/src/templates/configuration/prettierRC/ui.tsx +++ b/packages/common/src/templates/configuration/prettierRC/ui.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import YAML from 'yamljs'; import { ConfigDescription, PaddedConfig, @@ -31,8 +32,12 @@ export class ConfigWizard extends React.Component { let error; try { parsedFile = JSON.parse(file); - } catch (e) { - error = e; + } catch (jsonErr) { + try { + parsedFile = YAML.parse(file); + } catch (yamlErr) { + error = jsonErr; + } } if (error) {