docsify-mermaid - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/docsify-mermaid.js

@@ -128,20 +128,22 @@ // modules are defined as an array
 
-var plugin = function plugin(hook, vm) {
-  hook.afterEach(function (html, next) {
-    // We load the HTML inside a DOM node to allow for manipulation
-    var htmlElement = document.createElement('div');
-    htmlElement.innerHTML = html;
-    htmlElement.querySelectorAll('pre[data-lang=mermaid]').forEach(function (element) {
-      // Create a <div class="mermaid"> to replace the <pre> 
-      var replacement = document.createElement('div');
-      replacement.textContent = element.textContent;
-      replacement.classList.add('mermaid'); // Replace
+var plugin = function plugin(mermaidConf) {
+  return function (hook) {
+    hook.afterEach(function (html, next) {
+      // We load the HTML inside a DOM node to allow for manipulation
+      var htmlElement = document.createElement('div');
+      htmlElement.innerHTML = html;
+      htmlElement.querySelectorAll('pre[data-lang=mermaid]').forEach(function (element) {
+        // Create a <div class="mermaid"> to replace the <pre> 
+        var replacement = document.createElement('div');
+        replacement.textContent = element.textContent;
+        replacement.classList.add('mermaid'); // Replace
 
-      element.parentNode.replaceChild(replacement, element);
+        element.parentNode.replaceChild(replacement, element);
+      });
+      next(htmlElement.innerHTML);
     });
-    next(htmlElement.innerHTML);
-  });
-  hook.doneEach(function () {
-    mermaid.init({}, '.mermaid');
-  });
+    hook.ready(function () {
+      return mermaid.run(mermaidConf);
+    });
+  };
 };
@@ -162,4 +164,7 @@
 
-window.$docsify.plugins = (window.$docsify.plugins || []).concat(_plugin.default);
+var props = window.$docsify.mermaidConfig || {
+  querySelector: ".mermaid"
+};
+window.$docsify.plugins = (window.$docsify.plugins || []).concat((0, _plugin.default)(props));
 },{"./plugin":"GOVZ"}]},{},["Focm"], null)
 //# sourceMappingURL=/docsify-mermaid.js.map

package.json

 {
   "name": "docsify-mermaid",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A plugin to render mermaid diagrams in docsify",
@@ -33,4 +33,4 @@ "browser": "src/index.js",
     "docsify-cli": "^4.4.0",
-    "parcel-bundler": "^1.12.4"
+    "parcel-bundler": "^1.8.1"
   }
 }

README.md

@@ -8,6 +8,22 @@ mermaid-docsify is a docsify plugin which allows to render mermaid diagrams in docsify.
 ```html
-<script src="//unpkg.com/mermaid/dist/mermaid.js"></script>
-<script src="mermaid-docsify.js"> <!-- This is not hosted yet>
+  <script type="module">
+    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+    mermaid.initialize({ startOnLoad: true });
+    window.mermaid = mermaid;
+  </script>
+  <script src="dist/docsify-mermaid.js"></script>
 ```
 
+You can optionally customize [mermaid.run](https://mermaid.js.org/config/usage.html#using-mermaid-run) configuration with this props :
+
+```html
+  <script>
+    window.$docsify = {
+      mermaidConfig: {
+        querySelector: ".mermaid"
+      }
+    };
+  </script>
+```
+
 Now you can include mermaid diagrams in your docsify docs:
@@ -22,2 +38,4 @@
 
-![Docsify with mermaid Screenshot](screenshot.png)
+A demo is available on [Codepen](https://codepen.io/leward/project/editor/AyegJW).
+
+![Docsify with mermaid Screenshot](screenshot.png)

src/index.js

@@ -7,2 +7,4 @@ import plugin from './plugin';
 
-window.$docsify.plugins = (window.$docsify.plugins || []).concat(plugin)
+const props = window.$docsify.mermaidConfig || { querySelector: ".mermaid" };
+
+window.$docsify.plugins = (window.$docsify.plugins || []).concat(plugin(props));

src/plugin.js

@@ -1,6 +0,6 @@
-let plugin = (hook, vm) => {
+const plugin = (mermaidConf) => (hook) => {
 
-    hook.afterEach(function (html, next) {
+    hook.afterEach((html, next) => {
         // We load the HTML inside a DOM node to allow for manipulation
-        var htmlElement = document.createElement('div');
+        const htmlElement = document.createElement('div');
         htmlElement.innerHTML = html;
@@ -10,3 +10,3 @@
             // Create a <div class="mermaid"> to replace the <pre> 
-            var replacement = document.createElement('div');
+            const replacement = document.createElement('div');
             replacement.textContent = element.textContent;
@@ -22,5 +22,3 @@ replacement.classList.add('mermaid');
 
-    hook.doneEach(function () {
-        mermaid.init({}, '.mermaid');
-    });
+    hook.ready(() => mermaid.run(mermaidConf));
 
@@ -27,0 +25,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10651

increased by9.63%

Lines of code

161

increased by2.55%

Number of lines in readme file

40

increased by90.48%

Worsened metrics

Number of package files

6

decreased by-14.29%

No dependency changes