magento / pwa-studio

🛠Development tools to build, optimize and deploy Progressive Web Applications for Magento 2.

PWA Studio

Magento PWA Studio is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores.

Contributions

Are you interested in contributing to the PWA Studio project? Check out the community wiki to learn how to contribute to PWA Studio.

If you are looking for an issue to work on, visit our community backlog board and look at the Ready for Development column.

For more information about contributing to this repository, see the Contribution guide.

Useful links

PWA Studio documentation site - The best place to start learning about the tools and the technologies that PWA Studio provides. Here, you can learn PWA Studio concepts, find API reference docs, and read tutorials on how to use PWA Studio to create your own PWA storefront.

Here are some popular topics to help you get started:

• PWA Studio Overview - A high level overview of PWA Studio and what it provides to developers
• PWA Studio Beginner Guide
• Tools and libraries - A list of tools and libraries developers need to be familiar with to use PWA Studio
• PWA Studio fundamentals - A series of tutorials covering common storefront development tasks
• PWA Studio best Practices

Venia

Venia is a Magento PWA storefront created and powered by PWA Studio tools and libraries. Developers can use Venia as a reference storefront for their own projects or as a starting point for customization.

About this repository

To facilitate local development, testing, and versioning, PWA Studio is structured as a monorepo using Yarn Workspaces. Packages in this repository are independently published to NPM. Install individual packages as needed instead of installing the entire pwa-studio project as a dependency of your project.

Note: If you are installing the whole PWA Studio monorepo, please be aware that the project uses yarn workspaces and does not support npm install. Please use yarn install instead.

Packages

This repository includes the following packages:

• peregrine - A component library for adding logic to visual components
• venia-ui - A library of visual components for PWA storefront projects
• venia-concept - A concept storefront project built using PWA Studio tools
• pwa-buildpack - A tooling library to help with PWA storefront development
• upward-spec - UPWARD specification and test suite
• upward-js - A reference implementation of the UPWARD specification
• babel-preset-peregrine - A babel preset plugin that is required to use peregrine components
• graphql-cli-validate-magento-pwa-queries - A script to validate your project's GraphQL queries against a schema
• pwa-devdocs - Project source for the documentation site

If you have an issue that cannot be resolved, please create an issue.

PWA Studio UI Kit for Adobe XD

Adobe XD makes handoff between designers and engineers more efficient through easy-to-use collaboration tools. The PWA Studio UI Kit contains a collection of templates and components compatible with Adobe Commerce.

Join the conversation

If you have any project questions, concerns, or contribution ideas, join our #pwa slack channel!

Here you can find a public calendar with events that Magento PWA team runs with Community. You can also add that calendar to your calendar app to stay up to date with the changes and get notifications.

Community Maintainers

A community maintainer is a point of contact from the community approved by the Core Team to help with community outreach and project administration.

The following members are the community maintainers for this project:

Top Community Contributors

The PWA Studio project welcomes all codebase and documentation contributions. We would like to recognize the following community members for their efforts on improving the PWA Studio project in our latest release.

Author	Commits	Added Lines	Removed Lines	Avg. Files
Justin Conabree	94	15932	4837	7.117
Mikhaël Bois	46	7675	2000	12.226
Pankhuri Goel	28	11402	9343	13.606
Lars Roettig	15	2350	862	8.067
Pedro Chiossi	9	9063	7625	38.571
Allan Yanik	6	834	677	25
Sofia Hernandez	6	781	145	21
Oleksandr Krasko	2	193	1	4
Antoine Fontaine	1	44	45	14
Shikha Mishra	1	584	5	13

Last Updated: October 14, 2021

Source: statistic.magento.engineering

pwa-studio's Issues

Feature (Backend/PHP): Persistent/Queryable RootComponent selections in database

From @DrewML on May 8, 2018 18:19

Background

Within a React application, when using React to render the entire application, a developer will typically have 1 top-level "root" component for each individual route.

Within Magento PWA Studio, these root components are not coupled to a specific route. Instead, a RootComponent is written to be compatible with a specific type of route, but a store owner/developer/SI/etc can select which RootComponent to use for an individual route.

As an example, let's say a store has 2 RootComponents that are compatible with a basic product:

• ProductPage
• ProductPageLightningDeal

The owner of a store might want the ProductPage to be the default display for products. However, for specific products that are part of a "Lighting Deal," they may wish to render the ProductPageLightningDeal component instead, which augments the page for specific products with additional UI or functionality.

Front End Implementation

The front-end portion of this functionality is handled today with the MagentoRootComponentsPlugin for webpack. At the end of a successful build, a roots-manifest.json artifact is created:

{
    "CMS": {
        "chunkName": "CMS-73619b0cbfd0cfc58218.js",
        "rootChunkID": 4,
        "rootModuleID": 12,
        "type": "RootComponent",
        "description": "Basic CMS Page",
        "pageTypes": [
            "CMS_PAGE"
        ]
    },
    "Category": {
        "chunkName": "Category-2084432fb7e843420284.js",
        "rootChunkID": "Category",
        "rootModuleID": 85,
        "type": "RootComponent",
        "description": "Basic Category Page",
        "pageTypes": [
            "CATEGORY"
        ]
    },
    "Product": {
        "chunkName": "Product-687fc4347aa00ad4491a.js",
        "rootChunkID": 3,
        "rootModuleID": 1,
        "type": "RootComponent",
        "description": "Basic Product Page",
        "pageTypes": [
            "PRODUCT"
        ]
    }
}

The roots-manifest.json is included during a normal deployment of static assets to the Magento store. Since the Magento backend is not aware of this manifest currently, the PWA Studio (temporarily) reads the manifest during rendering, and chooses the first "matching" RootComponent to render (based on the listed pageTypes). However, the end goal is for the Magento backend to be a consumer of this artifact.

Backend

The backend work has yet to be completely scoped out, and has not been implemented. That's the purpose of this story 😸. The following pieces of work should be done as part of this story:

• A decision should be made about where in the database an association is made between a RootComponent and a routable entity (product/category/cms). Likely will be EAV attributes per @paliarush
• It should be possible to manually update the database to associate a RootComponent with a routable entity (no admin UI in the scope of this story)
• It should be possible to assign a default RootComponent to an entity type (product/category/cms) that is used when one is not specified for a specific component.
• The PWA module in this repo, when installed, should extend the urlResolver query in Magento 2.3's GraphQL implementation. The urlResolver query, after being extended, should make the following fields available for any valid URL, based on its RootComponent assignment:
  • chunkName
  • rootModuleID
  • rootChunkID

Copied from original issue: magento-research/venia-pwa-concept#61

RFC: Switch from `createElement` to the default pragma

From @DrewML on February 2, 2018 18:19

Edit: For those looking to contribute, the following changes need to be made:

1. Remove pragma here, and Babel will fall back to the default
2. Change createElement import in each file (ex: import { Component, createElement } from 'react';) to import React from 'react'; or import React, { Component } from 'react';
3. Submit a PR to Peregrine to make the same updates

---

Part of our reasoning for not using things like TS is that we didn't want to diverge too much from code people will see in examples.

Right now, we're over-writing Babel's pragma for React.createElement to just createElement. This is going to be surprising for people copy/pasting code from tutorials.

Proposing we go back to the default pragma.

Copied from original issue: magento-research/venia-pwa-concept#22

Data fetching and component to GraphQL API interfaces

From @ericerway on May 4, 2018 19:55

As a Magento developer learning React I want a clear and simple way to program my UI to interact with the Magento API including GraphQL.

AC

• Component can specify queries and fields for GraphQL server
• Data is fetch and delivered to component when rendered on page
• Example for documentation

Copied from original issue: magento-research/peregrine#34

Component data binding topic

From @jcalcaben on April 5, 2018 15:9

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for the Component data binding topic.

src/technologies/basic-concepts/component-data-binding/index.md

Expected Result:

Component data binding content exists and covers the following:

• What is data binding (in the context of a PWA)
• Differences between One-Time, One-Way, Two-Way data binding
• Why should data binding be used
• Examples provided using React components

Additional Information:

• https://www.accelebrate.com/blog/two-way-data-binding-angular-2-and-react/
• https://docs.angularjs.org/guide/databinding
• https://reactjs.org/docs/two-way-binding-helpers.html

Copied from original issue: magento-research/pwa-devdocs#9

[Documentation]: Loading and offline states topic

From @jcalcaben on April 5, 2018 17:18

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for the Loading and offline states topic.

src/technologies/basic-concepts/loading-offline-states/index.md

Expected Result:

Loading and offline states topic created and covers the following:

• What are loading and offline states
• How loading and offline states relate to service workers
• Describe the importance of network resiliency
• Describe use cases for having loading and offline states

Additional Information:

• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events
• https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0

Copied from original issue: magento-research/pwa-devdocs#13

Get dangerfile from before monorepo move working again

https://github.com/magento-research/pwa-studio/blob/a9ce84686db4991118dfa3da048edef2056ad592/packages/peregrine/dangerfile.js

Need to get the Danger running in the root of the project

Unit tests in venia can run against stale peregrine code

This issue is for the following packages:

[X] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-module

This issue is a:

[X] Bug
[ ] Feature suggestion
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version
Operating System + version
node.js version (node -v)
npm version (npm -v)

Description

Steps to Replicate

1. Run npm install in the root of the repository to bootstrap
2. Run rm -rf packages/peregrine/dist in the root of the repository
3. Run npm test in the root of the repository

Tests in venia-concept should fail with Cannot find module '@magento/peregrine' from 'foobar.js'. This means tests in venia-concept that consume @magento/peregrine are pulling in the last built version of the lib locally, which may not be up-to-date with the src files in @magento/peregrine.

Expected result:

Cross-package unit/integration tests always consume from src, not dist. The dist artifact should only ever be used for publishing to npm, and nothing else.

Cross-package unit/integration tests always consume from src, not dist.

Possible solutions:

Use Jest's configuration to re-write paths for libs in this monorepo, to ensure that:

1. Jest handles transpiling the src of the libs in this repo with Babel
2. Jest pulls files from src, rather than the dist it finds in the package's main entry in package.json.

PWADevServer should automatically detect EADDRINUSE port conflicts

From @zetlen on April 25, 2018 0:17

Right now, PWADevServer ensures unique domains per project only at provisioning time. It should also ensure unique ports at startup time.

Copied from original issue: magento-research/pwa-buildpack#25

Service worker topic

From @jcalcaben on April 5, 2018 18:43

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for Service worker topic.

src/technologies/basic-concepts/service-worker/index.md

Expected Result:

Service worker content exists and covers the following:

• What is a service worker
• Service worker features
• What roles does a service worker fulfill in a PWA
• Service worker registration
• Intelligent caching with service workers
• Code samples where appropriate

Additional Information:

• https://developers.google.com/web/ilt/pwa/introduction-to-service-worker
• https://techbeacon.com/how-use-service-workers-progressive-web-apps
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
• https://itnext.io/service-workers-your-first-step-towards-progressive-web-apps-pwa-e4e11d1a2e85

Copied from original issue: magento-research/pwa-devdocs#14

PWADevServer should be configurable to skip trust settings and hostfile update

From @zetlen on May 16, 2018 20:41

PWADevServer attempts to ensure OS-level trust of its managed SSL certificates, using @magento/devcert. There may be cases, especially in non-interactive build environments that still run development mode, where we want to skip trust settings.

PWADevServer also attempts to update the hostfile, which requires elevated permissions. This should also be skippable.

Steps to reproduce:

1. Add PWADevServer to a webpack.config file.
2. Run webpack in a non-interactive process.

Expected results: Dev mode initializes.
Actual results: Hangs forever during PWADevServer instantiation.

Copied from original issue: magento-research/pwa-buildpack#36

Implement UI components for Product Details

From @ericerway on May 23, 2018 16:17

As a developer, I want to create reusable components in Peregrine for the Product Details experience of Venia that can be used in other themes and pages for Magento 2.3+ with the PWA Studio.

Components include Page, Header, Title Bar, Image carousel, Add to wishlist, Share, Size selector, Color selector, Quantity selector, Quantity sync bar, Product description, Recommended carousel, Add to cart, Buy now / Buy with and footer.

AC
Development of related UI components (x15)
Testing and documentation (as appropriate)

Copied from original issue: magento-research/peregrine#39

CSS modules topic

From @jcalcaben on April 5, 2018 15:46

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for CSS modules topic.

src/technologies/basic-concepts/css-modules/index.md

Expected Result:

Content modules content exists and covers the following:

• What are CSS modules
• Why you should use CSS modules
• How do CSS modules work
• Code samples for CSS modules

Additional Information:

• https://css-tricks.com/css-modules-part-1-need/
• https://medium.com/front-end-developers/css-modules-solving-the-challenges-of-css-at-scale-85789980b04f
• https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/

Copied from original issue: magento-research/pwa-devdocs#11

Creating development instance of Magento 2 for PWA development

From @ericerway on May 4, 2018 20:8

As a developer I want a clear and working few step process to get development cycle and realtime updates.

AC

• Recommended means of creating dev instance of Magento
• Abridged getting started guide for Venia theme
• Beginning of dev cycle is unblocked for most recent versions of macOS 10 and Linux

Copied from original issue: magento-research/pwa-buildpack#31

Wrap all inserted Extension components in a ContainerChild for further targeting

From @DrewML on February 28, 2018 21:57

TODO work from a previous task. Right now, when an extension is injected into a container, the output looks roughly like:

import React from 'react';
import { ContainerChild } from '@magento/peregrine';
import _Extension from '/Some/abs/path.js';

function render() {
	return (
		<div data-mid="foo.bar">
			<ContainerChild
				id="foo.bar.child"
				render={() => <span>Hello World</span>}
			/>
			<_Extension />
		</div>
	);
}

The problem here is that, after _Extension is injected, there is no way for another module or extension to target this element.

Solution:
The configuration for insertBefore and insertAfter operations should require supplying a newChildID (can bikeshed name). The newChildID will be used for the id on a ContainerChild that will wrap the extension.

import React from 'react';
import { ContainerChild } from '@magento/peregrine';
import _Extension from '/Some/abs/path.js';

function render() {
	return (
		<div data-mid="foo.bar">
			<ContainerChild
				id="foo.bar.child"
				render={() => <span>Hello World</span>}
			/>
			<ContainerChild
				id="new.child.id.from.config"
				render={() => <_Extension />}
			/>
		</div>
	);
}

Copied from original issue: magento-research/pwa-buildpack#16

Add live GraphQL data via Apollo bindings to components [WIP]

From @ericerway on May 11, 2018 18:52

As a developer, I'd like to be able to specify my GraphQL queries on a per-component basis, so I do not need to think about orchestrating data fetching needs at an application level.

Acceptance Criteria:

• The venia-pwa-concept theme is setup with react-apollo's provider that allows components in the tree to specify queries to be fetched, based on suggesting implementation path in the react-apollo docs
• At least one component in the theme fetches live data through GraphQL, using Apollo Client's React bindings
• Basic documentation is provided specifying how to attach a query to a React component

Copied from original issue: magento-research/venia-pwa-concept#69

Buildpack should output the new dev URL at the end of the log

From @zetlen on May 26, 2018 7:3

This issue is a:

[x] Bug
[ ] Feature suggestion
[ ] Other

Description:

When Buildpack starts dev mode, it logs Webpack's chunks and pushes the actual generated URL too far up in the terminal to click.

Environment and steps to reproduce

OS: Any

Magento 2 version: Any

Other environment information: Buildpack

Steps to reproduce:

1. Run a Buildpack dev cycle (The npm start in Venia, for example).
2. Observe the terminal output obscuring the URL to click.

Expected result:

The URL displays prominently.

Possible solutions:

Configure webpack-dev-server log levels.

Additional information:

Copied from original issue: magento-research/pwa-buildpack#40

Make the "Loading" view configurable

From @zetlen on May 26, 2018 6:51

This issue is a:

[ ] Bug
[x] Feature suggestion
[ ] Other

Description:

MagentoRouter renders a hardcoded "Loading" view while it is resolving the route. This must be configurable by the developer.

Environment and steps to reproduce

OS: Any

Magento 2 version: Any

Steps to Reproduce:

1. Configure a PWA with Peregrine, Buildpack, and a Magento 2 store.
2. Launch the development server with npm start.
3. Observe the hardcoded and unstyled "Loading...".

Expected result:

A loading screen of your choosing while the URL resolves.

Possible solutions:

Currently, MagentoRouter is private. The Peregrine constructor imports and uses it directly as the child of the Redux Provider.

• We could separate the Router from Peregrine, and make a configuration option for "provider children", where the developer might supply a router in a render callback.

  • This makes Peregrine into essentially a thin wrapper around Redux.
  • Routing is fundamental to our architecture, so this seems wrong.

• We could separate MagentoRouter from the Peregrine implementation, expose it directly as a Peregrine component, and make a Peregrine config option for "router implementation", which the developer might supply in a render callback (or just a Router constructor which satisfies a certain prop interface!)

  • MagentoRouter could add a loadingView prop which takes a Component constructor
  • MagentoRouter could accept a loading view which takes a render callback, with props about loading progress

• We could leave Peregrine and MagentoRouter tightly coupled and thread the configuration for MagentoRouter through Peregrine's external API.

  • This would be simplest
  • This tightly couples Peregrine to Magento, which we wanted to avoid.

Additional information:

Copied from original issue: magento-research/peregrine#40

UX design and components for Checkout MVP in Venia

This issue is for the following packages:

[X] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-module
[ ] pwa-devdocs

This issue is a:

[ ] Bug
[ ] Feature suggestion
[ ] Documentation issue
[X] Other (Please Specify)

Environment

Question	Answer
Magento version
Operating System + version
node.js version (node -v)
npm version (npm -v)

Description

As a shopper, I want a fast and seamless checkout experience on Venia on my mobile and desktop device so that I can make purchases quickly and with confidence.

Expected result:

Early sketches and Venia design artifacts for checkout (as appropriate)
Documentation of component breakdown; MVP labels where needed
Feedback from internal/external to validate

Possible solutions:

Prototyping and discovery for Venia mini cart [SPIKE]

From @ericerway on May 4, 2018 20:33

As a developer I want to understand the components for the Venia mini cart so that they can be created for the reference theme.

AC
Displaying a list of mock products (modal or drawer)
Collaboration and Q&A with UX (as appropriate)

Copied from original issue: magento-research/peregrine#35

Track bundle/chunk sizes between PRs and master

From @DrewML on June 12, 2018 18:25

This issue is a:

[ ] Bug
[X] Feature
[ ] Other

Description:

Whenever a new Pull Request is opened, there should be automation in place that:

1. Runs a production build at the tip of the current branch
2. Collects the final sizes on disk of all assets (CSS/JS)
3. Adds a comment to the PR with the totals, and the increase or decrease from master.

This should be done using danger-js.

This story is critical to prevent big regressions in bundle size when accepting PRs.

Copied from original issue: magento-research/venia-pwa-concept#88

Performance patterns topic

From @jcalcaben on April 5, 2018 19:24

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for the Performance patterns topic

src/technologies/basic-concepts/performance-patterns/index.md

Expected Result:

Performance patterns content exists and covers the following:

• Common performance patterns for PWA
• PRPL pattern

Additional Information:

• https://developers.google.com/web/fundamentals/performance/prpl-pattern/

Copied from original issue: magento-research/pwa-devdocs#16

Clarification request on layout loader, communication and app shell

This issue is for the following packages:

[ ] venia-concept
[ X ] pwa-buildpack
[ ] peregrine
[ X ] pwa-module

This issue is a:

[ ] Bug
[ ] Feature suggestion
[ X ] Other: Clarification request

Description

I'd like some clarification on certain topics.

1. I watched the video and read the docs about the Magento Layout Loader. I understand that this API is in an early development stage and should be considered unstable. The docs say:

It gives Magento modules/extensions the ability to inject or remove content blocks in a layout without modifying theme source files.

But I don't really understand for what purpose this functionality will be used.

I guess what i'm asking is how are you planning to implement the communication between the PWA front-end and the Magento back-end for modules and extensions. At first I thought this communication would go through the GraphQL API, but I can't really see the purpose of the magento layout loader in this.

2. Why have you chosen to serve the app shell from the Magento back-end and not from the front-end? If you would generate the app shell with webpack, you could use webpack plugins. For example, you could use the HtmlWebpackPlugin for generating <script> tags:

This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.

I get that it is up to the users to implement such aspects the way they want, but maybe i don't see certain reasons why you chose this approach.

Expected result:

Possessing more knowledge.

Implement support module with WebAPI endpoint for development

From @ericerway on March 28, 2018 17:29

As a developer, I want to quickly and easily set up a PWA development environment connected to a Magento 2 instance.

Enable this quick setup with a Web API endpoint for communication between the Magento 2 backend configuration and the PWA developer tools.

AC

2. Web API endpoint for checking, and if necessary modifying, store configuration to the following requirements:

   • Magento is installed and responding
   • Magento version is within supported range specified in theme manifest
   • Storefront and admin are both HTTPS-only, with redirect-to-HTTPS enabled
   • TLS certificate is signed with SAN extensions
   • Static resource signing is disabled
   • SEO redirects are enabled
   • Template symlinking is allowed
   • Theme under development is installed and activated on the default store

3. Web API endpoint (or additional response data from the endpoint defined in (1) above) for providing the following values:

   • Configured base URLs
   • Static asset path for the active theme, variant, and locale
   • File system path to the folder or symbolic link for theme assets
   • TLS certificate and certificate authority in PEM format
   • Buildpack connector which consumes API endpoint to provision and confirm store configuration
   • Stretch: Layout updates to disable "Layout XML Update" fields in admin when PWA theme is
     active
   • Test coverage and documentation (as appropriate)

Copied from original issue: magento-research/venia-pwa-concept#41

Add Support for multiple types of connectors to Magento 2 instance

From @Jakhotiya on May 14, 2018 13:42

This repository doesn't work well without vagrant. We need to add support for trying out this code without needing vagrant. On my local I had to fix many url problems to get venia work.

I would like to help but can somebody point me in right direction

Copied from original issue: magento-research/venia-pwa-concept#70

When devServer launches, find and show example URLs in the store for supported RootComponent types

From @zetlen on June 10, 2018 1:59

This issue is a:

[ ] Bug
[x] Feature suggestion
[ ] Other

Description:

When setting up Venia, @paliarush observed that the store homepage launches by default, but we don't have CMS pages implemented.

We need Buildpack to note the supported page types when building the RootComponents manifest, and then ask the store for example URLs of each of those page types, and show them in a list in the console.

This will require a Web API endpoint which would be an addition to the other endpoints specified in venia-pwa-concept/41.

Environment and steps to reproduce

OS:

Magento 2 version:

Other environment information:

Steps to reproduce:

1. First Step
2. Second Step
3. Etc.

Expected result:

Possible solutions:

Additional information:

Copied from original issue: magento-research/pwa-buildpack#42

Application shell topic

From @jcalcaben on April 5, 2018 14:52

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for the Application shell topic.

src/technologies/basic-concepts/app-shell/index.md

Expected Result:

Application shell content exists and covers the following:

• What is an application shell architecture
• What benefits does an app shell provide
• How does an app shell work
• Code sample of a basic app shell

Additional Information:

• https://developers.google.com/web/fundamentals/architecture/app-shell
• https://www.applause.com/blog/application-shell-architecture/
• https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73

Copied from original issue: magento-research/pwa-devdocs#8

Root components and routing

From @jcalcaben on April 5, 2018 19:41

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for Root components and routing topic.

src/technologies/basic-concepts/root-components-routing/index.md

Expected Result:

Root component and routing content created and covers the following:

• What is a root component
• How is routing done in a PWA

Additional Information:

• https://reactjs.org/docs/rendering-elements.html

Copied from original issue: magento-research/pwa-devdocs#17

Update MagentoRootComponentsPlugin to new Tapable system in webpack 4

From @DrewML on March 8, 2018 19:19

Copied from original issue: magento-research/pwa-buildpack#19

Critical path topic

From @jcalcaben on April 5, 2018 20:25

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for the Critical path topic.

src/technologies/basic-concepts/critical-path/index.md

Expected Result:

Critical path content exists and covers the following:

• What is a critical rendering path
• Methods for optimizing the critical path

Additional Information:

• https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Copied from original issue: magento-research/pwa-devdocs#18

Implement integrated payment experience (PaymentRequest) for Venia

From @ericerway on May 23, 2018 14:1

As a shopper, I want a native Apple or Google payment experience (PaymentRequest) so that I can quickly checkout using saved payment and shipping preferences.

---

AC

Copied from original issue: magento-research/venia-pwa-concept#75

Discovery and design for Checkout experience [SPIKE]

From @ericerway on May 21, 2018 14:17

As a shopper, I want a fast and seamless checkout experience on Venia on my mobile and desktop device so that I can make purchases quickly and with confidence.

AC
Early prototyping through Invision Sketches (as appropriate)
Feedback from internal/external to validate
Updated documentation

Copied from original issue: magento-research/venia-pwa-concept#74

Uncaught ReferenceError: webpackJsonp is not defined

From @jissereitsma on May 28, 2018 15:8

This issue is a:

[X] Bug
[ ] Feature suggestion
[ ] Other

I'm not sure if this is specific to my environment (Linux Ubuntu, NPM 5.3.0, Node 8.10.0) but I was getting this error Uncaught ReferenceError: webpackJsonp is not defined which is commonly caused when app files are loaded before the vendor file. I fixed this by modifying my root.phtml to look as follows:

    <div id="root"></div>
    <script src="/pub/static/frontend/Magento/venia/en_US/js/vendor.js"></script>
    <script src="/pub/static/frontend/Magento/venia/en_US/js/client.js"></script>

Anyone else bumping into this?

Copied from original issue: magento-research/venia-pwa-concept#79

Overview content for pwa-studio monorepo wiki

This issue is for the following packages:

[ ] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-module
[X] pwa-devdocs

This issue is a:

[ ] Bug
[X] Feature suggestion
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version
Operating System + version
node.js version (node -v)
npm version (npm -v)

Description

Creation and review of Overview and Approach level content for pwa-studio content with migration to monorepo in Github wiki format. Goal is for any contributor to review this in Github and know exactly how to get started, the purpose and status of the project and other relevant links. Content will likely be a light version of what we have in pwa-docs currently but needs to be shown in Github.

Example can be found with graphql-ce: https://github.com/magento/graphql-ce/wiki

Expected result:

Possible solutions:

Deploy styleguide for PRs and master

This issue is for the following packages:

[ ] venia-concept
[ ] pwa-buildpack
[X] peregrine
[ ] pwa-module
[ ] pwa-devdocs

This issue is a:

[ ] Bug
[X] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version
Operating System + version
node.js version (node -v)
npm version (npm -v)

Description

In the old peregrine repo, we used to deploy the styleguide and link to it with any change in a PR. We're no longer doing that in the monorepo.

The problem is, we used to leverage CircleCI's artifacts feature, which had a predictable URL based on the branch/PR. This meant we could auto-link it in a PR. We can no longer do that due to a bug in CircleCI 2.0.

I'm proposing that we use Netlify's free Open Source plan to deploy to. This is what Gatsby uses to deploy and show previews in PRs.

Expected result:

Any change to Peregrine triggers a new version of the Peregrine styleguide to be deployed and linked in a PR.

Possible solutions:

Deploy to netlify in the DangerCI run.

Upgrade to webpack 4

From @DrewML on May 18, 2018 15:32

We're avoiding merging magento-research/pwa-buildpack#21 until this project has been upgraded. This will likely require upgrading some plugins and modifying the config in webpack.config.js.

Acceptance Criteria:

• Project builds and runs on the latest release of webpack 4.

Copied from original issue: magento-research/venia-pwa-concept#72

Strip propTypes in Production builds

From @DrewML on June 12, 2018 18:12

This issue is a:

[ ] Bug
[X] Feature
[ ] Other

Description:

PropTypes definitions on both class and functional React components are currently shipped to production. They're ignored in React's production mode, but they still bloat the bundle.

We should enable babel-plugin-transform-react-remove-prop-types in production builds.

This will be enabled by installing the package as a dev dependency, then enabling it in the babel config.

Copied from original issue: magento-research/venia-pwa-concept#87

root.phtml includes hardcoded reference to pub/static

From @fooman on May 9, 2018 0:22

Magento can be run with either

1. the pub/ folder as the document root (most should use this one)
2. or from the Magento root folder.

Using the hardcoded <script src="/pub/static/frontend/Magento/venia/en_US/client.js"></script> in root.phtml assumes 2.

<script src="<?= $this->getViewFileUrl('client.js')?>"></script> will likely work better. It resolves to either option and also respects the versioning setting.

Copied from original issue: magento-research/venia-pwa-concept#63

Wrap all inserted Extension components in a React 16 error boundary

From @DrewML on February 28, 2018 22:0

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#introducing-error-boundaries

Using an error boundary, we should be able to provide informative error messages that describe exactly which module/extension is throwing.

An old example implementation lives in this repo, but there are changes that'll need to be made.

Open Questions

• Do we strip the error boundaries in prod?

Copied from original issue: magento-research/pwa-buildpack#17

Client state, reducers, and actions topic

From @jcalcaben on April 5, 2018 16:48

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for Client state, reducers, and actions topic.

src/technologies/basic-concepts/client-state-reducers-actions/index.md

Expected Result:

Client state, reducers, and actions content exists and covers the following:

• Brief overview of Redux
• What is a client state
• What is a reducer
• What is an action
• How these parts fit together in a PWA
• Sample code provided for each part

Additional Information:

• https://redux.js.org/introduction/core-concepts
• https://redux.js.org/introduction/three-principles
• https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44

Copied from original issue: magento-research/pwa-devdocs#12

Getting Started: UI Components Reference (Documentation)

From @ericerway on March 28, 2018 20:6

As a developer I want to understand the UI components (React) of Magento PWA so that I can contribute or create a PWA storefront with them.

AC

• Creation of UI Components Reference content for Magento PWA Documentation and related documentation

Copied from original issue: magento-research/venia-pwa-concept#44

Document debug configuration

From @zetlen on May 16, 2018 20:44

The WebpackTools (and soon, perhaps other parts of Buildpack) use a debuggability convention based on the debug module. You can use environment variables (and wildcards) to selectively emit verbose log messages, e.g.

DEBUG=pwa-buildpack:* npm start

DEBUG=pwa-buildpack:WebpackTools:PWADevServer.js npm start

This convention follows filesystem paths for the most part, and is very consistent. We should document it so that:

• Devs can print verbose messages at home
• Devs know how to attach verbose logs to new issues

Copied from original issue: magento-research/pwa-buildpack#37

Discovery on REST/GRAPHQL with Apollo [SPIKE]

This issue is for the following packages:

[X] venia-concept
[X] pwa-buildpack
[X] peregrine
[X] pwa-module
[X] pwa-devdocs

This issue is a:

[ ] Bug
[X] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version
Operating System + version
node.js version (node -v)
npm version (npm -v)

Description

Discovery work to determine how to implement a hybrid REST/GRAPQL model with Apollo for the purposes of creating an MVP checkout experience for Venia.

Expected result:

Proof of concept (demo) showing how this would work relative to our knowledge of the Magento 2 API. Documentation (wiki) on expected trade-offs if any to consider when implementing next sprint.

Possible solutions:

GraphQL topic

From @jcalcaben on April 5, 2018 15:37

This issue is a:

[ ] Bug
[X] New Topic Request
[ ] Topic Clarification Request
[ ] New Feature Request
[ ] Other

Description:

Content needed for the GraphQL topic.

src/technologies/basic-concepts/graphql/index.md

Expected Result:

GraphQL topic content exists and covers the following:

• What is GraphQL
• Benefits provided by GraphQL
• Why use GraphQL over REST
• Code samples provided for a schema, request, and response

Additional Information:

• https://en.wikipedia.org/wiki/GraphQL
• https://graphql.org/
• https://medium.freecodecamp.org/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf

Copied from original issue: magento-research/pwa-devdocs#10

Make `List` component usage more natural with shape of APIs response payload

This issue is for the following packages:

[ ] venia-concept
[ ] pwa-buildpack
[X] peregrine
[ ] pwa-module

This issue is a:

[X] Bug
[X] Feature suggestion
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version	n/a
Operating System + version	n/a
node.js version (node -v)	n/a
npm version (npm -v)	n/a

Description

The List component in Peregrine currently accepts an items prop, which is defined as:

PropTypes.oneOfType([
   PropTypes.instanceOf(Map),
    PropTypes.arrayOf(PropTypes.array)
]).isRequired

The call to Array.from masks an important error. If you pass in data straight from the API, which is in the shape:

[{ id: 1 }, { id: 2 }]

you'll get an error about trying to destructure something that isn't an iterable. This is because Array.from(exampleArrayAbove) translates to a multi-dimensional array where each nested array has an Object as the value, but our code attempts to destructure [key, item] from the collection.

Expected result:

I would expect, now that we know the shape of the data from the API, that we would want to make the expected shape in our components match 1:1.

Possible solutions:

I'd like to switch to just accepting an array of objects for the sake of simplicity. We did not know the interface shape from GQL before creating this component, but we do now. We should optimize for the common case, and let people transform Map >> Array if they're doing some transformations from Array >> Map with the API response.

Make a fallback view for when URL resolution fails or times out

From @zetlen on May 26, 2018 6:56

This issue is a:

[ ] Bug
[x] Feature suggestion
[ ] Other

Description:

If GraphQL isn't working, or returns null for the MagentoRouter URL resolution call, then the Loading screen displays forever. It should switch to an error.

Environment and steps to reproduce

OS: Any

Magento 2 version: Any

Other environment information:

Steps to reproduce:

1. Configure a PWA with Peregrine, Buildpack, and a Magento 2 store.
2. Launch the development server with npm start.
3. Navigate to a known-nonexistent URL.
4. Observe the loading screen stays forever.

Expected result:

Loading screen is replaced with an informative error screen.

Possible solutions:

• Response to specific GraphQL states
• Variant of Loading screen
• Specified timeout

Additional information:

• Consider developer mode and production mode versions of this

Copied from original issue: magento-research/peregrine#41

I meet the problem Unexpected token ... while running npm start

From @codynguyen1 on June 13, 2018 10:28

This issue is a:

[ ] Bug
[ ] Feature suggestion
[x ] Other

Description: I meet the problem Unexpected token ... while running npm start

Environment and steps to reproduce

OS:

Magento 2 version: 2.3

Other environment information:

Steps to reproduce:

1. I cloned the project to local
2. I ran 'npm install' succeed
3. Then see the "Unexpected token ..." error

Expected result: The project should be running

Possible solutions:

Additional information:

Copied from original issue: magento-research/venia-pwa-concept#91

Open Question: How to scope layout updates to specific RootComponents

From @DrewML on March 3, 2018 17:54

In m2 today, it's possible for an extension developer to target layout on specific pages by scoping layout XML modifications to specific handles.

Need to make sure we have parity in some way with this functionality.

Copied from original issue: magento-research/pwa-buildpack#18

Implement improved setup and configuration [MVP]

From @ericerway on May 4, 2018 20:4

As a frontend developer, I want a clear and reliable process, with as few steps as possible, to set up a PWA project, connect it to a Magento instance, and begin the realtime development cycle.

AC

• Getting started guides (for Venia reference and for Buildpack scaffolded from scratch)
• Recommended local configuration for Magento instance
• Low-to-zero-configuration setup and scaffolding
• For advanced usage, extension points which expose existing, documented APIs (i.e. Webpack, Babel) instead of creating another "advanced" layer to learn
• Light and automatic code formatting and linting scripts

Copied from original issue: magento-research/pwa-buildpack#30

Search experiences for Venia reference theme

From @ericerway on May 23, 2018 15:56

As a shopper I want to navigate on Venia through search and filtering so that I can quickly find what I would like to purchase through filtering, sorting and faceting experiences. Dependent on SDL from GraphQL in separate backlog.

AC
Ability to manipulate a collection of products
GraphQL result with number of pages, sorting options and product information
Retrieval of state to get additional queries
Start index and page size in query and response
Test and documentation (as appropriate)

Copied from original issue: magento-research/venia-pwa-concept#76

Fix Code Coverage in CI

If you run npm test -- -i locally, jest writes a report to the coverage dir with metrics for all 3 of our projects.

When running npm test -- -i in a CircleCI container, we're only getting reports in coverage for pwa-buildpack

Show Local stdout

--------------------------------------------------------------------|----------|----------|----------|----------|-------------------|
File                                                                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------------------------------------------------------|----------|----------|----------|----------|-------------------|
All files                                                           |    96.69 |    89.45 |    97.87 |    96.93 |                   |
 peregrine/dist/List                                                |      100 |       85 |      100 |      100 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
  item.js                                                           |      100 |       75 |      100 |      100 |                18 |
  items.js                                                          |      100 |    91.67 |      100 |      100 |                65 |
  list.js                                                           |      100 |       75 |      100 |      100 |                27 |
 peregrine/dist/Price                                               |      100 |       50 |      100 |      100 |                   |
  Price.js                                                          |      100 |       50 |      100 |      100 |                14 |
 peregrine/dist/Simulators                                          |      100 |    91.18 |      100 |      100 |                   |
  DelayedValue.js                                                   |      100 |       75 |      100 |      100 |                16 |
  MultipleTimedRenders.js                                           |      100 |    83.33 |      100 |      100 |                25 |
  SimulatorErrorBoundary.js                                         |      100 |    83.33 |      100 |      100 |                14 |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
  schedule-callback-args.js                                         |      100 |      100 |      100 |      100 |                   |
 peregrine/dist/util                                                |      100 |      100 |      100 |      100 |                   |
  fromRenderProp.js                                                 |      100 |      100 |      100 |      100 |                   |
  unaryMemoize.js                                                   |      100 |      100 |      100 |      100 |                   |
 peregrine/src/ContainerChild                                       |      100 |      100 |      100 |      100 |                   |
  ContainerChild.js                                                 |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
 peregrine/src/List                                                 |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
  item.js                                                           |      100 |      100 |      100 |      100 |                   |
  items.js                                                          |      100 |      100 |      100 |      100 |                   |
  list.js                                                           |      100 |      100 |      100 |      100 |                   |
 peregrine/src/Peregrine                                            |      100 |    83.33 |      100 |      100 |                   |
  Peregrine.js                                                      |      100 |    83.33 |      100 |      100 |                41 |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
 peregrine/src/Price                                                |      100 |      100 |      100 |      100 |                   |
  Price.js                                                          |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
 peregrine/src/Router                                               |     91.3 |    77.27 |     87.5 |    91.11 |                   |
  MagentoRouteHandler.js                                            |    88.89 |     87.5 |    85.71 |    88.89 |             43,53 |
  Router.js                                                         |      100 |      100 |      100 |      100 |                   |
  fetchRootComponent.js                                             |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
  resolveUnknownRoute.js                                            |    88.89 |    66.67 |      100 |    88.24 |             15,72 |
  webpackInterop.js                                                 |        0 |        0 |        0 |        0 |                   |
 peregrine/src/Simulators                                           |      100 |      100 |      100 |      100 |                   |
  DelayedValue.js                                                   |      100 |      100 |      100 |      100 |                   |
  MultipleTimedRenders.js                                           |      100 |      100 |      100 |      100 |                   |
  SimulatorErrorBoundary.js                                         |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
  schedule-callback-args.js                                         |      100 |      100 |      100 |      100 |                   |
 peregrine/src/store                                                |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |      100 |      100 |      100 |      100 |                   |
 peregrine/src/store/enhancers                                      |       75 |      100 |    66.67 |    71.43 |                   |
  exposeSlices.js                                                   |       75 |      100 |    66.67 |    71.43 |             19,21 |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
 peregrine/src/store/middleware                                     |    23.08 |      100 |    66.67 |     9.09 |                   |
  index.js                                                          |        0 |        0 |        0 |        0 |                   |
  log.js                                                            |    23.08 |      100 |    66.67 |     9.09 |... 15,16,17,18,20 |
 peregrine/src/util                                                 |      100 |      100 |      100 |      100 |                   |
  fromRenderProp.js                                                 |      100 |      100 |      100 |      100 |                   |
  unaryMemoize.js                                                   |      100 |      100 |      100 |      100 |                   |
 pwa-buildpack/src/WebpackTools                                     |      100 |      100 |      100 |      100 |                   |
  MagentoResolver.js                                                |      100 |      100 |      100 |      100 |                   |
  PWADevServer.js                                                   |      100 |      100 |      100 |      100 |                   |
  index.js                                                          |      100 |      100 |      100 |      100 |                   |
 pwa-buildpack/src/WebpackTools/middlewares                         |      100 |      100 |      100 |      100 |                   |
  DevProxy.js                                                       |      100 |      100 |      100 |      100 |                   |
  OriginSubstitution.js                                             |      100 |      100 |      100 |      100 |                   |
  StaticRootRoute.js                                                |      100 |      100 |      100 |      100 |                   |
 pwa-buildpack/src/WebpackTools/plugins                             |      100 |    83.33 |      100 |      100 |                   |
  ServiceWorkerPlugin.js                                            |      100 |    83.33 |      100 |      100 |                31 |
 pwa-buildpack/src/WebpackTools/plugins/MagentoRootComponentsPlugin |    95.65 |    76.92 |    95.83 |     95.4 |                   |
  index.js                                                          |    94.74 |    78.95 |    88.89 |    94.29 |             60,61 |
  roots-chunk-loader.js                                             |     96.3 |    71.43 |      100 |    96.15 |            55,165 |
 pwa-buildpack/src/magento-layout-loader                            |    90.51 |    79.22 |      100 |    93.02 |                   |
  babel-plugin-magento-layout.js                                    |    89.52 |    78.08 |      100 |    92.24 |... 93,337,343,403 |
  validateConfig.js                                                 |      100 |      100 |      100 |      100 |                   |
 pwa-buildpack/src/util                                             |      100 |    93.48 |      100 |      100 |                   |
  debug.js                                                          |      100 |      100 |      100 |      100 |                   |
  global-config.js                                                  |      100 |     87.5 |      100 |      100 |       100,110,126 |
  options-validator.js                                              |      100 |      100 |      100 |      100 |                   |
  run-as-root.js                                                    |      100 |      100 |      100 |      100 |                   |
  ssl-cert-store.js                                                 |      100 |      100 |      100 |      100 |                   |
 pwa-buildpack/src/util/promisified                                 |      100 |      100 |      100 |      100 |                   |
  child_process.js                                                  |      100 |      100 |      100 |      100 |                   |
  dns.js                                                            |      100 |      100 |      100 |      100 |                   |
  fs.js                                                             |      100 |      100 |      100 |      100 |                   |
  openport.js                                                       |      100 |      100 |      100 |      100 |                   |
 venia-concept/src                                                  |      100 |      100 |      100 |      100 |                   |
  classify.js                                                       |      100 |      100 |      100 |      100 |                   |
  constants.js                                                      |      100 |      100 |      100 |      100 |                   |
 venia-concept/src/components/Gallery                               |    94.44 |    83.33 |      100 |    94.12 |                   |
  gallery.js                                                        |      100 |      100 |      100 |      100 |                   |
  item.js                                                           |    95.83 |       90 |      100 |    95.83 |               106 |
  items.js                                                          |    92.31 |       50 |      100 |     91.3 |             40,51 |
 venia-concept/src/util                                             |      100 |      100 |      100 |      100 |                   |
  fixedObserver.js                                                  |      100 |      100 |      100 |      100 |                   |
  fromRenderProp.js                                                 |      100 |      100 |      100 |      100 |                   |
  getNamedExport.js                                                 |      100 |      100 |      100 |      100 |                   |
  initObserver.js                                                   |      100 |      100 |      100 |      100 |                   |
  toMap.js                                                          |      100 |      100 |      100 |      100 |                   |
--------------------------------------------------------------------|----------|----------|----------|----------|-------------------|

Show CI stdout

--------------------------------------------------|----------|----------|----------|----------|-------------------|
File                                              |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------------------------------------|----------|----------|----------|----------|-------------------|
All files                                         |    96.87 |    86.87 |    99.05 |     97.5 |                   |
 WebpackTools                                     |      100 |      100 |      100 |      100 |                   |
  MagentoResolver.js                              |      100 |      100 |      100 |      100 |                   |
  PWADevServer.js                                 |      100 |      100 |      100 |      100 |                   |
  index.js                                        |      100 |      100 |      100 |      100 |                   |
 WebpackTools/middlewares                         |      100 |      100 |      100 |      100 |                   |
  DevProxy.js                                     |      100 |      100 |      100 |      100 |                   |
  OriginSubstitution.js                           |      100 |      100 |      100 |      100 |                   |
  StaticRootRoute.js                              |      100 |      100 |      100 |      100 |                   |
 WebpackTools/plugins                             |      100 |    83.33 |      100 |      100 |                   |
  ServiceWorkerPlugin.js                          |      100 |    83.33 |      100 |      100 |                31 |
 WebpackTools/plugins/MagentoRootComponentsPlugin |    95.65 |    76.92 |    95.83 |     95.4 |                   |
  index.js                                        |    94.74 |    78.95 |    88.89 |    94.29 |             60,61 |
  roots-chunk-loader.js                           |     96.3 |    71.43 |      100 |    96.15 |            55,165 |
 magento-layout-loader                            |    90.51 |    79.22 |      100 |    93.02 |                   |
  babel-plugin-magento-layout.js                  |    89.52 |    78.08 |      100 |    92.24 |... 93,337,343,403 |
  validateConfig.js                               |      100 |      100 |      100 |      100 |                   |
 util                                             |      100 |    93.48 |      100 |      100 |                   |
  debug.js                                        |      100 |      100 |      100 |      100 |                   |
  global-config.js                                |      100 |     87.5 |      100 |      100 |       100,110,126 |
  options-validator.js                            |      100 |      100 |      100 |      100 |                   |
  run-as-root.js                                  |      100 |      100 |      100 |      100 |                   |
  ssl-cert-store.js                               |      100 |      100 |      100 |      100 |                   |
 util/promisified                                 |      100 |      100 |      100 |      100 |                   |
  child_process.js                                |      100 |      100 |      100 |      100 |                   |
  dns.js                                          |      100 |      100 |      100 |      100 |                   |
  fs.js                                           |      100 |      100 |      100 |      100 |                   |
  openport.js                                     |      100 |      100 |      100 |      100 |                   |
--------------------------------------------------|----------|----------|----------|----------|-------------------|