feat: jsx copy button hook

docs/astro.config.ts

@@ -62,7 +62,7 @@ export default defineConfig({
           theme: moonlightTheme as unknown as RawTheme,
           transformers: [
             transformerCopyButton({
-              visibility: 'hover',
+              visibility: 'always',
               feedbackDuration: 2_500,
             }),
           ],

docs/package.json

@@ -11,27 +11,27 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/mdx": "^3.1.3",
     "@astrojs/starlight": "^0.25.1",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "@rehype-pretty/transformers": "workspace:*",
-    "astro": "^4.11.5",
+    "astro": "^4.12.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-pretty-code": "workspace:*",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-toc": "^9.0.0",
     "sharp": "^0.33.4",
-    "shiki": "^1.10.3",
-    "tailwindcss": "^3.4.5"
+    "shiki": "^1.11.0",
+    "tailwindcss": "^3.4.6"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.8.1",
-    "@shikijs/transformers": "^1.10.3",
-    "@shikijs/twoslash": "^1.10.3",
+    "@astrojs/check": "^0.8.2",
+    "@shikijs/transformers": "^1.11.0",
+    "@shikijs/twoslash": "^1.11.0",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
     "typescript": "^5.5.3"
   }
 }

examples/astro/astro.config.ts

@@ -1,7 +1,11 @@
+import {
+  rehypePrettyCode,
+  type RehypePrettyCodeOptions,
+} from 'rehype-pretty-code';
 import mdx from '@astrojs/mdx';
+import type { RawTheme } from 'shiki';
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
-import { rehypePrettyCode } from 'rehype-pretty-code';
 import moonlightTheme from './public/theme/moonlight-ii.json';
 import { transformerCopyButton } from '@rehype-pretty/transformers';
 
@@ -12,14 +16,14 @@ export default defineConfig({
       [
         rehypePrettyCode,
         {
-          theme: moonlightTheme,
+          theme: moonlightTheme as unknown as RawTheme,
           transformers: [
             transformerCopyButton({
               visibility: 'hover',
               feedbackDuration: 2_500,
             }),
           ],
-        },
+        } satisfies RehypePrettyCodeOptions,
       ],
     ],
   },

examples/astro/package.json

@@ -12,17 +12,17 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/mdx": "^3.1.3",
     "@astrojs/tailwind": "^5.1.0",
     "@rehype-pretty/transformers": "workspace:*",
-    "astro": "^4.11.5",
+    "astro": "^4.12.2",
     "rehype-pretty-code": "workspace:*",
-    "shiki": "^1.10.3",
-    "tailwindcss": "^3.4.5"
+    "shiki": "^1.11.0",
+    "tailwindcss": "^3.4.6"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.8.1",
-    "@types/node": "^20.14.10",
+    "@astrojs/check": "^0.8.2",
+    "@types/node": "^20.14.11",
     "typescript": "^5.5.3"
   }
 }

examples/next/.npmrc

@@ -0,0 +1 @@
+node-options="--no-warnings NODE_NO_WARNINGS=1"

examples/next/next.config.mjs

@@ -7,7 +7,8 @@ Object.assign(process.env, { NEXT_TELEMETRY_DISABLED: '1' });
  */
 import nextMDX from '@next/mdx';
 import rehypeSlug from 'rehype-slug';
-import rehypePrettyCode from 'rehype-pretty-code';
+import { rehypePrettyCode } from 'rehype-pretty-code';
+import { transformerCopyButton } from '@rehype-pretty/transformers';
 import moonlightTheme from './assets/moonlight-ii.json' with { type: 'json' };
 
 /** @type {NextConfigPlugins} */
@@ -19,16 +20,28 @@ const nextConfig = {
   cleanDistDir: true,
   reactStrictMode: true,
   poweredByHeader: false,
+  experimental: {
+    reactCompiler: true,
+    useLightningcss: false, // lightningcss doesn't work with postcss-loader
+  },
   pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
   env: {
     NEXT_TELEMETRY_DISABLED: '1',
   },
 };
 
-/** @type {import('rehype-pretty-code').Options} */
+/** @satisfies {import('rehype-pretty-code').RehypePrettyCodeOptions} */
 const options = {
   keepBackground: false,
+  // @ts-expect-error
   theme: moonlightTheme,
+  transformers: [
+    transformerCopyButton({
+      jsx: true,
+      visibility: 'always',
+      feedbackDuration: 2_500,
+    }),
+  ],
 };
 
 plugins.push(

examples/next/package.json

@@ -2,34 +2,38 @@
   "name": "example-next",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "bun --bun next dev",
     "build": "next build",
     "start": "pnpm dlx serve@latest out",
     "clean": "rm -rf .next out"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.5",
+    "@next/mdx": "15.0.0-canary.68",
     "@rehype-pretty/transformers": "workspace:*",
     "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
-    "next": "^14.2.5",
+    "next": "15.0.0-canary.76",
     "postcss": "^8.4.39",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
     "rehype-pretty-code": "workspace:*",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
-    "shiki": "^1.10.3",
-    "tailwindcss": "^3.4.5"
+    "shiki": "^1.11.0",
+    "tailwindcss": "^3.4.6"
   },
   "devDependencies": {
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
+    "@types/postcss-import": "^14.0.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625",
+    "postcss-import": "^16.1.0",
     "typescript": "^5.5.3"
   },
   "browserslist": [

examples/next/postcss.config.cjs

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+module.exports = {
+  plugins: {
+    tailwindcss: { config: './tailwind.config.ts' },
+    autoprefixer: {},
+  },
+};

examples/next/src/app/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning={true}>
       <body>{children}</body>
     </html>
   );

examples/next/src/app/page.tsx

@@ -5,6 +5,7 @@ import Index from '@/app/index.mdx';
 import { Header } from '@/app/header';
 import { Footer } from '@/app/footer';
 import { MDXProvider } from '@mdx-js/react';
+import { registerCopyButton } from '@rehype-pretty/transformers';
 
 function Heading({
   level,
@@ -25,13 +26,17 @@ function Heading({
 }
 
 export default function Home() {
+  React.useEffect(() => {
+    registerCopyButton();
+  }, []);
   return (
     <>
       <Header />
       <main>
         <div className="prose prose-invert text-gray-300/70 px-4 sm:px-6 md:px-8 mx-auto mt-12 mb-6 relative z-1">
           <article>
             <MDXProvider
+              disableParentContext={false}
               components={{
                 h1: (props) => <Heading level={1} {...props} />,
                 h2: (props) => <Heading level={2} {...props} />,

examples/next/tailwind.config.js → examples/next/tailwind.config.ts

@@ -1,4 +1,5 @@
-const colors = require('tailwindcss/colors');
+import colors from 'tailwindcss/colors';
+import type { Config } from 'tailwindcss';
 
 const linkHeadingStyles = {
   color: colors.gray[100],
@@ -13,7 +14,7 @@ const linkHeadingStyles = {
   },
 };
 
-module.exports = {
+export default (<Config>{
   plugins: [require('@tailwindcss/typography')],
   content: ['./src/**/*.{js,ts,jsx,tsx,md,mdx}'],
   theme: {
@@ -92,4 +93,4 @@ module.exports = {
       },
     },
   },
-};
+});

examples/next/tsconfig.json

@@ -12,7 +12,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "module": "ESNext",
+    "checkJs": true,
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -30,13 +31,15 @@
     }
   },
   "include": [
-    "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "next-env.d.ts",
     ".next/types/**/*.ts"
   ],
   "files": [
-    "next.config.mjs"
+    "next.config.mjs",
+    "postcss.config.cjs",
+    "tailwind.config.ts"
   ],
   "exclude": [
     "_",

examples/sveltekit/package.json

@@ -12,19 +12,19 @@
   },
   "dependencies": {
     "@rehype-pretty/transformers": "workspace:*",
-    "@tailwindcss/vite": "4.0.0-alpha.16",
+    "@tailwindcss/vite": "4.0.0-alpha.17",
     "rehype-pretty-code": "workspace:*",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
-    "tailwindcss": "4.0.0-alpha.16"
+    "tailwindcss": "4.0.0-alpha.17"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.2",
     "@sveltejs/kit": "^2.5.18",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "magic-string": "^0.30.10",
-    "svelte": "5.0.0-next.173",
+    "svelte": "5.0.0-next.193",
     "svelte-check": "^3.8.4",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",

package.json

@@ -27,12 +27,12 @@
     "@changesets/cli": "^2.27.7",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bun": "^1.1.6",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
     "bun": "^1.1.20",
     "knip": "^5.26.0",
     "markdownlint-cli2": "^0.13.0",
     "simple-git-hooks": "^2.11.1",
-    "turbo": "^2.0.6",
+    "turbo": "^2.0.9",
     "typescript": "^5.5.3"
   },
   "overrides": {
@@ -55,7 +55,7 @@
   "simple-git-hooks": {
     "pre-commit": "pnpm format && pnpm lint && pnpm lint:repo && pnpm typecheck"
   },
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.6.0",
   "author": "https://github.com/atomiks",
   "contributors": [
     "atomiks (https://github.com/atomiks)",

packages/core/package.json

@@ -42,16 +42,16 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.15.3",
-    "@shikijs/transformers": "^1.10.3",
-    "@types/node": "^20.14.10",
+    "@shikijs/transformers": "^1.11.0",
+    "@types/node": "^20.14.11",
     "@vitest/ui": "^2.0.3",
     "hast-util-to-html": "^9.0.1",
     "mdast-util-to-hast": "^13.2.0",
     "prettier": "^3.3.3",
     "remark": "^15.0.1",
-    "shiki": "^1.10.3",
+    "shiki": "^1.11.0",
     "ts-dedent": "^2.2.0",
-    "tsup": "^8.1.0",
+    "tsup": "^8.2.1",
     "tsx": "^4.16.2",
     "typescript": "^5.5.3",
     "vite": "^5.3.4",