Last active
December 23, 2019 16:14
-
-
Save buschtoens/50f6f1741ec46d5eb2dabcbad726ccde to your computer and use it in GitHub Desktop.
Different potential solutions for templateless & renderless "provider" components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@glimmer/component'; | |
import { setComponentTemplate } from '@ember/component'; | |
import { action } from '@ember/object'; | |
import { hbs } from 'ember-cli-htmlbars'; | |
export default setComponentTemplate( | |
hbs` | |
{{~yield | |
(hash | |
user=this.user | |
login=this.authenticate | |
logout=this.logout | |
) | |
this.isLoggedIn | |
~}} | |
`, | |
class AuthProviderComponent from Glimmer { | |
@tracked user?: User; | |
// This only exists to showcase passing more than one positional argument to `{{yield}}`. | |
get isLoggedIn() { | |
return Boolean(this.user); | |
} | |
// Notice the alias of `login=authenticate`. | |
@action | |
authenticate(username: string, password: string): Promise<void>; | |
@action | |
logout(): Promise<void>; | |
} | |
) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component, { yield } from '@glimmer/component'; | |
import { action } from '@ember/object'; | |
import { hbs } from 'ember-cli-htmlbars'; | |
type YieldDecoratorOptions = { position?: number; asIs: true } | |
| { position?: number; as?: string }; | |
export default class AuthProviderComponent from Glimmer { | |
@yield | |
@tracked user?: User; | |
@yield({ position: 1, asIs: true }) | |
get isLoggedIn() { | |
return Boolean(this.user); | |
} | |
@yield({ as: 'login' }) | |
@action | |
authenticate(username: string, password: string): Promise<void>; | |
@yield | |
@action | |
logout(): Promise<void>; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component, { YIELD } from '@glimmer/component'; | |
import { action } from '@ember/object'; | |
import { hbs } from 'ember-cli-htmlbars'; | |
export default class AuthProviderComponent from Glimmer { | |
@tracked user?: User; | |
// This only exists to showcase passing more than one positional argument to `{{yield}}`. | |
get isLoggedIn() { | |
return Boolean(this.user); | |
} | |
// Notice the alias of `login=authenticate`. | |
@action | |
authenticate(username: string, password: string): Promise<void>; | |
@action | |
logout(): Promise<void>; | |
get [YIELD]() { | |
return [ | |
{ user: this.user, login: this.authenticate, logout: this.logout }, | |
this.isLoggedIn | |
]; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think the easiest to comprehend API is the
[YIELD]
symbol.