@swissup/pwa-core

Magento PWA Studio Integration Module

Usage no npm install needed!

<script type="module">
  import swissupPwaCore from 'https://cdn.skypack.dev/@swissup/pwa-core';
</script>

README

@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

 yarn add ssh://git@github.com:swissup/pwa-core.git

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

 git clone git@github.com: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

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