Notes about upgrading ScandiPWA-based projects from beta.3 to beta.7

upgrading_scandipwa_v3-beta.7.md

Documented changes

Refer to the release notes to get more details on these changes

Namespaces

Need to replace old middleware() syntax with @namespace; see documentation

Migration process can be automatised: disable use-namespace rule, enable no-middleware and then npm run eslint:fix. Check for correctness, enable the first rule back and enjoy the new awesome syntax!

Be careful, the automated process is not always correct:

• If mapStateToProps was wrapped in middleware in the declaration, it will be replaced by undefined, and the namespace decorator will be added in an unpredictable location in the file. This is because the conventional way of wrapping mapStateToProps is when using it to connect, not in the declaration.

Also, don't forget to update src/sw and src/plugin directories, which are excluded of the eslint script by default (as of time of writing)

Adjust to deleted and moved files

Some files have been deleted, and you may need to adjust if your project relied on them: - HeaderAndFooter and CmsBlocksAndSlider store index files - use the file you need directly - MenuOverlay - index and style files were deleted; copy them from the previous version if you need them

CmsBlock API update:

<CmsBlock identifiers={ ['xstoys-about'] } /> is now <CmsBlock identifier="xstoys-about" />

Update your config directory

There have been changes in the config, and you need to update the copy that resides in your theme directory.

Also update the src/app/util/Extensions directory.

The easiest way is to compare the two directories in an IDE that allows you to copy over the changes. Be careful though; there might be some intentional customization changes in your theme - don't override those.

Update scandipwa.json

        "Paysera": [
            "app/code/Scandiweb/PayseraGraphQl/src/scandipwa/app/plugin/index.js"
        ],

        "Paysera": "app/code/Scandiweb/PayseraGraphQl",

Update your plugins

If you're using 3rd party plugins, hopefully they will already provide a version for ScandiPWA beta.7.

If you have to do it yourself, you will have to make all the updates you made to your theme (described in this doc).

In addition, you will have to provide an index.js file in the root of each extension. According to the docs, as of beta.7:

Having an index.js file in the root of your extension is mandatory. It should contain no logic, only a single export: array that consists of relative paths from that file to all the .plugin.js files your extension declares. See the example below.

Also, it is possible that you have plugin classes that extends ExtensibleClass. In v.7 if a subclass of ExtensibleClass has no namespace, things break. Don't extend ExtensibleClass for plugins, as they cannot be plugged in to anyway. For now, ignore resulting eslint warnings; they will be fixed in a future version.

Not mentioned in the release notes

... as far as i can tell

API changes

CategoryPagination.renderPageLink - argument order changed

scandipwa.json

The format of scandipwa.json is now

...
    "extensions": {
        "ShopByBrand":"app/code/Scandiweb/ShopByBrandScandiPWA"
    }

(No wrapping arrays as in previous version)

To automate, use regex - Replace

\[\s*("app/code/\w+/\w+)[^"]+"\s*]

With

$1"

This will replace all the extensions that have a an array containing a single source file with a string containing the root of the extension

Plugin imports

To import a component from a plugin, instead of

import BrandList from 'Scandiweb_ShopByBrandScandiPWA/component/BrandList/BrandList.container';

You need to use:

import BrandList from 'Scandiweb_ShopByBrandScandiPWA/app/component/BrandList/BrandList.container';

Optional changes

Your codebase will be fine without them, but here are some improvements that beta.7 offers:

Plugins

You can now use callback(...args) instead of callback.apply(instance, args) in plugins

Also, the config file can be much simpler; see documentation for details.