@sveltia/ui 0.62.0 → 0.63.0

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -1,16 +1,12 @@
 <script>
-  // Work around the “Prism is not defined” error in consumers
-  // @see https://github.com/remix-run/remix/discussions/8182
-  import 'prismjs';
-
-  import { $isCodeNode as isCodeNode } from '@lexical/code';
+  import { $isCodeNode as isCodeNode } from '@lexical/code-core';
   import { _ } from '@sveltia/i18n';
   import { $getNodeByKey as getNodeByKey, $getRoot as getRoot } from 'lexical';
-  import prismComponents from 'prismjs/components';
   import { getContext } from 'svelte';
   import Option from '../../listbox/option.svelte';
   import Select from '../../select/select.svelte';
   import { focusEditor, loadCodeHighlighter } from '../core.js';
+  import { LANGUAGES } from '../shiki/generated.js';
 
   /**
    * @import { TextEditorStore } from '../../../typedefs';
@@ -29,23 +25,11 @@
   } = $props();
 
   /** @type {{ key: string, label: string, aliases: string[] }[]} */
-  const codeLanguages = Object.entries(prismComponents.languages)
-    .filter(([, config]) => 'title' in config)
-    .map(([key, val]) => {
-      const { title: label, aliasTitles, alias } = /** @type {Record<string, any>} */ (val);
-      let aliases = [];
-
-      if (alias && !aliasTitles) {
-        aliases = Array.isArray(alias) ? alias : [alias];
-      }
-
-      return [
-        { key, label, aliases },
-        ...Object.entries(aliasTitles ?? {}).map(([k, v]) => ({ key: k, label: v, aliases: [] })),
-      ];
-    })
-    .flat(1)
-    .sort((a, b) => a.label.localeCompare(b.label));
+  const codeLanguages = LANGUAGES.map(({ id, name, aliases = [] }) => ({
+    key: id,
+    label: name,
+    aliases,
+  }));
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
@@ -77,20 +61,26 @@
     }
 
     await focusEditor(editorStore.editor);
+    await loadCodeHighlighter(lang);
 
-    if (editorStore.selection?.blockNodeKey) {
-      await loadCodeHighlighter(lang);
+    editorStore.editor.update(() => {
+      // Resolve the target the same way the effect above does. A code editor has exactly one code
+      // block, and its `blockNodeKey` is still unset the first time the switcher is used, before
+      // the editor has ever been focused.
+      // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
+      const { blockNodeKey } = editorStore.selection;
 
-      editorStore.editor.update(() => {
-        // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
-        const node = getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
+      const node = editorStore.config.isCodeEditor
+        ? getRoot().getChildren()[0]
+        : blockNodeKey
+          ? getNodeByKey(blockNodeKey)
+          : null;
 
-        if (isCodeNode(node)) {
-          node.setLanguage(lang);
-          selectedLanguage = lang;
-        }
-      });
-    }
+      if (isCodeNode(node)) {
+        node.setLanguage(lang);
+        selectedLanguage = lang;
+      }
+    });
   }}
 >
   <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />

package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -1,9 +1,5 @@
 <script>
-  // Work around the “Prism is not defined” error in consumers
-  // @see https://github.com/remix-run/remix/discussions/8182
-  import 'prismjs';
-
-  import { $createCodeNode as createCodeNode } from '@lexical/code';
+  import { $createCodeNode as createCodeNode } from '@lexical/code-core';
   import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
   import {
     $createHeadingNode as createHeadingNode,

package/dist/index.d.ts

@@ -81,5 +81,9 @@ export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
 export { default as Placeholder } from "./components/util/placeholder.svelte";
 export { default as VisibilityObserver } from "./components/util/visibility-observer.svelte";
+export { loadCodeHighlighter } from "./components/text-editor/core.js";
+export { setCodeHighlighterCacheEnabled } from "./components/text-editor/shiki/cache.js";
+export { highlightCodeToHTML } from "./components/text-editor/shiki/facade.js";
+export { setCodeHighlighterLoaders } from "./components/text-editor/shiki/loader.js";
 export * from "./typedefs.js";
 export { initLocales, strings } from "./services/i18n.js";

package/dist/index.js

@@ -81,6 +81,10 @@ export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
 export { default as Placeholder } from './components/util/placeholder.svelte';
 export { default as VisibilityObserver } from './components/util/visibility-observer.svelte';
+export { loadCodeHighlighter } from './components/text-editor/core.js';
+export { setCodeHighlighterCacheEnabled } from './components/text-editor/shiki/cache.js';
+export { highlightCodeToHTML } from './components/text-editor/shiki/facade.js';
+export { setCodeHighlighterLoaders } from './components/text-editor/shiki/loader.js';
 export { initLocales, strings } from './services/i18n.js';
 
 // eslint-disable-next-line import/export

package/dist/services/group.svelte.d.ts

@@ -8,7 +8,6 @@ export class Group {
      * @param {HTMLElement} parent Parent element.
      * @param {object} [options] Options.
      * @param {boolean} [options.clickToSelect] Whether to select an item by clicking on it.
-     * @todo Check for added elements probably with `MutationObserver`.
      */
     constructor(parent: HTMLElement, { clickToSelect }?: {
         clickToSelect?: boolean | undefined;
@@ -46,6 +45,7 @@ export class Group {
      * @type {'selected' | 'first'}
      */
     rovingTabStop: "selected" | "first";
+    observer: MutationObserver;
     /**
      * Activate the members.
      */
@@ -152,6 +152,7 @@ export class Group {
     onUpdate({ searchTerms }: {
         searchTerms: string;
     }): void;
+    #private;
 }
 export function activateGroup(paramsOrGetter?: object | (() => object) | undefined): Attachment;
 import type { Attachment } from 'svelte/attachments';

package/dist/services/group.svelte.js

@@ -105,19 +105,45 @@ const config = {
 const FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, summary, [tabindex]';
 
 /**
- * List the document’s tab stops in document order. Positive `tabindex` values, which reorder the
- * sequence, are not accounted for; they’re discouraged and absent from this library.
+ * Move focus to the tab stop next to the given element in document order. Positive `tabindex`
+ * values, which reorder the sequence, are not accounted for; they’re discouraged and absent from
+ * this library.
+ *
+ * The candidates are narrowed by attribute alone before any of them is measured, and the measuring
+ * — `getClientRects()`, which forces the browser to lay the page out — then walks outward from the
+ * element and stops at the first candidate that is actually rendered. Measuring every focusable
+ * element in the document up front is what a menu sitting on a large page cannot afford.
  * @internal
- * @returns {HTMLElement[]} Elements that can be reached with Tab.
+ * @param {HTMLElement} element Element to start from.
+ * @param {boolean} backwards Whether to move to the previous tab stop rather than the next.
  */
-const getTabStops = () =>
-  /** @type {HTMLElement[]} */ ([...document.querySelectorAll(FOCUSABLE_SELECTOR)]).filter(
-    (element) =>
-      element.tabIndex >= 0 &&
-      !element.matches(':disabled, [aria-disabled="true"], [hidden], [inert], [inert] *') &&
-      !!element.getClientRects().length,
+const focusAdjacentTabStop = (element, backwards) => {
+  const candidates = /** @type {HTMLElement[]} */ ([
+    ...document.querySelectorAll(FOCUSABLE_SELECTOR),
+  ]).filter(
+    (candidate) =>
+      candidate === element ||
+      (candidate.tabIndex >= 0 &&
+        !candidate.matches(':disabled, [aria-disabled="true"], [hidden], [inert], [inert] *')),
   );
 
+  const index = candidates.indexOf(element);
+
+  if (index === -1) {
+    return;
+  }
+
+  const step = backwards ? -1 : 1;
+
+  for (let i = index + step; i >= 0 && i < candidates.length; i += step) {
+    if (candidates[i].getClientRects().length) {
+      candidates[i].focus();
+
+      return;
+    }
+  }
+};
+
 /**
  * Find the element that opens the menu the given element belongs to. A menu lives outside its
  * opener in the DOM tree, so the link runs the other way: the opener points at the menu’s container
@@ -151,12 +177,60 @@ const getMenuOpener = (element) => {
  * Implement keyboard and mouse interactions for a grouping composite widget.
  */
 export class Group {
+  /**
+   * Memoized member lists, discarded whenever the widget’s subtree changes. See {@link #members}.
+   * @type {{ all: HTMLElement[], active: HTMLElement[] } | undefined}
+   */
+  #memberCache = undefined;
+
+  /**
+   * Normalized search value of each member, kept alongside the raw value it was derived from so it
+   * can be reused until the member’s label actually changes. Filtering runs over every member on
+   * every keystroke, and `normalize()` is not free — it decomposes the string and strips the
+   * diacritics.
+   * @type {WeakMap<HTMLElement, { raw: string, normalized: string }>}
+   */
+  #searchValueCache = new WeakMap();
+
+  /**
+   * Hidden state each member was last told about, so the filter can skip the members whose state
+   * hasn’t moved. The DOM is deliberately not consulted for this: the listener updates a component,
+   * which renders asynchronously, so two keystrokes within a frame would read a stale attribute.
+   * @type {WeakMap<HTMLElement, boolean>}
+   */
+  #hiddenState = new WeakMap();
+
+  /**
+   * Get the normalized value a member is searched by, computing it only when the underlying raw
+   * value has changed since the last call.
+   * @param {HTMLElement} member Member element.
+   * @returns {string} Normalized search value.
+   */
+  #getNormalizedSearchValue(member) {
+    const raw =
+      member.dataset.searchValue ??
+      member.dataset.label ??
+      member.querySelector('.label')?.textContent ??
+      /** @type {string} */ (member.textContent);
+
+    const cached = this.#searchValueCache.get(member);
+
+    if (cached?.raw === raw) {
+      return cached.normalized;
+    }
+
+    const normalized = normalize(raw);
+
+    this.#searchValueCache.set(member, { raw, normalized });
+
+    return normalized;
+  }
+
   /**
    * Initialize a new `Group` instance.
    * @param {HTMLElement} parent Parent element.
    * @param {object} [options] Options.
    * @param {boolean} [options.clickToSelect] Whether to select an item by clicking on it.
-   * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent, { clickToSelect = true } = {}) {
     parent.dispatchEvent(new CustomEvent('Initializing'));
@@ -218,6 +292,20 @@ export class Group {
 
     this.parent.tabIndex = focusChild ? -1 : 0;
 
+    // The members can be added, removed, disabled or hidden at any time, which is what invalidates
+    // the cached lists. Only the attributes that decide membership are watched, so the group’s own
+    // writes — the selected state and the roving `tabindex` — don’t needlessly discard the cache.
+    this.observer = new globalThis.MutationObserver(() => {
+      this.#memberCache = undefined;
+    });
+
+    this.observer.observe(parent, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-disabled', 'aria-hidden'],
+    });
+
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
     (async () => {
       await sleep(100);
@@ -292,8 +380,9 @@ export class Group {
 
     const tabStop =
       this.rovingTabStop === 'selected'
-        ? (activeMembers.find((element) => element.matches(`[${this.childSelectedAttr}="true"]`)) ??
-          activeMembers[0])
+        ? (activeMembers.find(
+            (element) => element.getAttribute(this.childSelectedAttr) === 'true',
+          ) ?? activeMembers[0])
         : activeMembers[0];
 
     allMembers.forEach((element) => {
@@ -309,12 +398,42 @@ export class Group {
     return this.childRoles.map((role) => `[role="${role}"]`).join(',');
   }
 
+  /**
+   * The member lists, recomputed only once the widget’s subtree has actually changed. A single
+   * arrow key reaches these several times over, and a composite widget can hold thousands of
+   * members, so the `querySelectorAll` and the `matches()` per member that back them are far too
+   * expensive to repeat on every read.
+   *
+   * The observer’s pending records are drained here rather than left to its callback, which runs a
+   * microtask later — too late for a read that happens synchronously after a mutation, as when a
+   * key is dispatched right after the members are swapped out.
+   * @type {{ all: HTMLElement[], active: HTMLElement[] }}
+   */
+  get #members() {
+    if (this.observer.takeRecords().length) {
+      this.#memberCache = undefined;
+    }
+
+    if (!this.#memberCache) {
+      const all = /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
+
+      this.#memberCache = {
+        all,
+        active: all.filter(
+          (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
+        ),
+      };
+    }
+
+    return this.#memberCache;
+  }
+
   /**
    * List of all the members.
    * @type {HTMLElement[]}
    */
   get allMembers() {
-    return /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
+    return this.#members.all;
   }
 
   /**
@@ -322,9 +441,7 @@ export class Group {
    * @type {HTMLElement[]}
    */
   get activeMembers() {
-    return this.allMembers.filter(
-      (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
-    );
+    return this.#members.active;
   }
 
   /**
@@ -392,13 +509,7 @@ export class Group {
     // Somewhere to stand while the menu is torn down, and the fallback if there’s nothing beyond
     opener.focus();
     await sleep(50);
-
-    const tabStops = getTabStops();
-    const index = tabStops.indexOf(opener);
-
-    if (index > -1) {
-      tabStops[index + (backwards ? -1 : 1)]?.focus();
-    }
+    focusAdjacentTabStop(opener, backwards);
   }
 
   /**
@@ -455,8 +566,8 @@ export class Group {
    * @type {HTMLElement | undefined}
    */
   get selected() {
-    return this.activeMembers.find((element) =>
-      element.matches(`[${this.childSelectedAttr}="true"]`),
+    return this.activeMembers.find(
+      (element) => element.getAttribute(this.childSelectedAttr) === 'true',
     );
   }
 
@@ -503,14 +614,28 @@ export class Group {
     const selectByKeydown =
       event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ';
 
+    /**
+     * Members that took part in this selection, and whose roving `tabindex` therefore has to be
+     * updated. The ones skipped below belong to another menu group and are left alone.
+     * @type {HTMLElement[]}
+     */
+    const affected = [];
+    /**
+     * Whether the target itself took part, meaning it’s the one to receive focus.
+     * @type {boolean}
+     */
+    let targetAffected = false;
+
     this.activeMembers.forEach((element) => {
-      const isMenuItemCheckbox = element.matches('[role="menuitemcheckbox"]');
-      const isMenuItemRadio = element.matches('[role="menuitemradio"]');
+      // Reading the role once and comparing it is markedly cheaper than putting every member
+      // through the selector engine three times over
+      const role = element.getAttribute('role');
+      const isMenuItemCheckbox = role === 'menuitemcheckbox';
+      const isMenuItemRadio = role === 'menuitemradio';
 
       if (
         (isMenuItemCheckbox || isMenuItemRadio) &&
-        (element.getAttribute('role') !== targetRole ||
-          element.closest(this.parentGroupSelector) !== targetParent)
+        (role !== targetRole || element.closest(this.parentGroupSelector) !== targetParent)
       ) {
         return;
       }
@@ -518,10 +643,13 @@ export class Group {
       const multiSelect = isMenuItemCheckbox || this.multi;
       const singleSelect = isMenuItemRadio || !multiSelect;
       const isTarget = element === newTarget;
-      const isSelected = element.matches(`[${this.childSelectedAttr}="true"]`);
+      const isSelected = element.getAttribute(this.childSelectedAttr) === 'true';
       const controlTargetId = this.controlsPanel ? element.getAttribute('aria-controls') : null;
       const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
 
+      affected.push(element);
+      targetAffected ||= isTarget;
+
       if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
         element.setAttribute(this.childSelectedAttr, String(!isSelected));
         element.dispatchEvent(
@@ -544,7 +672,7 @@ export class Group {
         );
 
         if (isTarget) {
-          if (event.type === 'keydown' && element.matches('[role="radio"]')) {
+          if (event.type === 'keydown' && role === 'radio') {
             element.click();
           }
 
@@ -552,17 +680,7 @@ export class Group {
         }
       }
 
-      if (this.focusChild) {
-        // Wait a bit before the element is rerendered
-        globalThis.requestAnimationFrame(() => {
-          element.tabIndex = isTarget ? 0 : -1;
-
-          if (isTarget) {
-            element.focus();
-            element.dispatchEvent(new CustomEvent('Focus'));
-          }
-        });
-      } else {
+      if (!this.focusChild) {
         element.classList.toggle('focused', isTarget);
 
         if (isTarget) {
@@ -602,6 +720,21 @@ export class Group {
       }
     });
 
+    if (this.focusChild) {
+      // Wait a bit before the elements are rerendered. A single frame serves the whole group;
+      // scheduling a callback per member would queue thousands of them on a large widget.
+      globalThis.requestAnimationFrame(() => {
+        affected.forEach((element) => {
+          element.tabIndex = element === newTarget ? 0 : -1;
+        });
+
+        if (targetAffected) {
+          newTarget.focus();
+          newTarget.dispatchEvent(new CustomEvent('Focus'));
+        }
+      });
+    }
+
     this.parent.dispatchEvent(
       new CustomEvent('Change', { detail: getSelectedItemDetail(newTarget) }),
     );
@@ -796,6 +929,7 @@ export class Group {
    * Clean up event listeners.
    */
   destroy() {
+    this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);
     this.parent.removeEventListener('keydown', this._onKeyDown);
   }
@@ -811,16 +945,15 @@ export class Group {
 
     const matched = allMembers
       .map((member) => {
-        const searchValue = normalize(
-          member.dataset.searchValue ??
-            member.dataset.label ??
-            member.querySelector('.label')?.textContent ??
-            /** @type {string} */ (member.textContent),
-        );
-
+        const searchValue = this.#getNormalizedSearchValue(member);
         const hidden = !_terms.every((term) => searchValue.includes(term));
 
-        member.dispatchEvent(new CustomEvent('Toggle', { detail: { hidden } }));
+        // Only report an actual change. Every keystroke runs this over every member, and the
+        // listener on the other end drives a component update
+        if (this.#hiddenState.get(member) !== hidden) {
+          this.#hiddenState.set(member, hidden);
+          member.dispatchEvent(new CustomEvent('Toggle', { detail: { hidden } }));
+        }
 
         return hidden;
       })

package/dist/services/tree.svelte.d.ts

@@ -137,12 +137,6 @@ export class Tree {
      * @returns {boolean} Result.
      */
     isExpanded(item: HTMLElement): boolean;
-    /**
-     * Whether any of the ancestors of the given item is collapsed, meaning the item is not displayed.
-     * @param {HTMLElement} item Item.
-     * @returns {boolean} Result.
-     */
-    hasCollapsedAncestor(item: HTMLElement): boolean;
     /**
      * Get the text label of the given item, which is used for the type-ahead search.
      * @param {HTMLElement} item Item.
@@ -159,6 +153,14 @@ export class Tree {
      * @param {HTMLElement} element Element to be scrolled into view.
      */
     scrollIntoView(element: HTMLElement): void;
+    /**
+     * Put exactly one item in the tab order. Only the items actually in it are touched: writing a
+     * `tabindex` to every item costs a pass over the whole widget on each arrow key, and all but one
+     * of those writes set the value the item already had.
+     * @param {HTMLElement} [item] Item to become the tab stop. When omitted, no item is left in the
+     * tab order, which is the case for a tree with nothing to focus.
+     */
+    setTabStop(item?: HTMLElement | undefined): void;
     /**
      * Move focus to the given item.
      * @param {HTMLElement} item Item to be focused.