@builder.io/react 3.1.1 → 3.1.2

package/src/blocks/Router.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { BuilderElement, builder, Builder } from '@builder.io/sdk';
 import { BuilderStoreContext } from '../store/builder-store';
 import { BuilderComponent } from '../components/builder-component.component';
@@ -55,7 +55,7 @@ export interface RouteEvent {
   preventDefault(): void;
 }
 
-class RouterComponent extends React.Component<RouterProps> {
+class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
   builder = builder;
 
   routed = false;

package/src/blocks/Section.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { BuilderElement } from '@builder.io/sdk';
 import { BuilderBlock as BuilderBlockComponent } from '../components/builder-block.component';
 import { withBuilder } from '../functions/with-builder';
@@ -14,7 +14,10 @@ interface SectionProps {
   lazyStyles?: any;
 }
 
-class SectionComponent extends React.Component<SectionProps, { inView?: boolean }> {
+class SectionComponent extends React.Component<
+  PropsWithChildren<SectionProps>,
+  { inView?: boolean }
+> {
   ref: HTMLElement | null = null;
 
   unmountCallbacks: Function[] = [];

package/src/blocks/StateProvider.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { BuilderElement } from '@builder.io/sdk';
 import { BuilderBlock as BuilderBlockComponent } from '../components/builder-block.component';
 import { BuilderStoreContext } from '../store/builder-store';
@@ -11,7 +11,7 @@ interface StateProviderProps {
   context?: any;
 }
 
-class StateProviderComponent extends React.Component<StateProviderProps> {
+class StateProviderComponent extends React.Component<PropsWithChildren<StateProviderProps>> {
   render() {
     return (
       <BuilderStoreContext.Consumer>

package/src/blocks/Symbol.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { BuilderComponent } from '../components/builder-component.component';
 import { Builder, BuilderElement } from '@builder.io/sdk';
 import hash from 'hash-sum';
@@ -47,7 +47,7 @@ export interface SymbolProps {
   inheritState?: boolean;
 }
 
-class SymbolComponent extends React.Component<SymbolProps> {
+class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
   ref: BuilderComponent | null = null;
   staticRef: HTMLDivElement | null = null;
 

package/src/blocks/Video.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { throttle } from '../functions/throttle';
 import { withChildren } from '../functions/with-children';
@@ -8,23 +8,25 @@ import { Builder } from '@builder.io/sdk';
 
 const DEFAULT_ASPECT_RATIO = 0.7004048582995948;
 
-class VideoComponent extends React.Component<{
-  video: string;
-  autoPlay?: boolean;
-  controls?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  aspectRatio?: number;
-  width?: number;
-  height?: number;
-  fit?: 'contain' | 'cover' | 'fill';
-  preload?: 'auto' | 'metadata' | 'none';
-  position?: string;
-  posterImage?: string;
-  lazyLoad?: boolean;
-  fitContent?: boolean;
-}> {
+class VideoComponent extends React.Component<
+  PropsWithChildren<{
+    video: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: 'contain' | 'cover' | 'fill';
+    preload?: 'auto' | 'metadata' | 'none';
+    position?: string;
+    posterImage?: string;
+    lazyLoad?: boolean;
+    fitContent?: boolean;
+  }>
+> {
   video: HTMLVideoElement | null = null;
   containerRef: HTMLElement | null = null;
 

package/src/components/Link.tsx

@@ -8,7 +8,7 @@ import { BuilderStoreContext } from '../store/builder-store';
  * custom Link component (e.g Next, Gatsby, React Router)
  * <BuilderComponent renderLink=(props) => <myCustomLink {...props} /> />
  */
-export const Link: React.SFC<React.AnchorHTMLAttributes<HTMLAnchorElement>> = props => (
+export const Link = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
   <BuilderStoreContext.Consumer>
     {context => {
       if (context.renderLink) {

package/src/components/builder-component.component.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
 import { jsx, css } from '@emotion/core';
 import { BuilderContent, getContentWithInfo } from './builder-content.component';
@@ -336,7 +336,7 @@ function searchToObject(location: Location | Url) {
  * `props.content`.
  */
 export class BuilderComponent extends React.Component<
-  BuilderComponentProps,
+  PropsWithChildren<BuilderComponentProps>,
   BuilderComponentState
 > {
   static defaults: Pick<BuilderComponentProps, 'codegen'> = {

package/src/components/variants-provider.component.tsx

@@ -101,10 +101,7 @@ interface VariantsProviderProps {
   children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
 }
 
-export const VariantsProvider: React.SFC<VariantsProviderProps> = ({
-  initialContent,
-  children,
-}) => {
+export const VariantsProvider = ({ initialContent, children }: VariantsProviderProps) => {
   if (Builder.isBrowser && !builder.canTrack) {
     return children([initialContent]);
   }

package/tsconfig.json

@@ -7,6 +7,7 @@
     "module": "es2015",
     "lib": ["dom", "es5", "es2015.promise"],
     "strict": true,
+    "noImplicitAny": false,
     "sourceMap": true,
     "declaration": true,
     "skipLibCheck": true,