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
 }