mdx-js v2 update

.changeset/brown-camels-search.md

@@ -0,0 +1,5 @@
+---
+'@guild-docs/client': patch
+---
+
+Set react-use as peer dependency

.changeset/clean-pillows-roll.md

@@ -0,0 +1,13 @@
+---
+'guild-docs': major
+'@guild-docs/client': major
+'@guild-docs/mdx-remote': major
+'@guild-docs/server': major
+'@guild-docs/types': major
+---
+
+Use [MDX 2](https://mdxjs.com/blog/v2/) 🎉
+
+- Requires `Next.js v12`
+- Requires `"@mdx-js/react": "^2.0.0"`
+- Removed support for [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) due to compatibility issues (and it stopped being maintained at April 28th, 2020)

.changeset/flat-bikes-attack.md

@@ -0,0 +1,5 @@
+---
+"@guild-docs/client": minor
+---
+
+feat(client): add support for `mermaid-js`

.changeset/thick-beds-change.md

@@ -0,0 +1,5 @@
+---
+'@guild-docs/server': patch
+---
+
+Fix config, config types & add esmExternals by default

bob-esbuild.config.ts

@@ -6,4 +6,15 @@ export const config: import('bob-esbuild').BobConfig = {
   clean: false,
   distDir: 'dist',
   keepDynamicImport: true,
+  packageConfigs: {
+    '@guild-docs/mdx-remote': {
+      onlyESM: true,
+    },
+    '@guild-docs/client': {
+      onlyESM: true,
+    },
+    '@guild-docs/server': {
+      onlyESM: true,
+    },
+  },
 };

examples/basic/docs/mermaid-support.mdx

@@ -0,0 +1,24 @@
+# Mermaid Support
+
+<Graph>
+
+graph TD;
+subgraph AA [Consumers]
+A[Mobile app];
+B[Web app];
+C[Node.js client];
+end
+subgraph BB [Services]
+E[REST API];
+F[GraphQL API];
+G[SOAP API];
+end
+Z[GraphQL API];
+A --> Z;
+B --> Z;
+C --> Z;
+Z --> E;
+Z --> F;
+Z --> G;
+
+</Graph>

examples/basic/package.json

@@ -7,45 +7,45 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build",
-    "dev": "concurrently -r \"next-remote-watch ./docs ./src/pages/_app.tsx ./src/pages/_document.tsx\" \"wait-on -s 1 http://localhost:3000 && open-cli http://localhost:3000\"",
+    "dev": "concurrently -r pnpm:dev:*",
+    "dev:open": "wait-on http://localhost:3000 && open-cli http://localhost:3000",
+    "dev:watch": "next-remote-watch ./docs ./src/pages/_app.tsx ./src/pages/_document.tsx",
     "next": "next",
     "start": "next start"
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.5",
-    "@chakra-ui/theme-tools": "^1.3.6",
-    "@chakra-ui/utils": "^1.10.4",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
+    "@chakra-ui/react": "1.8.6",
+    "@chakra-ui/theme-tools": "1.3.6",
+    "@chakra-ui/utils": "1.10.4",
+    "@emotion/react": "11.8.2",
+    "@emotion/styled": "11.8.1",
     "@guild-docs/client": "workspace:^1.4.0",
     "@guild-docs/server": "workspace:^2.2.0",
-    "@mdx-js/react": "^1.6.22",
-    "@theguild/components": "^1.10.0",
-    "framer-motion": "^6.2.8",
-    "next": "^12.1.0",
-    "next-i18next": "^10.4.0",
-    "next-seo": "^5.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@mdx-js/react": "2.1.0",
+    "@theguild/components": "1.10.2",
+    "framer-motion": "6.2.8",
+    "next": "12.1.0",
+    "next-i18next": "10.5.0",
+    "next-seo": "5.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-icons": "4.3.1",
-    "react-use": "^17.3.2",
-    "remark-admonitions": "^1.2.1",
-    "shiki": "^0.10.1"
+    "react-use": "17.3.2",
+    "shiki": "0.10.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^12.1.0",
-    "@types/mdx-js__react": "^1.5.5",
-    "@types/node": "^17.0.17",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "bob-tsm": "^0.4.6",
-    "concurrently": "^7.0.0",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.14.23",
+    "@next/bundle-analyzer": "^12.0.10",
+    "@types/node": "16.11.7",
+    "@types/react": "17.0.42",
+    "@types/react-dom": "17.0.14",
+    "bob-tsm": "0.4.7",
+    "concurrently": "7.0.0",
+    "cross-env": "7.0.3",
+    "esbuild": "0.14.27",
     "next-remote-watch": "^1.0.0",
     "open-cli": "^7.0.1",
-    "typescript": "4.5.5",
+    "typescript": "4.6.2",
     "wait-on": "^6.0.1"
   },
   "nextBundleAnalysis": {

examples/basic/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import 'remark-admonitions/styles/infima.css';
 import '../../public/style.css';
 
 import { appWithTranslation } from 'next-i18next';
@@ -96,7 +95,8 @@ function AppContent(appProps: AppProps) {
         cta={{
           children: 'Get Started',
           title: 'Start using The Guild Docs',
-          href: 'https://github.com/the-guild-org/the-guild-docs',
+          href: '/',
+          onClick: e => handlePushRoute('/docs', e),
           target: '_blank',
           rel: 'noopener noreferrer',
         }}

package.json

@@ -1,6 +1,4 @@
 {
-  "name": "the-guild-docs",
-  "version": "1.0.0",
   "private": true,
   "homepage": "https://github.com/the-guild-org/the-guild-docs#readme",
   "bugs": {
@@ -21,58 +19,58 @@
     "dev:cli": "pnpm -r --filter guild-docs dev",
     "dev:client": "pnpm -r --filter @guild-docs/client dev",
     "dev:example": "pnpm -r --filter basic dev",
+    "dev:mdx-remote": "pnpm -r --filter @guild-docs/mdx-remote dev",
     "dev:server": "pnpm -r --filter @guild-docs/server dev",
     "dev:types": "pnpm -r --filter @guild-docs/types dev",
-    "lint": "eslint .",
+    "lint": "eslint --ignore-path .gitignore .",
     "prepare": "concurrently -r \"bob-esbuild tsc && pnpm -r prepack\" \"husky install\"",
     "pretty": "pretty-quick",
     "pretty:all": "prettier -w \"**/*.{ts,tsx,json}\"",
     "release:canary": "(node scripts/canary-release.js && pnpm -r publish --access public --no-git-checks --tag alpha) || echo Skipping Canary..."
   },
   "devDependencies": {
     "@changesets/apply-release-plan": "5.0.5",
-    "@changesets/assemble-release-plan": "5.1.0",
-    "@changesets/cli": "2.21.0",
+    "@changesets/assemble-release-plan": "5.1.1",
+    "@changesets/cli": "2.21.1",
     "@changesets/config": "1.7.0",
     "@changesets/read": "0.5.4",
     "@manypkg/get-packages": "1.1.3",
-    "@types/node": "^17.0.17",
-    "@types/react": "^17.0.39",
-    "@types/react-instantsearch-core": "^6.10.7",
-    "@types/react-instantsearch-dom": "^6.12.2",
-    "@types/react-paginate": "^7.1.1",
-    "@typescript-eslint/eslint-plugin": "5.12.1",
-    "@typescript-eslint/parser": "5.12.1",
-    "bob-esbuild": "^3.2.4",
-    "bob-esbuild-cli": "^3.0.1",
-    "bob-tsm": "^0.4.6",
-    "chalk": "^5.0.0",
-    "concurrently": "^7.0.0",
-    "esbuild": "^0.14.23",
-    "eslint": "8.9.0",
-    "eslint-config-prettier": "8.4.0",
+    "@types/node": "16.11.7",
+    "@types/react": "17.0.42",
+    "@types/react-instantsearch-core": "6.10.7",
+    "@types/react-instantsearch-dom": "6.12.2",
+    "@types/react-paginate": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "5.16.0",
+    "@typescript-eslint/parser": "5.16.0",
+    "bob-esbuild": "3.2.5",
+    "bob-esbuild-cli": "3.0.2",
+    "bob-tsm": "0.4.7",
+    "chalk": "5.0.1",
+    "concurrently": "7.0.0",
+    "esbuild": "0.14.27",
+    "eslint": "8.11.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
-    "globby": "^11.1.0",
+    "globby": "13.1.1",
     "husky": "7.0.4",
-    "next": "^12.1.0",
-    "prettier": "^2.5.1",
-    "pretty-quick": "^3.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
+    "next": "12.1.0",
+    "prettier": "2.6.0",
+    "pretty-quick": "3.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "rimraf": "3.0.2",
     "semver": "7.3.5",
-    "typescript": "4.5.5"
+    "typescript": "4.6.2"
   },
   "engines": {
     "pnpm": ">=6.23"
   },
   "pnpm": {
     "overrides": {
-      "trim@<0.0.3": ">=0.0.3",
-      "typescript": "4.4.4"
+      "trim@<0.0.3": ">=0.0.3"
     }
   }
 }

packages/cli/package.json

@@ -22,18 +22,18 @@
     "test-new": "rimraf \"../../examples/new\" && node dist/index.js init \"../../examples/new\""
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.178",
-    "@types/mkdirp": "^1.0.2",
-    "@types/node": "^17.0.17",
-    "@types/prettier": "^2.4.4",
-    "bob-tsm": "^0.4.6",
-    "bob-watch": "^0.1.1",
-    "changesets-github-release": "^0.1.0",
-    "commander": "^9.0.0",
-    "esbuild": "^0.14.23",
-    "lodash": "^4.17.21",
-    "mkdirp": "^1.0.4",
-    "npm-api": "^1.0.1",
-    "prettier": "^2.5.1"
+    "@types/lodash": "4.14.180",
+    "@types/mkdirp": "1.0.2",
+    "@types/node": "16.11.7",
+    "@types/prettier": "2.4.4",
+    "bob-tsm": "0.4.7",
+    "bob-watch": "0.1.1",
+    "changesets-github-release": "0.1.0",
+    "commander": "9.1.0",
+    "esbuild": "0.14.27",
+    "lodash": "4.17.21",
+    "mkdirp": "1.0.4",
+    "npm-api": "1.0.1",
+    "prettier": "2.6.0"
   }
 }

packages/cli/src/index.ts

@@ -39,7 +39,6 @@ async function DepsAction(dir: string = process.cwd()) {
       '@emotion/styled',
       'framer-motion',
       'next',
-      'remark-admonitions',
       'next-i18next',
       'react',
       'react-dom',
@@ -56,10 +55,8 @@ async function DepsAction(dir: string = process.cwd()) {
         '@types/node',
         '@types/react',
         '@types/react-dom',
-        '@types/mdx-js__react',
         'typescript',
         'concurrently',
-        '@types/concurrently',
         'open-cli',
         'wait-on',
         'next-remote-watch',
@@ -71,11 +68,13 @@ async function DepsAction(dir: string = process.cwd()) {
       }
     ),
     addPackageScripts({
+      analyze: 'cross-env ANALYZE=true next build',
       build: 'next build',
-      dev: 'concurrently -r "next-remote-watch ./docs ./routes.ts ./src/pages/_app.tsx ./src/pages/_document.tsx" "wait-on -s 1 http://localhost:3000 && open-cli http://localhost:3000"',
+      dev: 'concurrently -r pnpm:dev:*',
+      'dev:open': 'wait-on http://localhost:3000 && open-cli http://localhost:3000',
+      'dev:watch': 'next-remote-watch ./docs ./src/pages/_app.tsx ./src/pages/_document.tsx',
       next: 'next',
       start: 'next start',
-      analyze: 'cross-env ANALYZE=true next build',
     }),
   ]);
 

packages/cli/src/nextConfig.ts

@@ -95,7 +95,6 @@ export async function writeApp() {
     writeFileFormatIfNotExists(
       [config.cwd, 'src/pages/_app.tsx'],
       `
-    import 'remark-admonitions/styles/infima.css';
     import '../../public/style.css';
 
     import { appWithTranslation } from 'next-i18next';