From b8a161e1d46e935257eb53b4cf126be99a645a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Mon, 26 Nov 2018 15:01:10 +0100 Subject: [PATCH] Extract initializations from WebPack & make load order more deterministic [MAILPOET-1644] --- assets/js/src/form_editor/webpack_index.jsx | 9 ++ .../src/newsletter_editor/webpack_index.jsx | 49 +++++++ assets/js/src/webpack_admin_index.jsx | 19 +++ assets/js/src/webpack_mailpoet_index.jsx | 10 ++ assets/js/src/webpack_public_index.jsx | 9 ++ assets/js/src/webpack_vendor_index.jsx | 9 ++ webpack.config.js | 121 ++---------------- 7 files changed, 116 insertions(+), 110 deletions(-) create mode 100644 assets/js/src/form_editor/webpack_index.jsx create mode 100644 assets/js/src/newsletter_editor/webpack_index.jsx create mode 100644 assets/js/src/webpack_admin_index.jsx create mode 100644 assets/js/src/webpack_mailpoet_index.jsx create mode 100644 assets/js/src/webpack_public_index.jsx create mode 100644 assets/js/src/webpack_vendor_index.jsx diff --git a/assets/js/src/form_editor/webpack_index.jsx b/assets/js/src/form_editor/webpack_index.jsx new file mode 100644 index 0000000000..611d1a5516 --- /dev/null +++ b/assets/js/src/form_editor/webpack_index.jsx @@ -0,0 +1,9 @@ +// Initialize Editor dependencies that have side effect (meaning they +// not only define module but also modify/register something on load). + +// This is to avoid undefined import order & messy WebPack config. +// Code can be gradually refactored to avoid side effects completely. + +import 'form_editor/form_editor.js'; // side effect - calls document.observe() +import 'codemirror'; // side effect - has to be loaded here, used in 'editor.html' +import 'codemirror/mode/css/css'; // side effect - has to be loaded here, used in 'editor.html' diff --git a/assets/js/src/newsletter_editor/webpack_index.jsx b/assets/js/src/newsletter_editor/webpack_index.jsx new file mode 100644 index 0000000000..749f8c0aab --- /dev/null +++ b/assets/js/src/newsletter_editor/webpack_index.jsx @@ -0,0 +1,49 @@ +// Initialize Editor dependencies that have side effect (meaning they +// not only define module but also modify/register something on load). + +// This is to avoid undefined import order & messy WebPack config. +// Code can be gradually refactored to avoid side effects completely. + +// dependencies +import 'sticky-kit'; // side effect - extends jQuery +import 'velocity-animate'; // side effect - assigns to window + +// app +import 'newsletter_editor/initializer.jsx'; // side effect - calls Hooks.addAction() +import 'newsletter_editor/App'; // side effect - assigns to window + +// components +import 'newsletter_editor/components/config.js'; // side effect - calls App.on() +import 'newsletter_editor/components/styles.js'; // side effect - calls App.on() +import 'newsletter_editor/components/sidebar.js'; // side effect - calls App.on() +import 'newsletter_editor/components/content.js'; // side effect - calls App.on() +import 'newsletter_editor/components/heading.js'; // side effect - calls App.on() +import 'newsletter_editor/components/save.js'; // side effect - calls App.on() +import 'newsletter_editor/components/communication.js'; // side effect - calls App.on() + +// behaviors +import 'newsletter_editor/behaviors/BehaviorsLookup.js'; // side effect - assings to window and Marionette +import 'newsletter_editor/behaviors/ColorPickerBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/ContainerDropZoneBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/DraggableBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/HighlightContainerBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/HighlightEditingBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/MediaManagerBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/ResizableBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/SortableBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/ShowSettingsBehavior.js'; // side effect - assigns to BehaviorsLookup +import 'newsletter_editor/behaviors/TextEditorBehavior.js'; // side effect - assigns to BehaviorsLookup + +// blocks +import 'newsletter_editor/blocks/container.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/button.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/image.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/divider.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/text.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/spacer.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/footer.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/header.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/automatedLatestContent.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/automatedLatestContentLayout.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/posts.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/social.js'; // side effect - calls App.on() diff --git a/assets/js/src/webpack_admin_index.jsx b/assets/js/src/webpack_admin_index.jsx new file mode 100644 index 0000000000..8c87d46910 --- /dev/null +++ b/assets/js/src/webpack_admin_index.jsx @@ -0,0 +1,19 @@ +// Initialize Editor dependencies that have side effect (meaning they +// not only define module but also modify/register something on load). + +// This is to avoid undefined import order & messy WebPack config. +// Code can be gradually refactored to avoid side effects completely. + +import 'subscribers/subscribers.jsx'; // side effect - renders ReactDOM to document +import 'newsletters/newsletters.jsx'; // side effect - renders ReactDOM to window +import 'segments/segments.jsx'; // side effect - renders ReactDOM to document +import 'forms/forms.jsx'; // side effect - renders ReactDOM to document +import 'settings/tabs.js'; // side effect - assigns to MailPoet.Router, executes code on doc ready +import 'help/help.jsx'; // side effect - renders ReactDOM to document +import 'intro.jsx'; // side effect - assigns to MailPoet.showIntro +import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler to document +import 'subscribers/importExport/import.js'; // side effect - executes on doc ready, adds events +import 'subscribers/importExport/export.js'; // side effect - executes on doc ready +import 'welcome_wizard/wizard.jsx'; // side effect - renders ReactDOM to document +import 'settings/announcement.jsx'; // side effect - renders ReactDOM to document +import 'nps_poll.jsx'; // side effect - calls setImmediate() diff --git a/assets/js/src/webpack_mailpoet_index.jsx b/assets/js/src/webpack_mailpoet_index.jsx new file mode 100644 index 0000000000..79a1e3e6de --- /dev/null +++ b/assets/js/src/webpack_mailpoet_index.jsx @@ -0,0 +1,10 @@ +// Initialize Editor dependencies that have side effect (meaning they +// not only define module but also modify/register something on load). + +// This is to avoid undefined import order & messy WebPack config. +// Code can be gradually refactored to avoid side effects completely. + +import 'mailpoet'; // side effect - assigns MailPoet to window +import 'dismissible-notice.jsx'; // side effect - adds jQuery event +import 'jquery.serialize_object'; // side effect - extends jQuery +import 'parsleyjs'; // side effect - extends jQuery diff --git a/assets/js/src/webpack_public_index.jsx b/assets/js/src/webpack_public_index.jsx new file mode 100644 index 0000000000..af226b1e64 --- /dev/null +++ b/assets/js/src/webpack_public_index.jsx @@ -0,0 +1,9 @@ +// Initialize Editor dependencies that have side effect (meaning they +// not only define module but also modify/register something on load). + +// This is to avoid undefined import order & messy WebPack config. +// Code can be gradually refactored to avoid side effects completely. + +import 'mailpoet'; // side effect - assigns MailPoet to window +import 'jquery.serialize_object'; // side effect - extends jQuery +import 'public.js'; // side effect - assigns to window, sets up form validation, etc. diff --git a/assets/js/src/webpack_vendor_index.jsx b/assets/js/src/webpack_vendor_index.jsx new file mode 100644 index 0000000000..ae3175354a --- /dev/null +++ b/assets/js/src/webpack_vendor_index.jsx @@ -0,0 +1,9 @@ +// Initialize Editor dependencies that have side effect (meaning they +// not only define module but also modify/register something on load). + +// This is to avoid undefined import order & messy WebPack config. +// Code can be gradually refactored to avoid side effects completely. + +import 'handlebars'; // no side effect - this just explicitly requires Handlebars +import 'handlebars_helpers'; // side effect - extends Handlebars, assigns to window +import 'wp-js-hooks'; // side effect - assigns to window diff --git a/webpack.config.js b/webpack.config.js index 1d6b8f5d1a..0744c00cd9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -219,75 +219,11 @@ var baseConfig = { var adminConfig = { name: 'admin', entry: { - vendor: [ - 'handlebars', // no side effect - this just explicitly requires Handlebars - 'handlebars_helpers', // side effect - extends Handlebars, assigns to window - 'wp-js-hooks' // side effect - assigns to window - ], - mailpoet: [ - 'mailpoet', // side effect - assigns MailPoet to window - 'jquery.serialize_object', // side effect - extends jQuery - 'parsleyjs', // side effect - extends jQuery - 'dismissible-notice.jsx', // side effect - adds jQuery event - ], - admin_vendor: [ - 'newsletter_editor/initializer.jsx', // side effect - calls Hooks.addAction() - ], - admin: [ - 'subscribers/subscribers.jsx', // side effect - renders ReactDOM to document - 'newsletters/newsletters.jsx', // side effect - renders ReactDOM to window - 'segments/segments.jsx', // side effect - renders ReactDOM to document - 'forms/forms.jsx', // side effect - renders ReactDOM to document - 'settings/tabs.js', // side effect - assigns to MailPoet.Router, executes code on doc ready - 'help/help.jsx', // side effect - renders ReactDOM to document - 'intro.jsx', // side effect - assigns to MailPoet.showIntro - 'settings/reinstall_from_scratch.js', // side effect - adds event handler to document - 'subscribers/importExport/import.js', // side effect - executes on doc ready, adds events - 'subscribers/importExport/export.js', // side effect - executes on doc ready - 'welcome_wizard/wizard.jsx', // side effect - renders ReactDOM to document - 'settings/announcement.jsx', // side effect - renders ReactDOM to document - 'nps_poll.jsx' // side effect - calls setImmediate() - ], - form_editor: [ - 'form_editor/form_editor.js', // side effect - calls document.observe() - 'codemirror', // side effect - has to be loaded here, used in 'editor.html' - 'codemirror/mode/css/css' // side effect - has to be loaded here, used in 'editor.html' - ], - newsletter_editor: [ - 'sticky-kit', // side effect - extends jQuery - 'velocity-animate', // side effect - assigns to window - 'newsletter_editor/App', // side effect - assigns to window - 'newsletter_editor/components/config.js', // side effect - calls App.on() - 'newsletter_editor/components/styles.js', // side effect - calls App.on() - 'newsletter_editor/components/sidebar.js', // side effect - calls App.on() - 'newsletter_editor/components/content.js', // side effect - calls App.on() - 'newsletter_editor/components/heading.js', // side effect - calls App.on() - 'newsletter_editor/components/save.js', // side effect - calls App.on() - 'newsletter_editor/components/communication.js', // side effect - calls App.on() - 'newsletter_editor/behaviors/BehaviorsLookup.js', // side effect - assings to window and Marionette - 'newsletter_editor/behaviors/ColorPickerBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/ContainerDropZoneBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/DraggableBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/HighlightContainerBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/HighlightEditingBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/MediaManagerBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/ResizableBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/SortableBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/ShowSettingsBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/behaviors/TextEditorBehavior.js', // side effect - assigns to BehaviorsLookup - 'newsletter_editor/blocks/container.js', // side effect - calls App.on() - 'newsletter_editor/blocks/button.js', // side effect - calls App.on() - 'newsletter_editor/blocks/image.js', // side effect - calls App.on() - 'newsletter_editor/blocks/divider.js', // side effect - calls App.on() - 'newsletter_editor/blocks/text.js', // side effect - calls App.on() - 'newsletter_editor/blocks/spacer.js', // side effect - calls App.on() - 'newsletter_editor/blocks/footer.js', // side effect - calls App.on() - 'newsletter_editor/blocks/header.js', // side effect - calls App.on() - 'newsletter_editor/blocks/automatedLatestContent.js', // side effect - calls App.on() - 'newsletter_editor/blocks/automatedLatestContentLayout.js', // side effect - calls App.on() - 'newsletter_editor/blocks/posts.js', // side effect - calls App.on() - 'newsletter_editor/blocks/social.js' // side effect - calls App.on() - ] + vendor: 'webpack_vendor_index.jsx', + mailpoet: 'webpack_mailpoet_index.jsx', + admin: 'webpack_admin_index.jsx', + form_editor: 'form_editor/webpack_index.jsx', + newsletter_editor: 'newsletter_editor/webpack_index.jsx', }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ @@ -312,11 +248,7 @@ var adminConfig = { var publicConfig = { name: 'public', entry: { - public: [ - 'mailpoet', // side effect - assigns MailPoet to window - 'jquery.serialize_object', // side effect - extends jQuery - 'public.js' // side effect - assigns to window, sets up form validation, etc. - ] + public: 'webpack_public_index.jsx', }, plugins: [ // replace MailPoet definition with a smaller version for public @@ -347,42 +279,10 @@ var migratorConfig = { var testConfig = { name: 'test', entry: { - vendor: ['handlebars', 'handlebars_helpers'], + vendor: 'webpack_vendor_index.jsx', testNewsletterEditor: [ - 'mailpoet', - - 'newsletter_editor/App', - 'newsletter_editor/components/config.js', - 'newsletter_editor/components/styles.js', - 'newsletter_editor/components/sidebar.js', - 'newsletter_editor/components/content.js', - 'newsletter_editor/components/heading.js', - 'newsletter_editor/components/save.js', - 'newsletter_editor/components/communication.js', - 'newsletter_editor/behaviors/BehaviorsLookup.js', - 'newsletter_editor/behaviors/ColorPickerBehavior.js', - 'newsletter_editor/behaviors/ContainerDropZoneBehavior.js', - 'newsletter_editor/behaviors/DraggableBehavior.js', - 'newsletter_editor/behaviors/HighlightContainerBehavior.js', - 'newsletter_editor/behaviors/HighlightEditingBehavior.js', - 'newsletter_editor/behaviors/MediaManagerBehavior.js', - 'newsletter_editor/behaviors/ResizableBehavior.js', - 'newsletter_editor/behaviors/SortableBehavior.js', - 'newsletter_editor/behaviors/ShowSettingsBehavior.js', - 'newsletter_editor/behaviors/TextEditorBehavior.js', - 'newsletter_editor/blocks/base.js', - 'newsletter_editor/blocks/container.js', - 'newsletter_editor/blocks/button.js', - 'newsletter_editor/blocks/image.js', - 'newsletter_editor/blocks/divider.js', - 'newsletter_editor/blocks/text.js', - 'newsletter_editor/blocks/spacer.js', - 'newsletter_editor/blocks/footer.js', - 'newsletter_editor/blocks/header.js', - 'newsletter_editor/blocks/automatedLatestContent.js', - 'newsletter_editor/blocks/automatedLatestContentLayout.js', - 'newsletter_editor/blocks/posts.js', - 'newsletter_editor/blocks/social.js', + 'webpack_mailpoet_index.jsx', + 'newsletter_editor/webpack_index.jsx', 'components/config.spec.js', 'components/content.spec.js', @@ -426,7 +326,8 @@ var testConfig = { 'sticky-kit': 'vendor/jquery.sticky-kit.js', 'backbone.marionette': 'backbone.marionette/lib/backbone.marionette', 'backbone.supermodel$': 'backbone.supermodel/build/backbone.supermodel.js', - 'blob$': 'blob-tmp/Blob.js' + 'blob$': 'blob-tmp/Blob.js', + 'wp-js-hooks': 'WP-JS-Hooks/src/event-manager.js', }, }, externals: {