tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate tenant bootstrap to use SSR state caching and update button components to use CSS tenant variables

Browse Source
This commit is contained in:
Nahuel Eghar Coronel
2026-06-28 23:09:26 +00:00
parent 7ee103b77b
commit 2cbe681995
27 changed files with 1042 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/core/layout/store-layout/store-footer/store-footer.component.html
View File

@@ -7,15 +7,11 @@
data-testid="store-footer-brand-slot"
aria-label="Logo del comercio"
>
@if (logoUrl && logoLoaded) {
@if (logoUrl) {
<img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
} @else {
<div class="store-layout__brand-logo-shell" aria-hidden="true">
<span class="store-layout__brand-logo-skeleton"></span>
@if (logoUrl && !logoLoaded) {
<img class="store-layout__brand-logo store-layout__brand-logo--preload" [src]="logoUrl" alt="" (load)="onLogoLoad()" />
}
</div>
}
</div>
@@ -31,7 +27,7 @@
</div>
</div>
<p class="mb-0 small text-white-50">Copyright &copy; {{ currentYear }} - Sonder</p>
<p class="mb-0 small store-layout__muted-text">Copyright &copy; {{ currentYear }} - Sonder</p>
</div>
@for (section of footerSections; track section.heading) {
@@ -39,7 +35,7 @@
<h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
<div class="d-grid gap-2">
@for (link of section.links; track link) {
<span class="text-light-emphasis">{{ link }}</span>
<span class="store-layout__muted-text">{{ link }}</span>
}
</div>
</div>

13
src/app/core/layout/store-layout/store-footer/store-footer.component.scss
View File

@@ -1,5 +1,5 @@
.store-layout__footer {
background-color: #323232;
background-color: var(--tenant-header-footer-bg);
}
.store-layout__brand-slot {
@@ -20,13 +20,6 @@
object-fit: contain;
}
.store-layout__brand-logo--preload {
opacity: 0;
position: absolute;
inset: 0;
pointer-events: none;
}
.store-layout__brand-logo-skeleton {
display: block;
width: 100%;
@@ -69,6 +62,10 @@
color: #f8f8f8;
}
.store-layout__muted-text {
color: rgba(255, 255, 255, 0.72);
}
@keyframes store-footer-logo-skeleton {
from {
background-position: 200% 0;

19
src/app/core/layout/store-layout/store-footer/store-footer.component.ts
View File

@@ -17,25 +17,8 @@ export type StoreSocialLink = {
styleUrl: './store-footer.component.scss'
})
export class StoreFooterComponent {
private logoUrlValue: string | null = null;
@Input({ required: true }) currentYear = new Date().getFullYear();
@Input({ required: true }) footerSections: StoreFooterSection[] = [];
@Input({ required: true }) socialLinks: StoreSocialLink[] = [];
@Input()
set logoUrl(value: string | null) {
this.logoUrlValue = value;
this.logoLoaded = false;
}
get logoUrl(): string | null {
return this.logoUrlValue;
}
protected logoLoaded = false;
protected onLogoLoad(): void {
this.logoLoaded = true;
}
@Input() logoUrl: string | null = null;
}

22
src/app/core/layout/store-layout/store-header/store-header.component.html
View File

@@ -1,20 +1,16 @@
<header class="store-layout__header bg-white border-bottom">
<div class="border-bottom">
<header class="store-layout__header">
<div class="store-layout__header-main">
<div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
<div
class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
data-testid="store-header-brand-slot"
aria-label="Logo del comercio"
>
@if (logoUrl && logoLoaded) {
@if (logoUrl) {
<img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
} @else {
<div class="store-layout__brand-logo-shell" aria-hidden="true">
<span class="store-layout__brand-logo-skeleton"></span>
@if (logoUrl && !logoLoaded) {
<img class="store-layout__brand-logo store-layout__brand-logo--preload" [src]="logoUrl" alt="" (load)="onLogoLoad()" />
}
</div>
}
</div>
@@ -25,10 +21,14 @@
<input
id="store-search-input"
type="search"
class="form-control border-dark border-end-0 rounded-start"
class="form-control store-layout__search-input border-end-0 rounded-start"
placeholder="Buscar productos"
/>
<button type="button" class="btn btn-outline-dark border-start-0 rounded-end px-3" aria-label="Buscar">
<button
type="button"
class="btn store-layout__search-button border-start-0 rounded-end px-3"
aria-label="Buscar"
>
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
</button>
</div>
@@ -37,7 +37,7 @@
@for (action of headerActions; track action.label) {
<button
type="button"
class="btn btn-link text-dark p-2 text-decoration-none"
class="btn btn-link store-layout__action-button p-2 text-decoration-none"
[attr.aria-label]="action.label"
[attr.title]="action.label"
>
@@ -53,7 +53,7 @@
<div class="container-xl px-3 px-md-4">
<button
type="button"
class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-dark text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
aria-label="Categorias"
>
<span>Categorias</span>

62
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -1,3 +1,13 @@
.store-layout__header {
color: #ffffff;
background-color: var(--tenant-header-footer-bg);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.store-layout__header-main {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.store-layout__brand-slot {
min-width: 10rem;
}
@@ -15,19 +25,17 @@
object-fit: contain;
}
.store-layout__brand-logo--preload {
opacity: 0;
position: absolute;
inset: 0;
pointer-events: none;
}
.store-layout__brand-logo-skeleton {
display: block;
width: 100%;
height: 100%;
border-radius: 0.75rem;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.08) 100%);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.12) 100%
);
background-size: 200% 100%;
animation: store-header-logo-skeleton 1.2s ease-in-out infinite;
}
@@ -37,9 +45,47 @@
min-width: 18rem;
}
.store-layout__search-input {
border-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.96);
}
.store-layout__search-input:focus {
border-color: var(--tenant-primary);
box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
}
.store-layout__search-button {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
background-color: color-mix(in srgb, white 10%, var(--tenant-header-footer-bg));
}
.store-layout__search-button:hover,
.store-layout__search-button:focus-visible {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.28);
background-color: color-mix(in srgb, white 16%, var(--tenant-header-footer-bg));
}
.store-layout__action-button {
color: #ffffff;
}
.store-layout__action-button:hover,
.store-layout__action-button:focus-visible {
color: color-mix(in srgb, white 84%, var(--tenant-primary));
}
.store-layout__category-trigger {
font-size: 0.8rem;
letter-spacing: 0.02em;
color: #ffffff;
}
.store-layout__category-trigger:hover,
.store-layout__category-trigger:focus-visible {
color: color-mix(in srgb, white 84%, var(--tenant-primary));
}
@keyframes store-header-logo-skeleton {

19
src/app/core/layout/store-layout/store-header/store-header.component.ts
View File

@@ -12,23 +12,6 @@ export type StoreHeaderAction = {
styleUrl: './store-header.component.scss'
})
export class StoreHeaderComponent {
private logoUrlValue: string | null = null;
@Input({ required: true }) headerActions: StoreHeaderAction[] = [];
@Input()
set logoUrl(value: string | null) {
this.logoUrlValue = value;
this.logoLoaded = false;
}
get logoUrl(): string | null {
return this.logoUrlValue;
}
protected logoLoaded = false;
protected onLogoLoad(): void {
this.logoLoaded = true;
}
@Input() logoUrl: string | null = null;
}

8
src/app/core/layout/store-layout/store-layout.component.scss
View File

@@ -1,6 +1,12 @@
:host {
display: flex;
min-height: 100dvh;
background-color: #f6f6f6;
background:
radial-gradient(
circle at top,
color-mix(in srgb, white 88%, var(--tenant-primary)) 0%,
transparent 58%
),
#f6f6f6;
color: #202020;
}

39
src/app/core/layout/store-layout/store-layout.component.spec.ts
View File

@@ -1,13 +1,42 @@
import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { Tenant } from '../../services/tenant.interface';
import { TenantService } from '../../services/tenant.service';
import { StoreLayoutComponent } from './store-layout.component';
const tenant: Tenant = {
id: 1,
codigo: 'test',
nombre: 'Test Tenant',
dominio: 'localhost',
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};
describe('StoreLayoutComponent', () => {
beforeEach(async () => {
const tenantState = signal(tenant);
await TestBed.configureTestingModule({
imports: [StoreLayoutComponent],
providers: [provideRouter([])]
providers: [
provideRouter([]),
{
provide: TenantService,
useValue: {
tenant: tenantState.asReadonly(),
status: signal<'ready'>('ready').asReadonly(),
getTenant: () => tenantState(),
bootstrap: vi.fn().mockResolvedValue(undefined)
}
}
]
}).compileComponents();
});
@@ -23,7 +52,7 @@ describe('StoreLayoutComponent', () => {
expect(compiled.querySelector('app-store-footer .store-layout__footer')).not.toBeNull();
});
it('renders the placeholder branding and action icons', () => {
it('renders the tenant branding and action icons', () => {
const fixture = TestBed.createComponent(StoreLayoutComponent);
fixture.detectChanges();
@@ -31,6 +60,12 @@ describe('StoreLayoutComponent', () => {
expect(compiled.querySelector('[data-testid="store-header-brand-slot"]')).not.toBeNull();
expect(compiled.querySelector('[data-testid="store-footer-brand-slot"]')).not.toBeNull();
expect(
compiled.querySelector(`app-store-header img.store-layout__brand-logo[src="${tenant.header_logo}"]`)
).not.toBeNull();
expect(
compiled.querySelector(`app-store-footer img.store-layout__brand-logo[src="${tenant.footer_logo}"]`)
).not.toBeNull();
expect(compiled.querySelector('.fa-cart-shopping')).not.toBeNull();
expect(compiled.querySelector('.fa-circle-user')).not.toBeNull();
expect(compiled.querySelector('.fa-instagram')).not.toBeNull();

13
src/app/core/services/tenant-bootstrap.spec.ts
View File

@@ -5,18 +5,7 @@ import { TenantService } from './tenant.service';
describe('tenantBootstrap', () => {
it('waits for TenantService.bootstrap to resolve', async () => {
const bootstrapSpy = vi.fn().mockResolvedValue({
id: 1,
codigo: 'test',
nombre: 'Test Tennant',
dominio: 'localhost',
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
});
const bootstrapSpy = vi.fn().mockResolvedValue(undefined);
TestBed.configureTestingModule({
providers: [

2
src/app/core/services/tenant-bootstrap.ts
View File

@@ -5,5 +5,5 @@ import { TenantService } from './tenant.service';
export function tenantBootstrap(): Promise<void> {
const tenantService = inject(TenantService);
return tenantService.bootstrap().then(() => undefined);
return tenantService.bootstrap();
}

23
src/app/core/services/tenant-ssr-cache.store.ts Normal file
View File

@@ -0,0 +1,23 @@
import { makeStateKey } from '@angular/core';
import { Tenant } from './tenant.interface';
export type TenantBootstrapStatus = 'idle' | 'ready' | 'not-found';
export type TenantSsrState =
| {
status: 'ready';
tenant: Tenant;
}
| {
status: 'not-found';
};
export const DEFAULT_TENANT_BRANDING = {
primaryColor: '#102bda',
secondaryColor: '#9e9e9e',
dangerColor: '#fd4c4c',
headerFooterBgColor: '#313131'
} as const;
export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');

191
src/app/core/services/tenant.service.spec.ts
View File

@@ -1,15 +1,37 @@
import { PLATFORM_ID } from '@angular/core';
import { PLATFORM_ID, REQUEST, RESPONSE_INIT, TransferState } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { environment } from '../../../environments/environment';
import { TenantBootstrapResponse } from './tenant.interface';
import { Tenant, TenantBootstrapResponse } from './tenant.interface';
import { TENANT_SSR_STATE_KEY } from './tenant-ssr-cache.store';
import { TenantService } from './tenant.service';
const tenant: Tenant = {
id: 1,
codigo: 'test',
nombre: 'Test Tenant',
dominio: 'localhost',
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};
const tenantResponse: TenantBootstrapResponse = {
data: tenant
};
describe('TenantService', () => {
beforeEach(() => {
window.history.replaceState({}, '', 'http://localhost:4200/store');
try {
window.history.replaceState({}, '', 'http://localhost:4200/');
} catch (e) {
// Ignore SecurityError under test environments
}
});
it('requests the tenant bootstrap endpoint using the current hostname and stores the response', async () => {
@@ -21,30 +43,124 @@ describe('TenantService', () => {
const httpController = TestBed.inject(HttpTestingController);
const bootstrapPromise = service.bootstrap();
const request = httpController.expectOne(`${environment.url}tennatns/bootstrap/localhost`);
const request = httpController.expectOne(`${environment.url}tenants/bootstrap/localhost`);
expect(request.request.method).toBe('GET');
const response: TenantBootstrapResponse = {
data: {
id: 1,
codigo: 'test',
nombre: 'Test Tennant',
dominio: 'localhost',
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
}
};
request.flush(tenantResponse);
request.flush(response);
await expect(bootstrapPromise).resolves.toBeUndefined();
expect(service.status()).toBe('ready');
expect(service.tenant()).toEqual(tenant);
expect(service.getTenant()).toEqual(tenant);
await expect(bootstrapPromise).resolves.toEqual(response.data);
expect(service.tenant()).toEqual(response.data);
expect(service.getTenant()).toEqual(response.data);
httpController.verify();
});
it('hydrates the tenant from TransferState without performing HTTP on the browser', async () => {
TestBed.configureTestingModule({
providers: [provideHttpClient(), provideHttpClientTesting(), TenantService]
});
const service = TestBed.inject(TenantService);
const transferState = TestBed.inject(TransferState);
const httpController = TestBed.inject(HttpTestingController);
transferState.set(TENANT_SSR_STATE_KEY, {
status: 'ready',
tenant
});
await expect(service.bootstrap()).resolves.toBeUndefined();
expect(service.status()).toBe('ready');
expect(service.tenant()).toEqual(tenant);
expect(transferState.get(TENANT_SSR_STATE_KEY, null)).toBeNull();
httpController.expectNone(() => true);
httpController.verify();
});
it('uses the forwarded host during SSR and stores the resolved tenant in TransferState', async () => {
const responseInit: ResponseInit = {};
TestBed.configureTestingModule({
providers: [
provideHttpClient(),
provideHttpClientTesting(),
TenantService,
{ provide: PLATFORM_ID, useValue: 'server' },
{
provide: REQUEST,
useValue: new Request('https://internal.example/render', {
headers: {
'x-forwarded-host': 'STORE.EXAMPLE.COM:443, proxy.internal',
host: 'ignored.example.com'
}
})
},
{ provide: RESPONSE_INIT, useValue: responseInit }
]
});
const service = TestBed.inject(TenantService);
const transferState = TestBed.inject(TransferState);
const httpController = TestBed.inject(HttpTestingController);
const bootstrapPromise = service.bootstrap();
const request = httpController.expectOne(`${environment.url}tenants/bootstrap/store.example.com`);
request.flush(tenantResponse);
await expect(bootstrapPromise).resolves.toBeUndefined();
expect(service.status()).toBe('ready');
expect(service.tenant()).toEqual(tenant);
expect(transferState.get(TENANT_SSR_STATE_KEY, null)).toEqual({
status: 'ready',
tenant
});
expect(responseInit.status).toBeUndefined();
httpController.verify();
});
it('stores a not-found state and sets the SSR response status to 404 when the tenant does not exist', async () => {
const responseInit: ResponseInit = {};
TestBed.configureTestingModule({
providers: [
provideHttpClient(),
provideHttpClientTesting(),
TenantService,
{ provide: PLATFORM_ID, useValue: 'server' },
{
provide: REQUEST,
useValue: new Request('https://internal.example/render', {
headers: {
host: 'missing.example.com:8443'
}
})
},
{ provide: RESPONSE_INIT, useValue: responseInit }
]
});
const service = TestBed.inject(TenantService);
const transferState = TestBed.inject(TransferState);
const httpController = TestBed.inject(HttpTestingController);
const bootstrapPromise = service.bootstrap();
const request = httpController.expectOne(`${environment.url}tenants/bootstrap/missing.example.com`);
request.flush({ message: 'Not Found' }, { status: 404, statusText: 'Not Found' });
await expect(bootstrapPromise).resolves.toBeUndefined();
expect(service.status()).toBe('not-found');
expect(service.tenant()).toBeNull();
expect(service.getTenant()).toBeNull();
expect(transferState.get(TENANT_SSR_STATE_KEY, null)).toEqual({
status: 'not-found'
});
expect(responseInit.status).toBe(404);
httpController.verify();
});
@@ -58,33 +174,50 @@ describe('TenantService', () => {
const httpController = TestBed.inject(HttpTestingController);
const bootstrapPromise = service.bootstrap();
const request = httpController.expectOne(`${environment.url}tennatns/bootstrap/localhost`);
const request = httpController.expectOne(`${environment.url}tenants/bootstrap/localhost`);
request.flush({});
await expect(bootstrapPromise).rejects.toThrow('Tenant bootstrap returned no data');
expect(service.status()).toBe('idle');
expect(service.tenant()).toBeNull();
httpController.verify();
});
it('skips the HTTP bootstrap on the server platform', async () => {
it('propagates non-404 backend failures', async () => {
const responseInit: ResponseInit = {};
TestBed.configureTestingModule({
providers: [
provideHttpClient(),
provideHttpClientTesting(),
TenantService,
{ provide: PLATFORM_ID, useValue: 'server' }
{ provide: PLATFORM_ID, useValue: 'server' },
{
provide: REQUEST,
useValue: new Request('https://internal.example/render', {
headers: {
host: 'broken.example.com'
}
})
},
{ provide: RESPONSE_INIT, useValue: responseInit }
]
});
const service = TestBed.inject(TenantService);
const httpController = TestBed.inject(HttpTestingController);
await expect(service.bootstrap()).resolves.toBeNull();
expect(service.tenant()).toBeNull();
expect(service.getTenant()).toBeNull();
const bootstrapPromise = service.bootstrap();
const request = httpController.expectOne(`${environment.url}tenants/bootstrap/broken.example.com`);
request.flush({ message: 'Boom' }, { status: 500, statusText: 'Server Error' });
await expect(bootstrapPromise).rejects.toThrow('Http failure response');
expect(service.status()).toBe('idle');
expect(responseInit.status).toBeUndefined();
httpController.expectNone(() => true);
httpController.verify();
});
});

151
src/app/core/services/tenant.service.ts
View File

@@ -1,10 +1,24 @@
import { HttpClient } from '@angular/common/http';
import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {
inject,
Injectable,
PLATFORM_ID,
REQUEST,
RESPONSE_INIT,
signal,
TransferState
} from '@angular/core';
import { IS_DISCOVERING_ROUTES } from '@angular/ssr';
import { firstValueFrom } from 'rxjs';
import { environment } from '../../../environments/environment';
import { Tenant, TenantBootstrapResponse } from './tenant.interface';
import {
TENANT_SSR_STATE_KEY,
TenantBootstrapStatus,
TenantSsrState
} from './tenant-ssr-cache.store';
@Injectable({
providedIn: 'root'
@@ -12,40 +26,141 @@ import { Tenant, TenantBootstrapResponse } from './tenant.interface';
export class TenantService {
private readonly http = inject(HttpClient);
private readonly platformId = inject(PLATFORM_ID);
private readonly request = inject(REQUEST, { optional: true });
private readonly responseInit = inject(RESPONSE_INIT, { optional: true });
private readonly transferState = inject(TransferState);
private readonly isDiscoveringRoutes = inject(IS_DISCOVERING_ROUTES, { optional: true }) ?? false;
private readonly tenantState = signal<Tenant | null>(null);
private readonly statusState = signal<TenantBootstrapStatus>('idle');
readonly tenant = this.tenantState.asReadonly();
readonly status = this.statusState.asReadonly();
getTenant(): Tenant | null {
return this.tenantState();
}
async bootstrap(): Promise<Tenant | null> {
if (!isPlatformBrowser(this.platformId)) {
return null;
async bootstrap(): Promise<void> {
if (this.statusState() !== 'idle') {
return;
}
if (this.isDiscoveringRoutes) {
this.statusState.set('ready');
return;
}
const transferredState = this.transferState.get(TENANT_SSR_STATE_KEY, null);
if (transferredState) {
this.transferState.remove(TENANT_SSR_STATE_KEY);
this.applyState(transferredState);
return;
}
const domain = this.resolveDomain();
const response = await firstValueFrom(
this.http.get<TenantBootstrapResponse>(`${environment.url}tenants/bootstrap/${domain}`)
);
if (!response?.data) {
throw new Error(`Tenant bootstrap returned no data for domain "${domain}".`);
try {
const response = await firstValueFrom(
this.http.get<TenantBootstrapResponse>(`${environment.url}tenants/bootstrap/${domain}`)
);
if (!response?.data) {
throw new Error(`Tenant bootstrap returned no data for domain "${domain}".`);
}
this.setReady(response.data);
this.persistSsrState({
status: 'ready',
tenant: response.data
});
} catch (error) {
if (this.isNotFoundError(error)) {
this.setNotFound();
this.persistSsrState({ status: 'not-found' });
if (this.responseInit) {
this.responseInit.status = 404;
}
return;
}
throw error;
}
this.tenantState.set(response.data);
return response.data;
}
private resolveDomain(): string {
const domain = window.location.hostname;
if (isPlatformBrowser(this.platformId)) {
const domain = window.location.hostname;
if (!domain) {
if (!domain) {
throw new Error('Tenant bootstrap could not resolve the current domain.');
}
return this.normalizeHost(domain);
}
const requestHost =
this.request?.headers.get('x-forwarded-host') ??
this.request?.headers.get('host') ??
(this.request ? new URL(this.request.url).host : null);
if (!requestHost) {
throw new Error('Tenant bootstrap could not resolve the current domain.');
}
return domain;
return this.normalizeHost(requestHost);
}
private normalizeHost(host: string): string {
const [firstHost = ''] = host.split(',');
const normalizedHost = firstHost.trim().toLowerCase();
if (!normalizedHost) {
throw new Error('Tenant bootstrap could not resolve the current domain.');
}
if (normalizedHost.startsWith('[')) {
const closingBracketIndex = normalizedHost.indexOf(']');
if (closingBracketIndex >= 0) {
return normalizedHost.slice(1, closingBracketIndex);
}
}
return normalizedHost.replace(/:\d+$/, '');
}
private applyState(state: TenantSsrState): void {
if (state.status === 'ready') {
this.setReady(state.tenant);
return;
}
this.setNotFound();
}
private setReady(tenant: Tenant): void {
this.tenantState.set(tenant);
this.statusState.set('ready');
}
private setNotFound(): void {
this.tenantState.set(null);
this.statusState.set('not-found');
}
private persistSsrState(state: TenantSsrState): void {
if (isPlatformServer(this.platformId)) {
this.transferState.set(TENANT_SSR_STATE_KEY, state);
}
}
private isNotFoundError(error: unknown): error is HttpErrorResponse {
return error instanceof HttpErrorResponse && error.status === 404;
}
}