feat(template): introduce rxChunk #1380

hoebbelsB · Jul 25, 2022

ChunkDirective

This PR introduces the *rxChunk structural directive.

the *rxChunk directive serves as a convenient way for dividing template work into chunks.
Applied to an element, it will schedule a task with the given RxRenderStrategy in order to postpone the template creation of this element.

closes #1802

PR Checklist

implementation
demo
unit tests
docs (jsdocs)

Features of `*rxChunk`

lightweight alternative to *rxLet="[]"
renderCallback
no value binding
no context variables
zone agnostic
suspense template

nx-cloud · Jul 25, 2022

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b3c6d22. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 1 target

nx build docs

Sent with 💌 from NxCloud.

Karnaukhov-kh

Hi @hoebbelsB really like the idea. Looks super interesting!

Karnaukhov-kh · Jul 25, 2022

libs/template/chunk/src/lib/chunk.directive.ts

+   * @param {NextObserver<void>} renderCallback
+   */
+  @Input('rxChunkRenderCallback')
+  set renderCallback(renderCallback: NextObserver<void>) {


Is it possible to use not only subjects but also just a function? I know it's more like a general question for render callbacks but would it worth the try?

I like the idea, I would even more like to just have an @Output. But it looks like it's not supported, at least for the * syntax. angular/angular#12121

Karnaukhov-kh · Jul 25, 2022

libs/template/chunk/src/lib/chunk.directive.ts

+   *
+   * @param { RxStrategyNames<string> } strategy
+   */
+  @Input('rxChunk') strategy = this.strategyProvider.primaryStrategy;


Is it planned to work with not concurrent strategies?

sure, but why would u? it basically makes the rxChunk do nothing useful anymore :D

Yes, that's the thing. Can we type this input to RxConcurrentStrategyNames?

We have to support all Strategien. Other strategies then concurrent will have an effect definitely. U could e.g. use 'noop' strategy when out of viewport

There is a need to support all strategies. If you want to change the rendering strategy conditionally, then this is necessary.

And it makes sense in many cases to switch the strategies based on conditions like first render and other things which may affect CLS

libs/template/chunk/src/lib/tests/chunk.directive.spec.ts

edbzn · Aug 5, 2022

@hoebbelsB shouldn't we wait for the first stable release before introducing new elements?

BioPhoton · Aug 29, 2022

As not all strategies chunk let's call it rxTemplate?

codecov · Sep 12, 2022

Codecov Report

Attention: Patch coverage is 88.46154% with 3 lines in your changes missing coverage. Please review.

Project coverage is 85.14%. Comparing base (cbaa94d) to head (dc48688).
Report is 267 commits behind head on main.

❗ Current head dc48688 differs from pull request most recent head 28e3c1e

Please upload reports for the commit 28e3c1e to get more accurate results.

Files with missing lines	Patch %	Lines
libs/template/chunk/src/lib/chunk.directive.ts	86.95%	0 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1380      +/-   ##
==========================================
+ Coverage   82.40%   85.14%   +2.74%     
==========================================
  Files         107       20      -87     
  Lines        2251      404    -1847     
  Branches      393       56     -337     
==========================================
- Hits         1855      344    -1511     
+ Misses        333       34     -299     
+ Partials       63       26      -37

Flag	Coverage Δ
cdk	`?`
state	`?`
template	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
libs/template/chunk/src/lib/chunk.module.ts	`100.00% <100.00%> (ø)`
libs/template/chunk/src/lib/chunk.directive.ts	`86.95% <86.95%> (ø)`

... and 106 files with indirect coverage changes

ChristopherPHolder · Apr 2, 2024

Hi, the current workaround for this is to do *rxLet="[]"

Which from anyone who is not aware of the pattern makes 0 sense.

Is there anything blocking the issue?

Is it only the name that's blocking?

*rxChunk - *rxTemplate - *rxRender

AdrianRomanski · Nov 9, 2024

@Karnaukhov-kh @hoebbelsB Everything is looking solid :)

*rxChunk is best name in my opinion - referring to Christopher last comment.

That feature have a great marketing potential, to be announced or either be shown in a blog post.
Lets go and merge it :D

ChristopherPHolder · Nov 9, 2024

@Karnaukhov-kh @hoebbelsB @AdrianRomanski

Just noticed that this MR has been open since before standalone 😂

I would be happy to clean that up but i guess its kind of clear that there is not plans to merge this?

nx-cloud · Nov 12, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 28e3c1e. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 3 targets

Sent with 💌 from NxCloud.

eneajaho · Nov 12, 2024

libs/template/chunk/src/lib/chunk.directive.ts

+   *
+   * @param { boolean } patchZone
+   */
+  @Input('rxChunkPatchZone') patchZone =


Do we still want this one to be at input level, instead of having it at the provider level?

well, it's anyway on provider level. I guess we can get rid of it

we could get rid of it, yeah

RxChunk is a shortcut for `*rxLet="[]"`. It also has the ability render a suspense view as long the actual view isn't rendered yet.

hoebbelsB requested review from BioPhoton, Karnaukhov-kh and edbzn July 25, 2022 15:24

github-actions bot added the </> Template @rx-angular/template related label Jul 25, 2022

Karnaukhov-kh approved these changes Jul 25, 2022

View reviewed changes

edbzn approved these changes Jul 25, 2022

View reviewed changes

BioPhoton added the Backlog 🧊 label Jan 11, 2023

Karnaukhov-kh mentioned this pull request Nov 5, 2024

Feature rxChunk #1802

Open

hoebbelsB force-pushed the feat/chunk-directive branch from b3c6d22 to abf550a Compare November 12, 2024 09:12

hoebbelsB force-pushed the feat/chunk-directive branch 2 times, most recently from 97bbe4d to d8fdf08 Compare November 12, 2024 11:40

eneajaho reviewed Nov 12, 2024

View reviewed changes

github-actions bot added the 📚 Docs Web Documentation hosted on github pages label Nov 12, 2024

hoebbelsB force-pushed the feat/chunk-directive branch from 7244611 to 7045d63 Compare November 12, 2024 23:40

hoebbelsB added 2 commits November 13, 2024 00:48

feat(template): introduce rxChunk directive

8882303

RxChunk is a shortcut for `*rxLet="[]"`. It also has the ability render a suspense view as long the actual view isn't rendered yet.

feat(demos): implement rxChunk demo

28e3c1e

hoebbelsB force-pushed the feat/chunk-directive branch from 7045d63 to 28e3c1e Compare November 12, 2024 23:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(template): introduce rxChunk #1380

feat(template): introduce rxChunk #1380

hoebbelsB commented Jul 25, 2022 •

edited

Loading

nx-cloud bot commented Jul 25, 2022 •

edited

Loading

Karnaukhov-kh left a comment

Karnaukhov-kh Jul 25, 2022

hoebbelsB Jul 25, 2022

Karnaukhov-kh Jul 25, 2022

hoebbelsB Jul 25, 2022

Karnaukhov-kh Jul 26, 2022

BioPhoton Sep 26, 2022

ChristopherPHolder Apr 2, 2024

edbzn commented Aug 5, 2022

BioPhoton commented Aug 29, 2022

codecov bot commented Sep 12, 2022 •

edited

Loading

ChristopherPHolder commented Apr 2, 2024

AdrianRomanski commented Nov 9, 2024

ChristopherPHolder commented Nov 9, 2024

nx-cloud bot commented Nov 12, 2024 •

edited

Loading

eneajaho Nov 12, 2024

hoebbelsB Nov 12, 2024

hoebbelsB Nov 12, 2024

Search code, repositories, users, issues, pull requests...

feat(template): introduce rxChunk #1380

Are you sure you want to change the base?

feat(template): introduce rxChunk #1380

Conversation

hoebbelsB commented Jul 25, 2022 • edited Loading

ChunkDirective

PR Checklist

Features of *rxChunk

nx-cloud bot commented Jul 25, 2022 • edited Loading

☁️ Nx Cloud Report

Karnaukhov-kh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

edbzn commented Aug 5, 2022

BioPhoton commented Aug 29, 2022

codecov bot commented Sep 12, 2022 • edited Loading

Codecov Report

ChristopherPHolder commented Apr 2, 2024

AdrianRomanski commented Nov 9, 2024

ChristopherPHolder commented Nov 9, 2024

nx-cloud bot commented Nov 12, 2024 • edited Loading

☁️ Nx Cloud Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoebbelsB commented Jul 25, 2022 •

edited

Loading

Features of `*rxChunk`

nx-cloud bot commented Jul 25, 2022 •

edited

Loading

codecov bot commented Sep 12, 2022 •

edited

Loading

nx-cloud bot commented Nov 12, 2024 •

edited

Loading