andrelandgraf

 
 ​import​ ​type​ ​{​ ​FC​,​ ​HTMLAttributes​,​ ​ReactElement​ ​}​ ​from​ ​'react'​; 
 ​import​ ​{​ ​Children​ ​}​ ​from​ ​'react'​; 
 ​import​ ​invariant​ ​from​ ​'tiny-invariant'​; 
 ​import​ ​Highlight​,​ ​{​ ​Language​,​ ​defaultProps​ ​}​ ​from​ ​'prism-react-renderer'​; 
 ​import​ ​CopyClipboardButton​ ​from​ ​'../button/copyClipboardButton'​; 
  
 ​function​ ​getLanguageFromClassName​(​className​: ​string​)​ ​{ 
 ​  ​const​ ​match​ ​=​ ​className​.​match​(​/​language-​(​\w​+​)​/​)​; 
 ​  ​return​ ​match​ ? ​match​[​1​]​ : ​''​; 

andrelandgraf

import { useMatches } from 'remix';

// this base hook is used in other hooks to quickly search for specific data across all loaderData using useMatches
// see in action: https://codesandbox.io/s/usematches-loader-data-2h798?file=/app/db.server.ts
export default function useLoaderStore<T>(key: string): T | undefined {
  const matchingRoutes = useMatches();
  const route = matchingRoutes.find((route) => route.data && route.data[key]);
  if (!route || !route.data || route.data[key] === undefined) {
    return undefined;
  }

andrelandgraf

/*
 * DEPRECATION NOTICE: This workaround is no longer needed. You can now use ESM packages with Remix by 
 * tracking all ESM packages in your remix.config.js file. This means we can now use react-markdown
 * and are not required to reimplement everything from scratch.
 * Find a nice example implementation here: https://stackblitz.com/edit/node-ydjuwx?file=remix.config.js
 */

/* 
 * react-remark does not support cjs anymore but Remix.run will not work with esm just yet (without async imports)
 * Unfortunately, the older versions of react-remark do not implement useRemarkSync