npm package: @swissup/pwa-core
Description: Magento PWA Studio Integration Module
Author: Alexander Kras'ko
Latest version: 13.0.0

# @swissup/pwa-core

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

### Magento PWA Studio Setup

[Magento PWA Studio setup](https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/project-setup/)

### Install module

```
 yarn add @swissup/pwa-core
```

##### With github access
```
 yarn add ssh://git@github.com:swissup/pwa-core.git
```

##### For maintainers
```
 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
```

#### 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
3. Add "@swissup" vendor to "trusted-vendors"

```json
{
    ...
    "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

```json
   "@swissup/pwa-core": "*"
```
into your module package.json

and

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

intercept.js

```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

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

detectComponentX.js

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

componentx.js

```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


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

export default {
    configAggregator,
    component: SomeComponent
}
```

ContentTypes/ComponentX/configAggregator.js

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

  return {
        id
    }
}

```


ContentTypes/someComponent.js

```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](https://larsroettig.dev/getting-started-with-pwa-studio-extensibility/)
  - [Magento PWA Studio setup](https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/project-setup/)
  - [Demo Repository for PWA Studio Component Overwrite](https://github.com/larsroettig/pwa-studio-component-override)
  - [Fooman VeniaUiOverrideResolver for PWA Studio](https://github.com/fooman/venia-ui-override-resolver)
  - [Work with GraphQL](https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/work-with-graphql/)
  - [PWA Studio Target Experiments](https://github.com/magento-research/pwa-studio-target-experiments)
  - [What's new in 7.0.0 Extensibility framework](https://github.com/magento/pwa-studio/blob/release/7.0/CHANGELOG.md#extensibility-framework)
  - [Venia UI Extensibility Targets](https://magento.github.io/pwa-studio/venia-ui/reference/targets/)
  - [How to extend PWA Studio with new features?](https://marcin-kwiatkowski.com/en/how-to-extend-pwa-studio-with-new-features/)
  - [My issue](https://github.com/magento/pwa-studio/issues/2770)
  - [Introduce Targetables and expand target coverage](https://github.com/magento/pwa-studio/blob/zetlen/targetables/pwa-devdocs/_drafts/targetables-explainer.md)
  - [Targetables: Fluent tools for making your code extensible with Targets](https://github.com/magento/pwa-studio/blob/zetlen/targetables/pwa-devdocs/_drafts/targetables-explainer.md)