Skip to content

Commit 5f80683

Browse files
Koooooo-7Koooooo-7
authored
chore: render code style clean and update (#2477)
1 parent beb86a3 commit 5f80683

File tree

8 files changed

+108
-126
lines changed

8 files changed

+108
-126
lines changed

‎src/core/render/compiler.js‎

Lines changed: 12 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,18 @@ import { tree as treeTpl } from './tpl.js';
55
import { genTree } from './gen-tree.js';
66
import { slugify } from './slugify.js';
77
import { emojify } from './emojify.js';
8-
import {
9-
getAndRemoveConfig,
10-
removeAtag,
11-
getAndRemoveDocsifyIgnoreConfig,
12-
} from './utils.js';
8+
import { getAndRemoveConfig } from './utils.js';
139
import { imageCompiler } from './compiler/image.js';
10+
import { headingCompiler } from './compiler/heading.js';
1411
import { highlightCodeCompiler } from './compiler/code.js';
1512
import { paragraphCompiler } from './compiler/paragraph.js';
1613
import { taskListCompiler } from './compiler/taskList.js';
1714
import { taskListItemCompiler } from './compiler/taskListItem.js';
1815
import { linkCompiler } from './compiler/link.js';
16+
import { compileMedia } from './compiler/media.js';
1917

2018
const cachedLinks = {};
2119

22-
const compileMedia = {
23-
markdown(url) {
24-
return {
25-
url,
26-
};
27-
},
28-
mermaid(url) {
29-
return {
30-
url,
31-
};
32-
},
33-
iframe(url, title) {
34-
return {
35-
html: `<iframe src="${url}" ${
36-
title || 'width=100% height=400'
37-
}></iframe>`,
38-
};
39-
},
40-
video(url, title) {
41-
return {
42-
html: `<video src="${url}" ${title || 'controls'}>Not Support</video>`,
43-
};
44-
},
45-
audio(url, title) {
46-
return {
47-
html: `<audio src="${url}" ${title || 'controls'}>Not Support</audio>`,
48-
};
49-
},
50-
code(url, title) {
51-
let lang = url.match(/\.(\w+)$/);
52-
53-
lang = title || (lang && lang[1]);
54-
if (lang === 'md') {
55-
lang = 'markdown';
56-
}
57-
58-
return {
59-
url,
60-
lang,
61-
};
62-
},
63-
};
64-
6520
export class Compiler {
6621
constructor(config, router) {
6722
this.config = config;
@@ -173,7 +128,7 @@ export class Compiler {
173128
type = 'audio';
174129
}
175130

176-
embed = compileMedia[type].call(this, href, title);
131+
embed = compileMedia[type](href, title);
177132
embed.type = type;
178133
}
179134

@@ -198,47 +153,22 @@ export class Compiler {
198153
_initRenderer() {
199154
const renderer = new marked.Renderer();
200155
const { linkTarget, linkRel, router, contentBase } = this;
201-
const _self = this;
156+
// Supports mermaid
202157
const origin = {};
203158

204-
/**
205-
* Render anchor tag
206-
* @link https://github.com/markedjs/marked#overriding-renderer-methods
207-
* @param {String} tokens the content tokens
208-
* @param {Number} depth Type of heading (h<level> tag)
209-
* @returns {String} Heading element
210-
*/
211-
origin.heading = renderer.heading = function ({ tokens, depth }) {
212-
const text = this.parser.parseInline(tokens);
213-
let { str, config } = getAndRemoveConfig(text);
214-
const nextToc = { depth, title: str };
215-
216-
const { content, ignoreAllSubs, ignoreSubHeading } =
217-
getAndRemoveDocsifyIgnoreConfig(str);
218-
str = content.trim();
219-
220-
nextToc.title = removeAtag(str);
221-
nextToc.ignoreAllSubs = ignoreAllSubs;
222-
nextToc.ignoreSubHeading = ignoreSubHeading;
223-
const slug = slugify(config.id || str);
224-
const url = router.toURL(router.getCurrentPath(), { id: slug });
225-
nextToc.slug = url;
226-
_self.toc.push(nextToc);
227-
228-
// Note: tabindex="-1" allows programmatically focusing on heading
229-
// elements after navigation. This is preferred over focusing on the link
230-
// within the heading because it matches the focus behavior of screen
231-
// readers when navigating page content.
232-
return `<h${depth} id="${slug}" tabindex="-1"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${depth}>`;
233-
};
234-
159+
// renderer customizers
160+
origin.heading = headingCompiler({
161+
renderer,
162+
router,
163+
compiler: this,
164+
});
235165
origin.code = highlightCodeCompiler({ renderer });
236166
origin.link = linkCompiler({
237167
renderer,
238168
router,
239169
linkTarget,
240170
linkRel,
241-
compilerClass: _self,
171+
compiler: this,
242172
});
243173
origin.paragraph = paragraphCompiler({ renderer });
244174
origin.image = imageCompiler({ renderer, contentBase, router });

‎src/core/render/compiler/heading.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {
2+
getAndRemoveConfig,
3+
removeAtag,
4+
getAndRemoveDocsifyIgnoreConfig,
5+
} from '../utils.js';
6+
import { slugify } from '../slugify.js';
7+
8+
export const headingCompiler = ({ renderer, router, compiler }) =>
9+
(renderer.heading = function ({ tokens, depth }) {
10+
const text = this.parser.parseInline(tokens);
11+
let { str, config } = getAndRemoveConfig(text);
12+
const nextToc = { depth, title: str };
13+
14+
const { content, ignoreAllSubs, ignoreSubHeading } =
15+
getAndRemoveDocsifyIgnoreConfig(str);
16+
str = content.trim();
17+
18+
nextToc.title = removeAtag(str);
19+
nextToc.ignoreAllSubs = ignoreAllSubs;
20+
nextToc.ignoreSubHeading = ignoreSubHeading;
21+
const slug = slugify(config.id || str);
22+
const url = router.toURL(router.getCurrentPath(), { id: slug });
23+
nextToc.slug = url;
24+
compiler.toc.push(nextToc);
25+
26+
// Note: tabindex="-1" allows programmatically focusing on heading
27+
// elements after navigation. This is preferred over focusing on the link
28+
// within the heading because it matches the focus behavior of screen
29+
// readers when navigating page content.
30+
return `<h${depth} id="${slug}" tabindex="-1"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${depth}>`;
31+
});

‎src/core/render/compiler/headline.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/core/render/compiler/link.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const linkCompiler = ({
66
router,
77
linkTarget,
88
linkRel,
9-
compilerClass,
9+
compiler,
1010
}) =>
1111
(renderer.link = function ({ href, title = '', tokens }) {
1212
const attrs = [];
@@ -15,16 +15,16 @@ export const linkCompiler = ({
1515
linkTarget = config.target || linkTarget;
1616
linkRel =
1717
linkTarget === '_blank'
18-
? compilerClass.config.externalLinkRel || 'noopener'
18+
? compiler.config.externalLinkRel || 'noopener'
1919
: '';
2020
title = str;
2121

2222
if (
2323
!isAbsolutePath(href) &&
24-
!compilerClass._matchNotCompileLink(href) &&
24+
!compiler._matchNotCompileLink(href) &&
2525
!config.ignore
2626
) {
27-
if (href === compilerClass.config.homepage) {
27+
if (href === compiler.config.homepage) {
2828
href = 'README';
2929
}
3030

‎src/core/render/compiler/media.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export const compileMedia = {
2+
markdown(url) {
3+
return {
4+
url,
5+
};
6+
},
7+
mermaid(url) {
8+
return {
9+
url,
10+
};
11+
},
12+
iframe(url, title) {
13+
return {
14+
html: `<iframe src="${url}" ${
15+
title || 'width=100% height=400'
16+
}></iframe>`,
17+
};
18+
},
19+
video(url, title) {
20+
return {
21+
html: `<video src="${url}" ${title || 'controls'}>Not Support</video>`,
22+
};
23+
},
24+
audio(url, title) {
25+
return {
26+
html: `<audio src="${url}" ${title || 'controls'}>Not Support</audio>`,
27+
};
28+
},
29+
code(url, title) {
30+
let lang = url.match(/\.(\w+)$/);
31+
32+
lang = title || (lang && lang[1]);
33+
if (lang === 'md') {
34+
lang = 'markdown';
35+
}
36+
37+
return {
38+
url,
39+
lang,
40+
};
41+
},
42+
};

‎src/core/render/index.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function Render(Base) {
8282
}
8383
}
8484

85-
this._renderTo(markdownElm, html);
85+
dom.setHTML(markdownElm, html);
8686

8787
// Execute markdown <script>
8888
if (
@@ -274,13 +274,6 @@ export function Render(Base) {
274274
}
275275
}
276276

277-
_renderTo(el, content, replace) {
278-
const node = dom.getNode(el);
279-
if (node) {
280-
node[replace ? 'outerHTML' : 'innerHTML'] = content;
281-
}
282-
}
283-
284277
_renderSidebar(text) {
285278
const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config;
286279
const sidebarEl = dom.getNode('aside.sidebar');
@@ -294,7 +287,7 @@ export function Render(Base) {
294287
return null;
295288
}
296289

297-
this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
290+
dom.setHTML('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
298291

299292
sidebarToggleEl.setAttribute('aria-expanded', !isMobile());
300293

@@ -366,7 +359,7 @@ export function Render(Base) {
366359
const html = this.compiler.compile(text);
367360

368361
['.app-nav', '.app-nav-merged'].forEach(selector => {
369-
this._renderTo(selector, html);
362+
dom.setHTML(selector, html);
370363
this.#addTextAsTitleAttribute(`${selector} a`);
371364
});
372365
}
@@ -507,7 +500,7 @@ export function Render(Base) {
507500
rootElm.style.setProperty('--cover-bg', mdCoverBg);
508501
}
509502

510-
this._renderTo('.cover-main', html);
503+
dom.setHTML('.cover-main', html);
511504

512505
// Button styles
513506
dom
@@ -563,7 +556,7 @@ export function Render(Base) {
563556
html += tpl.main(config);
564557

565558
// Render main app
566-
this._renderTo(el, html, true);
559+
dom.setHTML(el, html, true);
567560
} else {
568561
this.rendered = true;
569562
}

‎src/core/router/history/hash.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class HashHistory extends History {
7171

7272
/**
7373
* Parse the url
74-
* @param {string} [path=location.herf] URL to be parsed
74+
* @param {string} [path=location.href] URL to be parsed
7575
* @return {object} { path, query }
7676
*/
7777
parse(path = location.href) {

‎src/core/util/dom.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,19 @@ export function getNode(el, noCache = false) {
2020
return el;
2121
}
2222

23+
/**
24+
*
25+
* @param {*} el the targt element or the selector
26+
* @param {*} content the content to be rendered as HTML
27+
* @param {*} replace To replace the content (true) or insert instead (false) , default is false
28+
*/
29+
export function setHTML(el, content, replace) {
30+
const node = getNode(el);
31+
if (node) {
32+
node[replace ? 'outerHTML' : 'innerHTML'] = content;
33+
}
34+
}
35+
2336
export const $ = document;
2437

2538
export const body = $.body;

0 commit comments

Comments
 (0)