chore: extension points refactoring

client-app/app-runner.ts

@@ -7,7 +7,14 @@ import { useHotjar } from "@/core/composables/useHotjar";
 import { useLanguages } from "@/core/composables/useLanguages";
 import { FALLBACK_LOCALE, IS_DEVELOPMENT } from "@/core/constants";
 import { setGlobals } from "@/core/globals";
-import { applicationInsightsPlugin, authPlugin, configPlugin, contextPlugin, permissionsPlugin } from "@/core/plugins";
+import {
+  applicationInsightsPlugin,
+  authPlugin,
+  configPlugin,
+  contextPlugin,
+  extensionPointsPlugin,
+  permissionsPlugin,
+} from "@/core/plugins";
 import { extractHostname, getBaseUrl, Logger } from "@/core/utilities";
 import { createI18n } from "@/i18n";
 import { init as initModuleBackInStock } from "@/modules/back-in-stock";
@@ -147,6 +154,7 @@ export default async () => {
   app.use(i18n);
   app.use(router);
   app.use(permissionsPlugin);
+  app.use(extensionPointsPlugin);
   app.use(contextPlugin, themeContext.value);
   app.use(configPlugin, themeContext.value);
 

client-app/core/plugins/extension-points.plugin.ts

@@ -0,0 +1,20 @@
+import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
+import type { App, Plugin } from "vue";
+import ExtensionPointList from "@/shared/common/components/extension-point-list.vue";
+import ExtensionPoint from "@/shared/common/components/extension-point.vue";
+
+export const extensionPointsPlugin: Plugin = {
+  install: (app: App) => {
+    const { canRender } = useExtensionRegistry();
+
+    /**
+     * Checking if component should be rendered
+     * @example:
+     *  <ExtensionPoint v-if="$canRenderExtensionPoint('productCard', 'card-button', product)" />
+     */
+    app.config.globalProperties.$canRenderExtensionPoint = canRender;
+
+    app.component("ExtensionPoint", ExtensionPoint);
+    app.component("ExtensionPointList", ExtensionPointList);
+  },
+};

client-app/core/plugins/index.ts

@@ -2,4 +2,5 @@ export * from "./applicationInsights.plugin";
 export * from "./auth.plugin";
 export * from "./config.plugin";
 export * from "./context.plugin";
+export * from "./extension-points.plugin";
 export * from "./permissions.plugin";

client-app/modules/README.md

@@ -19,12 +19,7 @@ A **Module** is an additional functionality developed with minimal impact on the
 
 ### Extension points
 **Extension points** are belong to the **Core**. Also called **Holes** or **Sockets**
-### Existing Extension points:
-- `client-app/shared/common/composables/useCustomProductComponents.ts`
-- `client-app/shared/layout/composables/useCustomAccountLinkComponents.ts`
-- `client-app/shared/layout/composables/useCustomHeaderLinkComponents.ts`
-- `client-app/shared/layout/composables/useCustomMobileHeaderComponents.ts`
-- `client-app/shared/layout/composables/useCustomMobileMenuLinkComponents.ts`
+You can read more about them in the [Extension points](../shared/common/composables/extensionRegistry/README.md) documentation.
 
 ### Module Management System
 The **Module Management System** is the decision-making point and business logic handler. It is represented as a [settings_data.json](../config/settings_data.json) as a bundle level and an array of `modules` in the `getStore` request as a store level settings. Could be considered as a "Feature Flags".

client-app/modules/back-in-stock/index.ts

@@ -2,8 +2,8 @@ import { defineAsyncComponent } from "vue";
 import { useNavigations } from "@/core/composables";
 import { useModuleSettings } from "@/core/composables/useModuleSettings";
 import { useUser } from "@/shared/account/composables";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import { loadModuleLocale } from "../utils";
 import { MODULE_ID, ENABLED_KEY } from "./constants";
 import type { MenuType } from "@/core/types";
@@ -17,7 +17,7 @@ const BackInStockButton = defineAsyncComponent(() => import("./components/back-i
 
 const { isEnabled } = useModuleSettings(MODULE_ID);
 const { mergeMenuSchema } = useNavigations();
-const { registerComponent } = useCustomProductComponents();
+const { register } = useExtensionRegistry();
 
 const route: RouteRecordRaw = {
   path: "back-in-stock",
@@ -64,16 +64,14 @@ export function init(router: Router, i18n: I18n) {
   }
   if (isAuthenticated.value && isEnabled(ENABLED_KEY)) {
     mergeMenuSchema(menuItems);
-    registerComponent({
-      id: CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON,
+    register("productCard", EXTENSION_NAMES.productCard.cardButton, {
       component: BackInStockButton,
-      shouldRender: (product) => !product.availabilityData.isInStock,
+      condition: (product) => !product.availabilityData.isInStock,
       props: { isTextShown: true },
     });
-    registerComponent({
-      id: CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON,
+    register("productPage", EXTENSION_NAMES.productPage.sidebarButton, {
       component: BackInStockButton,
-      shouldRender: (product) => !product.availabilityData.isInStock,
+      condition: (product) => !product.availabilityData.isInStock,
     });
   }
 }

client-app/modules/push-messages/index.ts

@@ -6,15 +6,11 @@ import { useThemeContext } from "@/core/composables/useThemeContext";
 import { MODULE_ID_PUSH_MESSAGES } from "@/core/constants/modules";
 import { loadModuleLocale } from "@/modules/utils";
 import { useUser } from "@/shared/account/composables/useUser";
-import { useCustomHeaderLinkComponents } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
-import { useCustomMobileHeaderComponents } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
-import { useCustomMobileMenuLinkComponents } from "@/shared/layout/composables/useCustomMobileMenuLinkComponents";
+import { useExtensionRegistry } from "@/shared/common/composables/extensionRegistry/useExtensionRegistry";
 import { pushMessagesTypePolices } from "./api/graphql/typePolices";
 import { PUSH_MESSAGES_MODULE_ENABLED_KEY, PUSH_MESSAGES_MODULE_FCM_ENABLED_KEY } from "./constants";
 import type { MenuType } from "@/core/types";
 import type { I18n } from "@/i18n";
-import type { ElementType } from "@/shared/layout/composables/useCustomHeaderLinkComponents";
-import type { ElementType as HeaderElementType } from "@/shared/layout/composables/useCustomMobileHeaderComponents";
 import type { DeepPartial } from "utility-types";
 import type { Router, RouteRecordRaw } from "vue-router";
 
@@ -66,21 +62,6 @@ const menuItems: DeepPartial<MenuType> = {
 const Notifications = () => import("@/modules/push-messages/pages/notifications.vue");
 const PushMessage = () => import("@/modules/push-messages/pages/push-message.vue");
 
-const menuLinkCustomElement: ElementType = {
-  id: "push-messages",
-  component: defineAsyncComponent(() => import("./components/link-push-messages.vue")),
-};
-
-const menuLinkCustomElementMobile: ElementType = {
-  id: "push-messages",
-  component: defineAsyncComponent(() => import("./components/link-push-messages-mobile.vue")),
-};
-
-const headerWidgetCustomElementMobile: HeaderElementType = {
-  id: "push-messages",
-  component: defineAsyncComponent(() => import("./components/push-messages-mobile.vue")),
-};
-
 async function unregisterFCM() {
   const serviceWorkerRegistration = await navigator.serviceWorker.getRegistration(REGISTRATION_SCOPE);
   if (serviceWorkerRegistration) {
@@ -102,9 +83,7 @@ export async function init(router: Router, i18n: I18n) {
 
   if (isModuleEnabled) {
     const { mergeMenuSchema } = useNavigations();
-    const { registerCustomLinkComponent } = useCustomHeaderLinkComponents();
-    const { registerCustomLinkComponent: registerCustomMobileLinkComponent } = useCustomMobileMenuLinkComponents();
-    const { registerCustomComponent: registerCustomMobileHeaderComponent } = useCustomMobileHeaderComponents();
+    const { register } = useExtensionRegistry();
     const route: RouteRecordRaw = {
       path: "notifications",
       name: "Notifications",
@@ -121,9 +100,15 @@ export async function init(router: Router, i18n: I18n) {
     cache.policies.addTypePolicies(pushMessagesTypePolices);
     mergeMenuSchema(menuItems);
     void loadModuleLocale(i18n, "push-messages");
-    registerCustomLinkComponent(menuLinkCustomElement);
-    registerCustomMobileLinkComponent(menuLinkCustomElementMobile);
-    registerCustomMobileHeaderComponent(headerWidgetCustomElementMobile);
+    register("headerMenu", "push-messages", {
+      component: defineAsyncComponent(() => import("./components/link-push-messages.vue")),
+    });
+    register("mobileMenu", "push-messages", {
+      component: defineAsyncComponent(() => import("./components/link-push-messages-mobile.vue")),
+    });
+    register("mobileHeader", "push-messages", {
+      component: defineAsyncComponent(() => import("./components/push-messages-mobile.vue")),
+    });
     router.addRoute("Account", route); // NOTE: This route must be added before any asynchronous calls. Delaying it can cause a 404 error if accessed prematurely.
   }
 

client-app/shared/account/components/account-navigation.vue

@@ -1,21 +1,27 @@
 <template>
   <div class="space-y-6">
     <VcWidget :title="$t(`shared.account.navigation.main_title`)" size="sm">
-      <component
-        :is="(link.id && customLinkComponents[link.id]) || LinkDefault"
+      <ExtensionPoint
         v-for="link in filteredDesktopAccountMenuItems"
         :key="link.id"
         :item="link"
-      />
+        category="accountMenu"
+        :name="link.id"
+      >
+        <LinkDefault :item="link" />
+      </ExtensionPoint>
     </VcWidget>
 
     <VcWidget v-if="isCorporateMember" :title="$t(`shared.account.navigation.corporate_title`)" size="sm">
-      <component
-        :is="(link.id && customLinkComponents[link.id]) || LinkDefault"
+      <ExtensionPoint
         v-for="link in desktopCorporateMenuItems?.children"
         :key="link.id"
         :item="link"
-      />
+        category="accountMenu"
+        :name="link.id"
+      >
+        <LinkDefault :item="link" />
+      </ExtensionPoint>
     </VcWidget>
   </div>
 </template>
@@ -24,19 +30,12 @@
 import { computed } from "vue";
 import { useNavigations } from "@/core/composables";
 import { useUser } from "@/shared/account/composables/useUser";
-import { useCustomAccountLinkComponents } from "@/shared/layout/composables";
 import LinkDefault from "./account-navigation-link-components/link-default.vue";
-import LinkLists from "./account-navigation-link-components/link-lists.vue";
-import LinkOrders from "./account-navigation-link-components/link-orders.vue";
 import type { ExtendedMenuLinkType } from "@/core/types";
 
 const { isCorporateMember } = useUser();
 
 const { desktopAccountMenuItems, desktopCorporateMenuItems } = useNavigations();
-const { customLinkComponents, registerCustomLinkComponent } = useCustomAccountLinkComponents();
-
-registerCustomLinkComponent({ id: "orders", component: LinkOrders });
-registerCustomLinkComponent({ id: "lists", component: LinkLists });
 
 function canShowItem(item: ExtendedMenuLinkType) {
   return !(item.id === "addresses" && isCorporateMember.value);

client-app/shared/catalog/components/product-card-grid.vue

@@ -164,14 +164,11 @@
       <VcItemPriceCatalog :with-from-label="product.hasVariations || product.isConfigurable" :value="price" />
     </div>
 
-    <component
-      :is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
-      v-if="
-        isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
-        shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, product)
-      "
+    <ExtensionPoint
+      v-if="$canRenderExtensionPoint('productCard', EXTENSION_NAMES.productCard.cardButton, product)"
+      :name="EXTENSION_NAMES.productCard.cardButton"
+      category="productCard"
       :product="product"
-      v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
     />
 
     <VcProductButton
@@ -218,8 +215,7 @@ import { computed, ref } from "vue";
 import { PropertyType } from "@/core/api/graphql/types";
 import { ProductType } from "@/core/enums";
 import { getProductRoute, getPropertiesGroupedByName } from "@/core/utilities";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import { AddToCompareCatalog } from "@/shared/compare";
 import { AddToList } from "@/shared/wishlists";
 import CountInCart from "./count-in-cart.vue";
@@ -230,6 +226,7 @@ import type { Product } from "@/core/api/graphql/types";
 import type { BrowserTargetType } from "@/core/types";
 import type { Swiper as SwiperInstance } from "swiper/types";
 import ProductRating from "@/modules/customer-reviews/components/product-rating.vue";
+
 defineEmits<{ (eventName: "linkClick", globalEvent: MouseEvent): void }>();
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -256,8 +253,6 @@ const properties = computed(() =>
 );
 const price = computed(() => (props.product.hasVariations ? props.product.minVariationPrice : props.product.price));
 
-const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
-
 function slideChanged(swiper: SwiperInstance) {
   const activeIndex: number = swiper.activeIndex;
   const lastIndex: number = props.product.images?.length ? props.product.images.length - 1 : 0;

client-app/shared/catalog/components/product-card-list.vue

@@ -97,14 +97,11 @@
     </div>
 
     <div class="vc-product-card-list__add-to-cart mt-3 flex w-full flex-col sm:mt-0">
-      <component
-        :is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
-        v-if="
-          isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
-          shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, product)
-        "
+      <ExtensionPoint
+        v-if="$canRenderExtensionPoint('productCard', EXTENSION_NAMES.productCard.cardButton, product)"
+        :name="EXTENSION_NAMES.productCard.cardButton"
+        category="productCard"
         :product="product"
-        v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
       />
 
       <VcProductButton
@@ -150,8 +147,7 @@ import { computed } from "vue";
 import { PropertyType } from "@/core/api/graphql/types";
 import { ProductType } from "@/core/enums";
 import { getProductRoute, getPropertiesGroupedByName } from "@/core/utilities";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import { AddToCompareCatalog } from "@/shared/compare";
 import { AddToList } from "@/shared/wishlists";
 import CountInCart from "./count-in-cart.vue";
@@ -177,8 +173,6 @@ interface IProps {
 
 console.warn("ProductCardList is deprecated. Use VcProductCard or ProductCard instead.");
 
-const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
-
 const link = computed(() => getProductRoute(props.product.id, props.product.slug));
 const isDigital = computed(() => props.product.productType === ProductType.Digital);
 const properties = computed(() =>

client-app/shared/catalog/components/product-card.vue

@@ -51,14 +51,11 @@
       :single-line="viewMode === 'grid'"
     />
 
-    <component
-      :is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
-      v-if="
-        isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON) &&
-        shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON, product)
-      "
+    <ExtensionPoint
+      v-if="$canRenderExtensionPoint('productCard', EXTENSION_NAMES.productCard.cardButton, product)"
+      :name="EXTENSION_NAMES.productCard.cardButton"
+      category="productCard"
       :product="product"
-      v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.CARD_BUTTON)"
     />
 
     <VcProductButton
@@ -105,8 +102,7 @@ import {
   ENABLED_KEY as CUSTOMER_REVIEWS_ENABLED_KEY,
 } from "@/modules/customer-reviews/constants";
 import { AddToCart } from "@/shared/cart";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import { AddToCompareCatalog } from "@/shared/compare";
 import { AddToList } from "@/shared/wishlists";
 import BadgesWrapper from "./badges-wrapper.vue";
@@ -134,8 +130,6 @@ defineEmits<IEmits>();
 
 const props = defineProps<IProps>();
 
-const { isComponentRegistered, getComponent, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
-
 const { isEnabled } = useModuleSettings(CUSTOMER_REVIEWS_MODULE_ID);
 const productReviewsEnabled = isEnabled(CUSTOMER_REVIEWS_ENABLED_KEY);
 

client-app/shared/catalog/components/product-sidebar.vue

@@ -30,15 +30,13 @@
         </div>
 
         <div class="mt-4 print:hidden">
-          <component
-            :is="getComponent(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON)"
-            v-if="
-              isComponentRegistered(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON) &&
-              shouldRenderComponent(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON, product)
-            "
+          <ExtensionPoint
+            v-if="$canRenderExtensionPoint('productPage', EXTENSION_NAMES.productPage.sidebarButton, product)"
+            :name="EXTENSION_NAMES.productPage.sidebarButton"
+            category="productCard"
             :product="product"
-            v-bind="getComponentProps(CUSTOM_PRODUCT_COMPONENT_IDS.PAGE_SIDEBAR_BUTTON)"
           />
+
           <AddToCart v-else :product="product">
             <InStock
               :is-in-stock="product.availabilityData?.isInStock"
@@ -60,8 +58,7 @@ import { useCurrency } from "@/core/composables";
 import { ProductType } from "@/core/enums";
 import { AddToCart, useShortCart } from "@/shared/cart";
 import { useConfigurableProduct } from "@/shared/catalog/composables";
-import { useCustomProductComponents } from "@/shared/common/composables";
-import { CUSTOM_PRODUCT_COMPONENT_IDS } from "@/shared/common/constants";
+import { EXTENSION_NAMES } from "@/shared/common/constants";
 import CountInCart from "./count-in-cart.vue";
 import InStock from "./in-stock.vue";
 import ProductPriceBlock from "./product-price-block.vue";
@@ -79,7 +76,6 @@ const product = toRef(props, "product");
 const { currentCurrency } = useCurrency();
 const { getItemsTotal } = useShortCart();
 const { configuredLineItem, loading: configuredLineItemLoading } = useConfigurableProduct(product.value.id);
-const { getComponent, isComponentRegistered, shouldRenderComponent, getComponentProps } = useCustomProductComponents();
 
 const isDigital = computed<boolean>(() => props.product.productType === ProductType.Digital);