Remix integration

[chikamichi]

Hi,

Just wanted to share my findings about integrating CodeHike within Remix.

First, in case you (reading this post ;)) don’t know, Remix is using esbuild and has built-in support for MDX, through Remark. Therefore, no need to install anything besides @code-hike/mdx@next.

Then, one has to edit remix.config.js to register CodeHike as a Remark plugin, and a theme as well. Simply add an mdx entry in the module.exports — but beware a couple things:

  mdx: async (filename) => {
    const [codeHike, theme] = await Promise.all([

      // beware: don’t use .default, use .remarkCodeHike instead
      import("@code-hike/mdx").then((mod) => mod.remarkCodeHike),

      // beware: Remix’ builder does not currently support --experimental-json-module or similar
      // (see https://nodejs.medium.com/announcing-a-new-experimental-modules-1be8d2d6c2ff),
      // so one has to create a file exporting (module.exports) the theme as a JS object,
      // instead of importing, say, "shiki/themes/monokai.json"
      import("./monokai.js").then((mod) => mod.default),
    ]);

    return {
      // beware the Remix’ docs (https://remix.run/docs/en/v1/guides/mdx#advanced-configuration):
      // one must use *nested* arrays here to abide by Remark’s plugins API and have the CH export
      // properly injected through (see codehike/blob/next/packages/mdx/src/plugin.ts)
      remarkPlugins: [[codeHike, { theme }]],
    };
  },

Note: about require vs import: both work equally well (see pomber’s take on the matter below), the only difference is that when using import statements within the mdx’s function, you’ll slightly defer loading, and will trigger Remix’ loading stack, which may come in handy.

Note: about not being able to import .json as modules: I guess one could work around that by not calling the dev script (ie. npm run dev) directly, but rather npx and pass the --experimental-json-module option through, to Node.js. Not tested. Ideally Remix would add support for importing .json files as modules.

🙏

[pomber]

Thank you @chikamichi.

Why not use require?

I have an example here: https://github.com/code-hike/examples/blob/main/remix/remix.config.js

[chikamichi]

Oh, I tried that too, but for some reasons had an issue. Will give it another try => [edit] that works fine too! Let me edit my post ;)

It may come in handy running through Remix’s custom logic/scheduling though, upon triggering mdx().

Also… I totally missed that examples repo 🙈