diff --git a/.gitignore b/.gitignore index 712d024d945..8b86579939c 100644 --- a/.gitignore +++ b/.gitignore @@ -87,5 +87,6 @@ test.sh ############ /languages/ /js/vendor/* +/js/dist/* /css/dist/* /packages/*/dist diff --git a/Gruntfile.js b/Gruntfile.js index c5e6b2a5a30..13ac26055de 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -35,7 +35,7 @@ module.exports = function( grunt ) { grunt: "config/grunt/", images: "images/", js: "packages/js/src/", - jsDist: "packages/js/dist/", + jsDist: "js/dist/", languages: "languages/", logs: "logs/", svnCheckoutDir: ".wordpress-svn", diff --git a/config/grunt/task-config/copy.js b/config/grunt/task-config/copy.js index 46c5ee1b3a8..ece8f49b3b7 100644 --- a/config/grunt/task-config/copy.js +++ b/config/grunt/task-config/copy.js @@ -111,6 +111,7 @@ module.exports = { "frontend/**", "images/**", "inc/**", + "<%= paths.jsDist %>/**/*.js", "languages/**", "src/**", "lib/**", @@ -133,12 +134,6 @@ module.exports = { ], dest: "<%= files.artifact %>", }, - { - expand: true, - cwd: "packages", - src: [ "js/dist/**/*.js" ], - dest: "<%= files.artifact %>", - }, ], }, }; diff --git a/config/grunt/task-config/webpack.js b/config/grunt/task-config/webpack.js index 8bc1540d7ce..bfb042a10f2 100644 --- a/config/grunt/task-config/webpack.js +++ b/config/grunt/task-config/webpack.js @@ -1,4 +1,3 @@ -/* global require */ const webpackConfig = require( "../../webpack/webpack.config" ); module.exports = ( grunt ) => { diff --git a/config/webpack/externals.js b/config/webpack/externals.js index a3a4729a271..078beb0d288 100644 --- a/config/webpack/externals.js +++ b/config/webpack/externals.js @@ -1,19 +1,17 @@ -const { - camelCaseDash, -} = require( "@wordpress/dependency-extraction-webpack-plugin/lib/util" ); +const { camelCaseDash } = require( "@wordpress/dependency-extraction-webpack-plugin/lib/util" ); const externals = { // This is necessary for Gutenberg to work. tinymce: "window.tinymce", - yoastseo: "window.yoast.analysis", - // General dependencies that we have. jed: "window.yoast.jed", lodash: "window.lodash", "lodash-es": "window.lodash", react: "React", "react-dom": "ReactDOM", + + // Possible self-reference due to the exposing in `src/externals`. redux: "window.yoast.redux", "react-redux": "window.yoast.reactRedux", "styled-components": "window.yoast.styledComponents", @@ -60,24 +58,23 @@ const yoastPackages = Object.keys( dependencies ) .filter( ( packageName ) => packageName.startsWith( YOAST_PACKAGE_NAMESPACE ) || - legacyYoastPackages.includes( packageName ) + legacyYoastPackages.includes( packageName ), ); /** - * Convert packages to externals configuration. + * Convert Yoast packages to externals configuration. */ -// Yoast Packages. const yoastExternals = yoastPackages.reduce( ( memo, packageName ) => { - let useablePackageName = packageName.replace( YOAST_PACKAGE_NAMESPACE, "" ); + let usablePackageName = packageName.replace( YOAST_PACKAGE_NAMESPACE, "" ); // Handle the difference between yoast-components and @yoast/components. - useablePackageName = ( useablePackageName === "components" ) ? "components-new" : useablePackageName; - useablePackageName = ( useablePackageName === "yoast-components" ) ? "components" : useablePackageName; + usablePackageName = ( usablePackageName === "components" ) ? "components-new" : usablePackageName; + usablePackageName = ( usablePackageName === "yoast-components" ) ? "components" : usablePackageName; // Handle yoastseo as analysis reference. - useablePackageName = ( useablePackageName === "yoastseo" ) ? "analysis" : useablePackageName; + usablePackageName = ( usablePackageName === "yoastseo" ) ? "analysis" : usablePackageName; - memo[ packageName ] = `window.yoast.${ camelCaseDash( useablePackageName ) }`; + memo[ packageName ] = `window.yoast.${ camelCaseDash( usablePackageName ) }`; return memo; }, {} ); diff --git a/config/webpack/paths.js b/config/webpack/paths.js index 0be9ddeee86..0a11dfa33d7 100644 --- a/config/webpack/paths.js +++ b/config/webpack/paths.js @@ -1,7 +1,6 @@ -/* global require, module */ const path = require( "path" ); -const jsDistPath = path.resolve( "packages", "js", "dist" ); +const jsDistPath = path.resolve( "js", "dist" ); const jsSrcPath = path.resolve( "packages", "js", "src" ); const cssDistPath = path.resolve( "css", "dist" ); @@ -18,7 +17,7 @@ const entry = { "dynamic-blocks": "./dynamic-blocks.js", "edit-page": "./edit-page.js", "editor-modules": "./editor-modules.js", - "elementor": "./elementor.js", + elementor: "./elementor.js", "filter-explanation": "./filter-explanation.js", "help-scout-beacon": "./help-scout-beacon.js", indexation: "./indexation.js", diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js index 8bb4149e949..81e8ff77c6a 100644 --- a/config/webpack/webpack.config.js +++ b/config/webpack/webpack.config.js @@ -1,14 +1,10 @@ const CaseSensitivePathsPlugin = require( "case-sensitive-paths-webpack-plugin" ); +const { mapValues, isString } = require( "lodash" ); const path = require( "path" ); -const mapValues = require( "lodash/mapValues" ); -const isString = require( "lodash/isString" ); - -const paths = require( "./paths" ); -const BundleAnalyzerPlugin = require( "webpack-bundle-analyzer" ).BundleAnalyzerPlugin; const MiniCssExtractPlugin = require( "mini-css-extract-plugin" ); - -const { externals, yoastExternals, wordpressExternals } = require( './externals' ); -const { YOAST_PACKAGE_NAMESPACE } = require( './externals' ); +const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" ); +const { externals, yoastExternals, wordpressExternals, YOAST_PACKAGE_NAMESPACE } = require( "./externals" ); +const paths = require( "./paths" ); const root = path.join( __dirname, "../../" ); const mainEntry = mapValues( paths.entry, entry => { @@ -107,11 +103,9 @@ module.exports = function( env ) { const plugins = [ new CaseSensitivePathsPlugin(), - new MiniCssExtractPlugin( - { - filename: "css/dist/monorepo-" + pluginVersionSlug + ".css", - } - ), + new MiniCssExtractPlugin( { + filename: "css/dist/monorepo-" + pluginVersionSlug + ".css", + } ), ]; const base = { @@ -166,7 +160,6 @@ module.exports = function( env ) { }, ], }, - externals, optimization: { runtimeChunk: { name: "commons", @@ -174,34 +167,50 @@ module.exports = function( env ) { }, }; + const externalsAvoidingSelfReference = { ...externals }; + // Remove possible self-referencing externals. + delete externalsAvoidingSelfReference[ "draft-js" ]; + delete externalsAvoidingSelfReference.jed; + delete externalsAvoidingSelfReference.redux; + delete externalsAvoidingSelfReference[ "react-redux" ]; + delete externalsAvoidingSelfReference[ "styled-components" ]; + const config = [ { ...base, entry: { ...mainEntry, - "styled-components": path.join( paths.jsSrc, "externals/styled-components.js" ), - redux: path.join( paths.jsSrc, "externals/redux.js" ), - jed: path.join( paths.jsSrc, "externals/jed.js" ), - "draft-js": path.join( paths.jsSrc, "externals/draft-js.js" ), }, externals: { ...externals, ...yoastExternals, ...wordpressExternals, }, - plugins: addBundleAnalyzer( [ - ...plugins, - ] ), + plugins: addBundleAnalyzer( plugins ), }, - // Config for files that should not use any externals at all. + // Externals that should avoid self-reference. { ...base, - output: { - path: paths.jsDist, - filename: "[name]-" + pluginVersionSlug + ".js", - jsonpFunction: "yoastWebpackJsonp", + entry: { + "draft-js": path.join( paths.jsSrc, "externals/draft-js.js" ), + jed: path.join( paths.jsSrc, "externals/jed.js" ), + redux: path.join( paths.jsSrc, "externals/redux.js" ), + "styled-components": path.join( paths.jsSrc, "externals/styled-components.js" ), + }, + externals: { + ...externalsAvoidingSelfReference, + wordpressExternals, + }, + plugins: addBundleAnalyzer( plugins ), + optimization: { + runtimeChunk: false, }, + }, + + // Config for files that should not use any externals at all. + { + ...base, entry: { "babel-polyfill": path.join( paths.jsSrc, "externals/babel-polyfill.js" ), }, @@ -213,12 +222,6 @@ module.exports = function( env ) { // Config for the analysis web worker. { ...base, - externals: {}, - output: { - path: paths.jsDist, - filename: outputFilename, - jsonpFunction: "yoastWebpackJsonp", - }, entry: { "analysis-worker": path.join( paths.jsSrc, "analysis-worker.js" ), analysis: path.join( paths.jsSrc, "externals/analysis.js" ), @@ -247,21 +250,21 @@ module.exports = function( env ) { * * These all need to have all -other- externals configured, but not their self. */ - for (const [key, value] of Object.entries(yoastExternals)) { - const yoastExternalsExcludingCurrent = Object.assign({}, yoastExternals); + for ( const [ key ] of Object.entries( yoastExternals ) ) { + const yoastExternalsExcludingCurrent = Object.assign( {}, yoastExternals ); // Remove the current external to avoid self-reference. - delete yoastExternalsExcludingCurrent[key]; + delete yoastExternalsExcludingCurrent[ key ]; - const packageName = key.replace( YOAST_PACKAGE_NAMESPACE, '' ); + const packageName = key.replace( YOAST_PACKAGE_NAMESPACE, "" ); - config.push({ + config.push( { ...base, entry: { - [packageName]: path.join( paths.jsSrc, "externals/yoast/" + packageName + ".js" ), + [ packageName ]: path.join( paths.jsSrc, "externals/yoast/" + packageName + ".js" ), }, output: { path: path.resolve(), - filename: "packages/js/dist/yoast/[name]-" + pluginVersionSlug + ".js", + filename: "js/dist/yoast/[name]-" + pluginVersionSlug + ".js", jsonpFunction: "yoastWebpackJsonp", }, externals: { @@ -269,13 +272,11 @@ module.exports = function( env ) { ...yoastExternalsExcludingCurrent, ...wordpressExternals, }, - plugins: addBundleAnalyzer([ - ...plugins, - ]), + plugins: addBundleAnalyzer( plugins ), optimization: { runtimeChunk: false, }, - }); + } ); } if ( env.environment === "development" ) {