chore: use lower build target (#615)

* chore: use lower target

* chore: move code highlight config to nextra

* chore: changeset

* fix: make cusdis a component

.changeset/orange-weeks-judge.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': patch
+---
+
+fix: make cusdis a component

.changeset/silly-suns-sort.md

@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+set lower build target and share code highlight theme through nextra

examples/docs/src/pages/get-started.mdx

@@ -16,17 +16,41 @@ Nextra works like a Next.js plugin, and it accepts a theme config (layout) to re
 1. Install Next.js, Nextra and React
 
 <Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>```bash npm i react react-dom next nextra ```</Nextra.Tab>
-  <Nextra.Tab>```bash yarn add react react-dom next nextra ```</Nextra.Tab>
-  <Nextra.Tab>```bash pnpm i react react-dom next nextra ```</Nextra.Tab>
+  <Nextra.Tab>
+    ```bash 
+    npm i react react-dom next nextra 
+    ```
+  </Nextra.Tab>
+  <Nextra.Tab>
+    ```bash 
+    yarn add react react-dom next nextra 
+    ```
+  </Nextra.Tab>
+  <Nextra.Tab>
+    ```bash 
+    pnpm i react react-dom next nextra 
+    ```
+  </Nextra.Tab>
 </Nextra.Tabs>
 
 2. Install the docs theme
 
 <Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>```bash npm i nextra-theme-docs ```</Nextra.Tab>
-  <Nextra.Tab>```bash yarn add nextra-theme-docs ```</Nextra.Tab>
-  <Nextra.Tab>```bash pnpm i nextra-theme-docs ```</Nextra.Tab>
+  <Nextra.Tab>
+    ```bash 
+    npm i nextra-theme-docs 
+    ```
+  </Nextra.Tab>
+  <Nextra.Tab>
+    ```bash 
+    yarn add nextra-theme-docs 
+    ```
+  </Nextra.Tab>
+  <Nextra.Tab>
+    ```bash 
+    pnpm i nextra-theme-docs 
+    ```
+  </Nextra.Tab>
 </Nextra.Tabs>
 
 3. Create the following Next.js config and theme config under the root directory:

package.json

@@ -19,12 +19,12 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.24.1",
-    "@edge-runtime/vm": "1.1.0-beta.19",
+    "@edge-runtime/vm": "1.1.0-beta.23",
     "postcss-import": "^14.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "rimraf": "^3.0.2",
-    "turbo": "^1.3.4",
+    "turbo": "^1.4.0",
     "typescript": "^4.7.4"
   },
   "prettier": {

packages/nextra-theme-blog/package.json

@@ -11,11 +11,22 @@
   ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "cusdis": [
+        "./dist/cusdis.d.ts"
+      ]
+    }
+  },
   "exports": {
     "./style.css": "./style.css",
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./cusdis": {
+      "import": "./dist/cusdis.js",
+      "types": "./dist/cusdis.d.ts"
     }
   },
   "scripts": {

packages/nextra-theme-blog/src/article-layout.tsx

@@ -3,7 +3,6 @@ import Meta from './meta'
 import MDXTheme from './mdx-theme'
 import { useBlogContext } from './blog-context'
 import { BasicLayout } from './basic-layout'
-import { Comments } from './cusdis'
 import { getParent } from './utils/parent'
 
 export const ArticleLayout = ({ children }: { children: ReactNode }) => {
@@ -15,7 +14,7 @@ export const ArticleLayout = ({ children }: { children: ReactNode }) => {
       <MDXTheme>
         {children}
         {config.postFooter}
-        <Comments></Comments>
+        {config.comments}
       </MDXTheme>
     </BasicLayout>
   )

packages/nextra-theme-blog/src/cusdis.tsx

@@ -11,7 +11,7 @@ const Cusdis = dynamic(
   { ssr: false }
 ) as typeof ReactCusdis
 
-export const Comments = () => {
+const Comments = () => {
   const { config, opts } = useBlogContext()
   const router = useRouter()
   const { pageTitle } = getTitle({ opts, config })
@@ -33,3 +33,5 @@ export const Comments = () => {
     />
   ) : null
 }
+
+export default Comments

packages/nextra-theme-blog/src/styles.css

@@ -1,8 +1,8 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import '../../nextra-theme-docs/src/css/variables.css';
-@import '../../nextra-theme-docs/src/css/code-blocks.css';
+@import 'nextra/code-highlighting/variables.css';
+@import 'nextra/code-highlighting/code-blocks.css';
 
 body {
   @apply px-4;
@@ -21,11 +21,13 @@ h1 {
 }
 
 .prose code {
+
   &:before,
   &:after {
     @apply hidden;
   }
+
   .line {
     @apply font-normal;
   }
-}
+}

packages/nextra-theme-blog/src/types.ts

@@ -1,4 +1,5 @@
 import { PageOpts } from 'nextra'
+import React from 'react'
 
 export interface NextraBlogTheme {
   readMore?: string
@@ -22,6 +23,7 @@ export interface NextraBlogTheme {
     url: string
     name: string
   }[]
+  comments?: React.ReactNode
 }
 
 export interface BlogPageOpts extends PageOpts {

packages/nextra-theme-blog/tsconfig.json

@@ -10,7 +10,8 @@
     "allowJs": true,
     "jsx": "react",
     "moduleResolution": "Node",
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals"],
+    "resolveJsonModule": true
   },
   "include": ["."]
 }

packages/nextra-theme-blog/tsup.config.ts

@@ -1,15 +1,16 @@
 import { defineConfig } from 'tsup'
-
+import tsconfig from './tsconfig.json'
 function outExtension() {
   return {
     js: `.js`
   }
 }
 
 export default defineConfig({
-  entry: ['src/index.tsx'],
+  entry: ['src/index.tsx', "src/cusdis.tsx"],
   format: 'esm',
   dts: true,
   name: 'nextra-theme-blog',
-  outExtension
+  outExtension,
+  target: tsconfig.compilerOptions.target
 })

packages/nextra-theme-docs/src/css/styles.css

@@ -1,8 +1,8 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import './variables.css';
-@import './code-blocks.css';
+@import 'nextra/code-highlighting/variables.css';
+@import 'nextra/code-highlighting/code-blocks.css';
 
 :root {
   --nextra-primary-hue: 212deg;

packages/nextra-theme-docs/tsconfig.json

@@ -10,6 +10,7 @@
     "allowJs": true,
     "jsx": "react",
     "moduleResolution": "Node",
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals"],
+    "resolveJsonModule": true
   }
 }

packages/nextra-theme-docs/tsup.config.ts

@@ -1,37 +1,38 @@
 import { defineConfig } from 'tsup'
+import tsconfig from './tsconfig.json'
 
 function outExtension() {
   return {
     js: `.js`
   }
 }
+const { compilerOptions: { target } } = tsconfig
+
+const sharedConfig = defineConfig({
+  format: 'esm',
+  dts: true,
+  outExtension,
+  target
+})
 export default defineConfig([
   {
     entry: ['src/bleed.tsx', 'src/callout.tsx'],
-    format: 'esm',
-    outExtension,
-    dts: true,
-    name: 'nextra-theme-docs/components'
+    name: 'nextra-theme-docs/components',
+    ...sharedConfig
   },
   {
+    name: 'nextra-theme-docs',
     entry: ['src/index.tsx'],
-    format: 'esm',
-    outExtension,
-    dts: true,
-    name: 'nextra-theme-docs'
+    ...sharedConfig
   },
   {
+    name: 'nextra-theme-docs/tabs',
     entry: ['src/components/tabs.tsx'],
-    format: 'esm',
-    outExtension,
-    dts: true,
-    name: 'nextra-theme-docs/tabs'
+    ...sharedConfig
   },
   {
+    name: 'nextra-theme-docs/collapse',
     entry: ['src/components/collapse.tsx'],
-    format: 'esm',
-    outExtension,
-    dts: true,
-    name: 'nextra-theme-docs/collapse'
+    ...sharedConfig
   }
 ])

packages/nextra/package.json

@@ -5,7 +5,8 @@
   "files": [
     "dist/*",
     "icons/*",
-    "loader.js"
+    "loader.js",
+    "code-highlighting/*"
   ],
   "types": "./dist/types.d.ts",
   "main": "./dist/index.js",

packages/nextra/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "es2016",
     "module": "ESNext",
     "declaration": true,
     "noEmit": true,
@@ -10,7 +10,7 @@
     "allowJs": true,
     "jsx": "react",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals"],
+    "resolveJsonModule": true
   }
 }

packages/nextra/tsup.config.ts

@@ -1,35 +1,43 @@
 import { defineConfig } from 'tsup'
+import tsconfig from './tsconfig.json'
+const { compilerOptions: { target } } = tsconfig
+
 export default defineConfig([
   {
+    name: 'nextra',
     entry: ['src/index.js'],
     format: 'cjs',
-    name: 'nextra',
-    dts: false
+    dts: false,
+    target
   },
   {
+    name: 'nextra-utils',
     entry: ['src/ssg.ts', 'src/locales.ts', 'src/context.ts'],
     format: 'cjs',
-    name: 'nextra-utils',
     external: ['next/server'],
-    dts: true
+    dts: true,
+    target
   },
   {
+    name: 'nextra-loader',
     entry: ['src/loader.ts'],
     format: 'esm',
-    name: 'nextra-loader',
-    dts: true
+    dts: true,
+    target
   },
   {
     entry: ['src/compile.ts'],
     format: 'esm',
     name: 'nextra-mdx-compiler',
-    dts: true
+    dts: true,
+    target
   },
   {
     entry: ['src/icons.ts'],
     name: 'nextra-icons',
     format: 'esm',
-    dts: true
+    dts: true,
+    target
   },
   {
     entry: ['src/types.ts'],