build(esm): bundle to cjs and esm

sjwall · Aug 22, 2022 · 138147d · 138147d
1 parent c263a0c
commit 138147d
Show file tree

Hide file tree

Showing 21 changed files with 3,830 additions and 3,729 deletions.
diff --git a/doc/docs/examples.mdx b/doc/docs/examples.mdx
@@ -6,7 +6,7 @@ sidebar_position: 2
 
 The documentation for this library is a working example.
 
-This file for has a diagram using the component and code block.
+This file, for example, has a diagram using the component and code block.
 
 ## Component
 
@@ -75,7 +75,7 @@ Future task2               :         des4, after des3, 5d
 Mermaid config can be configured through the plugin config:
 
 ```js title=docusaurus.config.js
-remarkPlugins: [[require('mdx-mermaid'), { mermaid: { theme: 'dark' } }]],
+remarkPlugins: [[await import('mdx-mermaid').default, { mermaid: { theme: 'dark' } }]],
 ```
 
 :::caution

diff --git a/doc/docs/intro.md b/doc/docs/intro.md
@@ -11,34 +11,41 @@ Setup mdx-mermaid in Docusaurus.
 Use your preferred package manager to install.
 
 ```shell title=NPM
-npm i mdx-mermaid mermaid
+npm i mdx-mermaid@^1.3.0 mermaid
 ```
 
 ```shell title=Yarn
-yarn add mdx-mermaid mermaid
+yarn add mdx-mermaid@^1.3.0 mermaid
 ```
 
 ```shell title=PNPM
-pnpm add mdx-mermaid mermaid
+pnpm add mdx-mermaid@^1.3.0 mermaid
 ```
 
 ## Configure in Docusaurus
 
-Add
-
-```js
-require('mdx-mermaid')
-```
-
-to `remarkPlugins`
+Import the module and pass it to `remarkPlugins`:
 
 ```js title=docusaurus.config.js
-presets: [
-    [
-      '@docusaurus/preset-classic',
-      {
-        docs: {
-          remarkPlugins: [require('mdx-mermaid')],
+
+async function createConfig() {
+  const mdxMermaid = await import('mdx-mermaid')
+
+  return {
+    presets: [
+      [
+        'classic',
+        {
+          docs: {
+            remarkPlugins: [mdxMermaid.default],
+          }
+        }
+      ]
+    ]
+  }
+}
+
+module.exports = createConfig;
 ```
 
 ## Add a Diagram

diff --git a/doc/docs/mermaid-versions.md b/doc/docs/mermaid-versions.md
@@ -4,8 +4,8 @@ sidebar_position: 4
 
 # Supported Mermaid versions
 
-This library supports Mermaid versions `>= 8.11.0 < 8.12.0`
+This library supports Mermaid versions `>= 8.11.0`
 
 The version needs to be at least `8.11.0` due to this issue: https://github.com/sjwall/mdx-mermaid/issues/20
 
-The version needs to be less than `8.12.0` due to the `d3` version upgrade to modules https://github.com/mermaid-js/mermaid/issues/2559
+To use Mermaid versions `>=8.12.0` ESM must be used, due to the `d3` version upgrade to modules https://github.com/mermaid-js/mermaid/issues/2559
diff --git a/doc/docs/theme.mdx b/doc/docs/theme.mdx
@@ -7,7 +7,7 @@ sidebar_position: 3
 The theme can be changed between dark and light themes by setting `theme` values in the configuration:
 
 ```js title=docusaurus.config.js
-remarkPlugins: [[require('mdx-mermaid'), {
+remarkPlugins: [[await import('mdx-mermaid'), {
     theme: { light: 'neutral', dark: 'forest' }
   }]],
 ```

diff --git a/doc/docusaurus.config.js b/doc/docusaurus.config.js
@@ -4,99 +4,108 @@
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
-  title: 'mdx-mermaid',
-  tagline: 'Plug and play Mermaid in MDX',
-  url: 'https://sjwall.github.io',
-  baseUrl: '/mdx-mermaid/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
-  trailingSlash: true,
-  organizationName: 'sjwall', // Usually your GitHub org/user name.
-  projectName: 'mdx-mermaid', // Usually your repo name.
+async function createConfig() {
+  const mdxMermaid = await import('mdx-mermaid')
 
-  presets: [
-    [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          remarkPlugins: [require('mdx-mermaid')],
-          sidebarPath: require.resolve('./sidebars.js'),
-          // Please change this to your repo.
-          editUrl:
-            'https://github.com/sjwall/mdx-mermaid/edit/main/doc',
-        },
-        theme: {
-          customCss: require.resolve('./src/css/custom.css'),
-        },
-      }),
-    ],
-  ],
+  /** @type {import('@docusaurus/types').Config} */
+  return {
+    title: 'mdx-mermaid',
+    tagline: 'Plug and play Mermaid in MDX',
+    url: 'https://sjwall.github.io',
+    baseUrl: '/mdx-mermaid/',
+    onBrokenLinks: 'throw',
+    onBrokenMarkdownLinks: 'warn',
+    favicon: 'img/favicon.ico',
+    trailingSlash: true,
+    organizationName: 'sjwall', // Usually your GitHub org/user name.
+    projectName: 'mdx-mermaid', // Usually your repo name.
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      navbar: {
-        title: 'mdx-mermaid',
-        logo: {
-          alt: 'mdx-mermaid',
-          src: 'img/logo.svg',
-        },
-        items: [
-          {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Tutorial',
-          },
-          {
-            href: 'https://github.com/sjwall/mdx-mermaid',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Tutorial',
-                to: '/docs/intro',
-              },
-            ],
+    presets: [
+      [
+        'classic',
+        /** @type {import('@docusaurus/preset-classic').Options} */
+        ({
+          docs: {
+            remarkPlugins: [mdxMermaid.default],
+            sidebarPath: require.resolve('./sidebars.js'),
+            // Please change this to your repo.
+            editUrl:
+              'https://github.com/sjwall/mdx-mermaid/edit/main/doc',
           },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/mdx-mermaid',
-              },
-            ],
+          theme: {
+            customCss: require.resolve('./src/css/custom.css'),
           },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'GitHub',
-                href: 'https://github.com/sjwall/mdx-mermaid',
-              },
-            ],
+        }),
+      ],
+    ],
+
+    themeConfig:
+      /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+      ({
+        navbar: {
+          title: 'mdx-mermaid',
+          logo: {
+            alt: 'mdx-mermaid',
+            src: 'img/logo.svg',
           },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Samuel Wall. Built with Docusaurus.`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
-};
+          items: [
+            {
+              type: 'doc',
+              docId: 'intro',
+              position: 'left',
+              label: 'Tutorial',
+            },
+            {
+              type: 'docsVersionDropdown',
+              position: 'right',
+              dropdownActiveClassDisabled: true,
+            },
+            {
+              href: 'https://github.com/sjwall/mdx-mermaid',
+              label: 'GitHub',
+              position: 'right',
+            },
+          ],
+        },
+        footer: {
+          style: 'dark',
+          links: [
+            {
+              title: 'Docs',
+              items: [
+                {
+                  label: 'Tutorial',
+                  to: '/docs/intro',
+                },
+              ],
+            },
+            {
+              title: 'Community',
+              items: [
+                {
+                  label: 'Stack Overflow',
+                  href: 'https://stackoverflow.com/questions/tagged/mdx-mermaid',
+                },
+              ],
+            },
+            {
+              title: 'More',
+              items: [
+                {
+                  label: 'GitHub',
+                  href: 'https://github.com/sjwall/mdx-mermaid',
+                },
+              ],
+            },
+          ],
+          copyright: `Copyright © ${new Date().getFullYear()} Samuel Wall. Built with Docusaurus.`,
+        },
+        prism: {
+          theme: lightCodeTheme,
+          darkTheme: darkCodeTheme,
+        },
+      }),
+  };
+}
 
-module.exports = config;
+module.exports = createConfig;
diff --git a/doc/package.json b/doc/package.json
@@ -15,12 +15,12 @@
     "postinstall": "cd ../node_modules/react && yarn link && cd ../../doc && yarn link react"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.17",
-    "@docusaurus/preset-classic": "^2.0.0-beta.17",
+    "@docusaurus/core": "^2.0.0",
+    "@docusaurus/preset-classic": "^2.0.0",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "mdx-mermaid": "link:..",
-    "mermaid": "8.11.4",
+    "mermaid": "^9.1.6",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"

diff --git a/doc/versioned_docs/version-1.2.3/examples.mdx b/doc/versioned_docs/version-1.2.3/examples.mdx
@@ -0,0 +1,85 @@
+---
+sidebar_position: 2
+---
+
+# Examples
+
+The documentation for this library is a working example.
+
+This file, for example, has a diagram using the component and code block.
+
+## Component
+
+```jsx title="Component example"
+import { Mermaid } from 'mdx-mermaid/Mermaid'
+
+<Mermaid chart={`sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!`} />
+```
+
+<Mermaid chart={`sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!`} />
+
+## Code block
+
+The component doesn't need to be imported as this will be auto inserted.
+
+````md title="Code block example"
+```mermaid
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+```
+````
+
+```mermaid
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+```
+
+## Mermaid Config
+
+Mermaid config can be configured through the plugin config:
+
+```js title=docusaurus.config.js
+remarkPlugins: [[require('mdx-mermaid'), { mermaid: { theme: 'dark' } }]],
+```
+
+:::caution
+
+When passing config to the `<Mermaid>` component only the first instance should have the config passed to it.
+If no config is passed to any component then Mermaid will not initialize.
+This is not an issue when using in `.mdx` files as the parser will handle this.