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(slotted): add slotted decorator #1735

Merged
merged 16 commits into from Apr 12, 2023
Merged

feat(slotted): add slotted decorator #1735

merged 16 commits into from Apr 12, 2023

Conversation

bigopon
Copy link
Member

@bigopon bigopon commented Apr 9, 2023

Pull Request

πŸ“– Description

At the moment, there's not a way to listen to changes of the projection within an <au-slot/> element. This leads to the inability to have similar pattern like the @children deco for <au-slot/>, and sometimes one needs to resolve to some complex query with @children to achieve the same outcome.

Example code:
Using @slotted decorator

export class MyCard {
  @slotted('div') divs
}

Using slotchange binding on <au-slot>:

<au-slot slotchange.bind="(name, nodes) => ....">

This PR:

  • Adds the capability for <au-slot/> to watch, capture and notify changes of its projection.
    • with @slotted decorator
    • with slotchange binding
  • Adds doc for @children decorator
  • Adds doc for @slotted decorator

Resolves #1694

πŸ‘©β€πŸ’» Reviewer Notes

  • @slotted decorator will add a ILifecycleHooks dependency to the metadata associated with a class, and upon resolving, will provide the infrastructure to hook with <au-slot/> for change observation and notifcation

πŸ“‘ Test Plan

  • initial rendering
  • initial rendering of multiple slots that have elements matching the @slotted query
  • mutation of a single slot
  • mutation of multiple slots that have elements matching the @slotted query
  • mutiple @slotted working together

@Sayan751 @fkleuver @brandonseydel

Doc can be temporarily viewed here

@bigopon bigopon added the topic: au-slot au-slot related issues label Apr 9, 2023
Copy link
Contributor

@Sayan751 Sayan751 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bigopon Great changes! Left some comments regarding some small stuffs and tests.

@bigopon bigopon changed the title feat(slotted): add slotted decorator WIP feat(slotted): add slotted decorator Apr 11, 2023
@bigopon bigopon merged commit 8cf87af into master Apr 12, 2023
5 of 6 checks passed
@bigopon bigopon deleted the feat/slotted-deco branch April 12, 2023 01:45
AureliaEffect pushed a commit that referenced this pull request Apr 13, 2023
2.0.0-beta.4 (2023-04-13)

**Features:**

* **debounce-throttle:** flush via signals (#1739) ([af238a9](af238a9))
* **slotted:** add slotted decorator, slotchange bindable for au-slot (#1735) ([8cf87af](8cf87af))
* **router-lite:** extended support for ../ prefix, activeClass router configuration (#1733) ([bd18fde](bd18fde))
* **router-lite:** non-string support for fallback (#1730) ([59da952](59da952))
* **vite-plugin:** add vite plugin (#1726) ([564e533](564e533))
* **router-lite:** ce aliases as configured route (#1723) ([2b7f9fc](2b7f9fc))
* **router-lite:** transitionplan as nav opt ([7905d98](7905d98))

**Bug Fixes:**

* **repeat:** fix mismatchedLengthError on assigning an array with duplicate primitive values (#1737) ([cf60ac8](cf60ac8))
* **vite-plugin:** optionally resolve alias, add preliminary doc (#1731) ([3f37f8d](3f37f8d))
* **select:** insensitive multiple.bind order (#1727) ([c8d912f](c8d912f))
* **ci:** fix vite build in ci, upgrade chromedriver ([564e533](564e533))
* **proxy-observation:** prevent proxies from being wrapped in proxies again (#1716) ([7792e9c](7792e9c))

**Refactorings:**

* **children:** remove children observers from custom element def, make children deco as a hook (#1732) ([5bde983](5bde983))
* **all:** ignore dev message coverage ([5bde983](5bde983))
* **router-lite:** routable fallback ([59da952](59da952))
* **platform:** remove unnecessary properties on PLATFORM (#1722) ([7cd77ad](7cd77ad))
* **router-lite:** route definition configuration ([eba6d61](eba6d61))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: au-slot au-slot related issues
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@children decorator is not described in docs
2 participants