fix: keep dev pane backwards compat

src/container/app-pane.tsx

@@ -7,6 +7,7 @@ export interface AppPaneProps {
 	pane: Types.AppPane;
 	force?: boolean;
 	children: React.ReactNode;
+	size?: { width: number | string; height: number | string };
 	defaultSize?: { width: number | string; height: number | string };
 	enable?: { top?: boolean; right?: boolean; bottom?: boolean; left?: boolean };
 	minWidth?: number;
@@ -26,7 +27,7 @@ export class AppPane extends React.Component<AppPaneProps> {
 			return null;
 		}
 
-		const paneSize = props.pane ? app.getPaneSize(props.pane) : undefined;
+		const paneSize = props.size || props.pane ? app.getPaneSize(props.pane) : undefined;
 
 		const defaultSize = paneSize
 			? { width: paneSize.width, height: paneSize.height }

src/container/pane-development-editor.tsx

@@ -106,6 +106,16 @@ export class PaneDevelopmentEditor extends React.Component {
 				scheduler: fn => setTimeout(fn, 1000)
 			}
 		);
+
+		Mobx.autorun(() => {
+			const value = storeEnhancer.getTypeScript();
+
+			if (value === this.editor.getValue() && storeEnhancer.getJavaScript() !== 'undefined') {
+				return;
+			}
+
+			this.editor.setValue(value);
+		});
 	}
 
 	public componentWillUnmount(): void {

src/container/view-details.tsx

@@ -22,6 +22,19 @@ export class ViewDetails extends React.Component {
 	public render(): JSX.Element {
 		const props = this.props as { store: ViewStore };
 
+		/**
+		 * TODO: Remove before releasing BETA
+		 * Hack for backwards compat with versions that computed js output instead of saving -
+		 * for those we have to transpile the ts payload once, thus create an editor
+		 */
+		const forceEditor =
+			!props.store.getApp().isVisible(Types.AppPane.DevelopmentPane) &&
+			typeof props.store
+				.getProject()
+				.getUserStore()
+				.getEnhancer()
+				.getJavaScript() === 'undefined';
+
 		return (
 			<React.Fragment>
 				<AppPane
@@ -80,6 +93,11 @@ export class ViewDetails extends React.Component {
 					>
 						<PaneDevelopmentEditor />
 					</AppPane>
+					{forceEditor && (
+						<div style={{ position: 'fixed', top: '100vh' }}>
+							<PaneDevelopmentEditor />
+						</div>
+					)}
 				</div>
 				<AppPane
 					pane={Types.AppPane.PropertiesPane}

src/model/user-store-enhancer.ts

@@ -1,14 +1,10 @@
-// import * as Fs from 'fs';
 import * as Mobx from 'mobx';
 import * as Types from '../types';
-// import * as TypeScript from 'typescript';
 import { UserStore } from './user-store';
 import { DesignTimeUserStore } from './design-time-user-store';
 import * as uuid from 'uuid';
 import * as VM from 'vm';
 
-// const MemoryFilesystem = require('memory-fs');
-
 export interface UserStoreEnhancerModule {
 	onStoreCreate(store: DesignTimeUserStore): DesignTimeUserStore;
 }
@@ -115,7 +111,11 @@ export class UserStoreEnhancer {
 	}
 
 	public static from(serialized: Types.SerializedUserStoreEnhancer): UserStoreEnhancer {
-		return new UserStoreEnhancer(serialized || {});
+		return new UserStoreEnhancer({
+			id: serialized.id,
+			typeScript: serialized.typeScript || serialized.code || '',
+			javaScript: serialized.javaScript
+		});
 	}
 
 	public getApi(): string {
@@ -126,6 +126,10 @@ export class UserStoreEnhancer {
 		return this.id;
 	}
 
+	public getJavaScript(): string {
+		return this.javaScript;
+	}
+
 	public getTypeScript(): string {
 		return this.typeScript;
 	}

src/types/user-store.ts

@@ -63,6 +63,8 @@ export interface SerializedUserStoreReference {
 }
 
 export interface SerializedUserStoreEnhancer {
+	/** @deprecated */
+	code?: string;
 	model: ModelName.UserStoreEnhancer;
 	id: string;
 	typeScript: string;