Update fetch logic and dist files of docs

Author: jhuix

docs/dist/showdowns.min.css

@@ -5,7 +5,7 @@
 import path from 'path';
 
 // 帮助寻找node_modules里的包
-import resolve from '@rollup/plugin-node-resolve';
+import nodeResolve from '@rollup/plugin-node-resolve';
 // rollup 的 babel 插件，ES6转ES5
 import babel from '@rollup/plugin-babel';
 // 将非ES6语法的包转为ES6可用
@@ -81,18 +81,22 @@ const config = {
   },
   // 作用：指出应将哪些模块视为外部模块，否则会被打包进最终的代码里
   external: [
+    '@rokt33r/js-sequence-diagrams',
+    '@viz-js/viz',
     'abcjs',
-    'mermaid',
+    'echarts',
+    'flowchart.js',
     'katex',
+    'katex/dist/contrib/auto-render',
+    'mermaid',
+    'railroad-diagrams',
     'raphael',
-    'flowchart.js',
-    '@viz-js/viz',
-    'wavedrom',
+    'snapsvg',
+    'underscore',
     'vega',
-    'vega-lite',
     'vega-embed',
-    '@rokt33r/js-sequence-diagrams',
-    'katex/dist/contrib/auto-render'
+    'vega-lite',
+    'wavedrom'
   ],
   plugins: [
     json(),
@@ -134,7 +138,7 @@ if (isFormatCJS) {
       exclude: '**/node_modules/**',
       babelHelpers: 'bundled'
     }),
-    resolve({
+    nodeResolve({
       browser: true,
       preferBuiltins: true,
       // 选择module目录传递给解析插件
@@ -156,7 +160,7 @@ if (isMinBuild) {
         pure_getters: true,
         unsafe: true,
         unsafe_comps: true,
-        drop_console: !isDemoBuild
+        drop_console: false
       }
     })
   );

docs/dist/showdowns.min.js

@@ -69,33 +69,48 @@ function renderKrokiElement(element, config) {
       (element.classList.length > 0 ? element.classList[0] : '') +
       (!element.className || !diagramClass ? '' : ' ') +
       diagramClass;
-    if (diagramType.length > 0 && typeof window !== 'undefined' && window.fetch) {
+    if (diagramType.length > 0 && !!window && window.fetch) {
       const id = `${diagramType}-${checksum}-` + Date.now() + '-' + Math.floor(Math.random() * 10000);
       const imageFormat = config.imageFormat;
       const website = 'https://' + config.serverUrl;
       const src = `${website}/${diagramType}/${imageFormat}`;
-      window
-        .fetch(src, {
+      try{
+        window.fetch(src, {
           method: 'POST',
           body: code,
           headers: { Accept: `*/*`, 'Content-Type': 'text/plain; charset=utf-8' }
-        })
-        .then(response => {
-          if (typeof response === 'string') {
-            return response;
+        }).then((res) => {
+          if (typeof res === 'string') {
+            return res;
           }
 
-          if (response.ok) {
-            return response.text();
+          if (res.ok) {
+            return res.text();
           }
-        })
-        .then(svgData => {
-          const outerHTML = `<div id="${id}" class="${classnames}">${svgData}</div>`;
+
+          return new Error(`RequestError: ${res.status}-${res.statusText}`);
+        }).then((svg) => {
+          if (typeof svg === 'Error') {
+            console.log(`kroki to ${imageFormat} of ${diagramType} failed:`, svg.toString());
+            resolve(false);
+            return;
+          }
+
+          const outerHTML = `<div id="${id}" class="${classnames}">${svg}</div>`;
           element.parentNode.outerHTML = outerHTML;
           graphsCache[checksum] = outerHTML;
           resolve(true);
+        }).catch((err) => {
+          console.log(`kroki to ${imageFormat} of ${diagramType} failed:`, err.toString());
+          resolve(false);
         });
+      } catch(err) {
+        console.log(`kroki to ${imageFormat} of ${diagramType} failed:`, err.toString());
+        resolve(false);
+      }
+      return;
     }
+    resolve(false);
   });
 }
 
@@ -124,7 +139,7 @@ function showdownKroki(userConfig) {
     {
       type: 'output',
       config: config,
-      filter: function(obj) {
+      filter: function (obj) {
         const wrapper = obj.wrapper;
         if (!wrapper) {
           return false;

docs/dist/showdowns.min.js.map

@@ -54,37 +54,57 @@ function renderPlantumlElement(element, config) {
           element.parentNode.outerHTML = `<div id="${id}" class="${name}">${svgData}</div>`;
           resolve(true);
         });
-      } else if (typeof window !== 'undefined' && window.fetch && window.dispatchEvent) {
-        const protocol = window && window.location.protocol;
+        return;
+      }
+      if (!!window && window.fetch) {
+        const protocol = window.location && window.location.protocol;
         const website = (protocol === 'http:' || protocol === 'https:' ? '//' : 'https://') + config.umlWebSite;
         const imageExtension = imageFormat !== defaultImageFormat ? `.${imageFormat}` : '';
         const uml = plantumlcodec.encodeuml(code);
         const src = `${website}/${imageFormat}/${uml}${imageExtension}`;
-        window
-          .fetch(src)
-          .then(response => {
-            if (typeof response === 'string') {
-              return response;
-            }
+        try {
+          window
+            .fetch(src)
+            .then((res) => {
+              if (typeof res === 'string') {
+                return res;
+              }
+
+              if (res.ok) {
+                return res.text();
+              }
 
-            if (response.ok) {
-              return response.text();
-            }
-          })
-          .then(svgData => {
-            element.parentNode.outerHTML = `<div id="${id}" class="${name}">${svgData}</div>`;
-            resolve(true);
-          });
+              return new Error(`RequestError: ${res.status}-${res.statusText}`);
+            })
+            .then((svg) => {
+              if (typeof svg === 'Error') {
+                console.log('render remote plantuml failed: ', svg.toString());
+                resolve(false);
+                return;
+              }
+
+              element.parentNode.outerHTML = `<div id="${id}" class="${name}">${svg}</div>`;
+              resolve(true);
+            }).catch((err) => {
+              console.log('render remote plantuml failed: ', err.toString());
+              resolve(false);
+            });
+        } catch (err) {
+          console.log('render remote plantuml failed: ', err.toString());
+          resolve(false);
+        }
+        return;
       }
-    } else {
-      const protocol = window && window.location.protocol;
-      const website = (protocol === 'http:' || protocol === 'https:' ? '//' : 'https://') + config.umlWebSite;
-      const imageExtension = imageFormat !== defaultImageFormat ? `.${imageFormat}` : '';
-      const uml = plantumlcodec.encodeuml(code);
-      const src = `${website}/${imageFormat}/${uml}${imageExtension}`;
-      element.parentNode.outerHTML = `<div class="${name}"><img src='${src}' alt=''></img></div>`;
-      return resolve(true);
+      resolve(false);
+      return;
     }
+    const protocol = window && window.location.protocol;
+    const website = (protocol === 'http:' || protocol === 'https:' ? '//' : 'https://') + config.umlWebSite;
+    const imageExtension = imageFormat !== defaultImageFormat ? `.${imageFormat}` : '';
+    const uml = plantumlcodec.encodeuml(code);
+    const src = `${website}/${imageFormat}/${uml}${imageExtension}`;
+    element.parentNode.outerHTML = `<div class="${name}"><img src='${src}' alt=''></img></div>`;
+    return resolve(true);
   });
 }
 
@@ -117,7 +137,7 @@ function showdownPlantuml(userConfig) {
     {
       type: 'output',
       config: config,
-      filter: function(obj) {
+      filter: function (obj) {
         const wrapper = obj.wrapper;
         if (!wrapper) {
           return false;

rollup.config.js

@@ -54,6 +54,7 @@
   width: 100%;
   order: -1;
   page-break-after: always;
+  break-after: page;
 
   .toc-view ul li div i:not(.toc-chapter) {
     cursor: pointer;
@@ -214,7 +215,7 @@
     max-width: 50%;
     min-width: 256px;
     min-height: 300px;
-    margin-right: 8px;
+    margin-right: 12px;
     transition: all .3s;
     position: fixed;
     top: 0;