terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity
next.js/packages/next-server/server/render.tsx

213 lines
6.5 KiB
TypeScript
Raw Normal View History

Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
import {IncomingMessage, ServerResponse} from 'http'
import { ParsedUrlQuery } from 'querystring'
import React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import Router from '../lib/router/router'
import { loadGetInitialProps, isResSent } from '../lib/utils'
import Head, { defaultHead } from '../lib/head'
import Loadable from '../lib/loadable'
import LoadableCapture from '../lib/loadable-capture'
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
import {getDynamicImportBundles, Manifest as ReactLoadableManifest, ManifestItem} from './get-dynamic-import-bundles'
import {getPageFiles, BuildManifest} from './get-page-files'
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
type Enhancer = (Component: React.ComponentType) => React.ComponentType
type ComponentsEnhancer = {enhanceApp?: Enhancer, enhanceComponent?: Enhancer}|Enhancer
function enhanceComponents(options: ComponentsEnhancer, App: React.ComponentType, Component: React.ComponentType): {
App: React.ComponentType,
Component: React.ComponentType
} {
// For backwards compatibility
if(typeof options === 'function') {
return {
App: App,
Component: options(Component)
}
}
return {
App: options.enhanceApp ? options.enhanceApp(App) : App,
Component: options.enhanceComponent ? options.enhanceComponent(Component) : Component
}
}
function render(renderElementToString: (element: React.ReactElement<any>) => string, element: React.ReactElement<any>): {html: string, head: any} {
let html
let head
try {
html = renderElementToString(element)
} finally {
head = Head.rewind() || defaultHead()
}
return { html, head }
}
type RenderOpts = {
staticMarkup: boolean,
buildId: string,
runtimeConfig?: {[key: string]: any},
assetPrefix?: string,
err?: Error|null,
nextExport?: boolean,
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
dev?: boolean,
Remove unused imports. (#5950)
2018-12-26 19:58:17 +00:00
buildManifest: BuildManifest,
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
reactLoadableManifest: ReactLoadableManifest,
Component: React.ComponentType,
Document: React.ComponentType,
App: React.ComponentType,
ErrorDebug?: React.ComponentType<{error: Error}>
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
}
function renderDocument(Document: React.ComponentType, {
props,
docProps,
pathname,
query,
buildId,
assetPrefix,
runtimeConfig,
nextExport,
dynamicImportsIds,
err,
dev,
staticMarkup,
devFiles,
files,
dynamicImports,
}: RenderOpts & {
props: any,
docProps: any,
pathname: string,
query: ParsedUrlQuery,
dynamicImportsIds: string[],
dynamicImports: ManifestItem[],
files: string[]
devFiles: string[],
}): string {
return '<!DOCTYPE html>' + renderToStaticMarkup(
<Document
__NEXT_DATA__={{
props, // The result of getInitialProps
page: pathname, // The rendered page
query, // querystring parsed / passed by the user
buildId, // buildId is used to facilitate caching of page bundles, we send it to the client so that pageloader knows where to load bundles
assetPrefix: assetPrefix === '' ? undefined : assetPrefix, // send assetPrefix to the client side when configured, otherwise don't sent in the resulting HTML
runtimeConfig, // runtimeConfig if provided, otherwise don't sent in the resulting HTML
nextExport, // If this is a page exported by `next export`
dynamicIds: dynamicImportsIds.length === 0 ? undefined : dynamicImportsIds,
err: (err) ? serializeError(dev, err) : undefined // Error if one happened, otherwise don't sent in the resulting HTML
}}
staticMarkup={staticMarkup}
devFiles={devFiles}
files={files}
dynamicImports={dynamicImports}
assetPrefix={assetPrefix}
Change page export validity check on client and server in development (#5857) Resolves #4055 Credit: https://github.com/zeit/next.js/pull/5095 I didn't use the ignore webpack plugin from the original PR and tested bundle size with https://github.com/zeit/next.js/pull/5339 - seems to be safe on that front. Was able to get tests to pass locally, unsure of what goes wrong in CI 🤷‍♂️ **Questions** 1) The initial PR didn't include changes to `next-server/lib/router` in `getRouteInfo()`. Should the same changes be made within? 2) Should we add a test for rendering a component created via `forwardRef()`? `component-with-forwardedRef`: ```javascript export default React.forwardRef((props, ref) => <span {...props} forwardedRef={ref}>This is a component with a forwarded ref</span>); ``` some test: ```javascript test('renders from forwardRef', async () => { const $ = await get$('/component-with-forwardedRef') const span = $('span') expect(span.text()).toMatch(/This is a component with a forwarded ref/) }) ```
2018-12-17 15:09:23 +00:00
{...docProps}
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
/>
)
}
export async function renderToHTML (req: IncomingMessage, res: ServerResponse, pathname: string, query: ParsedUrlQuery, renderOpts: RenderOpts): Promise<string|null> {
const {
err,
dev = false,
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
staticMarkup = false,
App,
Document,
Component,
buildManifest,
reactLoadableManifest,
ErrorDebug
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
} = renderOpts
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
await Loadable.preloadAll() // Make sure all dynamic imports are loaded
Change page export validity check on client and server in development (#5857) Resolves #4055 Credit: https://github.com/zeit/next.js/pull/5095 I didn't use the ignore webpack plugin from the original PR and tested bundle size with https://github.com/zeit/next.js/pull/5339 - seems to be safe on that front. Was able to get tests to pass locally, unsure of what goes wrong in CI 🤷‍♂️ **Questions** 1) The initial PR didn't include changes to `next-server/lib/router` in `getRouteInfo()`. Should the same changes be made within? 2) Should we add a test for rendering a component created via `forwardRef()`? `component-with-forwardedRef`: ```javascript export default React.forwardRef((props, ref) => <span {...props} forwardedRef={ref}>This is a component with a forwarded ref</span>); ``` some test: ```javascript test('renders from forwardRef', async () => { const $ = await get$('/component-with-forwardedRef') const span = $('span') expect(span.text()).toMatch(/This is a component with a forwarded ref/) }) ```
2018-12-17 15:09:23 +00:00
if (dev) {
const { isValidElementType } = require('react-is')
if (!isValidElementType(Component)) {
throw new Error(`The default export is not a React Component in page: "${pathname}"`)
}
Check if App / Document are valid React Components (#5907) We already checked if Document is a valid component, but we didn't yet for App.
2018-12-17 16:42:40 +00:00
if (!isValidElementType(App)) {
throw new Error(`The default export is not a React Component in page: "/_app"`)
}
if (!isValidElementType(Document)) {
throw new Error(`The default export is not a React Component in page: "/_document"`)
}
}
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
const asPath = req.url
const ctx = { err, req, res, pathname, query, asPath }
const router = new Router(pathname, query, asPath)
const props = await loadGetInitialProps(App, {Component, router, ctx})
Change page export validity check on client and server in development (#5857) Resolves #4055 Credit: https://github.com/zeit/next.js/pull/5095 I didn't use the ignore webpack plugin from the original PR and tested bundle size with https://github.com/zeit/next.js/pull/5339 - seems to be safe on that front. Was able to get tests to pass locally, unsure of what goes wrong in CI 🤷‍♂️ **Questions** 1) The initial PR didn't include changes to `next-server/lib/router` in `getRouteInfo()`. Should the same changes be made within? 2) Should we add a test for rendering a component created via `forwardRef()`? `component-with-forwardedRef`: ```javascript export default React.forwardRef((props, ref) => <span {...props} forwardedRef={ref}>This is a component with a forwarded ref</span>); ``` some test: ```javascript test('renders from forwardRef', async () => { const $ = await get$('/component-with-forwardedRef') const span = $('span') expect(span.text()).toMatch(/This is a component with a forwarded ref/) }) ```
2018-12-17 15:09:23 +00:00
// the response might be finished on the getInitialProps call
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
if (isResSent(res)) return null
const devFiles = buildManifest.devFiles
const files = [
...new Set([
...getPageFiles(buildManifest, pathname),
...getPageFiles(buildManifest, '/_app'),
...getPageFiles(buildManifest, '/_error')
])
]
const reactLoadableModules: string[] = []
const renderPage = (options: ComponentsEnhancer = {}): {html: string, head: any} => {
const renderElementToString = staticMarkup ? renderToStaticMarkup : renderToString
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
if(err && ErrorDebug) {
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
return render(renderElementToString, <ErrorDebug error={err} />)
}
Move out requires from renderToHTML (#5915) This brings us one step closer to outputting serverless functions as renderToHTML now renders the passed components, which allows us to bundle the renderToHTML function together with statically imported components in webpack.
2018-12-18 16:12:49 +00:00
const {App: EnhancedApp, Component: EnhancedComponent} = enhanceComponents(options, App, Component)
Change page export validity check on client and server in development (#5857) Resolves #4055 Credit: https://github.com/zeit/next.js/pull/5095 I didn't use the ignore webpack plugin from the original PR and tested bundle size with https://github.com/zeit/next.js/pull/5339 - seems to be safe on that front. Was able to get tests to pass locally, unsure of what goes wrong in CI 🤷‍♂️ **Questions** 1) The initial PR didn't include changes to `next-server/lib/router` in `getRouteInfo()`. Should the same changes be made within? 2) Should we add a test for rendering a component created via `forwardRef()`? `component-with-forwardedRef`: ```javascript export default React.forwardRef((props, ref) => <span {...props} forwardedRef={ref}>This is a component with a forwarded ref</span>); ``` some test: ```javascript test('renders from forwardRef', async () => { const $ = await get$('/component-with-forwardedRef') const span = $('span') expect(span.text()).toMatch(/This is a component with a forwarded ref/) }) ```
2018-12-17 15:09:23 +00:00
return render(renderElementToString,
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
<LoadableCapture report={(moduleName) => reactLoadableModules.push(moduleName)}>
<EnhancedApp
Component={EnhancedComponent}
router={router}
{...props}
/>
Change page export validity check on client and server in development (#5857) Resolves #4055 Credit: https://github.com/zeit/next.js/pull/5095 I didn't use the ignore webpack plugin from the original PR and tested bundle size with https://github.com/zeit/next.js/pull/5339 - seems to be safe on that front. Was able to get tests to pass locally, unsure of what goes wrong in CI 🤷‍♂️ **Questions** 1) The initial PR didn't include changes to `next-server/lib/router` in `getRouteInfo()`. Should the same changes be made within? 2) Should we add a test for rendering a component created via `forwardRef()`? `component-with-forwardedRef`: ```javascript export default React.forwardRef((props, ref) => <span {...props} forwardedRef={ref}>This is a component with a forwarded ref</span>); ``` some test: ```javascript test('renders from forwardRef', async () => { const $ = await get$('/component-with-forwardedRef') const span = $('span') expect(span.text()).toMatch(/This is a component with a forwarded ref/) }) ```
2018-12-17 15:09:23 +00:00
</LoadableCapture>
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
)
}
const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage })
Fix typo in a comment (#5982)
2019-01-02 19:21:57 +00:00
// the response might be finished on the getInitialProps call
Convert render.js to typescript (#5869) * Convert render.js to typescript * Compile tsx files too * Remove internal renderErrorToHTML function * Interopt component result * requirePage doesn’t need async * Move out enhancing logic into it’s own function * Remove buildManifest from renderPage * Move render into it’s own function * Change let to const * Move renderDocument into it’s own function
2018-12-13 00:00:46 +00:00
if (isResSent(res)) return null
const dynamicImports = [...getDynamicImportBundles(reactLoadableManifest, reactLoadableModules)]
const dynamicImportsIds: any = dynamicImports.map((bundle) => bundle.id)
return renderDocument(Document, {
...renderOpts,
props,
docProps,
pathname,
query,
dynamicImportsIds,
dynamicImports,
files,
devFiles
})
}
function errorToJSON (err: Error): Error {
const { name, message, stack } = err
return { name, message, stack }
}
function serializeError (dev: boolean|undefined, err: Error): Error & {statusCode?: number} {
if (dev) {
return errorToJSON(err)
}
return { name: 'Internal Server Error.', message: '500 - Internal Server Error.', statusCode: 500 }
}
Reference in a new issue Copy permalink