add prettier inside worker on shift-tab

gulpfile.js

@@ -17,7 +17,7 @@ function minifyJs(fileName) {
 	const content = fs.readFileSync(fileName, 'utf8');
 	const minifiedContent = babelMinify(
 		content,
-		{ mangle: content.length < 500000 },
+		{ mangle: content.length < 700000 },
 		{ sourceMaps: false }
 	).code;
 	fs.writeFileSync(fileName, minifiedContent);
@@ -39,6 +39,8 @@ gulp.task('copyFiles', function() {
 			.src('src/lib/codemirror/mode/**/*')
 			.pipe(gulp.dest('app/lib/codemirror/mode')),
 		gulp.src('src/lib/transpilers/*').pipe(gulp.dest('app/lib/transpilers')),
+		gulp.src('src/lib/prettier-worker.js').pipe(gulp.dest('app/lib/')),
+		gulp.src('src/lib/prettier/*').pipe(gulp.dest('app/lib/prettier')),
 		gulp.src('src/lib/screenlog.js').pipe(gulp.dest('app/lib')),
 		gulp.src('icons/*').pipe(gulp.dest('app/icons')),
 		gulp.src('src/assets/*').pipe(gulp.dest('app/assets')),

src/components/UserCodeMirror.jsx

@@ -81,8 +81,8 @@ export default class UserCodeMirror extends Component {
 				},
 				'Shift-Tab': function(editor) {
 					if (options.prettier) {
-						editor.setValue(
+						prettify(editor.getValue(), options.prettierParser).then(
-							prettify(editor.getValue(), options.prettierParser)
+							formattedCode => editor.setValue(formattedCode)
 						);
 					} else {
 						CodeMirror.commands.indentAuto(editor);

src/lib/prettier-worker.js

@@ -0,0 +1,25 @@
+importScripts('/lib/prettier/standalone.js');
+
+function prettify({ content, type }) {
+	let plugins, parser;
+	if (type === 'js') {
+		parser = 'babylon';
+		importScripts('/lib/prettier/parser-babylon.js');
+	} else if (type === 'css') {
+		parser = 'css';
+		importScripts('/lib/prettier/parser-postcss.js');
+	}
+
+	if (!parser) {
+		return content;
+	}
+	const formattedContent = prettier.format(content, {
+		parser,
+		plugins: self.prettierPlugins
+	});
+	return formattedContent || content;
+}
+
+onmessage = e => {
+	postMessage(prettify(e.data));
+};

src/utils.js

@@ -461,24 +461,14 @@ export function getFilenameFromUrl(url) {
 }
 
 export function prettify(content, type = 'js') {
-	const prettier = require('prettier/standalone');
+	const d = deferred();
-	let plugins, parser;
+	const worker = new Worker('/lib/prettier-worker.js');
-	if (type === 'js') {
+	worker.postMessage({ content, type });
-		parser = 'babylon';
+	worker.addEventListener('message', e => {
-		plugins = [require('prettier/parser-babylon')];
+		d.resolve(e.data);
-	} else if (type === 'css') {
+		worker.terminate();
-		parser = 'css';
-		plugins = [require('prettier/parser-postcss')];
-	}
-
-	if (!parser) {
-		return content;
-	}
-	const formattedContent = prettier.format(content, {
-		parser,
-		plugins
 	});
-	return formattedContent || content;
+	return d.promise;
 }
 
 if (window.IS_EXTENSION) {