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

Convert `Outlet` from a HOC to a standard component with a render prop #63

Merged
merged 9 commits into from Aug 16, 2018

Conversation

Projects
None yet
3 participants
@agubler
Member

agubler commented Aug 13, 2018

Type: feature

The following has been addressed in the PR:

Description:

This changes the Outlet from a higher order component to a standard component with a render property. The render property is used to display content when a route matches providing more control over the nodes to render when an Outlet's route has been matched.

Having an Outlet as a HOC implies that it would be shared across the application (which generally they are not), adds complexity in it's usage by having to specify another interface for the properties that the Outlet can accept and has more boilerplate and indirection that if the Outlet is a standard widget.

render() {
    return v('div', [
        w(Outlet, { 
            id: 'outlet-name', 
            renderer: (matchDetails: MatchDetails) => {
                // match details contains the `matchType`, `params` and `queryParams`
                return v(MyWidget, { foo: 'bar', id: matchDetails.id });
            }
        })
    ]);
}

Resolves #60

Alternative to #24

@agubler agubler changed the title from Convert `Outlet` from a HOC to a standard component with a render prop to [WIP] Convert `Outlet` from a HOC to a standard component with a render prop Aug 13, 2018

@agubler agubler changed the title from [WIP] Convert `Outlet` from a HOC to a standard component with a render prop to Convert `Outlet` from a HOC to a standard component with a render prop Aug 13, 2018

key?: RegistryLabel;
mapParams?: MapParams;
}
export interface MatchDetails {

This comment has been minimized.

@agubler

agubler Aug 13, 2018

Member

Is OutletDetails a better name?

This comment has been minimized.

@tomdye

tomdye Aug 16, 2018

Member

I think MatchDetails is more appropriate as it's the details for the current match, not the outlet as a whole. Perhaps MatchProperties though?

This comment has been minimized.

@agubler

agubler Aug 16, 2018

Member

Don't want to overload properties

@agubler agubler referenced this pull request Aug 15, 2018

Closed

Functional API for `Outlet` HOC #24

3 of 3 tasks complete
return Boolean(value && (typeof value === 'string' || typeof value === 'function' || typeof value === 'symbol'));
export interface OutletProperties {
renderer: (matchDetails: MatchDetails) => DNode;
outlet: string;

This comment has been minimized.

@tomdye

tomdye Aug 16, 2018

Member

perhaps rename to id ?

export function isComponent<W extends WidgetBaseInterface>(value: any): value is Component<W> {
return Boolean(value && (typeof value === 'string' || typeof value === 'function' || typeof value === 'symbol'));
export interface OutletProperties {
renderer: (matchDetails: MatchDetails) => DNode;

This comment has been minimized.

@tomdye

tomdye Aug 16, 2018

Member

Can this not return an array of DNodes ?

This comment has been minimized.

@agubler

agubler Aug 16, 2018

Member

I think it should be able to.

@agubler agubler force-pushed the agubler:functional-outlet-as-widget branch from decc431 to d3877cb Aug 16, 2018

@tomdye

tomdye approved these changes Aug 16, 2018

agubler added some commits Aug 12, 2018

@agubler agubler force-pushed the agubler:functional-outlet-as-widget branch from 528be9f to 2e592b9 Aug 16, 2018

@agubler agubler merged commit b1a7ef5 into dojo:master Aug 16, 2018

4 checks passed

codecov/patch 100% of diff hit (target 96.62%)
Details
codecov/project 96.68% (+0.06%) compared to b8a3dd8
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
licence/cla Contributor License Agreement is signed.
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment