feat: add ability to define a custom preview frame html wrapper

meetalva · Jan 20, 2018 · 47e1f4d · 47e1f4d
1 parent a8cd86e
commit 47e1f4d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 15 deletions.
diff --git a/src/component/app.tsx b/src/component/app.tsx
@@ -76,6 +76,9 @@ class App extends React.Component<AppProps> {
 		// Todo: project and page don't update on page change
 		const project = this.props.store.getCurrentProject();
 		const title = `${project && project.getName()}`;
+		const previewFrame = project && project.getPreviewFrame();
+		const previewFramePath =
+			previewFrame && PathUtils.join(this.props.store.getStyleGuidePath(), 'alva', previewFrame);
 
 		const DevTools = getDevTools();
 
@@ -101,7 +104,7 @@ class App extends React.Component<AppProps> {
 								<PatternListContainer store={this.props.store} />
 							</PatternsPane>
 						</SideBar>,
-						<PreviewPane key="center" />,
+						<PreviewPane key="center" previewFrame={previewFramePath} />,
 						<SideBar key="right" directionVertical hasPaddings>
 							<PropertyPane>
 								<PropertyList store={this.props.store} />

diff --git a/src/component/preview.tsx b/src/component/preview.tsx
@@ -49,4 +49,6 @@ ipcRenderer.on('open-styleguide', (event: {}, message: JsonObject) => {
 	store.openStyleguide(message.styleGuidePath as string);
 });
 
-ReactDom.render(<PreviewApp store={store} />, document.getElementById('app'));
+window.onload = () => {
+	ReactDom.render(<PreviewApp store={store} />, document.getElementById('app'));
+};
diff --git a/src/electron/preview.html b/src/electron/preview.html
@@ -6,7 +6,6 @@
 
 <body>
 	<div id="app" style="position: absolute; top:0; bottom:0; left:0; right:0;"></div>
-	<script>require('../../build/component/preview.js')</script>
 </body>
 
-</html>
+</html>
diff --git a/src/lsg/patterns/panes/preview-pane/index.tsx b/src/lsg/patterns/panes/preview-pane/index.tsx
@@ -2,6 +2,10 @@ import { colors } from '../../colors';
 import * as React from 'react';
 import styled from 'styled-components';
 
+export interface PreviewPaneProps {
+	previewFrame?: string;
+}
+
 const StyledPreviewPane = styled.div`
 	flex-grow: 1;
 	flex-shrink: 0;
@@ -11,13 +15,21 @@ const StyledPreviewPane = styled.div`
 	overflow: hidden;
 `;
 
-const PreviewPane: React.StatelessComponent = props => (
-	<StyledPreviewPane
-		dangerouslySetInnerHTML={{
-			__html:
-				'<webview id="preview" style="height: 100%; border-radius: 6px 6px 0 0; overflow: hidden;" src="./preview.html" partition="electron" nodeintegration />'
-		}}
-	/>
-);
+export default class PreviewPane extends React.Component<PreviewPaneProps> {
+	public constructor(props: PreviewPaneProps) {
+		super(props);
+	}
+
+	public render(): JSX.Element {
+		const { previewFrame } = this.props;
 
-export default PreviewPane;
+		return (
+			<StyledPreviewPane
+				dangerouslySetInnerHTML={{
+					__html: `<webview id="preview" style="height: 100%; border-radius: 6px 6px 0 0; overflow: hidden;" src="${previewFrame ||
+						'./preview.html'}" preload="../../build/component/preview.js" partition="electron" nodeintegration />`
+				}}
+			/>
+		);
+	}
+}
diff --git a/src/store/project/project.ts b/src/store/project/project.ts
@@ -30,14 +30,21 @@ export class Project {
 	 */
 	@MobX.observable private pages: PageRef[] = [];
 
+	/**
+	 * Path to the preview frame, relative to the projects.yaml file.
+	 */
+	@MobX.observable private previewFrame: string;
+
 	/**
 	 * Creates a new project.
 	 * @param id The technical (internal) ID of the project.
 	 * @param name The human-friendly name of the project.
+	 * @param previewFrame Path to the preview frame, relative to the projects.yaml file.
 	 */
-	public constructor(id: string, name: string) {
+	public constructor(id: string, name: string, previewFrame: string) {
 		this.id = id;
 		this.name = name;
+		this.previewFrame = previewFrame;
 	}
 
 	/**
@@ -46,7 +53,11 @@ export class Project {
 	 * @return A new project object containing the loaded data.
 	 */
 	public static fromJsonObject(json: JsonObject, store: Store): Project {
-		const project: Project = new Project(json.id as string, json.name as string);
+		const project: Project = new Project(
+			json.id as string,
+			json.name as string,
+			json.previewFrame as string
+		);
 
 		const pages: PageRef[] = [];
 		(json.pages as JsonArray).forEach((pageJson: JsonObject) => {
@@ -91,6 +102,14 @@ export class Project {
 		return this.pages as MobX.IObservableArray<PageRef>;
 	}
 
+	/**
+	 * Returns the configured path to the preview frame, relative to the projects.yaml file.
+	 * @return Path to the configured preview frame
+	 */
+	public getPreviewFrame(): string {
+		return this.previewFrame;
+	}
+
 	/**
 	 * Serializes the project into a JSON object for persistence.
 	 * @return The JSON object to be persisted.
@@ -104,6 +123,7 @@ export class Project {
 		return {
 			id: this.id,
 			name: this.name,
+			previewFrame: this.previewFrame,
 			pages: pagesJsonObject
 		};
 	}