From 41ae269d9b263e64dda134fbc72d8ab0d2925c6f Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 14 Oct 2018 16:30:28 +0530 Subject: [PATCH] add prettier support for js,css,markdown fixes #234 --- src/components/ContentWrapFiles.jsx | 35 ++++++++++++++++++++++++----- src/components/FileIcon.jsx | 3 ++- src/components/app.jsx | 20 +++++++++++++++-- src/fileUtils.js | 9 ++++++++ src/tests/fileUtils.test.js | 14 +++++++++++- src/utils.js | 32 ++++++++++++++++++++++++++ 6 files changed, 104 insertions(+), 9 deletions(-) diff --git a/src/components/ContentWrapFiles.jsx b/src/components/ContentWrapFiles.jsx index dc8751b..67a06c3 100644 --- a/src/components/ContentWrapFiles.jsx +++ b/src/components/ContentWrapFiles.jsx @@ -3,7 +3,7 @@ import UserCodeMirror from './UserCodeMirror'; import { modes, HtmlModes, CssModes, JsModes } from '../codeModes'; import { log, loadJS } from '../utils'; -import { linearizeFiles, assignFilePaths } from '../fileUtils'; +import { linearizeFiles, assignFilePaths, getFileFromPath } from '../fileUtils'; import { SplitPane } from './SplitPane'; import { trackEvent } from '../analytics'; @@ -58,6 +58,19 @@ export default class ContentWrapFiles extends Component { this.fileBuffers = {}; this.state.selectedFile = null; } + + if ( + nextProps.currentItem.files !== this.props.currentItem.files && + this.state.selectedFile && + this.fileBuffers[this.state.selectedFile.path] + ) { + this.fileBuffers[this.state.selectedFile.path].setValue( + getFileFromPath( + nextProps.currentItem.files, + this.state.selectedFile.path + ).file.content + ); + } } componentDidUpdate() { const { currentItem } = this.props; @@ -72,6 +85,7 @@ export default class ContentWrapFiles extends Component { ) { this.fileSelectHandler(linearFiles[0]); } + // HACK: becuase its a DOM manipulation // window.logCountEl.textContent = this.logCount; // log('🚀', 'didupdate', this.props.currentItem); @@ -125,7 +139,7 @@ export default class ContentWrapFiles extends Component { CodeMirror.autoLoadMode(this.cm, mode.cmPath || mode.cmMode); - this.fileBuffers[file.name] = CodeMirror.Doc( + this.fileBuffers[file.path] = CodeMirror.Doc( file.content || '', mode.cmMode ); @@ -259,7 +273,6 @@ export default class ContentWrapFiles extends Component { return !!item.title; } refreshEditor() { - this.cmCodes.html = this.props.currentItem.html; if (this.state.selectedFile) { this.cm.setValue(this.state.selectedFile.content); } @@ -458,10 +471,10 @@ export default class ContentWrapFiles extends Component { editorOptions: this.getEditorOptions(file.name), selectedFile: file }); - if (!this.fileBuffers[file.name]) { + if (!this.fileBuffers[file.path]) { this.createEditorDoc(file); } - this.cm.swapDoc(this.fileBuffers[file.name]); + this.cm.swapDoc(this.fileBuffers[file.path]); // var cmMode = 'html'; // if (file.name.match(/\.css$/)) { @@ -561,6 +574,9 @@ export default class ContentWrapFiles extends Component { } } + prettifyBtnClickHandler() { + this.props.onPrettifyBtnClick(this.state.selectedFile); + } render() { return (
+
{ - if (file.name === type.name) { + if (file.path === type.path) { file.content = code; } }); @@ -1291,6 +1293,19 @@ export default class App extends Component { return classes.join(' '); } + prettify(selectedFile) { + const currentItem = { + ...this.state.currentItem, + files: [...this.state.currentItem.files] + }; + const formattedContent = prettify(selectedFile); + if (formattedContent !== selectedFile.content) { + selectedFile.content = formattedContent; + this.incrementUnsavedChanges(); + this.setState({ currentItem }); + } + } + render() { return (
@@ -1327,6 +1342,7 @@ export default class App extends Component { onRenameFile={this.renameFileHandler.bind(this)} onFileDrop={this.fileDropHandler.bind(this)} onFolderSelect={this.folderSelectHandler.bind(this)} + onPrettifyBtnClick={this.prettify.bind(this)} /> ) : ( { + test('should return correct extension', () => { + expect(getExtensionFromFileName('test.js')).toBe('js'); + expect(getExtensionFromFileName('test.css')).toBe('css'); + expect(getExtensionFromFileName('test.main.css')).toBe('css'); + }); + test('should return empty string when no extension is found', () => { + expect(getExtensionFromFileName('hello')).toBe(''); + }); +}); + describe('assignFilePaths', () => { test('should assign path on linear file system', () => { const files = [{ name: 'index.html' }, { name: 'main.css' }]; diff --git a/src/utils.js b/src/utils.js index 4f5e495..58b895a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -3,6 +3,7 @@ import { trackEvent } from './analytics'; import { computeHtml, computeCss, computeJs } from './computes'; import { JsModes } from './codeModes'; import { deferred } from './deferred'; +import { getExtensionFromFileName } from './fileUtils'; const esprima = require('esprima'); window.DEBUG = document.cookie.indexOf('wmdebug') > -1; @@ -465,3 +466,34 @@ if (window.IS_EXTENSION) { } else { document.body.classList.add('is-app'); } + +export function prettify(file) { + const prettier = require('prettier/standalone'); + const fileExtension = getExtensionFromFileName(file.name); + + let plugins, parser; + switch (fileExtension) { + case 'js': + parser = 'babylon'; + plugins = [require('prettier/parser-babylon')]; + break; + case 'css': + parser = 'css'; + plugins = [require('prettier/parser-postcss')]; + break; + case 'md': + case 'markdown': + parser = 'markdown'; + plugins = [require('prettier/parser-markdown')]; + break; + } + + if (!parser) { + return file.content; + } + + return prettier.format(file.content, { + parser, + plugins + }); +}