feat: add support for functional App

.eslintrc.js

@@ -1,4 +1,8 @@
 module.exports = {
   root: true,
   extends: ["@wowvendor/eslint-config-base", "@wowvendor/eslint-config-react", "@wowvendor/eslint-config-typescript"],
+  rules: {
+    "react/destructuring-assignment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+  },
 };

rollup.config.js

@@ -22,7 +22,6 @@ export default {
       sourcemap: true,
       exports: "named",
       file: pkg.main,
-      interop: false,
       externalLiveBindings: false,
     },
   ],
@@ -38,6 +37,7 @@ export default {
     commonjs({ extensions }),
   ],
   external: [
+    "next/app",
     "effector/fork",
     "effector-react/ssr",
     ...Object.keys(Object.assign({}, pkg.dependencies, pkg.peerDependencies)),

src/lib/get-start-units.ts

@@ -1,7 +1,6 @@
-import { AppInitialProps } from "next/app";
-import { Unit, is } from "effector";
+import { is, Unit } from "effector";
 
-import { AppType, Enhancer, RenderPage, PageContext } from "../types";
+import { AppType, AppProps, Enhancer, RenderPage, PageContext } from "../types";
 
 import { START_UNIT_KEY } from "./constants";
 
@@ -15,14 +14,13 @@ export function getStartUnits(originalRenderPage: RenderPage) {
   return units.filter(is.unit);
 }
 
-function getStartUnit<P extends AppInitialProps>(units: StartUnits): Enhancer<AppType<P>> {
+function getStartUnit<P extends AppProps>(units: StartUnits): Enhancer<AppType<P>> {
   return () => (props) => {
-    if (START_UNIT_KEY in props) {
+    if (props?.[START_UNIT_KEY]) {
       units.push(props[START_UNIT_KEY]);
     }
 
-    // eslint-disable-next-line react/destructuring-assignment
-    if (START_UNIT_KEY in props.pageProps) {
+    if (props?.pageProps?.[START_UNIT_KEY]) {
       units.push(props.pageProps[START_UNIT_KEY]);
     }
 

src/lib/render-page-with-scope.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { Provider } from "effector-react/ssr";
-import { AppInitialProps } from "next/app";
 import { Scope } from "effector/fork";
 
-import { AppType, Enhancer, RenderPage } from "../types";
+import { AppType, AppProps, Enhancer, RenderPage } from "../types";
 
 export function renderPageWithScope(scope: Scope, originalRenderPage: RenderPage): RenderPage {
   return (params) => {
@@ -20,10 +19,7 @@ export function renderPageWithScope(scope: Scope, originalRenderPage: RenderPage
   };
 }
 
-function createEnhanceApp<P extends AppInitialProps>(
-  scope: Scope,
-  enhancer?: Enhancer<AppType<P>>,
-): Enhancer<AppType<P>> {
+function createEnhanceApp<P extends AppProps>(scope: Scope, enhancer?: Enhancer<AppType<P>>): Enhancer<AppType<P>> {
   return (Component) => (props) => {
     const App = enhancer ? enhancer(Component) : Component;
 

src/types/extracted.ts

@@ -4,4 +4,6 @@ import { NextComponentType } from "next";
 
 export type Enhancer<C> = (Component: C) => C;
 export type RenderPage = DocumentContext["renderPage"];
-export type AppType<P extends AppInitialProps> = NextComponentType<AppContext, AppInitialProps, P>;
+export type TargetComponentType<C> = NextComponentType<C, any, any>;
+export type AppProps = AppInitialProps & { Component: NextComponentType };
+export type AppType<P extends AppProps> = NextComponentType<AppContext, AppInitialProps, P>;

src/with-fork.tsx

@@ -22,7 +22,7 @@ interface CustomDocumentProps extends DocumentProps {
 
 export interface WithForkConfig {
   debug?: boolean;
-  serializeIgnore?: Array<Store<unknown>>;
+  serializeIgnore?: Array<Store<any>>;
 }
 
 export function withFork({ debug, serializeIgnore }: WithForkConfig = {}) {

src/with-hydrate.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
-import NextApp, { AppProps } from "next/app";
+import NextApp, { AppContext, AppProps } from "next/app";
 import { hydrate } from "effector/fork";
 
 import { domain } from "./domain";
 import { INITIAL_STATE_KEY } from "./lib";
+import { TargetComponentType } from "./types";
 
 declare global {
   interface Window {
@@ -12,13 +13,15 @@ declare global {
   }
 }
 
+type HydratedApp = TargetComponentType<AppContext> & { origGetInitialProps?: never };
+
 export function withHydrate() {
   const isServer = typeof window === "undefined";
 
-  return (App: typeof NextApp) =>
-    class WithHydrateApp extends React.Component<AppProps> {
-      static origGetInitialProps = App.origGetInitialProps;
-      static getInitialProps = App.getInitialProps;
+  return (App: HydratedApp) => {
+    const WithHydrateApp = class WithHydrateApp extends React.Component<AppProps> {
+      static origGetInitialProps = App.origGetInitialProps || NextApp.origGetInitialProps;
+      static getInitialProps = NextApp.getInitialProps;
 
       constructor(props: AppProps) {
         super(props);
@@ -32,4 +35,22 @@ export function withHydrate() {
         return <App {...this.props} />;
       }
     };
+
+    if (App.getInitialProps) {
+      WithHydrateApp.getInitialProps = async (ctx: any) => {
+        const [nextAppProps, hydratedAppProps] = await Promise.all([
+          NextApp.getInitialProps(ctx),
+          App.getInitialProps!(ctx),
+        ]);
+
+        return {
+          ...nextAppProps,
+          ...hydratedAppProps,
+          pageProps: Object.assign({}, nextAppProps?.pageProps, hydratedAppProps?.pageProps),
+        };
+      };
+    }
+
+    return WithHydrateApp;
+  };
 }

src/with-start.ts

@@ -1,13 +1,9 @@
-import { NextPageContext, NextComponentType } from "next";
+import { NextPageContext } from "next";
 import { AppContext } from "next/app";
 import { Unit } from "effector";
 
-import { PageContext } from "./types";
 import { START_UNIT_KEY } from "./lib";
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-type TargetComponentType<C> = NextComponentType<C, any, any>;
+import { PageContext, TargetComponentType } from "./types";
 
 export function withStart(unit: Unit<PageContext>) {
   return (component: TargetComponentType<AppContext> | TargetComponentType<NextPageContext>) => {
@@ -17,7 +13,7 @@ export function withStart(unit: Unit<PageContext>) {
     component.getInitialProps = async (ctx: any) => {
       let initialProps = {};
 
-      if (originalGetInitialProps) {
+      if (typeof originalGetInitialProps === "function") {
         initialProps = await originalGetInitialProps(ctx);
       }