feat(targets): Targets for navigable, externally injected content

[zetlen]

Description

• VeniaUI has an apolloLink target, exposing the already composable concept of Apollo Links to PWA Studio extensions
• VeniaUI has a navItems target, exposing the main navigation menu in the same way that routes exposes the routing table

This draft PR is to enable https://github.com/magento-research/pwa-studio-target-experiments/tree/master/packages/contentful-blog though it should be seriously considered as new API.

Acceptance

Verification Stakeholders

Community!

Verification Steps

Follow the walkthrough directions here for "contentful-blog"

Screenshots / Screen Captures (if appropriate)

Checklist

• I have added tests to cover my changes, if necessary.

• I have updated the documentation accordingly, if necessary.

[PWAStudioBot]

	Fails
🚫	No linked issue found. Please link a relevant open issue by adding the text "closes #<issue_number>" or "closes JIRA-<issue_number>" in your PR.
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).

Generated by 🚫 dangerJS against 5d72669

[devops-pwa-codebuild]

Performance Test Results

The following fails have been reported by WebpageTest. These numbers indicates a possible performance issue with the PR which requires further manual testing to validate.

https://pr-2461.pwa-venia.com : LH Performance Expected 0.85 Actual 0.57, LH Best Practices Expected 1 Actual 0.92
https://pr-2461.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.33, LH Best Practices Expected 1 Actual 0.92
https://pr-2461.pwa-venia.com/valeria-two-layer-tank.html : LH Performance Expected 0.8 Actual 0.48, LH Accessibility Expected 0.9 Actual 0.89, LH Best Practices Expected 1 Actual 0.92

[fooman]

seems to bring back changes from https://github.com/magento/pwa-studio/pull/2355/files

[fooman]

Can confirm that the navItems target works for me by utilising the local-intercept file. One side note any changes to venia-concept files should probably get a special shout-out for upgrades as the apolloLink related parts will require manual merging for anyone having started their project via create-pwa.

[fooman]

@Property {string} to - Destination (href) of the link.

Seems slightly inaccurate, when using a full url it prefixes the given href with the current route. So this

function localIntercept(targets) {
    targets.of('@magento/venia-ui').navItems.tap(navItems => {
        navItems.push({
            name: 'Blog',
            to: '/blog/'
        });
        navItems.push({
            name: 'PR',
            to: 'https://github.com/magento/pwa-studio/pull/2461'
        });

        return navItems;
    })
}

becomes

<ul>
    <li className="linkTree-item-154"><a className="linkTree-link-2Hx"
                                         href="/blog/https://github.com/magento/pwa-studio/pull/2461"><span
        className="linkTree-text-1qw">PR</span></a></li>
    <li className="linkTree-item-154"><a aria-current="page"
                                         className="linkTree-link-2Hx linkTree-active-rWP linkTree-link-2Hx"
                                         href="/blog/"><span className="linkTree-text-1qw">Blog</span></a></li>
</ul>

when on the /blog page or /https://github.com/magento/pwa-studio/pull/2461 when on the homepage.

Also noted the order of the items is opposite to what I would have anticipated, ie last one is shown first.

[larsroettig]

@zetlen should be solved with new target API lets mark as draw or close it

[larsroettig]

From my point of we close this is very simple with new API to inject nav items.
@davemacaulay currently I also don't see real benefit define this for 3rd party