markmap-autoloader 0.1.5 → 0.13.0-alpha.0

package/README.md

@@ -26,7 +26,7 @@ HTML:
 </div>
 ```
 
-Autoload all `.markmap`:
+Autoload all elements matching `.markmap`:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
@@ -49,15 +49,44 @@ setTimeout(() => {
 </script>
 ```
 
+Disable built-in plugins:
+
+```html
+<script>
+window.markmap = {
+  autoLoader: {
+    transformPlugins: [],
+  },
+};
+</script>
+<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
+```
+
 ## API
 
+### Options
+
+If `window.markmap.autoLoader` is defined before this package is loaded, it will be regarded as autoLoader options.
+
+- `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.
+
+- `autoLoader.transformPlugins` *ITransformPlugin[]*
+
+    Override built-in plugins if provided. Set to `[]` to disable all built-in plugins for auto-loader.
+
+- `autoLoader.onReady` *function*
+
+    Callback when markmap-lib/markmap-view and their dependencies are loaded. We can tweak global options in this callback.
+
 ### markmap.autoLoader.renderAll()
 
-Render all `.markmap`s.
+Render all elements matching `.markmap`.
 
 ### markmap.autoLoader.renderAllUnder(el)
 
-Render all `.markmap`s under container `el`.
+Render all elements matching `.markmap` under container `el`.
 
 ### markmap.autoLoader.render(el)
 

package/dist/index.js

@@ -1,9 +1,9 @@
-/*! markmap-autoloader v0.1.5 | MIT License */
+/*! markmap-autoloader v0.13.0-alpha.0 | MIT License */
 this.markmap = this.markmap || {};
 (function (exports) {
 'use strict';
 
-/*! markmap-common v0.1.5 | MIT License */
+/*! markmap-common v0.13.0-alpha.0 | MIT License */
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -91,6 +91,18 @@ function loadJSItem(item, context) {
   }
 }
 
+function loadCSSItem(item) {
+  if (item.type === 'style') {
+    document.head.append(createElement('style', {
+      textContent: item.data
+    }));
+  } else if (item.type === 'stylesheet') {
+    document.head.append(createElement('link', _extends({
+      rel: 'stylesheet'
+    }, item.data)));
+  }
+}
+
 async function loadJS(items, context) {
   const needPreload = items.filter(item => {
     var _item$data2;
@@ -107,19 +119,36 @@ async function loadJS(items, context) {
   }
 }
 
+function loadCSS(items) {
+  for (const item of items) {
+    loadCSSItem(item);
+  }
+}
+
 var _window$markmap, _window$markmap$autoL;
 const enabled = {};
-const preloading = loadJS([{
+const ready = loadJS([{
   type: 'script',
   data: {
-    src: `https://cdn.jsdelivr.net/npm/d3@${"6.6.0"}`
+    src: `https://cdn.jsdelivr.net/npm/d3@${"6.7.0"}`
   }
 }, {
   type: 'script',
   data: {
-    src: `https://cdn.jsdelivr.net/combine/npm/markmap-lib@${"0.11.5"},npm/markmap-view@${"0.2.5"}`
+    src: `https://cdn.jsdelivr.net/combine/npm/markmap-lib@${"0.13.0-alpha.0"},npm/markmap-view@${"0.13.0-alpha.0"}`
   }
-}]);
+}]).then(() => {
+  var _markmap$autoLoader;
+
+  const {
+    markmap
+  } = window;
+  loadCSS([{
+    type: 'style',
+    data: markmap.globalCSS
+  }]);
+  (_markmap$autoLoader = markmap.autoLoader) == null ? void 0 : _markmap$autoLoader.onReady == null ? void 0 : _markmap$autoLoader.onReady();
+});
 
 function transform(transformer, content) {
   const {
@@ -135,18 +164,18 @@ function transform(transformer, content) {
     scripts
   } = transformer.getAssets(keys);
   const {
-    loadJS,
-    loadCSS
-  } = window.markmap;
-  if (styles) loadCSS(styles);
-  if (scripts) loadJS(scripts);
+    markmap
+  } = window;
+  if (styles) markmap.loadCSS(styles);
+  if (scripts) markmap.loadJS(scripts);
   return root;
 }
 
 function render(el) {
   const {
     Transformer,
-    Markmap
+    Markmap,
+    autoLoader
   } = window.markmap;
   const lines = el.textContent.split('\n');
   let indent = Infinity;
@@ -155,22 +184,24 @@ function render(el) {
     if (spaces < line.length) indent = Math.min(indent, spaces);
   });
   const content = lines.map(line => line.slice(indent)).join('\n');
-  const transformer = new Transformer();
+  const transformer = new Transformer(autoLoader == null ? void 0 : autoLoader.transformPlugins);
   el.innerHTML = '<svg></svg>';
   const svg = el.firstChild;
-  const mm = Markmap.create(svg);
+  const mm = Markmap.create(svg, {
+    embedGlobalCSS: false
+  });
 
-  const render = () => {
+  const doRender = () => {
     const root = transform(transformer, content);
     mm.setData(root);
     mm.fit();
   };
 
-  transformer.hooks.retransform.tap(render);
-  render();
+  transformer.hooks.retransform.tap(doRender);
+  doRender();
 }
 async function renderAllUnder(container) {
-  await preloading;
+  await ready;
   container.querySelectorAll('.markmap').forEach(render);
 }
 function renderAll() {
@@ -183,8 +214,9 @@ if (!((_window$markmap = window.markmap) != null && (_window$markmap$autoL = _wi
   });else renderAll();
 }
 
+exports.ready = ready;
 exports.render = render;
 exports.renderAll = renderAll;
 exports.renderAllUnder = renderAllUnder;
 
-}(this.markmap.autoLoader = this.markmap.autoLoader || {}));
+})(this.markmap.autoLoader = this.markmap.autoLoader || {});

package/dist/index.min.js

@@ -1,3 +1,3 @@
-/*! markmap-autoloader v0.1.5 | MIT License */
+/*! markmap-autoloader v0.13.0-alpha.0 | MIT License */
 this.markmap=this.markmap||{},function(t){"use strict";
-/*! markmap-common v0.1.5 | MIT License */function n(){return(n=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])}return t}).apply(this,arguments)}function r(t,n,r){const e=document.createElement(t);return n&&Object.entries(n).forEach((([t,n])=>{e[t]=n})),r&&Object.entries(r).forEach((([t,n])=>{e.setAttribute(t,n)})),e}Math.random().toString(36).slice(2,8);const e=function(t){const n={};return function(...r){const e=`${r[0]}`;let a=n[e];return a||(a={value:t(...r)},n[e]=a),a.value}}((t=>{document.head.append(r("link",{rel:"preload",as:"script",href:t}))}));function a(t,e){if("script"===t.type)return new Promise(((e,a)=>{var o;document.head.append(r("script",n({},t.data,{onload:e,onerror:a}))),null!=(o=t.data)&&o.src||e()}));if("iife"===t.type){const{fn:n,getParams:r}=t.data;n(...(null==r?void 0:r(e))||[])}}var o,s;const c={},i=async function(t,r){const o=t.filter((t=>{var n;return"script"===t.type&&(null==(n=t.data)?void 0:n.src)}));o.length>1&&o.forEach((t=>e(t.data.src))),r=n({getMarkmap:()=>window.markmap},r);for(const n of t)await a(n,r)}([{type:"script",data:{src:"https://cdn.jsdelivr.net/npm/d3@6.6.0"}},{type:"script",data:{src:"https://cdn.jsdelivr.net/combine/npm/markmap-lib@0.11.5,npm/markmap-view@0.2.5"}}]);function d(t){const{Transformer:n,Markmap:r}=window.markmap,e=t.textContent.split("\n");let a=1/0;e.forEach((t=>{const n=t.match(/^\s*/)[0].length;n<t.length&&(a=Math.min(a,n))}));const o=e.map((t=>t.slice(a))).join("\n"),s=new n;t.innerHTML="<svg></svg>";const i=t.firstChild,d=r.create(i),l=()=>{const t=function(t,n){const{root:r,features:e}=t.transform(n),a=Object.keys(e).filter((t=>!c[t]));a.forEach((t=>{c[t]=!0}));const{styles:o,scripts:s}=t.getAssets(a),{loadJS:i,loadCSS:d}=window.markmap;return o&&d(o),s&&i(s),r}(s,o);d.setData(t),d.fit()};s.hooks.retransform.tap(l),l()}async function l(t){await i,t.querySelectorAll(".markmap").forEach(d)}function m(){return l(document)}null!=(o=window.markmap)&&null!=(s=o.autoLoader)&&s.manual||("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{m()})):m()),t.render=d,t.renderAll=m,t.renderAllUnder=l}(this.markmap.autoLoader=this.markmap.autoLoader||{});
+/*! markmap-common v0.13.0-alpha.0 | MIT License */function n(){return n=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t},n.apply(this,arguments)}function e(t,n,e){const a=document.createElement(t);return n&&Object.entries(n).forEach((([t,n])=>{a[t]=n})),e&&Object.entries(e).forEach((([t,n])=>{a.setAttribute(t,n)})),a}Math.random().toString(36).slice(2,8);const a=function(t){const n={};return function(...e){const a=`${e[0]}`;let r=n[a];return r||(r={value:t(...e)},n[a]=r),r.value}}((t=>{document.head.append(e("link",{rel:"preload",as:"script",href:t}))}));function r(t,a){if("script"===t.type)return new Promise(((a,r)=>{var o;document.head.append(e("script",n({},t.data,{onload:a,onerror:r}))),null!=(o=t.data)&&o.src||a()}));if("iife"===t.type){const{fn:n,getParams:e}=t.data;n(...(null==e?void 0:e(a))||[])}}function o(t){"style"===t.type?document.head.append(e("style",{textContent:t.data})):"stylesheet"===t.type&&document.head.append(e("link",n({rel:"stylesheet"},t.data)))}var s,c;const i={},l=async function(t,e){const o=t.filter((t=>{var n;return"script"===t.type&&(null==(n=t.data)?void 0:n.src)}));o.length>1&&o.forEach((t=>a(t.data.src))),e=n({getMarkmap:()=>window.markmap},e);for(const n of t)await r(n,e)}([{type:"script",data:{src:"https://cdn.jsdelivr.net/npm/d3@6.7.0"}},{type:"script",data:{src:"https://cdn.jsdelivr.net/combine/npm/markmap-lib@0.13.0-alpha.0,npm/markmap-view@0.13.0-alpha.0"}}]).then((()=>{var t;const{markmap:n}=window;!function(t){for(const n of t)o(n)}([{type:"style",data:n.globalCSS}]),null==(t=n.autoLoader)||null==t.onReady||t.onReady()}));function d(t){const{Transformer:n,Markmap:e,autoLoader:a}=window.markmap,r=t.textContent.split("\n");let o=1/0;r.forEach((t=>{const n=t.match(/^\s*/)[0].length;n<t.length&&(o=Math.min(o,n))}));const s=r.map((t=>t.slice(o))).join("\n"),c=new n(null==a?void 0:a.transformPlugins);t.innerHTML="<svg></svg>";const l=t.firstChild,d=e.create(l,{embedGlobalCSS:!1}),p=()=>{const t=function(t,n){const{root:e,features:a}=t.transform(n),r=Object.keys(a).filter((t=>!i[t]));r.forEach((t=>{i[t]=!0}));const{styles:o,scripts:s}=t.getAssets(r),{markmap:c}=window;return o&&c.loadCSS(o),s&&c.loadJS(s),e}(c,s);d.setData(t),d.fit()};c.hooks.retransform.tap(p),p()}async function p(t){await l,t.querySelectorAll(".markmap").forEach(d)}function u(){return p(document)}null!=(s=window.markmap)&&null!=(c=s.autoLoader)&&c.manual||("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{u()})):u()),t.ready=l,t.render=d,t.renderAll=u,t.renderAllUnder=p}(this.markmap.autoLoader=this.markmap.autoLoader||{});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-autoloader",
-  "version": "0.1.5",
+  "version": "0.13.0-alpha.0",
   "description": "Load markmaps automatically in HTML",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -21,7 +21,6 @@
   "scripts": {
     "dev": "rollup -wc rollup.conf.js",
     "clean": "del-cli dist types",
-    "lint": "eslint --ext .ts .",
     "build:types": "tsc",
     "build:js": "rollup -c rollup.conf.js"
   },
@@ -39,11 +38,11 @@
     "node": ">=10"
   },
   "dependencies": {
-    "markmap-common": "^0.1.5"
+    "markmap-common": "^0.13.0-alpha.0"
   },
   "devDependencies": {
-    "markmap-lib": "^0.11.5",
-    "markmap-view": "^0.2.5"
+    "markmap-lib": "^0.13.0-alpha.0",
+    "markmap-view": "^0.13.0-alpha.0"
   },
-  "gitHead": "e7ad38a05cf693b73c584899419eb945e7cb0c7a"
+  "gitHead": "969aa149f36580954e77b7ba434e5c48b409cfc2"
 }

package/types/index.d.ts

@@ -1,3 +1,4 @@
-export declare function render(el: any): void;
-export declare function renderAllUnder(container: ParentNode): Promise<void>;
-export declare function renderAll(): Promise<void>;
+export declare const ready: Promise<void>;
+export declare function render(el: HTMLElement): void;
+export declare function renderAllUnder(container: ParentNode): Promise<void>;
+export declare function renderAll(): Promise<void>;