From 36d8157225076a6d9bd678bc2f21d884350cf000 Mon Sep 17 00:00:00 2001 From: zetlen Date: Fri, 10 Aug 2018 12:37:59 -0500 Subject: [PATCH] fix(dev): merge 'assets' and 'output' paths - Remove the concept of the "assets" directory entirely, and set the "output" directory to be just "web/". - Remove the old logo asset from /web/ (pre-Venia rebrand!) - Gitignore entire "web" directory - Set JS files to output to 'web/js' subdirectory by adding directory prefix to `output.filename` and `output.chunkFilename` - Modify tests, documentation, and type expectations to remove `paths.assets` --- .eslintignore | 1 + .gitignore | 1 + .prettierignore | 1 + packages/pwa-buildpack/README.md | 3 +- packages/pwa-buildpack/docs/PWADevServer.md | 3 +- .../pwa-buildpack/docs/ServiceWorkerPlugin.md | 7 ++--- .../src/WebpackTools/PWADevServer.js | 3 +- .../__tests__/PWADevServer.spec.js | 18 +++++------ .../plugins/ServiceWorkerPlugin.js | 4 +-- .../__tests__/ServiceWorkerPlugin.spec.js | 10 +++--- .../create-configuration-files/index.md | 9 +++--- .../webpack-config-example/index.md | 7 ++--- .../reference/object-types/index.md | 1 - .../reference/pwa-dev-server/index.md | 3 +- .../reference/serviceworker-plugin/index.md | 3 +- packages/venia-concept/web/images/logo.svg | 31 ------------------- packages/venia-concept/webpack.config.js | 7 ++--- 17 files changed, 35 insertions(+), 77 deletions(-) delete mode 100644 packages/venia-concept/web/images/logo.svg diff --git a/.eslintignore b/.eslintignore index fadcbee55e..acfc92aca5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ __fixtures__ dist pwa-devdocs +packages/venia-concept/web diff --git a/.gitignore b/.gitignore index af00b74a59..2529f8d8fe 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ test-report.xml test-results.json lerna-debug.log .env +packages/venia-concept/web diff --git a/.prettierignore b/.prettierignore index 28682829cf..9d57a7f4b6 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,3 +3,4 @@ package-lock.json dist web/js pwa-devdocs +packages/venia-concept/web diff --git a/packages/pwa-buildpack/README.md b/packages/pwa-buildpack/README.md index 7e4ae97951..ef41a706a6 100644 --- a/packages/pwa-buildpack/README.md +++ b/packages/pwa-buildpack/README.md @@ -218,8 +218,7 @@ which reads an ini-formatted file to set the environment. const themePaths = { src: path.resolve(__dirname, 'src'), - assets: path.resolve(__dirname, 'web'), - output: path.resolve(__dirname, 'web/js') + output: path.resolve(__dirname, 'web') }; ``` diff --git a/packages/pwa-buildpack/docs/PWADevServer.md b/packages/pwa-buildpack/docs/PWADevServer.md index 5b96a25bdc..cc34bf1561 100644 --- a/packages/pwa-buildpack/docs/PWADevServer.md +++ b/packages/pwa-buildpack/docs/PWADevServer.md @@ -21,8 +21,7 @@ module.exports = async env => { backendDomain: 'https://magento2.localdomain', serviceWorkerFileName: 'sw.js', paths: { - output: path.resolve(__dirname, 'web/js'), - assets: path.resolve(__dirname, 'web') + output: path.resolve(__dirname, 'web/'), }, id: 'magento-venia' }) diff --git a/packages/pwa-buildpack/docs/ServiceWorkerPlugin.md b/packages/pwa-buildpack/docs/ServiceWorkerPlugin.md index bf7d88070a..30b34b61e0 100644 --- a/packages/pwa-buildpack/docs/ServiceWorkerPlugin.md +++ b/packages/pwa-buildpack/docs/ServiceWorkerPlugin.md @@ -33,8 +33,7 @@ module.exports = async env => { }, paths: { - output: path.resolve(__dirname, 'web/js'), - assets: path.resolve(__dirname, 'web') + output: path.resolve(__dirname, 'web') }, enableServiceWorkerDebugging: true, serviceWorkerFileName: 'sw.js', @@ -63,9 +62,9 @@ Plugin constructor for the `ServiceWorkerPlugin` class. `paths: Object` **(Required)** The local absolute paths to theme folders. -- `paths.assets: String` +- `paths.output: String` - The directory for public static assets. + The directory for build output. `enableServiceWorkerDebugging: Boolean` When `true`, hot reloading is enabled and the ServiceWorker is active in the document root, regardless of the publicPath value. diff --git a/packages/pwa-buildpack/src/WebpackTools/PWADevServer.js b/packages/pwa-buildpack/src/WebpackTools/PWADevServer.js index b7418d4870..7deb35e2c5 100644 --- a/packages/pwa-buildpack/src/WebpackTools/PWADevServer.js +++ b/packages/pwa-buildpack/src/WebpackTools/PWADevServer.js @@ -19,7 +19,6 @@ const PWADevServer = { publicPath: 'string', backendDomain: 'string', 'paths.output': 'string', - 'paths.assets': 'string', serviceWorkerFileName: 'string' }), hostnamesById: new GlobalConfig({ @@ -165,7 +164,7 @@ const PWADevServer = { }, after(app) { // set static server to load and serve from different paths - app.use(config.publicPath, express.static(config.paths.assets)); + app.use(config.publicPath, express.static(config.paths.output)); // proxy to backend app.use( diff --git a/packages/pwa-buildpack/src/WebpackTools/__tests__/PWADevServer.spec.js b/packages/pwa-buildpack/src/WebpackTools/__tests__/PWADevServer.spec.js index 2054a142c9..f9eff95d8c 100644 --- a/packages/pwa-buildpack/src/WebpackTools/__tests__/PWADevServer.spec.js +++ b/packages/pwa-buildpack/src/WebpackTools/__tests__/PWADevServer.spec.js @@ -218,15 +218,15 @@ test('.configure() throws errors on missing config', async () => { id: 'foo', publicPath: 'bar', backendDomain: 'https://dumb.domain', - paths: { output: 'output' } + paths: { output: 1234 } }) - ).rejects.toThrow('paths.assets must be of type string'); + ).rejects.toThrow('paths.output must be of type string'); await expect( PWADevServer.configure({ id: 'foo', publicPath: 'bar', backendDomain: 'https://dumb.domain', - paths: { output: 'foo', assets: 'bar' } + paths: { output: 'foo' } }) ).rejects.toThrow('serviceWorkerFileName must be of type string'); }); @@ -243,8 +243,7 @@ test('.configure() gets or creates an SSL cert', async () => { const server = await PWADevServer.configure({ id: 'heckin', paths: { - output: 'good', - assets: 'boye' + output: 'good' }, publicPath: 'bork', serviceWorkerFileName: 'doin', @@ -267,8 +266,7 @@ test('.configure() returns a configuration object for the `devServer` property o const config = { id: 'Theme_Unique_Id', paths: { - output: 'path/to/static', - assets: 'path/to/assets' + output: 'path/to/static' }, publicPath: 'full/path/to/publicPath', serviceWorkerFileName: 'swname.js', @@ -307,8 +305,7 @@ test('.configure() returns a configuration object with before() and after() hand const config = { id: 'Theme_Unique_Id', paths: { - output: 'path/to/static', - assets: 'path/to/assets' + output: 'path/to/static' }, publicPath: 'full/path/to/publicPath', serviceWorkerFileName: 'swname.js', @@ -364,8 +361,7 @@ test('.configure() optionally adds OriginSubstitution middleware', async () => { const config = { id: 'Theme_Unique_Id', paths: { - output: 'path/to/static', - assets: 'path/to/assets' + output: 'path/to/static' }, publicPath: 'full/path/to/publicPath', serviceWorkerFileName: 'swname.js', diff --git a/packages/pwa-buildpack/src/WebpackTools/plugins/ServiceWorkerPlugin.js b/packages/pwa-buildpack/src/WebpackTools/plugins/ServiceWorkerPlugin.js index eb323b72e7..bd3f483a92 100644 --- a/packages/pwa-buildpack/src/WebpackTools/plugins/ServiceWorkerPlugin.js +++ b/packages/pwa-buildpack/src/WebpackTools/plugins/ServiceWorkerPlugin.js @@ -7,7 +7,7 @@ class ServiceWorkerPlugin { static validateOptions = optionsValidator('ServiceWorkerPlugin', { 'env.phase': 'string', serviceWorkerFileName: 'string', - 'paths.assets': 'string' + 'paths.output': 'string' }); constructor(config) { ServiceWorkerPlugin.validateOptions('ServiceWorkerPlugin', config); @@ -17,7 +17,7 @@ class ServiceWorkerPlugin { const config = { // `globDirectory` and `globPatterns` must match at least 1 file // otherwise workbox throws an error - globDirectory: this.config.paths.assets, + globDirectory: this.config.paths.output, // TODO: (feature) autogenerate glob patterns from asset manifest globPatterns: ['**/*.{gif,jpg,png,svg}'], diff --git a/packages/pwa-buildpack/src/WebpackTools/plugins/__tests__/ServiceWorkerPlugin.spec.js b/packages/pwa-buildpack/src/WebpackTools/plugins/__tests__/ServiceWorkerPlugin.spec.js index dd2f11ac73..b751a9bb0e 100644 --- a/packages/pwa-buildpack/src/WebpackTools/plugins/__tests__/ServiceWorkerPlugin.spec.js +++ b/packages/pwa-buildpack/src/WebpackTools/plugins/__tests__/ServiceWorkerPlugin.spec.js @@ -19,7 +19,7 @@ test('throws if options are missing', () => { env: { phase: 'development' }, serviceWorkerFileName: 'file.name' }) - ).toThrow('paths.assets must be of type string'); + ).toThrow('paths.output must be of type string'); }); test('returns a valid Webpack plugin', () => { @@ -31,7 +31,7 @@ test('returns a valid Webpack plugin', () => { serviceWorkerFileName: 'sw.js', runtimeCacheAssetPath: 'https://location/of/assets', paths: { - assets: 'path/to/assets' + output: 'path/to/assets' } }) ).toHaveProperty('apply', expect.any(Function)); @@ -45,7 +45,7 @@ test('.apply calls WorkboxPlugin.GenerateSW in prod', () => { serviceWorkerFileName: 'sw.js', runtimeCacheAssetPath: 'https://location/of/assets', paths: { - assets: 'path/to/assets' + output: 'path/to/assets' } }); const workboxApply = jest.fn(); @@ -75,7 +75,7 @@ test('.apply calls nothing but warns in console in dev', () => { serviceWorkerFileName: 'sw.js', runtimeCacheAssetPath: 'https://location/of/assets', paths: { - assets: 'path/to/assets' + output: 'path/to/assets' } }); jest.spyOn(console, 'warn').mockImplementationOnce(() => {}); @@ -103,7 +103,7 @@ test('.apply generates and writes out a serviceworker when enableServiceWorkerDe serviceWorkerFileName: 'sw.js', runtimeCacheAssetPath: 'https://location/of/assets', paths: { - assets: 'path/to/assets' + output: 'path/to/assets' } }); diff --git a/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/index.md b/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/index.md index 3ed71bf8d4..9b1dca193e 100644 --- a/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/index.md +++ b/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/index.md @@ -103,13 +103,12 @@ const { Add the following content to `webpack.config.js` to define the paths to your theme resources: -``` javascript +``` javascript const path = require('path'); const themePaths = { src: path.resolve(__dirname, 'src'), - assets: path.resolve(__dirname, 'web'), - output: path.resolve(__dirname, 'web/js'), + output: path.resolve(__dirname, 'web'), }; ``` @@ -132,8 +131,8 @@ module.exports = async function(env) { output: { path: themePaths.output, publicPath: process.env.MAGENTO_BACKEND_PUBLIC_PATH, - filename: '[name].js', - chunkFilename: '[name].js' + filename: 'js/[name].js', + chunkFilename: 'js/[name]-[chunkhash].js' }, module: { rules: [ diff --git a/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/webpack-config-example/index.md b/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/webpack-config-example/index.md index 4ef9e67a3c..ea818ca479 100644 --- a/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/webpack-config-example/index.md +++ b/packages/pwa-devdocs/src/pwa-buildpack/project-setup/create-configuration-files/webpack-config-example/index.md @@ -21,8 +21,7 @@ const path = require('path'); const themePaths = { src: path.resolve(__dirname, 'src'), - assets: path.resolve(__dirname, 'web'), - output: path.resolve(__dirname, 'web/js'), + output: path.resolve(__dirname, 'web') }; module.exports = async function(env) { @@ -34,8 +33,8 @@ module.exports = async function(env) { output: { path: themePaths.output, publicPath: process.env.MAGENTO_BACKEND_PUBLIC_PATH, - filename: '[name].js', - chunkFilename: '[name].js' + filename: 'js/[name].js', + chunkFilename: 'js/[name]-[chunkhash].js' }, module: { rules: [ diff --git a/packages/pwa-devdocs/src/pwa-buildpack/reference/object-types/index.md b/packages/pwa-devdocs/src/pwa-buildpack/reference/object-types/index.md index 71d2d1929e..5201660c54 100644 --- a/packages/pwa-devdocs/src/pwa-buildpack/reference/object-types/index.md +++ b/packages/pwa-devdocs/src/pwa-buildpack/reference/object-types/index.md @@ -10,7 +10,6 @@ This is a list of common object types shared between the PWA-Buildpack modules. | ---------------- | ---------------------------------------------------------------------------- | | `root: string` | The absolute path of the project's root directory on the working filesystem. | | `output: string` | The directory where webpack should output any built assets. | -| `assets: string` | The directory where any assets not explicitly build by webpack is found. | {:style="table-layout:auto"} ### Output location diff --git a/packages/pwa-devdocs/src/pwa-buildpack/reference/pwa-dev-server/index.md b/packages/pwa-devdocs/src/pwa-buildpack/reference/pwa-dev-server/index.md index b09d2ec4ce..61e23c57f1 100644 --- a/packages/pwa-devdocs/src/pwa-buildpack/reference/pwa-dev-server/index.md +++ b/packages/pwa-devdocs/src/pwa-buildpack/reference/pwa-dev-server/index.md @@ -73,8 +73,7 @@ module.exports = async env => { backendDomain: 'https://magento2.localdomain', serviceWorkerFileName: 'sw.js', paths: { - output: path.resolve(__dirname, 'web/js'), - assets: path.resolve(__dirname, 'web') + output: path.resolve(__dirname, 'web') }, id: 'magento-venia' }) diff --git a/packages/pwa-devdocs/src/pwa-buildpack/reference/serviceworker-plugin/index.md b/packages/pwa-devdocs/src/pwa-buildpack/reference/serviceworker-plugin/index.md index f57fe6f94a..046c20cc82 100644 --- a/packages/pwa-devdocs/src/pwa-buildpack/reference/serviceworker-plugin/index.md +++ b/packages/pwa-devdocs/src/pwa-buildpack/reference/serviceworker-plugin/index.md @@ -61,8 +61,7 @@ module.exports = async env => { }, paths: { - output: path.resolve(__dirname, 'web/js'), - assets: path.resolve(__dirname, 'web') + output: path.resolve(__dirname, 'web') }, enableServiceWorkerDebugging: true, serviceWorkerFileName: 'sw.js', diff --git a/packages/venia-concept/web/images/logo.svg b/packages/venia-concept/web/images/logo.svg deleted file mode 100644 index 556d839b8b..0000000000 --- a/packages/venia-concept/web/images/logo.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/venia-concept/webpack.config.js b/packages/venia-concept/webpack.config.js index ba2cd54f14..07b409ae67 100644 --- a/packages/venia-concept/webpack.config.js +++ b/packages/venia-concept/webpack.config.js @@ -17,8 +17,7 @@ const configureBabel = require('./babel.config.js'); const themePaths = { src: path.resolve(__dirname, 'src'), - assets: path.resolve(__dirname, 'web'), - output: path.resolve(__dirname, 'web/js') + output: path.resolve(__dirname, 'web') }; // mark dependencies for vendor bundle @@ -42,8 +41,8 @@ module.exports = async function(env) { output: { path: themePaths.output, publicPath: process.env.MAGENTO_BACKEND_PUBLIC_PATH, - filename: '[name].js', - chunkFilename: '[name]-[chunkhash].js', + filename: 'js/[name].js', + chunkFilename: 'js/[name]-[chunkhash].js', pathinfo: true }, module: {