+
-
+
-
- Made by
- Kushagra Gour
+
+ Made by
+ Kushagra Gour
diff --git a/preact.config.js b/preact.config.js
index 0f1779f..733e2f7 100644
--- a/preact.config.js
+++ b/preact.config.js
@@ -1,4 +1,4 @@
-var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+// var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
/**
* Function that mutates original webpack config.
@@ -8,7 +8,7 @@ var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
* @param {object} env - options passed to CLI.
* @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
**/
-export default function(config, env, helpers) {
+export default function (config, env, helpers) {
const htmlWebpackPlugin = helpers.getPluginsByName(
config,
'HtmlWebpackPlugin'
@@ -34,20 +34,24 @@ export default function(config, env, helpers) {
// Remove the default hash append in chunk name
config.output.chunkFilename = '[name].chunk.js';
- config.plugins.push(
- new CommonsChunkPlugin({
- name: 'vendor',
- minChunks: ({ resource }) => /node_modules/.test(resource)
- })
- );
+ // config.plugins.push(
+ // new CommonsChunkPlugin({
+ // name: 'vendor',
+ // minChunks: ({ resource }) => /node_modules/.test(resource)
+ // })
+ // );
const swPlugin = helpers.getPluginsByName(
config,
'SWPrecacheWebpackPlugin'
)[0];
- config.plugins.splice(swPlugin.index, 1);
+ if (swPlugin) {
+ // config.plugins.splice(swPlugin.index, 1);
+ }
const uglifyPlugin = helpers.getPluginsByName(config, 'UglifyJsPlugin')[0];
- config.plugins.splice(uglifyPlugin.index, 1);
+ if (uglifyPlugin) {
+ // config.plugins.splice(uglifyPlugin.index, 1);
+ }
}
}
diff --git a/src/components/AddLibrary.jsx b/src/components/AddLibrary.jsx
index 79987c5..92295cb 100644
--- a/src/components/AddLibrary.jsx
+++ b/src/components/AddLibrary.jsx
@@ -2,6 +2,8 @@ import { h, Component } from 'preact';
import { jsLibs, cssLibs } from '../libraryList';
import { trackEvent } from '../analytics';
import { LibraryAutoSuggest } from './LibraryAutoSuggest';
+import { Trans, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
export default class AddLibrary extends Component {
constructor(props) {
@@ -58,87 +60,104 @@ export default class AddLibrary extends Component {
}
render() {
return (
-
-
Add Library
+
+ {({ i18n }) => (
+
+
+ Add Library
+
-
-
-
-
+
+
+
+
+
+
+
+ Powered by cdnjs
+
+
+
+ Choose from popular libraries:{' '}
+
+
+
+
JS
+
+ Put each library in new line
+
+
+
+
+ Note: You can load external scripts only from following domains:
+
+ localhost, https://ajax.googleapis.com, https://code.jquery.com,
+ https://cdnjs.cloudflare.com, https://unpkg.com,
+ https://maxcdn.com, https://cdn77.com,
+ https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/,
+ https://rawgit.com, https://wzrd.in, https://cdn.tailwindcss.com
+
+
+
-
-
-
- Powered by cdnjs
-
-
- Choose from popular libraries:{' '}
-
-
- JS
- Put each library in new line
-
-
- Note: You can load external scripts only from following domains:
- localhost, https://ajax.googleapis.com, https://code.jquery.com,
- https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
- https://cdn77.com, https://maxcdn.bootstrapcdn.com,
- https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in,
- https://cdn.tailwindcss.com
-
-
-
-
- CSS
- Put each library in new line
-
-
+
CSS
+
+ Put each library in new line
+
+
+
+ )}
+
);
}
}
diff --git a/src/components/Console.jsx b/src/components/Console.jsx
index 069baec..6929d25 100644
--- a/src/components/Console.jsx
+++ b/src/components/Console.jsx
@@ -1,7 +1,8 @@
import { h, Component } from 'preact';
import { Inspector, chromeDark } from 'react-inspector';
-import { Trans } from '@lingui/macro';
-import { PureComponent } from 'preact-compat';
+import { Trans, t, NumberFormat } from '@lingui/macro';
+import { I18n } from '@lingui/react';
+import { PureComponent } from 'preact/compat';
class LogRow extends Component {
shouldComponentUpdate() {
@@ -24,6 +25,10 @@ class LogRow extends Component {
}
export class Console extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.mouseMoveHandler = this.mouseMoveHandler.bind(this);
+ }
componentDidUpdate(previousProps) {
if (this.props.logs !== previousProps.logs) {
// Scroll down after new log dom is inserted
@@ -32,6 +37,42 @@ export class Console extends PureComponent {
}, 1);
}
}
+ componentWillUnmount() {
+ this.endDragging();
+ }
+
+ endDragging() {
+ if (!this.isDragging) {
+ return;
+ }
+
+ this.isDragging = false;
+ window.consoleEl.style.transition = this.savedTransition;
+ window.removeEventListener('mousemove', this.mouseMoveHandler);
+ window.removeEventListener('mouseup', this.mouseUpHandler);
+ }
+ mouseDownHandler(e) {
+ if (!this.props.isConsoleOpen) {
+ return true;
+ }
+ this.isDragging = true;
+ this.startY = e.pageY;
+ this.startHeight = window.consoleEl.getBoundingClientRect().height;
+ this.savedTransition = window.getComputedStyle(window.consoleEl).transition;
+ window.consoleEl.style.transition = 'none';
+
+ window.addEventListener('mousemove', this.mouseMoveHandler);
+ window.addEventListener('mouseup', this.mouseUpHandler);
+ }
+ mouseUpHandler() {
+ this.endDragging();
+ }
+
+ mouseMoveHandler(e) {
+ if (!this.isDragging) return true;
+ const newHeight = this.startHeight + (this.startY - e.pageY);
+ window.consoleEl.style.height = `${newHeight}px`;
+ }
render() {
const {
@@ -44,62 +85,70 @@ export class Console extends PureComponent {
} = this.props;
return (
-
-
+
+ {({ i18n }) => (
- {
- this.logContainerEl = el;
- }}
- >
- {logs.map(log => (
-
- ))}
-
-
-
-
-
-
-
+ )}
+
);
}
}
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index f1c6132..5a77994 100644
--- a/src/components/ContentWrap.jsx
+++ b/src/components/ContentWrap.jsx
@@ -2,12 +2,16 @@ import { h, Component } from 'preact';
import CodeEditor from './CodeEditor.jsx';
import { computeHtml, computeCss, computeJs } from '../computes';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
-import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
+import {
+ log,
+ writeFile,
+ getCompleteHtml,
+ handleModeRequirements,
+ sanitizeSplitSizes
+} from '../utils';
import { SplitPane } from './SplitPane.jsx';
import { trackEvent } from '../analytics';
-import CodeMirror from '../CodeMirror';
import { Console } from './Console';
-import { deferred } from '../deferred';
import CssSettingsModal from './CssSettingsModal';
import { PreviewDimension } from './PreviewDimension.jsx';
const minCodeWrapSize = 33;
@@ -313,9 +317,7 @@ export default class ContentWrap extends Component {
// Replace correct css file in LINK tags's href
if (prefs.editorTheme) {
- window.editorThemeLinkTag.href = `lib/codemirror/theme/${
- prefs.editorTheme
- }.css`;
+ window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
}
window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
@@ -391,12 +393,18 @@ export default class ContentWrap extends Component {
resetSplitting() {
this.setState({
- codeSplitSizes: this.getCodeSplitSizes(),
- mainSplitSizes: this.getMainSplitSizesToApply()
+ codeSplitSizes: sanitizeSplitSizes(this.getCodeSplitSizes()),
+ mainSplitSizes: sanitizeSplitSizes(this.getMainSplitSizesToApply())
});
}
- updateSplits() {
- this.props.onSplitUpdate();
+ updateSplits(sizes) {
+ // HACK: This is weird thing happening. We call `onSplitUpdate` on parent. That calculates
+ // and sets sizes from the DOM on the currentItem. And then we read that size to update
+ // this component's state (codeSplitSizes and mainSPlitSizes).
+ // If we don't update, then some re-render will reset the pane sizes as ultimately the state
+ // variables here govern the split.
+ this.props.onSplitUpdate(sizes);
+
// Not using setState to avoid re-render
this.state.codeSplitSizes = this.props.currentItem.sizes;
this.state.mainSplitSizes = this.props.currentItem.mainSizes;
@@ -426,7 +434,7 @@ export default class ContentWrap extends Component {
return [33.33, 33.33, 33.33];
}
- mainSplitDragEndHandler() {
+ mainSplitDragEndHandler(sizes) {
if (this.props.prefs.refreshOnResize) {
// Running preview updation in next call stack, so that error there
// doesn't affect this dragend listener.
@@ -434,7 +442,7 @@ export default class ContentWrap extends Component {
this.setPreviewContent(true);
}, 1);
}
- this.updateSplits();
+ this.updateSplits(sizes);
}
mainSplitDragHandler() {
this.previewDimension.update({
@@ -445,77 +453,30 @@ export default class ContentWrap extends Component {
codeSplitDragStart() {
document.body.classList.add('is-dragging');
}
- codeSplitDragEnd() {
+ codeSplitDragEnd(sizes) {
this.updateCodeWrapCollapseStates();
document.body.classList.remove('is-dragging');
- this.updateSplits();
- }
- /**
- * Loaded the code comiler based on the mode selected
- */
- handleModeRequirements(mode) {
- const baseTranspilerPath = 'lib/transpilers';
- // Exit if already loaded
- var d = deferred();
- if (modes[mode].hasLoaded) {
- d.resolve();
- return d.promise;
- }
-
- function setLoadedFlag() {
- modes[mode].hasLoaded = true;
- d.resolve();
- }
-
- if (mode === HtmlModes.JADE) {
- loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
- } else if (mode === HtmlModes.MARKDOWN) {
- loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
- } else if (mode === CssModes.LESS) {
- loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
- } else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
- loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
- window.sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
- setLoadedFlag();
- });
- } else if (mode === CssModes.STYLUS) {
- loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
- } else if (mode === CssModes.ACSS) {
- loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
- } else if (mode === JsModes.COFFEESCRIPT) {
- loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
- } else if (mode === JsModes.ES6) {
- loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
- } else if (mode === JsModes.TS) {
- loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
- } else {
- d.resolve();
- }
-
- return d.promise;
+ this.updateSplits(sizes);
}
updateHtmlMode(value) {
this.props.onCodeModeChange('html', value);
this.props.currentItem.htmlMode = value;
this.cm.html.setLanguage(value);
- return this.handleModeRequirements(value);
+ return handleModeRequirements(value);
}
updateCssMode(value) {
this.props.onCodeModeChange('css', value);
this.props.currentItem.cssMode = value;
this.cm.css.setOption('readOnly', modes[value].cmDisable);
- window.cssSettingsBtn.classList[
- modes[value].hasSettings ? 'remove' : 'add'
- ]('hide');
this.cm.css.setLanguage(value);
- return this.handleModeRequirements(value);
+ return handleModeRequirements(value);
}
updateJsMode(value) {
this.props.onCodeModeChange('js', value);
this.props.currentItem.jsMode = value;
this.cm.js.setLanguage(value);
- return this.handleModeRequirements(value);
+ return handleModeRequirements(value);
}
codeModeChangeHandler(e) {
var mode = e.target.value;
@@ -776,17 +737,19 @@ export default class ContentWrap extends Component {