Add jsdoc type annotations for List

Author: grzegorz-bielski

scala3doc/resources/dotty_res/scripts/components/DocumentableList.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef { import("./Filter").Filter } Filter
+ */
+
 class DocumentableList extends Component {
   constructor(props) {
     super(props);
@@ -14,47 +18,30 @@ class DocumentableList extends Component {
     this.render(this.props);
   }
 
-  toggleElementDatasetVisibility(condition, element) {
-    if (condition) {
-      element.dataset.visibility = true;
-    } else {
-      element.dataset.visibility = false;
-    }
+  toggleElementDatasetVisibility(isVisible, ref) {
+    ref.dataset.visibility = isVisible
   }
 
   toggleDisplayStyles(condition, ref, onVisibleStyle) {
-    if (condition) {
-      ref.style.display = onVisibleStyle;
-    } else {
-      ref.style.display = "none";
-    }
+    ref.style.display = condition ? onVisibleStyle : 'none'
   }
 
   render({ filter }) {
-    this.state.list.sectionsRefs.map((sectionRef) => {
+    this.state.list.sectionsRefs.map(sectionRef => {
       const tabRef = this.state.list.getTabRefFromSectionRef(sectionRef);
 
       const isTabVisible = this.state.list
         .getSectionListRefs(sectionRef)
         .filter((listRef) => {
           const isListVisible = this.state.list
             .getSectionListElementsRefs(listRef)
-            .map((elementRef) => this.state.list.mapListElementRef(elementRef))
-            .filter((elementData) => {
-              const isElementVisible = this.state.list.isElementVisible(
-                elementData,
-                filter
-              );
-
-              this.toggleDisplayStyles(
-                isElementVisible,
-                elementData.ref,
-                "table"
-              );
-              this.toggleElementDatasetVisibility(
-                isElementVisible,
-                elementData.ref
-              );
+            .map(elementRef => this.state.list.toListElement(elementRef))
+            .filter(elementData => {
+              const isElementVisible = this.state.list.isElementVisible(elementData, filter);
+
+              this.toggleDisplayStyles(isElementVisible, elementData.ref, "table");
+              this.toggleElementDatasetVisibility(isElementVisible, elementData.ref);
+
               return isElementVisible;
             }).length;
 
@@ -68,83 +55,104 @@ class DocumentableList extends Component {
   }
 }
 
-class List {
-  filterTab(name) {
-    return name !== "Linear supertypes" && name !== "Known subtypes" && name !== "Type hierarchy"
-  }
+/**
+ * @typedef { { ref: Element; name: string; description: string } } ListElement
+ */
 
+class List { 
+  /**
+   * @param tabsRef { Element[] }
+   * @param sectionRefs { Element[] }
+   */
   constructor(tabsRef, sectionRefs) {
     this._tabsRef = tabsRef;
     this._sectionRefs = sectionRefs;
   }
 
   get tabsRefs() {
-    return this._tabsRef.filter((tabRef) => this.filterTab(this._getTogglable(tabRef)));
+    return this._tabsRef.filter(tabRef => this.filterTab(this._getTogglable(tabRef)));
   }
 
   get sectionsRefs() {
-    return this._sectionRefs.filter( (sectionRef) => this.filterTab(this._getTogglable(sectionRef)));
+    return this._sectionRefs.filter(sectionRef => this.filterTab(this._getTogglable(sectionRef)));
   }
 
+  /**
+  * @param name { string }
+  */
+  filterTab(name) { 
+    return name !== "Linear supertypes" && name !== "Known subtypes" && name !== "Type hierarchy"
+  }
+
+  /**
+   * @param sectionRef { Element }
+   */
   getTabRefFromSectionRef(sectionRef) {
     return this.tabsRefs.find(
       (tabRef) => this._getTogglable(tabRef) === this._getTogglable(sectionRef)
     );
   }
 
+  /**
+   * @param sectionRef { Element }
+   * @returns { Element[] }
+   */
   getSectionListRefs(sectionRef) {
     return findRefs(".documentableList", sectionRef);
   }
 
+  /**
+   * @param listRef { Element }
+   * @returns { Element[] }
+   */
   getSectionListElementsRefs(listRef) {
     return findRefs(".documentableElement", listRef);
   }
 
-  mapListElementRef(elementRef) {
+  /**
+   * @param elementRef { Element }
+   * @returns { ListElement }
+   */
+  toListElement(elementRef) {
     return {
       ref: elementRef,
       name: getElementTextContent(getElementNameRef(elementRef)),
       description: getElementTextContent(getElementDescription(elementRef)),
     };
   }
 
+  /**
+  * @param elementData { ListElement }
+  * @param filter { Filter }
+  */
   isElementVisible(elementData, filter) {
-    if (!this._areFiltersFromElementSelected(elementData, filter)) {
+    if (!areFiltersFromElementSelected(elementData, filter)) {
       return false;
+    } else {
+      return includesInputValue(elementData, filter);
     }
-    return this._includesInputValue(elementData, filter);
-  }
 
-  _includesInputValue = (elementData, filter) => {
-    if (elementData.name.includes(filter.value)) {
-      return true;
+    function includesInputValue() {
+      return elementData.name.includes(filter.value) || elementData.description.includes(filter.value);
     }
-    return elementData.description.includes(filter.value);
-  };
-
-  _areFiltersFromElementSelected(elementRef, filter) {
-    const dataset = this._getCorrectDatasetFromElement(elementRef);
-    return dataset.length
-      ? this._hasCorrespodingFilters(dataset, filter.filters)
-      : true;
-  }
-
-  _hasCorrespodingFilters = (dataset, filters) =>
-    dataset.every(([key, value]) => {
-      const filterGroup = filters[key];
-      return this._splitByComma(value).every(
-        (val) => filterGroup && filterGroup[val].selected
-      );
-    });
 
-  _getCorrectDatasetFromElement = (elementRef) =>
-    Object.entries(elementRef.ref.dataset).filter(([key]) =>
-      this._startsWithF(key)
-    );
+    function areFiltersFromElementSelected() {
+      /** @type {[key: string, value: string][]} */
+      const dataset = Object.entries(elementData.ref.dataset).filter(([key]) => startsWith(key, "f"));
 
-  _splitByComma = (str) => str.split(",");
+      const hasCorrespondingFilters = () =>
+        dataset.every(([key, value]) => {
+          const filterGroup = filter.filters[key];
+          return value.split(",").every(val => filterGroup && filterGroup[val].selected);
+        });
 
-  _startsWithF = (str) => startsWith(str, "f");
+      return dataset.length ? hasCorrespondingFilters() : true;
+    }
+  }
 
-  _getTogglable = (elementRef) => elementRef.dataset.togglable;
+  /**
+  * @param elementData { ListElement }
+  */
+  _getTogglable = elementData => elementData.dataset.togglable;
 }
+

scala3doc/resources/dotty_res/scripts/components/Filter.js

@@ -1,22 +1,13 @@
-const defaultFilterGroup = {
-  FOrdering: { Alphabetical: true },
-};
-
 /**
- * @typedef { Object } FilterItem
- * @prop { string } selected
- * @prop { number } visible
- */
-
- /**
- * @typedef { Record<string, FilterItem> } Filters
+ * @typedef { { selected: boolean; visible: boolean } } FilterItem
+ * @typedef { { fKeywords: Record<string, FilterItem> } } Filters
  */
 
 class Filter {
   /**
    * @param value { string }
    * @param filters { Filters }
-   * @param elementsRefs { Element }
+   * @param elementsRefs { Element[] }
    */
   constructor(value, filters, elementsRefs, init = false) {
     this._init = init;
@@ -87,10 +78,10 @@ class Filter {
 
         return name.includes(value) || description.includes(value);
       })
-      .map((elRef) => this._getDatasetWithF(elRef.dataset))
+      .map((elRef) => this._getDatasetWithKeywordData(elRef.dataset))
       .reduce((filtersObject, datasets) => {
-        datasets.map(([key, value]) => {
-          this._splitByComma(value).map((val) => {
+        datasets.forEach(([key, value]) => {
+          this._splitByComma(value).forEach((val) => {
             filtersObject[key] = {
               ...filtersObject[key],
               [val]: {
@@ -150,24 +141,24 @@ class Filter {
   * @returns { Filters }
   */
   _withNewFilters() {
-    console.log("this._elementsRefs", this._elementsRefs)
+    const newFilter = { selected: true, visible: true }
+
     const newFilters = this._elementsRefs.reduce((filtersObject, elementRef) => {
-      this._getDatasetWithF(elementRef.dataset).map(([key, value]) =>
-        this._splitByComma(value).map((val) => {
-          if (!filtersObject[key]) {
-            filtersObject[key] = { [val]: { selected: true, visible: true } };
-          } else {
-            filtersObject[key] = {
-              ...filtersObject[key],
-              [val]: filtersObject[key][val] ?? { selected: true, visible: true },
-            };
-          }
+      this._getDatasetWithKeywordData(elementRef.dataset).forEach(([key, value]) =>
+        this._splitByComma(value).forEach((val) => {
+          filtersObject[key] = filtersObject[key] 
+            ? { ...filtersObject[key], [val]: filtersObject[key][val] ?? newFilter}
+            : { [val]: newFilter }
         })
       );
       return filtersObject;
     }, {});
-    console.log("newFilters", newFilters)
-    return newFilters
+
+    const shouldAddDefaultFilter = this._elementsRefs.some(ref => !!ref.dataset['fKeywords'])
+
+    return shouldAddDefaultFilter 
+      ? { ...newFilters, fKeywords: { ...newFilters.fKeywords, default: newFilter } } 
+      : newFilters
   }
 
   /**
@@ -198,7 +189,8 @@ class Filter {
   /**
   * @private
   * @param dataset { DOMStringMap }
+  * @returns { [key: string, value: string][] }
   */
-  _getDatasetWithF = (dataset) =>
+  _getDatasetWithKeywordData = (dataset) =>
     Object.entries(dataset).filter(([key]) => startsWith(key, "f"));
 }