ScandiPWA Updates: August 25 (Issue #60)

Plugins, parent theme, improvements and bug fixes

What’s inside

• All the 2.x versions’ features!
• Major plugin mechanism improvements
• ESLint configuration improvements
• Bug fixes!

Feature break-down: what is the difference from 2.x?

Plugins

The main feature of ScandiPWA v3. It allows writing out-of-the-box reusable extensions for ScandiPWA, uniting functionality’s frontend and backend in one composer module.

Plugins are the main part of v3, there were 7 beta versions released and used by several projects in order to prove their stability and usability. The process gave very positive output and recommendations, all of them have been noted in this stable release.

ScandiPWA core team highly endorses writing extensions and is ready to actively communicate with community in order to popularise this functionality among people who are interested. Video guides and text documentation exist already and are planned to get replenished, following the community’s demand of specific parts’ coverage.

Main information:

• Properly written plugin is 99% compatible with other plugins, even if they are related to the same functionality;
• Easily reusable, pluggable;
• Overridable with two different approaches: writing a plugin for plugin’s classes or creating a file that utilises Fallback plugin’s functionality.

You can find information in form of text and videos dedicated to this in this article.

Parent theme support

The second huge feature of ScandiPWA v3. Parent theme allows having a theme ‘in between’ of the one in vendor and the one in app/design/frontend.

Before latest changes:

• The file is being looked for in app/design/frontend
• If it is not found, look in vendor

After:

• The file is being looked for in app/design/frontend
• If it is not found, look in the parent theme directory, which is declared in scandipwa.json in the project's frontend root folder
• If it is not found, look in vendor

Parent theme’s files can be referenced from custom theme by using the ParentComponent, ParentQuery aliases and other alike - Parent<...> just like Source<...>.

Improvements: what’s been improved since the last beta?

• Some constants have been turned to functions in order to provide extensibility via plugins. Plugins are not able to extend constant values, only wrap around functions or class members.
• Update the ESLint config corresponding to the most modern @scandipwa/eslint-plugin-scandipwa-guidelines plugin's capabilities.
• Improve the middleware-decorators Babel plugin: remove the inheritance from Extensible... classes throughout the application along with these classes themselves.
• Pluggable magic constructors! Use __construct instead of the prohibited constructor in order to make it completely plugin-compatible!
• Deprecate src/scandipwa/index.js files in plugins (backwards-compatible).
• Remove unique route position requirement.
• Reimplement the plugin position-based sorting algorithm, optimise it to the limit.
• Proxy all classes in order to avoid unexpected behaviour when trying to plug into classes that are instantiated on export
• Namespace inheritance: now all the subclasses will have plugins of the base class.
• Error messages improvements
• Coding style improvements

Bug fixes:

• Fixed sw/index and html templates not being overridable
• Remove some namespaces duplicated throughout the application
• Remove redundant components that’ve been left over from 2.x

Breaking changes:

1. Component/GroupedProductsList directory has been renamed to Component/GroupedProductList to match its contents.
2. Pay attention to the App and Router components that've been introduced in 3.0.0-beta.1. The App component contains the src/app/index.js logic, the Router component contains the src/app/route/index.js logic (which is the application's router).
3. The history has been moved to Util/History
4. A new file has been introduced inside of the source folder: .npmrc, it is very important to migrate it to your theme.

How to migrate from 2.16.1

1. Copy the scandipwa.json and .npmrc files from vendor/scandipwa/source to your theme's directory.
2. Fix all imports of { history } from 'Route'
3. Complete all the steps below.

How to migrate from 3.0.0-beta.*

1. Update the configuration folder
2. Update the eslint plugin and eslint configuration.
3. Run the eslint:fix in your project and in all of your custom extensions (plugins). For plugins use the same config, consider running the eslint in the theme’s directory, referencing the config file and the directories to process explicitly.
4. Validate the automatically made changes, fix all the other issues that ESLint finds
5. Run composer update scandipwa/* in your app container (on your Magento instance).

Assets:

Source code(zip)

Source code(tar.gz)

We hope you enjoyed the latest ScandiPWA updates. Follow us on Twitter or join the first Magento PWA community in our Slack channel where you can stay up-to-date with our work, explore the latest technical progress, ask questions, and meet other enthusiasts!

ScandiPWA is the first open-source PWA theme for Magento