markmap-autoloader 0.15.0-alpha.0 → 0.15.0

package/README.md

@@ -12,18 +12,23 @@ HTML:
 
 ```html
 <style>
-.markmap > svg {
-  width: 100%;
-  height: 300px;
-}
+  .markmap {
+    position: relative;
+  }
+  .markmap > svg {
+    width: 100%;
+    height: 300px;
+  }
 </style>
 
-<div class="markmap"><script type="text/template">
-- markmap
-  - autoloader
-  - transformer
-  - view
-</script></div>
+<div class="markmap">
+  <script type="text/template">
+    - markmap
+      - autoloader
+      - transformer
+      - view
+  </script>
+</div>
 ```
 
 Note that `<script type="text/template">` is optional, for the content inside to be invisible before the markmap is rendered.
@@ -44,16 +49,16 @@ Load manually:
 
 ```html
 <script>
-window.markmap = {
-  autoLoader: { manual: true },
-};
+  window.markmap = {
+    autoLoader: { manual: true },
+  };
 </script>
 <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
 <script>
-// Render in 5s
-setTimeout(() => {
-  markmap.autoLoader.renderAll();
-}, 5000);
+  // Render in 5s
+  setTimeout(() => {
+    markmap.autoLoader.renderAll();
+  }, 5000);
 </script>
 ```
 
@@ -61,11 +66,11 @@ Disable built-in plugins:
 
 ```html
 <script>
-window.markmap = {
-  autoLoader: {
-    transformPlugins: [],
-  },
-};
+  window.markmap = {
+    autoLoader: {
+      transformPlugins: [],
+    },
+  };
 </script>
 <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
 ```
@@ -76,17 +81,17 @@ window.markmap = {
 
 If `window.markmap.autoLoader` is defined before this package is loaded, it will be regarded as autoLoader options.
 
-- `autoLoader.manual` *boolean* default as `false`
+- `autoLoader.manual` _boolean_ default as `false`
 
-    Whether to render markmaps manually. If false, all elements matching `.markmap` will be rendered once this package loads or DOMContentLoaded is emitted, whichever later.
+  Whether to render markmaps manually. If false, all elements matching `.markmap` will be rendered once this package loads or DOMContentLoaded is emitted, whichever later.
 
-- `autoLoader.transformPlugins` *ITransformPlugin[]*
+- `autoLoader.transformPlugins` _ITransformPlugin[]_
 
-    Override built-in plugins if provided. Set to `[]` to disable all built-in plugins for auto-loader.
+  Override built-in plugins if provided. Set to `[]` to disable all built-in plugins for auto-loader.
 
-- `autoLoader.onReady` *function*
+- `autoLoader.onReady` _function_
 
-    Callback when markmap-lib/markmap-view and their dependencies are loaded. We can tweak global options in this callback.
+  Callback when markmap-lib/markmap-view and their dependencies are loaded. We can tweak global options in this callback.
 
 ### markmap.autoLoader.renderAll()
 

package/dist/index.js

@@ -1,9 +1,24 @@
-/*! markmap-autoloader v0.15.0-alpha.0 | MIT License */
+/*! markmap-autoloader v0.15.0 | MIT License */
 this.markmap = this.markmap || {};
 (function (exports) {
 'use strict';
 
-/*! markmap-common v0.15.0-alpha.0 | MIT License */
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+/*! markmap-common v0.15.0 | MIT License */
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -18,6 +33,49 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
+const testPath = "npm2url/dist/index.cjs";
+const defaultProviders = {
+  jsdelivr: path => `https://cdn.jsdelivr.net/npm/${path}`,
+  unpkg: path => `https://unpkg.com/${path}`
+};
+class UrlBuilder {
+  constructor() {
+    this.providers = _extends({}, defaultProviders);
+    this.provider = "jsdelivr";
+  }
+  getFastestProvider(path = testPath) {
+    return Promise.any(Object.entries(this.providers).map(async ([name, factory]) => {
+      const res = await fetch(factory(path));
+      if (!res.ok) {
+        throw res;
+      }
+      await res.text();
+      return name;
+    }));
+  }
+  async findFastestProvider() {
+    this.provider = await this.getFastestProvider();
+    return this.provider;
+  }
+  setProvider(name, factory) {
+    if (factory) {
+      this.providers[name] = factory;
+    } else {
+      delete this.providers[name];
+    }
+  }
+  getFullUrl(path, provider = this.provider) {
+    if (path.includes("://")) {
+      return path;
+    }
+    const factory = this.providers[provider];
+    if (!factory) {
+      throw new Error(`Provider ${provider} not found`);
+    }
+    return factory(path);
+  }
+}
+const urlBuilder = new UrlBuilder();
 Math.random().toString(36).slice(2, 8);
 function memoize(fn) {
   const cache = {};
@@ -33,52 +91,189 @@ function memoize(fn) {
     return data.value;
   };
 }
-const providers = {
-  jsdelivr: path => `https://cdn.jsdelivr.net/npm/${path}`,
-  unpkg: path => `https://unpkg.com/${path}`
+
+/*! @gera2ld/jsx-dom v2.2.2 | ISC License */
+const VTYPE_ELEMENT = 1;
+const VTYPE_FUNCTION = 2;
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const NS_ATTRS = {
+  show: XLINK_NS,
+  actuate: XLINK_NS,
+  href: XLINK_NS
 };
-function cdnUrl(provider, path) {
-  const factory = providers[provider];
-  if (!factory) {
-    throw new Error(`Provider ${provider} not found`);
-  }
-  return factory(path);
-}
-function createElement(tagName, props, attrs) {
-  const el = document.createElement(tagName);
-  if (props) {
-    Object.entries(props).forEach(([key, value]) => {
-      el[key] = value;
-    });
+const isLeaf = c => typeof c === 'string' || typeof c === 'number';
+const isElement = c => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
+const isRenderFunction = c => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
+function h(type, props, ...children) {
+  props = Object.assign({}, props, {
+    children: children.length === 1 ? children[0] : children
+  });
+  return jsx(type, props);
+}
+function jsx(type, props) {
+  let vtype;
+  if (typeof type === 'string') vtype = VTYPE_ELEMENT;else if (typeof type === 'function') vtype = VTYPE_FUNCTION;else throw new Error('Invalid VNode type');
+  return {
+    vtype,
+    type,
+    props
+  };
+}
+function Fragment(props) {
+  return props.children;
+}
+const DEFAULT_ENV = {
+  isSvg: false
+};
+function insertDom(parent, nodes) {
+  if (!Array.isArray(nodes)) nodes = [nodes];
+  nodes = nodes.filter(Boolean);
+  if (nodes.length) parent.append(...nodes);
+}
+function mountAttributes(domElement, props, env) {
+  for (const key in props) {
+    if (key === 'key' || key === 'children' || key === 'ref') continue;
+    if (key === 'dangerouslySetInnerHTML') {
+      domElement.innerHTML = props[key].__html;
+    } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText' || key === 'value' && ['textarea', 'select'].includes(domElement.tagName)) {
+      const value = props[key];
+      if (value != null) domElement[key] = value;
+    } else if (key.startsWith('on')) {
+      domElement[key.toLowerCase()] = props[key];
+    } else {
+      setDOMAttribute(domElement, key, props[key], env.isSvg);
+    }
   }
-  if (attrs) {
-    Object.entries(attrs).forEach(([key, value]) => {
-      el.setAttribute(key, value);
-    });
+}
+const attrMap = {
+  className: 'class',
+  labelFor: 'for'
+};
+function setDOMAttribute(el, attr, value, isSVG) {
+  attr = attrMap[attr] || attr;
+  if (value === true) {
+    el.setAttribute(attr, '');
+  } else if (value === false) {
+    el.removeAttribute(attr);
+  } else {
+    const namespace = isSVG ? NS_ATTRS[attr] : undefined;
+    if (namespace !== undefined) {
+      el.setAttributeNS(namespace, attr, value);
+    } else {
+      el.setAttribute(attr, value);
+    }
+  }
+}
+function flatten(arr) {
+  return arr.reduce((prev, item) => prev.concat(item), []);
+}
+function mountChildren(children, env) {
+  return Array.isArray(children) ? flatten(children.map(child => mountChildren(child, env))) : mount(children, env);
+}
+function mount(vnode, env = DEFAULT_ENV) {
+  if (vnode == null || typeof vnode === 'boolean') {
+    return null;
+  }
+  if (vnode instanceof Node) {
+    return vnode;
+  }
+  if (isRenderFunction(vnode)) {
+    const {
+      type,
+      props
+    } = vnode;
+    if (type === Fragment) {
+      const node = document.createDocumentFragment();
+      if (props.children) {
+        const children = mountChildren(props.children, env);
+        insertDom(node, children);
+      }
+      return node;
+    }
+    const childVNode = type(props);
+    return mount(childVNode, env);
+  }
+  if (isLeaf(vnode)) {
+    return document.createTextNode(`${vnode}`);
+  }
+  if (isElement(vnode)) {
+    let node;
+    const {
+      type,
+      props
+    } = vnode;
+    if (!env.isSvg && type === 'svg') {
+      env = Object.assign({}, env, {
+        isSvg: true
+      });
+    }
+    if (!env.isSvg) {
+      node = document.createElement(type);
+    } else {
+      node = document.createElementNS(SVG_NS, type);
+    }
+    mountAttributes(node, props, env);
+    if (props.children) {
+      let childEnv = env;
+      if (env.isSvg && type === 'foreignObject') {
+        childEnv = Object.assign({}, childEnv, {
+          isSvg: false
+        });
+      }
+      const children = mountChildren(props.children, childEnv);
+      if (children != null) insertDom(node, children);
+    }
+    const {
+      ref
+    } = props;
+    if (typeof ref === 'function') ref(node);
+    return node;
   }
-  return el;
+  throw new Error('mount: Invalid Vnode!');
+}
+
+/**
+ * Mount vdom as real DOM nodes.
+ */
+function mountDom(vnode) {
+  return mount(vnode);
+}
+
+/**
+ * Render and mount without returning VirtualDOM, useful when you don't need SVG support.
+ */
+function hm(...args) {
+  return mountDom(h(...args));
 }
 const memoizedPreloadJS = memoize(url => {
-  document.head.append(createElement('link', {
+  document.head.append(hm('link', {
     rel: 'preload',
     as: 'script',
     href: url
   }));
 });
+const jsCache = {};
+const cssCache = {};
 async function loadJSItem(item, context) {
+  var _item$data;
+  const src = item.type === 'script' && ((_item$data = item.data) == null ? void 0 : _item$data.src) || '';
+  item.loaded || (item.loaded = jsCache[src]);
   if (!item.loaded) {
     if (item.type === 'script') {
       item.loaded = new Promise((resolve, reject) => {
-        var _item$data;
-        document.head.append(createElement('script', _extends({}, item.data, {
-          onload: resolve,
-          onerror: reject
+        document.head.append(hm('script', _extends({}, item.data, {
+          onLoad: resolve,
+          onError: reject
         })));
-        // Run inline script synchronously
-        if (!((_item$data = item.data) != null && _item$data.src)) resolve(undefined);
+        if (!src) {
+          // Run inline script synchronously
+          resolve(undefined);
+        }
       }).then(() => {
         item.loaded = true;
       });
+      if (src) jsCache[src] = item.loaded;
     }
     if (item.type === 'iife') {
       const {
@@ -91,12 +286,29 @@ async function loadJSItem(item, context) {
   }
   await item.loaded;
 }
+function loadCSSItem(item) {
+  const url = item.type === 'stylesheet' && item.data.href || '';
+  item.loaded || (item.loaded = cssCache[url]);
+  if (item.loaded) return;
+  item.loaded = true;
+  if (url) cssCache[url] = true;
+  if (item.type === 'style') {
+    document.head.append(hm('style', {
+      textContent: item.data
+    }));
+  } else if (item.type === 'stylesheet') {
+    document.head.append(hm('link', _extends({
+      rel: 'stylesheet'
+    }, item.data)));
+  }
+}
 async function loadJS(items, context) {
-  const needPreload = items.filter(item => {
+  items.forEach(item => {
     var _item$data2;
-    return item.type === 'script' && ((_item$data2 = item.data) == null ? void 0 : _item$data2.src);
+    if (item.type === 'script' && (_item$data2 = item.data) != null && _item$data2.src) {
+      memoizedPreloadJS(item.data.src);
+    }
   });
-  if (needPreload.length > 1) needPreload.forEach(item => memoizedPreloadJS(item.data.src));
   context = _extends({
     getMarkmap: () => window.markmap
   }, context);
@@ -104,24 +316,39 @@ async function loadJS(items, context) {
     await loadJSItem(item, context);
   }
 }
-let provider = 'jsdelivr';
-function getFullUrl(path) {
-  if (path.includes('://')) return path;
-  return cdnUrl(provider, path);
+function loadCSS(items) {
+  for (const item of items) {
+    loadCSSItem(item);
+  }
 }
 function buildJSItem(path) {
   return {
     type: 'script',
     data: {
-      src: getFullUrl(path)
+      src: path
+    }
+  };
+}
+function buildCSSItem(path) {
+  return {
+    type: 'stylesheet',
+    data: {
+      href: path
     }
   };
 }
 
-var _window$markmap, _window$markmap2;
+var _window$markmap;
 const enabled = {};
-const ready = loadJS(((_window$markmap = window.markmap) == null || (_window$markmap = _window$markmap.autoLoader) == null ? void 0 : _window$markmap.baseJs) || [`d3@${"6.2.0"}`, `markmap-lib@${"0.15.0-alpha.0"}`, `markmap-view@${"0.15.0-alpha.0"}`].map(buildJSItem)).then(() => {
-  var _markmap$autoLoader;
+const autoLoaderOptions = _extends$1({
+  baseJs: [`d3@${"7.8.5"}`, `markmap-lib@${"0.15.0"}`, `markmap-view@${"0.15.0"}`, `markmap-toolbar@${"0.15.0"}`],
+  baseCss: [`markmap-toolbar@${"0.15.0"}/dist/style.css`],
+  manual: false,
+  toolbar: false
+}, (_window$markmap = window.markmap) == null ? void 0 : _window$markmap.autoLoader);
+async function initialize() {
+  await urlBuilder.findFastestProvider();
+  await Promise.all([loadJS(autoLoaderOptions.baseJs.map(item => typeof item === 'string' ? buildJSItem(urlBuilder.getFullUrl(item)) : item)), loadCSS(autoLoaderOptions.baseCss.map(item => typeof item === 'string' ? buildCSSItem(urlBuilder.getFullUrl(item)) : item))]);
   const {
     markmap
   } = window;
@@ -129,8 +356,9 @@ const ready = loadJS(((_window$markmap = window.markmap) == null || (_window$mar
   style.textContent = markmap.globalCSS;
   // Insert global CSS to body so it has higher priority than prism.css, etc.
   document.body.prepend(style);
-  (_markmap$autoLoader = markmap.autoLoader) == null || _markmap$autoLoader.onReady == null ? void 0 : _markmap$autoLoader.onReady();
-});
+  autoLoaderOptions.onReady == null ? void 0 : autoLoaderOptions.onReady();
+}
+const ready = initialize();
 function transform(transformer, content) {
   const result = transformer.transform(content);
   const keys = Object.keys(result.features).filter(key => !enabled[key]);
@@ -149,25 +377,38 @@ function transform(transformer, content) {
   return result;
 }
 function render(el) {
+  var _el$textContent;
   const {
     Transformer,
     Markmap,
-    autoLoader,
-    deriveOptions
+    deriveOptions,
+    Toolbar
   } = window.markmap;
-  const lines = el.textContent.split('\n');
+  const lines = ((_el$textContent = el.textContent) == null ? void 0 : _el$textContent.split('\n')) || [];
   let indent = Infinity;
   lines.forEach(line => {
-    const spaces = line.match(/^\s*/)[0].length;
+    var _line$match;
+    const spaces = ((_line$match = line.match(/^\s*/)) == null ? void 0 : _line$match[0].length) || 0;
     if (spaces < line.length) indent = Math.min(indent, spaces);
   });
   const content = lines.map(line => line.slice(indent)).join('\n').trim();
-  const transformer = new Transformer(autoLoader == null ? void 0 : autoLoader.transformPlugins);
+  const transformer = new Transformer(autoLoaderOptions.transformPlugins);
   el.innerHTML = '<svg></svg>';
   const svg = el.firstChild;
   const mm = Markmap.create(svg, {
     embedGlobalCSS: false
   });
+  if (autoLoaderOptions.toolbar) {
+    const {
+      el: toolbar
+    } = Toolbar.create(mm);
+    Object.assign(toolbar.style, {
+      position: 'absolute',
+      right: '20px',
+      bottom: '20px'
+    });
+    el.append(toolbar);
+  }
   const doRender = () => {
     const {
       root,
@@ -188,7 +429,7 @@ async function renderAllUnder(container) {
 function renderAll() {
   return renderAllUnder(document);
 }
-if (!((_window$markmap2 = window.markmap) != null && (_window$markmap2 = _window$markmap2.autoLoader) != null && _window$markmap2.manual)) {
+if (!autoLoaderOptions.manual) {
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => {
     renderAll();
   });else renderAll();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-autoloader",
-  "version": "0.15.0-alpha.0",
+  "version": "0.15.0",
   "description": "Load markmaps automatically in HTML",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "url": "git+https://github.com/markmap/markmap.git"
   },
   "scripts": {
-    "dev": "rollup -wc rollup.conf.js",
+    "dev": "rollup -wc",
     "clean": "del-cli dist types",
     "build:types": "tsc",
-    "build:js": "rollup -c rollup.conf.js"
+    "build:js": "rollup -c"
   },
   "bugs": {
     "url": "https://github.com/markmap/markmap/issues"
@@ -38,9 +38,10 @@
     "markmap-common": "*"
   },
   "devDependencies": {
-    "markmap-common": "0.15.0-alpha.0",
-    "markmap-lib": "0.15.0-alpha.0",
-    "markmap-view": "0.15.0-alpha.0"
+    "markmap-common": "0.15.0",
+    "markmap-lib": "0.15.0",
+    "markmap-toolbar": "0.15.0",
+    "markmap-view": "0.15.0"
   },
-  "gitHead": "cea14d4791b8483481a99baa5d256017f52f267c"
+  "gitHead": "9c13bae5e28346ec613362046a023839ef64538b"
 }