Adapt examples

Author: pomber

examples/contentlayer/pages/_app.js

@@ -1,4 +1,4 @@
-import "@code-hike/mdx/dist/index.css"
+import "@code-hike/mdx/styles"
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

examples/mdx-bundler/pages/_app.js

@@ -1,4 +1,4 @@
-import "@code-hike/mdx/dist/index.css"
+import "@code-hike/mdx/styles"
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

examples/mdx-bundler/pages/index.js

@@ -4,7 +4,6 @@ import fs from "fs"
 import path from "path"
 import { bundleMDX } from "mdx-bundler"
 import { getMDXComponent } from "mdx-bundler/client"
-import { useMemo } from "react"
 
 export async function getStaticProps() {
   // can be from a local file, database, anywhere

examples/nextjs/pages/_app.js

@@ -1,4 +1,4 @@
-import "@code-hike/mdx/dist/index.css"
+import "@code-hike/mdx/styles"
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

examples/nextra/pages/_app.js

@@ -1,5 +1,5 @@
 import "nextra-theme-docs/style.css"
-import "@code-hike/mdx/dist/index.css"
+import "@code-hike/mdx/styles"
 
 export default function Nextra({ Component, pageProps }) {
   return <Component {...pageProps} />

examples/remix/app/root.jsx

@@ -6,7 +6,7 @@ import {
   Scripts,
   ScrollRestoration
 } from "remix";
-import codeHikeStyles from "@code-hike/mdx/dist/index.css";
+import codeHikeStyles from "@code-hike/mdx/styles.css";
 
 export function meta() {
   return { title: "New Remix App" };

examples/vite/src/App.jsx

@@ -1,4 +1,4 @@
-import '@code-hike/mdx/dist/index.css'
+import '@code-hike/mdx/styles'
 import Content from './hello.mdx'
 
 function App() {

packages/mdx/package.json

@@ -15,7 +15,8 @@
     },
     "./components": {
       "import": "./dist/components.esm.js",
-      "require": "./dist/components.cjs.js"
+      "require": "./dist/components.cjs.js",
+      "default": "./dist/components.cjs.js"
     },
     "./package.json": "./package.json",
     "./styles": "./dist/index.css",

packages/mdx/src/mdx-plugin/plugin.ts

@@ -26,7 +26,7 @@ export function remarkCodeHike(
     visit(tree, "mdxjsEsm", (node: EsmNode) => {
       if (
         node.value.startsWith(
-          `import { CH } from "@code-hike/mdx"`
+          `import { CH } from "@code-hike/mdx`
         )
       ) {
         hasCodeHikeImport = true