Use page/page.js instead of page/page.mjs

This change is required for typescript convertion. Typescript can't
import mjs files.

Change-Id: Iad7552a30fb80bc513a23a076b0a38bdf35ee4b8

polygerrit-ui/app/elements/admin/gr-create-group-dialog/gr-create-group-dialog.js

@@ -23,7 +23,7 @@ import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mix
 import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 import {htmlTemplate} from './gr-create-group-dialog_html.js';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 /**
  * @extends PolymerElement

polygerrit-ui/app/elements/admin/gr-create-group-dialog/gr-create-group-dialog_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-create-group-dialog.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 const basicFixture = fixtureFromElement('gr-create-group-dialog');
 

polygerrit-ui/app/elements/admin/gr-create-pointer-dialog/gr-create-pointer-dialog.js

@@ -25,7 +25,7 @@ import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mix
 import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 import {htmlTemplate} from './gr-create-pointer-dialog_html.js';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 const DETAIL_TYPES = {
   branches: 'branches',

polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.js

@@ -26,7 +26,7 @@ import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mix
 import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 import {htmlTemplate} from './gr-create-repo-dialog_html.js';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 /**
  * @extends PolymerElement

polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-repo-detail-list.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
 
 const basicFixture = fixtureFromElement('gr-repo-detail-list');

polygerrit-ui/app/elements/admin/gr-repo-list/gr-repo-list_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-repo-list.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 const basicFixture = fixtureFromElement('gr-repo-list');
 

polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.js

@@ -25,7 +25,7 @@ import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-l
 import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
 import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 import {htmlTemplate} from './gr-change-list-view_html.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 import {GerritNav} from '../../core/gr-navigation/gr-navigation.js';
 
 const LookupQueryPatterns = {

polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-change-list-view.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 import {GerritNav} from '../../core/gr-navigation/gr-navigation.js';
 
 const basicFixture = fixtureFromElement('gr-change-list-view');

polygerrit-ui/app/elements/core/gr-router/gr-router.js

@@ -18,7 +18,7 @@ import '../../shared/gr-rest-api-interface/gr-rest-api-interface.js';
 import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
 import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 import {htmlTemplate} from './gr-router_html.js';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util.js';
 import {GerritNav} from '../gr-navigation/gr-navigation.js';

polygerrit-ui/app/elements/core/gr-router/gr-router_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-router.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 import {GerritNav} from '../gr-navigation/gr-navigation.js';
 import {stubBaseUrl} from '../../../test/test-utils.js';
 import {_testOnly_RoutePattern} from './gr-router.js';

polygerrit-ui/app/elements/documentation/gr-documentation-search/gr-documentation-search_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-documentation-search.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 const basicFixture = fixtureFromElement('gr-documentation-search');
 

polygerrit-ui/app/elements/gr-app-global-var-init.js

@@ -47,7 +47,7 @@ import {GrPopupInterface} from './plugins/gr-popup-interface/gr-popup-interface.
 import {GrCountStringFormatter} from './shared/gr-count-string-formatter/gr-count-string-formatter.js';
 import {GrReviewerSuggestionsProvider, SUGGESTIONS_PROVIDERS_USERS_TYPES} from '../scripts/gr-reviewer-suggestions-provider/gr-reviewer-suggestions-provider.js';
 import {util} from '../scripts/util.js';
-import page from 'page/page.mjs';
+import {page} from '../utils/page-wrapper-utils.js';
 import {appContext} from '../services/app-context.js';
 import {GrAdminApi} from './plugins/gr-admin-api/gr-admin-api.js';
 import {GrAnnotationActionsContext} from './shared/gr-js-api-interface/gr-annotation-actions-context.js';

polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.js

@@ -23,7 +23,7 @@ import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mix
 import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 import {htmlTemplate} from './gr-list-view_html.js';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 
 const REQUEST_DEBOUNCE_INTERVAL_MS = 200;
 

polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view_test.js

@@ -17,7 +17,7 @@
 
 import '../../../test/common-test-setup-karma.js';
 import './gr-list-view.js';
-import page from 'page/page.mjs';
+import {page} from '../../../utils/page-wrapper-utils.js';
 import {stubBaseUrl} from '../../../test/test-utils.js';
 
 const basicFixture = fixtureFromElement('gr-list-view');

polygerrit-ui/app/rollup.config.js

@@ -75,7 +75,10 @@ export default {
   context: 'window',
   plugins: [resolve({
     customResolveOptions: {
-      moduleDirectory: 'external/ui_npm/node_modules'
+      // By default, it tries to use page.mjs file instead of page.js
+      // when importing 'page/page'.
+      extensions: ['.js'],
+      moduleDirectory: 'external/ui_npm/node_modules',
     }
   }), importLocalFontMetaUrlResolver()],
 };

polygerrit-ui/app/utils/page-wrapper-utils.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (C) 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'page/page';
+
+// Reexport page.js. To make it work, karma, server.go and rollup patch
+// page.js and replace "this" to "window". Otherwise, it can't assign global
+// property. We can't import page.mjs because typescript doesn't support mjs
+// extensions
+
+export interface Page {
+  show(url: string): void;
+}
+
+export const page = window['page'] as Page;

polygerrit-ui/karma.conf.js

@@ -81,7 +81,11 @@ module.exports = function(config) {
       { pattern: testFilesPattern, type: 'module' },
     ],
     esm: {
-      nodeResolve: true,
+      nodeResolve: {
+        // By default, it tries to use page.mjs file instead of page.js
+        // when importing 'page/page'.
+        extensions: ['.js'],
+      },
       moduleDirs: getModulesDir(),
       // Bazel and yarn uses symlinks for files.
       // preserveSymlinks is necessary for correct modules paths resolving
@@ -91,6 +95,28 @@ module.exports = function(config) {
       // breaks tests in some browser versions
       // (for example, Chrome 69 on gerrit-ci).
       compatibility: 'none',
+      plugins: [
+        {
+          transform(context) {
+            if (context.path.endsWith('/node_modules/page/page.js')) {
+              const orignalBody = context.body;
+              // Can't import page.js directly, because this is undefined.
+              // Replace it with window
+              // The same replace exists in server.go
+              // Rollup makes this replacement automatically
+              const transformedBody = orignalBody.replace(
+                  '}(this, (function () { \'use strict\';',
+                  '}(window, (function () { \'use strict\';'
+              );
+              if(orignalBody.length === transformedBody.length) {
+                console.error('The page.js was updated. Please update transform accordingly');
+                process.exit(1);
+              }
+              return {body: transformedBody};
+            }
+          },
+        }
+      ]
     },
     // test results reporter to use
     // possible values: 'dots', 'progress'

polygerrit-ui/server.go

@@ -191,6 +191,19 @@ func handleSrcRequest(compiledSrcPath string, dirListingMux *http.ServeMux, writ
 		moduleImportRegexp = regexp.MustCompile("(?m)^(import.*)'([^/.].*)';$")
 		data = moduleImportRegexp.ReplaceAll(data, []byte("$1 '/node_modules/$2';"))
 
+		if strings.HasSuffix(normalizedContentPath, "/node_modules/page/page.js") {
+			// Can't import page.js directly, because this is undefined.
+			// Replace it with window
+			// The same replace exists in karma.conf.js
+			// Rollup makes this replacement automatically
+			pageJsRegexp := regexp.MustCompile(`(?m)^}\(this, \(function \(\) { 'use strict';$`)
+			newData := pageJsRegexp.ReplaceAll(data, []byte("}(window, (function () { 'use strict';"))
+			if len(newData) == len(data) {
+				log.Fatal("The page.js was updated. Please update regexp/replace accordingly")
+			}
+			data = newData
+		}
+
 		writer.Header().Set("Content-Type", "application/javascript")
 	} else if strings.HasSuffix(normalizedContentPath, ".css") {
 		writer.Header().Set("Content-Type", "text/css")