73 |
101 |
102 | #### removeChild
103 |
104 | ##### Configuration
105 |
106 | ```js
107 | {
108 | "operation": "removeChild",
109 | "targetContainer": "any.container.id",
110 | "targetChild": "container.child.id"
111 | }
112 | ```
113 |
114 | Example
74 | 75 | ##### Input 76 | 77 | ```js 78 | import React from 'react'; 79 | 80 | function render() { 81 | return ( 82 |
83 | The div below will be removed
84 |
85 |
86 | );
87 | }
88 | ```
89 |
90 | ##### Output
91 |
92 | ```js
93 | import React from 'react';
94 |
95 | function render() {
96 | return The div below will be removed
;
97 | }
98 | ```
99 |
100 |
115 |
151 |
152 | #### insertBefore
153 |
154 | ##### Configuration
155 |
156 | ```js
157 | {
158 | "operation": "insertBefore",
159 | "targetContainer": "any.container.id",
160 | "targetChild": "container.child.id",
161 | "componentPath": "/Absolute/path/to/a/component.js"
162 | }
163 | ```
164 |
165 | Example
116 | 117 | ##### Input 118 | 119 | ```js 120 | import React from 'react'; 121 | import { ContainerChild } from '@magento/peregrine'; 122 | 123 | function render() { 124 | return ( 125 |
126 | The container below will be removed
127 |
132 | );
133 | }
134 | ```
135 |
136 | ##### Output
137 |
138 | ```js
139 | import React from 'react';
140 |
141 | function render() {
142 | return (
143 | This content will be removed
}
130 | />
131 |
144 | The container below will be removed
145 |
146 | );
147 | }
148 | ```
149 |
150 |
166 |
207 |
208 | #### insertAfter
209 |
210 | ##### Configuration
211 |
212 | ```js
213 | {
214 | "operation": "insertAfter",
215 | "targetContainer": "any.container.id",
216 | "targetChild": "container.child.id",
217 | "componentPath": "/Absolute/path/to/a/component.js"
218 | }
219 | ```
220 |
221 | Example
167 | 168 | ##### Input 169 | 170 | ```js 171 | import React from 'react'; 172 | import { ContainerChild } from '@magento/peregrine'; 173 | 174 | function render() { 175 | return ( 176 |
177 |
182 | );
183 | }
184 | ```
185 |
186 | ##### Output
187 |
188 | ```js
189 | import React from 'react';
190 | import { ContainerChild } from '@magento/peregrine';
191 | import _Extension from '/Absolute/path/to/a/component.js';
192 |
193 | function render() {
194 | return (
195 | Some Content
}
180 | />
181 |
196 | <_Extension />
197 |
202 | );
203 | }
204 | ```
205 |
206 | Some Content
}
200 | />
201 |
222 |
263 |
264 | ## FAQ
265 |
266 | ### How are the configurations for individual extensions/modules collected and provided to the loader?
267 |
268 | This functionality has not been completed yet. There is outstanding work to be
269 | done in Magento 2 to collect and expose aggregated configuration from each
270 | module.
271 |
272 | ### Why is a `Container` required to be a DOM Element?
273 |
274 | There are many tools in the React ecosystem that attempt to prevent passing
275 | unknown props to React components (`TypeScript`/`Flow`/`eslint`/etc). However,
276 | `data-*` props are always allowed on DOM elements. By enforcing this
277 | restriction, we can [prevent surprising
278 | behavior](https://en.wikipedia.org/wiki/Principle_of_least_astonishment) when
279 | copying and pasting code from examples into a theme or module/extension.
280 | Compiling out these extra props would not mitigate the issue, as all the
281 | aforementioned tools operate on source files.
282 |
283 | ### Why is a `ContainerChild` the only type of child allowed within a `Container`?
284 |
285 | This restriction is necessary to support the [`insertBefore`](#insertbefore) and
286 | [`insertAfter`](#insertafter) operations. Because a `ContainerChild` is required
287 | to have a unique `id` prop, this ensures that there will never be an
288 | untargetable child of a `Container`.
289 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@magento/pwa-buildpack",
3 | "version": "0.8.2",
4 | "description": "Build/Layout optimization tooling and Peregrine framework adapters for the Magento PWA",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "test": "run-p jest:ci prettier:check lint",
8 | "test:dev": "run-s prettier lint jest:ci",
9 | "test:watch": "jest --watch",
10 | "test:debug": "node --inspect-brk ./node_modules/.bin/jest --runInBand",
11 | "test:watch:focus": "jest --watch --coverageReporters=text --collectCoverageFrom=\"${FOCUS}/**/*.js\" --no-cache \"${FOCUS}.*\"",
12 | "test:debug:focus": "node --inspect-brk ./node_modules/.bin/jest --runInBand --no-coverage --no-cache \"${FOCUS}.*\"",
13 | "build": "babel src --out-dir dist --ignore '__tests__/,__mocks__/,__fixtures__/' --source-maps --copy-files",
14 | "lint": "eslint '*.js' 'src/**/*.js'",
15 | "jest:ci": "jest -i --testResultsProcessor=./node_modules/jest-junit-reporter",
16 | "prettier": "prettier --write 'src/**/*.js'",
17 | "prettier:check": "prettier-check 'src/**/*.js'",
18 | "prepublishOnly": "rimraf dist && npm run build"
19 | },
20 | "files": [
21 | "dist",
22 | "buildpack-logo.icns"
23 | ],
24 | "engines": {
25 | "node": ">=8.0.0"
26 | },
27 | "repository": {
28 | "type": "git",
29 | "url": "git+https://github.com/magento-research/pwa-buildpack.git"
30 | },
31 | "keywords": [
32 | "magento",
33 | "pwa",
34 | "babel",
35 | "webpack"
36 | ],
37 | "author": "Magento Commerce",
38 | "license": "SEE LICENSE IN LICENSE.txt",
39 | "bugs": {
40 | "url": "https://github.com/magento-research/pwa-buildpack/issues"
41 | },
42 | "homepage": "https://github.com/magento-research/pwa-buildpack#readme",
43 | "devDependencies": {
44 | "@magento/eslint-config": "^1.0.0",
45 | "babel-cli": "^6.26.0",
46 | "babel-core": "^6.26.0",
47 | "babel-eslint": "^8.2.1",
48 | "babel-loader": "^7.1.3",
49 | "babel-plugin-syntax-jsx": "^6.18.0",
50 | "babel-plugin-transform-class-properties": "^6.24.1",
51 | "babel-plugin-transform-react-jsx": "^6.24.1",
52 | "babel-preset-env": "^1.6.1",
53 | "dedent": "^0.7.0",
54 | "eslint": "^4.16.0",
55 | "eslint-plugin-babel": "^4.1.2",
56 | "eslint-plugin-jsx-a11y": "^6.0.3",
57 | "eslint-plugin-node": "^6.0.0",
58 | "eslint-plugin-react": "^7.5.1",
59 | "jest": "^22.4.0",
60 | "jest-junit-reporter": "^1.1.0",
61 | "memory-fs": "^0.4.1",
62 | "nock": "^9.2.5",
63 | "npm-run-all": "^4.1.2",
64 | "prettier": "^1.8.1",
65 | "prettier-check": "^2.0.0",
66 | "react": "^16.1.1",
67 | "rimraf": "^2.6.2",
68 | "supertest": "^3.0.0",
69 | "webpack": "^3.10.0"
70 | },
71 | "dependencies": {
72 | "@magento/devcert": "^0.7.0",
73 | "@magento/directive-parser": "^0.1.1",
74 | "ajv": "^6.1.1",
75 | "babel-helper-module-imports": "^7.0.0-beta.3",
76 | "babel-plugin-syntax-dynamic-import": "^6.18.0",
77 | "debug": "^3.1.0",
78 | "express": "^4.16.2",
79 | "flat-file-db": "^1.0.0",
80 | "harmon": "^1.3.2",
81 | "hostile": "^1.3.1",
82 | "http-proxy-middleware": "^0.18.0",
83 | "lodash.get": "^4.4.2",
84 | "openport": "0.0.4",
85 | "through": "^2.3.8",
86 | "webpack-sources": "^1.1.0",
87 | "workbox-webpack-plugin": "^3.0.0-beta.1",
88 | "write-file-webpack-plugin": "^4.2.0"
89 | },
90 | "peerDependencies": {
91 | "babel-core": "^6.26.0",
92 | "babel-loader": "^7"
93 | },
94 | "jest": {
95 | "clearMocks": true,
96 | "collectCoverage": true,
97 | "collectCoverageFrom": [
98 | "**/src/**/*.js"
99 | ],
100 | "coverageReporters": [
101 | "lcov",
102 | "text-summary"
103 | ],
104 | "testEnvironment": "node",
105 | "testPathIgnorePatterns": [
106 | "dist",
107 | "node_modules",
108 | "__fixtures__"
109 | ]
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/ExtensionComponentWrap/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "env",
5 | {
6 | "targets": {
7 | "browsers": [
8 | "last 2 versions",
9 | "ie 11"
10 | ]
11 | }
12 | }
13 | ]
14 | ],
15 | "plugins": [
16 | "transform-react-jsx"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/ExtensionComponentWrap/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parserOptions: {
3 | sourceType: 'module'
4 | },
5 | rules: {
6 | // All other code in this project is expected to run in Node.
7 | // This comes from the extended "node:recommended" configuration.
8 | // ESLint does not allow overrides to remove "extends", so
9 | // we instead disable this individual rule for this file.
10 | // Remove when moving ExtensionComponentWrap to Peregrine.
11 | 'node/no-unsupported-features': 'off'
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/src/ExtensionComponentWrap/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Note: This component should be moved to `peregrine` repository.
3 | * It lives in this repo currently because this package consumes it, and we
4 | * don't have private npm packages yet
5 | */
6 |
7 | import React from 'react';
8 |
9 | const errorStyles = {
10 | background: '#ff1b1b',
11 | color: '#fff',
12 | fontWeight: 'bold',
13 | fontSize: '1em',
14 | fontFamily: 'sans-serif'
15 | };
16 |
17 | export default class MagentoExtensionBoundary extends React.Component {
18 | constructor() {
19 | super();
20 | this.state = {
21 | hasError: false
22 | };
23 | }
24 |
25 | componentDidCatch() {
26 | const { replacedID } = this.props;
27 | console.error(
28 | 'An error occurred within a part of the React component tree ' +
29 | 'created by a Magento Extension. Look for the component registered ' +
30 | `to replace the mid "%c${replacedID}%c" to debug further.`
31 | );
32 | this.setState({ hasError: true });
33 | }
34 |
35 | render() {
36 | if (!this.state.hasError) {
37 | return this.props.children;
38 | }
39 |
40 | return (
41 | Example
223 | 224 | ##### Input 225 | 226 | ```js 227 | import React from 'react'; 228 | import { ContainerChild } from '@magento/peregrine'; 229 | 230 | function render() { 231 | return ( 232 |
233 |
238 | );
239 | }
240 | ```
241 |
242 | ##### Output
243 |
244 | ```js
245 | import React from 'react';
246 | import { ContainerChild } from '@magento/peregrine';
247 | import _Extension from '/Absolute/path/to/a/component.js';
248 |
249 | function render() {
250 | return (
251 | Some Content
}
236 | />
237 |
252 |
258 | );
259 | }
260 | ```
261 |
262 | Some Content
}
255 | />
256 | <_Extension />
257 |
42 | An error occurred within a Magento Extension. See the browser's
43 | JavaScript console for further details.
44 |
45 | );
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/WebpackTools/MagentoResolver.js:
--------------------------------------------------------------------------------
1 | const optionsValidator = require('../util/options-validator');
2 | const validateConfig = optionsValidator('MagentoResolver', {
3 | 'paths.root': 'string'
4 | });
5 | module.exports = {
6 | validateConfig,
7 | async configure(options) {
8 | validateConfig('.configure()', options);
9 | return {
10 | modules: [options.paths.root, 'node_modules'],
11 | mainFiles: ['index'],
12 | extensions: ['.js', '.json']
13 | };
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/src/WebpackTools/PWADevServer.js:
--------------------------------------------------------------------------------
1 | const debug = require('../util/debug').makeFileLogger(__filename);
2 | const { join } = require('path');
3 | const url = require('url');
4 | const express = require('express');
5 | const GlobalConfig = require('../util/global-config');
6 | const SSLCertStore = require('../util/ssl-cert-store');
7 | const optionsValidator = require('../util/options-validator');
8 | const middlewares = {
9 | originSubstitution: require('./middlewares/OriginSubstitution'),
10 | devProxy: require('./middlewares/DevProxy'),
11 | staticRootRoute: require('./middlewares/StaticRootRoute')
12 | };
13 | const { lookup } = require('../util/promisified/dns');
14 | const { find: findPort } = require('../util/promisified/openport');
15 | const runAsRoot = require('../util/run-as-root');
16 | const PWADevServer = {
17 | validateConfig: optionsValidator('PWADevServer', {
18 | id: 'string',
19 | publicPath: 'string',
20 | backendDomain: 'string',
21 | 'paths.output': 'string',
22 | 'paths.assets': 'string',
23 | serviceWorkerFileName: 'string'
24 | }),
25 | hostnamesById: new GlobalConfig({
26 | prefix: 'devhostname-byid',
27 | key: x => x
28 | }),
29 | portsByHostname: new GlobalConfig({
30 | prefix: 'devport-byhostname',
31 | key: x => x
32 | }),
33 | async setLoopback(hostname) {
34 | debug(`checking if ${hostname} is loopback`);
35 | let ip;
36 | try {
37 | ip = await lookup(hostname);
38 | } catch (e) {
39 | if (e.code !== 'ENOTFOUND') {
40 | throw Error(
41 | debug.errorMsg(
42 | `Error trying to check that ${hostname} is loopback: ${
43 | e.message
44 | }`
45 | )
46 | );
47 | }
48 | }
49 | if (ip && (ip.address === '127.0.0.1' || ip.address === '::1')) {
50 | debug(`${hostname} already resolves to ${ip.address}!`);
51 | } else {
52 | debug(
53 | `setting ${hostname} loopback in /etc/hosts, may require password...`
54 | );
55 | return runAsRoot(
56 | `Resolving ${hostname} to localhost and editing the hostfile requires temporary administrative privileges.\n Enter password for %u on %H: `,
57 | /* istanbul ignore next: never runs in process */
58 | d => require('hostile').set('127.0.0.1', d),
59 | hostname
60 | );
61 | }
62 | },
63 | async findFreePort() {
64 | const inUse = await PWADevServer.portsByHostname.values(Number);
65 | debug(`findFreePort(): these ports already in use`, inUse);
66 | return findPort({
67 | startingPort: 8000,
68 | endingPort: 9999,
69 | avoid: inUse
70 | }).catch(e => {
71 | throw Error(
72 | debug.errorMsg(
73 | `Unable to find an open port. You may want to delete your database file at ${GlobalConfig.getDbFilePath()} to clear out old developer hostname entries. (Soon we will make this easier and more automatic.) Original error: ${e.toString()}`
74 | )
75 | );
76 | });
77 | },
78 | async findFreeHostname(identifier, times = 0) {
79 | const maybeHostname =
80 | identifier + (times ? times : '') + '.local.pwadev';
81 | // if it has a port, it exists
82 | const exists = await PWADevServer.portsByHostname.get(maybeHostname);
83 | if (!exists) {
84 | debug(
85 | `findFreeHostname: ${maybeHostname} unbound to port and available`
86 | );
87 | return maybeHostname;
88 | } else {
89 | debug(`findFreeHostname: ${maybeHostname} bound to port`, exists);
90 | if (times > 9) {
91 | throw Error(
92 | debug.errorMsg(
93 | `findFreeHostname: Unable to find a free hostname after 9 tries. You may want to delete your database file at ${GlobalConfig.getDbFilePath()} to clear out old developer hostname entries. (Soon we will make this easier and more automatic.)`
94 | )
95 | );
96 | }
97 | return PWADevServer.findFreeHostname(identifier, times + 1);
98 | }
99 | },
100 | async provideDevHost(id) {
101 | debug(`provideDevHost('${id}')`);
102 | let hostname = await PWADevServer.hostnamesById.get(id);
103 | let port;
104 | if (!hostname) {
105 | [hostname, port] = await Promise.all([
106 | PWADevServer.findFreeHostname(id),
107 | PWADevServer.findFreePort()
108 | ]);
109 |
110 | await PWADevServer.hostnamesById.set(id, hostname);
111 | await PWADevServer.portsByHostname.set(hostname, port);
112 | } else {
113 | port = await PWADevServer.portsByHostname.get(hostname);
114 | if (!port) {
115 | throw Error(
116 | debug.errorMsg(
117 | `Found no port matching the hostname ${hostname}`
118 | )
119 | );
120 | }
121 | }
122 | PWADevServer.setLoopback(hostname);
123 | return {
124 | protocol: 'https:',
125 | hostname,
126 | port
127 | };
128 | },
129 | async configure(config = {}) {
130 | debug('configure() invoked', config);
131 | PWADevServer.validateConfig('.configure(config)', config);
132 | const sanitizedId = config.id
133 | .toLowerCase()
134 | .replace(/[^a-zA-Z0-9]/g, '-')
135 | .replace(/^-+/, '');
136 | const devHost = await PWADevServer.provideDevHost(sanitizedId);
137 | const https = await SSLCertStore.provide(devHost.hostname);
138 | debug(`https provided:`, https);
139 | return {
140 | contentBase: false,
141 | compress: true,
142 | hot: true,
143 | https,
144 | host: devHost.hostname,
145 | port: devHost.port,
146 | publicPath: url.format(
147 | Object.assign({}, devHost, { pathname: config.publicPath })
148 | ),
149 | before(app) {
150 | if (config.changeOrigin) {
151 | // replace origins in links in returned html
152 | app.use(
153 | middlewares.originSubstitution(
154 | new url.URL(config.backendDomain),
155 | devHost
156 | )
157 | );
158 | }
159 | // serviceworker root route
160 | app.use(
161 | middlewares.staticRootRoute(
162 | join(config.paths.output, config.serviceWorkerFileName)
163 | )
164 | );
165 | },
166 | after(app) {
167 | // set static server to load and serve from different paths
168 | app.use(config.publicPath, express.static(config.paths.assets));
169 |
170 | // proxy to backend
171 | app.use(
172 | middlewares.devProxy({
173 | target: config.backendDomain
174 | })
175 | );
176 | }
177 | };
178 | }
179 | };
180 | module.exports = PWADevServer;
181 |
--------------------------------------------------------------------------------
/src/WebpackTools/__tests__/MagentoResolver.spec.js:
--------------------------------------------------------------------------------
1 | const MagentoResolver = require('../MagentoResolver');
2 | test('static configure() produces a webpack resolver config', async () => {
3 | await expect(
4 | MagentoResolver.configure({ paths: { root: 'fakeRoot' } })
5 | ).resolves.toEqual({
6 | modules: ['fakeRoot', 'node_modules'],
7 | mainFiles: ['index'],
8 | extensions: ['.js', '.json']
9 | });
10 | });
11 | test('static configure() throws if required paths are missing', async () => {
12 | await expect(
13 | MagentoResolver.configure({ paths: { root: false } })
14 | ).rejects.toThrow('paths.root must be of type string');
15 | });
16 |
--------------------------------------------------------------------------------
/src/WebpackTools/__tests__/PWADevServer.spec.js:
--------------------------------------------------------------------------------
1 | jest.mock('../../util/promisified/dns');
2 | jest.mock('../../util/promisified/openport');
3 | jest.mock('../../util/global-config');
4 | jest.mock('../../util/ssl-cert-store');
5 | jest.mock('../../util/run-as-root');
6 | jest.mock('../middlewares/DevProxy');
7 | jest.mock('../middlewares/OriginSubstitution');
8 | jest.mock('../middlewares/StaticRootRoute');
9 |
10 | const { lookup } = require('../../util/promisified/dns');
11 | const openport = require('../../util/promisified/openport');
12 | const runAsRoot = require('../../util/run-as-root');
13 | const GlobalConfig = require('../../util/global-config');
14 | const SSLCertStore = require('../../util/ssl-cert-store');
15 | const middlewares = {
16 | DevProxy: require('../middlewares/DevProxy'),
17 | OriginSubstitution: require('../middlewares/OriginSubstitution'),
18 | StaticRootRoute: require('../middlewares/StaticRootRoute')
19 | };
20 |
21 | let PWADevServer;
22 | beforeAll(() => {
23 | GlobalConfig.mockImplementation(({ key }) => ({
24 | set: jest.fn(key),
25 | get: jest.fn(),
26 | values: jest.fn()
27 | }));
28 | PWADevServer = require('../').PWADevServer;
29 | });
30 |
31 | const simulate = {
32 | hostResolvesLoopback({ family = 4 } = {}) {
33 | lookup.mockReturnValueOnce({
34 | address: family === 6 ? '::1' : '127.0.0.1',
35 | family
36 | });
37 | return simulate;
38 | },
39 | hostDoesNotResolve() {
40 | lookup.mockRejectedValueOnce({ code: 'ENOTFOUND' });
41 | return simulate;
42 | },
43 | hostnameForNextId(name) {
44 | PWADevServer.hostnamesById.get.mockReturnValueOnce(name);
45 | return simulate;
46 | },
47 | noHostnameForNextId() {
48 | PWADevServer.hostnamesById.get.mockReturnValueOnce(undefined);
49 | return simulate;
50 | },
51 | noPortSavedForNextHostname() {
52 | PWADevServer.portsByHostname.get.mockReturnValueOnce(undefined);
53 | return simulate;
54 | },
55 | portSavedForNextHostname(n = 8000) {
56 | PWADevServer.portsByHostname.get.mockReturnValueOnce(n);
57 | return simulate;
58 | },
59 | savedPortsAre(...ports) {
60 | PWADevServer.portsByHostname.values.mockReturnValueOnce(ports);
61 | return simulate;
62 | },
63 | aFreePortWasFound(n = 8000) {
64 | openport.find.mockResolvedValueOnce(n);
65 | return simulate;
66 | },
67 | certExistsForNextHostname(pair) {
68 | SSLCertStore.provide.mockResolvedValueOnce(pair);
69 | }
70 | };
71 |
72 | test('.setLoopback() checks if hostname resolves local, ipv4 or 6', async () => {
73 | simulate.hostResolvesLoopback();
74 | await PWADevServer.setLoopback('excelsior.com');
75 | expect(lookup).toHaveBeenCalledWith('excelsior.com');
76 | expect(runAsRoot).not.toHaveBeenCalled();
77 |
78 | simulate.hostResolvesLoopback({ family: 6 });
79 | await PWADevServer.setLoopback('excelsior.com');
80 | expect(runAsRoot).not.toHaveBeenCalled();
81 | });
82 |
83 | test('.setLoopback() updates /etc/hosts to make hostname local', async () => {
84 | lookup.mockRejectedValueOnce({ code: 'ENOTFOUND' });
85 | await PWADevServer.setLoopback('excelsior.com');
86 | expect(runAsRoot).toHaveBeenCalledWith(
87 | expect.any(String),
88 | expect.any(Function),
89 | 'excelsior.com'
90 | );
91 | });
92 |
93 | test('.setLoopback() dies under mysterious circumstances', async () => {
94 | lookup.mockRejectedValueOnce({ code: 'UNKNOWN' });
95 | await expect(PWADevServer.setLoopback('excelsior.com')).rejects.toThrow(
96 | 'Error trying to check'
97 | );
98 | });
99 |
100 | test('.findFreePort() uses openPort to get a free port', async () => {
101 | simulate.savedPortsAre(8543, 9002, 8765).aFreePortWasFound();
102 |
103 | await PWADevServer.findFreePort();
104 | expect(openport.find).toHaveBeenCalledWith(
105 | expect.objectContaining({
106 | avoid: expect.arrayContaining([8543, 9002, 8765])
107 | })
108 | );
109 | });
110 |
111 | test('.findFreePort() passes formatted errors from port lookup', async () => {
112 | openport.find.mockRejectedValueOnce('woah');
113 |
114 | await expect(PWADevServer.findFreePort()).rejects.toThrowError(
115 | /Unable to find an open port.*woah/
116 | );
117 | });
118 |
119 | test('.findFreeHostname() makes a new hostname for an identifier', async () => {
120 | simulate.noPortSavedForNextHostname();
121 | const hostname = await PWADevServer.findFreeHostname('bar');
122 | expect(hostname).toBe('bar.local.pwadev');
123 | });
124 |
125 | test('.findFreeHostname() skips past taken hostnames for an identifier', async () => {
126 | const hostname = await PWADevServer.findFreeHostname('foo');
127 | expect(hostname).toBe('foo.local.pwadev');
128 |
129 | simulate
130 | .portSavedForNextHostname()
131 | .portSavedForNextHostname()
132 | .portSavedForNextHostname()
133 | .noPortSavedForNextHostname();
134 |
135 | const hostname2 = await PWADevServer.findFreeHostname('foo');
136 | expect(hostname2).toBe('foo3.local.pwadev');
137 | });
138 |
139 | test('.findFreeHostname() bails after 9 failed attempts', async () => {
140 | const hostname = await PWADevServer.findFreeHostname('foo');
141 | expect(hostname).toBe('foo.local.pwadev');
142 |
143 | simulate
144 | .portSavedForNextHostname()
145 | .portSavedForNextHostname()
146 | .portSavedForNextHostname()
147 | .portSavedForNextHostname()
148 | .portSavedForNextHostname()
149 | .portSavedForNextHostname()
150 | .portSavedForNextHostname()
151 | .portSavedForNextHostname()
152 | .portSavedForNextHostname()
153 | .portSavedForNextHostname()
154 | .portSavedForNextHostname();
155 |
156 | await expect(PWADevServer.findFreeHostname('foo')).rejects.toThrowError(
157 | `Unable to find a free hostname after`
158 | );
159 | });
160 |
161 | test('.provideDevHost() returns a URL object with a free dev host origin', async () => {
162 | simulate
163 | .noHostnameForNextId()
164 | .noPortSavedForNextHostname()
165 | .aFreePortWasFound(8765)
166 | .hostDoesNotResolve();
167 |
168 | await expect(PWADevServer.provideDevHost('woah')).resolves.toMatchObject({
169 | protocol: 'https:',
170 | hostname: 'woah.local.pwadev',
171 | port: 8765
172 | });
173 | });
174 |
175 | test('.provideDevHost() returns a URL object with a cached dev host origin', async () => {
176 | simulate
177 | .hostnameForNextId('cached-host.local.pwadev')
178 | .portSavedForNextHostname(8765)
179 | .hostResolvesLoopback();
180 |
181 | await expect(PWADevServer.provideDevHost('wat')).resolves.toMatchObject({
182 | protocol: 'https:',
183 | hostname: 'cached-host.local.pwadev',
184 | port: 8765
185 | });
186 | });
187 |
188 | test('.provideDevHost() throws if it got a reserved hostname but could not find a port for that hostname', async () => {
189 | simulate
190 | .hostnameForNextId('doomed-host.local.pwadev')
191 | .noPortSavedForNextHostname();
192 |
193 | await expect(PWADevServer.provideDevHost('dang')).rejects.toThrow(
194 | 'Found no port matching the hostname'
195 | );
196 | });
197 |
198 | test('.configure() throws errors on missing config', async () => {
199 | await expect(PWADevServer.configure()).rejects.toThrow(
200 | 'id must be of type string'
201 | );
202 | await expect(PWADevServer.configure({ id: 'foo' })).rejects.toThrow(
203 | 'publicPath must be of type string'
204 | );
205 | await expect(
206 | PWADevServer.configure({ id: 'foo', publicPath: 'bar' })
207 | ).rejects.toThrow('backendDomain must be of type string');
208 | await expect(
209 | PWADevServer.configure({
210 | id: 'foo',
211 | publicPath: 'bar',
212 | backendDomain: 'https://dumb.domain',
213 | paths: {}
214 | })
215 | ).rejects.toThrow('paths.output must be of type string');
216 | await expect(
217 | PWADevServer.configure({
218 | id: 'foo',
219 | publicPath: 'bar',
220 | backendDomain: 'https://dumb.domain',
221 | paths: { output: 'output' }
222 | })
223 | ).rejects.toThrow('paths.assets must be of type string');
224 | await expect(
225 | PWADevServer.configure({
226 | id: 'foo',
227 | publicPath: 'bar',
228 | backendDomain: 'https://dumb.domain',
229 | paths: { output: 'foo', assets: 'bar' }
230 | })
231 | ).rejects.toThrow('serviceWorkerFileName must be of type string');
232 | });
233 |
234 | test('.configure() gets or creates an SSL cert', async () => {
235 | simulate
236 | .hostnameForNextId('coolnewhost.local.pwadev')
237 | .portSavedForNextHostname(8765)
238 | .hostResolvesLoopback()
239 | .certExistsForNextHostname({
240 | key: 'fakeKey',
241 | cert: 'fakeCert'
242 | });
243 | const server = await PWADevServer.configure({
244 | id: 'heckin',
245 | paths: {
246 | output: 'good',
247 | assets: 'boye'
248 | },
249 | publicPath: 'bork',
250 | serviceWorkerFileName: 'doin',
251 | backendDomain: 'growe'
252 | });
253 | expect(SSLCertStore.provide).toHaveBeenCalled();
254 | expect(server.https).toHaveProperty('cert', 'fakeCert');
255 | });
256 |
257 | test('.configure() returns a configuration object for the `devServer` property of a webpack config', async () => {
258 | simulate
259 | .hostnameForNextId('coolnewhost.local.pwadev')
260 | .portSavedForNextHostname(8765)
261 | .hostResolvesLoopback()
262 | .certExistsForNextHostname({
263 | key: 'fakeKey2',
264 | cert: 'fakeCert2'
265 | });
266 |
267 | const config = {
268 | id: 'Theme_Unique_Id',
269 | paths: {
270 | output: 'path/to/static',
271 | assets: 'path/to/assets'
272 | },
273 | publicPath: 'full/path/to/publicPath',
274 | serviceWorkerFileName: 'swname.js',
275 | backendDomain: 'https://magento.backend.domain'
276 | };
277 |
278 | const devServer = await PWADevServer.configure(config);
279 |
280 | expect(devServer).toMatchObject({
281 | contentBase: false,
282 | compress: true,
283 | hot: true,
284 | https: {
285 | key: 'fakeKey2',
286 | cert: 'fakeCert2'
287 | },
288 | host: 'coolnewhost.local.pwadev',
289 | port: 8765,
290 | publicPath:
291 | 'https://coolnewhost.local.pwadev:8765/full/path/to/publicPath',
292 | before: expect.any(Function),
293 | after: expect.any(Function)
294 | });
295 | });
296 |
297 | test('.configure() returns a configuration object with before() and after() handlers that add middlewares in order', async () => {
298 | simulate
299 | .hostnameForNextId('coolnewhost.local.pwadev')
300 | .portSavedForNextHostname(8765)
301 | .hostResolvesLoopback()
302 | .certExistsForNextHostname({
303 | key: 'fakeKey2',
304 | cert: 'fakeCert2'
305 | });
306 |
307 | const config = {
308 | id: 'Theme_Unique_Id',
309 | paths: {
310 | output: 'path/to/static',
311 | assets: 'path/to/assets'
312 | },
313 | publicPath: 'full/path/to/publicPath',
314 | serviceWorkerFileName: 'swname.js',
315 | backendDomain: 'https://magento.backend.domain'
316 | };
317 |
318 | const devServer = await PWADevServer.configure(config);
319 |
320 | const app = {
321 | use: jest.fn()
322 | };
323 |
324 | middlewares.StaticRootRoute.mockReturnValueOnce('fakeStaticRootRoute');
325 |
326 | devServer.before(app);
327 |
328 | middlewares.DevProxy.mockReturnValueOnce('fakeDevProxy');
329 |
330 | devServer.after(app);
331 |
332 | expect(middlewares.DevProxy).toHaveBeenCalledWith(
333 | expect.objectContaining({
334 | target: 'https://magento.backend.domain'
335 | })
336 | );
337 |
338 | expect(middlewares.OriginSubstitution).not.toHaveBeenCalled();
339 |
340 | expect(app.use).toHaveBeenCalledWith('fakeDevProxy');
341 |
342 | expect(middlewares.StaticRootRoute).toHaveBeenCalledWith(
343 | 'path/to/static/swname.js'
344 | );
345 |
346 | expect(app.use).toHaveBeenCalledWith('fakeStaticRootRoute');
347 |
348 | expect(app.use).toHaveBeenCalledWith(
349 | 'full/path/to/publicPath',
350 | expect.any(Function)
351 | );
352 | });
353 |
354 | test('.configure() optionally adds OriginSubstitution middleware', async () => {
355 | simulate
356 | .hostnameForNextId('coolnewhost.local.pwadev')
357 | .portSavedForNextHostname(8765)
358 | .hostResolvesLoopback()
359 | .certExistsForNextHostname({
360 | key: 'fakeKey2',
361 | cert: 'fakeCert2'
362 | });
363 |
364 | const config = {
365 | id: 'Theme_Unique_Id',
366 | paths: {
367 | output: 'path/to/static',
368 | assets: 'path/to/assets'
369 | },
370 | publicPath: 'full/path/to/publicPath',
371 | serviceWorkerFileName: 'swname.js',
372 | backendDomain: 'https://magento.backend.domain',
373 | changeOrigin: true
374 | };
375 |
376 | const devServer = await PWADevServer.configure(config);
377 |
378 | const app = {
379 | use: jest.fn()
380 | };
381 |
382 | middlewares.OriginSubstitution.mockReturnValueOnce(
383 | 'fakeOriginSubstitution'
384 | );
385 | middlewares.DevProxy.mockReturnValueOnce('fakeDevProxy');
386 | middlewares.StaticRootRoute.mockReturnValueOnce('fakeStaticRootRoute');
387 |
388 | devServer.before(app);
389 |
390 | expect(middlewares.OriginSubstitution).toHaveBeenCalledWith(
391 | expect.objectContaining({
392 | protocol: 'https:',
393 | hostname: 'magento.backend.domain'
394 | }),
395 | expect.objectContaining({
396 | protocol: 'https:',
397 | hostname: 'coolnewhost.local.pwadev',
398 | port: 8765
399 | })
400 | );
401 |
402 | expect(app.use).toHaveBeenCalledWith('fakeOriginSubstitution');
403 | });
404 |
--------------------------------------------------------------------------------
/src/WebpackTools/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | MagentoRootComponentsPlugin: require('./plugins/MagentoRootComponentsPlugin'),
3 | ServiceWorkerPlugin: require('./plugins/ServiceWorkerPlugin'),
4 | MagentoResolver: require('./MagentoResolver'),
5 | PWADevServer: require('./PWADevServer')
6 | };
7 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/DevProxy.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Proxies all requests not served by Webpack in-memory bundling back
3 | * to the underlying store.
4 | *
5 | * Tries to detect a case where the target URL is misconfigured and the
6 | * store tries to redirect to http or https.
7 | */
8 | const proxyMiddleware = require('http-proxy-middleware');
9 | const optionsValidator = require('../../util/options-validator');
10 | const { format, URL } = require('url');
11 |
12 | const RedirectCodes = [201, 301, 302, 307, 308];
13 | const findRedirect = message =>
14 | RedirectCodes.includes(message.statusCode) && message.headers.location;
15 |
16 | const emitErrorOnProtocolChange = (emit, target, redirected) => {
17 | const backend = new URL(target);
18 | const { host, protocol } = new URL(redirected);
19 | if (backend.host === host && backend.protocol === protocol) {
20 | return;
21 | }
22 |
23 | if (backend.protocol === 'https:' && protocol === 'http:') {
24 | return emit(
25 | new Error(
26 | `pwa-buildpack: Backend domain is configured to ${target}, but redirected to unsecure HTTP. Please configure backend server to use SSL.`
27 | )
28 | );
29 | }
30 |
31 | if (backend.protocol === 'http:' && protocol === 'https:') {
32 | return emit(
33 | new Error(
34 | `pwa-buildpack: Backend domain is configured to ${target}, but redirected to secure HTTPS. Please change configuration to point to secure backend domain: ${format(
35 | Object.assign(backend, { protocol: 'https:' })
36 | )}.`
37 | )
38 | );
39 | }
40 |
41 | emit(
42 | new Error(
43 | `pwa-buildpack: Backend domain redirected to unknown protocol: ${redirected}`
44 | )
45 | );
46 | };
47 |
48 | const validateConfig = optionsValidator('DevProxyMiddleware', {
49 | target: 'string'
50 | });
51 |
52 | module.exports = function createDevProxy(config) {
53 | validateConfig('createDevProxy', config);
54 | const proxyConf = Object.assign(
55 | {
56 | logLevel: 'debug',
57 | logProvider: defaultProvider => config.logger || defaultProvider,
58 | onProxyRes(proxyRes) {
59 | const redirected = findRedirect(proxyRes);
60 | if (redirected) {
61 | emitErrorOnProtocolChange(
62 | nextCallback,
63 | config.target,
64 | redirected
65 | );
66 | }
67 | },
68 | secure: false,
69 | changeOrigin: true,
70 | autoRewrite: true,
71 | cookieDomainRewrite: '' // remove any absolute domain on cookies
72 | },
73 | config
74 | );
75 | let nextCallback;
76 | const proxy = proxyMiddleware('**', proxyConf);
77 | // Return an outer middleware so we can access the `next` function to
78 | // properly pass errors along.
79 | return (req, res, next) => {
80 | nextCallback = err => {
81 | proxyConf.logProvider(console).error(err);
82 | return next(err);
83 | };
84 | return proxy(req, res, next);
85 | };
86 | };
87 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/OriginSubstitution.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Replace all instances of one URL base in an HTML response, with another.
3 | * Useful for proxying to systems like Magento, which often generate absolute
4 | * URLs in their render output.
5 | *
6 | * Rather than configure Magento to use the your temporary dev server URL as
7 | * its configured base domain, this middleware allows the dev server to text
8 | * replace any links, resources, or reference URLs on the fly.
9 | *
10 | * For Magento 2 specifically, This is a stopgap until we can hack Framework to
11 | * have branch logic in asset URL resolvers.
12 | *
13 | * EXPERIMENTAL -- not ready for prime time
14 | */
15 | const debug = require('../../util/debug').makeFileLogger(__filename);
16 | const url = require('url');
17 | const harmon = require('harmon');
18 | const through = require('through');
19 | const removeTrailingSlash = x => x.replace(/\/$/, '');
20 | module.exports = function createOriginSubstitutionMiddleware(
21 | oldDomain,
22 | newDomain
23 | ) {
24 | const oldOrigin = removeTrailingSlash(url.format(oldDomain));
25 | const newOrigin = removeTrailingSlash(url.format(newDomain));
26 | const attributesToReplaceOrigin = ['href', 'src', 'style'].map(attr => ({
27 | query: `[${attr}*="${oldOrigin}"]`,
28 | func(node) {
29 | node.setAttribute(
30 | attr,
31 | node
32 | .getAttribute(attr)
33 | .split(oldOrigin)
34 | .join(newOrigin)
35 | );
36 | }
37 | }));
38 | const tagsToReplaceOrigin = ['style'].map(attr => ({
39 | query: attr,
40 | func(node) {
41 | debug('tag', attr, node);
42 | const stream = node.createStream();
43 | stream
44 | .pipe(
45 | through(function(buf) {
46 | this.queue(
47 | buf
48 | .toString()
49 | .split(oldOrigin)
50 | .join(newOrigin)
51 | );
52 | })
53 | )
54 | .pipe(stream);
55 | }
56 | }));
57 | debug(
58 | `replace ${oldOrigin} with ${newOrigin} in html`,
59 | attributesToReplaceOrigin
60 | );
61 | const allTransforms = [
62 | ...tagsToReplaceOrigin,
63 | ...attributesToReplaceOrigin
64 | ];
65 | return harmon([], allTransforms, true);
66 | };
67 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/StaticRootRoute.js:
--------------------------------------------------------------------------------
1 | const { basename } = require('path');
2 | module.exports = function createStaticRootRoute(filepath) {
3 | const publicPath = '/' + basename(filepath);
4 | return (req, res, next) => {
5 | if (req.method === 'GET' && req.path === publicPath) {
6 | res.sendFile(filepath);
7 | } else {
8 | next();
9 | }
10 | };
11 | };
12 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/__fixtures__/root-available-file.json:
--------------------------------------------------------------------------------
1 | {
2 | "goodJsonResponse": true
3 | }
4 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/__tests__/DevProxy.spec.js:
--------------------------------------------------------------------------------
1 | let devProxy;
2 | const request = require('supertest');
3 | const nock = require('nock');
4 | const express = require('express');
5 |
6 | const TARGET = 'https://proxytarget.test';
7 | const TARGET_UNSECURE = 'http://proxytarget.test';
8 | const logger = {};
9 | const logMethods = ['log', 'debug', 'info', 'warn', 'error'];
10 |
11 | beforeAll(() => {
12 | logMethods.forEach(method => {
13 | logger[method] = jest.fn();
14 | jest.spyOn(console, method).mockImplementation();
15 | });
16 | // We wait to require DevProxy here because DevProxy imports `http-proxy-middleware`, and
17 | // `http-proxy-middleware` creates a "default logger" at module definition time--that is, when
18 | // we require() it. The default logger destructures the console object, so it no longer holds
19 | // a reference to `console` itself. This makes us unable to mock `console` for the
20 | // `http-proxy-middleware` library if it loads before the mock does.
21 | devProxy = require('../DevProxy');
22 | });
23 |
24 | beforeEach(() => {
25 | jest.clearAllMocks();
26 | });
27 |
28 | afterAll(() => {
29 | logMethods.forEach(method => {
30 | console[method].mockRestore();
31 | });
32 | nock.restore();
33 | });
34 |
35 | test('logs to custom logger', async () => {
36 | nock(TARGET)
37 | .get('/will-log')
38 | .reply(200, 'Hello world!');
39 |
40 | const appWithCustomLogger = express();
41 | appWithCustomLogger.use(
42 | devProxy({
43 | logger,
44 | target: TARGET
45 | })
46 | );
47 |
48 | await request(appWithCustomLogger).get('/will-log');
49 |
50 | expect(logger.debug).toHaveBeenCalledWith(
51 | expect.stringContaining('will-log')
52 | );
53 | });
54 |
55 | test('logs to console by default', async () => {
56 | nock(TARGET)
57 | .get('/will-log')
58 | .reply(200, 'Hello world!');
59 | const app = express();
60 | app.use(
61 | devProxy({
62 | target: TARGET
63 | })
64 | );
65 |
66 | await request(app).get('/will-log');
67 |
68 | expect(console.log).toHaveBeenCalledWith(
69 | expect.stringContaining('will-log')
70 | );
71 |
72 | console.log.mockRestore();
73 | });
74 |
75 | test('handles redirects silently when origin is same', async () => {
76 | nock(TARGET)
77 | .get('/will-proxy-to-self')
78 | .reply(301, '', {
79 | Location: TARGET + '/redirected-to'
80 | });
81 |
82 | const app = express();
83 | app.use(
84 | devProxy({
85 | logger,
86 | target: TARGET
87 | })
88 | );
89 |
90 | await expect(
91 | request(app)
92 | .get('/will-proxy-to-self')
93 | .expect(301)
94 | .expect('location', /redirected\-to/)
95 | ).resolves.toBeTruthy();
96 | });
97 |
98 | test('errors informatively on redirect with protocol change', async () => {
99 | nock(TARGET_UNSECURE)
100 | .get('/will-proxy-to-secure')
101 | .reply(301, '', {
102 | Location: TARGET + '/will-proxy-to-secure'
103 | });
104 |
105 | const app = express();
106 | app.use(
107 | devProxy({
108 | logger,
109 | target: TARGET_UNSECURE
110 | })
111 | );
112 |
113 | await expect(
114 | request(app).get('/will-proxy-to-secure')
115 | ).resolves.toMatchObject({
116 | status: 500,
117 | text: expect.stringContaining('redirected to secure HTTPS')
118 | });
119 |
120 | nock(TARGET)
121 | .get('/will-proxy-to-unsecure')
122 | .reply(301, '', {
123 | Location: TARGET_UNSECURE + '/will-proxy-to-unsecure'
124 | })
125 | .get('/will-proxy-to-nowhere')
126 | .reply(302, '', {
127 | Location: 'badprotocol' + TARGET + '/will-proxy-to-nowhere'
128 | });
129 |
130 | const secureApp = express();
131 | secureApp.use(
132 | devProxy({
133 | logger,
134 | target: TARGET
135 | })
136 | );
137 |
138 | await expect(
139 | request(secureApp).get('/will-proxy-to-unsecure')
140 | ).resolves.toMatchObject({
141 | status: 500,
142 | text: expect.stringContaining('redirected to unsecure HTTP')
143 | });
144 |
145 | await expect(
146 | request(secureApp).get('/will-proxy-to-nowhere')
147 | ).resolves.toMatchObject({
148 | status: 500,
149 | text: expect.stringContaining('redirected to unknown protocol')
150 | });
151 | });
152 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/__tests__/OriginSubstitution.spec.js:
--------------------------------------------------------------------------------
1 | const { URL } = require('url');
2 | const request = require('supertest');
3 | const express = require('express');
4 |
5 | const originSubstitution = require('../OriginSubstitution');
6 |
7 | test('swaps origins in html', async () => {
8 | const app = express();
9 | const backendUrl = new URL('https://old.backend:8080');
10 | const frontendUrl = new URL('https://cool.frontend:8081');
11 | app.use(originSubstitution(backendUrl, frontendUrl));
12 | const htmlWithBaseDomain = base =>
13 | `
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 | 
26 | Home
27 |
28 |
29 | `.trim();
30 | app.get('/', (req, res) => res.send(htmlWithBaseDomain(backendUrl)));
31 | await expect(request(app).get('/')).resolves.toMatchObject({
32 | text: htmlWithBaseDomain(frontendUrl)
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/src/WebpackTools/middlewares/__tests__/StaticRootRoute.spec.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path');
2 | const request = require('supertest');
3 | const express = require('express');
4 |
5 | const staticRootRoute = require('../StaticRootRoute');
6 |
7 | test('serves the provided file at root', async () => {
8 | const app = express();
9 | app.use(
10 | staticRootRoute(
11 | resolve(__dirname, '..', '__fixtures__', 'root-available-file.json')
12 | )
13 | );
14 | await expect(
15 | request(app)
16 | .get('/root-available-file.json')
17 | .expect(200)
18 | ).resolves.toMatchObject({
19 | body: {
20 | goodJsonResponse: true
21 | }
22 | });
23 | await expect(
24 | request(app)
25 | .get('/some-other-file')
26 | .expect(404)
27 | ).resolves.toMatchObject({
28 | status: 404
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/MagentoRootComponentsPlugin.spec.js:
--------------------------------------------------------------------------------
1 | const { join } = require('path');
2 | const MemoryFS = require('memory-fs');
3 | const { promisify: pify } = require('util');
4 | const webpack = require('webpack');
5 | const MagentoPageChunksPlugin = require('..');
6 |
7 | const basic3PageProjectDir = join(
8 | __dirname,
9 | '__fixtures__/basic-project-3-pages'
10 | );
11 | const basic1PageProjectDir = join(
12 | __dirname,
13 | '__fixtures__/basic-project-1-page'
14 | );
15 |
16 | const compile = async config => {
17 | const fs = new MemoryFS();
18 | const compiler = webpack(config);
19 | compiler.outputFileSystem = fs;
20 |
21 | return {
22 | fs,
23 | stats: await pify(compiler.run.bind(compiler))()
24 | };
25 | };
26 |
27 | test('Creates a chunk for each root when multiple roots exist', async () => {
28 | const config = {
29 | context: basic3PageProjectDir,
30 | entry: {
31 | main: join(basic3PageProjectDir, 'entry.js')
32 | },
33 | output: {
34 | path: join(basic3PageProjectDir, 'dist'),
35 | filename: '[name].js',
36 | chunkFilename: '[name].chunk.js'
37 | },
38 | plugins: [
39 | new MagentoPageChunksPlugin({
40 | rootComponentsDirs: [
41 | join(basic3PageProjectDir, 'RootComponents')
42 | ]
43 | })
44 | ]
45 | };
46 |
47 | const { stats } = await compile(config);
48 | expect(stats.compilation.assets['Page1.chunk.js']).toBeTruthy();
49 | expect(stats.compilation.assets['Page2.chunk.js']).toBeTruthy();
50 | expect(stats.compilation.assets['Page3.chunk.js']).toBeTruthy();
51 | });
52 |
53 | test('Does not prevent chunk name from being configurable', async () => {
54 | const config = {
55 | context: basic3PageProjectDir,
56 | entry: {
57 | main: join(basic3PageProjectDir, 'entry.js')
58 | },
59 | output: {
60 | path: join(basic3PageProjectDir, 'dist'),
61 | filename: '[name].js',
62 | chunkFilename: '[name].foobar.js'
63 | },
64 | plugins: [
65 | new MagentoPageChunksPlugin({
66 | rootComponentsDirs: [
67 | join(basic3PageProjectDir, 'RootComponents')
68 | ]
69 | })
70 | ]
71 | };
72 |
73 | const { stats } = await compile(config);
74 | expect(stats.compilation.assets['Page1.foobar.js']).toBeTruthy();
75 | });
76 |
77 | test('Writes manifest to location specified with "manifestFileName" option', async () => {
78 | const config = {
79 | context: basic3PageProjectDir,
80 | entry: {
81 | main: join(basic3PageProjectDir, 'entry.js')
82 | },
83 | output: {
84 | path: join(basic3PageProjectDir, 'dist'),
85 | filename: '[name].js',
86 | chunkFilename: '[name].chunk.js'
87 | },
88 | plugins: [
89 | new MagentoPageChunksPlugin({
90 | rootComponentsDirs: [
91 | join(basic3PageProjectDir, 'RootComponents')
92 | ],
93 | manifestFileName: 'manifest.json'
94 | })
95 | ]
96 | };
97 |
98 | const { fs } = await compile(config);
99 | const manifest = fs.readFileSync(
100 | join(basic3PageProjectDir, 'dist/manifest.json'),
101 | 'utf8'
102 | );
103 | expect(manifest).toBeTruthy();
104 | });
105 |
106 | test('Creates chunks for all roots when multiple values are provided in "rootComponentsDirs" config', async () => {
107 | const config = {
108 | context: basic1PageProjectDir,
109 | entry: {
110 | main: join(basic1PageProjectDir, 'entry.js')
111 | },
112 | output: {
113 | path: join(basic1PageProjectDir, 'dist'),
114 | filename: '[name].js',
115 | chunkFilename: '[name].chunk.js'
116 | },
117 | plugins: [
118 | new MagentoPageChunksPlugin({
119 | rootComponentsDirs: [
120 | join(basic3PageProjectDir, 'RootComponents'),
121 | join(basic1PageProjectDir, 'RootComponents')
122 | ]
123 | })
124 | ]
125 | };
126 |
127 | const { stats } = await compile(config);
128 | expect(stats.compilation.assets['Page1.chunk.js']).toBeTruthy();
129 | expect(stats.compilation.assets['SomePage.chunk.js']).toBeTruthy();
130 | });
131 |
132 | test('Works when there is 1 unnamed entry point in the config', async () => {
133 | const config = {
134 | context: basic3PageProjectDir,
135 | entry: join(basic3PageProjectDir, 'entry.js'),
136 | output: {
137 | path: join(basic3PageProjectDir, 'dist'),
138 | filename: '[name].js',
139 | chunkFilename: '[name].chunk.js'
140 | },
141 | plugins: [
142 | new MagentoPageChunksPlugin({
143 | rootComponentsDirs: [
144 | join(basic3PageProjectDir, 'RootComponents')
145 | ],
146 | manifestFileName: 'manifest.json'
147 | })
148 | ]
149 | };
150 |
151 | const { fs } = await compile(config);
152 | const writtenFiles = fs.readdirSync(config.output.path).sort();
153 | const expectedFiles = [
154 | 'Page1.chunk.js',
155 | 'Page2.chunk.js',
156 | 'Page3.chunk.js',
157 | 'main.js', // default entry point name when name isn't provided
158 | 'manifest.json'
159 | ].sort();
160 |
161 | expect(writtenFiles).toEqual(expectedFiles);
162 | });
163 |
164 | test('Includes RootComponent description, pageTypes, and chunk filename in the manifest', async () => {
165 | const config = {
166 | context: basic1PageProjectDir,
167 | entry: join(basic1PageProjectDir, 'entry.js'),
168 | output: {
169 | path: join(basic1PageProjectDir, 'dist'),
170 | filename: '[name].js',
171 | chunkFilename: '[name].chunk.js'
172 | },
173 | plugins: [
174 | new MagentoPageChunksPlugin({
175 | rootComponentsDirs: [
176 | join(basic1PageProjectDir, 'RootComponents')
177 | ],
178 | manifestFileName: 'manifest.json'
179 | })
180 | ]
181 | };
182 |
183 | const { fs } = await compile(config);
184 | const manifest = JSON.parse(
185 | fs.readFileSync(
186 | join(basic1PageProjectDir, 'dist/manifest.json'),
187 | 'utf8'
188 | )
189 | );
190 | expect(manifest.SomePage.pageTypes).toEqual(['cms_page']);
191 | expect(manifest.SomePage.description).toEqual('CMS Page Root Component');
192 | expect(manifest.SomePage.chunkName).toBe('SomePage.chunk.js');
193 | });
194 |
195 | test('Logs warning when RootComponent file has > 1 @RootComponent comment', async () => {
196 | const projectDir = join(__dirname, '__fixtures__/dupe-root-component');
197 | const config = {
198 | context: projectDir,
199 | entry: join(projectDir, 'entry.js'),
200 | output: {
201 | path: join(projectDir, 'dist'),
202 | filename: '[name].js'
203 | },
204 | plugins: [
205 | new MagentoPageChunksPlugin({
206 | rootComponentsDirs: [join(projectDir, 'RootComponents')]
207 | })
208 | ]
209 | };
210 |
211 | jest.spyOn(console, 'warn').mockImplementation(() => {});
212 | await compile(config);
213 | expect(console.warn).toHaveBeenCalledWith(
214 | expect.stringMatching(/Found more than 1 RootComponent Directive/)
215 | );
216 | console.warn.mockRestore();
217 | });
218 |
219 | test('Build fails when no @RootComponent directive is found', async () => {
220 | const projectDir = join(__dirname, '__fixtures__/missing-root-directive');
221 | const config = {
222 | context: projectDir,
223 | entry: join(projectDir, 'entry.js'),
224 | output: {
225 | path: join(projectDir, 'dist'),
226 | filename: '[name].js'
227 | },
228 | plugins: [
229 | new MagentoPageChunksPlugin({
230 | rootComponentsDirs: [join(projectDir, 'RootComponents')]
231 | })
232 | ]
233 | };
234 |
235 | const { stats } = await compile(config);
236 | expect(stats.compilation.errors.length).toBe(1);
237 | const [firstError] = stats.compilation.errors;
238 | expect(firstError.message).toMatch(
239 | /Failed to create chunk for the following file, because it is missing a @RootComponent directive/
240 | );
241 | });
242 |
243 | test('Can resolve dependencies of a RootComponent', async () => {
244 | // https://github.com/DrewML/webpack-loadmodule-bug
245 | const projectDir = join(__dirname, '__fixtures__/root-component-dep');
246 | const config = {
247 | context: projectDir,
248 | entry: join(projectDir, 'entry.js'),
249 | output: {
250 | path: join(projectDir, 'dist'),
251 | filename: '[name].js',
252 | chunkFilename: '[name].chunk.js'
253 | },
254 | plugins: [
255 | new MagentoPageChunksPlugin({
256 | rootComponentsDirs: [join(projectDir, 'RootComponents')]
257 | })
258 | ]
259 | };
260 |
261 | const { fs } = await compile(config);
262 | const chunkStr = fs.readFileSync(
263 | join(projectDir, 'dist/Page1.chunk.js'),
264 | 'utf8'
265 | );
266 | expect(chunkStr).not.toContain('Cannot find module');
267 | });
268 |
269 | test('Uglify compiles out dynamic imports injected into entry point', async () => {
270 | const config = {
271 | context: basic1PageProjectDir,
272 | entry: {
273 | main: join(basic1PageProjectDir, 'entry.js')
274 | },
275 | output: {
276 | path: join(basic1PageProjectDir, 'dist'),
277 | filename: '[name].js',
278 | chunkFilename: '[name].chunk.js'
279 | },
280 | plugins: [
281 | new MagentoPageChunksPlugin({
282 | rootComponentsDirs: [
283 | join(basic1PageProjectDir, 'RootComponents')
284 | ]
285 | }),
286 | new webpack.optimize.UglifyJsPlugin({
287 | keep_fnames: true,
288 | mangle: false
289 | })
290 | ]
291 | };
292 |
293 | const { fs } = await compile(config);
294 | const entryPointSrc = fs.readFileSync(
295 | join(config.output.path, 'main.js'),
296 | 'utf8'
297 | );
298 | expect(entryPointSrc).not.toContain('import()');
299 | expect(entryPointSrc).not.toContain(
300 | 'this_function_will_be_removed_by_uglify'
301 | );
302 | });
303 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/basic-project-1-page/RootComponents/SomePage/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @RootComponent
3 | * pageTypes = cms_page
4 | * description = 'CMS Page Root Component'
5 | */
6 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/basic-project-1-page/entry.js:
--------------------------------------------------------------------------------
1 | // entry
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/basic-project-3-pages/RootComponents/Page1/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @RootComponent
3 | * pageTypes = product_page
4 | */
5 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/basic-project-3-pages/RootComponents/Page2/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @RootComponent
3 | * pageTypes = catalog_page
4 | */
5 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/basic-project-3-pages/RootComponents/Page3/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @RootComponent
3 | * pageTypes = product_page_special
4 | * description = 'Special Product Pages'
5 | */
6 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/basic-project-3-pages/entry.js:
--------------------------------------------------------------------------------
1 | // entry
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/dupe-root-component/RootComponents/Page1/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @RootComponent
3 | * pageTypes = product_page
4 | * description = "test test"
5 | */
6 |
7 | /**
8 | * @RootComponent
9 | * pageTypes = catalog_page
10 | * description = "this is a duplicate"
11 | */
12 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/dupe-root-component/entry.js:
--------------------------------------------------------------------------------
1 | // entry
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/missing-root-directive/RootComponents/Page1/index.js:
--------------------------------------------------------------------------------
1 | // should have a root component directive, but does not
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/missing-root-directive/entry.js:
--------------------------------------------------------------------------------
1 | // entry
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/root-component-dep/RootComponents/Page1/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @RootComponent
3 | * description = "This root component's dependencies should resolve"
4 | */
5 |
6 | import dep from '../../dep';
7 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/root-component-dep/dep.js:
--------------------------------------------------------------------------------
1 | export default 'dep';
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/__tests__/__fixtures__/root-component-dep/entry.js:
--------------------------------------------------------------------------------
1 | // entry
2 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/index.js:
--------------------------------------------------------------------------------
1 | const { isAbsolute, join } = require('path');
2 | const { RawSource } = require('webpack-sources');
3 | const {
4 | rootComponentMap,
5 | seenRootComponents
6 | } = require('./roots-chunk-loader');
7 |
8 | const loaderPath = join(__dirname, 'roots-chunk-loader.js');
9 |
10 | /**
11 | * @description webpack plugin that creates chunks for each
12 | * individual RootComponent in a store, and generates a manifest
13 | * with data for consumption by the backend.
14 | */
15 | class MagentoRootComponentsPlugin {
16 | /**
17 | * @param {object} opts
18 | * @param {string[]} opts.rootComponentsDirs All directories to be searched for RootComponents
19 | * @param {string} opts.manifestFileName Name of the manifest file to be emitted from the build
20 | */
21 | constructor(opts = {}) {
22 | const { rootComponentsDirs, manifestFileName } = opts;
23 | this.rootComponentsDirs = rootComponentsDirs || [
24 | './src/RootComponents'
25 | ];
26 | this.manifestFileName = manifestFileName || 'roots-manifest.json';
27 | }
28 |
29 | apply(compiler) {
30 | const { context } = compiler.options;
31 | const { rootComponentsDirs } = this;
32 |
33 | // Create a list of absolute paths for root components. When a
34 | // relative path is found, resolve it from the root context of
35 | // the webpack build
36 | const rootComponentsDirsAbs = rootComponentsDirs.map(
37 | dir => (isAbsolute(dir) ? dir : join(context, dir))
38 | );
39 |
40 | const moduleByPath = new Map();
41 | compiler.plugin('compilation', compilation => {
42 | compilation.plugin('normal-module-loader', (loaderContext, mod) => {
43 | if (seenRootComponents.has(mod.resource)) {
44 | // The module ("mod") has not been assigned an ID yet,
45 | // so we need to keep a reference to it which will allow
46 | // us to grab the ID during the emit phase
47 | moduleByPath.set(mod.resource, mod);
48 | }
49 | // To create a unique chunk for each RootComponent, we want to inject
50 | // a dynamic import() for each RootComponent, within each entry point.
51 | const isAnEntry = compilation.entries.some(entryMod => {
52 | // Check if the module being constructed matches a defined entry point
53 | if (mod === entryMod) return true;
54 | if (!entryMod.identifier().startsWith('multi')) {
55 | return false;
56 | }
57 |
58 | // If a multi-module entry is used (webpack-dev-server creates one), we
59 | // need to try and match against each dependency in the multi module
60 | return entryMod.dependencies.some(
61 | singleDep => singleDep.module === mod
62 | );
63 | });
64 | if (!isAnEntry) return;
65 |
66 | // If this module is an entry module, inject a loader in the pipeline
67 | // that will force creation of all our RootComponent chunks
68 | mod.loaders.push({
69 | loader: loaderPath,
70 | options: {
71 | rootsDirs: rootComponentsDirsAbs
72 | }
73 | });
74 | });
75 | });
76 |
77 | compiler.plugin('emit', (compilation, cb) => {
78 | // Prepare the manifest that the Magento backend can use
79 | // to pick root components for a page.
80 | const namedChunks = Array.from(
81 | Object.values(compilation.namedChunks)
82 | );
83 | const manifest = namedChunks.reduce((acc, chunk) => {
84 | const { rootDirective, rootComponentPath } =
85 | rootComponentMap.get(chunk.name) || {};
86 | if (!rootDirective) return acc;
87 |
88 | // Index 0 is always the chunk, but it's an Array because
89 | // there could be a source map (which we don't care about)
90 | const [rootComponentFilename] = chunk.files;
91 | acc[chunk.name] = Object.assign(
92 | {
93 | chunkName: rootComponentFilename,
94 | rootChunkID: chunk.id,
95 | rootModuleID: moduleByPath.get(rootComponentPath).id
96 | },
97 | rootDirective
98 | );
99 | return acc;
100 | }, {});
101 |
102 | compilation.assets[this.manifestFileName] = new RawSource(
103 | JSON.stringify(manifest, null, 4)
104 | );
105 | cb();
106 | });
107 | }
108 | }
109 |
110 | module.exports = MagentoRootComponentsPlugin;
111 |
--------------------------------------------------------------------------------
/src/WebpackTools/plugins/MagentoRootComponentsPlugin/roots-chunk-loader.js:
--------------------------------------------------------------------------------
1 | const { EOL } = require('os');
2 | const { join, sep, dirname } = require('path');
3 | const { promisify: pify } = require('util');
4 | const directiveParser = require('@magento/directive-parser');
5 |
6 | /**
7 | * By design, this loader ignores the input content. The loader's sole purpose
8 | * is to dynamically generate import() expressions that tell webpack to create
9 | * chunks for each Root Component in a Magento theme
10 | */
11 | module.exports = async function rootComponentsChunkLoader(src) {
12 | // Using `this.async()` because webpack's loader-runner lib has a super broken implementation
13 | // of promise support
14 | const cb = this.async();
15 | const readFile = pify(this.fs.readFile.bind(this.fs));
16 |
17 | try {
18 | const rootsDirs = this.query.rootsDirs;
19 |
20 | const readdir = pify(this.fs.readdir.bind(this.fs));
21 | const dirEntries = flatten(
22 | await Promise.all(
23 | rootsDirs.map(async dir => {
24 | const dirs = await readdir(dir);
25 | return dirs.map(d => join(dir, d));
26 | })
27 | )
28 | );
29 |
30 | const stat = pify(this.fs.stat.bind(this.fs));
31 | const dirs = await asyncFilter(dirEntries, async dir => {
32 | return (await stat(dir)).isDirectory();
33 | });
34 |
35 | const sources = await Promise.all(
36 | dirs.map(async dir => {
37 | const rootComponentPath = join(dir, 'index.js'); // index.js should probably be configurable
38 | // `this.loadModule` would typically be used here, but we can't use it due to a bug
39 | // https://github.com/DrewML/webpack-loadmodule-bug. Instead, we do a read from webpack's MemoryFS.
40 | // The `toString` is necessary because webpack's implementation of the `fs` API doesn't respect the
41 | // encoding param, so the returned value is a Buffer. We don't actually _need_ `this.loadModule`,
42 | // since we're not running the source through a full ECMAScript parser (so we don't need the file post-loaders)
43 | const src = (await readFile(rootComponentPath)).toString();
44 |
45 | return {
46 | rootComponentPath,
47 | src
48 | };
49 | })
50 | );
51 |
52 | sources.forEach(({ rootComponentPath, src }) => {
53 | const { directives = [], errors } = directiveParser(src);
54 | if (errors.length) {
55 | console.warn(
56 | `Found PWA Studio Directive warning in ${rootComponentPath}`
57 | );
58 | }
59 | const rootComponentDirectives = directives.filter(
60 | d => d.type === 'RootComponent'
61 | );
62 |
63 | if (rootComponentDirectives.length > 1) {
64 | console.warn(
65 | `Found more than 1 RootComponent Directive in ${rootComponentPath}. Only the first will be used`
66 | );
67 | }
68 |
69 | // Because this error is reported from the loader for an entry point, webpack CLI shows
70 | // the error happening within an entry point for the project, rather than the file
71 | // that is missing a directive. TODO: Find a way to report the error for the correct module.
72 | // Likely involves passing the error back to `MagentoRootComponentsPlugin`
73 | if (!rootComponentDirectives.length) {
74 | throw new Error(
75 | `Failed to create chunk for the following file, because it is missing a @RootComponent directive: ${rootComponentPath}`
76 | );
77 | }
78 |
79 | rootComponentMap.set(
80 | chunkNameFromRootComponentDir(dirname(rootComponentPath)),
81 | { rootDirective: rootComponentDirectives[0], rootComponentPath }
82 | );
83 | // We already have the rootComponentPath in the rootComponenMap,
84 | // but we need quick "has" validation later, and this won't force us
85 | // to iterate a Map each time looking for a match
86 | seenRootComponents.add(rootComponentPath);
87 | });
88 |
89 | const dynamicImportCalls = generateDynamicImportCode(dirs);
90 | const finalSrc = `${src};${EOL}${EOL}${dynamicImportCalls}`;
91 | // The entry point source in the graph will now contain the code authored
92 | // in the entry point's file + a dynamic import() for each RootComponent
93 | cb(null, finalSrc);
94 | } catch (err) {
95 | cb(err);
96 | }
97 | };
98 |
99 | const rootComponentMap = new Map();
100 | const seenRootComponents = new Set();
101 | Object.assign(module.exports, { rootComponentMap, seenRootComponents });
102 |
103 | /**
104 | * @description webpack does not provide a programmatic API to create chunks for
105 | * n files. To get around this, we inject an (unused) function declaration in the entry point,
106 | * that wraps n number of import() calls. This will force webpack to create the chunks we need
107 | * for each RootComponent, but will allow UglifyJS to remove the wrapper function
108 | * (and the dynamic import calls) from the final bundle.
109 | * @param {string[]} dirs
110 | * @returns {string}
111 | */
112 | function generateDynamicImportCode(dirs) {
113 | // TODO: Dig deeper for an API to programatically create chunks, because
114 | // generating strings of JS is far from ideal
115 | const dynamicImportsStr = dirs
116 | .map(dir => {
117 | const chunkName = chunkNameFromRootComponentDir(dir);
118 | // Right now, Root Components are assumed to always be the `index.js` inside of a
119 | // top-level dir in a specified root dir. We can change this to something else or
120 | // make it configurable later
121 | const fullPath = join(dir, 'index.js');
122 | return `import(/* webpackChunkName: "${chunkName}" */ '${fullPath}')`;
123 | })
124 | .join('\n\n');
125 |
126 | // Note: the __PURE__ comment ensures UglifyJS won't include
127 | // the unnecessary function in the output
128 | return `
129 | /** Automatically injected by the webpack Magento Plugin **/
130 | /*#__PURE__*/function this_function_will_be_removed_by_uglify() {
131 | ${dynamicImportsStr}
132 | }
133 | `;
134 | }
135 |
136 | /**
137 | * @param {string} dir
138 | */
139 | function chunkNameFromRootComponentDir(dir) {
140 | return dir.split(sep).slice(-1)[0];
141 | }
142 |
143 | /**
144 | * @template T
145 | * @param {T[]} array
146 | * @param {(item: T) => boolean} predicate
147 | * @returns {T[]}
148 | */
149 | async function asyncFilter(array, predicate) {
150 | const results = await Promise.all(
151 | array.map((...args) => promiseBoolReflect(predicate(...args)))
152 | );
153 |
154 | return array.filter((_, i) => results[i]);
155 | }
156 |
157 | /**
158 | * @param {Promise
74 | Should remove container below
75 |
76 |
77 | `,
78 | 'createElement'
79 | );
80 | expect(result).toMatchSnapshot();
81 | });
82 |
83 | test('"removeContainer" operation removes container', () => {
84 | const opts = {
85 | config: {
86 | 'product.page': [
87 | {
88 | operation: 'removeContainer',
89 | targetContainer: 'product.page'
90 | }
91 | ]
92 | }
93 | };
94 | const result = transform(
95 | opts,
96 | dedent`
97 | import React from 'react';
98 |
99 | Should remove container below
100 |
101 |
102 | `
103 | );
104 | expect(result).toMatchSnapshot();
105 | });
106 |
107 | test('"removeChild" operation removes specified child, but not other children', () => {
108 | const opts = {
109 | config: {
110 | 'product.page.pricing': [
111 | {
112 | operation: 'removeChild',
113 | targetContainer: 'product.page.pricing',
114 | targetChild: 'product.page.pricing.add.button'
115 | }
116 | ]
117 | }
118 | };
119 | const result = transform(
120 | opts,
121 | dedent`
122 | import React from 'react';
123 | import { ContainerChild } from '@magento/peregrine';
124 |
125 |
128 |
136 | `
137 | );
138 | expect(result).toMatchSnapshot();
139 | });
140 |
141 | test('A removeChild operation works when ContainerChild is aliased in import', () => {
142 | const opts = {
143 | config: {
144 | 'product.page.pricing': [
145 | {
146 | operation: 'removeChild',
147 | targetContainer: 'product.page.pricing',
148 | targetChild: 'product.page.pricing.add.button'
149 | }
150 | ]
151 | }
152 | };
153 | const result = transform(
154 | opts,
155 | dedent`
156 | import React from 'react';
157 | import { ContainerChild as CC } from '@magento/peregrine';
158 | I should not render
129 | }
130 | />
131 | I should render
}
134 | />
135 |
159 |
162 |
166 | `
167 | );
168 | expect(result).toMatchSnapshot();
169 | });
170 |
171 | test('"insertBefore" injects an extension before its target ContainerChild', () => {
172 | const opts = {
173 | config: {
174 | 'product.page.pricing': [
175 | {
176 | operation: 'insertBefore',
177 | targetContainer: 'product.page.pricing',
178 | targetChild: 'product.page.pricing.add.button',
179 | componentPath: '/Users/person/components/SomeComponent.js'
180 | }
181 | ]
182 | }
183 | };
184 | const result = transform(
185 | opts,
186 | dedent`
187 | import React from 'react';
188 | import { ContainerChild } from '@magento/peregrine';
189 | I should not render
163 | }
164 | />
165 |
190 | {}}
193 | />
194 |
195 | `
196 | );
197 | expect(result).toMatchSnapshot();
198 | });
199 |
200 | test('"insertAfter" injects an extension after its target ContainerChild', () => {
201 | const opts = {
202 | config: {
203 | 'product.page.pricing': [
204 | {
205 | operation: 'insertAfter',
206 | targetContainer: 'product.page.pricing',
207 | targetChild: 'product.page.pricing.add.button',
208 | componentPath: '/Users/person/components/SomeComponent.js'
209 | }
210 | ]
211 | }
212 | };
213 | const result = transform(
214 | opts,
215 | dedent`
216 | import React from 'react';
217 | import { ContainerChild } from '@magento/peregrine';
218 |
219 | {}}
222 | />
223 |
224 | `
225 | );
226 | expect(result).toMatchSnapshot();
227 | });
228 |
--------------------------------------------------------------------------------
/src/magento-layout-loader/__tests__/magento-layout-loader.spec.js:
--------------------------------------------------------------------------------
1 | const { join } = require('path');
2 | const MemoryFS = require('memory-fs');
3 | const { promisify: pify } = require('util');
4 | const webpack = require('webpack');
5 | const magentoLayoutLoaderPath = require.resolve('..');
6 |
7 | const compile = async config => {
8 | const fs = new MemoryFS();
9 | const compiler = webpack(config);
10 | compiler.outputFileSystem = fs;
11 |
12 | return {
13 | fs,
14 | stats: await pify(compiler.run.bind(compiler))()
15 | };
16 | };
17 |
18 | const babelLoaderConfig = {
19 | loader: 'babel-loader',
20 | options: {
21 | plugins: ['transform-react-jsx'],
22 | babelrc: false
23 | }
24 | };
25 |
26 | test('Warnings from babel plugin are mapped to the correct webpack module', async () => {
27 | const fixtureRoot = join(__dirname, '__fixtures__/only-entry');
28 | const config = {
29 | entry: join(fixtureRoot, 'index.js'),
30 | output: {
31 | path: join(fixtureRoot, 'dist')
32 | },
33 | module: {
34 | rules: [
35 | {
36 | test: /\.js/,
37 | use: [
38 | {
39 | loader: magentoLayoutLoaderPath,
40 | options: { config: {} }
41 | },
42 | babelLoaderConfig
43 | ]
44 | }
45 | ]
46 | }
47 | };
48 |
49 | const { compilation } = (await compile(config)).stats;
50 | const [entryModule] = compilation.entries;
51 | const [warning] = entryModule.warnings;
52 | expect(warning.message).toContain(
53 | '"data-mid" found on a Composite Component'
54 | );
55 | });
56 |
--------------------------------------------------------------------------------
/src/magento-layout-loader/__tests__/validateConfig.spec.js:
--------------------------------------------------------------------------------
1 | const validateConfig = require('../validateConfig');
2 |
3 | test('Returns actionable error for missing required field', () => {
4 | const config = {
5 | 'foo.bar': [
6 | {
7 | operation: 'removeContainer'
8 | }
9 | ]
10 | };
11 | const { error } = validateConfig(config);
12 | expect(error).toContain('should have required property');
13 | });
14 |
15 | test('Returns actionable error for typos/extra props', () => {
16 | const config = {
17 | 'foo.bar': [
18 | {
19 | operation: 'removeContainer',
20 | targetcontainer: 'foo.bar'
21 | }
22 | ]
23 | };
24 | const { error } = validateConfig(config);
25 | expect(error).toContain('should NOT have additional properties');
26 | });
27 |
28 | test('Returns actionable error for incorrect types', () => {
29 | const config = {
30 | 'foo.bar': [
31 | {
32 | operation: 'removeContainer',
33 | targetContainer: 1
34 | }
35 | ]
36 | };
37 | const { error } = validateConfig(config);
38 | // Note: The full error returned here doesn't specify
39 | // which field had the wrong type, which is awful. Should
40 | // iterate on this further
41 | expect(error).toContain('should be string');
42 | });
43 |
44 | test('Validates all configs for a single Container', () => {
45 | const config = {
46 | 'foo.bar': [
47 | {
48 | // correct
49 | operation: 'removeContainer',
50 | targetContainer: 'foo.bar'
51 | },
52 | {
53 | // wrong
54 | operation: 'removeChild',
55 | targetContainer: 'bizz.bazz'
56 | }
57 | ]
58 | };
59 | const { error } = validateConfig(config);
60 | expect(error).toContain('should have required property');
61 | });
62 |
63 | test('Validates all configs for multiple Containers', () => {
64 | const config = {
65 | 'foo.bar': [
66 | {
67 | // correct
68 | operation: 'removeContainer',
69 | targetContainer: 'foo.bar'
70 | }
71 | ],
72 | 'bizz.bazz': [
73 | {
74 | // wrong
75 | operation: 'removeChild',
76 | targetContainer: 'bizz.bazz'
77 | }
78 | ]
79 | };
80 | const { error } = validateConfig(config);
81 | expect(error).toContain('should have required property');
82 | });
83 |
--------------------------------------------------------------------------------
/src/magento-layout-loader/babel-plugin-magento-layout.js:
--------------------------------------------------------------------------------
1 | const validateConfig = require('./validateConfig');
2 | const { addDefault } = require('babel-helper-module-imports');
3 |
4 | const noop = () => {};
5 | module.exports = babelPluginMagentoLayout;
6 |
7 | function babelPluginMagentoLayout({ types: t }) {
8 | // Babel 6 only let's you read plugin options inside visitors,
9 | // so we can't warn about an invalid config until the first file is hit.
10 | // TODO: In Babel 7, use config passed in when plugin is first created. For now,
11 | // this hacky flag is kept in a closure to prevent us from doing config validation
12 | // on every file transformed
13 | let validationRan;
14 |
15 | return {
16 | visitor: {
17 | Program: {
18 | // Our plugin could be (and frequently is) running along with other Babel
19 | // plugins, including the JSX transform. Babel's visitor merging behavior
20 | // will make this plugin susceptible to hard-to-debug plugin/preset ordering
21 | // issues. To avoid this entirely, we don't start our work until the depth-first
22 | // traversal of the AST completes. On Program:exit, we can safely start our work
23 | exit(programPath, state) {
24 | // Babel 6 only let's you read plugin options inside visitors,
25 | // so we can't warn about an invalid config until the first file is hit.
26 | // TODO: In Babel 7, use config passed in when plugin is first created
27 | const {
28 | config,
29 | prod = false,
30 | onWarning = noop,
31 | onError = noop
32 | } = state.opts;
33 |
34 | if (!validationRan) {
35 | validationRan = true;
36 | if (typeof prod !== 'boolean') {
37 | onError(
38 | `Expected "prod" to be a boolean, but received "${typeof prod}"`
39 | );
40 | }
41 | if (typeof config !== 'object') {
42 | onError(
43 | `Expected "config" to be an object, but received "${typeof config}"`
44 | );
45 | }
46 |
47 | const { passed, error } = validateConfig(config);
48 | if (!passed) {
49 | // Warn about invalid config, but let the compilation
50 | // keep going
51 | onWarning(error);
52 | }
53 | }
54 |
55 | // We need to find any identifiers in scope that could be used to call
56 | // React's `createElement` function.
57 | const reactModuleImports = identifiersInScopeFromModule(
58 | programPath,
59 | /^react$/
60 | );
61 | const {
62 | reactIdentifier,
63 | createElementIdentifier
64 | } = reactModuleImports.reduce((acc, importData) => {
65 | if (importData.bindingName === 'default') {
66 | acc.reactIdentifier = importData.local;
67 | }
68 | if (importData.bindingName === 'createElement') {
69 | acc.createElementIdentifier = importData.local;
70 | }
71 | return acc;
72 | }, {});
73 |
74 | // No element creation in this file, so we bail
75 | if (!(reactIdentifier || createElementIdentifier)) {
76 | return;
77 | }
78 |
79 | // Start the transformation traversal
80 | programPath.traverse({
81 | CallExpression(path) {
82 | const isCECall = isCreateElementCall(
83 | path,
84 | reactIdentifier,
85 | createElementIdentifier
86 | );
87 | if (!isCECall) return;
88 |
89 | const [element] = path.get('arguments');
90 | const dataMIDPropNode = getProp(path, 'data-mid');
91 | if (!dataMIDPropNode) return;
92 |
93 | const { value: dataMID, type } = dataMIDPropNode;
94 | if (type !== 'StringLiteral') {
95 | onWarning(
96 | 'Expected "data-mid" to be a literal string, ' +
97 | `but instead found a value of type "${type}"`
98 | );
99 | }
100 |
101 | if (!t.isStringLiteral(element)) {
102 | onWarning(
103 | '"data-mid" found on a Composite Component.' +
104 | 'Only DOM elements(div/span/etc) can be a Layout Container'
105 | );
106 | }
107 |
108 | const operations = config[dataMID];
109 | // No operations were registered for this Container
110 | if (!(operations && operations.length)) {
111 | return;
112 | }
113 |
114 | new ContainerOperationsProcessor({
115 | types: t,
116 | operations,
117 | containerPath: path,
118 | containerMID: dataMID,
119 | program: programPath,
120 | reactIdentifier,
121 | createElementIdentifier,
122 | onWarning,
123 | onError
124 | }).execute();
125 | }
126 | });
127 | }
128 | }
129 | }
130 | };
131 | }
132 |
133 | class ContainerOperationsProcessor {
134 | constructor({
135 | types,
136 | operations,
137 | containerPath,
138 | containerMID,
139 | program,
140 | reactIdentifier,
141 | createElementIdentifier,
142 | onWarning,
143 | onError
144 | }) {
145 | Object.assign(this, {
146 | types,
147 | operations,
148 | containerPath,
149 | containerMID,
150 | program,
151 | reactIdentifier,
152 | createElementIdentifier,
153 | onWarning,
154 | onError
155 | });
156 | this.step = 0;
157 | this.cachedContainerChildIdent = null;
158 | }
159 |
160 | get currentOperation() {
161 | return this.operations[this.step];
162 | }
163 |
164 | get isDone() {
165 | return this.step + 1 > this.operations.length;
166 | }
167 |
168 | execute() {
169 | while (!this.isDone) {
170 | this[this.currentOperation.operation]();
171 | ++this.step;
172 | }
173 | }
174 |
175 | /**
176 | * Determine the local identifier for Peregrine's `ContainerChild` component.
177 | * This method makes the assumption that the module specifier for a Peregrine
178 | * import will always be `@magento/peregrine`. Can make this configurable in the
179 | * future if necessary.
180 | * @returns {string|null}
181 | */
182 | getContainerChildIdentifier() {
183 | const { cachedContainerChildIdent } = this;
184 | if (cachedContainerChildIdent) return cachedContainerChildIdent;
185 |
186 | const { program } = this;
187 | const containerChildIdent = identifiersInScopeFromModule(
188 | program,
189 | /^@magento\/peregrine$/
190 | ).find(({ bindingName }) => bindingName === 'ContainerChild');
191 |
192 | if (containerChildIdent) {
193 | this.cachedContainerChildIdent = containerChildIdent.local;
194 | }
195 |
196 | return this.cachedContainerChildIdent;
197 | }
198 |
199 | /**
200 | * Given the identifier for a