feat: add tree shakeable manager providers [skip release] (#1004)

* refactor: turn Open Graph providers into tree-shakeable ones * refactor: turn Open Graph profile providers into tree-shakeable * refactor: turn JSON-LD providers into tree-shakeable ones Also: - Move types to the `types` directory - Rename provider to make it a bit more specific * refactor: turn standard providers into tree-shakeable ones * refactor: turn Twitter Card providers into tree-shakeable ones * refactor: rename provide json-ld file * refactor: hide JSON-LD provider * feat: add pure but deprecated Open Graph const providers * feat: add pure but deprecated Open Graph profile const providers * feat: add pure but deprecated JSON-LD const provider * feat: add pure but deprecated standard const providers * feat: add pure but deprecated Twitter Card const providers
davidlj95 · Nov 21, 2024 · 7d91ee6 · 7d91ee6
1 parent 2a71abc
commit 7d91ee6
Show file tree

Hide file tree

Showing 80 changed files with 1,183 additions and 770 deletions.
diff --git a/projects/ngx-meta/api-extractor/ngx-meta.api.md b/projects/ngx-meta/api-extractor/ngx-meta.api.md
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 
@@ -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
@@ -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

diff --git a/projects/ngx-meta/docs/content/guides/custom-metadata-providers-selection.md b/projects/ngx-meta/docs/content/guides/custom-metadata-providers-selection.md
@@ -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
 
@@ -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 = {
       // ...
@@ -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(),++}
         // ...
       ]
     })
@@ -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({
       // ...
@@ -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 {}

diff --git a/projects/ngx-meta/src/json-ld/index.ts b/projects/ngx-meta/src/json-ld/index.ts
@@ -1,2 +1,3 @@
 export * from './src/managers'
+export * from './src/types'
 export * from './src/providers'
diff --git a/projects/ngx-meta/src/json-ld/src/managers/index.ts b/projects/ngx-meta/src/json-ld/src/managers/index.ts
@@ -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'
diff --git a/projects/ngx-meta/src/json-ld/src/managers/json-ld-metadata-provider.ts b/projects/ngx-meta/src/json-ld/src/managers/json-ld-metadata-provider.ts
diff --git a/projects/ngx-meta/src/json-ld/src/managers/provide-json-ld-in-head.ts b/projects/ngx-meta/src/json-ld/src/managers/provide-json-ld-in-head.ts
@@ -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()
diff --git a/projects/ngx-meta/src/json-ld/src/providers/provide-ngx-meta-json-ld.ts b/projects/ngx-meta/src/json-ld/src/providers/provide-ngx-meta-json-ld.ts
@@ -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}
@@ -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()
diff --git a/projects/ngx-meta/src/json-ld/src/types/index.ts b/projects/ngx-meta/src/json-ld/src/types/index.ts
@@ -0,0 +1 @@
+export { JsonLdMetadata } from './json-ld-metadata'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { JsonLdMetadata } from './json-ld-metadata'