Merge pull request #63 from infinum/feature/webpack-update

updating webpack, documentatio and changing folder structure for bloc…

CHANGELOG.md

@@ -6,14 +6,26 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ## [Unreleased]
 
+## [3.0.3] - 2020-01-16
+
 ## Added
-- New divider block
+- Added new divider block.
+- Added blocksAssetsPathConfig also as a default value in Webpack helper.
+- Added assetsPath and outputPath to default values in Webpack helper.
+- Added option to not load webpack entrypoint file if it doesn't exist.
 
 ## Changed
-- Complete rewrite of setup script for boilerplate
-- Updating CleanWebpackPlugin option to fix removing items in watch mode
-- Updating readme and docs
-- Moved all src/blocks/layout/... to src/blocks/components
+- Changed setup script for boilerplate.
+- Changed Webpack overrides key from object to array.
+- Changed CleanWebpackPlugin option to fix removing items in watch mode.
+- Changed readme and docs.
+- Changed documentation.
+- Changed setup script new structure.
+
+# Moved
+- Decoupled normal assets from blocks for extra flexibility.
+- Moved all src/blocks/layout/... to src/blocks/components.
+- Moved inital blocks setup to a separate folder.
 
 ## [3.0.2] - 2019-12-19
 
@@ -112,6 +124,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs/compare/master...HEAD
 
+[3.0.3]: https://github.com/infinum/eightshift-frontend-libs/compare/v3.0.2...v3.0.3
 [3.0.2]: https://github.com/infinum/eightshift-frontend-libs/compare/v3.0.1...v3.0.2
 [3.0.1]: https://github.com/infinum/eightshift-frontend-libs/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/infinum/eightshift-frontend-libs/compare/v2.0.7...v3.0.0

README.md

@@ -12,8 +12,11 @@
 
 This library is intended to work with [Eightshift Libs](https://github.com/infinum/eightshift-libs/) library and [Eightshift Boilerplate](https://github.com/infinum/eightshift-boilerplate) by containing all the frontend parts for your project.
 
+==============================================================================
 ## Documentaiton
-For the full documentation please check this [link](https://infinum.github.io/eightshift-frontend-libs).
+### For the full documentation please check this [link](https://infinum.github.io/eightshift-frontend-libs).
+
+==============================================================================
 
 ## Prerequisites
 

blocks/init/assets/styles/application-blocks-editor.scss → blocks/init/blocks/assets/styles/application-blocks-editor.scss

@@ -11,7 +11,7 @@
  */
 
 // Globals.
-@import './parts/shared';
+@import './../../../../assets/styles/parts/shared';
 
 // Ovveride default editor styles.
 @import 'EighshiftEditorStyleOverride';

blocks/init/assets/styles/application-blocks.scss → blocks/init/blocks/assets/styles/application-blocks.scss

@@ -10,7 +10,7 @@
  */
 
 // Globals.
-@import './parts/shared';
+@import './../../../../assets/styles/parts/shared';
 
 // Register Wrapper block styles.
 @import './../../wrapper/wrapper-style.scss';

documentation/documentation/sassdocs.md

@@ -2,7 +2,9 @@
 
 For years we have collected a list of useful SASS mixins, functions, and all other stuff that you can use in a project. You don't need to have all this in your project; check out our documentation and import it from Eightshift Frontend Libs.
 
-Visit [SassDocs](https://infinum.github.io/eightshift-frontend-libs/sassdocs/) for more details.
+==============================================================================
+### Visit [SassDocs](https://infinum.github.io/eightshift-frontend-libs/sassdocs/) for more details.
+==============================================================================
 
 ## Default usage
 Sass mixing, functions, helpers are located in `node_modules/@eighshift/frontent-libs/styles/scss/eightshift-frontend-libs.scss` file. If you are using our webpack build then you are all set, and you can use it by importing it to your project like this:

documentation/documentation/storybook.md

@@ -2,4 +2,6 @@
 
 We have created a full storybook that hosts all our blocks with fully functional Block Editor, where you can try how blocks work and behave.
 
-Visit [Storybook](https://infinum.github.io/eightshift-frontend-libs/storybook/) for more details.
+==============================================================================
+### Visit [Storybook](https://infinum.github.io/eightshift-frontend-libs/storybook/) for more details.
+==============================================================================

documentation/installation/register-webpack.md

@@ -18,8 +18,9 @@ module.exports = (env, argv) => {
       projectDir: __dirname, // Current project directory absolute path.
       projectUrl: 'local-url.test', // Used for providing browsersync functionality.
       projectPath: 'wp-content/themes/your-theme-name', // Project path relative to project root.
-      assetsPath: 'src/blocks/assets', // Assets path after projectPath location.
-      outputPath: 'public', // Public output path after projectPath location.
+      assetsPath: 'src/blocks/assets', // Assets path after projectPath location. (add this key only to override the default value.)
+      blocksAssetsPathConfig: 'src/blocks/assets', // Blocks assets path after projectPath location. (add this key only to override the default value.)
+      outputPath: 'public', // Public output path after projectPath location. (add this key only to override the default value.)
     },
   };
 
@@ -34,8 +35,8 @@ module.exports = (env, argv) => {
 
 ## Override built-in functionality
 
-To remove built-in functionality, add a new object to the config called `overrides`.
-If you provide any of the `overrides keys` set to `true`, it will remove that config from the build.
+To remove built-in functionality, add a new array to the config called `overrides`.
+If you provide any of the `overrides keys`, it will remove that config from the build.
 Here is a list of all the features that we use and how to remove them.
 
 ```js
@@ -44,26 +45,26 @@ const projectConfig = {
   config: {
     ...
   },
-  overrides: {
-    application: true,
-    applicationAdmin: true,
-    applicationBlocks: true,
-    applicationBlocksEditor: true,
-    filename: true,
-    cleanWebpackPlugin: true,
-    terserPlugin: true,
-    browserSyncPlugin: true,
-    providePlugin: true,
-    manifestPlugin: true,
-    miniCssExtractPlugin: true,
-    copyWebpackPlugin: true,
-    optimizeCSSAssetsPlugin: true,
-    js: true,
-    scss: true,
-    images: true,
-    fonts: true,
-    runtimeChunk: true,
-  }
+  overrides: [
+    'application',
+    'applicationAdmin',
+    'applicationBlocks',
+    'applicationBlocksEditor',
+    'filename',
+    'cleanWebpackPlugin',
+    'terserPlugin',
+    'browserSyncPlugin',
+    'providePlugin',
+    'manifestPlugin',
+    'miniCssExtractPlugin',
+    'copyWebpackPlugin',
+    'optimizeCSSAssetsPlugin',
+    'js',
+    'scss',
+    'images',
+    'fonts',
+    'runtimeChunk',
+  ],
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/frontend-libs",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "A collection of useful frontend utility modules. powered by Eightshift",
   "author": {
     "name": "Team Eightshift",

webpack/base.js

@@ -11,37 +11,34 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const { isUsed } = require('./helpers');
 
 module.exports = (options) => {
 
   // All Plugins used in production and development build.
   const plugins = [];
 
   // Clean public files before next build.
-  if (isUsed(options.overrides, 'cleanWebpackPlugin')) {
-    plugins.push(new CleanWebpackPlugin({
-      cleanStaleWebpackAssets: false,
-    }));
+  if (!options.overrides.includes('cleanWebpackPlugin')) {
+    plugins.push(new CleanWebpackPlugin());
   }
 
   // Provide global variables to window object.
-  if (isUsed(options.overrides, 'providePlugin')) {
+  if (!options.overrides.includes('providePlugin')) {
     plugins.push(new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
     }));
   }
 
   // Output css from Js.
-  if (isUsed(options.overrides, 'miniCssExtractPlugin')) {
+  if (!options.overrides.includes('miniCssExtractPlugin')) {
     plugins.push(new MiniCssExtractPlugin({
       filename: `${options.config.filesOutput}.css`,
     }));
   }
 
   // Copy files to new destination.
-  if (isUsed(options.overrides, 'copyWebpackPlugin')) {
+  if (!options.overrides.includes('copyWebpackPlugin')) {
     plugins.push(new CopyWebpackPlugin([
 
       // Find jQuery in node_modules and copy it to public folder
@@ -53,7 +50,7 @@ module.exports = (options) => {
   }
 
   // Create manifest.json file.
-  if (isUsed(options.overrides, 'manifestPlugin')) {
+  if (!options.overrides.includes('manifestPlugin')) {
     plugins.push(new ManifestPlugin({
       seed: {},
     }));
@@ -62,7 +59,7 @@ module.exports = (options) => {
   // All Optimizations used in production and development build.
   const optimization = {};
 
-  if (isUsed(options.overrides, 'runtimeChunk')) {
+  if (!options.overrides.includes('runtimeChunk')) {
     optimization.runtimeChunk = false;
   }
 
@@ -72,7 +69,7 @@ module.exports = (options) => {
   };
 
   // Module for JS and JSX.
-  if (isUsed(options.overrides, 'js')) {
+  if (!options.overrides.includes('js')) {
     module.rules.push({
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
@@ -81,7 +78,7 @@ module.exports = (options) => {
   }
 
   // Module for Images.
-  if (isUsed(options.overrides, 'images')) {
+  if (!options.overrides.includes('images')) {
     module.rules.push({
       test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
       exclude: [/fonts/, /node_modules/],
@@ -90,7 +87,7 @@ module.exports = (options) => {
   }
 
   // Module for Fonts.
-  if (isUsed(options.overrides, 'fonts')) {
+  if (!options.overrides.includes('fonts')) {
     module.rules.push({
       test: /\.(eot|otf|ttf|woff|woff2|svg)$/,
       exclude: [/images/, /node_modules/],
@@ -99,7 +96,7 @@ module.exports = (options) => {
   }
 
   // Module for Scss.
-  if (isUsed(options.overrides, 'scss')) {
+  if (!options.overrides.includes('scss')) {
     module.rules.push({
       test: /\.scss$/,
       exclude: /node_modules/,

webpack/development.js

@@ -7,7 +7,6 @@
  */
 
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
-const { isUsed } = require('./helpers');
 
 // Define developmentConfig setup.
 module.exports = (options) => {
@@ -16,7 +15,7 @@ module.exports = (options) => {
   const plugins = [];
 
   // Use BrowserSync to see live preview of all changes.
-  if (isUsed(options.overrides, 'browserSyncPlugin')) {
+  if (!options.overrides.includes('browserSyncPlugin')) {
     plugins.push(new BrowserSyncPlugin({
       host: 'localhost',
       port: 3000,

webpack/helpers.js

@@ -19,7 +19,7 @@ const path = require('path');
  *
  * @since 2.0.0
  */
-function getConfig(projectDir, proxyUrl, projectPathConfig, assetsPathConfig, outputPathConfig) {
+function getConfig(projectDir, proxyUrl, projectPathConfig, assetsPathConfig = 'assets', blocksAssetsPathConfig = 'src/blocks/assets', outputPathConfig = 'public') {
 
   if (typeof projectDir === 'undefined') {
     throw 'projectDir parameter is empty, please provide. This key represents: Current project directory absolute path. For example: __dirname'; // eslint-disable-line no-throw-literal
@@ -33,17 +33,10 @@ function getConfig(projectDir, proxyUrl, projectPathConfig, assetsPathConfig, ou
     throw 'projectPath parameter is empty, please provide. This key represents: Project path relative to project root. For example: wp-content/themes/eightshift-boilerplate'; // eslint-disable-line no-throw-literal
   }
 
-  if (typeof assetsPathConfig === 'undefined') {
-    throw 'assetsPath parameter is empty, please provide. This key represents: Assets path after projectPath location. For example: src/blocks/assets'; // eslint-disable-line no-throw-literal
-  }
-
-  if (typeof outputPathConfig === 'undefined') {
-    throw 'outputPath parameter is empty, please provide. This key represents: Public output path after projectPath location. For example: public'; // eslint-disable-line no-throw-literal
-  }
-
   // Clear all slashes from user config.
   const projectPathConfigClean = projectPathConfig.replace(/^\/|\/$/g, '');
   const assetsPathConfigClean = assetsPathConfig.replace(/^\/|\/$/g, '');
+  const blocksAssetsPathConfigClean = blocksAssetsPathConfig.replace(/^\/|\/$/g, '');
   const outputPathConfigClean = outputPathConfig.replace(/^\/|\/$/g, '');
 
   // Create absolute path from the projects relative path.
@@ -64,28 +57,11 @@ function getConfig(projectDir, proxyUrl, projectPathConfig, assetsPathConfig, ou
     // Source files entries absolute locations.
     applicationEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application.js'),
     applicationAdminEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application-admin.js'),
-    applicationBlocksEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application-blocks.js'),
-    applicationBlocksEditorEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application-blocks-editor.js'),
+    applicationBlocksEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks.js'),
+    applicationBlocksEditorEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-editor.js'),
   };
 }
 
-/**
- * Check if user config is added and it is used.s
- *
- * @param {object} config Config object to check.
- * @param {string} key Config object key to test if is false.
- *
- * @since 2.0.0
- */
-function isUsed(config, key) {
-  if (config.hasOwnProperty(key) && config[key]) {
-    return false;
-  }
-
-  return true;
-}
-
 module.exports = {
   getConfig,
-  isUsed,
 };

webpack/index.js

@@ -14,7 +14,7 @@ module.exports = (mode, optionsData = {}) => {
   // All config and default setting overrides must be provided using this object.
   const options = {
     config: {},
-    overrides: {},
+    overrides: [],
     ...optionsData,
   };
 
@@ -24,6 +24,7 @@ module.exports = (mode, optionsData = {}) => {
     optionsData.config.projectUrl,
     optionsData.config.projectPath,
     optionsData.config.assetsPath,
+    optionsData.config.blocksAssetsPath,
     optionsData.config.outputPath
   );
 

webpack/production.js

@@ -7,7 +7,6 @@
 
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const { isUsed } = require('./helpers');
 
 module.exports = (options) => {
 
@@ -20,7 +19,7 @@ module.exports = (options) => {
   };
 
   // Plugin used to minify output.
-  if (isUsed(options.overrides, 'terserPlugin')) {
+  if (!options.overrides.includes('terserPlugin')) {
     optimization.minimizer.push(new TerserPlugin({
       cache: true,
       parallel: true,
@@ -32,7 +31,7 @@ module.exports = (options) => {
     }));
   }
 
-  if (isUsed(options.overrides, 'optimizeCSSAssetsPlugin')) {
+  if (!options.overrides.includes('optimizeCSSAssetsPlugin')) {
     optimization.minimizer.push(new OptimizeCssAssetsPlugin({
       cssProcessorPluginOptions: {
         preset: [