How to type a custom plugin on project?

[SalahAdDin]

Continuing with migrating the portfolio to TypeScript, we got a new problem.

This is the custom plugin remarkvideo.ts we wrote for the portfolio:

import { Node } from "unist";
import visit from "unist-util-visit";

const allowedFiletypes: string[] = ["avi", "mp4", "mov", "mkv"];

interface ImageNode extends Node {
  url: string;
}

function video() {
  function transformer(tree: Node) {
    visit(tree, "image", (node: ImageNode) => {
      const { url } = node;
      const fileType: string | undefined = url.split(".").pop();

      if (fileType && allowedFiletypes.includes(fileType)) {
        node.data = node.data || {};
        node.data.hName = "video";
        // TODO: If images already returns a src, next line is not required.
        // node.data.hProperties = { src: node.url };
      }
    });
  }

  return transformer;
}

module.exports = video;

To import in:

import * as remarkVideo from "presentation/lib/remarkvideo";

----

const _mapProps = (props: ReactMarkdownOptions): ReactMarkdownOptions => ({
  ...props,
  remarkPlugins: [
    // RemarkMathPlugin,
    // RemarkHighlightPlugin,
    unwrapImages,
    remarkVideo,
  ],
  rehypePlugins: [
    rehypeRaw,
    [rehypeSanitize, merge(gh, { attributes: { code: ["className"] } })],
  ],
  components: {
    ...props.components,
    // math: ({ value }) => <BlockMath>{value}</BlockMath>,
    // inlineMath: ({ value }) => <InlineMath>{value}</InlineMath>,
    code: CodeBlock,
    img: ImageBlock,
    video: VideoBlock,
  },
});

And it gives us:

Type 'typeof import("/home/luisalaguna/Projects/portfolio/frontend2.0/src/presentation/lib/remarkvideo")' is not assignable to type 'Pluggable<any[], Settings>'.
  Type 'typeof import("/home/luisalaguna/Projects/portfolio/frontend2.0/src/presentation/lib/remarkvideo")' is not assignable to type '[Plugin<any[], Setti

If we use remarkVideo as Plugin<[]> it solves all, but we want to know which would be the best way to type it, wheter if it is on the same plugin file, or in a d.ts (We tried it by defining the type in src/presentation/types/remarkvideo.d.ts, but it does not work).

Thank you.

[ChristianMurphy]

@SalahAdDin can you share a repeatable example?
Trying what you shared in a simplified codesandbox, the typing appears to work.

https://codesandbox.io/s/youthful-hofstadter-qtojl?file=/src/App.tsx

A number of things to check for:

1. see what typescript version you are using (the sandbox is using 4.1.3, https://codesandbox.io/s/youthful-hofstadter-qtojl?file=/package.json:529-550)
2. check what settings you have in your tsconfig.json (the sandbox is using https://codesandbox.io/s/youthful-hofstadter-qtojl?file=/tsconfig.json)
3. try removing some of the abstractions you added around the types, see if that resolves it

Also note, that mdast has typings for the image node which can be used to simplify the typings.

[SalahAdDin]

Well, it seems the problem was we were not using the types properly: import type { Image } from "mdast"; this line solves everything.

But it raises another problem aware to TypeScript: no properly documented; we had no idea about this type from that library, that's why we extended the Node type to an interface and this one didn't work.

Thank you for the solution!

[ChristianMurphy]

I'm glad it's working!

---

Well, it seems the problem was we were not using the types properly: import type { Image } from "mdast"; this line solves everything.
we had no idea about this type from that library, that's why we extended the Node type to an interface and this one didn't work.

I'm not sure the usage of @types/mdast fixed it, or at least the

Type 'typeof import("/home/luisalaguna/Projects/portfolio/frontend2.0/src/presentation/lib/remarkvideo")' is not assignable to type 'Pluggable<any[], Settings>'.

message that you shared.
The sandbox works the same using the custom typing you shared.
https://codesandbox.io/s/festive-currying-ox8u0?file=/src/App.tsx
Which makes sense, because visit and the code run inside it, isn't part of the type interface TypeScript compares with Plugin and Transformer

---

But it raises another problem aware to TypeScript: no properly documented

Yes and no.
Yes, a recipe or guide for using unified with TypeScript on the unified site would be a welcome addition https://github.com/unifiedjs/unifiedjs.github.io 👍 PRs are welcome!
No, because from what you've shared so far the issue you and your team experienced doesn't appear to be specifically unified/remark related, so much as a general TypeScript question. A remark guide likely would not have resolved this specific issue.

[ChristianMurphy]

Another consideration, in remarkvideo.ts
You have both:

import { Node } from "unist";
/// ... and later
module.exports = video;

mixing cjs and esm could potentially be messing with typescript.
Consider using esm for both, meaning module.exports = video; would become export default video;