Fix double re-render in LiftWrapper and migrate it to PureComponent

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 logs
 *.log
 npm-debug.log*

packages/examples/all/src/app.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Atom, Lens } from '@grammarly/focal'
 
 interface ExampleComponent<S> {
-  Component: React.StatelessComponent<{ state: Atom<S> }>
+  Component: React.FunctionComponent<{ state: Atom<S> }>
   defaultState: S
 }
 

packages/examples/all/src/index.tsx

@@ -23,7 +23,7 @@ function startApp(C: typeof App.AppComponent) {
   if (targetEl == null)
     throw new Error('React app target element not found. Wrong HTML file?')
 
-  ReactDOM.render(<C state={appState} />, targetEl)
+  ReactDOM.render(<React.StrictMode><C state={appState} /></React.StrictMode>, targetEl)
 }
 
 if (module.hot) {

packages/examples/all/src/player/index.tsx

@@ -52,7 +52,8 @@ const TimeLine = ({
 class App extends React.Component<{ state: Atom<AppState> }, {}> {
   audioModel: AudioModel
 
-  componentWillMount() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
     this.audioModel = new AudioModel(this.props.state, audioSrc)
   }
 

packages/examples/todomvc/src/app.tsx

@@ -209,7 +209,7 @@ export class App {
 
   start() {
     ReactDOM.render(
-      <AppComponent model={this._model}/>,
+      <React.StrictMode><AppComponent model={this._model}/></React.StrictMode>,
       this._targetElement
     )
   }

packages/focal/src/react/intrinsic.ts

@@ -5,7 +5,7 @@
  */
 import * as React from 'react'
 import { ObservableReactHTMLProps, ObservableReactChildren } from './observablePropTypes'
-import { LiftWrapperProps, LiftWrapper } from './react'
+import { LiftWrapper } from './react'
 
 export interface LiftedIntrinsicComponentProps<E> extends ObservableReactHTMLProps<E> {
   mount?: React.Ref<E>
@@ -15,7 +15,7 @@ export interface LiftedIntrinsicComponentProps<E> extends ObservableReactHTMLPro
 export interface LiftedIntrinsic<
   E extends Element, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>> {
   (props: LiftedIntrinsicComponentProps<E>):
-    React.ReactElement<LiftWrapperProps<ObservableReactHTMLProps<E, A>>>
+    React.ReactElement<LiftWrapper.Props<ObservableReactHTMLProps<E, A>>>
 }
 
 export function liftIntrinsic<
@@ -25,8 +25,8 @@ export function liftIntrinsic<
   intrinsicClassName: K
 ): LiftedIntrinsic<E> {
   return (props: LiftedIntrinsicComponentProps<E>) =>
-    React.createElement<LiftWrapperProps<ObservableReactHTMLProps<E>>>(
-      LiftWrapper,
+    React.createElement<LiftWrapper.Props<ObservableReactHTMLProps<E>>>(
+      LiftWrapper.Renderer,
       { component: intrinsicClassName, props: props }
     )
 }
@@ -45,7 +45,7 @@ export interface LiftedFragmentAttributes extends ObservableReactChildren, React
 export interface LiftedFragment {
   (props: LiftedFragmentAttributes):
     // @TODO this probably isn't a correct type for it
-    React.ReactElement<LiftWrapperProps<ObservableReactHTMLProps<{}>>>
+    React.ReactElement<LiftWrapper.Props<ObservableReactHTMLProps<{}>>>
 }
 
 interface ExtraLiftedIntrinsics {
@@ -79,7 +79,7 @@ export function createLiftedIntrinsics(): LiftedIntrinsics {
   )
 
   r.Fragment = (props: LiftedFragmentAttributes) =>
-    React.createElement(LiftWrapper, { component: React.Fragment, props })
+    React.createElement(LiftWrapper.Renderer, { component: React.Fragment, props })
 
   return r as LiftedIntrinsics
 }