refactor(v2): migrate core to Typescript ❄️🌀🐋 (facebook#1494)

* refactor(v2): add typing for docusaurus/core * wip: last working * refactor(v2): add typing for @docusaurus/core * prettier * dont run in parallel otherwise some are uncompiled * nits * more typing * more typing * nits * type commands * nits
JoelMarcey · May 20, 2019 · 305e698 · 305e698
1 parent 0568ad4
commit 305e698
Showing 74 changed files with 741 additions and 490 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -11,3 +11,5 @@ packages/docusaurus-1.x/lib/core/metadata.js
 packages/docusaurus-1.x/lib/core/MetadataBlog.js
 packages/docusaurus-1.x/lib/core/__tests__/split-tab.test.js
 packages/docusaurus-utils/lib/
+packages/docusaurus/lib/
+
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,6 @@ build
 .cache-loader
 types
 packages/docusaurus-utils/lib/
+packages/docusaurus/lib/
+
 
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,4 @@ node_modules
 build
 .docusaurus
 packages/docusaurus-utils/lib/
+packages/docusaurus/lib/
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,6 @@
 {
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
-  "parser": "flow",
   "printWidth": 80,
   "proseWrap": "never",
   "singleQuote": true,

diff --git a/package.json b/package.json
@@ -13,21 +13,27 @@
     "build:v1": "yarn workspace docusaurus-1-website build",
     "build:v2": "yarn workspace docusaurus-2-website build",
     "postinstall": "yarn tsc",
-    "prettier": "prettier --config .prettierrc --write \"**/*.js\"",
-    "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.js\"",
+    "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
+    "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,ts}\"",
     "lint": "eslint --cache \"**/*.js\"",
     "lerna": "lerna",
     "test": "jest",
-    "tsc": "lerna run --parallel tsc --no-private"
+    "tsc": "lerna run tsc --no-private"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/preset-typescript": "^7.3.3",
+    "@types/chalk": "^2.2.0",
     "@types/escape-string-regexp": "^1.0.0",
+    "@types/express": "^4.16.1",
     "@types/fs-extra": "7.0.0",
+    "@types/globby": "9.1.0",
     "@types/jest": "^24.0.13",
     "@types/lodash": "^4.14.129",
     "@types/node": "^12.0.2",
+    "@types/shelljs": "^0.8.5",
+    "@types/webpack": "^4.4.31",
+    "@types/webpack-merge": "^4.1.5",
     "babel-eslint": "8",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
@@ -50,7 +56,7 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "rimraf": "^2.6.3",
-    "typescript": "^3.4.5"
+    "typescript": "^3.5.0-rc"
   },
   "lint-staged": {
     "linters": {

diff --git a/packages/docusaurus-utils/src/index.ts b/packages/docusaurus-utils/src/index.ts
@@ -102,7 +102,7 @@ export function genChunkName(
   prefix?: string,
   preferredName?: string,
 ): string {
-  let chunkName = chunkNameCache.get(modulePath);
+  let chunkName: string | undefined = chunkNameCache.get(modulePath);
   if (!chunkName) {
     let str = modulePath;
     if (preferredName) {
@@ -146,10 +146,10 @@ export function parse(
   fileString: string,
 ): {
   frontMatter: {
-    [key: string]: any,
-  },
-  content: string,
-  excerpt: string | undefined,
+    [key: string]: any;
+  };
+  content: string;
+  excerpt: string | undefined;
 } {
   const options: {} = {
     excerpt: (file: matter.GrayMatterFile<string>): void => {

diff --git a/packages/docusaurus-utils/tsconfig.json b/packages/docusaurus-utils/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "rootDir": "src",
     "outDir": "lib",
   }

diff --git a/packages/docusaurus/.npmignore b/packages/docusaurus/.npmignore
@@ -0,0 +1,2 @@
+src
+copyUntypedFiles.js
diff --git a/packages/docusaurus/bin/docusaurus.js b/packages/docusaurus/bin/docusaurus.js
@@ -12,7 +12,7 @@ const envinfo = require('envinfo');
 const semver = require('semver');
 const path = require('path');
 const program = require('commander');
-const {build, swizzle, init, deploy, start} = require('../src');
+const {build, swizzle, init, deploy, start} = require('../lib');
 const requiredVersion = require('../package.json').engines.node;
 
 if (!semver.satisfies(process.version, requiredVersion)) {

diff --git a/packages/docusaurus/copyUntypedFiles.js b/packages/docusaurus/copyUntypedFiles.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const path = require('path');
+const fs = require('fs-extra');
+
+/**
+ * Copy all untyped and static assets files to lib.
+ */
+const srcDir = path.resolve(__dirname, 'src');
+const libDir = path.resolve(__dirname, 'lib');
+fs.copySync(srcDir, libDir, {
+  filter(filepath) {
+    return !/__tests__/.test(filepath) && !/\.ts$/.test(filepath);
+  },
+});
diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json
@@ -23,7 +23,7 @@
     "docusaurus": "bin/docusaurus.js"
   },
   "scripts": {
-    "docusaurus": "node bin/docusaurus"
+    "tsc": "tsc && node copyUntypedFiles.js"
   },
   "bugs": {
     "url": "https://github.com/facebook/Docusaurus/issues"

diff --git a/packages/docusaurus/src/commands/build.js → packages/docusaurus/src/commands/build.ts b/packages/docusaurus/src/commands/build.js → packages/docusaurus/src/commands/build.ts
@@ -5,21 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');
-const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
-const path = require('path');
-const chalk = require('chalk');
-const fs = require('fs-extra');
-const globby = require('globby');
-const load = require('../server');
-const createServerConfig = require('../webpack/server');
-const createClientConfig = require('../webpack/client');
-const {applyConfigureWebpack} = require('../webpack/utils');
+import webpack, {Configuration, Plugin} from 'webpack';
+import merge from 'webpack-merge';
+import CleanWebpackPlugin from 'clean-webpack-plugin';
+import ReactLoadableSSRAddon from 'react-loadable-ssr-addon';
+import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
+import path from 'path';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import globby from 'globby';
+import {load, CLIOptions, Props} from '../server';
+import {createClientConfig} from '../webpack/client';
+import {createServerConfig} from '../webpack/server';
+import {applyConfigureWebpack} from '../webpack/utils';
 
-function compile(config) {
+function compile(config: Configuration[]): Promise<any> {
   return new Promise((resolve, reject) => {
     const compiler = webpack(config);
     compiler.run((err, stats) => {
@@ -42,16 +42,19 @@ function compile(config) {
   });
 }
 
-module.exports = async function build(siteDir, cliOptions = {}) {
+export async function build(
+  siteDir: string,
+  cliOptions: CLIOptions = {},
+): Promise<void> {
   process.env.NODE_ENV = 'production';
   console.log(chalk.blue('Creating an optimized production build...'));
 
-  const props = await load(siteDir, cliOptions);
+  const props: Props = await load(siteDir, cliOptions);
 
   // Apply user webpack config.
   const {outDir, plugins} = props;
 
-  let clientConfig = merge(createClientConfig(props), {
+  let clientConfig: Configuration = merge(createClientConfig(props), {
     plugins: [
       // Remove/clean build folders before building bundles.
       new CleanWebpackPlugin({verbose: false}),
@@ -61,10 +64,10 @@ module.exports = async function build(siteDir, cliOptions = {}) {
       new ReactLoadableSSRAddon({
         filename: 'client-manifest.json',
       }),
-    ].filter(Boolean),
+    ].filter(Boolean) as Plugin[],
   });
 
-  let serverConfig = createServerConfig(props);
+  let serverConfig: Configuration = createServerConfig(props);
 
   // Plugin lifecycle - configureWebpack
   plugins.forEach(plugin => {
@@ -88,7 +91,9 @@ module.exports = async function build(siteDir, cliOptions = {}) {
   await compile([clientConfig, serverConfig]);
 
   // Remove server.bundle.js because it is useless
-  await fs.unlink(path.join(outDir, serverConfig.output.filename));
+  if (serverConfig.output && serverConfig.output.filename) {
+    await fs.unlink(path.join(outDir, serverConfig.output.filename));
+  }
 
   // Copy static files.
   const staticDir = path.resolve(siteDir, 'static');
@@ -121,4 +126,4 @@ module.exports = async function build(siteDir, cliOptions = {}) {
       relativeDir,
     )}.\n`,
   );
-};
+}
diff --git a/packages/docusaurus/src/commands/deploy.js → packages/docusaurus/src/commands/deploy.ts b/packages/docusaurus/src/commands/deploy.js → packages/docusaurus/src/commands/deploy.ts
@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
-const shell = require('shelljs');
-const fs = require('fs-extra');
-const build = require('./build');
-const loadConfig = require('../server/load/config');
-const {CONFIG_FILE_NAME} = require('../constants');
-
-module.exports = async function deploy(siteDir) {
+import path from 'path';
+import shell from 'shelljs';
+import fs from 'fs-extra';
+import {build} from './build';
+import {loadConfig} from '../server/config';
+import {CONFIG_FILE_NAME} from '../constants';
+
+export async function deploy(siteDir: string): Promise<void> {
   console.log('Deploy command invoked ...');
   if (!shell.which('git')) {
     throw new Error('Sorry, this script requires git');
@@ -136,57 +136,38 @@ module.exports = async function deploy(siteDir) {
         '.docusaurus',
         `${projectName}-${deploymentBranch}`,
       );
-      // In github.io case, project is deployed to root. Need to not recursively
-      // copy the deployment-branch to be.
-      const excludePath = `${projectName}-${deploymentBranch}`;
-
-      // cannot use shell.cp because it doesn't support copying dotfiles and we
-      // need to copy directories like .circleci, for example
-      // https://github.com/shelljs/shelljs/issues/79
-      fs.copy(
-        fromPath,
-        toPath,
-        src => {
-          if (src.indexOf('.DS_Store') !== -1) {
-            return false;
-          }
-          if (src.indexOf(excludePath) !== -1) {
-            return false;
-          }
-          return true;
-        },
-        error => {
-          if (error) {
-            throw new Error(
-              `Error: Copying build assets failed with error '${error}'`,
-            );
-          }
 
-          shell.cd(toPath);
-          shell.exec('git add --all');
+      fs.copy(fromPath, toPath, error => {
+        if (error) {
+          throw new Error(
+            `Error: Copying build assets failed with error '${error}'`,
+          );
+        }
 
-          const commitMessage =
-            process.env.CUSTOM_COMMIT_MESSAGE ||
-            `Deploy website version based on ${currentCommit}`;
-          const commitResults = shell.exec(`git commit -m "${commitMessage}"`);
-          if (
-            shell.exec(`git push --force origin ${deploymentBranch}`).code !== 0
-          ) {
-            throw new Error('Error: Git push failed');
-          } else if (commitResults.code === 0) {
-            // The commit might return a non-zero value when site is up to date.
-            const websiteURL =
-              githubHost === 'github.com'
-                ? `https://${organizationName}.github.io/${projectName}` // gh-pages hosted repo
-                : `https://${githubHost}/pages/${organizationName}/${projectName}`; // GitHub enterprise hosting.
-            shell.echo(`Website is live at: ${websiteURL}`);
-            shell.exit(0);
-          }
-        },
-      );
+        shell.cd(toPath);
+        shell.exec('git add --all');
+
+        const commitMessage =
+          process.env.CUSTOM_COMMIT_MESSAGE ||
+          `Deploy website version based on ${currentCommit}`;
+        const commitResults = shell.exec(`git commit -m "${commitMessage}"`);
+        if (
+          shell.exec(`git push --force origin ${deploymentBranch}`).code !== 0
+        ) {
+          throw new Error('Error: Git push failed');
+        } else if (commitResults.code === 0) {
+          // The commit might return a non-zero value when site is up to date.
+          const websiteURL =
+            githubHost === 'github.com'
+              ? `https://${organizationName}.github.io/${projectName}` // gh-pages hosted repo
+              : `https://${githubHost}/pages/${organizationName}/${projectName}`; // GitHub enterprise hosting.
+          shell.echo(`Website is live at: ${websiteURL}`);
+          shell.exit(0);
+        }
+      });
     })
     .catch(buildError => {
       console.error(buildError);
       process.exit(1);
     });
-};
+}
diff --git a/packages/docusaurus/src/commands/init.js → packages/docusaurus/src/commands/init.ts b/packages/docusaurus/src/commands/init.js → packages/docusaurus/src/commands/init.ts
@@ -5,10 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-module.exports = async function init(projectDir, cliOptions = {}) {
+import {CLIOptions} from '../server';
+
+export async function init(
+  projectDir: string,
+  cliOptions: CLIOptions = {},
+): Promise<void> {
   console.log('Init command invoked ...');
   console.log(projectDir);
   console.log(cliOptions);
 
   // TODO
-};
+}