mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-11 00:56:25 +02:00
Merge branch 'prettier-on-shift-tab'
This commit is contained in:
11
gulpfile.js
11
gulpfile.js
@ -15,10 +15,15 @@ var packageJson = JSON.parse(fs.readFileSync('./package.json'));
|
|||||||
|
|
||||||
function minifyJs(fileName) {
|
function minifyJs(fileName) {
|
||||||
const content = fs.readFileSync(fileName, 'utf8');
|
const content = fs.readFileSync(fileName, 'utf8');
|
||||||
const minifiedContent = babelMinify(content).code;
|
const minifiedContent = babelMinify(
|
||||||
|
content,
|
||||||
|
{ mangle: content.length < 700000 },
|
||||||
|
{ sourceMaps: false }
|
||||||
|
).code;
|
||||||
fs.writeFileSync(fileName, minifiedContent);
|
fs.writeFileSync(fileName, minifiedContent);
|
||||||
console.log(
|
console.log(
|
||||||
`[${fileName}]: ${content.length}kb -> ${minifiedContent.length}kb`
|
`[${fileName}]: ${content.length / 1024}M -> ${minifiedContent.length /
|
||||||
|
1024}M`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
gulp.task('runWebpack', function() {
|
gulp.task('runWebpack', function() {
|
||||||
@ -34,6 +39,8 @@ gulp.task('copyFiles', function() {
|
|||||||
.src('src/lib/codemirror/mode/**/*')
|
.src('src/lib/codemirror/mode/**/*')
|
||||||
.pipe(gulp.dest('app/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/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('src/lib/screenlog.js').pipe(gulp.dest('app/lib')),
|
||||||
gulp.src('icons/*').pipe(gulp.dest('app/icons')),
|
gulp.src('icons/*').pipe(gulp.dest('app/icons')),
|
||||||
gulp.src('src/assets/*').pipe(gulp.dest('app/assets')),
|
gulp.src('src/assets/*').pipe(gulp.dest('app/assets')),
|
||||||
|
@ -818,7 +818,9 @@ export default class ContentWrap extends Component {
|
|||||||
'CodeMirror-linenumbers',
|
'CodeMirror-linenumbers',
|
||||||
'CodeMirror-foldgutter'
|
'CodeMirror-foldgutter'
|
||||||
],
|
],
|
||||||
emmet: true
|
emmet: true,
|
||||||
|
prettier: true,
|
||||||
|
prettierParser: 'css'
|
||||||
}}
|
}}
|
||||||
prefs={this.props.prefs}
|
prefs={this.props.prefs}
|
||||||
onChange={this.onCssCodeChange.bind(this)}
|
onChange={this.onCssCodeChange.bind(this)}
|
||||||
@ -870,7 +872,9 @@ export default class ContentWrap extends Component {
|
|||||||
'error-gutter',
|
'error-gutter',
|
||||||
'CodeMirror-linenumbers',
|
'CodeMirror-linenumbers',
|
||||||
'CodeMirror-foldgutter'
|
'CodeMirror-foldgutter'
|
||||||
]
|
],
|
||||||
|
prettier: true,
|
||||||
|
prettierParser: 'js'
|
||||||
}}
|
}}
|
||||||
prefs={this.props.prefs}
|
prefs={this.props.prefs}
|
||||||
autoComplete={this.props.prefs.autoComplete}
|
autoComplete={this.props.prefs.autoComplete}
|
||||||
|
@ -32,6 +32,7 @@ import 'codemirror/keymap/vim.js';
|
|||||||
import 'code-blast-codemirror/code-blast.js';
|
import 'code-blast-codemirror/code-blast.js';
|
||||||
|
|
||||||
import emmet from '@emmetio/codemirror-plugin';
|
import emmet from '@emmetio/codemirror-plugin';
|
||||||
|
import { prettify } from '../utils';
|
||||||
|
|
||||||
emmet(CodeMirror);
|
emmet(CodeMirror);
|
||||||
|
|
||||||
@ -79,7 +80,13 @@ export default class UserCodeMirror extends Component {
|
|||||||
CodeMirror.commands.goLineDown(editor);
|
CodeMirror.commands.goLineDown(editor);
|
||||||
},
|
},
|
||||||
'Shift-Tab': function(editor) {
|
'Shift-Tab': function(editor) {
|
||||||
CodeMirror.commands.indentAuto(editor);
|
if (options.prettier) {
|
||||||
|
prettify(editor.getValue(), options.prettierParser).then(
|
||||||
|
formattedCode => editor.setValue(formattedCode)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
CodeMirror.commands.indentAuto(editor);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
Tab: function(editor) {
|
Tab: function(editor) {
|
||||||
if (options.emmet) {
|
if (options.emmet) {
|
||||||
|
@ -1,222 +0,0 @@
|
|||||||
/*
|
|
||||||
Based on Joel Besada's lovely experiment
|
|
||||||
https://twitter.com/JoelBesada/status/670343885655293952
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function () {
|
|
||||||
var shakeTime = 0,
|
|
||||||
shakeTimeMax = 0,
|
|
||||||
shakeIntensity = 5,
|
|
||||||
lastTime = 0,
|
|
||||||
particles = [],
|
|
||||||
particlePointer = 0,
|
|
||||||
MAX_PARTICLES = 100,
|
|
||||||
PARTICLE_NUM_RANGE = { min: 2, max: 7 },
|
|
||||||
PARTICLE_GRAVITY = 0.08,
|
|
||||||
PARTICLE_ALPHA_FADEOUT = 0.96,
|
|
||||||
PARTICLE_VELOCITY_RANGE = {
|
|
||||||
x: [-1, 1],
|
|
||||||
y: [-3.5, -1.5]
|
|
||||||
},
|
|
||||||
w = window.innerWidth,
|
|
||||||
h = window.innerHeight,
|
|
||||||
effect,
|
|
||||||
isActive = false;
|
|
||||||
|
|
||||||
var codemirrors = [], cmNode;
|
|
||||||
var canvas, ctx;
|
|
||||||
var current_time, dt, magnitude, shakeX, shakeY; // loop vars
|
|
||||||
var throttledShake = throttle(shake, 100);
|
|
||||||
var throttledSpawnParticles = throttle(spawnParticles, 100);
|
|
||||||
|
|
||||||
function getRGBComponents(node) {
|
|
||||||
var color = getComputedStyle(node).color;
|
|
||||||
if (color) {
|
|
||||||
try {
|
|
||||||
return color.match(/(\d+), (\d+), (\d+)/).slice(1);
|
|
||||||
} catch(e) {
|
|
||||||
return [255, 255, 255];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return [255, 255, 255];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function spawnParticles(cm, type) {
|
|
||||||
var cursorPos = cm.getCursor();
|
|
||||||
var pos = cm.cursorCoords();
|
|
||||||
var node = document.elementFromPoint(pos.left - 5, pos.top + 5);
|
|
||||||
type = cm.getTokenAt(cursorPos);
|
|
||||||
if (type) { type = type.type; };
|
|
||||||
var numParticles = random(PARTICLE_NUM_RANGE.min, PARTICLE_NUM_RANGE.max);
|
|
||||||
var color = getRGBComponents(node);
|
|
||||||
for (var i = numParticles; i--;) {
|
|
||||||
particles[particlePointer] = createParticle(pos.left + 10, pos.top, color);
|
|
||||||
particlePointer = (particlePointer + 1) % MAX_PARTICLES;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createParticle(x, y, color) {
|
|
||||||
var p = {
|
|
||||||
x: x,
|
|
||||||
y: y + 10,
|
|
||||||
alpha: 1,
|
|
||||||
color: color
|
|
||||||
};
|
|
||||||
if (effect === 1) {
|
|
||||||
p.size = random(2, 4);
|
|
||||||
p.vx = PARTICLE_VELOCITY_RANGE.x[0] + Math.random() *
|
|
||||||
(PARTICLE_VELOCITY_RANGE.x[1] - PARTICLE_VELOCITY_RANGE.x[0]);
|
|
||||||
p.vy = PARTICLE_VELOCITY_RANGE.y[0] + Math.random() *
|
|
||||||
(PARTICLE_VELOCITY_RANGE.y[1] - PARTICLE_VELOCITY_RANGE.y[0]);
|
|
||||||
} else if (effect === 2) {
|
|
||||||
p.size = random(2, 8);
|
|
||||||
p.drag = 0.92;
|
|
||||||
p.vx = random(-3, 3);
|
|
||||||
p.vy = random(-3, 3);
|
|
||||||
p.wander = 0.15;
|
|
||||||
p.theta = random(0, 360) * Math.PI / 180;
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
}
|
|
||||||
|
|
||||||
function effect1(particle) {
|
|
||||||
particle.vy += PARTICLE_GRAVITY;
|
|
||||||
particle.x += particle.vx;
|
|
||||||
particle.y += particle.vy;
|
|
||||||
|
|
||||||
particle.alpha *= PARTICLE_ALPHA_FADEOUT;
|
|
||||||
|
|
||||||
ctx.fillStyle = 'rgba('+ particle.color[0] +','+ particle.color[1] +','+ particle.color[2] + ',' + particle.alpha + ')';
|
|
||||||
ctx.fillRect(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, particle.size);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Effect based on Soulwire's demo: http://codepen.io/soulwire/pen/foktm
|
|
||||||
function effect2(particle) {
|
|
||||||
particle.x += particle.vx;
|
|
||||||
particle.y += particle.vy;
|
|
||||||
particle.vx *= particle.drag;
|
|
||||||
particle.vy *= particle.drag;
|
|
||||||
particle.theta += random( -0.5, 0.5 );
|
|
||||||
particle.vx += Math.sin( particle.theta ) * 0.1;
|
|
||||||
particle.vy += Math.cos( particle.theta ) * 0.1;
|
|
||||||
particle.size *= 0.96;
|
|
||||||
|
|
||||||
ctx.fillStyle = 'rgba('+ particle.color[0] +','+ particle.color[1] +','+ particle.color[2] + ',' + particle.alpha + ')';
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
|
|
||||||
ctx.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawParticles(timeDelta) {
|
|
||||||
var particle;
|
|
||||||
for (var i = particles.length; i--;) {
|
|
||||||
particle = particles[i];
|
|
||||||
if (!particle || particle.alpha < 0.01 || particle.size <= 0.5) { continue; }
|
|
||||||
|
|
||||||
if (effect === 1) { effect1(particle); }
|
|
||||||
else if (effect === 2) { effect2(particle); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function shake(editor, time) {
|
|
||||||
cmNode = editor.getWrapperElement();
|
|
||||||
shakeTime = shakeTimeMax = time;
|
|
||||||
}
|
|
||||||
|
|
||||||
function random(min, max) {
|
|
||||||
if (!max) { max = min; min = 0; }
|
|
||||||
return min + ~~(Math.random() * (max - min + 1))
|
|
||||||
}
|
|
||||||
|
|
||||||
function throttle (callback, limit) {
|
|
||||||
var wait = false;
|
|
||||||
return function () {
|
|
||||||
if (!wait) {
|
|
||||||
callback.apply(this, arguments);
|
|
||||||
wait = true;
|
|
||||||
setTimeout(function () {
|
|
||||||
wait = false;
|
|
||||||
}, limit);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loop() {
|
|
||||||
if (!isActive) { return; }
|
|
||||||
|
|
||||||
ctx.clearRect(0, 0, w, h);
|
|
||||||
|
|
||||||
// get the time past the previous frame
|
|
||||||
current_time = new Date().getTime();
|
|
||||||
if(!lastTime) lastTime = current_time;
|
|
||||||
dt = (current_time - lastTime) / 1000;
|
|
||||||
lastTime = current_time;
|
|
||||||
|
|
||||||
if (shakeTime > 0) {
|
|
||||||
shakeTime -= dt;
|
|
||||||
magnitude = (shakeTime / shakeTimeMax) * shakeIntensity;
|
|
||||||
shakeX = random(-magnitude, magnitude);
|
|
||||||
shakeY = random(-magnitude, magnitude);
|
|
||||||
cmNode.style.transform = 'translate(' + shakeX + 'px,' + shakeY + 'px)';
|
|
||||||
}
|
|
||||||
drawParticles();
|
|
||||||
requestAnimationFrame(loop);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onCodeMirrorChange(editor, change) {
|
|
||||||
if (change.origin !== '+input' && change.origin !== '+delete') { return; }
|
|
||||||
|
|
||||||
if (editor.getOption('blastCode') === true || editor.getOption('blastCode').shake === undefined) {
|
|
||||||
throttledShake(editor, 0.3);
|
|
||||||
}
|
|
||||||
throttledSpawnParticles(editor);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function init(editor) {
|
|
||||||
isActive = true;
|
|
||||||
|
|
||||||
if (!canvas) {
|
|
||||||
canvas = document.createElement('canvas');
|
|
||||||
ctx = canvas.getContext('2d'),
|
|
||||||
|
|
||||||
canvas.id = 'code-blast-canvas'
|
|
||||||
canvas.style.position = 'absolute';
|
|
||||||
canvas.style.top = 0;
|
|
||||||
canvas.style.left = 0;
|
|
||||||
canvas.style.zIndex = 1;
|
|
||||||
canvas.style.pointerEvents = 'none';
|
|
||||||
canvas.width = w;
|
|
||||||
canvas.height = h;
|
|
||||||
|
|
||||||
document.body.appendChild(canvas);
|
|
||||||
loop();
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.on("change", onCodeMirrorChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
function destroy(editor) {
|
|
||||||
editor.off('change', onCodeMirrorChange);
|
|
||||||
codemirrors.splice(codemirrors.indexOf(editor), 1);
|
|
||||||
if (!codemirrors.length) {
|
|
||||||
isActive = false;
|
|
||||||
if (canvas) {
|
|
||||||
canvas.remove();
|
|
||||||
canvas = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
CodeMirror.defineOption('blastCode', false, function(editor, val, old) {
|
|
||||||
if (val) {
|
|
||||||
codemirrors.push(editor);
|
|
||||||
effect = val.effect || 2;
|
|
||||||
init(editor);
|
|
||||||
} else {
|
|
||||||
destroy(editor);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
})();
|
|
25
src/lib/prettier-worker.js
Normal file
25
src/lib/prettier-worker.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
importScripts('./prettier/standalone.js');
|
||||||
|
|
||||||
|
function prettify({ content, type }) {
|
||||||
|
let plugins, parser;
|
||||||
|
if (type === 'js') {
|
||||||
|
parser = 'babylon';
|
||||||
|
importScripts('./prettier/parser-babylon.js');
|
||||||
|
} else if (type === 'css') {
|
||||||
|
parser = 'css';
|
||||||
|
importScripts('./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));
|
||||||
|
};
|
1
src/lib/prettier/parser-babylon.js
Normal file
1
src/lib/prettier/parser-babylon.js
Normal file
File diff suppressed because one or more lines are too long
1
src/lib/prettier/parser-postcss.js
Normal file
1
src/lib/prettier/parser-postcss.js
Normal file
File diff suppressed because one or more lines are too long
1
src/lib/prettier/standalone.js
Normal file
1
src/lib/prettier/standalone.js
Normal file
File diff suppressed because one or more lines are too long
11
src/utils.js
11
src/utils.js
@ -460,6 +460,17 @@ export function getFilenameFromUrl(url) {
|
|||||||
return url.match(/\/([^/]*)$/)[1];
|
return url.match(/\/([^/]*)$/)[1];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function prettify(content, type = 'js') {
|
||||||
|
const d = deferred();
|
||||||
|
const worker = new Worker(`${BASE_PATH}/lib/prettier-worker.js`);
|
||||||
|
worker.postMessage({ content, type });
|
||||||
|
worker.addEventListener('message', e => {
|
||||||
|
d.resolve(e.data);
|
||||||
|
worker.terminate();
|
||||||
|
});
|
||||||
|
return d.promise;
|
||||||
|
}
|
||||||
|
|
||||||
if (window.IS_EXTENSION) {
|
if (window.IS_EXTENSION) {
|
||||||
document.body.classList.add('is-extension');
|
document.body.classList.add('is-extension');
|
||||||
} else {
|
} else {
|
||||||
|
Reference in New Issue
Block a user