prepare PropertyValueList and FilteredList

dist/index.js

@@ -330,17 +330,6 @@
       }
     };
   };
-  function collectObjectValuesForKey(key, converter, objects) {
-    const values = /* @__PURE__ */ new Set();
-    for (const object of objects) {
-      const stringEntryObject = converter(object);
-      const stringEntryObjectValue = stringEntryObject[key];
-      if (stringEntryObjectValue == void 0 || stringEntryObjectValue == "")
-        continue;
-      values.add(stringEntryObjectValue);
-    }
-    return [...values.values()];
-  }
   var IndexManager = class {
     itemToString;
     sortedStrings = [];
@@ -3527,13 +3516,6 @@
   };
 
   // src/index.tsx
-  console.log(
-    collectObjectValuesForKey("test", (x) => x, [
-      { test: "hello" },
-      { test: "123" },
-      { test: "hello" }
-    ])
-  );
   var storageModel = new StorageModel();
   var settingsModel = new SettingsModel(storageModel);
   var connectionModel = new ConnectionModel(storageModel);

src/View/Components/filteredList.tsx

@@ -0,0 +1,30 @@
+import * as React from "bloatless-react";
+
+import {
+  StringEntryObject,
+  checkDoesObjectMatchReference,
+} from "../../Model/Utility/utility";
+
+export function FilteredList<T>(
+  reference: StringEntryObject,
+  stringEntryObjectConverter: (object: T) => StringEntryObject,
+  objects: React.ListState<T> | React.MapState<T>,
+  viewBuilder: (matchingObjects: React.ListState<T>) => HTMLElement
+) {
+  const matchingObjects: React.ListState<T> = new React.ListState();
+
+  objects.handleAddition((newObject) => {
+    const doesMatch: boolean = checkDoesObjectMatchReference(
+      reference,
+      stringEntryObjectConverter(newObject)
+    );
+    if (doesMatch == false) return;
+
+    matchingObjects.add(newObject);
+    objects.handleRemoval(newObject, () => {
+      matchingObjects.remove(newObject);
+    });
+  });
+
+  return viewBuilder(matchingObjects);
+}

src/View/Components/propertyList.tsx

@@ -0,0 +1,31 @@
+import * as React from "bloatless-react";
+
+import {
+  StringEntryObject,
+  collectObjectValuesForKey,
+} from "../../Model/Utility/utility";
+
+export function PropertyValueList<T>(
+  propertyKey: string,
+  stringEntryObjectConverter: (object: T) => StringEntryObject,
+  objects: React.ListState<T> | React.MapState<T>,
+  viewBuilder: (categories: React.ListState<string>) => HTMLElement
+) {
+  const propertyValues: React.ListState<string> = new React.ListState();
+
+  function collectValues() {
+    propertyValues.clear();
+    const values: string[] = collectObjectValuesForKey(
+      propertyKey,
+      stringEntryObjectConverter,
+      [...objects.value.values()]
+    );
+    propertyValues.add(...values);
+  }
+
+  objects.subscribe(() => {
+    collectValues();
+  });
+
+  return viewBuilder(propertyValues);
+}