@designcrowd/library.brand-page 5.4.33 → 5.4.35

package/lib/src/lib.js

@@ -5,7 +5,7 @@ export * from './brand-page/models';
 export * from './brand-page/view-models';
 export * from './shared/models';
 // constants
-export { DEFAULT_FONT_FAMILY_KEY, DEFAULT_LOGO_TEXT_COLOR_RGB, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, FONT_FAMILY_CONFIGS, isGoogleType, isUrlType, } from './brand-page/constants';
+export { DEFAULT_FONT_FAMILY_KEY, DEFAULT_LOGO_TEXT_COLOR_RGB, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, FONT_FAMILY_CONFIGS, isGoogleType, isUrlType, HEADER_DISPLAY, NAVIGATION_DISPLAY, } from './brand-page/constants';
 export * from './brand-page-maker/constants';
 export * as BackgroundShapeStarterKit from './brand-page-maker/components/brand-page-maker/starter-kits/background-shapes';
 export * as BackgroundColorsStarterKit from './brand-page-maker/components/brand-page-maker/starter-kits/background-colors';
@@ -19,7 +19,6 @@ export { BrandPageMaker, SeoPageSettings, UrlSettings, GoogleAnalytics, PublishB
 import LogoRender from './brand-page/components/logo/LogoRender.vue';
 export { LogoRender };
 export { default as Page } from './brand-page/components/page/Page.vue';
-export { setServerOnlyComponent } from './brand-page/components/server-only';
 export { default as CookieConsent } from './brand-page/components/cookie-consent/CookieConsent.vue';
 // functions
 export { getBrandPageViewModelFromBrandPageModel, migrateBrandPageModel, } from './brand-page/utils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.4.33",
+  "version": "5.4.35",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -67,7 +67,7 @@
     "@ckpack/vue-color": "1.4.1",
     "@designcrowd/bc-shared-experience-library": "3.0.27",
     "@designcrowd/design-system-configuration": "2.0.2",
-    "@designcrowd/image-maker": "4.0.29",
+    "@designcrowd/image-maker": "4.0.30",
     "@designcrowd/shared-component-library": "2.0.31",
     "axios": "1.6.7",
     "blueimp-load-image": "5.16.0",
@@ -116,6 +116,7 @@
     "vue-router": "4.2.5",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
+    "vue3-lazy-hydration": "1.2.1",
     "vue3-shortkey": "4.0.0",
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",

package/src/brand-page/components/logo/Logo.vue

@@ -11,11 +11,16 @@
           params: routes[0].routeParams,
         }"
       >
-        <server-only
-          v-if="context.isServerRender"
-          name="LogoRender"
-          :props="logoRenderProps"
-        />
+        <LazyHydrationWrapper v-if="context.isServerRender">
+          <LogoRender
+            :is-preview="context.isPreview"
+            :is-brand-site="context.brandPageType === 'brandSite'"
+            :is-server-render="context.isServerRender"
+            :has-margin-bottom="hasMarginBottom"
+            :alt-text="altText"
+            :view-model="viewModel"
+          />
+        </LazyHydrationWrapper>
         <LogoRender
           v-else
           :is-preview="context.isPreview"
@@ -33,11 +38,16 @@
         context.brandPageType === 'default'
       "
     >
-      <server-only
-        v-if="context.isServerRender"
-        name="LogoRender"
-        :props="logoRenderProps"
-      />
+      <LazyHydrationWrapper v-if="context.isServerRender">
+        <LogoRender
+          :is-preview="context.isPreview"
+          :is-brand-site="context.brandPageType === 'brandSite'"
+          :is-server-render="context.isServerRender"
+          :has-margin-bottom="hasMarginBottom"
+          :alt-text="altText"
+          :view-model="viewModel"
+        />
+      </LazyHydrationWrapper>
       <LogoRender
         v-else
         :is-preview="context.isPreview"
@@ -52,7 +62,6 @@
 </template>
 <script setup lang="ts">
 import LogoRender from './LogoRender.vue';
-import { getServerOnlyComponent } from '../server-only';
 import { type PropType, computed } from 'vue';
 import type { LogoViewModel } from '../../view-models';
 import type { BrandPageContext } from '../../models';
@@ -60,8 +69,7 @@ import {
   getRouteNameByPageIndex,
   getRouteParamsByPage,
 } from '../../utils/route.util';
-
-const ServerOnly = getServerOnlyComponent();
+import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 
 const props = defineProps({
   isPreview: {
@@ -92,17 +100,6 @@ const altText = computed(() =>
   props.context.pageTitle ? `${props.context.pageTitle}'s logo` : 'logo',
 );
 
-const logoRenderProps = computed(() => {
-  return {
-    'is-preview': props.context.isPreview,
-    'is-server-render': props.context.isServerRender,
-    'is-brand-site': props.context.brandPageType === 'brandSite',
-    'has-margin-bottom': props.hasMarginBottom,
-    'alt-text': altText.value,
-    'view-model': props.viewModel,
-  };
-});
-
 const routes = computed(
   () =>
     props.context.pages?.map((p, i) => {

package/src/brand-page/components/logo/LogoRender.vue

@@ -107,7 +107,7 @@ watch(props, updateLogoImageSvgUrlAsync, { deep: true });
 onServerPrefetch(updateLogoImageSvgUrlAsync);
 
 onMounted(async () => {
-  if (props.isPreview && !logoImageSvgUrl.value) {
+  if (!logoImageSvgUrl.value) {
     await updateLogoImageSvgUrlAsync();
   }
 });

package/src/clients/fabric-render-client.ts

@@ -102,6 +102,10 @@ export class FabricRenderClient {
     }
   }
 
+  public static overrideInstance(instance: any): void {
+    FabricRenderClient._staticClient = instance;
+  }
+
   public static getInstance(): FabricRenderClient {
     return FabricRenderClient._staticClient;
   }

package/src/lib.ts

@@ -19,6 +19,8 @@ export {
   type GoogleFontFamilyConfig,
   isGoogleType,
   isUrlType,
+  HEADER_DISPLAY,
+  NAVIGATION_DISPLAY,
 } from './brand-page/constants';
 export * from './brand-page-maker/constants';
 export * as BackgroundShapeStarterKit from './brand-page-maker/components/brand-page-maker/starter-kits/background-shapes';
@@ -41,7 +43,6 @@ export {
 import LogoRender from './brand-page/components/logo/LogoRender.vue';
 export { LogoRender };
 export { default as Page } from './brand-page/components/page/Page.vue';
-export { setServerOnlyComponent } from './brand-page/components/server-only';
 
 export { default as CookieConsent } from './brand-page/components/cookie-consent/CookieConsent.vue';
 

package/lib/src/brand-page/components/server-only/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Return a component that is only rendered on the server.
- */
-import { type Component } from 'vue';
-export declare const setServerOnlyComponent: (component: Component) => void;
-export declare const getServerOnlyComponent: () => Component;

package/lib/src/brand-page/components/server-only/index.js

@@ -1,12 +0,0 @@
-/**
- * Return a component that is only rendered on the server.
- */
-import {} from 'vue';
-import ClientSideNuxtIslandStub from './ClientSideNuxtIslandStub.vue';
-let _nuxtIslandComponent = ClientSideNuxtIslandStub;
-export const setServerOnlyComponent = (component) => {
-    _nuxtIslandComponent = component;
-};
-export const getServerOnlyComponent = () => {
-    return _nuxtIslandComponent;
-};

package/src/brand-page/components/server-only/ClientSideNuxtIslandStub.vue

@@ -1,8 +0,0 @@
-<!-- A stub for nuxt island component where brand page maker does not provide until it is migrated to nuxt -->
-<template>
-  <p>Stub</p>
-</template>
-
-<script setup lang="ts">
-defineProps<{ name: string; props: any }>();
-</script>

package/src/brand-page/components/server-only/index.ts

@@ -1,17 +0,0 @@
-/**
- * Return a component that is only rendered on the server.
- */
-
-import { type Component } from 'vue';
-
-import ClientSideNuxtIslandStub from './ClientSideNuxtIslandStub.vue';
-
-let _nuxtIslandComponent: Component = ClientSideNuxtIslandStub;
-
-export const setServerOnlyComponent = (component: Component) => {
-  _nuxtIslandComponent = component;
-};
-
-export const getServerOnlyComponent = () => {
-  return _nuxtIslandComponent;
-};