Turn the corner, cover, and main tpl functions into Solid components …

…with props, then use them as JSX
docsifyjs · Jan 10, 2022 · 9658ed4 · 9658ed4
1 parent fd494bd
commit 9658ed4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 36 deletions.
diff --git a/packages/docsify-server-renderer/index.js b/packages/docsify-server-renderer/index.js
@@ -7,7 +7,8 @@ import DOMPurify from 'dompurify';
 import { AbstractHistory } from '../../src/core/router/history/abstract';
 import { Compiler } from '../../src/core/render/compiler';
 import { isAbsolutePath } from '../../src/core/router/util';
-import * as tpl from '../../src/core/render/tpl';
+// eslint-disable-next-line
+import { GithubCorner, Cover, Main } from '../../src/core/render/tpl';
 import { prerenderEmbed } from '../../src/core/render/embed';
 
 function cwd(...args) {
@@ -47,10 +48,14 @@ function mainTpl(config) {
  class={`app-nav${config.repo ? '' : ' no-badge'}`}
  innerHTML={'<!--navbar-->'}
  ></nav>
-
- {config.repo && tpl.corner(config.repo)}
- {config.coverpage && tpl.cover()}
- {tpl.main(config)}
+ {config.repo && (
+ <GithubCorner
+ githubUrl={config.repo}
+ cornerExternalLinkTarget={config.cornerExternalLinkTarge}
+ />
+ )}
+ {config.coverpage && <Cover />}
+ <Main {...config} />
  </>
  );
 }

diff --git a/src/core/render/index.js b/src/core/render/index.js
@@ -9,7 +9,7 @@ import { isMobile, inBrowser } from '../util/env';
 import { isPrimitive, merge } from '../util/core';
 import { scrollActiveSidebar } from '../event/scroll';
 import { Compiler } from './compiler';
-import * as tpl from './tpl';
+import { GithubCorner, Cover, Main, Theme } from './tpl';
 import { prerenderEmbed } from './embed';
 
 let vueGlobalData;
@@ -422,11 +422,17 @@ export function Render(Base) {
 
  if (el) {
  if (config.repo) {
- html.push(tpl.corner(config.repo, config.cornerExternalLinkTarge));
+ html.push(
+ <GithubCorner
+ githubUrl={config.repo}
+ cornerExternalLinkTarget={config.cornerExternalLinkTarget}
+ />
+ );
  }
 
  if (config.coverpage) {
- html.push(tpl.cover());
+ // eslint-disable-next-line new-cap
+ html.push(<Cover />);
  }
 
  if (config.logo) {
@@ -439,7 +445,9 @@ export function Render(Base) {
  }
  }
 
- html.push(tpl.main(config));
+ // eslint-disable-next-line new-cap
+ html.push(<Main {...config} />);
+
  // Render main app
  this._renderTo(el, html, true);
  } else {
@@ -462,7 +470,7 @@ export function Render(Base) {
  }
 
  if (config.themeColor) {
- dom.$.head.appendChild(tpl.theme(config.themeColor));
+ dom.$.head.appendChild(<Theme color={config.themeColor} />);
  // Polyfll
  cssVars(config.themeColor);
  }

diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js
@@ -1,26 +1,27 @@
+import { createMemo } from 'solid-js';
 /**
  * Render github corner
- * @param  {Object} data URL for the View Source on Github link
- * @param {String} cornerExternalLinkTarge value of the target attribute of the link
- * @return {String} SVG element as string
+ * @param {Object} props
+ * @param  {string} props.githubUrl URL for the View Source on Github link
+ * @param {string=} props.cornerExternalLinkTarget value of the target attribute of the link
  */
-export function corner(data, cornerExternalLinkTarge) {
- if (!data) {
- return '';
- }
+export function GithubCorner(props) {
+ const processedUrl = createMemo(() => {
+ let result = props.githubUrl;
 
- if (!/\/\//.test(data)) {
- data = 'https://github.com/' + data;
- }
+ if (!/\/\//.test(result)) {
+ result = 'https://github.com/' + result;
+ }
+
+ result = result.replace(/^git\+/, '');
 
- data = data.replace(/^git\+/, '');
- // Double check
- cornerExternalLinkTarge = cornerExternalLinkTarge || '_blank';
+ return result;
+ });
 
  return (
  <a
- href={data}
- target={cornerExternalLinkTarge}
+ href={processedUrl()}
+ target={props.cornerExternalLinkTarget || '_blank'}
  class="github-corner"
  aria-label="View source on Github"
  >
@@ -45,9 +46,8 @@ export function corner(data, cornerExternalLinkTarge) {
 /**
  * Renders main content
  * @param {Object} config Configuration object
- * @returns {String} HTML of the main content
  */
-export function main(config) {
+export function Main(config) {
  const name = config.name ? config.name : '';
 
  const aside = (
@@ -90,7 +90,7 @@ export function main(config) {
  * Cover Page
  * @returns {String} Cover page
  */
-export function cover() {
+export function Cover() {
  const SL = ', 100%, 85%';
  const bgc =
  'linear-gradient(to left bottom, ' +
@@ -104,9 +104,9 @@ export function cover() {
  </section>
  );
 
- // Bug with Jest/jsdom: at this point, the styles exist, Docsify works
- // and this log will show the background value. But only during Jest tests, the
- // bakground value is empty. This is why the snapshot
+ // JEST_JSDOM_BUG: At this point, the styles exist, Docsify works and this log
+ // will show the background value. But only during Jest tests, the bakground
+ // value is empty.
  // console.log('cover style?', el.style.background);
 
  return el;
@@ -142,11 +142,12 @@ export function markdownParagraph(className, content) {
  return `<p class="${className}">${content.slice(5).trim()}</p>`;
 }
 
-export function theme(color) {
+/** @param {{color: string}} props */
+export function Theme(props) {
  return (
  <style>{/* css */ `
  :root {
- --theme-color: ${color};
+ --theme-color: ${props.color};
  }
  `}</style>
  );

diff --git a/src/core/util/dom.js b/src/core/util/dom.js
@@ -5,9 +5,9 @@ const cacheNode = {};
 
 /**
  * Get Node
- * @param {String|Element} el A DOM element
- * @param {Boolean} noCache Flag to use or not use the cache
- * @return {Element} The found node element
+ * @param {string|Element} el A DOM element
+ * @param {boolean} noCache Flag to use or not use the cache
+ * @returns {Element|null} The found node element
  */
 export function getNode(el, noCache = false) {
  if (typeof el === 'string') {