@swissup/pwa-core

Module add some targetable endpoints into @magento/pwa-studio and add more extensibility

Magento PWA Studio Setup

Magento PWA Studio setup

Install module

 yarn add @swissup/pwa-core

With github access

 yarn add ssh://[e-mail]:swissup/pwa-core.git

For maintainers

 mkdir -p pwa-studio-custom-packages/swissup
 cd pwa-studio-custom-packages/swissup

 git clone [e-mail]:swissup/pwa-core.git
 cd pwa-core
 pwd

 # goto pwa project root dir
 cd  ../../../pwa-studio-fundamentals

 yarn add file:[some path]/pwa-studio-custom-packages/swissup/pwa-core
 yarn watch
# or
 yarn build
 yarn start

Add @swissup to trusted vendors

1. In your pwa-studio project root open package.json
2. Find "pwa-studio" section
3. Add "trusted-vendors" section if not exist
4. Add "@swissup" vendor to "trusted-vendors"

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@swissup"
        ]
    }
}

Show trusted vendor list

cat package.json | jq '."pwa-studio"."trusted-vendors"'

Oneline add vendor command (experimental jq)

mv package.json package.json.old && cat package.json.old | jq '."pwa-studio"."trusted-vendors" [."pwa-studio"."trusted-vendors" | length] |= . + "@swissup"' > package.json && rm package.json.old

Usage

Add custom content types

add peerDependencies

   "@swissup/pwa-core": "*"

into your module package.json

and

    "pwa-studio": {
        "targets": {
            "intercept": "./lib/intercept.js"
        }
    },

intercept.js

 module.exports = targets => {
  ...
  targets
    .of("@swissup/pwa-core")
    .contentTypes.tap(contentTypes => {
        contentTypes.add({
            componentName: '[componentx]',
            importPath: require.resolve("../lib/components/componentx/index.js")
        });
      });
  ...
}

componentx/index.js

export { default } from './componentX';
export { default as Component } from './componentX';
export { default as canRender } from './detectComponentX';

detectComponentX.js

export default function detectComponentX(content) {
    return /data-content-type=\"ComponentTypeX/.test(content);
}

componentx.js

import React from 'react';
import { setContentTypeConfig } from '@magento/pagebuilder/lib/config';

import ComponentXContentTypeConfig from './ContentTypes/ComponentTypeX';

// add custom page builder content type
//https://github.com/magento/pwa-studio/pull/2131
setContentTypeConfig('ComponentTypeX', ComponentXContentTypeConfig);

const ComponentX = (props) => {
    return null;
};

export default ComponentX;

ContentTypes/ComponentTypeX/index.js

import SomeComponent from './someComponent';
import configAggregator from './configAggregator';

export default {
    configAggregator,
    component: SomeComponent
}

ContentTypes/ComponentX/configAggregator.js

export default (node, props) => {
  const id = node.getAttribute('id');

  return {
        id
    }
}

ContentTypes/someComponent.js

import React from 'react';

const SomeComponent = props => {
  const { id } = props;

  return (<span>{id}</span>);
}

export default SomeComponent;

Docs

• Getting started with PWA Studio Extensibility
• Magento PWA Studio setup
• Demo Repository for PWA Studio Component Overwrite
• Fooman VeniaUiOverrideResolver for PWA Studio
• Work with GraphQL
• PWA Studio Target Experiments
• What's new in 7.0.0 Extensibility framework
• Venia UI Extensibility Targets
• How to extend PWA Studio with new features?
• My issue
• Introduce Targetables and expand target coverage
• Targetables: Fluent tools for making your code extensible with Targets