Turn the corner, cover, and main tpl functions into Solid components with props, then use them as JSX

Author: trusktr

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} />
     </>
   );
 }

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);
       }

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>
   );

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') {