@magento/peregrine 12.0.0-alpha.1 → 12.0.0

package/lib/Apollo/clearCartDataFromCache.js

@@ -1,22 +1,19 @@
+import { deleteCacheEntry } from './deleteCacheEntry';
+
 /**
- * Deletes all references to Cart from the apollo cache
+ * Deletes all references to Cart from the apollo cache including entries that
+ * start with "$" which were automatically created by Apollo InMemoryCache.
  *
  * @param {ApolloClient} client
  */
 export const clearCartDataFromCache = async client => {
-    // Cached data
-    client.cache.evict({ id: 'Cart' });
-    client.cache.evict({
-        id: 'ROOT_MUTATION',
-        fieldName: 'placeOrder'
-    });
-    // Cached ROOT_QUERY
-    client.cache.evict({ fieldName: 'cart' });
-    client.cache.evict({ fieldName: 'customerCart' });
-
-    client.cache.gc();
+    await deleteCacheEntry(client, key => key.match(/^\$?Cart/));
 
-    if (client.persistor) {
-        await client.persistor.persist();
-    }
+    // Any cart subtypes that have key fields must be manually cleared.
+    // TODO: we may be able to use cache.evict here instead.
+    await deleteCacheEntry(client, key => key.match(/^\$?AppliedGiftCard/));
+    await deleteCacheEntry(client, key => key.match(/^\$?ShippingCartAddress/));
+    await deleteCacheEntry(client, key =>
+        key.match(/^\$?AvailableShippingMethod/)
+    );
 };

package/lib/Apollo/clearCustomerDataFromCache.js

@@ -1,26 +1,14 @@
+import { deleteCacheEntry } from './deleteCacheEntry';
+
 /**
- * Deletes all references to Customer from the apollo cache.
- * Related queries that have reference to the customer are also deleted
- * through the cascade. Note, however, that all secondary references must
- * be deleted in order for garbage collection to do its job.
+ * Deletes all references to Customer from the apollo cache including entries
+ * that start with "$" which were automatically created by Apollo InMemoryCache.
+ * By coincidence this rule additionally clears CustomerAddress entries, but
+ * we'll need to keep this in mind by adding additional patterns as MyAccount
+ * features are completed.
  *
  * @param {ApolloClient} client
  */
 export const clearCustomerDataFromCache = async client => {
-    // Cached data
-    client.cache.evict({ id: 'Customer' });
-    // Remove createCustomerAddress which references newly created addresses, avoiding gc
-    client.cache.evict({
-        id: 'ROOT_MUTATION',
-        fieldName: 'createCustomerAddress'
-    });
-    // Cached ROOT_QUERY
-    client.cache.evict({ fieldName: 'customer' });
-    client.cache.evict({ fieldName: 'customerWishlistProducts' });
-
-    client.cache.gc();
-
-    if (client.persistor) {
-        await client.persistor.persist();
-    }
+    await deleteCacheEntry(client, key => key.match(/^\$?Customer/i));
 };

package/lib/Apollo/deleteCacheEntry.js

@@ -0,0 +1,87 @@
+import { CACHE_PERSIST_PREFIX } from '@magento/peregrine/lib/Apollo/constants';
+
+/**
+ * Deletes specific entry/entries from the apollo cache and then tries to
+ * persist the deletions.
+ *
+ * @param {ApolloClient} client apollo client instance
+ * @param {Function} predicate a matching function
+ */
+export const deleteCacheEntry = async (client, predicate) => {
+    await deleteActiveCacheEntry(client, predicate);
+    await deleteInactiveCachesEntry(client, predicate);
+};
+
+const deleteActiveCacheEntry = async (client, predicate) => {
+    // If there is no client or cache then just back out since it doesn't matter :D
+    if (
+        !client ||
+        !client.cache ||
+        !client.cache.data ||
+        !client.cache.data.data
+    ) {
+        if (process.env.NODE_ENV === 'development') {
+            console.warn(
+                'Apollo Cache entry deletion attempted without client or cache.'
+            );
+        }
+        return;
+    }
+
+    // Remove from the active cache.
+    Object.keys(client.cache.data.data).forEach(key => {
+        if (predicate(key)) {
+            client.cache.data.delete(key);
+        }
+    });
+
+    // Remove from ROOT_QUERY cache.
+    if (client.cache.data.data.ROOT_QUERY) {
+        Object.keys(client.cache.data.data.ROOT_QUERY).forEach(key => {
+            if (predicate(key)) {
+                client.cache.data.delete('ROOT_QUERY', key);
+            }
+        });
+    }
+
+    // Immediately persist the cache changes to the active cache storage.
+    if (client.persistor) {
+        await client.persistor.persist();
+    }
+};
+
+const deleteInactiveCachesEntry = async (client, predicate) => {
+    if (!client || !client.persistor || !globalThis.localStorage) return;
+
+    const activeApolloCacheLocalStorageKey =
+        client.persistor.persistor.storage.key;
+
+    const isAnInactiveApolloCache = ([key]) => {
+        return (
+            key.startsWith(CACHE_PERSIST_PREFIX) &&
+            key !== activeApolloCacheLocalStorageKey
+        );
+    };
+
+    const { localStorage } = globalThis;
+
+    Object.entries(localStorage)
+        .filter(isAnInactiveApolloCache)
+        .forEach(([inactiveCacheKey, inactiveCacheValue]) => {
+            const inactiveApolloCache = JSON.parse(inactiveCacheValue);
+
+            Object.keys(inactiveApolloCache).forEach(key => {
+                if (predicate(key)) {
+                    delete inactiveApolloCache[key];
+                }
+            });
+
+            // We're done deleting keys that match the predicate,
+            // but we've only mutated the object in memory.
+            // Write the updated inactive cache back out to localStorage.
+            localStorage.setItem(
+                inactiveCacheKey,
+                JSON.stringify(inactiveApolloCache)
+            );
+        });
+};

package/lib/Price/price.js

@@ -15,7 +15,6 @@ import { useIntl } from 'react-intl';
  * [polyfill]: https://www.npmjs.com/package/intl
  * [Intl.NumberFormat.prototype.formatToParts]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts
  */
-
 const Price = props => {
     const { locale } = useIntl();
     const { value, currencyCode, classes } = props;

package/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode.js

@@ -23,7 +23,7 @@ import DEFAULT_OPERATIONS from './couponCode.gql';
  * @return {CouponCodeTalonProps}
  *
  * @example <caption>Importing into your project</caption>
- * import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useCouponCode';
+ * import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';
  */
 export const useCouponCode = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods.js

@@ -120,7 +120,7 @@ export const useShippingMethods = (props = {}) => {
  * Can be used as a boolean value since having no shipping methods would return 0.
  * @property {boolean} isShowingForm True if the form should be shown. False otherwise.
  * @property {SelectShippingFields} selectedShippingFields Values for the select input fields on the shipping form
- * @property {String} selectedShippingMethod A serialized string of <carrier-code>|<method-code>, eg. usps|priority.
+ * @property {String} selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @property {Array<Object>} shippingMethods A list of available shipping methods based on the primary shipping address
  * @property {function} showForm A function that sets the `isShowingForm` value to true.
  */

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios.js

@@ -17,7 +17,7 @@ import { useCartContext } from '../../../../context/cart';
  *
  * @param {Object} props
  * @param {function} props.setIsCartUpdating Function for setting the updating state of the shopping cart
- * @param {String} props.selectedShippingMethod A serialized string of <carrier-code>|<method-code>, eg. usps|priority.
+ * @param {String} props.selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @param {Array<Object>} props.shippingMethods An array of available shipping methods
  * @param {ShippingRadiosMutations} props.mutations GraphQL mutations for a shipping radio selector component.
  *

package/lib/targets/peregrine-declare.js

@@ -20,8 +20,6 @@ module.exports = targets => {
          *
          * @member {tapable.AsyncSeriesHook}
          *
-         * @see [list of wrappable hooks][]
-         *
          * @see [Intercept function signature]{@link hookInterceptFunction}
          *
          * @example <caption>Access the tapable object</caption>
@@ -49,8 +47,6 @@ module.exports = targets => {
          *
          * @member {tapable.AsyncSeriesHook}
          *
-         * @see [list of wrappable talons][]
-         *
          * @see [Intercept function signature]{@link hookInterceptFunction}
          *
          * @example <caption>Access the tapable object</caption>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.0.0-alpha.1",
+  "version": "12.0.0",
   "publishConfig": {
     "access": "public"
   },