Update Node.js & NPM

.nvmrc

@@ -1 +1 @@
-18.16.1
+22.17.0

build-script-helper.py

@@ -76,7 +76,7 @@ def ensure_npm_is_installed(verbose=False):
     try:
         node_version = check_output(['node', '--version'], verbose=verbose)
         if not node_version.startswith('v18.16.'):
-            warn_msg = "Unexpected version of 'node' installed. Swift-DocC-Render requires node 18.16.1. "\
+            warn_msg = "Unexpected version of 'node' installed. Swift-DocC-Render requires node 22.17.0. "\
                 "See the README.md file for more information about building Swift-DocC-Render."
             printerr('-- Warning: %s' % warn_msg)
     except:

package.json

@@ -39,7 +39,7 @@
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-airbnb": "^6.0.0",
-    "@vue/test-utils": "1.0.0-beta.27",
+    "@vue/test-utils": "1.3.6",
     "@vue/vue2-jest": "^27.0.0-alpha.2",
     "babel-jest": "^27.0.6",
     "eslint": "^7.32.0",
@@ -50,7 +50,7 @@
     "jest": "^27.0.5",
     "sass": "^1.55.0",
     "sass-loader": "^12.0.0",
-    "tree-sitter": "^0.20.6",
+    "tree-sitter": "^0.21.1",
     "tree-sitter-javascript": "^0.20.4",
     "tree-sitter-jsdoc": "^0.19.0",
     "tree-sitter-vue": "^0.2.1",
@@ -63,7 +63,12 @@
     "vue-router": "^3.5.2"
   },
   "engines": {
-    "node": ">=18.16.1 <21",
-    "npm": ">=9.5.1"
+    "node": ">=22.17.0 <23",
+    "npm": ">=10.9.2"
+  },
+  "overrides": {
+    "tree-sitter-vue": {
+      "nan": "^2.22.2"
+    }
   }
 }

src/utils/custom-highlight-lang/swift.js

@@ -13,34 +13,6 @@ import swift from 'highlight.js/lib/languages/swift';
 export default function swiftOverride(hljs) {
   const language = swift(hljs);
 
-  // Temporarily patch the Swift language syntax to recognize `distributed` as
-  // a keyword until the next version of highlight.js (v11.6) is released, which
-  // will have built-in support for this [1]
-  //
-  // [1]: https://github.com/highlightjs/highlight.js/pull/3523
-  language.keywords.keyword = [
-    ...language.keywords.keyword,
-    'distributed',
-  ];
-
-  const isClassMode = ({ beginKeywords = '' }) => beginKeywords
-    .split(' ')
-    .includes('class');
-  const classModeIndex = language.contains.findIndex(isClassMode);
-  if (classModeIndex >= 0) {
-    const {
-      beginKeywords, // purposefully strip this out
-      ...classMode
-    } = language.contains[classModeIndex];
-    // Update the existing "class" mode by replacing the `beginKeywords` with
-    // a `begin` regular expression, which is careful not to mistakenly
-    // recognize class function declarations as class declarations
-    language.contains[classModeIndex] = {
-      ...classMode,
-      begin: /\b(struct|protocol|extension|enum|actor|class\b(?!.*\bfunc))\b/,
-    };
-  }
-
   // Checks if a given language sub-mode matches the "ESCAPED_NEWLINE" from the
   // built-in Swift parser from hljs
   const isEscapedNewlineMode = (mode) => {

tests/unit/App.spec.js

@@ -101,10 +101,10 @@ describe('App', () => {
     const wrapper = createWrapper();
     expect(wrapper.classes('hascustomheader')).toBe(false);
 
-    const header = wrapper.find('custom-header-stub');
+    const header = wrapper.findComponent('custom-header-stub');
     expect(header.exists()).toBe(false);
 
-    const footer = wrapper.find('custom-footer-stub');
+    const footer = wrapper.findComponent('custom-footer-stub');
     expect(footer.exists()).toBe(false);
   });
 
@@ -115,7 +115,7 @@ describe('App', () => {
 
   it('renders Skip Navigation', () => {
     const wrapper = createWrapper();
-    const skipNavigation = wrapper.find('#skip-nav');
+    const skipNavigation = wrapper.findComponent('#skip-nav');
     expect(skipNavigation.text()).toBe('accessibility.skip-navigation');
     expect(skipNavigation.attributes('href')).toBe('#app-main');
   });
@@ -126,7 +126,7 @@ describe('App', () => {
         header: '<div class="header">Header</div>',
       },
     });
-    const header = wrapper.find('.header');
+    const header = wrapper.findComponent('.header');
     expect(header.text()).toBe('Header');
   });
 
@@ -135,49 +135,49 @@ describe('App', () => {
     getSetting.mockReturnValue(true);
 
     const wrapper = createWrapper();
-    wrapper.setData({
+    await wrapper.setData({
       appState: {
         ...wrapper.vm.appState,
         availableLocales,
       },
     });
 
-    const SuggestLangComponent = wrapper.find(SuggestLang);
+    const SuggestLangComponent = wrapper.findComponent(SuggestLang);
     expect(SuggestLangComponent.exists()).toBe(true);
   });
 
-  it('renders LocaleSelector if enablei18n is true', () => {
+  it('renders LocaleSelector if enablei18n is true', async () => {
     const { LocaleSelector } = App.components;
     ({ getSetting } = require('docc-render/utils/theme-settings'));
     getSetting.mockReturnValue(true);
 
     const wrapper = createWrapper();
-    expect(wrapper.find(LocaleSelector).exists()).toBe(false);
-    wrapper.setData({
+    expect(wrapper.findComponent(LocaleSelector).exists()).toBe(false);
+    await wrapper.setData({
       appState: {
         ...wrapper.vm.appState,
         availableLocales,
       },
     });
 
-    expect(wrapper.find(LocaleSelector).exists()).toBe(true);
+    expect(wrapper.findComponent(LocaleSelector).exists()).toBe(true);
   });
 
-  it('does not render LocaleSelector if there is less than two available locales', () => {
+  it('does not render LocaleSelector if there is less than two available locales', async () => {
     const { LocaleSelector } = App.components;
     ({ getSetting } = require('docc-render/utils/theme-settings'));
     getSetting.mockReturnValue(true);
 
     const wrapper = createWrapper();
-    expect(wrapper.find(LocaleSelector).exists()).toBe(false);
-    wrapper.setData({
+    expect(wrapper.findComponent(LocaleSelector).exists()).toBe(false);
+    await wrapper.setData({
       appState: {
         ...wrapper.vm.appState,
         availableLocales: ['en-US'],
       },
     });
 
-    expect(wrapper.find(LocaleSelector).exists()).toBe(false);
+    expect(wrapper.findComponent(LocaleSelector).exists()).toBe(false);
   });
 
   it('renders the `#nav-sticky-anchor` between the header and loading placeholder', () => {
@@ -186,9 +186,9 @@ describe('App', () => {
         header: '<div class="header">Footer</div>',
       },
     });
-    const header = wrapper.find('.header');
-    const stickyAnchor = wrapper.find(`#${baseNavStickyAnchorId}`);
-    const loadingPlaceholder = wrapper.find(InitialLoadingPlaceholder);
+    const header = wrapper.findComponent('.header');
+    const stickyAnchor = wrapper.findComponent(`#${baseNavStickyAnchorId}`);
+    const loadingPlaceholder = wrapper.findComponent(InitialLoadingPlaceholder);
 
     // make sure the anchor is below the header and above the content
     expect(header.element.nextElementSibling).toBe(stickyAnchor.element);
@@ -201,9 +201,9 @@ describe('App', () => {
         default: '<div class="default">Default</div>',
       },
     });
-    const stickyAnchor = wrapper.find(`#${baseNavStickyAnchorId}`);
-    const content = wrapper.find('.default');
-    const placeholder = wrapper.find(InitialLoadingPlaceholder);
+    const stickyAnchor = wrapper.findComponent(`#${baseNavStickyAnchorId}`);
+    const content = wrapper.findComponent('.default');
+    const placeholder = wrapper.findComponent(InitialLoadingPlaceholder);
     // make sure the anchor is below the header and above the content
     expect(placeholder.exists()).toBe(true);
     expect(stickyAnchor.element.nextElementSibling).toBe(placeholder.element);
@@ -216,7 +216,7 @@ describe('App', () => {
         footer: '<div class="footer-slot">Footer</div>',
       },
     });
-    const footer = wrapper.find('.footer-slot');
+    const footer = wrapper.findComponent('.footer-slot');
     expect(footer.text()).toBe('Footer');
   });
 
@@ -226,22 +226,22 @@ describe('App', () => {
         default: '<div class="default">Default</div>',
       },
     });
-    const slotContent = wrapper.find('.default');
+    const slotContent = wrapper.findComponent('.default');
     expect(slotContent.text()).toBe('Default');
-    expect(wrapper.find('router-view-stub').exists()).toBe(false);
+    expect(wrapper.findComponent('router-view-stub').exists()).toBe(false);
   });
 
-  it('renders a default `Footer` for non-IDE targets', () => {
+  it('renders a default `Footer` for non-IDE targets', async () => {
     const wrapper = createWrapper();
-    expect(wrapper.contains(Footer)).toBe(true);
+    expect(wrapper.findComponent(Footer).exists()).toBe(true);
 
-    wrapper.setData({ isTargetIDE: true });
-    expect(wrapper.contains(Footer)).toBe(false);
+    await wrapper.setData({ isTargetIDE: true });
+    expect(wrapper.findComponent(Footer).exists()).toBe(false);
   });
 
   it('renders the app-top element', () => {
     const wrapper = createWrapper();
-    expect(wrapper.find(`#${AppTopID}`).exists()).toBe(true);
+    expect(wrapper.findComponent(`#${AppTopID}`).exists()).toBe(true);
   });
 
   describe('Custom CSS Properties', () => {
@@ -295,7 +295,7 @@ describe('App', () => {
         matches: true,
       });
       const wrapper = createWrapper();
-      wrapper.setData({
+      await wrapper.setData({
         appState: {
           ...wrapper.vm.appState,
           preferredColorScheme: ColorScheme.auto,
@@ -308,7 +308,7 @@ describe('App', () => {
 
     it('dynamically changes the data, upon color scheme change (in auto mode)', async () => {
       const wrapper = createWrapper();
-      wrapper.setData({
+      await wrapper.setData({
         appState: {
           ...wrapper.vm.appState,
           preferredColorScheme: ColorScheme.auto,
@@ -317,13 +317,14 @@ describe('App', () => {
       await flushPromises();
       expect(setPropertySpy).toHaveBeenCalledWith('--text', LightDarkModeCSSSettings.text.light);
       matchMedia.addListener.mock.calls[0][0].call(wrapper.vm, { matches: true });
+      await wrapper.vm.$nextTick();
       expect(setPropertySpy).toHaveBeenCalledTimes(2);
       expect(setPropertySpy).toHaveBeenCalledWith('--text', LightDarkModeCSSSettings.text.dark);
     });
 
     it('updates the values applied to the root, if the colors update', async () => {
       const wrapper = createWrapper();
-      wrapper.setData({
+      await wrapper.setData({
         appState: {
           ...wrapper.vm.appState,
           preferredColorScheme: ColorScheme.auto,
@@ -334,6 +335,7 @@ describe('App', () => {
       expect(setPropertySpy).toHaveBeenCalledTimes(1);
       expect(setPropertySpy).toHaveBeenCalledWith('--text', 'light');
       matchMedia.addListener.mock.calls[0][0].call(wrapper.vm, { matches: true });
+      await wrapper.vm.$nextTick();
       expect(removePropertySpy).toHaveBeenCalledTimes(2);
       expect(removePropertySpy).toHaveBeenLastCalledWith('--text');
       expect(setPropertySpy).toHaveBeenCalledWith('--text', 'dark');
@@ -365,7 +367,7 @@ describe('App', () => {
       });
 
       it('renders a <custom-header>', () => {
-        const header = wrapper.find('custom-header-stub');
+        const header = wrapper.findComponent('custom-header-stub');
         expect(header.exists()).toBe(true);
         expect(header.attributes('data-color-scheme')).toBeDefined();
       });
@@ -376,15 +378,15 @@ describe('App', () => {
             header: '<div class="header">Header</div>',
           },
         });
-        const header = wrapper.find('custom-header-stub');
+        const header = wrapper.findComponent('custom-header-stub');
         expect(header.exists()).toBe(false);
       });
     });
 
     it('renders a <custom-footer> if one has been defined', () => {
       window.customElements.get.mockImplementation(name => name === 'custom-footer');
       const wrapper = createWrapper();
-      const footer = wrapper.find('custom-footer-stub');
+      const footer = wrapper.findComponent('custom-footer-stub');
       expect(footer.exists()).toBe(true);
       expect(footer.attributes('data-color-scheme')).toBeDefined();
     });