perf: reduce Open Graph module bundle size (#150)

* perf: reduce Open Graph module bundle size

* refactor: reorder og imports in provider

Author: davidlj95

package.json

@@ -23,7 +23,8 @@
     "commitlint-last": "commitlint --verbose --from HEAD~1",
     "generate-prettier-ignore": "cp .gitignore .prettierignore && cat .part.prettierignore >> .prettierignore",
     "semantic-release": "semantic-release",
-    "ng-lint-staged": "ng-lint-staged lint --max-warnings 0 --fix --"
+    "ng-lint-staged": "ng-lint-staged lint --max-warnings 0 --fix --",
+    "cache-clean": "ng cache clean"
   },
   "private": true,
   "packageManager": "[email protected]",

projects/ngx-meta/src/core/public-api.ts

@@ -17,7 +17,10 @@ export * from './src/meta-property'
 export * from './src/meta.service'
 export * from './src/metadata'
 export * from './src/metadata-definition'
+export * from './src/metadata-setter'
 export * from './src/metadata-values'
 export * from './src/metadata.service'
 export * from './src/provide-metadata'
+export * from './src/provide-metadata-factory'
+export * from './src/scoped-metadata-definition'
 export * from './src/string-key-of'

projects/ngx-meta/src/core/src/metadata-setter.ts

@@ -0,0 +1 @@
+export type MetadataSetter<T> = (value: T) => void

projects/ngx-meta/src/core/src/provide-metadata-factory.ts

@@ -0,0 +1,32 @@
+import { Metadata } from './metadata'
+import { FactoryProvider } from '@angular/core'
+import { MetadataDefinition } from './metadata-definition'
+import { MetadataSetter } from './metadata-setter'
+
+export type MetadataSetterFactory<T> = (
+  ...deps: Exclude<FactoryProvider['deps'], undefined>
+) => MetadataSetter<T>
+
+const makeMetadata = <T>(
+  definition: MetadataDefinition,
+  set: MetadataSetter<T>,
+): Metadata<T> => {
+  return {
+    definition,
+    set,
+  }
+}
+
+export function provideMetadataFactory<T>(
+  definition: MetadataDefinition,
+  setterFactory: MetadataSetterFactory<T>,
+  deps?: FactoryProvider['deps'],
+): FactoryProvider {
+  return {
+    provide: Metadata,
+    multi: true,
+    useFactory: (...deps: unknown[]) =>
+      makeMetadata(definition, setterFactory(...deps)),
+    deps,
+  }
+}

projects/ngx-meta/src/open-graph-profile/src/base-open-graph-profile-metadata.ts

@@ -5,9 +5,8 @@ import {
 } from '@davidlj95/ngx-meta/core'
 import { OpenGraphProfileMetadata } from './open-graph-profile-metadata'
 import { OpenGraphProfileMetadataRouteData } from './open-graph-profile-metadata-route-data'
-import { OpenGraphMetadataRouteData } from '@davidlj95/ngx-meta/open-graph'
 
-export const OG_SCOPE: keyof OpenGraphMetadataRouteData['meta'] = 'openGraph'
+export const OG_SCOPE = 'openGraph'
 export const PROFILE_SCOPE: keyof OpenGraphProfileMetadataRouteData['meta']['openGraph'] =
   'profile'
 

projects/ngx-meta/src/open-graph-profile/src/open-graph-profile-metadata-route-data.ts

@@ -1,10 +1,10 @@
 import { OpenGraphProfileMetadata } from './open-graph-profile-metadata'
-import { OpenGraphMetadataRouteData } from '@davidlj95/ngx-meta/open-graph'
+import { MetadataRouteData } from '@davidlj95/ngx-meta/routing'
+import { OpenGraph } from '@davidlj95/ngx-meta/open-graph'
 
-export interface OpenGraphProfileMetadataRouteData
-  extends OpenGraphMetadataRouteData {
+export interface OpenGraphProfileMetadataRouteData extends MetadataRouteData {
   meta: {
-    openGraph: OpenGraphMetadataRouteData['meta']['openGraph'] & {
+    openGraph: OpenGraph & {
       profile: OpenGraphProfileMetadata
     }
   }

projects/ngx-meta/src/open-graph/public-api.ts

@@ -1,15 +1,15 @@
 export { OpenGraphModule as NgxMetaOpenGraphModule } from './src/open-graph.module'
 export { provideOpenGraph as provideNgxMetaOpenGraphMetadata } from './src/provide-open-graph'
+export * from './src/open-graph'
 export * from './src/open-graph-image'
 export * from './src/open-graph-meta-property'
-export * from './src/open-graph-metadata-route-data'
 export * from './src/open-graph-metadata'
 export * from './src/open-graph-type'
-// Specific metadata
-export * from './src/title-open-graph-metadata'
-export * from './src/type-open-graph-metadata'
-export * from './src/image-open-graph-metadata'
-export * from './src/url-open-graph-metadata'
-export * from './src/description-open-graph-metadata'
-export * from './src/locale-open-graph-metadata'
-export * from './src/site-name-open-graph-metadata'
+// Providers
+export * from './src/open-graph-title-metadata-provider'
+export * from './src/open-graph-type-metadata-provider'
+export * from './src/open-graph-image-metadata-provider'
+export * from './src/open-graph-url-metadata-provider'
+export * from './src/open-graph-description-metadata-provider'
+export * from './src/open-graph-locale-metadata-provider'
+export * from './src/open-graph-site-name-metadata-provider'

projects/ngx-meta/src/open-graph/src/base-open-graph-metadata.ts

@@ -0,0 +1,32 @@
+import {
+  GlobalMetadataKey,
+  MetadataSetterFactory,
+  MetaService,
+  provideMetadataFactory,
+  StringKeyOf,
+} from '@davidlj95/ngx-meta/core'
+import { OpenGraph } from './open-graph'
+import { FactoryProvider } from '@angular/core'
+import { OpenGraphMetadataDefinition } from './open-graph-metadata-definition'
+import { OpenGraphMetaProperty } from './open-graph-meta-property'
+
+export const makeOpenGraphMetadataProvider = <
+  Key extends StringKeyOf<OpenGraph>,
+>(
+  key: Key,
+  opts: {
+    // Open Graph property name. Defaults to key
+    p?: string
+    // Global key. Defaults to nothing
+    g?: GlobalMetadataKey
+    // Setter factory. Defaults to setting the property to the given value.
+    s?: MetadataSetterFactory<OpenGraph[typeof key]>
+  } = {},
+): FactoryProvider =>
+  provideMetadataFactory(
+    new OpenGraphMetadataDefinition(key, opts.g),
+    opts.s ??
+      ((metaService) => (value: OpenGraph[typeof key]) =>
+        metaService.set(new OpenGraphMetaProperty(opts.p ?? key), value)),
+    [MetaService],
+  )

projects/ngx-meta/src/open-graph/src/description-open-graph-metadata.ts

@@ -0,0 +1,7 @@
+import { makeOpenGraphMetadataProvider } from './make-open-graph-metadata-provider'
+import { OpenGraph } from './open-graph'
+
+const KEY: keyof OpenGraph = 'description'
+
+export const OPEN_GRAPH_DESCRIPTION_METADATA_PROVIDER =
+  makeOpenGraphMetadataProvider(KEY, { g: KEY })

projects/ngx-meta/src/open-graph/src/image-open-graph-metadata.ts

@@ -1,13 +1,14 @@
-import { ImageOpenGraphMetadata } from './image-open-graph-metadata'
 import { TestBed } from '@angular/core/testing'
 import { MockProviders } from 'ng-mocks'
-import { MetaService } from '@davidlj95/ngx-meta/core'
+import { MetadataSetter, MetaService } from '@davidlj95/ngx-meta/core'
 import { enableAutoSpy } from '../../__tests__/enable-auto-spy'
 import { OpenGraphImage } from './open-graph-image'
+import { OpenGraph } from './open-graph'
+import { OPEN_GRAPH_IMAGE_SETTER_FACTORY } from './open-graph-image-metadata-provider'
 
-describe('Image Open Graph metadata', () => {
+describe('Open Graph image metadata', () => {
   enableAutoSpy()
-  let sut: ImageOpenGraphMetadata
+  let sut: MetadataSetter<OpenGraph['image']>
   let metaService: jasmine.SpyObj<MetaService>
 
   beforeEach(() => {
@@ -27,7 +28,7 @@ describe('Image Open Graph metadata', () => {
   describe('set', () => {
     describe('when url is provided', () => {
       it('should set all meta properties', () => {
-        sut.set(image)
+        sut(image)
 
         const props = Object.keys(image).length
         expect(metaService.set).toHaveBeenCalledTimes(props)
@@ -59,7 +60,7 @@ describe('Image Open Graph metadata', () => {
     })
     describe('when no url is defined', () => {
       it('should remove all meta properties', () => {
-        sut.set({ ...image, url: undefined })
+        sut({ ...image, url: undefined })
 
         const props = Object.keys(image).length
         expect(metaService.set).toHaveBeenCalledTimes(props)
@@ -71,9 +72,9 @@ describe('Image Open Graph metadata', () => {
   })
 })
 
-function makeSut(): ImageOpenGraphMetadata {
+function makeSut(): MetadataSetter<OpenGraph['image']> {
   TestBed.configureTestingModule({
-    providers: [ImageOpenGraphMetadata, MockProviders(MetaService)],
+    providers: [MockProviders(MetaService)],
   })
-  return TestBed.inject(ImageOpenGraphMetadata)
+  return OPEN_GRAPH_IMAGE_SETTER_FACTORY(TestBed.inject(MetaService))
 }

projects/ngx-meta/src/open-graph/src/locale-open-graph-metadata.ts

@@ -0,0 +1,43 @@
+import { OpenGraph } from './open-graph'
+import { MetaService } from '@davidlj95/ngx-meta/core'
+import { OpenGraphMetaProperty } from './open-graph-meta-property'
+import { makeOpenGraphMetadataProvider } from './make-open-graph-metadata-provider'
+
+const KEY: keyof OpenGraph = 'image'
+const NO_KEY_VALUE: OpenGraph[typeof KEY] = {
+  url: undefined,
+  alt: undefined,
+  secureUrl: null,
+  type: null,
+  width: null,
+  height: null,
+}
+
+export const OPEN_GRAPH_IMAGE_SETTER_FACTORY =
+  (metaService: MetaService) => (value: OpenGraph[typeof KEY]) => {
+    const imageUrl = value?.url?.toString()
+    const effectiveValue: OpenGraph[typeof KEY] =
+      imageUrl !== undefined && imageUrl !== null ? value : NO_KEY_VALUE
+    metaService.set(new OpenGraphMetaProperty(KEY), imageUrl)
+    metaService.set(new OpenGraphMetaProperty(KEY, 'alt'), effectiveValue?.alt)
+    metaService.set(
+      new OpenGraphMetaProperty(KEY, 'secure_url'),
+      effectiveValue?.secureUrl?.toString(),
+    )
+    metaService.set(
+      new OpenGraphMetaProperty(KEY, 'type'),
+      effectiveValue?.type,
+    )
+    metaService.set(
+      new OpenGraphMetaProperty(KEY, 'width'),
+      effectiveValue?.width?.toString(),
+    )
+    metaService.set(
+      new OpenGraphMetaProperty(KEY, 'height'),
+      effectiveValue?.height?.toString(),
+    )
+  }
+export const OPEN_GRAPH_IMAGE_METADATA_PROVIDER = makeOpenGraphMetadataProvider(
+  KEY,
+  { s: OPEN_GRAPH_IMAGE_SETTER_FACTORY, g: KEY },
+)

projects/ngx-meta/src/open-graph/src/make-open-graph-metadata-provider.ts

@@ -0,0 +1,6 @@
+import { makeOpenGraphMetadataProvider } from './make-open-graph-metadata-provider'
+import { OpenGraph } from './open-graph'
+
+const key: keyof OpenGraph = 'locale'
+export const OPEN_GRAPH_LOCALE_METADATA_PROVIDER =
+  makeOpenGraphMetadataProvider(key, { g: key })

projects/ngx-meta/src/open-graph/src/open-graph-description-metadata-provider.ts

@@ -0,0 +1,10 @@
+import { ScopedMetadataDefinition } from '@davidlj95/ngx-meta/core'
+import { OpenGraphMetadata } from './open-graph-metadata'
+
+const SCOPE: keyof OpenGraphMetadata = 'openGraph'
+
+export class OpenGraphMetadataDefinition extends ScopedMetadataDefinition {
+  constructor(name: string, global?: string) {
+    super(SCOPE, name, global)
+  }
+}