fix: fix loadSider false render structure issue

.github/workflows/test.yml

@@ -48,7 +48,7 @@ jobs:
       - name: Unit Tests
         run: npm run test:unit -- --ci --runInBand
       - name: Integration Tests
-        run: npm run test:integration -- --ci --runInBand
+        run: npm run test:integration -- --ci
 
   test-playwright:
     runs-on: ubuntu-latest

src/core/fetch/index.js

@@ -67,17 +67,19 @@ export function Fetch(Base) {
 
     _loadSideAndNav(path, qs, loadSidebar, cb) {
       return () => {
-        if (!loadSidebar) {
-          return cb();
-        }
-
-        const fn = result => {
+        const renderSidebar = result => {
           this._renderSidebar(result);
           cb();
         };
 
-        // Load sidebar
-        this.#loadNested(path, qs, loadSidebar, fn, this, true);
+        if (!loadSidebar) {
+          // Although, we don't load sidebar from sidebar file, we still need call the render to auto generate sidebar from headings toc
+          renderSidebar();
+          return;
+        }
+
+        // Load sidebar from the sidebar file
+        this.#loadNested(path, qs, loadSidebar, renderSidebar, this, true);
       };
     }
 

src/core/render/compiler.js

@@ -252,8 +252,8 @@ export class Compiler {
   }
 
   /**
-   * Compile sidebar
-   * @param {String} text Text content
+   * Compile sidebar, it uses  _sidebar.md ( or specific file) or the content's headings toc to render sidebar.
+   * @param {String} text Text content from the sidebar file, maybe empty
    * @param {Number} level Type of heading (h<level> tag)
    * @returns {String} Sidebar element
    */
@@ -290,17 +290,19 @@ export class Compiler {
     return html;
   }
 
+  /**
+   * When current content redirect to a new path file, clean pre content headings toc
+   */
+  resetToc() {
+    this.toc = [];
+  }
+
   /**
    * Compile sub sidebar
    * @param {Number} level Type of heading (h<level> tag)
    * @returns {String} Sub-sidebar element
    */
   subSidebar(level) {
-    if (!level) {
-      this.toc = [];
-      return;
-    }
-
     const currentPath = this.router.getCurrentPath();
     const { cacheTree, toc } = this;
 

src/core/render/gen-tree.js

@@ -10,7 +10,7 @@ export function genTree(toc, maxLevel) {
   const last = {};
 
   toc.forEach(headline => {
-    const level = headline.level || 1;
+    const level = headline.depth || 1;
     const len = level - 1;
 
     if (level > maxLevel) {

src/core/render/index.js

@@ -84,9 +84,6 @@ export function Render(Base) {
 
       this._renderTo(markdownElm, html);
 
-      // Render sidebar with the TOC
-      !docsifyConfig.loadSidebar && this._renderSidebar();
-
       // Execute markdown <script>
       if (
         docsifyConfig.executeScript ||
@@ -298,6 +295,7 @@ export function Render(Base) {
       }
 
       this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
+
       sidebarToggleEl.setAttribute('aria-expanded', !isMobile());
 
       const activeElmHref = this.router.toURL(this.route.path);
@@ -309,8 +307,7 @@ export function Render(Base) {
         activeEl.parentNode.innerHTML +=
           this.compiler.subSidebar(subMaxLevel) || '';
       } else {
-        // Reset toc
-        this.compiler.subSidebar();
+        this.compiler.resetToc();
       }
 
       // Bind event

src/core/render/tpl.js

@@ -101,10 +101,13 @@ export function tree(
   let innerHTML = '';
   toc.forEach(node => {
     const title = node.title.replace(/(<([^>]+)>)/g, '');
-    innerHTML += /* html */ `<li><a class="section-link" href="${node.slug}" title="${title}">${node.title}</a></li>`;
+    let current = `<li><a class="section-link" href="${node.slug}" title="${title}">${node.title}</a></li>`;
     if (node.children) {
-      innerHTML += tree(node.children, tpl);
+      // when current node has children, we need put them all in parent's <li> block
+      const children = tree(node.children, tpl);
+      current = `<li><a class="section-link" href="${node.slug}" title="${title}">${node.title}</a>${children}</li>`;
     }
+    innerHTML += current;
   });
   return tpl.replace('{inner}', innerHTML);
 }

test/integration/sidebar.test.js

@@ -0,0 +1,116 @@
+import docsifyInit from '../helpers/docsify-init.js';
+import { expect } from '@playwright/test';
+
+describe('Test sidebar render toc structure', function () {
+  test('Render sidebar with loadSidebar=true and the _sidebar.md file', async () => {
+    await docsifyInit({
+      config: {
+        loadSidebar: '_sidebar.md',
+      },
+      markdown: {
+        homepage: '# Hello World',
+        sidebar: `
+        - Getting started
+            - [Level1](QuickStart.md)
+                - [Level2](QuickStart2.md)
+        `,
+      },
+      waitForSelector: '.sidebar-nav > ul',
+    });
+
+    const sidebarElm = document.querySelector('.sidebar');
+    /**
+     * Expected render result
+     * ==========================
+     *<ul>
+     *   <li>
+     *       Getting started
+     *       <ul>
+     *           <li>
+     *               <a href="#/QuickStart" title="Level1">Level1</a>
+     *               <ul>
+     *               <li><a href="#/QuickStart2" title="Level2">Level2</a></li>
+     *               </ul>
+     *           </li>
+     *       </ul>
+     *   </li>
+     * </ul>
+     */
+
+    const GettingStarted = document.querySelector('.sidebar-nav > ul > li');
+    const level1_Elm = document.querySelector(
+      '.sidebar-nav > ul > li > ul> li',
+    );
+    const level1_A_tag = level1_Elm.querySelector('a');
+
+    const level2_Elm = level1_Elm.querySelector(' ul > li ');
+
+    const level2_A_tag = level2_Elm.querySelector('a');
+
+    expect(sidebarElm).not.toBeNull();
+    expect(GettingStarted).not.toBeNull();
+    expect(level1_Elm).not.toBeNull();
+    expect(level1_A_tag).not.toBeNull();
+    expect(level2_Elm).not.toBeNull();
+    expect(level2_A_tag).not.toBeNull();
+    expect(level1_A_tag.textContent).toContain('Level1');
+    expect(level2_A_tag.textContent).toContain('Level2');
+  });
+
+  test('Render sidebar with loadSidebar=false should be same to loadSidebar=true sidebar structure', async () => {
+    await docsifyInit({
+      config: {
+        loadSidebar: false,
+      },
+      markdown: {
+        homepage: `
+        # Getting started 
+           some thing
+        ## Level1 
+            foo
+        ### Level2 
+            bar
+        `,
+      },
+      waitForSelector: '.sidebar-nav > ul',
+    });
+
+    const sidebarElm = document.querySelector('.sidebar');
+    /**
+     * Expected render result
+     * ==========================
+     *<ul>
+     *   <li>
+     *       Getting started
+     *       <ul>
+     *           <li>
+     *               <a href="#/QuickStart" title="Level1">Level1</a>
+     *               <ul>
+     *               <li><a href="#/QuickStart2" title="Level2">Level2</a></li>
+     *               </ul>
+     *           </li>
+     *       </ul>
+     *   </li>
+     * </ul>
+     */
+
+    const GettingStarted = document.querySelector('.sidebar-nav > ul > li');
+    const level1_Elm = document.querySelector(
+      '.sidebar-nav > ul > li > ul> li',
+    );
+    const level1_A_tag = level1_Elm.querySelector('a');
+
+    const level2_Elm = level1_Elm.querySelector(' ul > li ');
+
+    const level2_A_tag = level2_Elm.querySelector('a');
+
+    expect(sidebarElm).not.toBeNull();
+    expect(GettingStarted).not.toBeNull();
+    expect(level1_Elm).not.toBeNull();
+    expect(level1_A_tag).not.toBeNull();
+    expect(level2_Elm).not.toBeNull();
+    expect(level2_A_tag).not.toBeNull();
+    expect(level1_A_tag.textContent).toContain('Level1');
+    expect(level2_A_tag.textContent).toContain('Level2');
+  });
+});