fix preview before mode is loaded, fixes #575

src/components/ContentWrap.jsx

@@ -219,6 +219,11 @@ export default class ContentWrap extends Component {
 	 * @param {boolean} isManual Is this a manual preview request from user?
 	 */
 	setPreviewContent(isForced, isManual) {
+		console.log(
+			'🔎 setPreviewContent',
+			this.cmCodes.css,
+			this.props.currentItem
+		);
 		if (!isManual) {
 			let autoPreview =
 				window.forcedSettings.autoPreview !== undefined
@@ -309,6 +314,16 @@ export default class ContentWrap extends Component {
 	isValidItem(item) {
 		return !!item.title;
 	}
+	handleAllModeRequirements() {
+		if (!this.props.currentItem) {
+			return Promise.resolve();
+		}
+		return Promise.all([
+			handleModeRequirements(this.props.currentItem.htmlMode),
+			handleModeRequirements(this.props.currentItem.cssMode),
+			handleModeRequirements(this.props.currentItem.jsMode)
+		]);
+	}
 	refreshEditor() {
 		this.cmCodes.html = this.props.currentItem.html;
 		this.cmCodes.css = this.props.currentItem.css;

src/components/app.jsx

@@ -281,6 +281,7 @@ export default class App extends Component {
 				code: ''
 			},
 			result => {
+				// debugger;
 				this.toggleLayout(result.layoutMode);
 				this.state.prefs.layoutMode = result.layoutMode;
 				if (result.code) {
@@ -824,8 +825,9 @@ export default class App extends Component {
 		$('#layoutBtn' + mode).classList.add('selected');
 		document.body.classList.add('layout-' + mode);
 
-		this.setState({ currentLayoutMode: mode }, () => {
+		this.setState({ currentLayoutMode: mode }, async () => {
 			this.contentWrap.resetSplitting();
+			await this.contentWrap.handleAllModeRequirements();
 			this.contentWrap.setPreviewContent(true);
 		});
 	}

src/utils.js

@@ -607,6 +607,9 @@ export function prettify({ file, content, type }) {
  * Loaded the code comiler based on the mode selected
  */
 export function handleModeRequirements(mode) {
+	if (!mode) {
+		return Promise.resolve();
+	}
 	const baseTranspilerPath = 'lib/transpilers';
 	// Exit if already loaded
 	var d = deferred();