diff --git a/mailpoet/assets/js/src/webpack_admin_expose.js b/mailpoet/assets/js/src/webpack_admin_expose.js new file mode 100644 index 0000000000..1fc945ca50 --- /dev/null +++ b/mailpoet/assets/js/src/webpack_admin_expose.js @@ -0,0 +1,22 @@ +// Modules that are exposed for usage in the premium plugin. +// The exports below are available via "window.MailPoetLib". + +// libs +export * as ClassNames from 'classnames'; +export * as React from 'react'; +export * as ReactDom from 'react-dom'; +export * as ReactJsxRuntime from 'react/jsx-runtime'; +export * as ReactRouter from 'react-router-dom'; +export * as ReactTooltip from 'react-tooltip'; +export * as ReactStringReplace from 'react-string-replace'; + +// assets +export * as Common from 'common'; +export * as CommonFormReactSelect from 'common/form/react_select/react_select'; +export * as CommonFormSelect from 'common/form/select/select'; +export * as CommonGrid from 'common/grid'; +export * as HelpTooltip from 'help-tooltip'; +export * as Hooks from 'hooks.js'; +export * as Listing from 'listing'; +export * as DynamicSegmentsTypes from 'segments/dynamic/types'; +export * as WordPressData from 'wp-data-hooks'; diff --git a/mailpoet/webpack.config.js b/mailpoet/webpack.config.js index 4ce333040e..802cea3efc 100644 --- a/mailpoet/webpack.config.js +++ b/mailpoet/webpack.config.js @@ -102,6 +102,14 @@ const baseConfig = { exclude: /(node_modules|src\/vendor)/, loader: 'babel-loader', }, + { + include: path.resolve( + __dirname, + 'assets/js/src/webpack_admin_expose.js', + ), + loader: 'expose-loader', + options: { exposes: globalPrefix }, + }, { include: require.resolve('underscore'), loader: 'expose-loader', @@ -109,161 +117,6 @@ const baseConfig = { exposes: '_', }, }, - { - include: require.resolve('react-tooltip'), - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.ReactTooltip`, - }, - }, - { - include: require.resolve('react'), - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.React`, - }, - }, - { - include: require.resolve('react/jsx-runtime'), - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.ReactJsxRuntime`, - }, - }, - { - include: require.resolve('react-dom'), - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.ReactDOM`, - }, - }, - { - include: require.resolve('react-router-dom'), - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.ReactRouter`, - }, - }, - { - include: require.resolve('react-string-replace'), - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.ReactStringReplace`, - }, - }, - { - include: path.resolve(__dirname, 'assets/js/src/wp-data-hooks.js'), - loader: 'expose-loader', - options: { - exposes: { - globalName: `${globalPrefix}.WordPressData`, - override: true, - }, - }, - }, - { - include: path.resolve(__dirname, 'assets/js/src/hooks.js'), - loader: 'expose-loader', - options: { - exposes: { - globalName: `${globalPrefix}.Hooks`, - override: true, - }, - }, - }, - { - include: path.resolve(__dirname, 'assets/js/src/listing/index.ts'), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.Listing`, - }, - }, - 'babel-loader', - ], - }, - { - include: path.resolve(__dirname, 'assets/js/src/help-tooltip.jsx'), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.HelpTooltip`, - }, - }, - 'babel-loader', - ], - }, - { - include: path.resolve(__dirname, 'assets/js/src/common/index.ts'), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.Common`, - }, - }, - 'babel-loader', - ], - }, - { - include: path.resolve(__dirname, 'assets/js/src/common/grid/index.tsx'), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.CommonGrid`, - }, - }, - 'babel-loader', - ], - }, - { - include: path.resolve( - __dirname, - 'assets/js/src/common/form/select/select.tsx', - ), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.CommonFormSelect`, - }, - }, - 'babel-loader', - ], - }, - { - include: path.resolve( - __dirname, - 'assets/js/src/common/form/react_select/react_select.tsx', - ), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.CommonFormReactSelect`, - }, - }, - 'babel-loader', - ], - }, - { - include: path.resolve( - __dirname, - 'assets/js/src/segments/dynamic/types.ts', - ), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.DynamicSegmentsTypes`, - }, - }, - 'babel-loader', - ], - }, { include: /Blob.js$/, loader: 'exports-loader', @@ -288,18 +141,6 @@ const baseConfig = { }, }, }, - { - include: require.resolve('classnames'), - use: [ - { - loader: 'expose-loader', - options: { - exposes: `${globalPrefix}.ClassNames`, - }, - }, - 'babel-loader', - ], - }, { test: /node_modules\/tinymce/, loader: 'string-replace-loader', @@ -334,24 +175,7 @@ const adminConfig = { entry: { vendor: 'webpack_vendor_index.jsx', mailpoet: 'webpack_mailpoet_index.jsx', - // Admin vendor contains libraries shared between free and premium plugin - admin_vendor: [ - 'react', - 'react-dom', - require.resolve('react-router-dom'), - 'react-string-replace', - 'prop-types', - 'classnames', - 'lodash', - 'help-tooltip.jsx', - 'listing/index.ts', - 'common/index.ts', - 'common/grid/index.tsx', - 'common/form/select/select.tsx', - 'common/form/react_select/react_select.tsx', - 'wp-data-hooks.js', - 'segments/dynamic/types.ts', - ], + admin_vendor: ['prop-types', 'lodash', 'webpack_admin_expose.js'], // libraries shared between free and premium plugin admin: 'webpack_admin_index.jsx', automation: 'automation/automation.tsx', automation_editor: 'automation/editor/index.tsx',