Themes
Extensions
Deploying your app
Extensions
The project introduces the concept of "extensions".
Extension - is a reusable, isolated part of your application. It can contain presentation layer, business logic or even build configuration.
For NPM package to be considered an extension, it must have a
package.json field scandipwa.type equal to extension. For example:1
{
2
"scandipwa": {
3
"type": "extension"
4
}
5
...
6
}
Copied!
The extensions are power-less without a theme. The application compiles from a theme sources. Extensions are just an isolated pieces, which make some features of your application work.
Any package containing the
@namespace magic comments must have a scandipwa block declared in its package.json file. Otherwise, the @namespace magic comments will not be handled correctly during the build time, hence will not work.Registering an extension
Both themes and extensions can register extensions. In order to do it, the extension should be added to
scandipwa.extensions object of package.json . The extension must be a valid NPM package, therefore you are required to add it into dependencies field of your package.json. Like so:1
{
2
"dependencies": {
3
"@scandipwa/m2-theme": "0.0.2",
4
...
5
},
6
"scandipwa": {
7
"extensions": {
8
"@scandipwa/m2-theme": true
9
},
10
...
11
}
12
...
13
}
Copied!
This process could be automated using ScandiPWA CLI. First, make sure you are in your theme's root folder. Now, to install an extension from NPM registry, you can use following command:
1
scandipwa extension install <PACKAGE>
Copied!
In order to create new extension, use following command:
1
scandipwa extension create <PACKAGE>
Copied!
This command will create a new extension in the
packages folder and register it in your current theme. It will be symlinked from packages to proper folder under node_modules.Enabling an extension
Enabling and disabling an extension is achieved by setting the
trueor false as a value of the extension key in scandipwa.extensions . Your theme can control enabled extensions across the whole application. This allows to disable the previously enabled extension. The sequence of preference in this case is:- 1.Your theme enabled extensions
- 2.Your theme's parent themes enabled extensions
- 3.Extension enabled extensions
Watch out!
Disabling a previously enabled extension can lead to layout-shifts and issues inside of your parent theme. Also, there might be extensions plugging into the extension you intend to disable, this can lead to unexpected results.
Extension features
Extensions are very important and powerful part of ScandiPWA tool-chain. Following feature are available:
Following features are upcoming in next versions of Create ScandiPWA App releases:
- Translation bundles
- HTML template plugin
Last modified 11mo ago
Copy link