Bug 1863400 - Part 6: Perform bundling within browser/components/aboutwelcome folder. r=pdahiya

Depends on D193120

Differential Revision: https://phabricator.services.mozilla.com/D193121

.eslintignore

@@ -58,6 +58,9 @@ browser/components/pocket/content/panels/js/main.bundle.js
 browser/components/newtab/data/
 browser/components/newtab/logs/
 
+# Ignore webpack about:welcome files
+browser/components/aboutwelcome/webpack.aboutwelcome.config.js
+
 # The only file in browser/locales/ is pre-processed.
 browser/locales/
 # Generated data files

.prettierignore

@@ -1029,7 +1029,6 @@ browser/components/pocket/content/panels/js/main.bundle.js
 !browser/components/storybook/.storybook/*.js
 
 # Ignore newtab files
-browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
 browser/components/newtab/data/
 browser/components/newtab/logs/
 

browser/components/aboutwelcome/actors/AboutWelcomeChild.sys.mjs

@@ -38,6 +38,7 @@ export class AboutWelcomeChild extends JSWindowActorChild {
 
   /**
    * Send event that can be handled by the page
+   *
    * @param {{type: string, data?: any}} action
    */
   sendToPage(action) {
@@ -227,6 +228,7 @@ export class AboutWelcomeChild extends JSWindowActorChild {
 
   /**
    * Send Event Telemetry
+   *
    * @param {object} eventData
    */
   AWSendEventTelemetry(eventData) {
@@ -240,6 +242,7 @@ export class AboutWelcomeChild extends JSWindowActorChild {
 
   /**
    * Send message that can be handled by AboutWelcomeParent.jsm
+   *
    * @param {string} type
    * @param {any=} data
    * @returns {Promise<unknown>}

browser/components/aboutwelcome/content-src/aboutwelcome.jsx

@@ -4,7 +4,7 @@
 
 import React from "react";
 import ReactDOM from "react-dom";
-import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "./lib/aboutwelcome-utils";
 import { MultiStageAboutWelcome } from "./components/MultiStageAboutWelcome";
 import { ReturnToAMO } from "./components/ReturnToAMO";
 

browser/components/aboutwelcome/content-src/aboutwelcome.scss

@@ -3,8 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 @use 'sass:math';
 @import 'chrome://global/skin/design-system/tokens-brand.css';
-@import '../styles/feature-callout';
+@import '../../newtab/content-src/styles/feature-callout';
-@import '../styles/shopping';
+@import '../../newtab/content-src/styles/shopping';
 
 /* stylelint-disable max-nesting-depth */
 

browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from "react";
-import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
 import { Localized } from "./MSLocalized";
 
 export const AddonsPicker = props => {

browser/components/aboutwelcome/content-src/components/HeroImage.jsx

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from "react";
-import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
 
 export const HeroImage = props => {
   const { height, url, alt } = props;

browser/components/aboutwelcome/content-src/components/LanguageSwitcher.jsx

@@ -4,7 +4,7 @@
 
 import React, { useState, useEffect } from "react";
 import { Localized } from "./MSLocalized";
-import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
 
 /**
  * The language switcher implements a hook that should be placed at a higher level

browser/components/aboutwelcome/content-src/components/MobileDownloads.jsx

@@ -4,7 +4,7 @@
 
 import React from "react";
 import { Localized } from "./MSLocalized";
-import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
 
 export const MarketplaceButtons = props => {
   return (

browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx

@@ -4,13 +4,13 @@
 
 import React, { useState, useEffect, useRef } from "react";
 import { Localized } from "./MSLocalized";
-import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
 import { MultiStageProtonScreen } from "./MultiStageProtonScreen";
 import { useLanguageSwitcher } from "./LanguageSwitcher";
 import {
   BASE_PARAMS,
   addUtmParams,
-} from "../../asrouter/templates/FirstRun/addUtmParams";
+} from "../../../newtab/content-src/asrouter/templates/FirstRun/addUtmParams";
 
 // Amount of milliseconds for all transitions to complete (including delays).
 const TRANSITION_OUT_TIME = 1000;

browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useState } from "react";
 import { Localized } from "./MSLocalized";
-import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";
+import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
 import { MobileDownloads } from "./MobileDownloads";
 import { MultiSelect } from "./MultiSelect";
 import { Themes } from "./Themes";

browser/components/aboutwelcome/content-src/components/ReturnToAMO.jsx

@@ -6,9 +6,9 @@ import React from "react";
 import {
   AboutWelcomeUtils,
   DEFAULT_RTAMO_CONTENT,
-} from "../../lib/aboutwelcome-utils";
+} from "../lib/aboutwelcome-utils";
 import { MultiStageProtonScreen } from "./MultiStageProtonScreen";
-import { BASE_PARAMS } from "../../asrouter/templates/FirstRun/addUtmParams";
+import { BASE_PARAMS } from "../../../newtab/content-src/asrouter/templates/FirstRun/addUtmParams";
 
 export class ReturnToAMO extends React.PureComponent {
   constructor(props) {

browser/components/aboutwelcome/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "about-welcome",
+  "description": "Task running for the about:welcome page",
+  "version": "1.0.0",
+  "author": "Mozilla (https://mozilla.org/)",
+  "dependencies": {
+    "@fluent/bundle": "0.17.1",
+    "@fluent/react": "0.15.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-redux": "7.2.6",
+    "react-transition-group": "4.4.2",
+    "redux": "4.1.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "7.16.0",
+    "@babel/preset-react": "7.16.0",
+    "babel-loader": "8.2.3",
+    "npm-run-all": "4.1.5",
+    "sass": "1.43.4",
+    "sinon": "12.0.1",
+    "webpack": "5.56.0",
+    "webpack-cli": "4.9.1",
+    "yamscripts": "0.1.0"
+  },
+  "engines": {
+    "firefox": ">=45.0 <=*",
+    "//": "when changing node versions, also edit .nvmrc",
+    "node": "16.19.*",
+    "npm": "8.19.3"
+  },
+  "license": "MPL-2.0",
+  "config": {
+    "mc_root": "../../..",
+    "welcome_path": "browser/components/aboutwelcome"
+  },
+  "scripts": {
+    "bundle": "npm-run-all bundle:*",
+    "bundle:welcomeBundle": "webpack-cli --config webpack.aboutwelcome.config.js",
+    "bundle:welcomeCss": "sass content-src:content --no-source-map",
+    "watchmc": "npm-run-all --parallel watchmc:*",
+    "watchmc:welcomeBundle": "npm run bundle:welcomeBundle -- --env development -w",
+    "watchmc:welcomeCss": "npm run bundle:welcomeCss -- --source-map --embed-sources --embed-source-map -w",
+    "testmc": "npm-run-all testmc:*",
+    "testmc:lint": "npm run lint",
+    "testmc:build": "npm run bundle:welcomeBundle",
+    "testmc:unit": "karma start karma.mc.config.js",
+    "tddmc": "karma start karma.mc.config.js --tdd",
+    "debugcoverage": "open logs/coverage/lcov-report/index.html",
+    "lint": "npm-run-all lint:*",
+    "lint:codespell": "(cd $npm_package_config_mc_root && ./mach lint -l codespell $npm_package_config_welcome_path)",
+    "lint:eslint": "(cd $npm_package_config_mc_root && ./mach lint -l eslint $npm_package_config_welcome_path)",
+    "lint:l10n": "(cd $npm_package_config_mc_root && ./mach lint -l l10n --warnings soft browser/locales/en-US/browser/newtab)",
+    "lint:license": "(cd $npm_package_config_mc_root && ./mach lint -l license $npm_package_config_welcome_path)",
+    "lint:stylelint": "(cd $npm_package_config_mc_root && ./mach lint -l stylelint $npm_package_config_welcome_path)",
+    "test": "npm run testmc",
+    "tdd": "npm run tddmc",
+    "fix": "npm-run-all fix:*",
+    "fix:eslint": "npm run lint:eslint -- --fix",
+    "fix:stylelint": "npm run lint:stylelint -- --fix",
+    "help": "yamscripts help",
+    "yamscripts": "yamscripts compile",
+    "__": "# NOTE: THESE SCRIPTS ARE COMPILED!!! EDIT yamscripts.yml instead!!!"
+  }
+}

browser/components/aboutwelcome/webpack.aboutwelcome.config.js

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const path = require("path");
-const config = require("./webpack.system-addon.config.js");
+const config = require("../newtab/webpack.system-addon.config.js");
 const webpack = require("webpack");
 const absolute = relPath => path.join(__dirname, relPath);
 const banner = `
@@ -11,9 +11,9 @@ NOTE: This file is generated by webpack from aboutwelcome.jsx
 using the npm bundle task.
 `;
 module.exports = Object.assign({}, config(), {
-  entry: absolute("content-src/aboutwelcome/aboutwelcome.jsx"),
+  entry: absolute("content-src/aboutwelcome.jsx"),
   output: {
-    path: absolute("aboutwelcome/content"),
+    path: absolute("content"),
     filename: "aboutwelcome.bundle.js",
   },
   externals: {

browser/components/aboutwelcome/yamscripts.yml

@@ -0,0 +1,45 @@
+# This file compiles to package.json scripts.
+# When you add or modify anything, you *MUST* run:
+#      npm run yamscripts
+# to compile your changes.
+
+scripts:
+  # bundle: Build all assets for activity stream
+  bundle:
+    welcomeBundle: webpack-cli --config webpack.aboutwelcome.config.js
+    welcomeCss: sass content-src:content --no-source-map
+
+  # watchmc:  Automatically rebuild when files are changed. NOTE: Includes sourcemaps, do not use for profiling/perf testing.
+  watchmc:
+    _parallel: true
+    welcomeBundle: =>bundle:welcomeBundle -- --env development -w
+    welcomeCss: =>bundle:welcomeCss -- --source-map --embed-sources --embed-source-map -w
+
+  testmc:
+    lint: =>lint
+    build: =>bundle:welcomeBundle
+    unit: karma start karma.mc.config.js
+
+  tddmc: karma start karma.mc.config.js --tdd
+
+  debugcoverage: open logs/coverage/lcov-report/index.html
+
+  # lint: Run various linters with mach or local dev dependencies
+  lint:
+    codespell: (cd $npm_package_config_mc_root && ./mach lint -l codespell $npm_package_config_welcome_path)
+    eslint: (cd $npm_package_config_mc_root && ./mach lint -l eslint $npm_package_config_welcome_path)
+    l10n: (cd $npm_package_config_mc_root && ./mach lint -l l10n --warnings soft browser/locales/en-US/browser/newtab)
+    license: (cd $npm_package_config_mc_root && ./mach lint -l license $npm_package_config_welcome_path)
+    stylelint: (cd $npm_package_config_mc_root && ./mach lint -l stylelint $npm_package_config_welcome_path)
+
+  # test: Run all tests once
+  test: =>testmc
+
+  # tdd: Run content tests continuously
+  tdd: =>tddmc
+
+  fix:
+    # Note that since we're currently running eslint-plugin-prettier,
+    # running fix:eslint will also reformat changed JS files using prettier.
+    eslint: =>lint:eslint -- --fix
+    stylelint: =>lint:stylelint -- --fix

browser/components/newtab/jar.mn

@@ -7,7 +7,6 @@ browser.jar:
 % content activity-stream %content/activity-stream/ contentaccessible=yes
   res/activity-stream/lib/ (./lib/*)
   res/activity-stream/common/ (./common/*)
-  res/activity-stream/aboutwelcome/aboutwelcome.bundle.js (./aboutwelcome/content/aboutwelcome.bundle.js)
   res/activity-stream/schemas/BackgroundTaskMessagingExperiment.schema.json (./content-src/asrouter/schemas/BackgroundTaskMessagingExperiment.schema.json)
   res/activity-stream/schemas/MessagingExperiment.schema.json (./content-src/asrouter/schemas/MessagingExperiment.schema.json)
   res/activity-stream/vendor/Redux.sys.mjs (./vendor/Redux.sys.mjs)