[WIP] Next Major Release

[ChristianMurphy]

drop tsdx in favor of custom build, due to lack of TS4 and limited ESM
support

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)
• If applicable, I’ve added docs and tests

Description of changes

• Update to latest major of unified, remark, and rehype dependencies
• migrate tsdx build to tsc
• migrate tsdx lint to eslint
• migrate tsdx text to uvu or jest
• migrate tests to node:test
• fix storybook
• wait for Fix declaration in .d.ts file rehypejs/rehype-react#30 and Fix to correctly compile intrinsic types rehypejs/rehype-react#31
• migrate TypeScript files to JavaScript with JSDoc based Typescript
• remove husky

[karlhorky]

@ChristianMurphy would it be possible to get an alpha/canary release of this before the final version is ready?

I would be willing to test the current state of this out on our projects.

[ChristianMurphy]

Welcome @karlhorky! 👋
Generally we don't publish alpha releases.
But once migrate TypeScript files to JavaScript with JSDoc based Typescript is complete
npm install remarkjs/react-remark#commit will work.

To your implied question of when will this PR land?
Not soon, my focus is elsewhere (both on professional projects and other volunteer unified initiatives) for at least the next month or so, and as far as I'm aware the same goes for most of the other remark maintainers as well.
This is still on the roadmap though.
If you'd like to contribute to moving this forward through PRs, you are welcome to!

[JounQin]

Why not v3?

[ChristianMurphy]

Because this PR came before v3 was released 🙂
V3 would be good to include

[JounQin]

I'd recommend to use lite https://github.com/privatenumber/tsx over ts-node, types linting can be a seperate task via tsc.

[ChristianMurphy]

I agree, though neither will be needed in the end.

The goal is:

migrate TypeScript files to JavaScript with JSDoc based Typescript

[karlhorky]

Generally we don't publish alpha releases.
But once migrate TypeScript files to JavaScript with JSDoc based Typescript is complete
npm install remarkjs/react-remark#commit will work.

Ok, thanks for the response.

Which files would be the minimum files to get converted to JSDoc Based TypeScript to get this working on a commit install? Just src/index.ts -> src/index.js?

[karlhorky]

Workaround

Until this is published, I'm using this code for useRemarkSync (Next.js App Router / RSC / SSR), in case useful for anyone:

Remark.tsx

import { ReactElement } from 'react';
import * as prod from 'react/jsx-runtime';
import rehypeReact, {
  Components,
  Options as RehypeReactOptions,
} from 'rehype-react';
import remarkGfm from 'remark-gfm';
import remarkParse, { Options as RemarkParseOptions } from 'remark-parse';
import remarkToRehype, { Options as RemarkRehypeOptions } from 'remark-rehype';
import { PluggableList, unified } from 'unified';

// Copied + modfied from:
// - https://github.com/remarkjs/react-remark/pull/39/files#diff-a2a171449d862fe29692ce031981047d7ab755ae7f84c707aef80701b3ea0c80R37
//
// Modifications:
// - Removed Omit<>/PartialBy<> used on rehypeReactOptions
// - Removed `?? true` from remarkToRehypeOptions
// - Fixed option values for rehypeReact
// - Used Partial<> with rehypeReactOptions
//
// TODO: Remove when PR #39 is merged or a new version is
// released, making react-remark compatible with the other
// plugins again
// - https://github.com/remarkjs/react-remark/pull/39
// - https://github.com/remarkjs/react-remark/issues/50#issuecomment-1123725393
// - https://github.com/remarkjs/react-remark/issues/54#issuecomment-1654923707
// - https://github.com/remarkjs/react-remark/issues/41
interface UseRemarkSyncOptions {
  remarkParseOptions?: RemarkParseOptions;
  remarkToRehypeOptions?: RemarkRehypeOptions;
  rehypeReactOptions?: Partial<RehypeReactOptions>;
  remarkPlugins?: PluggableList;
  rehypePlugins?: PluggableList;
}

const useRemarkSync = (
  source: string,
  {
    remarkParseOptions,
    remarkToRehypeOptions,
    rehypeReactOptions,
    remarkPlugins = [],
    rehypePlugins = [],
  }: UseRemarkSyncOptions = {},
): ReactElement =>
  unified()
    .use(remarkParse, remarkParseOptions)
    .use(remarkPlugins)
    .use(remarkToRehype, remarkToRehypeOptions)
    .use(rehypePlugins)
    .use(rehypeReact, {
      // @ts-expect-error: the react types are missing.
      Fragment: prod.Fragment,
      // @ts-expect-error: the react types are missing.
      jsx: prod.jsx,
      // @ts-expect-error: the react types are missing.
      jsxs: prod.jsxs,
      ...rehypeReactOptions,
    } as RehypeReactOptions)
    .processSync(source).result as ReactElement;
// Copied code ends here

type Props = {
  children: string;
  components: Partial<Components>;
};

export default function Remark(props: Props) {
  const reactContent = useRemarkSync(props.children, {
    remarkPlugins: [remarkGfm],
    rehypeReactOptions: {
      components: {
        ...props.components,
      },
    },
  });
  return reactContent;
}