feat(electron): move preview in webview

meetalva · Dec 8, 2017 · 3cebb70 · 3cebb70
1 parent 9fd4013
commit 3cebb70
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -5,9 +5,11 @@
 	"main": "dist/electron/index.js",
 	"scripts": {
 		"build": "tslint --project . -c tslint.json 'src/**/*.ts' && tsc --project .",
-		"start": "npm run build && concurrently \"electron dist/electron\" \"tsc --project . --watch\"",
+		"start":
+			"npm run build && concurrently \"electron dist/electron\" \"tsc --project . --watch\"",
 		"build-lsg": "tsc --project src/lsg --outDir dist/lsg/patterns --sourceMap",
-		"start-lsg": "npm run build-lsg && concurrently \"npm run build-lsg -- -w\" \"patternplate start\""
+		"start-lsg":
+			"npm run build-lsg && concurrently \"npm run build-lsg -- -w\" \"patternplate start\""
 	},
 	"repository": {
 		"type": "git",

diff --git a/src/component/app.tsx b/src/component/app.tsx
@@ -3,7 +3,6 @@ import { IconName, IconRegistry } from '../lsg/patterns/icons';
 import Layout from '../lsg/patterns/layout';
 import DevTools from 'mobx-react-devtools';
 import { PatternList } from './container/pattern_list';
-import { Preview } from './presentation/preview';
 import { ProjectList } from './container/project_list';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
@@ -30,8 +29,6 @@ const PatternsPane = styledComponents.div`
 
 const PreviewPane = styledComponents.div`
 	flex: 2 0 0px;
-	padding: 10px;
-	box-shadow: inset 0 0 10px 0 rgba(0,0,0,.25);
 `;
 
 interface AppProps {
@@ -62,10 +59,12 @@ class App extends React.Component<AppProps> {
 
 				<IconRegistry names={IconName} />
 
-				<PreviewPane>
-					<Preview store={this.props.store} />
-				</PreviewPane>
-
+				<PreviewPane
+					dangerouslySetInnerHTML={{
+						__html:
+							'<webview style="height: 100%;" src="./preview.html" partition="electron" nodeintegration />'
+					}}
+				/>
 				<DevTools />
 			</Layout>
 		);

diff --git a/src/component/preview.tsx b/src/component/preview.tsx
@@ -0,0 +1,40 @@
+import Layout from '../lsg/patterns/layout';
+import DevTools from 'mobx-react-devtools';
+import { Preview } from './presentation/preview';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Store } from '../store';
+import styledComponents from 'styled-components';
+
+const PreviewPane = styledComponents.div`
+	flex: 2 0 0px;
+	padding: 10px;
+	box-shadow: inset 0 0 10px 0 rgba(0,0,0,.25);
+`;
+
+interface AppProps {
+	store: Store;
+}
+
+class App extends React.Component<AppProps> {
+	public constructor(props: AppProps) {
+		super(props);
+	}
+
+	public render(): JSX.Element {
+		return (
+			<Layout>
+				<PreviewPane>
+					<Preview store={this.props.store} />
+				</PreviewPane>
+				<DevTools />
+			</Layout>
+		);
+	}
+}
+
+const store = new Store();
+store.openStyleguide('../stacked-example');
+store.openPage('my-project', 'mypage');
+
+ReactDom.render(<App store={store} />, document.getElementById('app'));
diff --git a/src/electron/index.html b/src/electron/index.html
@@ -9,4 +9,4 @@
 	<script>require('../../dist/component/app.js')</script>
 </body>
 
-</html>
+</html>
diff --git a/src/electron/preview.html b/src/electron/preview.html
@@ -0,0 +1,12 @@
+<html>
+
+<head>
+	<title>Stacked&trade;</title>
+</head>
+
+<body>
+	<div id="app" style="position: absolute; top:0; bottom:0; left:0; right:0;"></div>
+	<script>require('../../dist/component/preview.js')</script>
+</body>
+
+</html>