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

feat(core): support TypeScript + ESM configuration #9317

Merged
merged 49 commits into from
Oct 14, 2023

Conversation

harryzcy
Copy link
Contributor

@harryzcy harryzcy commented Sep 17, 2023

Breaking change

Change dependency that loads config files such as:

  • docusaurus.config.js
  • sidebars.js
  • plugin.js
  • preset.js

It is now possible to write those files in ESM or TypeScript, and they will be lazily transpiled if needed.

As any major deps change, some subtle breaking changes could happen, although we expect your former CJS config files to keep working there's no strict guarantee and some adaptations might be required.

Limitations

Top-level await is not yet supported (issue unjs/jiti#72)

Motivation

Allow configuration files to be defined in modern ESM or TS

Test Plan

CI

Test links

Deploy preview: https://deploy-preview-9317--docusaurus-2.netlify.app/

Related issues/PRs

fix #5379

fix #7911

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Sep 17, 2023
@slorber slorber marked this pull request as draft September 18, 2023 17:29
@slorber
Copy link
Collaborator

slorber commented Sep 18, 2023

Thanks for working on this.

Didn't know Jiti but looks nice 👍
I thought of using https://github.com/egoist/bundle-require for it in the past.

Note we are also happy to drop usage of import-fresh for a few reasons:

project-words.txt Outdated Show resolved Hide resolved
project-words.txt Outdated Show resolved Hide resolved
project-words.txt Outdated Show resolved Hide resolved
packages/docusaurus/src/server/config.ts Outdated Show resolved Hide resolved
harryzcy and others added 2 commits September 19, 2023 16:53
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
@netlify
Copy link

netlify bot commented Sep 19, 2023

[V2]

Name Link
🔨 Latest commit 67c333e
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/6529dea7dbd1760008dd958f
😎 Deploy Preview https://deploy-preview-9317--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions
Copy link

github-actions bot commented Sep 19, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 82 🟢 97 🟢 92 🟢 100 🟠 89 Report
/docs/installation/ 🟠 71 🟢 98 🟢 92 🟢 100 🟠 89 Report
/docs/category/getting-started/ 🟠 79 🟢 100 🟢 92 🟢 90 🟠 89 Report
/blog/ 🟠 61 🟢 100 🟢 92 🟢 90 🟠 89 Report
/blog/preparing-your-site-for-docusaurus-v3/ 🟠 77 🟢 97 🟢 92 🟢 100 🟠 89 Report
/blog/tags/release/ 🟠 78 🟢 100 🟢 92 🟠 80 🟠 89 Report
/blog/tags/ 🟠 88 🟢 100 🟢 92 🟢 90 🟠 89 Report

@harryzcy harryzcy marked this pull request as ready for review September 24, 2023 06:27
@slorber slorber added this to the 3.0 milestone Sep 25, 2023
@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Sep 25, 2023
@slorber
Copy link
Collaborator

slorber commented Sep 25, 2023

I assume fix PR fix #5379 right?

We should probably move our init templates to use ESM and/or TypeScript configs, and keep a e2e test using CJS for retro-compatibility

I'd be happy to have this in v3!

@slorber slorber changed the title feat: support typescript configuration feat(core): support TypeScript + ESM configuration Sep 25, 2023
@harryzcy
Copy link
Contributor Author

I assume fix PR fix #5379 right?

We should probably move our init templates to use ESM and/or TypeScript configs, and keep a e2e test using CJS for retro-compatibility

I'd be happy to have this in v3!

Yes, ESM should be supported as well.

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

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

Unfortunately it doesn't seem to take into account updates

I tried to use a sidebars.ts file, it works the first time, but any live edit to this file are not reloaded unless you fully restart the dev server.

Any idea if your package can serve as a replacement for importFresh @pi0 ? I thought cache: false would do the job but apparently not.

Comment on lines 92 to 96
return importFresh(sidebarFilePath);
const sidebars = jiti(__filename, {
cache: false,
interopDefault: true,
debug: true,
})(sidebarFilePath);
Copy link
Collaborator

Choose a reason for hiding this comment

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

This does not look like a drop-in replacement for importFresh unfortunately.

Calling it multiple times will return the same result despite changing the underlying file.

Copy link

Choose a reason for hiding this comment

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

Hi. You can set requireCache: false in order to disable (runtime) cache. cache option is for filesystem transform cache (and can be even kept enabled for better performance. you still will get a fresh value each time).

Please let me know if could help further on this :)

Copy link

Choose a reason for hiding this comment

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

Also, we are working on new API jiti.import() (releasing by next week) if PR was delayed until then would be nice that you consider the migration for better future compatibility. It can bring support more native ESM compatibilities.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Thanks a lot @pi0 that's working. I saw requireCache in an older issue but thought it was an older removed option because it's not in v1 or v2 docs. But it's in the type and seems to work as I expect 👍

Regarding jiti.import() (unjs/jiti#174?) I assume you want to say v2.0 is being released soon?

On my side I didn't expect to migrate away from importFresh in Docusaurus v3 but as jiti seems to work that would be a awesome improvement for our users so I'm already delaying a bit our official release to incorporate this PR 😄 I'd prefer to not be an early adopter of jiti v2 this time, for timing reasons it's preferable if we upgrade for Docusaurus v4 (or in a minor version later, if not considered as a breaking change)

Copy link

@pi0 pi0 Oct 13, 2023

Choose a reason for hiding this comment

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

Ah awesome!

jiti.import() API will be also released as a backward compatible stub for v1 for future compatibility so you can migrate earlier and only bump the major version of jiti later -- which i expect no major breaking changes. bumping to v2 is to make sure ecosystem migration is not risky. (i am on holidays with family RN but might find some time to do it earlier). v2 is not expected that soon.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Great, thanks :)

From what I understand currently Jiti is able to load modules synchronously but import will be async so it's probably better to assume async usage in the future?

@slorber slorber added the Argos Add this label to run UI visual regression tests. See argos.yml GH action. label Oct 14, 2023
@argos-ci
Copy link

argos-ci bot commented Oct 14, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 🧿 Changes detected (Review) 45 changes Oct 14, 2023, 12:33 AM

@slorber
Copy link
Collaborator

slorber commented Oct 14, 2023

LGTM 🥳

thanks for the POC @harryzcy , everything works fine now and super happy to have this PR ready just in time for Docusaurus v3 👍

@slorber slorber merged commit 45f1a66 into facebook:main Oct 14, 2023
29 of 31 checks passed
@harryzcy harryzcy deleted the config-in-ts branch October 14, 2023 04:26
@fflaten fflaten mentioned this pull request Oct 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Argos Add this label to run UI visual regression tests. See argos.yml GH action. CLA Signed Signed Facebook CLA pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support TypeScript in Docusaurus config Support ESM config file
5 participants