From 3c78e17c0c9baa311ef2e080cba273ff7017242a Mon Sep 17 00:00:00 2001 From: Gabriel Birke Date: Thu, 14 Dec 2023 19:06:44 +0100 Subject: [PATCH] Add dev and build scripts for thank you banners Make `campaign_info.toml` with fundraising banners the default again, reverting the previous edit to the documentation. Add `campaign_info.thank_you.toml` Modify Webpack configuration to check for `env.campaign_info` parameter, use `campaign_info.toml` as the default Add two new `npm` scripts for running a special "thank you" dev environment and building the thank you banners Move file reading code to CampaignConfig class Adapt README to document the thank you functionality --- README.md | 11 ++ campaign_info.thank_you.toml | 171 ++++++++++++++++++++++ campaign_info_main.toml | 244 ------------------------------- docs/Use-of-Funds-integration.md | 2 +- package.json | 2 + webpack.common.js | 148 +++++++++---------- webpack.config.js | 9 +- webpack.production.js | 5 +- webpack/campaign_config.js | 7 + 9 files changed, 273 insertions(+), 326 deletions(-) create mode 100644 campaign_info.thank_you.toml delete mode 100644 campaign_info_main.toml diff --git a/README.md b/README.md index c75a9ee59..4744b3c54 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,17 @@ tracking pixels inside the banner. 1. Duplicate an existing folder with banner entry points, e.g. `banners/desktop`. 2. Create a new campaign and its banner configuration in `campaign_info.toml`. +## Developing and building "thank you" banners + +The "thank you" banners have a special configuration file, `campaign_info.thank_you.toml`. +Edit this file for the necessary campaign and tracking parameters. + +To use this file instead of the standard `campaign_info.toml` file, run `npm run thankyou` instead of `npm run dev`. +This environment does *not* use `nodemon` to watch for changes in `campaign_info.thank_you.toml`. +If you change that file or one of the webpack configuration files, you need to restart the server. + +To build the "thank you" banners, run `npm run build:thankyou` instead of `npm run build`. + ### Creating A/B tests TODO: Rewrite this section for different types of tests (text changes, diff --git a/campaign_info.thank_you.toml b/campaign_info.thank_you.toml new file mode 100644 index 000000000..97d147077 --- /dev/null +++ b/campaign_info.thank_you.toml @@ -0,0 +1,171 @@ +# Example: "B18WMDE_" +# See https://github.com/wmde/fundraising-infrastructure/wiki/How-to-manage-banners-on-de.wikipedia.org + + +# Thank You Campaign +[thank_you] +name = "Desktop" +campaign = "C23_WMDE_Thank_You_DE_00" +icon = "desktop" +campaign_tracking = "ty01-240101" +description = "Thank you banner" +preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" +preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_org" + +[thank_you.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.de.ts" +pagename = "B23_WMDE_Thank_You_Desktop_DE_ctrl" +tracking = "org-ty-240101-ctrl" + +[thank_you.banners.var] +filename = "./banners/thank_you/banner_var.de.ts" +pagename = "B23_WMDE_Thank_You_Desktop_DE_var" +tracking = "org-ty-240101-var" + +[thank_you.test_matrix] +platform = ["edge", "ie11", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] +resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560x1440"] + + +[thank_you_en] +name = "English Desktop" +campaign = "C23_WMDE_Thank_You_Desktop_EN_00" +icon = "desktop" +campaign_tracking = "ty01-240101" +description = "Thank you banner" +preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype" +preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_org" + +[thank_you_en.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.en.ts" +pagename = "B23_WMDE_Thank_You_Desktop_EN_ctrl" +tracking = "org-ty-240101-en-ctrl" + +[thank_you_en.banners.var] +filename = "./banners/thank_you/banner_var.en.ts" +pagename = "B23_WMDE_Thank_You_Desktop_EN_var" +tracking = "org-ty-240101-en-var" + +[thank_you_en.test_matrix] +platform = ["edge", "ie11", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] +resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560x1440"] + +# Thank you campaign mobile wp.org +[thank_you_mobile] +name = "Mobile" +campaign = "C23_WMDE_Thank_You_Mobile_DE_00" +icon = "mobile" +campaign_tracking = "ty01-mob-240101" +description = "Thank you banner" +preview_link = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype" +preview_url = 'https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_org" + +[thank_you_mobile.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.de.ts" +pagename = "B23_WMDE_Thank_You_Mobile_DE_ctrl" +tracking = "org-mob-ty-240101-ctrl" + +[thank_you_mobile.banners.var] +filename = "./banners/thank_you/banner_var.de.ts" +pagename = "B23_WMDE_Thank_You_Mobile_DE_var" +tracking = "org-mob-ty-240101-var" + +[thank_you_mobile.test_matrix] +device = [ 'samsung_s10', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max"] +orientation = [ "portrait", "landscape"] + +# English Thank you campaign mobile wp.org +[thank_you_mobile_en] +name = "English Mobile" +campaign = "C23_WMDE_Thank_You_Mobile_EN_00" +icon = "mobile" +campaign_tracking = "ty01-mob-en-240101" +description = "Thank you banner" +preview_link = "/en-mobile/wiki/Main_Page?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype" +preview_url = 'https://en.m.wikipedia.org/wiki/Main_Page?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_org" + +[thank_you_mobile_en.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.en.ts" +pagename = "B23_WMDE_Thank_You_Mobile_EN_ctrl" +tracking = "org-mob-ty-240101-en-ctrl" + +[thank_you_mobile_en.banners.var] +filename = "./banners/thank_you/banner_var.en.ts" +pagename = "B23_WMDE_Thank_You_Mobile_EN_var" +tracking = "org-mob-ty-240101-en-var" + +[thank_you_mobile_en.test_matrix] +device = [ 'samsung_s10', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max"] +orientation = [ "portrait", "landscape"] + +# Thank you campaign ipad wp.org +[thank_you_ipad] +name = "iPad" +campaign = "C23_WMDE_Thank_You_iPad_00" +icon = "pad" +campaign_tracking = "ty01-ipad-240101" +description = "Thank you banner" +preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" +preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_org" + +[thank_you_ipad.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.de.ts" +pagename = "B23_WMDE_Thank_You_iPad_ctrl" +tracking = "org-ipad-ty-240101-ctrl" + +[thank_you_ipad.banners.var] +filename = "./banners/thank_you/banner_var.de.ts" +pagename = "B23_WMDE_Thank_You_iPad_var" +tracking = "org-ipad-ty-240101-var" + +[thank_you_ipad.test_matrix] +device = [ 'ipad_mini', 'ipad', 'ipad_pro_9_7_inch', 'ipad_pro_12_inch' ] +orientation = [ "portrait", "landscape"] + +# Thank you campaign wp.de +[thank_you_wpde] +campaign = "WPDE Desktop" +name = "C23_WPDE_Thank_You_Desktop_00" +icon = "desktop" +campaign_tracking = "ty01-wpde-240101" +description = "Thank you banner" +preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde" +preview_url = 'https://www.wikipedia.de/?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_de" +wrap_in_wikitext = false + +[thank_you_wpde.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.wpde.ts" +pagename = "B23_WPDE_Thank_You_Desktop_ctrl" +tracking = "de-wpde-ty-240101-ctrl" + +[thank_you_wpde.banners.var] +filename = "./banners/thank_you/banner_var.wpde.ts" +pagename = "B23_WPDE_Thank_You_Desktop_var" +tracking = "de-wpde-ty-240101-var" + +[thank_you_wpde_mobile] +campaign = "WPDE Mobile" +name = "C23_WPDE_Thank_You_Mobile_00" +icon = "mobile" +campaign_tracking = "ty01-wpde-mob-240101" +description = "Thank you banner" +preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde" +preview_url = 'https://www.wikipedia.de/?banner={{PLACEHOLDER}}' +wrapper_template = "wikipedia_de" +wrap_in_wikitext = false + +[thank_you_wpde_mobile.banners.ctrl] +filename = "./banners/thank_you/banner_ctrl.wpde.ts" +pagename = "B23_WPDE_Thank_You_Mobile_ctrl" +tracking = "de-wpde-mob-ty-240101-ctrl" + +[thank_you_wpde_mobile.banners.var] +filename = "./banners/thank_you/banner_var.wpde.ts" +pagename = "B23_WPDE_Thank_You_Mobile_var" +tracking = "de-wpde-mob-ty-240101-var" diff --git a/campaign_info_main.toml b/campaign_info_main.toml deleted file mode 100644 index 8a930e267..000000000 --- a/campaign_info_main.toml +++ /dev/null @@ -1,244 +0,0 @@ -# NOTE: The "pagename" value must start with an uppercase "B" and should be followed by the year (YY) and WMDE. -# Example: "B18WMDE_" -# See https://github.com/wmde/fundraising-infrastructure/wiki/How-to-manage-banners-on-de.wikipedia.org - -# A Campaign with global settings -[desktop] -name = "Desktop" -icon = "desktop" -campaign = "C23_WMDE_Desktop_DE_16" -description = "based on ctrl of test 15, variant has a donor heart" -campaign_tracking = "16-ba-231129" -preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" -preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE" - -# Banners of the campaign, key after "banners" can be anything -[desktop.banners.ctrl] -filename = "./banners/desktop/banner_ctrl.ts" -pagename = "B23_WMDE_Desktop_DE_16_ctrl" -tracking = "org-16-231129-ctrl" - -[desktop.banners.var] -filename = "./banners/desktop/banner_var.ts" -pagename = "B23_WMDE_Desktop_DE_16_var" -tracking = "org-16-231129-var" - -[desktop.test_matrix] -platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] -resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560x1440"] - - -[mobile] -name = "Mobile" -icon = "mobile" -campaign = "C23_WMDE_Mobile_DE_11_2" -description = "based on ctrl 10, Var redirects users to the donation page with the amount button" -campaign_tracking = "mob-de-11-ba-231201" -preview_link = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&useskin=minerva" -preview_url = 'https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&useskin=minerva&devMode' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE" - -# Banners of the campaign, key after "banners" can be anything -[mobile.banners.ctrl] -filename = "./banners/mobile/banner_ctrl.ts" -pagename = "B23_WMDE_Mobile_DE_11_2_ctrl" -tracking = "org-mob11_2-231201-ctrl" - -[mobile.banners.var] -filename = "./banners/mobile/banner_var.ts" -pagename = "B23_WMDE_Mobile_DE_11_2_var" -tracking = "org-mob11_2-231201-var" - -[mobile.test_matrix] -device = [ 'samsung_s10', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max"] -orientation = [ "portrait", "landscape"] - - -[pad] -name = "iPad" -icon = "pad" -campaign = "C23_WMDE_iPad_01" -description = "VAR has payment logos" -campaign_tracking = "pad01-ba-231030" -preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" -preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE" - -[pad.banners.ctrl] -filename = "./banners/pad/banner_ctrl.ts" -pagename = "B23_WMDE_iPad_01_ctrl" -tracking = "org-pad01-231030-ctrl" - -[pad.banners.var] -filename = "./banners/pad/banner_var.ts" -pagename = "B23_WMDE_iPad_01_var" -tracking = "org-pad01-231030-var" - -[pad.test_matrix] -device = [ 'ipad_mini', 'ipad', 'ipad_pro_9_7_inch', 'ipad_pro_12_inch' ] -orientation = [ "portrait", "landscape"] - - - -[wikipediade] -name = "WPDE Desktop" -icon = "desktop" -campaign = "C23_WPDE_Desktop_01" -description = "VAR has translated WMF copy" -campaign_tracking = "wpde-01-231030" -preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde" -wrapper_template = "wikipedia_de" -wrap_in_wikitext = false -preview_url = 'https://www.wikipedia.de/?banner={{banner}}' - -[wikipediade.banners.ctrl] -filename = "./banners/wpde_desktop/banner_ctrl.ts" -pagename = "B23_WPDE_Desktop_01_ctrl" -tracking = "wpde-01-231030-ctrl" - -[wikipediade.banners.var] -filename = "./banners/wpde_desktop/banner_var.ts" -pagename = "B23_WPDE_Desktop_01_var" -tracking = "wpde-01-231030-var" - - -[wikipediade_mobile] -name = "WPDE Mobile" -icon = "mobile" -campaign = "C23_WPDE_Mobile_01" -description = "Based on CRTL of WPDE_mob_01" -campaign_tracking = "wpde-mob01-231030" -preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde" -wrapper_template = "wikipedia_de" -wrap_in_wikitext = false -preview_url = 'https://www.wikipedia.de/?banner={{banner}}' - -[wikipediade_mobile.banners.ctrl] -filename = "./banners/wpde_mobile/banner_ctrl.ts" -pagename = "B23_WPDE_Mobile_01_ctrl" -tracking = "wpde-mob01-231030-ctrl" - -[wikipediade_mobile.banners.var] -filename = "./banners/wpde_mobile/banner_var.ts" -pagename = "B23_WPDE_Mobile_01_var" -tracking = "wpde-mob01-231030-var" - - - -[english] -name = "English Desktop" -icon = "desktop" -campaign = "C23_WMDE_Desktop_EN_03" -description = "VAR has the WMF text" -campaign_tracking = "en03-ba-231120" -preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype" -preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_EN" - -[english.banners.ctrl] -filename = "./banners/english/banner_ctrl.ts" -pagename = "B23_WMDE_Desktop_EN_03_ctrl" -tracking = "org-en03-231120-ctrl" - -[english.banners.var] -filename = "./banners/english/banner_var.ts" -pagename = "B23_WMDE_Desktop_EN_03_var" -tracking = "org-en03-231120-var" - -[english.test_matrix] -platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] -resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560x1440"] - - - -[mobile_english] -name = "English Mobile" -icon = "mobile" -campaign = "C23_WMDE_Mobile_EN_01" -description = "Tab button VS interior button on mini banners" -campaign_tracking = "mob_en01-ba-231030" -preview_link = "/en-mobile/wiki/Main_Page?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype" -preview_url = 'https://en.m.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode&useskin=minerva' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_EN" - -[mobile_english.banners.ctrl] -filename = "./banners/mobile_english/banner_ctrl.ts" -pagename = "B23_WMDE_Mobile_EN_01_ctrl" -tracking = "org-mob_en01-231030-ctrl" - -[mobile_english.banners.var] -filename = "./banners/mobile_english/banner_var.ts" -pagename = "B23_WMDE_Mobile_EN_01_var" -tracking = "org-mob_en01-231030-var" - -[mobile_english.test_matrix] -device = [ 'samsung_s10', 'nexus_6', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max" ] -orientation = [ "portrait", "landscape" ] - - -[pad_en] -name = "English iPad" -icon = "pad" -campaign = "C23_WMDE_iPad_EN_00" -description = "VAR has soft close" -campaign_tracking = "en-ipad00-230426" -preview_link ='/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype' -preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_EN" - -[pad_en.banners.ctrl] -filename = "./banners/pad_english/banner_ctrl.ts" -pagename = "B23_WMDE_iPad_EN_00_ctrl" -tracking = "org-en-ipad00-230501-ctrl" - -[pad_en.banners.var] -filename = "./banners/pad_english/banner_var.ts" -pagename = "B23_WMDE_iPad_EN_00_var" -tracking = "org-en-ipad00-230501-var" - -[pad_en.test_matrix] -device = [ 'ipad_mini', 'ipad', 'ipad_pro_9_7_inch', 'ipad_pro_12_inch'] -orientation = [ "portrait", "landscape"] - - -[thank_you] -name = "Thank you banner" -icon = "desktop" -campaign = "C23_Thank_You_00" -description = "Development campaign for thank you banner" -campaign_tracking = "ty-240101" -preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" -preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode' -wrapper_template = "wikipedia_org" -use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_EN" - -[thank_you.banners.ctrl] -filename = "./banners/thank_you/banner_ctrl.de.ts" -pagename = "B23_WMDE_Thank_You_DE_00_ctrl" -tracking = "org-ty00-240101-ctrl" - -[thank_you.banners.var] -filename = "./banners/thank_you/banner_var.de.ts" -pagename = "B23_WMDE_Thank_You_DE_00_var" -tracking = "org-ty00-240101-var" - -[thank_you.banners.ctrl_en] -filename = "./banners/thank_you/banner_ctrl.en.ts" -pagename = "B23_WMDE_Thank_You_EN_00_ctrl" -tracking = "org-en-ty00-240101-ctrl" - -[thank_you.banners.var_en] -filename = "./banners/thank_you/banner_var.en.ts" -pagename = "B23_WMDE_Thank_You_EN_00_var" -tracking = "org-en-ty00-240101-var" - -[thank_you.test_matrix] -platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] -resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560x1440"] diff --git a/docs/Use-of-Funds-integration.md b/docs/Use-of-Funds-integration.md index a705a741c..c7ffdeca7 100644 --- a/docs/Use-of-Funds-integration.md +++ b/docs/Use-of-Funds-integration.md @@ -24,7 +24,7 @@ Each year, create two new pages on meta.wikipedia.org, one for English and one f * https://meta.wikimedia.org/wiki/MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE * https://meta.wikimedia.org/wiki/MediaWiki:WMDE_Fundraising/UseOfFunds_2023_EN -To use different pages, change the setting `use_of_funds_source` in the file [`campaigns_info.toml`](../campaign_info_main.toml). +To use different pages, change the setting `use_of_funds_source` in the file [`campaigns_info.toml`](../campaign_info.toml). ## Initializing the loader class in the entry points diff --git a/package.json b/package.json index 03c047eb8..8a2d3300f 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "watch": "webpack --watch", "build": "npm-run-all -s check-content-version build:banners", "build:banners": "webpack --config webpack.production.js", + "build:thankyou": "webpack --config webpack.production.js --env campaign_info=campaign_info.thank_you.toml", "start": "npm run dev", "dev": "nodemon", + "thankyou": "webpack serve --host 0.0.0.0 --env campaign_info=campaign_info.thank_you.toml", "clean": "rimraf dist/*.js dist/*.wikitext dist/*.map", "lint": "npm-run-all lint:*", "lint:js": "eslint --ext .js,.vue,.ts,.cjs --cache --cache-location .eslintcache --ignore-path .gitignore .", diff --git a/webpack.common.js b/webpack.common.js index c57d26011..d15a53b78 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,86 +1,86 @@ const path = require( 'path' ); -const fs = require( 'fs' ); -const toml = require( 'toml' ); const webpack = require( 'webpack' ); const { VueLoaderPlugin } = require( 'vue-loader' ); const CampaignConfig = require( './webpack/campaign_config' ); -const campaigns = new CampaignConfig( toml.parse( fs.readFileSync( 'campaign_info.toml', 'utf8' ) ) ); -module.exports = { - entry: campaigns.getEntryPoints(), - output: { - filename: '[name].js', - path: path.resolve( __dirname, 'dist' ), - publicPath: '/' - }, - module: { - rules: [ - { - test: /\.ts$/, - loader: 'ts-loader', - options: { - appendTsSuffixTo: [ /\.vue$/ ] - } - }, - { - test: /(wpde_desktop|wpde_mobile)\/banner(_ctrl|_var)\.ts/, - use: [ - { - loader: 'ts-loader', - options: { - appendTsSuffixTo: [ /\.vue$/ ] - } - }, - { - loader: 'string-replace-loader', - options: { - search: /!insert-(campaign|keyword)-here!/g, - /** - * @param { string } match The whole matched placeholder - * @param { string } captureGroupMatch Either "campaign" or "keyword" from the regex match group - * @return { string } - */ - replace( match, captureGroupMatch ) { - const tracking = campaigns.getCampaignTrackingForEntryPoint( this.resource ); - const placeholderToTrackingKeyMap = { - campaign: 'campaignTracking', - keyword: 'bannerTracking' - }; - return tracking[ placeholderToTrackingKeyMap[ captureGroupMatch ] ]; +module.exports = ( env ) => { + const campaigns = CampaignConfig.readFromFile( env.campaign_info ?? 'campaign_info.toml' ); + return { + entry: campaigns.getEntryPoints(), + output: { + filename: '[name].js', + path: path.resolve( __dirname, 'dist' ), + publicPath: '/' + }, + module: { + rules: [ + { + test: /\.ts$/, + loader: 'ts-loader', + options: { + appendTsSuffixTo: [ /\.vue$/ ] + } + }, + { + test: /(wpde_desktop|wpde_mobile)\/banner(_ctrl|_var)\.ts/, + use: [ + { + loader: 'ts-loader', + options: { + appendTsSuffixTo: [ /\.vue$/ ] + } + }, + { + loader: 'string-replace-loader', + options: { + search: /!insert-(campaign|keyword)-here!/g, + /** + * @param { string } match The whole matched placeholder + * @param { string } captureGroupMatch Either "campaign" or "keyword" from the regex match group + * @return { string } + */ + replace( match, captureGroupMatch ) { + const tracking = campaigns.getCampaignTrackingForEntryPoint( this.resource ); + const placeholderToTrackingKeyMap = { + campaign: 'campaignTracking', + keyword: 'bannerTracking' + }; + return tracking[ placeholderToTrackingKeyMap[ captureGroupMatch ] ]; + } } } - } - ] - }, - { - test: /\.vue$/, - loader: 'vue-loader' - }, - { - test: /\.html$/, - use: 'html-loader' + ] + }, + { + test: /\.vue$/, + loader: 'vue-loader' + }, + { + test: /\.html$/, + use: 'html-loader' + }, + { + test: /\.(scss|css)$/, + use: [ 'style-loader', 'css-loader', 'sass-loader' ] + } + ] + }, + resolve: { + extensions: [ '.ts', '.js', '.json' ], + alias: { + '@src': path.resolve( __dirname, 'src' ) }, - { - test: /\.(scss|css)$/, - use: [ 'style-loader', 'css-loader', 'sass-loader' ] + fallback: { + // Don't import node.js 'path' polyfill in compiled code. it shouldn't be used. + path: false } - ] - }, - resolve: { - extensions: [ '.ts', '.js', '.json' ], - alias: { - '@src': path.resolve( __dirname, 'src' ) }, - fallback: { - // Don't import node.js 'path' polyfill in compiled code. it shouldn't be used. - path: false - } - }, - plugins: [ - new VueLoaderPlugin(), - new webpack.ProvidePlugin( { - jQuery: 'jquery' - } ) - ] + plugins: [ + new VueLoaderPlugin(), + new webpack.ProvidePlugin( { + jQuery: 'jquery' + } ) + ] + }; }; diff --git a/webpack.config.js b/webpack.config.js index 60bc82e52..9a0231f8f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,14 +20,15 @@ const getBranch = () => new Promise( ( resolve ) => { } ); } ); -const readCampaignFile = () => fs.readFile( 'campaign_info.toml', 'utf8' ) +// eslint-disable-next-line security/detect-non-literal-fs-filename +const readCampaignFile = ( fileName ) => fs.readFile( fileName, 'utf8' ) .then( contents => toml.parse( contents ) ); -module.exports = () => Promise.all( [ +module.exports = ( env ) => Promise.all( [ getBranch(), - readCampaignFile() + readCampaignFile( env.campaign_info ?? 'campaign_info.toml' ) ] ).then( ( [ currentBranch, campaignConfig ] ) => merge( - CommonConfig, + CommonConfig( env ), { mode: 'development', entry: { diff --git a/webpack.production.js b/webpack.production.js index e959171a8..0fdc9f284 100644 --- a/webpack.production.js +++ b/webpack.production.js @@ -1,6 +1,5 @@ const fs = require( 'fs' ); const rimraf = require( 'rimraf' ); -const toml = require( 'toml' ); const { mergeWithCustomize, customizeObject } = require( 'webpack-merge' ); const CommonConfig = require( './webpack.common.js' ); const MediaWikiTextWrapper = require( './webpack/mediawiki_text_wrapper' ); @@ -8,7 +7,6 @@ const LoadVueOnWpde = require( './webpack/load_vue_on_wpde' ); const CampaignConfig = require( './webpack/campaign_config' ); const path = require( 'path' ); -const campaigns = new CampaignConfig( toml.parse( fs.readFileSync( 'campaign_info.toml', 'utf8' ) ) ); function readWrapperTemplate( name ) { // eslint-disable-next-line security/detect-non-literal-fs-filename @@ -18,6 +16,7 @@ function readWrapperTemplate( name ) { module.exports = ( env ) => { let entrypointRules = {}; let customizationRules = { customizeObject: () => undefined }; + const campaigns = CampaignConfig.readFromFile( env.campaign_info ?? 'campaign_info.toml' ); if ( env.banner ) { const bannerName = env.banner; const singleEntry = campaigns.getEntryPoints()[ bannerName ]; @@ -32,7 +31,7 @@ module.exports = ( env ) => { } ); } return mergeWithCustomize( customizationRules )( - CommonConfig, + CommonConfig( env ), { devtool: false, mode: 'production', diff --git a/webpack/campaign_config.js b/webpack/campaign_config.js index 904e7245d..2cc1ea527 100644 --- a/webpack/campaign_config.js +++ b/webpack/campaign_config.js @@ -1,4 +1,6 @@ const path = require( 'path' ); +const { parse } = require( 'toml' ); +const { readFileSync } = require( 'fs' ); function CampaignConfig( config ) { this.config = config; @@ -111,4 +113,9 @@ CampaignConfig.prototype.getCampaignTrackingForEntryPoint = function ( entryPoin return trackingData; }; +CampaignConfig.readFromFile = function ( fileName ) { + // eslint-disable-next-line security/detect-non-literal-fs-filename + return new CampaignConfig( parse( readFileSync( fileName, 'utf8' ) ) ); +}; + module.exports = CampaignConfig;