markmap-autoloader 0.14.4 → 0.14.5-alpha.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +33 -28
  2. package/dist/index.js +95 -49
  3. package/package.json +11 -13
  4. package/dist/index.min.js +0 -3
package/README.md CHANGED
@@ -12,18 +12,23 @@ HTML:
12
12
 
13
13
  ```html
14
14
  <style>
15
- .markmap > svg {
16
- width: 100%;
17
- height: 300px;
18
- }
15
+ .markmap {
16
+ position: relative;
17
+ }
18
+ .markmap > svg {
19
+ width: 100%;
20
+ height: 300px;
21
+ }
19
22
  </style>
20
23
 
21
- <div class="markmap"><script type="text/template">
22
- - markmap
23
- - autoloader
24
- - transformer
25
- - view
26
- </script></div>
24
+ <div class="markmap">
25
+ <script type="text/template">
26
+ - markmap
27
+ - autoloader
28
+ - transformer
29
+ - view
30
+ </script>
31
+ </div>
27
32
  ```
28
33
 
29
34
  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:
44
49
 
45
50
  ```html
46
51
  <script>
47
- window.markmap = {
48
- autoLoader: { manual: true },
49
- };
52
+ window.markmap = {
53
+ autoLoader: { manual: true },
54
+ };
50
55
  </script>
51
56
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
52
57
  <script>
53
- // Render in 5s
54
- setTimeout(() => {
55
- markmap.autoLoader.renderAll();
56
- }, 5000);
58
+ // Render in 5s
59
+ setTimeout(() => {
60
+ markmap.autoLoader.renderAll();
61
+ }, 5000);
57
62
  </script>
58
63
  ```
59
64
 
@@ -61,11 +66,11 @@ Disable built-in plugins:
61
66
 
62
67
  ```html
63
68
  <script>
64
- window.markmap = {
65
- autoLoader: {
66
- transformPlugins: [],
67
- },
68
- };
69
+ window.markmap = {
70
+ autoLoader: {
71
+ transformPlugins: [],
72
+ },
73
+ };
69
74
  </script>
70
75
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
71
76
  ```
@@ -76,17 +81,17 @@ window.markmap = {
76
81
 
77
82
  If `window.markmap.autoLoader` is defined before this package is loaded, it will be regarded as autoLoader options.
78
83
 
79
- - `autoLoader.manual` *boolean* default as `false`
84
+ - `autoLoader.manual` _boolean_ default as `false`
80
85
 
81
- Whether to render markmaps manually. If false, all elements matching `.markmap` will be rendered once this package loads or DOMContentLoaded is emitted, whichever later.
86
+ Whether to render markmaps manually. If false, all elements matching `.markmap` will be rendered once this package loads or DOMContentLoaded is emitted, whichever later.
82
87
 
83
- - `autoLoader.transformPlugins` *ITransformPlugin[]*
88
+ - `autoLoader.transformPlugins` _ITransformPlugin[]_
84
89
 
85
- Override built-in plugins if provided. Set to `[]` to disable all built-in plugins for auto-loader.
90
+ Override built-in plugins if provided. Set to `[]` to disable all built-in plugins for auto-loader.
86
91
 
87
- - `autoLoader.onReady` *function*
92
+ - `autoLoader.onReady` _function_
88
93
 
89
- Callback when markmap-lib/markmap-view and their dependencies are loaded. We can tweak global options in this callback.
94
+ Callback when markmap-lib/markmap-view and their dependencies are loaded. We can tweak global options in this callback.
90
95
 
91
96
  ### markmap.autoLoader.renderAll()
92
97
 
package/dist/index.js CHANGED
@@ -1,64 +1,78 @@
1
- /*! markmap-autoloader v0.14.4 | MIT License */
1
+ /*! markmap-autoloader v0.14.5-alpha.15+1fe26c8 | MIT License */
2
2
  this.markmap = this.markmap || {};
3
3
  (function (exports) {
4
4
  'use strict';
5
5
 
6
- /*! markmap-common v0.14.2 | MIT License */
6
+ function _extends$1() {
7
+ _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
8
+ for (var i = 1; i < arguments.length; i++) {
9
+ var source = arguments[i];
10
+ for (var key in source) {
11
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
12
+ target[key] = source[key];
13
+ }
14
+ }
15
+ }
16
+ return target;
17
+ };
18
+ return _extends$1.apply(this, arguments);
19
+ }
7
20
 
21
+ /*! markmap-common v0.14.5-alpha.15+1fe26c8 | MIT License */
8
22
  function _extends() {
9
- _extends = Object.assign || function (target) {
23
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
10
24
  for (var i = 1; i < arguments.length; i++) {
11
25
  var source = arguments[i];
12
-
13
26
  for (var key in source) {
14
27
  if (Object.prototype.hasOwnProperty.call(source, key)) {
15
28
  target[key] = source[key];
16
29
  }
17
30
  }
18
31
  }
19
-
20
32
  return target;
21
33
  };
22
-
23
34
  return _extends.apply(this, arguments);
24
35
  }
25
-
26
36
  Math.random().toString(36).slice(2, 8);
27
37
  function memoize(fn) {
28
38
  const cache = {};
29
39
  return function memoized(...args) {
30
40
  const key = `${args[0]}`;
31
41
  let data = cache[key];
32
-
33
42
  if (!data) {
34
43
  data = {
35
44
  value: fn(...args)
36
45
  };
37
46
  cache[key] = data;
38
47
  }
39
-
40
48
  return data.value;
41
49
  };
42
50
  }
43
-
51
+ const providers = {
52
+ jsdelivr: path => `https://cdn.jsdelivr.net/npm/${path}`,
53
+ unpkg: path => `https://unpkg.com/${path}`
54
+ };
55
+ function cdnUrl(provider, path) {
56
+ const factory = providers[provider];
57
+ if (!factory) {
58
+ throw new Error(`Provider ${provider} not found`);
59
+ }
60
+ return factory(path);
61
+ }
44
62
  function createElement(tagName, props, attrs) {
45
63
  const el = document.createElement(tagName);
46
-
47
64
  if (props) {
48
65
  Object.entries(props).forEach(([key, value]) => {
49
66
  el[key] = value;
50
67
  });
51
68
  }
52
-
53
69
  if (attrs) {
54
70
  Object.entries(attrs).forEach(([key, value]) => {
55
71
  el.setAttribute(key, value);
56
72
  });
57
73
  }
58
-
59
74
  return el;
60
75
  }
61
-
62
76
  const memoizedPreloadJS = memoize(url => {
63
77
  document.head.append(createElement('link', {
64
78
  rel: 'preload',
@@ -66,24 +80,21 @@ const memoizedPreloadJS = memoize(url => {
66
80
  href: url
67
81
  }));
68
82
  });
69
-
70
83
  async function loadJSItem(item, context) {
71
84
  if (!item.loaded) {
72
85
  if (item.type === 'script') {
73
86
  item.loaded = new Promise((resolve, reject) => {
74
87
  var _item$data;
75
-
76
88
  document.head.append(createElement('script', _extends({}, item.data, {
77
89
  onload: resolve,
78
90
  onerror: reject
79
- }))); // Run inline script synchronously
80
-
91
+ })));
92
+ // Run inline script synchronously
81
93
  if (!((_item$data = item.data) != null && _item$data.src)) resolve(undefined);
82
94
  }).then(() => {
83
95
  item.loaded = true;
84
96
  });
85
97
  }
86
-
87
98
  if (item.type === 'iife') {
88
99
  const {
89
100
  fn,
@@ -93,51 +104,79 @@ async function loadJSItem(item, context) {
93
104
  item.loaded = true;
94
105
  }
95
106
  }
96
-
97
107
  await item.loaded;
98
108
  }
99
-
109
+ function loadCSSItem(item) {
110
+ if (item.loaded) return;
111
+ item.loaded = true;
112
+ if (item.type === 'style') {
113
+ document.head.append(createElement('style', {
114
+ textContent: item.data
115
+ }));
116
+ } else if (item.type === 'stylesheet') {
117
+ document.head.append(createElement('link', _extends({
118
+ rel: 'stylesheet'
119
+ }, item.data)));
120
+ }
121
+ }
100
122
  async function loadJS(items, context) {
101
123
  const needPreload = items.filter(item => {
102
124
  var _item$data2;
103
-
104
125
  return item.type === 'script' && ((_item$data2 = item.data) == null ? void 0 : _item$data2.src);
105
126
  });
106
127
  if (needPreload.length > 1) needPreload.forEach(item => memoizedPreloadJS(item.data.src));
107
128
  context = _extends({
108
129
  getMarkmap: () => window.markmap
109
130
  }, context);
110
-
111
131
  for (const item of items) {
112
132
  await loadJSItem(item, context);
113
133
  }
114
134
  }
115
-
116
- var _window$markmap, _window$markmap$autoL, _window$markmap2, _window$markmap2$auto;
117
- const enabled = {};
118
- const ready = loadJS(((_window$markmap = window.markmap) == null ? void 0 : (_window$markmap$autoL = _window$markmap.autoLoader) == null ? void 0 : _window$markmap$autoL.baseJs) || [{
119
- type: 'script',
120
- data: {
121
- src: `https://cdn.jsdelivr.net/npm/d3@${"6.7.0"}`
122
- }
123
- }, {
124
- type: 'script',
125
- data: {
126
- src: `https://cdn.jsdelivr.net/combine/npm/markmap-lib@${"0.14.4"},npm/markmap-view@${"0.14.4"}`
135
+ function loadCSS(items) {
136
+ for (const item of items) {
137
+ loadCSSItem(item);
127
138
  }
128
- }]).then(() => {
129
- var _markmap$autoLoader;
139
+ }
140
+ let provider = 'jsdelivr';
141
+ function getFullUrl(path, overrideProvider = provider) {
142
+ if (path.includes('://')) return path;
143
+ return cdnUrl(overrideProvider, path);
144
+ }
145
+ function buildJSItem(path, overrideProvider) {
146
+ return {
147
+ type: 'script',
148
+ data: {
149
+ src: getFullUrl(path, overrideProvider)
150
+ }
151
+ };
152
+ }
153
+ function buildCSSItem(path, overrideProvider) {
154
+ return {
155
+ type: 'stylesheet',
156
+ data: {
157
+ href: getFullUrl(path, overrideProvider)
158
+ }
159
+ };
160
+ }
130
161
 
162
+ var _window$markmap;
163
+ const enabled = {};
164
+ const autoLoaderOptions = _extends$1({
165
+ baseJs: [`d3@${"6.2.0"}`, `markmap-lib@${"0.14.5-alpha.15+1fe26c8"}`, `markmap-view@${"0.14.5-alpha.15+1fe26c8"}`, `markmap-toolbar@${process.env.TOOLBAR_VERSION}`],
166
+ baseCss: [`markmap-toolbar@${process.env.TOOLBAR_VERSION}/dist/style.css`],
167
+ manual: false,
168
+ toolbar: false
169
+ }, (_window$markmap = window.markmap) == null ? void 0 : _window$markmap.autoLoader);
170
+ const ready = Promise.all([loadJS(autoLoaderOptions.baseJs.map(item => typeof item === 'string' ? buildJSItem(item) : item)), loadCSS(autoLoaderOptions.baseCss.map(item => typeof item === 'string' ? buildCSSItem(item) : item))]).then(() => {
131
171
  const {
132
172
  markmap
133
173
  } = window;
134
174
  const style = document.createElement('style');
135
- style.textContent = markmap.globalCSS; // Insert global CSS to body so it has higher priority than prism.css, etc.
136
-
175
+ style.textContent = markmap.globalCSS;
176
+ // Insert global CSS to body so it has higher priority than prism.css, etc.
137
177
  document.body.prepend(style);
138
- (_markmap$autoLoader = markmap.autoLoader) == null ? void 0 : _markmap$autoLoader.onReady == null ? void 0 : _markmap$autoLoader.onReady();
178
+ autoLoaderOptions.onReady == null ? void 0 : autoLoaderOptions.onReady();
139
179
  });
140
-
141
180
  function transform(transformer, content) {
142
181
  const result = transformer.transform(content);
143
182
  const keys = Object.keys(result.features).filter(key => !enabled[key]);
@@ -155,13 +194,12 @@ function transform(transformer, content) {
155
194
  if (scripts) markmap.loadJS(scripts);
156
195
  return result;
157
196
  }
158
-
159
197
  function render(el) {
160
198
  const {
161
199
  Transformer,
162
200
  Markmap,
163
- autoLoader,
164
- deriveOptions
201
+ deriveOptions,
202
+ Toolbar
165
203
  } = window.markmap;
166
204
  const lines = el.textContent.split('\n');
167
205
  let indent = Infinity;
@@ -170,13 +208,23 @@ function render(el) {
170
208
  if (spaces < line.length) indent = Math.min(indent, spaces);
171
209
  });
172
210
  const content = lines.map(line => line.slice(indent)).join('\n').trim();
173
- const transformer = new Transformer(autoLoader == null ? void 0 : autoLoader.transformPlugins);
211
+ const transformer = new Transformer(autoLoaderOptions.transformPlugins);
174
212
  el.innerHTML = '<svg></svg>';
175
213
  const svg = el.firstChild;
176
214
  const mm = Markmap.create(svg, {
177
215
  embedGlobalCSS: false
178
216
  });
179
-
217
+ if (autoLoaderOptions.toolbar) {
218
+ const {
219
+ el: toolbar
220
+ } = Toolbar.create(mm);
221
+ Object.assign(toolbar.style, {
222
+ position: 'absolute',
223
+ right: '20px',
224
+ bottom: '20px'
225
+ });
226
+ el.append(toolbar);
227
+ }
180
228
  const doRender = () => {
181
229
  const {
182
230
  root,
@@ -187,7 +235,6 @@ function render(el) {
187
235
  mm.setData(root, frontmatterOptions);
188
236
  mm.fit();
189
237
  };
190
-
191
238
  transformer.hooks.retransform.tap(doRender);
192
239
  doRender();
193
240
  }
@@ -198,8 +245,7 @@ async function renderAllUnder(container) {
198
245
  function renderAll() {
199
246
  return renderAllUnder(document);
200
247
  }
201
-
202
- if (!((_window$markmap2 = window.markmap) != null && (_window$markmap2$auto = _window$markmap2.autoLoader) != null && _window$markmap2$auto.manual)) {
248
+ if (!autoLoaderOptions.manual) {
203
249
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => {
204
250
  renderAll();
205
251
  });else renderAll();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "markmap-autoloader",
3
- "version": "0.14.4",
3
+ "version": "0.14.5-alpha.15+1fe26c8",
4
4
  "description": "Load markmaps automatically in HTML",
5
5
  "author": "Gerald <gera2ld@live.com>",
6
6
  "license": "MIT",
@@ -9,14 +9,14 @@
9
9
  "markdown",
10
10
  "mindmap"
11
11
  ],
12
- "homepage": "https://github.com/gera2ld/markmap/packages/markmap-autoloader#readme",
12
+ "homepage": "https://github.com/markmap/markmap/packages/markmap-autoloader#readme",
13
13
  "publishConfig": {
14
14
  "access": "public",
15
15
  "registry": "https://registry.npmjs.org/"
16
16
  },
17
17
  "repository": {
18
18
  "type": "git",
19
- "url": "git+https://github.com/gera2ld/markmap.git"
19
+ "url": "git+https://github.com/markmap/markmap.git"
20
20
  },
21
21
  "scripts": {
22
22
  "dev": "rollup -wc rollup.conf.js",
@@ -25,25 +25,23 @@
25
25
  "build:js": "rollup -c rollup.conf.js"
26
26
  },
27
27
  "bugs": {
28
- "url": "https://github.com/gera2ld/markmap/issues"
28
+ "url": "https://github.com/markmap/markmap/issues"
29
29
  },
30
30
  "main": "dist/index.js",
31
- "unpkg": "dist/index.min.js",
32
- "jsdelivr": "dist/index.min.js",
31
+ "unpkg": "dist/index.js",
32
+ "jsdelivr": "dist/index.js",
33
33
  "files": [
34
34
  "dist",
35
35
  "types"
36
36
  ],
37
- "engines": {
38
- "node": ">=10"
39
- },
40
37
  "peerDependencies": {
41
38
  "markmap-common": "*"
42
39
  },
43
40
  "devDependencies": {
44
- "markmap-common": "^0.14.2",
45
- "markmap-lib": "^0.14.4",
46
- "markmap-view": "^0.14.4"
41
+ "markmap-common": "0.14.5-alpha.15+1fe26c8",
42
+ "markmap-lib": "0.14.5-alpha.15+1fe26c8",
43
+ "markmap-toolbar": "0.14.5-alpha.15+1fe26c8",
44
+ "markmap-view": "0.14.5-alpha.15+1fe26c8"
47
45
  },
48
- "gitHead": "8eb2fa223ab85d1a7699d2c9660fdb5fac24acd1"
46
+ "gitHead": "1fe26c8234296e2188e466c7b9dbf3b7e171857d"
49
47
  }
package/dist/index.min.js DELETED
@@ -1,3 +0,0 @@
1
- /*! markmap-autoloader v0.14.4 | MIT License */
2
- this.markmap=this.markmap||{},function(t){"use strict";
3
- /*! markmap-common v0.14.2 | 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}))}));async function r(t,a){if(!t.loaded&&("script"===t.type&&(t.loaded=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(void 0)})).then((()=>{t.loaded=!0}))),"iife"===t.type)){const{fn:n,getParams:e}=t.data;n(...(null==e?void 0:e(a))||[]),t.loaded=!0}await t.loaded}var o,s,d,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)}((null==(o=window.markmap)||null==(s=o.autoLoader)?void 0:s.baseJs)||[{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.14.4,npm/markmap-view@0.14.4"}}]).then((()=>{var t;const{markmap:n}=window,e=document.createElement("style");e.textContent=n.globalCSS,document.body.prepend(e),null==(t=n.autoLoader)||null==t.onReady||t.onReady()}));function m(t){const{Transformer:n,Markmap:e,autoLoader:a,deriveOptions:r}=window.markmap,o=t.textContent.split("\n");let s=1/0;o.forEach((t=>{const n=t.match(/^\s*/)[0].length;n<t.length&&(s=Math.min(s,n))}));const d=o.map((t=>t.slice(s))).join("\n").trim(),c=new n(null==a?void 0:a.transformPlugins);t.innerHTML="<svg></svg>";const l=t.firstChild,m=e.create(l,{embedGlobalCSS:!1}),u=()=>{const{root:t,frontmatter:n}=function(t,n){const e=t.transform(n),a=Object.keys(e.features).filter((t=>!i[t]));a.forEach((t=>{i[t]=!0}));const{styles:r,scripts:o}=t.getAssets(a),{markmap:s}=window;return r&&s.loadCSS(r),o&&s.loadJS(o),e}(c,d),e=null==n?void 0:n.markmap,a=r(e);m.setData(t,a),m.fit()};c.hooks.retransform.tap(u),u()}async function u(t){await l,t.querySelectorAll(".markmap").forEach(m)}function p(){return u(document)}null!=(d=window.markmap)&&null!=(c=d.autoLoader)&&c.manual||("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{p()})):p()),t.ready=l,t.render=m,t.renderAll=p,t.renderAllUnder=u}(this.markmap.autoLoader=this.markmap.autoLoader||{});