feat: change build system to tsup (#569)

* feat: use tsup and share icons

.changeset/sweet-bikes-reflect.md

@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+refresh build system with tsup and fix nextra type

.github/workflows/ci.yml

@@ -31,3 +31,9 @@ jobs:
 
       - name: Test
         run: pnpm test
+
+      - name: clean
+        run: pnpm clean
+
+      - name: Build
+        run: pnpm build

.github/workflows/release.yml

@@ -27,7 +27,10 @@ jobs:
 
       - name: Install Dependencies
         run: pnpm i
-
+
+      - name: Clean
+        run: pnpm clean
+
       - name: Build
         run: pnpm build
 

examples/blog/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/blog/package.json

@@ -8,7 +8,8 @@
     "build": "next build",
     "start": "next start",
     "debug": "NODE_OPTIONS='--inspect' next dev",
-    "vercel-build": "yarn workspace nextra run build && yarn workspace nextra-theme-docs run build && yarn build"
+    "vercel-build": "yarn workspace nextra run build && yarn workspace nextra-theme-docs run build && yarn build",
+    "clean": "rimraf .next .turbo"
   },
   "dependencies": {
     "gray-matter": "^4.0.2",

examples/docs/package.json

@@ -8,7 +8,8 @@
     "build": "next build",
     "start": "next start",
     "debug": "NODE_OPTIONS='--inspect' next dev",
-    "vercel-build": "yarn workspace nextra run build && yarn workspace nextra-theme-docs run build && yarn build"
+    "vercel-build": "yarn workspace nextra run build && yarn workspace nextra-theme-docs run build && yarn build",
+    "clean": "rimraf .next .turbo"
   },
   "dependencies": {
     "prism-react-renderer": "^1.1.1",

examples/docs/src/pages/themes/docs/configuration.mdx

@@ -238,25 +238,6 @@ export default {
 }
 ```
 
-<!-- ## `font`
-
-Specifies if nextra should load its own fonts. Disable this if you want to use a custom font.
-
-**Type:** `boolean`
-
-**Default:** `true`
-
-**Example:**
-
-```jsx filename="theme.config.js"
-/**
- * @type {import('nextra-theme-docs').DocsThemeConfig}
- */
-export default {
-  font: true
-}
-``` -->
-
 ## `footer`
 
 Specifies if the footer should be shown.

examples/docs/src/pages/themes/docs/index.mdx

@@ -9,17 +9,41 @@ you can install the blog theme with the following commands:
 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:

examples/swr-site/package.json

@@ -6,7 +6,8 @@
     "dev": "next",
     "start": "next start",
     "build": "next build",
-    "debug": "NODE_OPTIONS='--inspect' next dev"
+    "debug": "NODE_OPTIONS='--inspect' next dev",
+    "clean": "rimraf .next .turbo"
   },
   "author": "Shu Ding",
   "license": "Apache-2.0",

package.json

@@ -2,17 +2,20 @@
   "private": true,
   "scripts": {
     "dev": "turbo run dev",
-    "build": "turbo run build types --filter=\"nextra*\"",
+    "build": "turbo run build:tailwind build --filter=\"nextra*\"",
     "types": "turbo run types",
     "dev:core": "turbo run dev --filter=\"nextra\"",
     "dev:theme-blog": "turbo run dev --filter=\"blog\" --include-dependencies",
     "dev:theme-docs": "turbo run dev --filter=\"swr-site\" --include-dependencies",
     "build:core": "pnpm run build --filter=\"nextra\"",
     "build:theme-blog": "pnpm run build --filter=\"nextra-theme-blog\"",
     "build:theme-docs": "pnpm run build --filter=\"nextra-theme-docs\"",
+    "build:all": "turbo run build:tailwind build",
     "version": "changeset version",
     "release": "changeset publish",
-    "test": "turbo run test"
+    "test": "turbo run test",
+    "clean": "turbo run clean",
+    "format": "prettier --write ./**/*.{ts,tsx}"
   },
   "devDependencies": {
     "@changesets/cli": "^2.23.2",
@@ -24,18 +27,18 @@
     "autoprefixer": "^10.4.7",
     "concurrently": "^7.0.0",
     "cssnano": "^4.1.11",
-    "esbuild": "^0.14.10",
     "next": "^12.2.2",
     "postcss": "^8.4.14",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
     "tailwindcss": "^3.1.5",
-    "vitest": "^0.18.1",
     "turbo": "^1.3.4",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vitest": "^0.18.1"
   },
   "prettier": {
     "semi": false,

packages/nextra-theme-blog/package.json

@@ -2,7 +2,6 @@
   "name": "nextra-theme-blog",
   "version": "2.0.0-beta.9",
   "description": "A Nextra theme for blogs.",
-  "main": "index.js",
   "repository": "https://github.com/shuding/nextra",
   "author": "Shu Ding <g@shud.in>",
   "license": "MIT",
@@ -11,22 +10,24 @@
     "index.js",
     "style.css"
   ],
-  "types": "./dist/types.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./style.css": "./style.css",
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
-    "build": "pnpm build:layout & pnpm build:tailwind",
-    "build:layout": "node scripts/build.js",
+    "build": "tsup",
     "build:tailwind": "cross-env NODE_ENV=production pnpm postcss src/styles.css -o style.css --verbose",
-    "types": "tsc -p tsconfig.types.json",
+    "types": "tsup --dts-only",
     "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
-    "dev:layout": "node scripts/dev.js",
+    "dev:layout": "tsup --watch",
     "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
-    "prepublishOnly": "rm -rf dist && pnpm build && pnpm types"
+    "prepublishOnly": "pnpm build",
+    "clean": "rimraf ./dist ./style.css"
   },
   "dependencies": {
     "@mdx-js/react": "^2.1.2",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "nextra": "workspace:*",
-    "@types/react": "^17.0.39"
+    "@types/react": "^17.0.39",
+    "tsup": "^6.1.3"
   }
-}
+}

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

@@ -8,7 +8,6 @@ import { ReactCusdis } from 'react-cusdis'
 import Meta from './meta'
 import Nav from './nav'
 import MDXTheme, { HeadingContext } from './mdx-theme'
-
 import traverse from './utils/traverse'
 import getTags from './utils/get-tags'
 import sortDate from './utils/sort-date'
@@ -162,6 +161,7 @@ const BlogLayout = ({
         <HeadingContext.Provider value={ref}>
           {pageTitle && <h1>{pageTitle}</h1>}
           {type === 'post' ? (
+            // @ts-expect-error
             <Meta {...opts.meta} back={back} config={config} />
           ) : (
             <Nav navPages={navPages} config={config} />
@@ -200,5 +200,5 @@ const createLayout = (opts: PageOpt, _config: NextraBlogTheme) => {
   Page.getLayout = Layout
   return Page
 }
-
+export * from './types'
 export default createLayout

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

@@ -4,11 +4,11 @@ import ThemeSwitch from './theme-switch'
 import type { NextraBlogTheme } from './types'
 import { split } from './utils/get-tags'
 
-interface MeatProps {
+interface MetaProps {
   author: string
   date: string
   tag: string | string[]
-  back: string
+  back?: string | null
   config: NextraBlogTheme
 }
 
@@ -18,7 +18,7 @@ export default function Meta({
   tag,
   back,
   config
-}: MeatProps): ReactElement {
+}: MetaProps): ReactElement {
   const tags = tag ? split(tag) : []
 
   return (

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
-import { MoonIcon, SunIcon } from '../../nextra-theme-docs/src/icons'
+import { MoonIcon, SunIcon } from 'nextra/icons'
 
 export default function ThemeSwitch() {
   const { theme, setTheme, resolvedTheme } = useTheme()

packages/nextra-theme-blog/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2016",
     "module": "ESNext",
-    "declaration": true,
+    "declaration": false,
     "noEmit": true,
     "esModuleInterop": true,
     "strict": true,

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

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsup'
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: 'esm',
+  dts: true,
+  name: 'nextra-theme-blog'
+})