Convert Dev Server to TypeScript (#8966)

* Convert Dev Server to TypeScript This converts the Next.js Development Server to TypeScript in prep for upcoming changes. * Convert remaining necessary * Fix some type errors * Adjust types
vercel · Oct 4, 2019 · e9b2e25 · e9b2e25
1 parent c9d9ff6
commit e9b2e25
Show file tree

Hide file tree

Showing 10 changed files with 423 additions and 259 deletions.
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
@@ -85,7 +85,7 @@ export default class Server {
   }
   private compression?: Middleware
   router: Router
-  private dynamicRoutes?: Array<{ page: string; match: RouteMatch }>
+  protected dynamicRoutes?: Array<{ page: string; match: RouteMatch }>
 
   public constructor({
     dir = '.',
@@ -166,7 +166,7 @@ export default class Server {
     })
   }
 
-  private currentPhase(): string {
+  protected currentPhase(): string {
     return PHASE_PRODUCTION_SERVER
   }
 
@@ -212,13 +212,13 @@ export default class Server {
   public async prepare(): Promise<void> {}
 
   // Backwards compatibility
-  private async close(): Promise<void> {}
+  protected async close(): Promise<void> {}
 
-  private setImmutableAssetCacheControl(res: ServerResponse) {
+  protected setImmutableAssetCacheControl(res: ServerResponse) {
     res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
   }
 
-  private generateRoutes(): Route[] {
+  protected generateRoutes(): Route[] {
     const routes: Route[] = [
       {
         match: route('/_next/static/:path*'),
@@ -379,7 +379,7 @@ export default class Server {
    * Resolves path to resolver function
    * @param pathname path of request
    */
-  private resolveApiRequest(pathname: string) {
+  protected async resolveApiRequest(pathname: string): Promise<string | null> {
     return getPagePath(
       pathname,
       this.distDir,
@@ -388,7 +388,7 @@ export default class Server {
     )
   }
 
-  private generatePublicRoutes(): Route[] {
+  protected generatePublicRoutes(): Route[] {
     const routes: Route[] = []
     const publicFiles = recursiveReadDirSync(this.publicDir)
     const serverBuildPath = join(
@@ -414,7 +414,7 @@ export default class Server {
     return routes
   }
 
-  private getDynamicRoutes() {
+  protected getDynamicRoutes() {
     const manifest = require(this.pagesManifest)
     const dynamicRoutedPages = Object.keys(manifest).filter(isDynamicRoute)
     return getSortedRoutes(dynamicRoutedPages).map(page => ({
@@ -429,7 +429,7 @@ export default class Server {
     }
   }
 
-  private async run(
+  protected async run(
     req: IncomingMessage,
     res: ServerResponse,
     parsedUrl: UrlWithParsedQuery
@@ -453,7 +453,7 @@ export default class Server {
     await this.render404(req, res, parsedUrl)
   }
 
-  private async sendHTML(
+  protected async sendHTML(
     req: IncomingMessage,
     res: ServerResponse,
     html: string
@@ -848,7 +848,7 @@ export default class Server {
     return true
   }
 
-  private readBuildId(): string {
+  protected readBuildId(): string {
     const buildIdFile = join(this.distDir, BUILD_ID_FILE)
     try {
       return fs.readFileSync(buildIdFile, 'utf8').trim()

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -163,6 +163,8 @@
     "@types/send": "0.14.4",
     "@types/styled-jsx": "2.2.8",
     "@types/text-table": "0.2.1",
+    "@types/webpack-dev-middleware": "2.0.3",
+    "@types/webpack-hot-middleware": "2.16.5",
     "@types/webpack-sources": "0.1.5",
     "@zeit/ncc": "0.18.5",
     "arg": "4.1.0",

diff --git a/packages/next/server/error-debug.js → packages/next/server/error-debug.tsx b/packages/next/server/error-debug.js → packages/next/server/error-debug.tsx
@@ -1,23 +1,36 @@
 import React from 'react'
+
 import Head from '../next-server/lib/head'
 
 // This component is only rendered on the server side.
-export default function ErrorDebug ({ error, info }) {
+export default function ErrorDebug({
+  error,
+  info,
+}: {
+  error: Error
+  info: any
+}) {
   return (
-    <div style={styles.errorDebug}>
+    <div style={styles.errorDebug as object}>
       <Head>
-        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <StackTrace error={error} info={info} />
     </div>
   )
 }
 
-const StackTrace = ({ error: { name, message, stack }, info }) => (
+const StackTrace = ({
+  error: { name, message, stack },
+  info,
+}: {
+  error: Error
+  info: any
+}) => (
   <div>
-    <div style={styles.heading}>{message || name}</div>
-    <pre style={styles.stack}>{stack}</pre>
-    {info && <pre style={styles.stack}>{info.componentStack}</pre>}
+    <div style={styles.heading as object}>{message || name}</div>
+    <pre style={styles.stack as object}>{stack}</pre>
+    {info && <pre style={styles.stack as object}>{info.componentStack}</pre>}
   </div>
 )
 
@@ -33,7 +46,7 @@ export const styles = {
     top: 0,
     bottom: 0,
     zIndex: 9999,
-    color: '#000000'
+    color: '#000000',
   },
 
   stack: {
@@ -45,7 +58,7 @@ export const styles = {
     margin: 0,
     whiteSpace: 'pre-wrap',
     wordWrap: 'break-word',
-    marginTop: '16px'
+    marginTop: '16px',
   },
 
   heading: {
@@ -56,6 +69,6 @@ export const styles = {
     lineHeight: '28px',
     color: '#000000',
     marginBottom: '0px',
-    marginTop: '0px'
-  }
+    marginTop: '0px',
+  },
 }