Bug 1778106 - Move Pocket code to use mjs files, rather than defining sourceType for ESLint. r=thecount

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

Author: Standard8

browser/components/pocket/.eslintrc.js

@@ -11,14 +11,6 @@ module.exports = {
       version: "17.0.2",
     },
   },
-  overrides: [
-    {
-      files: ["content/**/*.js", "content/**/*.jsx"],
-      parserOptions: {
-        sourceType: "module",
-      },
-    },
-  ],
   rules: {
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,

browser/components/pocket/content/panels/js/home/overlay.js renamed to browser/components/pocket/content/panels/js/home/overlay.jsx

@@ -1,13 +1,11 @@
-/* global Handlebars:false */
-
 /*
 HomeOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
 It does not contain any logic for saving or communication with the extension or server.
 */
 
 import React from "react";
 import ReactDOM from "react-dom";
-import Home from "../components/Home/Home";
+import Home from "../components/Home/Home.jsx";
 
 var HomeOverlay = function (options) {
   this.inited = false;

browser/components/pocket/content/panels/js/main.bundle.js

@@ -2,8 +2,8 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 299:
-/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
+/***/ 140:
+/***/ ((__unused_webpack___webpack_module__, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
 
 // EXTERNAL MODULE: ./node_modules/react/index.js
@@ -25,8 +25,9 @@ function Header(props) {
 }
 
 /* harmony default export */ const Header_Header = (Header);
-;// CONCATENATED MODULE: ./content/panels/js/messages.js
+;// CONCATENATED MODULE: ./content/panels/js/messages.mjs
 /* global RPMRemoveMessageListener:false, RPMAddMessageListener:false, RPMSendAsyncMessage:false */
+
 var pktPanelMessaging = {
   removeMessageListener(messageId, callback) {
     RPMRemoveMessageListener(messageId, callback);
@@ -43,41 +44,39 @@ var pktPanelMessaging = {
       // and we don't want to close a RPMSendQuery promise loop unexpectedly.
       // So instead we setup a response event.
       const responseMessageId = `${messageId}_response`;
-
       var responseListener = responsePayload => {
         callback(responsePayload);
         this.removeMessageListener(responseMessageId, responseListener);
       };
 
       this.addMessageListener(responseMessageId, responseListener);
-    } // Send message
-
+    }
 
+    // Send message
     RPMSendAsyncMessage(messageId, payload);
   },
 
   // Click helper to reduce bugs caused by oversight
   // from different implementations of similar code.
-  clickHelper(element, {
-    source = "",
-    position
-  }) {
+  clickHelper(element, { source = "", position }) {
     element?.addEventListener(`click`, event => {
       event.preventDefault();
+
       this.sendMessage("PKT_openTabWithUrl", {
         url: event.currentTarget.getAttribute(`href`),
         source,
-        position
+        position,
       });
     });
   },
 
   log() {
     RPMSendAsyncMessage("PKT_log", arguments);
-  }
-
+  },
 };
+
 /* harmony default export */ const messages = (pktPanelMessaging);
+
 ;// CONCATENATED MODULE: ./content/panels/js/components/TelemetryLink/TelemetryLink.jsx
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -390,9 +389,7 @@ function Home(props) {
 }
 
 /* harmony default export */ const Home_Home = (Home);
-;// CONCATENATED MODULE: ./content/panels/js/home/overlay.js
-/* global Handlebars:false */
-
+;// CONCATENATED MODULE: ./content/panels/js/home/overlay.jsx
 /*
 HomeOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
 It does not contain any logic for saving or communication with the extension or server.
@@ -503,7 +500,7 @@ function Signup(props) {
 }
 
 /* harmony default export */ const Signup_Signup = (Signup);
-;// CONCATENATED MODULE: ./content/panels/js/signup/overlay.js
+;// CONCATENATED MODULE: ./content/panels/js/signup/overlay.jsx
 /*
 SignupOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
 It does not contain any logic for saving or communication with the extension or server.
@@ -886,7 +883,7 @@ function Saved(props) {
 }
 
 /* harmony default export */ const Saved_Saved = (Saved);
-;// CONCATENATED MODULE: ./content/panels/js/saved/overlay.js
+;// CONCATENATED MODULE: ./content/panels/js/saved/overlay.jsx
 /*
 SavedOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
 It does not contain any logic for saving or communication with the extension or server.
@@ -931,7 +928,7 @@ SavedOverlay.prototype = {
 
 };
 /* harmony default export */ const saved_overlay = (SavedOverlay);
-;// CONCATENATED MODULE: ./content/panels/js/style-guide/overlay.js
+;// CONCATENATED MODULE: ./content/panels/js/style-guide/overlay.jsx
 
 
 
@@ -1042,18 +1039,18 @@ StyleGuideOverlay.prototype = {
 
 };
 /* harmony default export */ const style_guide_overlay = (StyleGuideOverlay);
-;// CONCATENATED MODULE: ./content/panels/js/main.js
+;// CONCATENATED MODULE: ./content/panels/js/main.mjs
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
 /* global RPMGetStringPref:false */
 
 
 
 
 
 
+
 var PKT_PANEL = function () {};
 
 PKT_PANEL.prototype = {
@@ -1078,39 +1075,37 @@ PKT_PANEL.prototype = {
   },
 
   setupObservers() {
-    this.setupMutationObserver(); // Mutation observer isn't always enough for fast loading, static pages.
+    this.setupMutationObserver();
+    // Mutation observer isn't always enough for fast loading, static pages.
     // Sometimes the mutation observer fires before the page is totally visible.
     // In this case, the resize tries to fire with 0 height,
     // and because it's a static page, it only does one mutation.
     // So in this case, we have a backup intersection observer that fires when
     // the page is first visible, and thus, the page is going to guarantee a height.
-
     this.setupIntersectionObserver();
   },
 
   init() {
     if (this.inited) {
       return;
     }
-
     this.setupObservers();
     this.inited = true;
   },
 
   resizeParent() {
     let clientHeight = document.body.clientHeight;
-
     if (this.overlay.tagsDropdownOpen) {
       clientHeight = Math.max(clientHeight, 252);
-    } // We can ignore 0 height here.
+    }
+
+    // We can ignore 0 height here.
     // We rely on intersection observer to do the
     // resize for 0 height loads.
-
-
     if (clientHeight) {
       messages.sendMessage("PKT_resizePanel", {
         width: document.body.clientWidth,
-        height: clientHeight
+        height: clientHeight,
       });
     }
   },
@@ -1127,46 +1122,44 @@ PKT_PANEL.prototype = {
 
   setupMutationObserver() {
     // Select the node that will be observed for mutations
-    const targetNode = document.body; // Options for the observer (which mutations to observe)
+    const targetNode = document.body;
 
-    const config = {
-      attributes: false,
-      childList: true,
-      subtree: true
-    }; // Callback function to execute when mutations are observed
+    // Options for the observer (which mutations to observe)
+    const config = { attributes: false, childList: true, subtree: true };
 
+    // Callback function to execute when mutations are observed
     const callback = (mutationList, observer) => {
       mutationList.forEach(mutation => {
         switch (mutation.type) {
-          case "childList":
-            {
-              /* One or more children have been added to and/or removed
-                 from the tree.
-                 (See mutation.addedNodes and mutation.removedNodes.) */
-              this.resizeParent();
-              break;
-            }
+          case "childList": {
+            /* One or more children have been added to and/or removed
+               from the tree.
+               (See mutation.addedNodes and mutation.removedNodes.) */
+            this.resizeParent();
+            break;
+          }
         }
       });
-    }; // Create an observer instance linked to the callback function
+    };
 
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
 
-    const observer = new MutationObserver(callback); // Start observing the target node for configured mutations
-
+    // Start observing the target node for configured mutations
     observer.observe(targetNode, config);
   },
 
   create() {
-    const pockethost = RPMGetStringPref("extensions.pocket.site") || "getpocket.com";
-    this.overlay.create({
-      pockethost
-    });
-  }
-
+    const pockethost =
+      RPMGetStringPref("extensions.pocket.site") || "getpocket.com";
+    this.overlay.create({ pockethost });
+  },
 };
+
 window.PKT_PANEL = PKT_PANEL;
 window.pktPanelMessaging = messages;
 
+
 /***/ })
 
 /******/ 	});
@@ -1294,7 +1287,7 @@ window.pktPanelMessaging = messages;
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(299)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(140)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()

browser/components/pocket/content/panels/js/main.js renamed to browser/components/pocket/content/panels/js/main.mjs

@@ -3,11 +3,11 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* global RPMGetStringPref:false */
 
-import HomeOverlay from "./home/overlay.js";
-import SignupOverlay from "./signup/overlay.js";
-import SavedOverlay from "./saved/overlay.js";
-import StyleGuideOverlay from "./style-guide/overlay.js";
-import pktPanelMessaging from "./messages.js";
+import HomeOverlay from "./home/overlay.jsx";
+import SignupOverlay from "./signup/overlay.jsx";
+import SavedOverlay from "./saved/overlay.jsx";
+import StyleGuideOverlay from "./style-guide/overlay.jsx";
+import pktPanelMessaging from "./messages.mjs";
 
 var PKT_PANEL = function () {};
 

browser/components/pocket/content/panels/js/messages.js renamed to browser/components/pocket/content/panels/js/messages.mjs

@@ -5,7 +5,7 @@ It does not contain any logic for saving or communication with the extension or
 
 import React from "react";
 import ReactDOM from "react-dom";
-import Saved from "../components/Saved/Saved";
+import Saved from "../components/Saved/Saved.jsx";
 
 var SavedOverlay = function (options) {
   this.inited = false;

browser/components/pocket/content/panels/js/saved/overlay.js renamed to browser/components/pocket/content/panels/js/saved/overlay.jsx

@@ -5,8 +5,8 @@ It does not contain any logic for saving or communication with the extension or
 
 import React from "react";
 import ReactDOM from "react-dom";
-import pktPanelMessaging from "../messages.js";
-import Signup from "../components/Signup/Signup";
+import pktPanelMessaging from "../messages.mjs";
+import Signup from "../components/Signup/Signup.jsx";
 
 var SignupOverlay = function (options) {
   this.inited = false;

browser/components/pocket/content/panels/js/signup/overlay.js renamed to browser/components/pocket/content/panels/js/signup/overlay.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Header from "../components/Header/Header";
-import ArticleList from "../components/ArticleList/ArticleList";
-import Button from "../components/Button/Button";
-import PopularTopics from "../components/PopularTopics/PopularTopics";
-import TagPicker from "../components/TagPicker/TagPicker";
+import Header from "../components/Header/Header.jsx";
+import ArticleList from "../components/ArticleList/ArticleList.jsx";
+import Button from "../components/Button/Button.jsx";
+import PopularTopics from "../components/PopularTopics/PopularTopics.jsx";
+import TagPicker from "../components/TagPicker/TagPicker.jsx";
 
 var StyleGuideOverlay = function (options) {};
 

browser/components/pocket/content/panels/js/style-guide/overlay.js renamed to browser/components/pocket/content/panels/js/style-guide/overlay.jsx

@@ -5,7 +5,7 @@
 module.exports = {
   mode: "production",
   entry: {
-    main: "./content/panels/js/main.js",
+    main: "./content/panels/js/main.mjs",
   },
   output: {
     filename: "[name].bundle.js",
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.jsx$/,
         exclude: /node_modules/,
         loader: "babel-loader",
         options: {
@@ -24,7 +24,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".mjs", ".jsx"],
   },
   optimization: {
     minimize: false,