Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(v2): Convert docusaurus-core to TypeScript #2578

Merged
merged 2 commits into from
Apr 12, 2020
Merged

refactor(v2): Convert docusaurus-core to TypeScript #2578

merged 2 commits into from
Apr 12, 2020

Conversation

SamChou19815
Copy link
Contributor

@SamChou19815 SamChou19815 commented Apr 11, 2020

Motivation

I believe this is the first step to support #2470. In order to use write TypeScript theme components, we should first have solid types for the core. Instead of writing d.ts files manually, it's better to write the core in TS and let TS generate correct type declaration files.

Have you read the Contributing Guidelines on pull requests?

Yes

Implementation

It turns out that rewriting the code in TS is not as simple as changing the file extension and add a bunch of missing type annotations. It's complicated for the following reasons:

  1. Docusaurus has setup webpack aliases like @docusaurus, @generated, @theme. TypeScript doesn't understand these aliases natively.
  2. Part of the docusaurus core runs in browser (ESModule) and part of them runs on node (CommonJS). We somehow need to typescript to emit code for two different module formats.
  3. One file client/serverEntry.js imports a package.json file outside of TypeScript 'rootDir' and TS is not happy about that.

My solutions:

  1. Add a types.d.ts that declares those modules. For @docusaurus/..., I replaced that with relative imports. For @generated/..., I looked at the generated files in website/.docusaurus and add the types. I left some types as any since they appeared to be too dynamic. For @theme, I added a blanket rule declare module '@theme/*' { const component: any; export default component }, since I believe it's better to deal with this problem once we start to converting themes to TS.
  2. Create two tsconfig, once for src/client only and one for everything else but excluding client. The tsconfig for src/client emits ESModule code and the other one emits commonjs code.
  3. Do not migrate client/serverEntry.js to TS. I tried to replace that import with a file read, but it breaks the build.

Test Plan

Check each page in the preview website. Nothing breaks.

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Apr 11, 2020
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Apr 11, 2020

Deploy preview for docusaurus-2 ready!

Built with commit bf4c7f7

https://deploy-preview-2578--docusaurus-2.netlify.com

@SamChou19815 SamChou19815 marked this pull request as draft April 11, 2020 04:00
@SamChou19815 SamChou19815 marked this pull request as ready for review April 11, 2020 04:10
@SamChou19815 SamChou19815 changed the title chore(v2): Convert docusaurus-core to TypeScript refactor(v2): Convert docusaurus-core to TypeScript Apr 11, 2020
@yangshun yangshun added the pr: maintenance This PR does not produce any behavior differences to end users when upgrading. label Apr 12, 2020
Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not familiar with our TypeScript setup, but if it builds and CI passes, it should be good! Thanks Sam!

@yangshun yangshun merged commit 5f487f3 into facebook:master Apr 12, 2020
@SamChou19815 SamChou19815 deleted the docusaurus-core-to-ts branch April 12, 2020 18:08
@kripod
Copy link
Contributor

kripod commented Apr 14, 2020

Fantastic work!

As for theme resolution, I'm currently using the following approach in my website's tsconfig.json:

{
  "include": ["./src/"],
  "compilerOptions": {
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "@site/*": [
        // https://v2.docusaurus.io/docs/versioning/#use-absolute-import-within-the-docs
        "./*"
      ],
      "@theme/*": [
        // https://v2.docusaurus.io/docs/using-themes/#theme-components
        "./src/theme/*",
        "./node_modules/@docusaurus/theme-classic/src/theme/*",
        "./node_modules/@docusaurus/core/lib/client/theme-fallback/*"
      ],
      "@docusaurus/*": [
        "./node_modules/@docusaurus/core/lib/client/exports/*"
      ]
    }
  }
}

The @docusaurus/* alias may be dropped by this PR. However, I think the docs should have instructions about adding aliases for @site/* and @theme/*, as shown above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: maintenance This PR does not produce any behavior differences to end users when upgrading.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants