@fluid-topics/ft-wc-utils 1.3.12 → 1.3.14

package/build/CacheRegistry.d.ts

@@ -20,6 +20,7 @@ export declare class CacheRegistry extends WithEventBus {
     register(key: string, loader: () => Promise<any>, final?: boolean): void;
     registerFinal(key: string, loader: () => Promise<any>): void;
     clearAll(dispatchEvent?: boolean): string[];
+    clearMatching(matcher: (key: string) => boolean, dispatchEvent?: boolean): string[];
     clear(key: string, dispatchEvent?: boolean): string | undefined;
     private forceClear;
     private clearClearTimeout;

package/build/CacheRegistry.js

@@ -18,16 +18,15 @@ export class CacheRegistry extends WithEventBus {
         this.content[key] = { ...content, loader, final, status };
     }
     registerFinal(key, loader) {
-        this.forceClear(key); // Force the final content to be reloaded when the loader changes
         this.register(key, loader, true);
     }
     clearAll(dispatchEvent = true) {
-        const clearedKeys = [];
-        for (const key in this.content) {
-            if (this.clear(key, false) != undefined) {
-                clearedKeys.push(key);
-            }
-        }
+        return this.clearMatching(() => true, dispatchEvent);
+    }
+    clearMatching(matcher, dispatchEvent = true) {
+        const clearedKeys = Object.keys(this.content)
+            .filter(matcher)
+            .filter((key) => this.clear(key, false) != undefined);
         if (dispatchEvent && clearedKeys.length > 0) {
             this.dispatchEvent(new ClearCacheEvent(clearedKeys));
         }
@@ -92,7 +91,7 @@ export class CacheRegistry extends WithEventBus {
                 content.status = "LOADING";
                 content.promise = cancelable(loader());
                 return content.promise
-                    .then(value => {
+                    .then((value) => {
                     content.status = "RESOLVED";
                     content.value = value;
                     if (ttl != null) {
@@ -101,7 +100,7 @@ export class CacheRegistry extends WithEventBus {
                     }
                     return value;
                 })
-                    .catch(error => {
+                    .catch((error) => {
                     var _a;
                     if (!((_a = content.promise) === null || _a === void 0 ? void 0 : _a.isCanceled)) {
                         content.status = "ERROR";
@@ -123,10 +122,10 @@ export class CacheRegistry extends WithEventBus {
         return ((_a = this.content[key]) === null || _a === void 0 ? void 0 : _a.status) !== undefined && ((_b = this.content[key]) === null || _b === void 0 ? void 0 : _b.status) !== "REGISTERED";
     }
     resolvedKeys() {
-        return Object.keys(this.content).filter(key => { var _a; return ((_a = this.content[key]) === null || _a === void 0 ? void 0 : _a.status) === "RESOLVED"; });
+        return Object.keys(this.content).filter((key) => { var _a; return ((_a = this.content[key]) === null || _a === void 0 ? void 0 : _a.status) === "RESOLVED"; });
     }
     resolvedValues() {
-        return this.resolvedKeys().map(key => this.content[key].value);
+        return this.resolvedKeys().map((key) => this.content[key].value);
     }
     keys() {
         return Object.keys(this.content);

package/build/directives/index.d.ts

@@ -0,0 +1 @@
+export * from "./whenSize";

package/build/directives/index.js

@@ -0,0 +1 @@
+export * from "./whenSize";

package/build/directives/whenSize.d.ts

@@ -0,0 +1,24 @@
+import { AsyncDirective, PartInfo } from "lit/async-directive.js";
+import { Part } from "lit";
+export declare enum Breakpoint {
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl"
+}
+export declare class WhenSizeDirective extends AsyncDirective {
+    private size;
+    private lastArgs?;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    reconnected(): void;
+    private readonly onResize;
+    update(_: Part, [threshold, aboveRenderer, belowRenderer]: Parameters<WhenSizeDirective["render"]>): unknown;
+    render(thresholdOrBreakpoint: number | Breakpoint, aboveRenderer: () => unknown, maybeBelowRenderer?: () => unknown): unknown;
+    private resolveThreshold;
+}
+export interface WhenSizeDirectiveFn {
+    (threshold: number, aboveRenderer: () => unknown, belowRenderer?: () => unknown): unknown;
+    (breakpoint: Breakpoint, aboveRenderer: () => unknown, belowRenderer?: () => unknown): unknown;
+}
+export declare const whenSize: WhenSizeDirectiveFn;

package/build/directives/whenSize.js

@@ -0,0 +1,55 @@
+import { AsyncDirective, directive } from "lit/async-directive.js";
+import { nothing } from "lit";
+export var Breakpoint;
+(function (Breakpoint) {
+    Breakpoint["sm"] = "sm";
+    Breakpoint["md"] = "md";
+    Breakpoint["lg"] = "lg";
+    Breakpoint["xl"] = "xl";
+})(Breakpoint || (Breakpoint = {}));
+const BREAKPOINT_THRESHOLDS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+};
+export class WhenSizeDirective extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.size = 0;
+        this.onResize = () => {
+            const newSize = window.innerWidth;
+            if (this.size !== newSize) {
+                this.size = newSize;
+                // Force the directive to re-render
+                if (this.lastArgs) {
+                    this.setValue(this.render(...this.lastArgs));
+                }
+            }
+        };
+        this.size = window.innerWidth;
+        window.addEventListener("resize", this.onResize);
+    }
+    disconnected() {
+        window.removeEventListener("resize", this.onResize);
+    }
+    reconnected() {
+        window.addEventListener("resize", this.onResize);
+    }
+    update(_, [threshold, aboveRenderer, belowRenderer]) {
+        this.lastArgs = [threshold, aboveRenderer, belowRenderer];
+        return this.render(threshold, aboveRenderer, belowRenderer);
+    }
+    render(thresholdOrBreakpoint, aboveRenderer, maybeBelowRenderer) {
+        const threshold = this.resolveThreshold(thresholdOrBreakpoint);
+        const belowRenderer = maybeBelowRenderer !== null && maybeBelowRenderer !== void 0 ? maybeBelowRenderer : (() => nothing);
+        return this.size > threshold ? aboveRenderer() : belowRenderer();
+    }
+    resolveThreshold(arg) {
+        if (typeof arg === "number") {
+            return arg;
+        }
+        return BREAKPOINT_THRESHOLDS[arg];
+    }
+}
+export const whenSize = directive(WhenSizeDirective);