wip

Author: avivkeller

apps/site/next.mdx.use.client.mjs

@@ -2,6 +2,11 @@
 
 import Blockquote from '@node-core/ui-components/Common/Blockquote';
 import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs';
+import {
+  MDXTooltip,
+  MDXTooltipContent,
+  MDXTooltipTrigger,
+} from '@node-core/ui-components/MDX/Tooltip';
 
 import DownloadButton from './components/Downloads/DownloadButton';
 import BlogPostLink from './components/Downloads/Release/BlogPostLink';
@@ -28,6 +33,10 @@ import { ReleaseProvider } from './providers/releaseProvider';
 export const clientMdxComponents = {
   // Renders MDX CodeTabs
   CodeTabs: MDXCodeTabs,
+  // Renders Tooltips
+  MDXTooltip,
+  MDXTooltipContent,
+  MDXTooltipTrigger,
   // Renders a Download Button
   DownloadButton,
   // Renders a stateless Release Select Component

apps/site/styles/index.css

@@ -7,5 +7,5 @@
 */
 
 @import '@node-core/ui-components/styles/index.css';
-@import '@node-core/rehype-shiki/twoslash.css';
+@import '@node-core/rehype-shiki/index.css';
 @import './locales.css';

packages/rehype-shiki/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "exports": {
     ".": "./src/index.mjs",
-    "./twoslash.css": "./src/twoslash.css",
+    "./index.css": "./src/index.css",
     "./*": "./src/*.mjs"
   },
   "repository": {

packages/rehype-shiki/src/index.css

@@ -0,0 +1 @@
+@import './transformers/twoslash/index.css';

packages/rehype-shiki/src/index.mjs

@@ -46,20 +46,12 @@ async function getEngine({ wasm = false }) {
  * Configures and returns transformers based on options
  * @param {HighlighterOptions} options - Configuration options
  */
-async function getTransformers({ twoslash = false }) {
+async function getTransformers({ twoslash: options = false }) {
   const transformers = [];
 
-  if (twoslash) {
-    const { transformerTwoslash } = await import('@shikijs/twoslash');
-
-    transformers.push(
-      transformerTwoslash({
-        langs: ['ts', 'js', 'cjs', 'mjs'],
-        rendererRich: { jsdoc: false },
-        throws: false,
-        ...(typeof twoslash === 'object' ? twoslash : {}),
-      })
-    );
+  if (options) {
+    const { twoslash } = await import('./transformers/twoslash/index.mjs');
+    transformers.push(twoslash(options));
   }
 
   return transformers;

packages/rehype-shiki/src/transformers/twoslash/index.css

@@ -0,0 +1,5 @@
+@import '@shikijs/twoslash/style-rich.css';
+
+.twoslash-hover {
+  cursor: text;
+}

packages/rehype-shiki/src/transformers/twoslash/index.mjs

@@ -0,0 +1,34 @@
+import { transformerTwoslash } from '@shikijs/twoslash';
+
+const compose = ({ token, popup }) => [
+  {
+    type: 'element',
+    tagName: 'MDXTooltipTrigger',
+    children: [token],
+    properties: { className: ['twoslash-hover'] },
+  },
+  popup,
+];
+
+export const twoslash = options =>
+  transformerTwoslash({
+    langs: ['ts', 'js', 'cjs', 'mjs'],
+    rendererRich: {
+      jsdoc: false,
+      hast: {
+        hoverToken: { tagName: 'MDXTooltip' },
+        hoverPopup: { tagName: 'MDXTooltipContent' },
+        hoverCompose: compose,
+
+        queryToken: { tagName: 'MDXTooltip' },
+        queryPopup: { tagName: 'MDXTooltipContent' },
+        queryCompose: compose,
+
+        errorToken: { tagName: 'MDXTooltip' },
+        errorPopup: { tagName: 'MDXTooltipContent' },
+        errorCompose: compose,
+      },
+    },
+    throws: false,
+    ...(typeof options === 'object' ? twoslash : {}),
+  });

packages/rehype-shiki/src/twoslash.css

@@ -0,0 +1,33 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import classNames from 'classnames';
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
+
+import styles from '../Common/Tooltip/index.module.css';
+
+export const MDXTooltip: FC<PropsWithChildren> = ({ children, ...props }) => (
+  <TooltipPrimitive.Provider delayDuration={100}>
+    <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>
+  </TooltipPrimitive.Provider>
+);
+
+export const MDXTooltipTrigger: FC<PropsWithChildren> = ({
+  children,
+  ...props
+}) => (
+  <TooltipPrimitive.Trigger {...props}>{children}</TooltipPrimitive.Trigger>
+);
+
+export const MDXTooltipContent: FC<
+  PropsWithChildren<HTMLAttributes<HTMLElement>>
+> = ({ children, ...props }) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      side={'bottom'}
+      sideOffset={4}
+      {...props}
+      className={classNames(props.className, styles.default, styles.content)}
+    >
+      {children}
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+);