woocommerce/plugins/woocommerce-blocks/bin/webpack-configs.js

983 lines
23 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
const path = require( 'path' );
Fix missing translations in inspector (https://github.com/woocommerce/woocommerce-blocks/pull/6737) * Try registering the "cart taxes" inner block Registering server side. This example isn't working, but I'm pushing to share it and see what's wrong with this implementation. * Fix registering the cart taxes inner block issue * Update translation script loading * Remove unnecessary JS translation The translation should work fine by getting the title & description from the `block.json` file * Put back the initial code in the 'Cart Taxes' inner block We didn't provide the correct `block.json` file path server side, that's why the `metadata` wasn't correctly registered * Generate `block.json`files for inner blocks This is the first step on fixing the missing translations of `metadata` in `block.json` files * Set the folder name exactly the same as the inner block name We are doing this first test for the `Cart taxes` inner block. The `Block` & its containing folder need to have the same name for: - Consistency - We use the `Block` name to get the file Path * Update imports after folder renaming * Get block name directly from the JSON metadata Getting the block name from the JSON metadata is less error prone than extracting it from the file path. And no need to rename all our `inner-blocks` to get the correct `block.json` path * Revert folder naming change of `Cart taxes` inner block Since we are getting the `block` name directly from the `block.json` metadata instead of extracting it from the file path, there is no need to keep their names in sync anymore * Fix missing translations for the `Cart Subtotal` Block * Register only the client-side settings on the client When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name. See [docs](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#javascript-client-side). * Add schema validation to `block.json` Development is improved by using a defined schema definition file. Supported editors can provide help like tooltips, autocomplete, and schema validation. * Use the same `editor_script` as the parent block This prevents WordPress from generating script tags to inexistant inner blocks JS files * Add C&C inner blocks in Cart.php & Checkout.php This is a refactoring to keep the block types controller file less overloaded * Fix all Cart inner blocks missing translations * Create the "AbstractInnerBlock" class The "Inner Blocks" will use their parent's script, so no need to create new scripts for each one of them And, our "Inner Blocks" should always be registered using the metadata file * Update the "Inner Blocks" PHP classes * Fix PHP lint erros & update function description * Fix missing translations bug for all Checkout Inner Blocks * Update src/BlockTypes/Checkout.php Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * skip lazy loaded scripts Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2022-08-01 14:57:33 +00:00
const fs = require( 'fs' );
2023-04-28 10:29:45 +00:00
const { paramCase } = require( 'change-case' );
const RemoveFilesPlugin = require( './remove-files-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const ProgressBarPlugin = require( 'progress-bar-webpack-plugin' );
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
const WebpackRTLPlugin = require( './webpack-rtl-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );
const CreateFileWebpack = require( 'create-file-webpack' );
const CircularDependencyPlugin = require( 'circular-dependency-plugin' );
const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
/**
* Internal dependencies
*/
const { getEntryConfig } = require( './webpack-entries' );
const {
ASSET_CHECK,
NODE_ENV,
CHECK_CIRCULAR_DEPS,
requestToExternal,
requestToHandle,
getProgressBarPluginConfig,
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
getCacheGroups,
} = require( './webpack-helpers' );
const isProduction = NODE_ENV === 'production';
/**
* Shared config for all script builds.
*/
let initialBundleAnalyzerPort = 8888;
Interactivity API: implement the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11071) * Sync Interactivity API code with Gutenberg * New store() API * Store raw actions * Update wc-interactivity-store implementation * Replace `wc_store` with `wc_initial_state` * Parse and populate initial state * Allow store parts in `store()` * Accept namespaces in directive paths * Add $$namespace to directives' object values * Make namespace parsing more robust * Use DeepPartial type for store parts * Do not pass `rawStore` to `afterLoad` callbacks * Simplify `store()` a bit * Implement `privateStore()` * Sync context directive with Gutenberg * Refactor scope and extract getters per scope * Add namespace to getters and actions * Remove current privateStore implementation * Remove `afterLoad` option from `store` * Use same proxy handlers for ns, getters and actions * Set scope inside `evaluate` * Refactor proxy handlers * Improve types a bit * Catch errors in async actions * Implement stacks for scopes and namespaces * Implement `getElement` * Change directives object structure * Remove unnecessary import * Implement private stores * Return value from sync actions * Minor optimizations and improved comments * Don't use async inside `data-wp-watch` * Use a single Provider in context directive * Remove DeepPartial type * Do not check if element exists * Add the `current` prop of state inside the scope * Move getters outside scope * Fix wc-key assignment * Fix missing `navigate` in directives * Fix namespace not being picked in the same element * Deep merge raw stores instead of proxied ones * Fix namespace assignment * Allow forward slashes in namespaces * Migration of Product Collection and Product Button blocks to the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11558) * Refactor Product Button with new store() API * Use `wc_initial_state` in Product Button * Fix namespace * Remove unnecessary state * Test namespaces in directive paths * Add test context with namespace * Simplify woo-test context * Move addToCart and animations to a file * Do not pass `rawStore` to `afterLoad` callbacks * Move callbacks and actions back to the main file Because the animation was broken. * Remove selectors in favor of state * Use default ns in `getContext` for state and actions * Remove `afterLoad` callback * Remove unnecessary ns * Fix getContext in add-to-cart * Replace namespace and delete unnecessary store * Pass context types only once * Use an alternative for requestIdleCallback * Add previous react code for notices * Add namespace to Product Collection block * Replace getTextButton with getButtonText * Add block name to the ProductCollection namespace * fix style HTML code * Remove circular deps error on the Interactivity API * Product Gallery block: Migrate to new Interactivity API store (https://github.com/woocommerce/woocommerce-blocks/pull/11721) * Migrate Product Gallery block to new Interactivity API store * Fix some references * Add missing data-wc-interactive * Fix an additional namespace * Remove unnecessary click handler * Dialog working * Refactor action names * Reindex PHP array There was some missing indexes, which turned the array into an object in JS. * Remove unused event handlers * Move next/previous logic to external function * Move StorePart util to the types folder * Rename namespace to `woocommerce/product-gallery` * Undo product collection namespace renaming * Remove unnecessary namespace * Don't hide the large image on page load * Minor refactorings * Fix eslint error * Fix php cs errors with spacing and double arrows alignment * Disable no-use-before-define rule for eslint * Disable @typescript-eslint/ban-types rule for eslint * Fix parsed context error in e2e tests * Fix context parser for Thumbnail image * Move store to the top of the frontend file * Add interactivity api utils to the @woocommerce/utils alias * Replace deprecated event attribute --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: roykho <roykho77@gmail.com> --------- Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com> * Fix error when closing product gallery dialog with keyboard escape key * use wc_initial_state instead of wc_store --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com>
2023-11-21 10:46:15 +00:00
const getSharedPlugins = ( {
bundleAnalyzerReportTitle,
checkCircularDeps = true,
} ) =>
[
Interactivity API: implement the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11071) * Sync Interactivity API code with Gutenberg * New store() API * Store raw actions * Update wc-interactivity-store implementation * Replace `wc_store` with `wc_initial_state` * Parse and populate initial state * Allow store parts in `store()` * Accept namespaces in directive paths * Add $$namespace to directives' object values * Make namespace parsing more robust * Use DeepPartial type for store parts * Do not pass `rawStore` to `afterLoad` callbacks * Simplify `store()` a bit * Implement `privateStore()` * Sync context directive with Gutenberg * Refactor scope and extract getters per scope * Add namespace to getters and actions * Remove current privateStore implementation * Remove `afterLoad` option from `store` * Use same proxy handlers for ns, getters and actions * Set scope inside `evaluate` * Refactor proxy handlers * Improve types a bit * Catch errors in async actions * Implement stacks for scopes and namespaces * Implement `getElement` * Change directives object structure * Remove unnecessary import * Implement private stores * Return value from sync actions * Minor optimizations and improved comments * Don't use async inside `data-wp-watch` * Use a single Provider in context directive * Remove DeepPartial type * Do not check if element exists * Add the `current` prop of state inside the scope * Move getters outside scope * Fix wc-key assignment * Fix missing `navigate` in directives * Fix namespace not being picked in the same element * Deep merge raw stores instead of proxied ones * Fix namespace assignment * Allow forward slashes in namespaces * Migration of Product Collection and Product Button blocks to the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11558) * Refactor Product Button with new store() API * Use `wc_initial_state` in Product Button * Fix namespace * Remove unnecessary state * Test namespaces in directive paths * Add test context with namespace * Simplify woo-test context * Move addToCart and animations to a file * Do not pass `rawStore` to `afterLoad` callbacks * Move callbacks and actions back to the main file Because the animation was broken. * Remove selectors in favor of state * Use default ns in `getContext` for state and actions * Remove `afterLoad` callback * Remove unnecessary ns * Fix getContext in add-to-cart * Replace namespace and delete unnecessary store * Pass context types only once * Use an alternative for requestIdleCallback * Add previous react code for notices * Add namespace to Product Collection block * Replace getTextButton with getButtonText * Add block name to the ProductCollection namespace * fix style HTML code * Remove circular deps error on the Interactivity API * Product Gallery block: Migrate to new Interactivity API store (https://github.com/woocommerce/woocommerce-blocks/pull/11721) * Migrate Product Gallery block to new Interactivity API store * Fix some references * Add missing data-wc-interactive * Fix an additional namespace * Remove unnecessary click handler * Dialog working * Refactor action names * Reindex PHP array There was some missing indexes, which turned the array into an object in JS. * Remove unused event handlers * Move next/previous logic to external function * Move StorePart util to the types folder * Rename namespace to `woocommerce/product-gallery` * Undo product collection namespace renaming * Remove unnecessary namespace * Don't hide the large image on page load * Minor refactorings * Fix eslint error * Fix php cs errors with spacing and double arrows alignment * Disable no-use-before-define rule for eslint * Disable @typescript-eslint/ban-types rule for eslint * Fix parsed context error in e2e tests * Fix context parser for Thumbnail image * Move store to the top of the frontend file * Add interactivity api utils to the @woocommerce/utils alias * Replace deprecated event attribute --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: roykho <roykho77@gmail.com> --------- Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com> * Fix error when closing product gallery dialog with keyboard escape key * use wc_initial_state instead of wc_store --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com>
2023-11-21 10:46:15 +00:00
CHECK_CIRCULAR_DEPS === 'true' && checkCircularDeps !== false
? new CircularDependencyPlugin( {
exclude: /node_modules/,
cwd: process.cwd(),
failOnError: 'warn',
} )
: false,
// The WP_BUNDLE_ANALYZER global variable enables a utility that represents bundle
// content as a convenient interactive zoomable treemap.
process.env.WP_BUNDLE_ANALYZER &&
new BundleAnalyzerPlugin( {
analyzerPort: initialBundleAnalyzerPort++,
reportTitle: bundleAnalyzerReportTitle,
} ),
new DependencyExtractionWebpackPlugin( {
injectPolyfill: true,
combineAssets: ASSET_CHECK,
outputFormat: ASSET_CHECK ? 'json' : 'php',
requestToExternal,
requestToHandle,
} ),
].filter( Boolean );
/**
* Build config for core packages.
*
* @param {Object} options Build options.
*/
const getCoreConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'core', options.exclude || [] ),
output: {
filename: ( chunkData ) => {
2023-04-28 10:29:45 +00:00
return `${ paramCase( chunkData.chunk.name ) }.js`;
},
path: path.resolve( __dirname, '../build/' ),
library: [ 'wc', '[name]' ],
libraryTarget: 'this',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
uniqueName: 'webpackWcBlocksJsonp',
},
module: {
rules: [
{
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
use: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
loader: 'babel-loader',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
],
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
plugins: [
...getSharedPlugins( { bundleAnalyzerReportTitle: 'Core' } ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Core' ) ),
new CreateFileWebpack( {
path: './',
// file name
fileName: 'blocks.ini',
// content of the file
content: `
woocommerce_blocks_phase = ${ process.env.WOOCOMMERCE_BLOCKS_PHASE || 3 }
woocommerce_blocks_env = ${ NODE_ENV }
`.trim(),
} ),
],
optimization: {
// Only concatenate modules in production, when not analyzing bundles.
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for Blocks in the editor context.
*
* @param {Object} options Build options.
*/
const getMainConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'main', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
// string. The hash is based on the built file contents.
// @see https://github.com/webpack/webpack/issues/2329
// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
// i18n system relies on the hash of the filename, so changing that frequently would result in broken
// translations which we must avoid.
// @see https://github.com/Automattic/jetpack/pull/20926
chunkFilename: `[name]${ fileSuffix }.js?ver=[contenthash]`,
filename: `[name]${ fileSuffix }.js`,
library: [ 'wc', 'blocks', '[name]' ],
libraryTarget: 'this',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
uniqueName: 'webpackWcBlocksJsonp',
},
module: {
rules: [
{
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
loader: 'babel-loader',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheDirectory: true,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
minSize: 200000,
automaticNameDelimiter: '--',
cacheGroups: {
commons: {
test: /[\/\\]node_modules[\/\\]/,
name: 'wc-blocks-vendors',
chunks: 'all',
enforce: true,
},
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( { bundleAnalyzerReportTitle: 'Main' } ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Main' ) ),
new CopyWebpackPlugin( {
patterns: [
{
Product Query Block POC (Phase 1) (https://github.com/woocommerce/woocommerce-blocks/pull/6812) * Move `EditorBlock` to general `type-defs` `EditorBlock` was scoped under the `featured-items` directory at the time of its creation. It is, however, a useful type that should be shared repo-wide. For this reason, I am moving it into the `blocks` type-defs and updating all the references. * Define types for the Product Query block Also defines a more generic `WooCommerceBlockVariation` type which should be also useful in the future to implement a similar pattern. * Add Product Query utils Add two utility functions: 1. `isWooQueryBlockVariation`: is used to check whether a given block is a variation of the core Query Loop block, and also one of the allowed variations within our repo. See: `QueryVariation` enum type. 2. `setCustomQueryAttribute`: is a shorthand to set an attribute within the variation query attribute. * Refactor and cleanup the JS demo code Specifically: 1. Creates a `constant.ts` file to store all shared constants. Currently, the default variation attributes. 2. Move the variations to their own directory. One file per variation. 3. Move the inspector controls into own file and create a conditional logic to allow showing only certain settings. * Update webpack config * Add ProductQuery class * Fix `QueryVariation` enum We had changed the Products on Sale variation slug to something else, but we had forgotten to update the proper enum. * Remove unused params from `update_query` The filter we added to Gutenberg will pass the block and the page, as we might need them in the future and we want to minimize the amount of changes we'll have to do upstream. However, we currently do not use those, so I removed them from our own inner function. Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com>
2022-08-18 08:02:21 +00:00
from: './assets/js/**/block.json',
to( { absoluteFilename } ) {
Fix missing translations in inspector (https://github.com/woocommerce/woocommerce-blocks/pull/6737) * Try registering the "cart taxes" inner block Registering server side. This example isn't working, but I'm pushing to share it and see what's wrong with this implementation. * Fix registering the cart taxes inner block issue * Update translation script loading * Remove unnecessary JS translation The translation should work fine by getting the title & description from the `block.json` file * Put back the initial code in the 'Cart Taxes' inner block We didn't provide the correct `block.json` file path server side, that's why the `metadata` wasn't correctly registered * Generate `block.json`files for inner blocks This is the first step on fixing the missing translations of `metadata` in `block.json` files * Set the folder name exactly the same as the inner block name We are doing this first test for the `Cart taxes` inner block. The `Block` & its containing folder need to have the same name for: - Consistency - We use the `Block` name to get the file Path * Update imports after folder renaming * Get block name directly from the JSON metadata Getting the block name from the JSON metadata is less error prone than extracting it from the file path. And no need to rename all our `inner-blocks` to get the correct `block.json` path * Revert folder naming change of `Cart taxes` inner block Since we are getting the `block` name directly from the `block.json` metadata instead of extracting it from the file path, there is no need to keep their names in sync anymore * Fix missing translations for the `Cart Subtotal` Block * Register only the client-side settings on the client When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name. See [docs](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#javascript-client-side). * Add schema validation to `block.json` Development is improved by using a defined schema definition file. Supported editors can provide help like tooltips, autocomplete, and schema validation. * Use the same `editor_script` as the parent block This prevents WordPress from generating script tags to inexistant inner blocks JS files * Add C&C inner blocks in Cart.php & Checkout.php This is a refactoring to keep the block types controller file less overloaded * Fix all Cart inner blocks missing translations * Create the "AbstractInnerBlock" class The "Inner Blocks" will use their parent's script, so no need to create new scripts for each one of them And, our "Inner Blocks" should always be registered using the metadata file * Update the "Inner Blocks" PHP classes * Fix PHP lint erros & update function description * Fix missing translations bug for all Checkout Inner Blocks * Update src/BlockTypes/Checkout.php Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * skip lazy loaded scripts Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2022-08-01 14:57:33 +00:00
/**
* Getting the block name from the JSON metadata is less error prone
* than extracting it from the file path.
*/
const JSONFile = fs.readFileSync(
path.resolve( __dirname, absoluteFilename )
);
const metadata = JSON.parse( JSONFile.toString() );
const blockName = metadata.name
.split( '/' )
Fix missing translations in inspector (https://github.com/woocommerce/woocommerce-blocks/pull/6737) * Try registering the "cart taxes" inner block Registering server side. This example isn't working, but I'm pushing to share it and see what's wrong with this implementation. * Fix registering the cart taxes inner block issue * Update translation script loading * Remove unnecessary JS translation The translation should work fine by getting the title & description from the `block.json` file * Put back the initial code in the 'Cart Taxes' inner block We didn't provide the correct `block.json` file path server side, that's why the `metadata` wasn't correctly registered * Generate `block.json`files for inner blocks This is the first step on fixing the missing translations of `metadata` in `block.json` files * Set the folder name exactly the same as the inner block name We are doing this first test for the `Cart taxes` inner block. The `Block` & its containing folder need to have the same name for: - Consistency - We use the `Block` name to get the file Path * Update imports after folder renaming * Get block name directly from the JSON metadata Getting the block name from the JSON metadata is less error prone than extracting it from the file path. And no need to rename all our `inner-blocks` to get the correct `block.json` path * Revert folder naming change of `Cart taxes` inner block Since we are getting the `block` name directly from the `block.json` metadata instead of extracting it from the file path, there is no need to keep their names in sync anymore * Fix missing translations for the `Cart Subtotal` Block * Register only the client-side settings on the client When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name. See [docs](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#javascript-client-side). * Add schema validation to `block.json` Development is improved by using a defined schema definition file. Supported editors can provide help like tooltips, autocomplete, and schema validation. * Use the same `editor_script` as the parent block This prevents WordPress from generating script tags to inexistant inner blocks JS files * Add C&C inner blocks in Cart.php & Checkout.php This is a refactoring to keep the block types controller file less overloaded * Fix all Cart inner blocks missing translations * Create the "AbstractInnerBlock" class The "Inner Blocks" will use their parent's script, so no need to create new scripts for each one of them And, our "Inner Blocks" should always be registered using the metadata file * Update the "Inner Blocks" PHP classes * Fix PHP lint erros & update function description * Fix missing translations bug for all Checkout Inner Blocks * Update src/BlockTypes/Checkout.php Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * skip lazy loaded scripts Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2022-08-01 14:57:33 +00:00
.at( 1 );
if ( metadata.parent )
return `./inner-blocks/${ blockName }/block.json`;
return `./${ blockName }/block.json`;
},
},
],
} ),
],
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
resolve: {
...resolve,
extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
},
};
};
/**
* Build config for Blocks in the frontend context.
*
* @param {Object} options Build options.
*/
const getFrontConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'frontend', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
// string. The hash is based on the built file contents.
// @see https://github.com/webpack/webpack/issues/2329
// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
// i18n system relies on the hash of the filename, so changing that frequently would result in broken
// translations which we must avoid.
// @see https://github.com/Automattic/jetpack/pull/20926
chunkFilename: `[name]-frontend${ fileSuffix }.js?ver=[contenthash]`,
filename: `[name]-frontend${ fileSuffix }.js`,
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
uniqueName: 'webpackWcBlocksJsonp',
},
module: {
rules: [
{
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheDirectory: true,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
minSize: 200000,
automaticNameDelimiter: '--',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheGroups: {
...getCacheGroups(),
'base-components': {
test: /\/assets\/js\/base\/components\//,
name( module, chunks, cacheGroupKey ) {
const moduleFileName = module
.identifier()
.split( '/' )
.reduceRight( ( item ) => item );
const allChunksNames = chunks
.map( ( item ) => item.name )
.join( '~' );
return `${ cacheGroupKey }-${ allChunksNames }-${ moduleFileName }`;
},
},
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( { bundleAnalyzerReportTitle: 'Frontend' } ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Frontend' ) ),
],
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for built-in payment gateway integrations.
*
* @param {Object} options Build options.
*/
const getPaymentsConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'payments', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
uniqueName: 'webpackWcBlocksPaymentMethodExtensionJsonp',
},
module: {
rules: [
{
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheDirectory: true,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Payment Method Extensions',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Payment Method Extensions' )
),
],
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for extension integrations.
*
* @param {Object} options Build options.
*/
const getExtensionsConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'extensions', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
uniqueName: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheDirectory: true,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Experimental Extensions',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Experimental Extensions' )
),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for scripts to be used exclusively within the Site Editor context.
*
* @param {Object} options Build options.
*/
const getSiteEditorConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'editor', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
chunkLoadingGlobal: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
].filter( Boolean ),
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Site Editor',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Site Editor' )
),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for CSS Styles.
*
* @param {Object} options Build options.
*/
const getStylingConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'styling', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name]-style${ fileSuffix }.js`,
library: [ 'wc', 'blocks', '[name]' ],
libraryTarget: 'this',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
uniqueName: 'webpackWcBlocksJsonp',
},
optimization: {
splitChunks: {
automaticNameDelimiter: '--',
cacheGroups: {
editorStyle: {
// Capture all `editor` stylesheets and editor-components stylesheets.
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
test: ( module = {}, { moduleGraph } ) => {
if ( ! module.type.includes( 'css' ) ) {
return false;
}
const moduleIssuer =
moduleGraph.getIssuer( module );
if ( ! moduleIssuer ) {
return false;
}
return (
moduleIssuer.resource.endsWith(
'editor.scss'
) ||
moduleIssuer.resource.includes(
`${ path.sep }assets${ path.sep }js${ path.sep }editor-components${ path.sep }`
)
);
},
name: 'wc-blocks-editor-style',
chunks: 'all',
priority: 10,
},
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
...getCacheGroups(),
'base-components': {
test: /\/assets\/js\/base\/components\//,
name( module, chunks, cacheGroupKey ) {
const moduleFileName = module
.identifier()
.split( '/' )
.reduceRight( ( item ) => item )
.split( '|' )
.reduce( ( item ) => item );
const allChunksNames = chunks
.map( ( item ) => item.name )
.join( '~' );
return `${ cacheGroupKey }-${ allChunksNames }-${ moduleFileName }`;
},
},
},
},
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
},
},
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [ 'assets/css/abstracts' ],
},
additionalData: ( content, loaderContext ) => {
const { resourcePath, rootContext } =
loaderContext;
const relativePath = path.relative(
rootContext,
resourcePath
);
if (
relativePath.startsWith(
'assets/css/abstracts/'
) ||
relativePath.startsWith(
'assets\\css\\abstracts\\'
)
) {
return content;
}
return (
'@use "sass:math";' +
'@use "sass:string";' +
'@use "sass:color";' +
'@use "sass:map";' +
'@import "_colors"; ' +
'@import "_variables"; ' +
'@import "_breakpoints"; ' +
'@import "_mixins"; ' +
content
);
},
},
},
],
},
],
},
plugins: [
...getSharedPlugins( { bundleAnalyzerReportTitle: 'Styles' } ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Styles' ) ),
new MiniCssExtractPlugin( {
filename: `[name]${ fileSuffix }.css`,
} ),
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
new WebpackRTLPlugin( {
filenameSuffix: '-rtl.css',
} ),
// Remove JS files generated by MiniCssExtractPlugin.
new RemoveFilesPlugin( `./build/*style${ fileSuffix }.js` ),
],
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
resolve: {
...resolve,
extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
},
};
};
const getInteractivityAPIConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
return {
entry: {
'wc-interactivity': './assets/js/interactivity',
},
output: {
filename: '[name].js',
path: path.resolve( __dirname, '../build/' ),
library: [ 'wc', '__experimentalInteractivity' ],
libraryTarget: 'this',
Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
chunkLoadingGlobal: 'webpackWcBlocksJsonp',
},
resolve: {
alias,
plugins: resolvePlugins,
extensions: [ '.js', '.ts', '.tsx' ],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'WP directives',
Interactivity API: implement the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11071) * Sync Interactivity API code with Gutenberg * New store() API * Store raw actions * Update wc-interactivity-store implementation * Replace `wc_store` with `wc_initial_state` * Parse and populate initial state * Allow store parts in `store()` * Accept namespaces in directive paths * Add $$namespace to directives' object values * Make namespace parsing more robust * Use DeepPartial type for store parts * Do not pass `rawStore` to `afterLoad` callbacks * Simplify `store()` a bit * Implement `privateStore()` * Sync context directive with Gutenberg * Refactor scope and extract getters per scope * Add namespace to getters and actions * Remove current privateStore implementation * Remove `afterLoad` option from `store` * Use same proxy handlers for ns, getters and actions * Set scope inside `evaluate` * Refactor proxy handlers * Improve types a bit * Catch errors in async actions * Implement stacks for scopes and namespaces * Implement `getElement` * Change directives object structure * Remove unnecessary import * Implement private stores * Return value from sync actions * Minor optimizations and improved comments * Don't use async inside `data-wp-watch` * Use a single Provider in context directive * Remove DeepPartial type * Do not check if element exists * Add the `current` prop of state inside the scope * Move getters outside scope * Fix wc-key assignment * Fix missing `navigate` in directives * Fix namespace not being picked in the same element * Deep merge raw stores instead of proxied ones * Fix namespace assignment * Allow forward slashes in namespaces * Migration of Product Collection and Product Button blocks to the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11558) * Refactor Product Button with new store() API * Use `wc_initial_state` in Product Button * Fix namespace * Remove unnecessary state * Test namespaces in directive paths * Add test context with namespace * Simplify woo-test context * Move addToCart and animations to a file * Do not pass `rawStore` to `afterLoad` callbacks * Move callbacks and actions back to the main file Because the animation was broken. * Remove selectors in favor of state * Use default ns in `getContext` for state and actions * Remove `afterLoad` callback * Remove unnecessary ns * Fix getContext in add-to-cart * Replace namespace and delete unnecessary store * Pass context types only once * Use an alternative for requestIdleCallback * Add previous react code for notices * Add namespace to Product Collection block * Replace getTextButton with getButtonText * Add block name to the ProductCollection namespace * fix style HTML code * Remove circular deps error on the Interactivity API * Product Gallery block: Migrate to new Interactivity API store (https://github.com/woocommerce/woocommerce-blocks/pull/11721) * Migrate Product Gallery block to new Interactivity API store * Fix some references * Add missing data-wc-interactive * Fix an additional namespace * Remove unnecessary click handler * Dialog working * Refactor action names * Reindex PHP array There was some missing indexes, which turned the array into an object in JS. * Remove unused event handlers * Move next/previous logic to external function * Move StorePart util to the types folder * Rename namespace to `woocommerce/product-gallery` * Undo product collection namespace renaming * Remove unnecessary namespace * Don't hide the large image on page load * Minor refactorings * Fix eslint error * Fix php cs errors with spacing and double arrows alignment * Disable no-use-before-define rule for eslint * Disable @typescript-eslint/ban-types rule for eslint * Fix parsed context error in e2e tests * Fix context parser for Thumbnail image * Move store to the top of the frontend file * Add interactivity api utils to the @woocommerce/utils alias * Replace deprecated event attribute --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: roykho <roykho77@gmail.com> --------- Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com> * Fix error when closing product gallery dialog with keyboard escape key * use wc_initial_state instead of wc_store --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com>
2023-11-21 10:46:15 +00:00
checkCircularDeps: false,
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'WP directives' )
),
],
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve( 'babel-loader' ),
options: {
cacheDirectory:
process.env.BABEL_CACHE_DIRECTORY || true,
babelrc: false,
configFile: false,
presets: [
Interactivity API: implement the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11071) * Sync Interactivity API code with Gutenberg * New store() API * Store raw actions * Update wc-interactivity-store implementation * Replace `wc_store` with `wc_initial_state` * Parse and populate initial state * Allow store parts in `store()` * Accept namespaces in directive paths * Add $$namespace to directives' object values * Make namespace parsing more robust * Use DeepPartial type for store parts * Do not pass `rawStore` to `afterLoad` callbacks * Simplify `store()` a bit * Implement `privateStore()` * Sync context directive with Gutenberg * Refactor scope and extract getters per scope * Add namespace to getters and actions * Remove current privateStore implementation * Remove `afterLoad` option from `store` * Use same proxy handlers for ns, getters and actions * Set scope inside `evaluate` * Refactor proxy handlers * Improve types a bit * Catch errors in async actions * Implement stacks for scopes and namespaces * Implement `getElement` * Change directives object structure * Remove unnecessary import * Implement private stores * Return value from sync actions * Minor optimizations and improved comments * Don't use async inside `data-wp-watch` * Use a single Provider in context directive * Remove DeepPartial type * Do not check if element exists * Add the `current` prop of state inside the scope * Move getters outside scope * Fix wc-key assignment * Fix missing `navigate` in directives * Fix namespace not being picked in the same element * Deep merge raw stores instead of proxied ones * Fix namespace assignment * Allow forward slashes in namespaces * Migration of Product Collection and Product Button blocks to the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11558) * Refactor Product Button with new store() API * Use `wc_initial_state` in Product Button * Fix namespace * Remove unnecessary state * Test namespaces in directive paths * Add test context with namespace * Simplify woo-test context * Move addToCart and animations to a file * Do not pass `rawStore` to `afterLoad` callbacks * Move callbacks and actions back to the main file Because the animation was broken. * Remove selectors in favor of state * Use default ns in `getContext` for state and actions * Remove `afterLoad` callback * Remove unnecessary ns * Fix getContext in add-to-cart * Replace namespace and delete unnecessary store * Pass context types only once * Use an alternative for requestIdleCallback * Add previous react code for notices * Add namespace to Product Collection block * Replace getTextButton with getButtonText * Add block name to the ProductCollection namespace * fix style HTML code * Remove circular deps error on the Interactivity API * Product Gallery block: Migrate to new Interactivity API store (https://github.com/woocommerce/woocommerce-blocks/pull/11721) * Migrate Product Gallery block to new Interactivity API store * Fix some references * Add missing data-wc-interactive * Fix an additional namespace * Remove unnecessary click handler * Dialog working * Refactor action names * Reindex PHP array There was some missing indexes, which turned the array into an object in JS. * Remove unused event handlers * Move next/previous logic to external function * Move StorePart util to the types folder * Rename namespace to `woocommerce/product-gallery` * Undo product collection namespace renaming * Remove unnecessary namespace * Don't hide the large image on page load * Minor refactorings * Fix eslint error * Fix php cs errors with spacing and double arrows alignment * Disable no-use-before-define rule for eslint * Disable @typescript-eslint/ban-types rule for eslint * Fix parsed context error in e2e tests * Fix context parser for Thumbnail image * Move store to the top of the frontend file * Add interactivity api utils to the @woocommerce/utils alias * Replace deprecated event attribute --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: roykho <roykho77@gmail.com> --------- Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com> * Fix error when closing product gallery dialog with keyboard escape key * use wc_initial_state instead of wc_store --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com>
2023-11-21 10:46:15 +00:00
'@babel/preset-typescript',
[
'@babel/preset-react',
{
runtime: 'automatic',
importSource: 'preact',
},
],
],
// Required until Webpack is updated to ^5.0.0
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
],
},
},
],
},
],
},
};
};
module.exports = {
getCoreConfig,
getFrontConfig,
getMainConfig,
getPaymentsConfig,
getExtensionsConfig,
getSiteEditorConfig,
getStylingConfig,
getInteractivityAPIConfig,
};