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(mdx-loader): streamline typescript usage for remark plugin types #10651

Merged
merged 14 commits into from
Nov 7, 2024

Conversation

lebalz
Copy link
Contributor

@lebalz lebalz commented Nov 7, 2024

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

I wrote a remark plugin and was not sure how i have to type the plugins correctly. So i checked with docusaurus' default plugins and saw that they are not properly typed aswell and that the structure between the remark-plugins is not really streamlined.

In my research i found the solution: type the plugins with Plugin<PluginOptions[], Root> and let them return a Transformer<Root> (instead of Transformer only). Like that, TS can infer the types directly:

const plugin: Plugin<PluginOptions[], Root> = function plugin(
  options,
): Transformer<Root> {
  return async (root, vfile) => {
    const {visit} = await import('unist-util-visit');
    visit(root, 'link', (node, index, parent) => {
      // link is now known to be of type Link

      // parent is of type `Parent | undefined`  and index: `number | undefined`
      // before, parent was of type `never`
      if (index === undefined || !parent) {
        return;
      }
    }
  }
}

A helpful resource was: 👉 https://unifiedjs.com/learn/recipe/narrow-node-typescript/

Test Plan

All tests still pass

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Nov 7, 2024
Copy link

netlify bot commented Nov 7, 2024

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 10bf29e
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/672cdc0229aaa60008e89bbe
😎 Deploy Preview https://deploy-preview-10651--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.

Copy link

github-actions bot commented Nov 7, 2024

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🟠 56 🟢 98 🟢 96 🟢 100 Report
/docs/installation 🟠 54 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 75 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 63 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🟠 54 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 62 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 74 🟢 100 🟢 100 🟠 86 Report

@slorber slorber added the pr: maintenance This PR does not produce any behavior differences to end users when upgrading. label Nov 7, 2024
@slorber
Copy link
Collaborator

slorber commented Nov 7, 2024

awesome 👍 thanks for the cleanup!

@slorber slorber changed the title refactor(mdx-loader/remark): streamline typescript usage for remark plugin types refactor(mdx-loader): streamline typescript usage for remark plugin types Nov 7, 2024
@slorber slorber merged commit bdf55ed into facebook:main Nov 7, 2024
40 checks passed
@lebalz lebalz deleted the refactor/remark-types branch November 7, 2024 16:56
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.

3 participants