Skip to content

convert DOM creation/manipuation code to concise Solid JSX #1716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: develop
Choose a base branch
from
Draft

convert DOM creation/manipuation code to concise Solid JSX #1716

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
388ceba
convert some DOM creation code to Solid JSX
trusktr Jan 7, 2022
badcf91
shorter style tag definitions
trusktr Jan 7, 2022
5de5e5e
get tests running
trusktr Jan 8, 2022
b17826f
update node.js versions for CI from 12,14 to 16,17
trusktr Jan 10, 2022
fd494bd
update docker test script
trusktr Jan 10, 2022
9658ed4
Turn the corner, cover, and main tpl functions into Solid components …
trusktr Jan 10, 2022
38f2d24
pin playwright to 1.8 to avoid regressions, and fix flaky tests
trusktr Jan 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Turn the corner, cover, and main tpl functions into Solid components … 
…with props, then use them as JSX
  • Loading branch information
@trusktr
trusktr committed Jan 10, 2022
commit 9658ed4d3a4cba036eb50f512b5c88d7c203cffd
15 changes: 10 additions & 5 deletions packages/docsify-server-renderer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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} />
</>
);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By converting to Solid components, like this example, we will eventually be able to allow end users to provide their own component in order to override Docsify's, allowing them to make their own Docsify templates.

This will vastly improve Docsify's theme-ability: not only can they override CSS like currently (f.e. docsify-themeable being the most notable example), but they will also be able to replace the DOM structure that wraps the markdown output.

}
Expand Down
18 changes: 13 additions & 5 deletions src/core/render/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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 {
Expand All @@ -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);
}
Expand Down
47 changes: 24 additions & 23 deletions src/core/render/tpl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
>
Expand All @@ -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 = (
Expand Down Expand Up @@ -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, ' +
Expand All @@ -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;
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions src/core/util/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down