Replace babel-plugin-angularjs-annotate with babel-plugin-inject-args

It is confusing to have a Babel plugin with an Angular-related name and Angular-sounding annotations (`@ngInject`) in the code, even though we're not using AngularJS. Although we're not using AngularJS any more, we still have services that are instantiated by a dependency injection container. The container reads dependency names from a `$inject` property on service functions/classes. This `$inject` property is added by `babel-plugin-angularjs-annotate`. This commit replaces the `angularjs-annotate` Babel plugin with one maintained by us [1]. The new plugin provides only the functionality that we need (eg. only processes explicitly annotated functions) and uses a more generic `@inject` annotation. [1] https://github.com/hypothesis/babel-plugin-inject-args
hypothesis · Nov 4, 2020 · cacdd63 · cacdd63
1 parent df52a1f
commit cacdd63
Show file tree

Hide file tree

Showing 26 changed files with 37 additions and 46 deletions.
diff --git a/.babelrc b/.babelrc
@@ -9,9 +9,7 @@
        "bugfixes": true
     }]
   ],
-  "plugins": [
-    "angularjs-annotate"
-  ],
+  "plugins": ["inject-args"],
   "ignore": ["**/vendor/*"],
   "env": {
     "development": {

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "autoprefixer": "^10.0.1",
     "aws-sdk": "^2.345.0",
     "axe-core": "^4.0.0",
-    "babel-plugin-angularjs-annotate": "^0.10.0",
+    "babel-plugin-inject-args": "^1.0.0",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-mockable-imports": "^1.5.1",
     "babel-plugin-transform-async-to-promises": "^0.8.6",

diff --git a/src/shared/test/injector-test.js b/src/shared/test/injector-test.js
@@ -195,6 +195,8 @@ describe('Injector', () => {
       function increment(first) {
         total += first;
       }
+      increment.$inject = ['first'];
+
       container.run(increment);
       container.run(increment);
 

diff --git a/src/sidebar/cross-origin-rpc.js b/src/sidebar/cross-origin-rpc.js
@@ -47,7 +47,7 @@ function isJsonRpcMessage(data) {
  *
  * All methods called upon must be mapped in the `registeredMethods` function.
  */
-// @ngInject
+// @inject
 export function startServer(store, settings, $window) {
   const methods = registeredMethods(store);
 

diff --git a/src/sidebar/index.js b/src/sidebar/index.js
@@ -46,7 +46,7 @@ const isSidebar = !(
 // Install Preact renderer options to work around browser quirks
 rendererOptions.setupBrowserFixes();
 
-// @ngInject
+// @inject
 function setupApi(api, streamer) {
   api.setClientId(streamer.clientId);
 }
@@ -55,7 +55,7 @@ function setupApi(api, streamer) {
  * Perform the initial fetch of groups and user profile and then set the initial
  * route to match the current URL.
  */
-// @ngInject
+// @inject
 function setupRoute(groups, session, router) {
   Promise.all([groups.load(), session.load()]).finally(() => {
     router.sync();
@@ -68,7 +68,7 @@ function setupRoute(groups, session, router) {
  * We don't bother tracking route changes later because the client only uses a
  * single route in a given session.
  */
-// @ngInject
+// @inject
 function sendPageView(analytics) {
   analytics.sendPageView();
 }
@@ -77,20 +77,20 @@ function sendPageView(analytics) {
  * Fetch any persisted client-side defaults, and persist any app-state changes to
  * those defaults
  */
-// @ngInject
+// @inject
 function persistDefaults(persistedDefaults) {
   persistedDefaults.init();
 }
 
 /**
  * Set up autosave-new-highlights service
  */
-// @ngInject
+// @inject
 function autosave(autosaveService) {
   autosaveService.init();
 }
 
-// @ngInject
+// @inject
 function setupFrameSync(frameSync) {
   if (isSidebar) {
     frameSync.connect();

diff --git a/src/sidebar/services/analytics.js b/src/sidebar/services/analytics.js
@@ -77,7 +77,7 @@ function clientType(win, settings = {}) {
  * @param {Window} $window - Test seam
  * @return {Analytics}
  */
-// @ngInject
+// @inject
 export default function analytics($window, settings) {
   const category = clientType($window, settings);
   const noop = () => {};

diff --git a/src/sidebar/services/annotations.js b/src/sidebar/services/annotations.js
@@ -15,7 +15,7 @@ import {
 import { generateHexString } from '../util/random';
 import uiConstants from '../ui-constants';
 
-// @ngInject
+// @inject
 export default function annotationsService(api, store) {
   /**
    * Apply changes for the given `annotation` from its draft in the store (if

diff --git a/src/sidebar/services/api-routes.js b/src/sidebar/services/api-routes.js
@@ -3,7 +3,7 @@ import { retryPromiseOperation } from '../util/retry';
 /**
  * A service which fetches and caches API route metadata.
  */
-// @ngInject
+// @inject
 export default function apiRoutes(settings) {
   // Cache of route name => route metadata from API root.
   let routeCache;

diff --git a/src/sidebar/services/api.js b/src/sidebar/services/api.js
@@ -203,7 +203,7 @@ function createAPICall(
  * endpoint, a responsibility delegated to the `apiRoutes` service which does
  * not use authentication.
  */
-// @ngInject
+// @inject
 export default function api(apiRoutes, auth, store) {
   const links = apiRoutes.routes();
   let clientId = null;

diff --git a/src/sidebar/services/autosave.js b/src/sidebar/services/autosave.js
@@ -3,7 +3,7 @@
  */
 import { retryPromiseOperation } from '../util/retry';
 
-// @ngInject
+// @inject
 export default function autosaveService(annotationsService, store) {
   // A Set of annotation $tags that have save requests in-flight
   const saving = new Set();

diff --git a/src/sidebar/services/features.js b/src/sidebar/services/features.js
@@ -14,7 +14,7 @@ import bridgeEvents from '../../shared/bridge-events';
 import warnOnce from '../../shared/warn-once';
 import { watch } from '../util/watch';
 
-// @ngInject
+// @inject
 export default function features(bridge, session, store) {
   const currentFlags = () => store.profile().features;
   const sendFeatureFlags = () => {

diff --git a/src/sidebar/services/frame-sync.js b/src/sidebar/services/frame-sync.js
@@ -30,7 +30,7 @@ export function formatAnnot(ann) {
  * annotations displayed in connected frames in sync with the set shown in the
  * sidebar.
  */
-// @ngInject
+// @inject
 export default function FrameSync(annotationsService, bridge, store) {
   // Set of tags of annotations that are currently loaded into the frame
   const inFrame = new Set();

diff --git a/src/sidebar/services/groups.js b/src/sidebar/services/groups.js
@@ -20,7 +20,7 @@ const DEFAULT_ORGANIZATION = {
     encodeURIComponent(require('../../images/icons/logo.svg')),
 };
 
-// @ngInject
+// @inject
 export default function groups(
   store,
   api,

diff --git a/src/sidebar/services/load-annotations.js b/src/sidebar/services/load-annotations.js
@@ -6,7 +6,7 @@ import SearchClient from '../search-client';
 
 import { isReply } from '../util/annotation-metadata';
 
-// @ngInject
+// @inject
 export default function loadAnnotationsService(
   api,
   store,

diff --git a/src/sidebar/services/local-storage.js b/src/sidebar/services/local-storage.js
@@ -24,7 +24,7 @@ class InMemoryStorage {
  * in-memory storage in browsers that block access to `window.localStorage`.
  * in third-party iframes.
  */
-// @ngInject
+// @inject
 export default function localStorage($window) {
   let storage;
   let testKey = 'hypothesis.testKey';

diff --git a/src/sidebar/services/oauth-auth.js b/src/sidebar/services/oauth-auth.js
@@ -25,7 +25,7 @@ import { resolve } from '../util/url';
  * Interaction with OAuth endpoints in the annotation service is delegated to
  * the `OAuthClient` class.
  *
- * @ngInject
+ * @inject
  */
 export default function auth(
   $window,

diff --git a/src/sidebar/services/persisted-defaults.js b/src/sidebar/services/persisted-defaults.js
@@ -10,7 +10,7 @@ const DEFAULT_KEYS = {
   focusedGroup: 'hypothesis.groups.focus',
 };
 
-// @ngInject
+// @inject
 export default function persistedDefaults(localStorage, store) {
   /**
    * Store subscribe callback for persisting changes to defaults. It will only

diff --git a/src/sidebar/services/router.js b/src/sidebar/services/router.js
@@ -4,7 +4,7 @@ import * as queryString from 'query-string';
  * A service that manages the association between the route and route parameters
  * implied by the URL and the corresponding route state in the store.
  */
-// @ngInject
+// @inject
 export default function router($window, store) {
   /**
    * Return the name and parameters of the current route.

diff --git a/src/sidebar/services/service-url.js b/src/sidebar/services/service-url.js
@@ -33,7 +33,7 @@ import * as urlUtil from '../util/url';
 
 /**
  * @return {ServiceUrlGetter}
- * @ngInject
+ * @inject
  */
 export default function serviceUrl(store, apiRoutes) {
   apiRoutes

diff --git a/src/sidebar/services/session.js b/src/sidebar/services/session.js
@@ -12,7 +12,7 @@ const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
  *
  * Access to the current profile is exposed via the `state` property.
  *
- * @ngInject
+ * @inject
  */
 export default function session(
   analytics,

diff --git a/src/sidebar/services/streamer.js b/src/sidebar/services/streamer.js
@@ -10,7 +10,7 @@ import { watch } from '../util/watch';
  * Only one websocket connection may exist at a time, any existing socket is
  * closed.
  */
-// @ngInject
+// @inject
 export default function Streamer(store, auth, groups, session, settings) {
   // The randomly generated session ID
   const clientId = generateHexString(32);

diff --git a/src/sidebar/services/tags.js b/src/sidebar/services/tags.js
@@ -12,7 +12,7 @@
  * and provides a `filter` method to fetch tags matching a query, ranked based
  * on frequency of usage.
  */
-// @ngInject
+// @inject
 export default function tags(localStorage) {
   const TAGS_LIST_KEY = 'hypothesis.user.tags.list';
   const TAGS_MAP_KEY = 'hypothesis.user.tags.map';

diff --git a/src/sidebar/services/threads.js b/src/sidebar/services/threads.js
@@ -2,7 +2,7 @@
  * @typedef {import('../util/build-thread').Thread} Thread
  */
 
-// @ngInject
+// @inject
 export default function threadsService(store) {
   /**
    * Make this thread and all of its children "visible". This has the effect of

diff --git a/src/sidebar/services/toast-messenger.js b/src/sidebar/services/toast-messenger.js
@@ -18,7 +18,7 @@ const MESSAGE_DISMISS_DELAY = 500;
  * @prop {string} [moreInfoURL=''] - Optional URL for users to visit for "more info"
  */
 
-// @ngInject
+// @inject
 export default function toastMessenger(store) {
   /**
    * Update a toast message's dismiss status and set a timeout to remove

diff --git a/src/sidebar/store/index.js b/src/sidebar/store/index.js
@@ -99,7 +99,7 @@ import viewer from './modules/viewer';
  * @param {import('../../types/config').SidebarConfig} settings
  * @return {SidebarStore}
  */
-// @ngInject
+// @inject
 export default function store(settings) {
   const middleware = [debugMiddleware];
 

diff --git a/yarn.lock b/yarn.lock
@@ -908,7 +908,7 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
-"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.2.0", "@babel/types@^7.4.4":
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.4.4":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
   integrity sha512-BzSY3NJBKM4kyatSOWh3D/JJ2O3CVzBybHWxtgxnggaxEuaSTTDqeiSb/xk9lrkw2Tbqyivw5ZU4rT+EfznQsA==
@@ -1560,22 +1560,18 @@ axobject-query@^2.2.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-plugin-angularjs-annotate@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-angularjs-annotate/-/babel-plugin-angularjs-annotate-0.10.0.tgz#4213b3aaae494a087aad0b8237c5d0716d22ca76"
-  integrity sha512-NPE7FOAxcLPCUR/kNkrhHIjoScR3RyIlRH3yRn79j8EZWtpILVnCOdA9yKfsOmRh6BHnLHKl8ZAThc+YDd/QwQ==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/types" "^7.2.0"
-    simple-is "~0.2.0"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
   integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-inject-args@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inject-args/-/babel-plugin-inject-args-1.0.0.tgz#f6707a0c57bcf465dd703e222080bb13d70e89bb"
+  integrity sha512-BUHqoR8vRzs20ug6guS9M+lfL/fQWpCJYZjGvp8Th2ZYwXBVSTMUnCVBj80KmUAjieXo0Mjrztfb9cKG0TIOig==
+
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -6861,11 +6857,6 @@ simple-concat@^1.0.0:
   resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
   integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
 
-simple-is@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/simple-is/-/simple-is-0.2.0.tgz#2abb75aade39deb5cc815ce10e6191164850baf0"
-  integrity sha1-Krt1qt453rXMgVzhDmGRFkhQuvA=
-
 sinon@^9.0.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-9.2.0.tgz#1d333967e30023609f7347351ebc0dc964c0f3c9"