atomic removals

Author: shakyShane

special-pages/pages/new-tab/app/activity/ActivityProvider.js

@@ -14,7 +14,8 @@ import { BatchedActivityService } from './batched-activity.service.js';
  * @typedef {import('../../types/new-tab.js').ActivityConfig} ActivityConfig
  * @typedef {import('../../types/new-tab').TrackingStatus} TrackingStatus
  * @typedef {import('../../types/new-tab').HistoryEntry} HistoryEntry
- * @typedef {import('../service.hooks.js').State<ActivityData, ActivityConfig>} State
+ * @typedef {import('../../types/new-tab').DomainActivity} DomainActivity
+ * @typedef {import('../service.hooks.js').State<import("./batched-activity.service.js").Incoming, ActivityConfig>} State
  * @typedef {import('../service.hooks.js').Events<ActivityData, ActivityConfig>} Events
  */
 
@@ -87,22 +88,35 @@ export function ActivityProvider(props) {
  * @property {Record<string, HistoryEntry[]>} history
  * @property {Record<string, TrackingStatus>} trackingStatus
  * @property {Record<string, boolean>} favorites
+ * @property {string[]} urls
+ */
+
+/**
+ * @typedef {{ activity: DomainActivity[], urls: string[] }} Incoming
  */
 
 /**
  * @param {NormalizedActivity} prev
- * @param {ActivityData} data
+ * @param {Incoming} incoming
  * @return {NormalizedActivity}
  */
-function normalizeItems(prev, data) {
+function normalizeItems(prev, incoming) {
     /** @type {NormalizedActivity} */
     const output = {
         favorites: {},
         items: {},
         history: {},
         trackingStatus: {},
+        urls: [],
     };
-    for (const item of data.activity) {
+
+    if (shallowDiffers(prev.urls, incoming.urls)) {
+        output.urls = [...incoming.urls];
+    } else {
+        output.urls = prev.urls;
+    }
+
+    for (const item of incoming.activity) {
         const id = item.url;
 
         output.favorites[id] = item.favorite;
@@ -150,15 +164,6 @@ function normalizeKeys(prev, data) {
     return next;
 }
 
-/**
- * @param {string[]} prev
- * @param {import('../../types/new-tab.js').UrlInfo} data
- * @return {string[]}
- */
-function normalizeUrls(prev, data) {
-    return shallowDiffers(prev, data.urls) ? [...data.urls] : prev;
-}
-
 /**
  * Check if two objects have a different shape
  * @param {object} a
@@ -183,7 +188,6 @@ export function SignalStateProvider({ children }) {
     const service = /** @type {BatchedActivityService} */ (useContext(ActivityServiceContext));
     if (state.status !== 'ready') throw new Error('must have ready status here');
     if (!service) throw new Error('must have service here');
-    if (!service.urlService.data) throw new Error('must have initialised the url service by this point');
 
     /**
      * @param {MouseEvent} event
@@ -226,31 +230,26 @@ export function SignalStateProvider({ children }) {
             }
         } else if (toggle) {
             if (state.config?.expansion === 'collapsed') {
-                const next = urls.value.slice(0, Math.min(service.INITIAL, urls.value.length));
+                const next = activity.value.urls.slice(0, Math.min(service.INITIAL, activity.value.urls.length));
                 setVisibleRange(next);
             }
         }
     }
 
     const didClick = useCallback(didClick_, [service, state.config.expansion]);
+    const firstUrls = state.data.activity.map((x) => x.url);
+    const keys = useSignal(normalizeKeys([], firstUrls));
 
-    const keys = useSignal(
-        normalizeKeys(
-            [],
-            state.data.activity.map((x) => x.url),
-        ),
-    );
-
-    const urls = useSignal(normalizeUrls([], service.urlService.data));
     const activity = useSignal(
         normalizeItems(
             {
                 items: {},
                 history: {},
                 trackingStatus: {},
                 favorites: {},
+                urls: [],
             },
-            state.data,
+            { activity: state.data.activity, urls: state.data.urls },
         ),
     );
 
@@ -273,7 +272,7 @@ export function SignalStateProvider({ children }) {
         if (!batched) return;
         const visibleLength = keys.value.length;
         const end = visibleLength + service.CHUNK_SIZE;
-        const nextVisibleRange = urls.value.slice(0, end);
+        const nextVisibleRange = activity.value.urls.slice(0, end);
         setVisibleRange(nextVisibleRange);
         fillHoles();
     }
@@ -283,27 +282,17 @@ export function SignalStateProvider({ children }) {
         const src = /** @type {BatchedActivityService} */ (service);
         const unsub = src.onData((evt) => {
             batch(() => {
-                activity.value = normalizeItems(activity.value, evt.data);
-                if (!batched) {
-                    urls.value = normalizeUrls(urls.value, { urls: evt.data.activity.map((x) => x.url), totalTrackersBlocked: 0 });
-                    setVisibleRange(urls.value);
-                }
+                activity.value = normalizeItems(activity.value, { activity: evt.data.activity, urls: evt.data.urls });
+                const visible = keys.value;
+                const all = activity.value.urls;
+                const nextVisibleRange = all.slice(0, Math.max(service.INITIAL, Math.max(service.INITIAL, visible.length)));
+                setVisibleRange(nextVisibleRange);
+                fillHoles();
             });
         });
-        const unsubPatch = src.onUrlData((evt) => {
-            if (!batched) return;
-            urls.value = normalizeUrls(urls.value, evt.data);
-            const visible = keys.value;
-            const all = urls.value;
-            const nextVisibleRange = all.slice(0, Math.max(service.INITIAL, Math.max(service.INITIAL, visible.length)));
-            console.log({ nextVisibleRange });
-            setVisibleRange(nextVisibleRange);
-            fillHoles();
-        });
 
         return () => {
             unsub();
-            unsubPatch();
         };
     });
 
@@ -317,7 +306,12 @@ export function SignalStateProvider({ children }) {
     useEffect(() => {
         const handler = () => {
             if (document.visibilityState === 'visible') {
-                service.triggerDataFetch();
+                if (batched) {
+                    const visible = keys.value;
+                    service.triggerDataFetch(visible);
+                } else {
+                    service.triggerDataFetch();
+                }
             }
         };
 

special-pages/pages/new-tab/app/activity/batched-activity.service.js

@@ -8,6 +8,10 @@
  */
 import { Service } from '../service.js';
 
+/**
+ * @typedef {{ activity: DomainActivity[], urls: string[] }} Incoming
+ */
+
 export class BatchedActivityService {
     INITIAL = 5;
     CHUNK_SIZE = 10;
@@ -21,39 +25,49 @@ export class BatchedActivityService {
         this.ntp = ntp;
         this.batched = batched;
 
-        /** @type {Service<import('../../types/new-tab.js').UrlInfo>} */
-        this.urlService = new Service({
-            initial: () => {
-                if (this.batched) {
-                    return this.ntp.messaging.request('activity_getUrls');
-                } else {
-                    /** @type {UrlInfo} */
-                    const next = {
-                        urls: [],
-                        totalTrackersBlocked: 0,
-                    };
-                    return Promise.resolve(next);
-                }
-            },
-            subscribe: (cb) => ntp.messaging.subscribe('activity_onDataPatch', cb),
-        });
-
-        /** @type {Service<ActivityData>} */
+        /** @type {Service<Incoming>} */
         this.dataService = new Service({
-            initial: (params) => {
+            initial: async (params) => {
                 if (this.batched) {
-                    return this.ntp.messaging.request('activity_getDataForUrls', { urls: params.urls });
+                    if (params && Array.isArray(params.urls) && this.dataService.data?.urls) {
+                        const data = await this.ntp.messaging.request('activity_getDataForUrls', {
+                            urls: params.urls,
+                        });
+                        return { activity: data.activity, urls: this.dataService.data.urls };
+                    } else {
+                        const urlsResponse = await this.ntp.messaging.request('activity_getUrls');
+                        const data = await this.ntp.messaging.request('activity_getDataForUrls', {
+                            urls: urlsResponse.urls.slice(0, this.INITIAL),
+                        });
+                        return { activity: data.activity, urls: urlsResponse.urls };
+                    }
                 } else {
-                    return this.ntp.messaging.request('activity_getData');
+                    const data = await this.ntp.messaging.request('activity_getData');
+                    return { activity: data.activity, urls: data.activity.map((x) => x.url) };
                 }
             },
-            subscribe: (cb) => ntp.messaging.subscribe('activity_onDataUpdate', cb),
+            subscribe: (cb) => {
+                const sub1 = ntp.messaging.subscribe('activity_onDataUpdate', (params) => {
+                    cb({ activity: params.activity, urls: params.activity.map((x) => x.url) });
+                });
+                const sub2 = ntp.messaging.subscribe('activity_onDataPatch', (params) => {
+                    if ('patch' in params && params.patch !== null) {
+                        cb({ activity: [/** @type {DomainActivity} */ (params.patch)], urls: params.urls });
+                    } else {
+                        cb({ activity: [], urls: params.urls });
+                    }
+                });
+                return () => {
+                    sub1();
+                    sub2();
+                };
+            },
         }).withUpdater((old, next, source) => {
             if (source === 'manual') {
                 return next;
             }
             if (this.batched) {
-                return { activity: old.activity.concat(next.activity) };
+                return { activity: old.activity.concat(next.activity), urls: next.urls };
             }
             return next;
         });
@@ -70,7 +84,6 @@ export class BatchedActivityService {
         this.burnUnsub = this.ntp.messaging.subscribe('activity_onBurnComplete', () => {
             this.burns?.dispatchEvent(new CustomEvent('activity_onBurnComplete'));
         });
-        this.patchesSub = this.onPatchData();
     }
 
     name() {
@@ -82,19 +95,10 @@ export class BatchedActivityService {
      * @internal
      */
     async getInitial() {
-        if (this.batched) {
-            const configPromise = this.configService.fetchInitial();
-            const urlsPromise = this.urlService.fetchInitial();
-            const [config, urlData] = await Promise.all([configPromise, urlsPromise]);
-            const data = await this.dataService.fetchInitial({ urls: urlData.urls.slice(0, this.INITIAL) });
-            return { config, data };
-        } else {
-            const configPromise = this.configService.fetchInitial();
-            const dataPromise = this.dataService.fetchInitial();
-            const urlInfoPromise = this.urlService.fetchInitial();
-            const [config, data] = await Promise.all([configPromise, dataPromise, urlInfoPromise]);
-            return { config, data };
-        }
+        const configPromise = this.configService.fetchInitial();
+        const dataPromise = this.dataService.fetchInitial();
+        const [config, data] = await Promise.all([configPromise, dataPromise]);
+        return { config, data };
     }
 
     /**
@@ -104,43 +108,20 @@ export class BatchedActivityService {
         this.configService.destroy();
         this.dataService.destroy();
         this.burnUnsub();
-        this.patchesSub();
         this.burns = null;
     }
 
     /**
      * @param {string[]} urls
      */
     next(urls) {
-        if (!this.urlService.data) throw new Error('unreachable');
         if (urls.length === 0) return;
         this.isFetchingNext = true;
         this.dataService.triggerFetch({ urls });
     }
 
     /**
-     * @param {(evt: {data: UrlInfo & PatchData, source: InvocationSource}) => void} cb
-     * @internal
-     */
-    onUrlData(cb) {
-        return this.urlService.onData((params) => {
-            if ('patch' in params.data && params.data.patch !== null) return console.log('ignoring patch');
-            cb(params);
-        });
-    }
-
-    /**
-     * @internal
-     */
-    onPatchData() {
-        return this.urlService.onData((params) => {
-            if (!('patch' in params.data && params.data.patch !== null)) return console.log('ignoring none-patch');
-            this.dataService.publish({ activity: [/** @type {DomainActivity} */ (params.data.patch)] });
-        });
-    }
-
-    /**
-     * @param {(evt: {data: ActivityData, source: InvocationSource}) => void} cb
+     * @param {(evt: {data: Incoming, source: InvocationSource}) => void} cb
      * @internal
      */
     onData(cb) {
@@ -150,9 +131,12 @@ export class BatchedActivityService {
         });
     }
 
-    triggerDataFetch() {
-        if (this.batched) {
-            this.urlService.triggerFetch();
+    /**
+     * @param {string[]} [urls] - optional subset to refresh
+     */
+    triggerDataFetch(urls) {
+        if (urls) {
+            this.dataService.triggerFetch({ urls });
         } else {
             this.dataService.triggerFetch();
         }
@@ -220,19 +204,13 @@ export class BatchedActivityService {
      * @param {string} url
      */
     remove(url) {
-        this.urlService.update((old) => {
-            const next = old.urls.filter((x) => x !== url);
-            return {
-                ...old,
-                urls: next,
-            };
-        });
         this.dataService.update((old) => {
             return {
                 ...old,
                 activity: old.activity.filter((item) => {
                     return item.url !== url;
                 }),
+                urls: old.urls.filter((x) => x !== url),
             };
         });
         this.ntp.messaging.notify('activity_removeItem', { url });