feat: add function-based manager providers #1004

davidlj95 · 2024-10-28T20:15:10Z

Issue or need

Fixes #960

Proposed changes

Add tree shakeable providers by making them functions instead of consts. This way the code they can be tree shaken if unused.

Except for JSON_LD_METADATA_PROVIDER. Which has been removed as it's essentially the same as provideNgxMetaJsonLd

~~Removes non tree-shakeable const providers~~ Marks const providers as deprecated and pure. Pure so they can bee tree-shaken if unused. Deprecated to favour new functions instead.

Add schematics to migrate automatically from old to new ones in #1005

Other changes:

~~Return Provider instead of FactoryProvider. No need to reveal implementation detail of which kind of provider is returned~~ Moved to refactor: return generic Provider type for providers #1045 to reduce diff
~~Return Provider instead of Provider[]~~. Moved to refactor: return generic Provider type for providers #1045 to reduce diff
Reorganizers JSON-LD module directories to be consistent with rest
Rename JSON_LD_METADATA_PROVIDER to provideJsonLdInHead (instead of provideJsonLd, to differentiate a bit)
Improves JSON-LD docs
Removes unneeded empty file (Twitter Card creator username)

Quick reminders

🤝 I will follow Code of Conduct
✅ No existing pull request already does almost same changes
👁️ Contributing docs are something I've taken a look at
📝 Commit messages convention has been followed
💬 TSDoc comments have been added or updated indicating API visibility if API surface has changed.
🧪 Tests have been added if needed. For instance, if adding new features or fixing a bug. Or removed if removing features.
⚙️ API Report has been updated if API surface is altered.

davidlj95 · 2024-10-28T20:15:27Z

feat: add migration schematic for function-based providers #1005
feat: add function-based manager providers #1004 👈 (View in Graphite)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

codecov · 2024-10-28T20:20:31Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (665c741) to head (7dd298b).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1004   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           90        90           
  Lines          390       440   +50     
  Branches        49        49           
=========================================
+ Hits           390       440   +50

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

github-actions · 2024-10-28T20:20:37Z

📦 Bundle size (Angular v15)

Git ref: 7dd298bdf1f3cda98a9086e7a09a442d2f94b5db

Module file	Size	Base size	Difference
`ngx-meta-core.mjs`	3386 bytes (3.4KiB)	3386 bytes (3.4KiB)	No change
`ngx-meta-json-ld.mjs`	198 bytes (198B)	206 bytes (206B)	-3.88%: -8 bytes (-8B)
`ngx-meta-open-graph.mjs`	804 bytes (804B)	870 bytes (870B)	-7.58%: -66 bytes (-66B)
`ngx-meta-routing.mjs`	373 bytes (373B)	373 bytes (373B)	No change
`ngx-meta-standard.mjs`	739 bytes (739B)	808 bytes (808B)	-8.53%: -69 bytes (-69B)
`ngx-meta-twitter-card.mjs`	412 bytes (412B)	448 bytes (448B)	-8.03%: -36 bytes (-36B)
Total	5912 bytes (5.8KiB)	6091 bytes (6.0KiB)	-2.93%: -179 bytes (-179B)

github-actions · 2024-10-28T20:20:38Z

📦 Bundle size (Angular v17)

Git ref: 7dd298bdf1f3cda98a9086e7a09a442d2f94b5db

Module file	Size	Base size	Difference
`ngx-meta-core.mjs`	3205 bytes (3.2KiB)	3205 bytes (3.2KiB)	No change
`ngx-meta-json-ld.mjs`	219 bytes (219B)	217 bytes (217B)	.92%: 2 bytes (2B)
`ngx-meta-open-graph.mjs`	1033 bytes (1.1KiB)	931 bytes (931B)	10.95%: 102 bytes (102B)
`ngx-meta-routing.mjs`	394 bytes (394B)	394 bytes (394B)	No change
`ngx-meta-standard.mjs`	943 bytes (943B)	857 bytes (857B)	10.03%: 86 bytes (86B)
`ngx-meta-twitter-card.mjs`	539 bytes (539B)	487 bytes (487B)	10.67%: 52 bytes (52B)
Total	6333 bytes (6.2KiB)	6091 bytes (6.0KiB)	3.97%: 242 bytes (242B)

github-actions · 2024-10-28T20:20:38Z

📦 Bundle size (Angular v16)

Git ref: 7dd298bdf1f3cda98a9086e7a09a442d2f94b5db

Module file	Size	Base size	Difference
`ngx-meta-core.mjs`	3411 bytes (3.4KiB)	3469 bytes (3.4KiB)	-1.67%: -58 bytes (-58B)
`ngx-meta-json-ld.mjs`	193 bytes (193B)	201 bytes (201B)	-3.98%: -8 bytes (-8B)
`ngx-meta-open-graph.mjs`	804 bytes (804B)	870 bytes (870B)	-7.58%: -66 bytes (-66B)
`ngx-meta-routing.mjs`	379 bytes (379B)	379 bytes (379B)	No change
`ngx-meta-standard.mjs`	739 bytes (739B)	808 bytes (808B)	-8.53%: -69 bytes (-69B)
`ngx-meta-twitter-card.mjs`	470 bytes (470B)	448 bytes (448B)	4.91%: 22 bytes (22B)
Total	5996 bytes (5.9KiB)	6175 bytes (6.1KiB)	-2.89%: -179 bytes (-179B)

github-actions · 2024-10-28T20:20:42Z

📦 Bundle size (Angular v18)

Git ref: 7dd298bdf1f3cda98a9086e7a09a442d2f94b5db

Module file	Size	Base size	Difference
`ngx-meta-core.mjs`	3205 bytes (3.2KiB)	3205 bytes (3.2KiB)	No change
`ngx-meta-json-ld.mjs`	219 bytes (219B)	217 bytes (217B)	.92%: 2 bytes (2B)
`ngx-meta-open-graph.mjs`	1033 bytes (1.1KiB)	931 bytes (931B)	10.95%: 102 bytes (102B)
`ngx-meta-routing.mjs`	394 bytes (394B)	394 bytes (394B)	No change
`ngx-meta-standard.mjs`	943 bytes (943B)	857 bytes (857B)	10.03%: 86 bytes (86B)
`ngx-meta-twitter-card.mjs`	539 bytes (539B)	487 bytes (487B)	10.67%: 52 bytes (52B)
Total	6333 bytes (6.2KiB)	6091 bytes (6.0KiB)	3.97%: 242 bytes (242B)

davidlj95 · 2024-11-20T19:24:34Z

Context

At the moment of writing this, new metadata provider functions have been added and used around. const ones are removed.

Deprecating consts and marking them as pure instead of removing them hasn't happened yet. As it's an idea that came later

Bundle size weird changes

Something interesting happens regarding bundle size! For Angular v17 and v18, a bundle size increase happens as predicted in #960:

📦 Bundle size (Angular v17)

Git ref: 1c905659d1cf1074685d8cbb22b48dba2df75242

Module file Size Base size Difference

ngx-meta-core.mjs 3205 bytes (3.2KiB) 3205 bytes (3.2KiB) No change

ngx-meta-json-ld.mjs 223 bytes (223B) 217 bytes (217B) 2.76%: 6 bytes (6B)

ngx-meta-open-graph.mjs 997 bytes (997B) 931 bytes (931B) 7.08%: 66 bytes (66B)

ngx-meta-routing.mjs 394 bytes (394B) 394 bytes (394B) No change

ngx-meta-standard.mjs 911 bytes (911B) 857 bytes (857B) 6.30%: 54 bytes (54B)

ngx-meta-twitter-card.mjs 523 bytes (523B) 487 bytes (487B) 7.39%: 36 bytes (36B)

Total 6253 bytes (6.2KiB) 6091 bytes (6.0KiB) 2.65%: 162 bytes (162B)

📦 Bundle size (Angular v18)

Git ref: 1c905659d1cf1074685d8cbb22b48dba2df75242

Module file Size Base size Difference

ngx-meta-core.mjs 3205 bytes (3.2KiB) 3205 bytes (3.2KiB) No change

ngx-meta-json-ld.mjs 223 bytes (223B) 217 bytes (217B) 2.76%: 6 bytes (6B)

ngx-meta-open-graph.mjs 997 bytes (997B) 931 bytes (931B) 7.08%: 66 bytes (66B)

ngx-meta-routing.mjs 394 bytes (394B) 394 bytes (394B) No change

ngx-meta-standard.mjs 911 bytes (911B) 857 bytes (857B) 6.30%: 54 bytes (54B)

ngx-meta-twitter-card.mjs 523 bytes (523B) 487 bytes (487B) 7.39%: 36 bytes (36B)

Total 6253 bytes (6.2KiB) 6091 bytes (6.0KiB) 2.65%: 162 bytes (162B)

However, for Angular v15 and v16 (using Webpack instead of ESBuild), bundle size is reduced!! 🤔

📦 Bundle size (Angular v15)

Git ref: 1c905659d1cf1074685d8cbb22b48dba2df75242

Module file Size Base size Difference

ngx-meta-core.mjs 3384 bytes (3.4KiB) 3384 bytes (3.4KiB) No change

ngx-meta-json-ld.mjs 200 bytes (200B) 206 bytes (206B) -2.91%: -6 bytes (-6B)

ngx-meta-open-graph.mjs 804 bytes (804B) 870 bytes (870B) -7.58%: -66 bytes (-66B)

ngx-meta-routing.mjs 373 bytes (373B) 373 bytes (373B) No change

ngx-meta-standard.mjs 739 bytes (739B) 808 bytes (808B) -8.53%: -69 bytes (-69B)

ngx-meta-twitter-card.mjs 412 bytes (412B) 448 bytes (448B) -8.03%: -36 bytes (-36B)

Total 5912 bytes (5.8KiB) 6089 bytes (6.0KiB) -2.90%: -177 bytes (-177B)

📦 Bundle size (Angular v16)

Git ref: 1c905659d1cf1074685d8cbb22b48dba2df75242

Module file Size Base size Difference

ngx-meta-core.mjs 3409 bytes (3.4KiB) 3467 bytes (3.4KiB) -1.67%: -58 bytes (-58B)

ngx-meta-json-ld.mjs 195 bytes (195B) 201 bytes (201B) -2.98%: -6 bytes (-6B)

ngx-meta-open-graph.mjs 804 bytes (804B) 870 bytes (870B) -7.58%: -66 bytes (-66B)

ngx-meta-routing.mjs 379 bytes (379B) 379 bytes (379B) No change

ngx-meta-standard.mjs 739 bytes (739B) 808 bytes (808B) -8.53%: -69 bytes (-69B)

ngx-meta-twitter-card.mjs 470 bytes (470B) 448 bytes (448B) 4.91%: 22 bytes (22B)

Total 5996 bytes (5.9KiB) 6173 bytes (6.1KiB) -2.86%: -177 bytes (-177B)

What is happening in there? When making the predictions, comparisons were done with Angular v18. Assumed something similar would happen for older versions. But turns out it doesn't! Guess everyday you learn something new.

In Angular v18, observed that due to the arrow functions introduced, some extra bytes are added to the bundle:

var qK=vn()     // before
var qK=()=>vn() // after

Hence the increase in size due to adding ()=>. Same seems to happen in v17

But in Angular v15/16 seems that something else happens! After investigating a bit by comparing formatted versions of bundles before and after the change, seems the reason is some kind of optimization. Instead of first declaring the provider and then using it, the provider is inlined where used. Hence no need to declare something to later use it. That would explain the reduction in bundle size.

Btw, these bundle size snapshots above will be useful to compare bundle size changes before and after introducing back deprecated, but pure const providers to avoid a breaking change (see #960 )

Also: - Move types to the `types` directory - Rename provider to make it a bit more specific

davidlj95 · 2024-11-21T10:24:46Z

After adding back const providers, seems that bundle size for Angular v15/16 is almost the same. 2 bytes less to be exact.

However, for Angular v17/18 it went from 162 extra bytes to 242 extra bytes. Hmmm. Taking a look to see if those const providers are still there!

davidlj95 · 2024-11-21T10:50:37Z

Seems that it's mainly because var is added before each function declaration. Whilst before, var was used for many variables. For instance: var OPEN_GRAPH_DESCRIPTION_METADATA_PROVIDER=provideOpenGraph(...),OPEN_GRAPH_IMAGE_METADATA_PROVIDER,....

var -> 4 bytes. Plus the extra ()=>: 4 bytes.

Let's analyze the Open Graph module. There are 11 metadata providers in Open Graph. So 88 bytes for that reason. However seems first provider of each kind (basic / optional and profile) is actually added in same var declaration. So 8 bytes less in there. 80 bytes.

Then, adding up the extra () for each call to the function provider in the module providers: 2*11=22 bytes. Which sum up to 102 bytes, the reported bundle size increase in Open Graph module.

As expected, old consts do not appear in the bundle. When they get removed from the bundle after some time being deprecated, seems that we'll be able to get rid of those extra bytes then.

davidlj95 mentioned this pull request Oct 28, 2024

feat: add migration schematic for function-based providers #1005

Merged

davidlj95 added the preview docs Enables previewing docs in a PR label Oct 29, 2024

github-actions bot deployed to ngx-meta (Preview) October 29, 2024 16:02 View deployment

github-actions bot deployed to ngx-meta (Preview) October 29, 2024 16:13 View deployment

davidlj95 force-pushed the stacked/feat-add-tree-shakeable-manager-providers branch from 8d79461 to 1069d4e Compare October 31, 2024 14:56

github-actions bot deployed to ngx-meta (Preview) October 31, 2024 15:01 View deployment

davidlj95 mentioned this pull request Oct 31, 2024

docs: add migration guide for const to function manager providers #1013

Merged

davidlj95 force-pushed the stacked/feat-add-tree-shakeable-manager-providers branch from 1069d4e to 1c90565 Compare November 20, 2024 18:32

github-actions bot deployed to ngx-meta (Preview) November 20, 2024 18:36 View deployment

davidlj95 force-pushed the stacked/feat-add-tree-shakeable-manager-providers branch from 1c90565 to ac10dd7 Compare November 20, 2024 19:44

github-actions bot deployed to ngx-meta (Preview) November 20, 2024 19:48 View deployment

davidlj95 mentioned this pull request Nov 20, 2024

refactor: return generic Provider type for providers #1045

Merged

davidlj95 force-pushed the stacked/feat-add-tree-shakeable-manager-providers branch from ac10dd7 to 67eb5e5 Compare November 20, 2024 20:21

github-actions bot deployed to ngx-meta (Preview) November 20, 2024 20:26 View deployment

davidlj95 added 9 commits November 21, 2024 11:12

refactor: turn Open Graph providers into tree-shakeable ones

811d631

refactor: turn Open Graph profile providers into tree-shakeable

cfaa55b

refactor: turn JSON-LD providers into tree-shakeable ones

bede086

Also: - Move types to the `types` directory - Rename provider to make it a bit more specific

refactor: turn standard providers into tree-shakeable ones

e73d4b0

refactor: turn Twitter Card providers into tree-shakeable ones

d98eaec

refactor: rename provide json-ld file

c97a86f

refactor: hide JSON-LD provider

32675cd

feat: add pure but deprecated Open Graph const providers

28e61f2

feat: add pure but deprecated Open Graph profile const providers

46b1bf7

davidlj95 added 3 commits November 21, 2024 11:12

feat: add pure but deprecated JSON-LD const provider

e343463

feat: add pure but deprecated standard const providers

32e98f5

feat: add pure but deprecated Twitter Card const providers

7dd298b

davidlj95 force-pushed the stacked/feat-add-tree-shakeable-manager-providers branch from 67eb5e5 to 7dd298b Compare November 21, 2024 10:12

github-actions bot deployed to ngx-meta (Preview) November 21, 2024 10:17 View deployment

davidlj95 marked this pull request as ready for review November 21, 2024 10:51

davidlj95 merged commit 7d91ee6 into main Nov 21, 2024
35 checks passed

davidlj95 deleted the stacked/feat-add-tree-shakeable-manager-providers branch November 21, 2024 11:10

davidlj95 changed the title ~~feat: add tree shakeable manager providers~~ feat: add function-based manager providers Nov 21, 2024

davidlj95 added a commit that referenced this pull request Nov 21, 2024

feat: add function-based manager providers [skip release] (#1004)

2276c9f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add function-based manager providers #1004

feat: add function-based manager providers #1004

davidlj95 commented Oct 28, 2024 •

edited

Loading

davidlj95 commented Oct 28, 2024 •

edited

Loading

codecov bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

davidlj95 commented Nov 20, 2024

📦 Bundle size (Angular v17)

📦 Bundle size (Angular v18)

📦 Bundle size (Angular v15)

📦 Bundle size (Angular v16)

davidlj95 commented Nov 21, 2024

davidlj95 commented Nov 21, 2024

feat: add function-based manager providers #1004

feat: add function-based manager providers #1004

Conversation

davidlj95 commented Oct 28, 2024 • edited Loading

Issue or need

Proposed changes

Quick reminders

davidlj95 commented Oct 28, 2024 • edited Loading

codecov bot commented Oct 28, 2024 • edited Loading

Codecov Report

github-actions bot commented Oct 28, 2024 • edited Loading

📦 Bundle size (Angular v15)

github-actions bot commented Oct 28, 2024 • edited Loading

📦 Bundle size (Angular v17)

github-actions bot commented Oct 28, 2024 • edited Loading

📦 Bundle size (Angular v16)

github-actions bot commented Oct 28, 2024 • edited Loading

📦 Bundle size (Angular v18)

davidlj95 commented Nov 20, 2024

Context

Bundle size weird changes

📦 Bundle size (Angular v17)

📦 Bundle size (Angular v18)

📦 Bundle size (Angular v15)

📦 Bundle size (Angular v16)

davidlj95 commented Nov 21, 2024

davidlj95 commented Nov 21, 2024

davidlj95 commented Oct 28, 2024 •

edited

Loading

davidlj95 commented Oct 28, 2024 •

edited

Loading

codecov bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading