fix: remove dependency on mobx from preview-renderer

meetalva · May 24, 2018 · 3506ce3 · 3506ce3
1 parent a6bfbb3
commit 3506ce3
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 53 deletions.
diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx
@@ -1,17 +1,10 @@
-// import { ComponentGetter } from './get-component';
 import { HighlightArea } from './highlight-area';
-import * as MobX from 'mobx';
-import * as MobXReact from 'mobx-react';
 import { PreviewStore } from './preview';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Helmet } from 'react-helmet';
 import * as Types from '../model/types';
 
-// TODO: Produces a deprecation warning, find a way
-// to dedupe MobX when upgrading to 4.x
-MobX.extras.shareGlobalState();
-
 export interface RenderInit {
 	highlight: HighlightArea;
 	store: PreviewStore;
@@ -25,23 +18,26 @@ export interface RenderInit {
 	getSlots(slots: any, render: (props: any) => any): any;
 }
 
-export interface InjectedPreviewHighlightProps {
+export interface PreviewHighlightProps {
 	highlight: HighlightArea;
 }
 
-export interface InjectedPreviewApplicationProps {
-	highlight: HighlightArea;
-	store: PreviewStore;
+export interface PreviewApplicationProps {
+	getChildren: RenderInit['getChildren'];
+	getComponent: RenderInit['getComponent'];
+	getProperties: RenderInit['getProperties'];
+	getSlots: RenderInit['getSlots'];
+	highlight: RenderInit['highlight'];
+	store: RenderInit['store'];
 }
 
-interface InjectedPreviewComponentProps extends Types.SerializedElement {
+interface PreviewComponentProps extends Types.SerializedElement {
 	getChildren: RenderInit['getChildren'];
 	getComponent: RenderInit['getComponent'];
 	getProperties: RenderInit['getProperties'];
 	getSlots: RenderInit['getSlots'];
-	highlight: HighlightArea;
-	store: PreviewStore;
-	// tslint:disable-next-line:no-any
+	highlight: RenderInit['highlight'];
+	store: RenderInit['store'];
 }
 
 interface ErrorBoundaryProps {
@@ -101,25 +97,21 @@ const SYNTHETICS = {
 
 export function render(init: RenderInit): void {
 	ReactDom.render(
-		<MobXReact.Provider
+		<PreviewApplication
 			getChildren={init.getChildren}
 			getComponent={init.getComponent}
 			getProperties={init.getProperties}
 			getSlots={init.getSlots}
 			store={init.store}
 			highlight={init.highlight}
-		>
-			<PreviewApplication />
-		</MobXReact.Provider>,
+		/>,
 		document.getElementById('preview')
 	);
 }
 
-@MobXReact.inject('store', 'highlight')
-@MobXReact.observer
-class PreviewApplication extends React.Component {
+class PreviewApplication extends React.Component<PreviewApplicationProps> {
 	public render(): JSX.Element | null {
-		const props = this.props as InjectedPreviewApplicationProps;
+		const props = this.props;
 		const currentPage = props.store.pages.find(page => page.id === props.store.pageId);
 
 		if (!currentPage) {
@@ -136,12 +128,18 @@ class PreviewApplication extends React.Component {
 			<React.Fragment>
 				<PreviewComponent
 					contentIds={element.contentIds}
+					getChildren={props.getChildren}
+					getComponent={props.getComponent}
+					getProperties={props.getProperties}
+					getSlots={props.getSlots}
+					highlight={props.highlight}
+					id={element.id}
+					name={element.name}
 					patternId={element.patternId}
 					properties={element.properties}
-					name={element.name}
-					id={element.id}
+					store={props.store}
 				/>
-				<PreviewHighlight />
+				<PreviewHighlight highlight={props.highlight} />
 			</React.Fragment>
 		);
 	}
@@ -166,11 +164,9 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
 	}
 }
 
-@MobXReact.inject('getChildren', 'getComponent', 'getProperties', 'getSlots', 'store', 'highlight')
-@MobXReact.observer
-class PreviewComponent extends React.Component<Types.SerializedElement> {
+class PreviewComponent extends React.Component<PreviewComponentProps> {
 	public componentWillUpdate(): void {
-		const props = this.props as InjectedPreviewComponentProps;
+		const props = this.props;
 
 		if (props.id === props.store.elementId) {
 			const node = ReactDom.findDOMNode(this);
@@ -184,13 +180,33 @@ class PreviewComponent extends React.Component<Types.SerializedElement> {
 	}
 
 	public render(): JSX.Element | null {
-		const props = this.props as InjectedPreviewComponentProps;
-
-		const children = props.getChildren(props, child => (
-			<PreviewComponent key={child.id} {...child} />
+		const props = this.props;
+
+		const children = props.getChildren(props, (child: Types.SerializedElement) => (
+			<PreviewComponent
+				key={child.id}
+				getChildren={props.getChildren}
+				getComponent={props.getComponent}
+				getProperties={props.getProperties}
+				getSlots={props.getSlots}
+				highlight={props.highlight}
+				store={props.store}
+				{...child}
+			/>
 		));
 
-		const slots = props.getSlots(props, child => <PreviewComponent key={child.id} {...child} />);
+		const slots = props.getSlots(props, (child: Types.SerializedElement) => (
+			<PreviewComponent
+				key={child.id}
+				getChildren={props.getChildren}
+				getComponent={props.getComponent}
+				getProperties={props.getProperties}
+				getSlots={props.getSlots}
+				highlight={props.highlight}
+				store={props.store}
+				{...child}
+			/>
+		));
 
 		const properties = props.getProperties(props.properties);
 
@@ -211,11 +227,9 @@ class PreviewComponent extends React.Component<Types.SerializedElement> {
 	}
 }
 
-@MobXReact.inject('store', 'highlight')
-@MobXReact.observer
-class PreviewHighlight extends React.Component {
+class PreviewHighlight extends React.Component<PreviewHighlightProps> {
 	public render(): JSX.Element {
-		const props = this.props as InjectedPreviewHighlightProps;
+		const props = this.props;
 		const { highlight } = props;
 		const p = highlight.getProps();
 

diff --git a/src/preview/preview.tsx b/src/preview/preview.tsx
@@ -1,15 +1,11 @@
 import * as HtmlSketchApp from '@brainly/html-sketchapp';
 import { HighlightArea } from './highlight-area';
 import { PreviewMessageType } from '../message';
-import * as MobX from 'mobx';
+import * as Mobx from 'mobx';
 import { PreviewDocumentMode } from './preview-document';
 import * as SmoothscrollPolyfill from 'smoothscroll-polyfill';
 import * as Types from '../model/types';
 
-// TODO: Produces a deprecation warning, find a way
-// to dedupe MobX when upgrading to 4.x
-MobX.extras.shareGlobalState();
-
 interface InitialData {
 	data: {
 		pageId: string;
@@ -19,15 +15,15 @@ interface InitialData {
 }
 
 export class PreviewStore {
-	@MobX.observable public elementContents: Types.SerializedElementContent[] = [];
+	@Mobx.observable public elementContents: Types.SerializedElementContent[] = [];
 
-	@MobX.observable public elementId: string = '';
-	@MobX.observable public elements: Types.SerializedElement[] = [];
-	@MobX.observable public mode: PreviewDocumentMode = PreviewDocumentMode.Live;
-	@MobX.observable public pageId: string = '';
-	@MobX.observable public pages: Types.SerializedPage[] = [];
-	@MobX.observable public patternProperties: Types.SerializedPatternProperty[] = [];
-	@MobX.observable public patterns: Types.SerializedPattern[] = [];
+	@Mobx.observable public elementId: string = '';
+	@Mobx.observable public elements: Types.SerializedElement[] = [];
+	@Mobx.observable public mode: PreviewDocumentMode = PreviewDocumentMode.Live;
+	@Mobx.observable public pageId: string = '';
+	@Mobx.observable public pages: Types.SerializedPage[] = [];
+	@Mobx.observable public patternProperties: Types.SerializedPatternProperty[] = [];
+	@Mobx.observable public patterns: Types.SerializedPattern[] = [];
 
 	private constructor() {}
 
@@ -110,7 +106,11 @@ function main(): void {
 	}
 
 	startRouter(store);
-	render();
+
+	Mobx.autorun(() => {
+		Object.keys(store).forEach(key => store[key]);
+		render();
+	});
 }
 
 function getInitialData(): InitialData | undefined {