better type for AppTree in NextPageContext (#8662)
* better type for AppTree in NextPageContext * updated tests * new AppTreeType type and updated tests * removed a commented out line * another take on the type of AppTree, with updated tests * allow passing additional props to AppType * Update suite name
This commit is contained in:
parent
9fa8baa03a
commit
92e26ce1b1
4 changed files with 17 additions and 26 deletions
|
@ -28,6 +28,10 @@ export type AppType = NextComponentType<
|
||||||
AppPropsType
|
AppPropsType
|
||||||
>
|
>
|
||||||
|
|
||||||
|
export type AppTreeType = ComponentType<
|
||||||
|
AppInitialProps & { [name: string]: any }
|
||||||
|
>
|
||||||
|
|
||||||
export type Enhancer<C> = (Component: C) => C
|
export type Enhancer<C> = (Component: C) => C
|
||||||
|
|
||||||
export type ComponentsEnhancer =
|
export type ComponentsEnhancer =
|
||||||
|
@ -98,12 +102,12 @@ export interface NextPageContext {
|
||||||
/**
|
/**
|
||||||
* `Component` the tree of the App to use if needing to render separately
|
* `Component` the tree of the App to use if needing to render separately
|
||||||
*/
|
*/
|
||||||
AppTree: AppType
|
AppTree: AppTreeType
|
||||||
}
|
}
|
||||||
|
|
||||||
export type AppContextType<R extends NextRouter = NextRouter> = {
|
export type AppContextType<R extends NextRouter = NextRouter> = {
|
||||||
Component: NextComponentType<NextPageContext>
|
Component: NextComponentType<NextPageContext>
|
||||||
AppTree: AppType
|
AppTree: AppTreeType
|
||||||
ctx: NextPageContext
|
ctx: NextPageContext
|
||||||
router: R
|
router: R
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,29 +5,15 @@ import App, { AppContext } from 'next/app'
|
||||||
import { renderToString } from 'react-dom/server'
|
import { renderToString } from 'react-dom/server'
|
||||||
|
|
||||||
class MyApp<P = {}> extends App<P & { html: string }> {
|
class MyApp<P = {}> extends App<P & { html: string }> {
|
||||||
static async getInitialProps({
|
static async getInitialProps({ Component, AppTree, ctx }: AppContext) {
|
||||||
Component,
|
|
||||||
AppTree,
|
|
||||||
router,
|
|
||||||
ctx,
|
|
||||||
}: AppContext) {
|
|
||||||
let pageProps = {}
|
let pageProps = {}
|
||||||
|
|
||||||
if (Component.getInitialProps) {
|
if (Component.getInitialProps) {
|
||||||
pageProps = await Component.getInitialProps(ctx)
|
pageProps = await Component.getInitialProps(ctx)
|
||||||
}
|
}
|
||||||
|
|
||||||
let html
|
let html: string
|
||||||
const toRender = (
|
const toRender = <AppTree pageProps={pageProps} another="prop" />
|
||||||
<AppTree
|
|
||||||
{...{
|
|
||||||
router,
|
|
||||||
Component,
|
|
||||||
pageProps,
|
|
||||||
another: 'hello',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const el = document.createElement('div')
|
const el = document.createElement('div')
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
import { render } from 'react-dom'
|
import { render } from 'react-dom'
|
||||||
import { renderToString } from 'react-dom/server'
|
import { renderToString } from 'react-dom/server'
|
||||||
|
import { NextPage } from 'next'
|
||||||
|
|
||||||
const Page = ({ html }) =>
|
const Page: NextPage<{ html: string }> = ({ html }) =>
|
||||||
html ? (
|
html ? (
|
||||||
<>
|
<>
|
||||||
<p>saved:</p>
|
<p>saved:</p>
|
||||||
|
@ -11,11 +13,10 @@ const Page = ({ html }) =>
|
||||||
<p>Hello world</p>
|
<p>Hello world</p>
|
||||||
)
|
)
|
||||||
|
|
||||||
Page.getInitialProps = async ({ AppTree, pathname, query, asPath }) => {
|
Page.getInitialProps = async ({ AppTree }) => {
|
||||||
let html
|
let html: string
|
||||||
const toRender = (
|
|
||||||
<AppTree router={{ pathname, query, asPath }} Component={Page} />
|
const toRender = <AppTree pageProps={{}} />
|
||||||
)
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const el = document.createElement('div')
|
const el = document.createElement('div')
|
|
@ -52,7 +52,7 @@ const runTests = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
describe('Auto Export', () => {
|
describe('AppTree', () => {
|
||||||
describe('dev mode', () => {
|
describe('dev mode', () => {
|
||||||
beforeAll(async () => {
|
beforeAll(async () => {
|
||||||
appPort = await findPort()
|
appPort = await findPort()
|
||||||
|
|
Loading…
Reference in a new issue