feat(targets): Add target for editing UPWARD definitions (DRAFT)

[zetlen]

Description

• Add a builtin Target (i.e. a target declared by Buildpack) for convenient access to UPWARD logic at build time.

Currently, UPWARD is extensible via a very simple "shallow merge" behavior. In Webpack config, in the special flags, you can set upward: true for a package (e.g. @magento/venia-ui) to make Buildpack find an upward.yml in that package and merge it into the final UPWARD definition for the project.

This doesn't permit more sophisticated UPWARD transformations, which could get real real interesting.

It's possible to use low-level Webpack access to find and modify the UPWARD definition, but it's both inefficient and verbose. Here is an example of such an implementation.

With the transformUpward Target implemented in this PR, we can do the same thing as the file above, but much prettier:

const DEF_NAME = 'pwaExperimentContentSecurityPolicy';

module.exports = targets => {
    const builtins = targets.of('@magento/pwa-buildpack');

    builtins.specialFeatures.tap(features => {
        features[targets.name] = { upward: true };
    });

    builtins.transformUpward.tapPromise(async defs => {
        if (!defs[DEF_NAME]) {
            throw new Error(
                `${
                    targets.name
                } could not find its own definition in the emitted upward.yml`
            );
        }

        definitions.veniaAppShell.inline.headers.inline[
            'Content-Security-Policy'
        ] = DEF_NAME;
    });
};

Related Issue

None. Do not merge yet: leave this PR in draft as an example of a PR to support a desired target.

Acceptance

Verification Stakeholders

Community!

Verification Steps

1. Clone the https://github.com/magento-research/pwa-studio-target-experiments/ repository in a sibling directory to this branch.
2. In that repository root, run yarn and then yarn studiolink </path/to/pwa-studio-branch>
3. In that repo root, edit packages/upward-csp/package.json and change "intercept": "./intercept-upward-file" to "intercept": "./intercept-upward-target".
4. In your PWA Studio repo run: BUILDBUS_DEPS_ADDITIONAL=@magento-research/pwa-upward-csp yarn run build && yarn run stage:venia
5. Inspect the response headers for HTML documents in the staging server. Confirm that the CSP is there!

[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.
🚫	Unit tests in the following files did not pass 😔. All tests must pass before this PR can be merged packages/pwa-buildpack/lib/WebpackTools/plugins/__tests__/UpwardIncludePlugin.spec.js
🚫	A version label is required. A maintainer must add one.
🚫	node` failed.

	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).

Log

ERROR ON TASK: unitTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against b83ef7b

[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-2459.pwa-venia.com : LH Performance Expected 0.85 Actual 0.53, LH Best Practices Expected 1 Actual 0.92
https://pr-2459.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.34, LH Best Practices Expected 1 Actual 0.92
https://pr-2459.pwa-venia.com/valeria-two-layer-tank.html : LH Performance Expected 0.8 Actual 0.49, LH Accessibility Expected 0.9 Actual 0.89, LH Best Practices Expected 1 Actual 0.92

[fooman]

Can confirm that adding the CSP policy target works and "successfully" prevents the page from loading (I tested in development mode where hot reloading uses the forbidden unsafe-eval).

A few minors:

• defs vs definitions
• I believe the conditional production vs dev is the wrong way around in the upward.yml file (it should initially show up in development rather than come as a surprise in production mode)
• I am not sure if this is intentional I used the DEBUG_CREATE_PROJECT and it no longer seems to add the yarn watch:venia script to packages.json but only yarn watch, if that was an intentional change the documentation here would need to be updated.

[fooman]

Which is all to say - would love to see this target implemented!

[tjwiebell]

This target was implemented in scope of #2548, closing this draft PR.