Skip to content
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.

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

feat: add function-based manager providers #1004

Merged
merged 12 commits into from
Nov 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
132 changes: 105 additions & 27 deletions projects/ngx-meta/api-extractor/ngx-meta.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const _injectMetadataManagers: () => readonly NgxMetaMetadataManager[];
// @internal
export const _isDefined: <T>(value: T | null | undefined) => value is T;

// @public
// @public @deprecated
export const JSON_LD_METADATA_PROVIDER: Provider;

// @public
Expand Down Expand Up @@ -295,16 +295,16 @@ export class NgxMetaStandardModule {
export class NgxMetaTwitterCardModule {
}

// @public
// @public @deprecated
export const OPEN_GRAPH_DESCRIPTION_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_IMAGE_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_LOCALE_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_PROFILE_FIRST_NAME_METADATA_PROVIDER: Provider;

// @public
Expand All @@ -313,19 +313,19 @@ export const OPEN_GRAPH_PROFILE_GENDER_FEMALE = "female";
// @public
export const OPEN_GRAPH_PROFILE_GENDER_MALE = "male";

// @public
// @public @deprecated
export const OPEN_GRAPH_PROFILE_GENDER_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_PROFILE_LAST_NAME_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_PROFILE_USERNAME_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_SITE_NAME_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const OPEN_GRAPH_TITLE_METADATA_PROVIDER: Provider;

// @public
Expand All @@ -334,7 +334,7 @@ export const OPEN_GRAPH_TYPE_ARTICLE = "article";
// @public
export const OPEN_GRAPH_TYPE_BOOK = "book";

// @public
// @public @deprecated
export const OPEN_GRAPH_TYPE_METADATA_PROVIDER: Provider;

// @public
Expand Down Expand Up @@ -367,7 +367,7 @@ export const OPEN_GRAPH_TYPE_VIDEO_TV_SHOW = "video.tv_show";
// @public
export const OPEN_GRAPH_TYPE_WEBSITE = "website";

// @public
// @public @deprecated
export const OPEN_GRAPH_URL_METADATA_PROVIDER: Provider;

// @public
Expand Down Expand Up @@ -460,6 +460,84 @@ export const provideNgxMetaStandard: () => Provider;
// @public
export const provideNgxMetaTwitterCard: () => Provider;

// @public
export const provideOpenGraphDescription: () => Provider;

// @public
export const provideOpenGraphImage: () => Provider;

// @public
export const provideOpenGraphLocale: () => Provider;

// @public
export const provideOpenGraphProfileFirstName: () => Provider;

// @public
export const provideOpenGraphProfileGender: () => Provider;

// @public
export const provideOpenGraphProfileLastName: () => Provider;

// @public
export const provideOpenGraphProfileUsername: () => Provider;

// @public
export const provideOpenGraphSiteName: () => Provider;

// @public
export const provideOpenGraphTitle: () => Provider;

// @public
export const provideOpenGraphType: () => Provider;

// @public
export const provideOpenGraphUrl: () => Provider;

// @public
export const provideStandardApplicationName: () => Provider;

// @public
export const provideStandardAuthor: () => Provider;

// @public
export const provideStandardCanonicalUrl: () => Provider;

// @public
export const provideStandardDescription: () => Provider;

// @public
export const provideStandardGenerator: () => Provider;

// @public
export const provideStandardKeywords: () => Provider;

// @public
export const provideStandardLocale: () => Provider;

// @public
export const provideStandardThemeColor: () => Provider;

// @public
export const provideStandardTitle: () => Provider;

// @public
export const provideTwitterCardCard: () => Provider;

// @public
export const provideTwitterCardCreator: () => Provider;

// @public
export const provideTwitterCardDescription: () => Provider;

// @public
export const provideTwitterCardImage: () => Provider;

// @public
export const provideTwitterCardSite: () => Provider;

// @public
export const provideTwitterCardTitle: () => Provider;

// @internal (undocumented)
export type _RouteMetadataStrategy = () => MetadataValues | undefined;

Expand All @@ -479,31 +557,31 @@ export interface Standard {
readonly title?: GlobalMetadata['title'];
}

// @public
// @public @deprecated
export const STANDARD_APPLICATION_NAME_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_AUTHOR_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_CANONICAL_URL_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_DESCRIPTION_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_GENERATOR_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_KEYWORDS_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_LOCALE_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_THEME_COLOR_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const STANDARD_TITLE_METADATA_PROVIDER: Provider;

// @public
Expand All @@ -523,22 +601,22 @@ export interface StandardThemeColorMetadataObject {
// @internal (undocumented)
type StringKeyOf<T = object> = Extract<keyof T, string>;

// @public
// @public @deprecated
export const TWITTER_CARD_CARD_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const TWITTER_CARD_CREATOR_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const TWITTER_CARD_DESCRIPTION_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const TWITTER_CARD_IMAGE_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const TWITTER_CARD_SITE_METADATA_PROVIDER: Provider;

// @public
// @public @deprecated
export const TWITTER_CARD_TITLE_METADATA_PROVIDER: Provider;

// @public
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ In there, you'll see which metadata manager the module provides. For instance, f

```typescript
export const provideNgxMetaStandard = (): Provider[] => [
STANDARD_TITLE_METADATA_PROVIDER,
STANDARD_DESCRIPTION_METADATA_PROVIDER,
provideStandardTitle(),
provideStandardDescription(),
// ...
]
```

The title provider can be easily found by its name: [`STANDARD_TITLE_METADATA_PROVIDER`](ngx-meta.standard_title_metadata_provider.md). Otherwise, look for it in the [API reference](ngx-meta.md). You'll find there that [`STANDARD_TITLE_METADATA_PROVIDER`](ngx-meta.standard_title_metadata_provider.md) manages the [`Standard.title`](ngx-meta.standard.title.md) value which sets the `#!html <title>` element.
The title provider can be easily found by its name: [`provideStandardTitle`](ngx-meta.providestandardtitle.md). Otherwise, look for it in the [API reference](ngx-meta.md). You'll find there that [`provideStandardTitle`](ngx-meta.providestandardtitle.md) manages the [`Standard.title`](ngx-meta.standard.title.md) value which sets the `#!html <title>` element.

### In the API reference

You can also directly check out the [API reference `variables` section](ngx-meta.md#variables). In there, you can look for the module name and the `_PROVIDER` suffix.

You can find the [`STANDARD_TITLE_METADATA_PROVIDER`](ngx-meta.standard_title_metadata_provider.md) there too.
You can find the [`provideStandardTitle`](ngx-meta.providestandardtitle.md) there too.

## 2. Add it/them

Expand All @@ -46,7 +46,7 @@ Now that you've found the metadata manager provider you want to use, add it as y

```title="app.config.ts"
// ...
import {STANDARD_TITLE_METADATA_PROVIDER} from '@davidlj95/ngx-meta/standard'
import {provideStandardTitle} from '@davidlj95/ngx-meta/standard'

export const appConfig: ApplicationConfig = {
// ...
Expand All @@ -55,7 +55,7 @@ Now that you've found the metadata manager provider you want to use, add it as y
provideNgxMetaCore(),
provideNgxMetaRouting(), // (optional)
{--provideNgxMetaStandard(),--}
{++STANDARD_TITLE_METADATA_PROVIDER,++}
{++provideStandardTitle(),++}
// ...
]
})
Expand All @@ -67,7 +67,7 @@ Now that you've found the metadata manager provider you want to use, add it as y

```title="app.module.ts"
// ...
import {STANDARD_TITLE_METADATA_PROVIDER} from '@davidlj95/ngx-meta/standard'
import {provideStandardTitle} from '@davidlj95/ngx-meta/standard'

@NgModule({
// ...
Expand All @@ -76,7 +76,7 @@ Now that you've found the metadata manager provider you want to use, add it as y
provideNgxMetaCore(),
provideNgxMetaRouting(), // (optional)
{--provideNgxMetaStandard(),--}
{++STANDARD_TITLE_METADATA_PROVIDER,++}
{++provideStandardTitle(),++}
]
})
export class AppModule {}
Expand Down
1 change: 1 addition & 0 deletions projects/ngx-meta/src/json-ld/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './src/managers'
export * from './src/types'
export * from './src/providers'
3 changes: 1 addition & 2 deletions projects/ngx-meta/src/json-ld/src/managers/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { JsonLdMetadata } from './json-ld-metadata'
export { JSON_LD_METADATA_PROVIDER } from './json-ld-metadata-provider'
export { JSON_LD_METADATA_PROVIDER } from './provide-json-ld-in-head'

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { DOCUMENT } from '@angular/common'
import {
_headElementUpsertOrRemove,
_HeadElementUpsertOrRemove,
_isDefined,
provideNgxMetaManager,
withManagerDeps,
withOptions,
} from '@davidlj95/ngx-meta/core'
import { JsonLdMetadata } from '../types'

const SCRIPT_TYPE = 'application/ld+json'

/**
* Manages the {@link JsonLdMetadata.jsonLd} metadata by placing it into the page's `<head>`
* @public
*/
export const provideJsonLdInHead = () =>
provideNgxMetaManager<JsonLdMetadata['jsonLd']>(
'jsonLd' satisfies keyof JsonLdMetadata,
(headElementUpsertOrRemove: _HeadElementUpsertOrRemove, doc: Document) =>
(jsonLd) => {
let scriptElement: HTMLScriptElement | undefined
if (_isDefined(jsonLd)) {
scriptElement = doc.createElement('script')
scriptElement.setAttribute('type', SCRIPT_TYPE)
scriptElement.innerHTML = JSON.stringify(jsonLd)
}
headElementUpsertOrRemove(
`script[type='${SCRIPT_TYPE}']`,
scriptElement,
)
},
withOptions(withManagerDeps(_headElementUpsertOrRemove(), DOCUMENT)),
)

/**
* {@inheritDoc provideNgxMetaJsonLd}
* @deprecated Use {@link provideNgxMetaJsonLd} instead
* @public
*/
export const JSON_LD_METADATA_PROVIDER =
/* @__PURE__ */
provideJsonLdInHead()
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { provideJsonLdInHead } from '../managers/provide-json-ld-in-head'
import { Provider } from '@angular/core'
import { JSON_LD_METADATA_PROVIDER } from '../managers'

/**
* Provides {@link https://ngx-meta.dev/built-in-modules/json-ld/ | JSON-LD module}
Expand All @@ -12,4 +12,4 @@ import { JSON_LD_METADATA_PROVIDER } from '../managers'
*
* @public
*/
export const provideNgxMetaJsonLd = (): Provider => [JSON_LD_METADATA_PROVIDER]
export const provideNgxMetaJsonLd = (): Provider => provideJsonLdInHead()
1 change: 1 addition & 0 deletions projects/ngx-meta/src/json-ld/src/types/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { JsonLdMetadata } from './json-ld-metadata'
Loading
Loading