Skip to content

feature: mark old window service as deprecated and update everywhere … #380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 21, 2025
Merged

feature: mark old window service as deprecated and update everywhere … #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
307e169
feature: mark old window service as deprecated and update everywhere …
reunefe Jan 16, 2025
4a34981
Merge branch 'refs/heads/master' into feature/deprecate-old-window-se…
reunefe Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions apps/docs/src/app/pages/docs/angular/core/services/window-service/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ It is convenient for using the document or window without breaking SSR.
The window-service exposes a `width$` observable to get the window-width. It defaults to `1200` when no window is defined.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
public windowWidth$: Observable<number>;

constructor(private windowService: WindowService) {
constructor(private windowService: NgxWindowService) {
this.windowWidth$ = this.windowService.width$;
}
}
Expand All @@ -28,12 +28,12 @@ export class YourComponent {
The window-service exposes a `scrollingUp$` observable to know when the scroll has ended.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
public scrollingUp$: Observable<number>;

constructor(private windowService: WindowService) {
constructor(private windowService: NgxWindowService) {
this.scrollingUp$ = this.windowService.scrollingUp$;
}
}
Expand All @@ -44,12 +44,12 @@ export class YourComponent {
The window-service exposes a `currentScrollPosition` property that contains the currentScrollPosition after handleContentScroll has been called.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
public currentScrollPosition: Observable<number>;

constructor(private windowService: WindowService) {
constructor(private windowService: NgxWindowService) {
this.currentScrollPosition = this.windowService.currentScrollPosition;
}
}
Expand All @@ -60,12 +60,12 @@ export class YourComponent {
The window-service exposes the `window` property which is a link to the `Window` object.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
public window: Observable<number>;

constructor(private windowService: WindowService) {
constructor(private windowService: NgxWindowService) {
this.window = this.windowService.window;
}
}
Expand All @@ -76,12 +76,12 @@ export class YourComponent {
The window-service also exposes the `document` property which is a link to the `Document` object.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
public window: Observable<number>;

constructor(private windowService: WindowService) {
constructor(private windowService: NgxWindowService) {
this.window = this.windowService.window;
}
}
Expand All @@ -96,10 +96,10 @@ A `scrollTo` method is provided to scroll to a position on the page. When there
The offset is set to `0` by default so triggering the method without a value will scroll to the top of the page.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
constructor(private windowService: WindowService) {}
constructor(private windowService: NgxWindowService) {}

public somethingHappened(): void {
this.windowService.scrollTo(500);
Expand All @@ -112,10 +112,10 @@ export class YourComponent {
The `hasDocument`-method is provided to check if there is a document.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
constructor(private windowService: WindowService) {}
constructor(private windowService: NgxWindowService) {}

public aCoolMethod(): void {
if (this.windowService.hasDocument()) {
Expand All @@ -132,10 +132,10 @@ The `isBrowser`-method is provided to check if the current platform is a browser
It uses the `isPlatformBrowser` method with the `PLATFORM_ID` injection-token internally.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
constructor(private windowService: WindowService) {}
constructor(private windowService: NgxWindowService) {}

public aCoolMethod(): void {
if (this.windowService.isBrowser()) {
Expand All @@ -152,10 +152,10 @@ The `runInBrowser`-method is provided to run a specific callback only when in th
The callback has access to the window and the document elements provided in its parameters.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

export class YourComponent {
constructor(private windowService: WindowService) {}
constructor(private windowService: NgxWindowService) {}

public aCoolMethod(): void {
this.windowService.runInBrowser(({ browserWindow, browserDocument }) => {
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/app/pages/docs/angular/utils/pipes/replace-elements/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ Then register it as a web component in your `app.component.ts`:
export class AppComponent {
constructor(
// ...
private readonly windowService: WindowService,
private readonly windowService: NgxWindowService,
private readonly injector: Injector
) {
// Note that we are using our WindowService (ngx-utils) to avoid SSR issues.
// Note that we are using our WindowService (ngx-core) to avoid SSR issues.
if (this.windowService.isBrowser) {
const linkComponent = createCustomElement(LinkComponent, { injector: this.injector });

Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/app/pages/docs/angular/utils/pipes/with-router-links/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ Then register it as a web component in your `app.component.ts`:
export class AppComponent {
constructor(
// ...
private readonly windowService: WindowService,
private readonly windowService: NgxWindowService,
private readonly injector: Injector
) {
// Note that we are using our WindowService (ngx-utils) to avoid SSR issues.
// Note that we are using our WindowService (ngx-core) to avoid SSR issues.
if (this.windowService.isBrowser) {
const linkComponent = createCustomElement(LinkComponent, { injector: this.injector });

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/app/pages/docs/angular/utils/services/broadcast-channel/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class YourComponent {

#### Safety

The `initChannel` uses the `isPlatformBrowser` check to ensure it only runs in the browser, taking SSR into account as the BroadcastChannel API is not available in node by default.
The `initChannel` uses the `NgxWindowService` check to ensure it only runs in the browser, taking SSR into account as the BroadcastChannel API is not available in node by default.

If the channel already exists, it will return the existing channel to avoid overriding existing channels and listeners.

Expand Down
163 changes: 0 additions & 163 deletions apps/docs/src/app/pages/docs/angular/utils/services/window-service/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,166 +4,3 @@ keyword: UtilsWindowServicePage

> **Warning**
> This is deprecated in favor of the `*NgxWindowServicePage` in Core

This service uses the `DOCUMENT` injection-token to provide several methods to access both document and window and related information.
It is convenient for using the document or window without breaking SSR.

## Properties

### width$

The window-service exposes a `width$` observable to get the window-width. It defaults to `1200` when no window is defined.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
public windowWidth$: Observable<number>;

constructor(private windowService: WindowService) {
this.windowWidth$ = this.windowService.width$;
}
}
```

### scrollingUp$

The window-service exposes a `scrollingUp$` observable to know when the scroll has ended.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
public scrollingUp$: Observable<number>;

constructor(private windowService: WindowService) {
this.scrollingUp$ = this.windowService.scrollingUp$;
}
}
```

### currentScrollPosition

The window-service exposes a `currentScrollPosition` property that contains the currentScrollPosition after handleContentScroll has been called.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
public currentScrollPosition: Observable<number>;

constructor(private windowService: WindowService) {
this.currentScrollPosition = this.windowService.currentScrollPosition;
}
}
```

### window

The window-service exposes the `window` property which is a link to the `Window` object.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
public window: Observable<number>;

constructor(private windowService: WindowService) {
this.window = this.windowService.window;
}
}
```

### document

The window-service also exposes the `document` property which is a link to the `Document` object.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
public window: Observable<number>;

constructor(private windowService: WindowService) {
this.window = this.windowService.window;
}
}
```

## Methods

### scrollTo

A `scrollTo` method is provided to scroll to a position on the page. When there is no window, it will do nothing.

The offset is set to `0` by default so triggering the method without a value will scroll to the top of the page.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
constructor(private windowService: WindowService) {}

public somethingHappened(): void {
this.windowService.scrollTo(500);
}
}
```

### hasDocument

The `hasDocument`-method is provided to check if there is a document.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
constructor(private windowService: WindowService) {}

public aCoolMethod(): void {
if (this.windowService.hasDocument()) {
// do something that depends on the document.
}
}
}
```

### isBrowser

The `isBrowser`-method is provided to check if the current platform is a browser.

It uses the `isPlatformBrowser` method with the `PLATFORM_ID` injection-token internally.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
constructor(private windowService: WindowService) {}

public aCoolMethod(): void {
if (this.windowService.isBrowser()) {
// do something that depends on the browser.
}
}
}
```

### runInBrowser

The `runInBrowser`-method is provided to run a specific callback only when in the browser.

The callback has access to the window and the document elements provided in its parameters.

```typescript
import { WindowService } from '@studiohyperdrive/ngx-utils';

export class YourComponent {
constructor(private windowService: WindowService) {}

public aCoolMethod(): void {
this.windowService.runInBrowser(({ browserWindow, browserDocument }) => {
// Do something with the browser window or document
});
}
}
```
8 changes: 4 additions & 4 deletions libs/angular/cookies/src/lib/services/cookie/cookie.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Injectable } from '@angular/core';
import * as CookieConsent from 'vanilla-cookieconsent';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';

import {
BehaviorSubject,
Expand Down Expand Up @@ -81,7 +81,7 @@ export class NgxCookieService {
public readonly cookiesChanged$: Observable<Record<string, any>> =
this.cookiesChangedSubject.asObservable();

constructor(@Inject(PLATFORM_ID) private platformId: string) {}
constructor(private readonly windowsService: NgxWindowService) {}

/**
* Sets up the CookieConsent.
Expand All @@ -99,7 +99,7 @@ export class NgxCookieService {
configuration?: NgxCookieConfiguration
): void {
// Iben: If we're not in the browser, we early exit, so server-side rendering can be enabled
if (!isPlatformBrowser(this.platformId)) {
if (!this.windowsService.isBrowser()) {
return;
}

Expand Down
20 changes: 12 additions & 8 deletions libs/angular/core/src/lib/services/window/window.service.mock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,15 @@ export const NgxWindowMock = (spy: unknown) => ({
* example:
* NgxWindowServiceMock(jasmine.createSpy(), 1440);
* */
export const NgxWindowServiceMock = (spy: unknown, width: number = 1200) => ({
width: new BehaviorSubject(width),
window: NgxWindowMock(spy),
scrollTo: () => null,
hasDocument: () => true,
isBrowser: () => true,
runInBrowser: (callback: () => void) => callback(),
});
export const NgxWindowServiceMock = (spy: unknown, width: number = 1200) => {
const window = NgxWindowMock(spy) as unknown as Window;
return {
width: new BehaviorSubject(width),
window: NgxWindowMock(spy),
scrollTo: () => null,
hasDocument: () => true,
isBrowser: () => true,
runInBrowser: (callback: (data: { browserWindow: Window }) => void) =>
callback({ browserWindow: window }),
};
};
1 change: 0 additions & 1 deletion libs/angular/core/src/lib/services/window/window.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ export class NgxWindowService {
if (this.isBrowser) {
return action({ browserWindow: this.window, browserDocument: this.document });
}

console.warn('Browser depended function has not run.');
return undefined;
}
Expand Down
Loading