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

Convert render.js to typescript (#5869)

Browse source 
* 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
This commit is contained in:
Tim Neutkens 2018-12-13 01:00:46 +01:00 committed by GitHub
parent 81a2a6c429
commit 5e3bf6e537
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 242 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/next-server/lib/loadable-capture.js → packages/next-server/lib/loadable-capture.tsx
View file

@ -23,7 +23,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
import React from 'react'
import PropTypes from 'prop-types'
export default class Capture extends React.Component {
type Props = {
report: (moduleName: string) => void
}
export default class Capture extends React.Component<Props> {
static propTypes = {
report: PropTypes.func.isRequired
};

2
packages/next-server/lib/loadable.js
View file

@ -315,4 +315,4 @@ Loadable.preloadReady = (webpackIds) => {
})
}
module.exports = Loadable
export default Loadable

2
packages/next-server/package.json
View file

@ -42,6 +42,8 @@
"devDependencies": {
"@taskr/clear": "1.1.0",
"@taskr/watch": "1.1.0",
"@types/react": "16.7.13",
"@types/react-dom": "16.0.11",
"@types/send": "0.14.4",
"taskr": "1.1.0",
"typescript": "3.1.6"

2
packages/next-server/server/get-dynamic-import-bundles.ts
View file

@ -1,4 +1,4 @@
type ManifestItem = {
export type ManifestItem = {
id: number|string,
name: string,
file: string,

10
packages/next-server/server/next-server.ts
View file

@ -4,10 +4,7 @@ import { resolve, join, sep } from 'path'
import { parse as parseUrl, UrlWithParsedQuery } from 'url'
import { parse as parseQs, ParsedUrlQuery } from 'querystring'
import fs from 'fs'
import {
renderToHTML,
renderErrorToHTML
} from './render'
import {renderToHTML} from './render'
import {sendHTML} from './send-html'
import {serveStatic} from './serve-static'
import Router, {route, Route} from './router'
@ -246,11 +243,14 @@ export default class Server {
public async renderError (err: Error|null, req: IncomingMessage, res: ServerResponse, pathname: string, query: ParsedUrlQuery = {}): Promise<void> {
res.setHeader('Cache-Control', 'no-cache, no-store, max-age=0, must-revalidate')
const html = await this.renderErrorToHTML(err, req, res, pathname, query)
if(html === null) {
return
}
return this.sendHTML(req, res, html)
}
public async renderErrorToHTML (err: Error|null, req: IncomingMessage, res: ServerResponse, pathname: string, query: ParsedUrlQuery = {}) {
return renderErrorToHTML(err, req, res, pathname, query, this.renderOpts)
return renderToHTML(req, res, '/_error', query, {...this.renderOpts, err})
}
public async render404 (req: IncomingMessage, res: ServerResponse, parsedUrl?: UrlWithParsedQuery): Promise<void> {

162
packages/next-server/server/render.js
View file

@ -1,162 +0,0 @@
import { join } from 'path'
import React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import {requirePage} from './require'
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'
import { BUILD_MANIFEST, REACT_LOADABLE_MANIFEST, SERVER_DIRECTORY, CLIENT_STATIC_FILES_PATH } from 'next-server/constants'
import {getDynamicImportBundles} from './get-dynamic-import-bundles'
import {getPageFiles} from './get-page-files'
export function renderToHTML (req, res, pathname, query, opts) {
return doRender(req, res, pathname, query, opts)
}
// _pathname is for backwards compatibility
export function renderErrorToHTML (err, req, res, _pathname, query, opts = {}) {
return doRender(req, res, '/_error', query, { ...opts, err })
}
async function doRender (req, res, pathname, query, {
err,
buildId,
assetPrefix,
runtimeConfig,
distDir,
dev = false,
staticMarkup = false,
nextExport
} = {}) {
const documentPath = join(distDir, SERVER_DIRECTORY, CLIENT_STATIC_FILES_PATH, buildId, 'pages', '_document')
const appPath = join(distDir, SERVER_DIRECTORY, CLIENT_STATIC_FILES_PATH, buildId, 'pages', '_app')
let [buildManifest, reactLoadableManifest, Component, Document, App] = await Promise.all([
require(join(distDir, BUILD_MANIFEST)),
require(join(distDir, REACT_LOADABLE_MANIFEST)),
requirePage(pathname, distDir),
require(documentPath),
require(appPath)
])
await Loadable.preloadAll() // Make sure all dynamic imports are loaded
Component = Component.default || Component
if (typeof Component !== 'function') {
throw new Error(`The default export is not a React Component in page: "${pathname}"`)
}
App = App.default || App
Document = Document.default || Document
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})
const devFiles = buildManifest.devFiles
const files = [
...new Set([
...getPageFiles(buildManifest, pathname),
...getPageFiles(buildManifest, '/_app'),
...getPageFiles(buildManifest, '/_error')
])
]
// the response might be finshed on the getinitialprops call
if (isResSent(res)) return null
let reactLoadableModules = []
const renderPage = (options = Page => Page) => {
let EnhancedApp = App
let EnhancedComponent = Component
// For backwards compatibility
if (typeof options === 'function') {
EnhancedComponent = options(Component)
} else if (typeof options === 'object') {
if (options.enhanceApp) {
EnhancedApp = options.enhanceApp(App)
}
if (options.enhanceComponent) {
EnhancedComponent = options.enhanceComponent(Component)
}
}
const render = staticMarkup ? renderToStaticMarkup : renderToString
let html
let head
try {
if (err && dev) {
const ErrorDebug = require(join(distDir, SERVER_DIRECTORY, 'error-debug')).default
html = render(<ErrorDebug error={err} />)
} else {
html = render(
<LoadableCapture report={moduleName => reactLoadableModules.push(moduleName)}>
<EnhancedApp
Component={EnhancedComponent}
router={router}
{...props}
/>
</LoadableCapture>
)
}
} finally {
head = Head.rewind() || defaultHead()
}
return { html, head, buildManifest }
}
const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage })
const dynamicImports = [...getDynamicImportBundles(reactLoadableManifest, reactLoadableModules)]
const dynamicImportsIds = dynamicImports.map((bundle) => bundle.id)
if (isResSent(res)) return null
if (!Document.prototype || !Document.prototype.isReactComponent) throw new Error('_document.js is not exporting a React component')
const doc = <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,
devFiles,
files,
dynamicImports,
assetPrefix, // We always pass assetPrefix as a top level property since _document needs it to render, even though the client side might not need it
...docProps
}} />
return '<!DOCTYPE html>' + renderToStaticMarkup(doc)
}
function errorToJSON (err) {
const { name, message, stack } = err
const json = { name, message, stack }
if (err.module) {
// rawRequest contains the filename of the module which has the error.
const { rawRequest } = err.module
json.module = { rawRequest }
}
return json
}
function serializeError (dev, err) {
if (dev) {
return errorToJSON(err)
}
return { message: '500 - Internal Server Error.' }
}

208
packages/next-server/server/render.tsx Normal file
View file

@ -0,0 +1,208 @@
import {IncomingMessage, ServerResponse} from 'http'
import { ParsedUrlQuery } from 'querystring'
import { join } from 'path'
import React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import {requirePage} from './require'
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'
import { BUILD_MANIFEST, REACT_LOADABLE_MANIFEST, SERVER_DIRECTORY, CLIENT_STATIC_FILES_PATH } from 'next-server/constants'
import {getDynamicImportBundles, ManifestItem} from './get-dynamic-import-bundles'
import {getPageFiles} from './get-page-files'
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 interoptDefault(mod: any) {
return mod.default || mod
}
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,
distDir: string,
buildId: string,
runtimeConfig?: {[key: string]: any},
assetPrefix?: string,
err?: Error|null,
nextExport?: boolean,
dev?: boolean
}
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}
{...docProps}
/>
)
}
export async function renderToHTML (req: IncomingMessage, res: ServerResponse, pathname: string, query: ParsedUrlQuery, renderOpts: RenderOpts): Promise<string|null> {
const {
err,
buildId,
distDir,
dev = false,
staticMarkup = false
} = renderOpts
const documentPath = join(distDir, SERVER_DIRECTORY, CLIENT_STATIC_FILES_PATH, buildId, 'pages', '_document')
const appPath = join(distDir, SERVER_DIRECTORY, CLIENT_STATIC_FILES_PATH, buildId, 'pages', '_app')
let [buildManifest, reactLoadableManifest, Component, Document, App] = await Promise.all([
require(join(distDir, BUILD_MANIFEST)),
require(join(distDir, REACT_LOADABLE_MANIFEST)),
interoptDefault(requirePage(pathname, distDir)),
interoptDefault(require(documentPath)),
interoptDefault(require(appPath))
])
await Loadable.preloadAll() // Make sure all dynamic imports are loaded
if (typeof Component !== 'function') {
throw new Error(`The default export is not a React Component in page: "${pathname}"`)
}
if (!Document.prototype || !Document.prototype.isReactComponent) throw new Error('_document.js is not exporting a React component')
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})
// the response might be finshed on the getInitialProps call
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 {App: EnhancedApp, Component: EnhancedComponent} = enhanceComponents(options, App, Component)
const renderElementToString = staticMarkup ? renderToStaticMarkup : renderToString
if(err && dev) {
const ErrorDebug = require(join(distDir, SERVER_DIRECTORY, 'error-debug')).default
return render(renderElementToString, <ErrorDebug error={err} />)
}
return render(renderElementToString,
<LoadableCapture report={(moduleName) => reactLoadableModules.push(moduleName)}>
<EnhancedApp
Component={EnhancedComponent}
router={router}
{...props}
/>
</LoadableCapture>
)
}
const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage })
// the response might be finshed on the getInitialProps call
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 }
}

2
packages/next-server/server/require.ts
View file

@ -45,7 +45,7 @@ export function getPagePath (page: string, distDir: string): string {
return join(serverBuildPath, pagesManifest[page])
}
export async function requirePage (page: string, distDir: string): Promise<any> {
export function requirePage (page: string, distDir: string): any {
const pagePath = getPagePath(page, distDir)
return require(pagePath)
}

8
packages/next-server/taskfile.js
View file

@ -1,12 +1,12 @@
const notifier = require('node-notifier')
export async function lib (task, opts) {
await task.source(opts.src || 'lib/**/*.+(js|ts)').typescript({module: 'commonjs'}).target('dist/lib')
await task.source(opts.src || 'lib/**/*.+(js|ts|tsx)').typescript({module: 'commonjs'}).target('dist/lib')
notify('Compiled lib files')
}
export async function server (task, opts) {
await task.source(opts.src || 'server/**/*.+(js|ts)').typescript({module: 'commonjs'}).target('dist/server')
await task.source(opts.src || 'server/**/*.+(js|ts|tsx)').typescript({module: 'commonjs'}).target('dist/server')
notify('Compiled server files')
}
@ -17,8 +17,8 @@ export async function build (task) {
export default async function (task) {
await task.clear('dist')
await task.start('build')
await task.watch('server/**/*.+(js|ts)', 'server')
await task.watch('lib/**/*.+(js|ts)', 'lib')
await task.watch('server/**/*.+(js|ts|tsx)', 'server')
await task.watch('lib/**/*.+(js|ts|tsx)', 'lib')
}
export async function release (task) {

4
packages/next/pages/_document.js
View file

@ -14,9 +14,9 @@ export default class Document extends Component {
}
static getInitialProps ({ renderPage }) {
const { html, head, buildManifest } = renderPage()
const { html, head } = renderPage()
const styles = flush()
return { html, head, styles, buildManifest }
return { html, head, styles }
}
getChildContext () {

3
packages/next/server/error-debug.js
View file

@ -5,13 +5,12 @@ import Head from 'next-server/head'
// This component is rendered through dev-error-overlay on the client side.
// On the server side it's rendered directly
export default function ErrorDebug ({error, info}) {
const { name, message, module } = error
const { name, message } = error
return (
<div style={styles.errorDebug}>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</Head>
{module ? <h1 style={styles.heading}>Error in {module.rawRequest}</h1> : null}
{
name === 'ModuleBuildError' && message
? <pre style={styles.stack} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />

24
packages/next/taskfile.js
View file

@ -10,33 +10,33 @@ export async function bin (task, opts) {
}
export async function lib (task, opts) {
await task.source(opts.src || 'lib/**/*.+(js|ts)').typescript({module: 'commonjs'}).target('dist/lib')
await task.source(opts.src || 'lib/**/*.+(js|ts|tsx)').typescript({module: 'commonjs'}).target('dist/lib')
notify('Compiled lib files')
}
export async function server (task, opts) {
await task.source(opts.src || 'server/**/*.+(js|ts)').typescript({module: 'commonjs'}).target('dist/server')
await task.source(opts.src || 'server/**/*.+(js|ts|tsx)').typescript({module: 'commonjs'}).target('dist/server')
notify('Compiled server files')
}
export async function nextbuild (task, opts) {
await task.source(opts.src || 'build/**/*.+(js|ts)').typescript({module: 'commonjs'}).target('dist/build')
await task.source(opts.src || 'build/**/*.+(js|ts|tsx)').typescript({module: 'commonjs'}).target('dist/build')
notify('Compiled build files')
}
export async function client (task, opts) {
await task.source(opts.src || 'client/**/*.+(js|ts)').typescript().target('dist/client')
await task.source(opts.src || 'client/**/*.+(js|ts|tsx)').typescript().target('dist/client')
notify('Compiled client files')
}
// export is a reserved keyword for functions
export async function nextbuildstatic (task, opts) {
await task.source(opts.src || 'export/**/*.+(js|ts)').typescript({module: 'commonjs'}).target('dist/export')
await task.source(opts.src || 'export/**/*.+(js|ts|tsx)').typescript({module: 'commonjs'}).target('dist/export')
notify('Compiled export files')
}
export async function pages (task, opts) {
await task.source(opts.src || 'pages/**/*.+(js|ts)').typescript().target('dist/pages')
await task.source(opts.src || 'pages/**/*.+(js|ts|tsx)').typescript().target('dist/pages')
}
export async function build (task) {
@ -47,12 +47,12 @@ export default async function (task) {
await task.clear('dist')
await task.start('build')
await task.watch('bin/*', 'bin')
await task.watch('pages/**/*.+(js|ts)', 'pages')
await task.watch('server/**/*.+(js|ts)', 'server')
await task.watch('build/**/*.+(js|ts)', 'nextbuild')
await task.watch('export/**/*.+(js|ts)', 'nextexport')
await task.watch('client/**/*.+(js|ts)', 'client')
await task.watch('lib/**/*.+(js|ts)', 'lib')
await task.watch('pages/**/*.+(js|ts|tsx)', 'pages')
await task.watch('server/**/*.+(js|ts|tsx)', 'server')
await task.watch('build/**/*.+(js|ts|tsx)', 'nextbuild')
await task.watch('export/**/*.+(js|ts|tsx)', 'nextexport')
await task.watch('client/**/*.+(js|ts|tsx)', 'client')
await task.watch('lib/**/*.+(js|ts|tsx)', 'lib')
}
export async function release (task) {