Unify all JS building into the Rollup pipeline with module output. (#3991)

This should make it easier to Typescriptify js-src and any JS depending
on files in that directory.

.gitignore

@@ -21,7 +21,6 @@ node_modules
 # Generated files
 static/css/
 static/dist/
-static/js/
 
 # OS files
 *.DS_Store

client-src/elements/chromedash-activity-log_test.js

@@ -4,7 +4,7 @@ import {
   ChromedashActivity,
   ChromedashActivityLog,
 } from './chromedash-activity-log';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 const nonAdminUser = {

client-src/elements/chromedash-activity-page_test.js

@@ -1,7 +1,7 @@
 import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashActivityPage} from './chromedash-activity-page';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-settings-page', () => {

client-src/elements/chromedash-all-features-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashAllFeaturesPage} from './chromedash-all-features-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-all-features-page', () => {

client-src/elements/chromedash-drawer_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashDrawer} from './chromedash-drawer';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-drawer', () => {

client-src/elements/chromedash-enterprise-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashEnterprisePage} from './chromedash-enterprise-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-enterprise-page', () => {

client-src/elements/chromedash-enterprise-release-notes-page_test.js

@@ -3,7 +3,7 @@ import {assert, fixture, nextFrame} from '@open-wc/testing';
 import {ChromedashEnterpriseReleaseNotesPage} from './chromedash-enterprise-release-notes-page';
 import {parseRawQuery, clearURLParams} from './utils.js';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 function normalizedTextContent(element) {

client-src/elements/chromedash-feature-page.js

@@ -1,5 +1,6 @@
 import {LitElement, css, html, nothing} from 'lit';
 import {SHARED_STYLES} from '../css/shared-css.js';
+import {FeatureNotFoundError} from '../js-src/cs-client.js';
 import './chromedash-feature-detail';
 import {DETAILS_STYLES} from './chromedash-feature-detail';
 import './chromedash-feature-highlights.js';

client-src/elements/chromedash-feature-page_test.js

@@ -1,9 +1,9 @@
-import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
+import {html} from 'lit';
+import sinon from 'sinon';
+import {ChromeStatusClient, FeatureNotFoundError} from '../js-src/cs-client';
 import {ChromedashFeaturePage} from './chromedash-feature-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
-import sinon from 'sinon';
 
 describe('chromedash-feature-page', () => {
   const user = {

client-src/elements/chromedash-featurelist.js

@@ -1,6 +1,7 @@
 import {LitElement, html} from 'lit';
-import './chromedash-feature';
 import {FEATURELIST_CSS} from '../css/elements/chromedash-featurelist-css.js';
+import {Metric} from '../js-src/metric.js';
+import './chromedash-feature';
 
 const MAX_FEATURES_SHOWN = 500;
 

client-src/elements/chromedash-gate-column_test.js

@@ -1,7 +1,7 @@
 import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashGateColumn} from './chromedash-gate-column';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-settings-page', () => {

client-src/elements/chromedash-guide-edit-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashGuideEditPage} from './chromedash-guide-edit-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-guide-edit-page', () => {

client-src/elements/chromedash-guide-editall-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashGuideEditallPage} from './chromedash-guide-editall-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-guide-editall-page', () => {

client-src/elements/chromedash-guide-new-page_test.js

@@ -1,7 +1,7 @@
 import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashGuideNewPage} from './chromedash-guide-new-page';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-guide-new-page', () => {

client-src/elements/chromedash-guide-stage-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashGuideStagePage} from './chromedash-guide-stage-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-guide-stage-page', () => {

client-src/elements/chromedash-guide-verify-accuracy-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashGuideVerifyAccuracyPage} from './chromedash-guide-verify-accuracy-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-guide-verify-accuracy-page', () => {

client-src/elements/chromedash-header_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashHeader} from './chromedash-header';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-header', () => {

client-src/elements/chromedash-myfeatures-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashMyFeaturesPage} from './chromedash-myfeatures-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-myfeatures-page', () => {

client-src/elements/chromedash-roadmap-page_test.js

@@ -1,7 +1,7 @@
 import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashRoadmapPage} from './chromedash-roadmap-page';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-roadmap-page', () => {

client-src/elements/chromedash-settings-page_test.js

@@ -2,7 +2,7 @@ import {html} from 'lit';
 import {assert, fixture} from '@open-wc/testing';
 import {ChromedashSettingsPage} from './chromedash-settings-page';
 import './chromedash-toast';
-import '../js-src/cs-client';
+import {ChromeStatusClient} from '../js-src/cs-client';
 import sinon from 'sinon';
 
 describe('chromedash-settings-page', () => {

client-src/js-src/cs-client.js

@@ -22,10 +22,6 @@
  * @property {number} http_error_code
  */
 
-// prettier-ignore
-(function(exports) {
-'use strict';
-
 /**
  * Generic Chrome Status Http Error.
  */
@@ -43,7 +39,7 @@ class ChromeStatusHttpError extends Error {
  * FeatureNotFoundError represents an error for when a feature was not found
  * for the given ID.
  */
-class FeatureNotFoundError extends Error {
+export class FeatureNotFoundError extends Error {
   constructor(featureID) {
     super('Feature not found');
     this.name = 'FeatureNotFoundError';
@@ -51,7 +47,7 @@ class FeatureNotFoundError extends Error {
   }
 }
 
-class ChromeStatusClient {
+export class ChromeStatusClient {
   constructor(token, tokenExpiresSec) {
     this.token = token;
     this.tokenExpiresSec = tokenExpiresSec;
@@ -62,7 +58,10 @@ class ChromeStatusClient {
   async ensureTokenIsValid() {
     if (ChromeStatusClient.isTokenExpired(this.tokenExpiresSec)) {
       const refreshResponse = await this.doFetch(
-        '/currentuser/token', 'POST', null);
+        '/currentuser/token',
+        'POST',
+        null
+      );
       this.token = refreshResponse.token;
       this.tokenExpiresSec = refreshResponse.token_expires_sec;
     }
@@ -76,10 +75,10 @@ class ChromeStatusClient {
 
   /* Make a JSON API call to the server, including an XSRF header.
    * Then strip off the defensive prefix from the response. */
-  async doFetch(resource, httpMethod, body, includeToken=true) {
+  async doFetch(resource, httpMethod, body, includeToken = true) {
     const url = this.baseUrl + resource;
     const headers = {
-      'accept': 'application/json',
+      accept: 'application/json',
       'content-type': 'application/json',
     };
     if (includeToken) {
@@ -101,13 +100,15 @@ class ChromeStatusClient {
         `Got error response from server ${resource}: ${response.status}`,
         resource,
         httpMethod,
-        response.status);
+        response.status
+      );
     }
     const rawResponseText = await response.text();
-    const XSSIPrefix = ')]}\'\n';
+    const XSSIPrefix = ")]}'\n";
     if (!rawResponseText.startsWith(XSSIPrefix)) {
       throw new Error(
-          `Response does not start with XSSI prefix: ${XSSIPrefix}`);
+        `Response does not start with XSSI prefix: ${XSSIPrefix}`
+      );
     }
     return JSON.parse(rawResponseText.substr(XSSIPrefix.length));
   }
@@ -135,7 +136,6 @@ class ChromeStatusClient {
     });
   }
 
-
   // //////////////////////////////////////////////////////////////
   // Specific API calls
 
@@ -144,7 +144,7 @@ class ChromeStatusClient {
   signIn(credentialResponse) {
     const credential = credentialResponse.credential;
     // We don't use doPost because we don't already have a XSRF token.
-    return this.doFetch('/login', 'POST', {'credential': credential}, false);
+    return this.doFetch('/login', 'POST', {credential: credential}, false);
   }
 
   signOut() {
@@ -158,19 +158,17 @@ class ChromeStatusClient {
   }
 
   dismissCue(cue) {
-    return this.doPost('/currentuser/cues', {cue: cue})
-      .then((res) => res);
+    return this.doPost('/currentuser/cues', {cue: cue}).then(res => res);
     // TODO: catch((error) => { display message }
   }
 
   // Permissions API
-  getPermissions(returnPairedUser=false) {
+  getPermissions(returnPairedUser = false) {
     let url = '/currentuser/permissions';
     if (returnPairedUser) {
       url += '?returnPairedUser';
     }
-    return this.doGet(url)
-      .then((res) => res.user);
+    return this.doGet(url).then(res => res.user);
   }
 
   // Settings API
@@ -186,16 +184,15 @@ class ChromeStatusClient {
   // Star API
 
   getStars() {
-    return this.doGet('/currentuser/stars')
-      .then((res) => res.featureIds);
+    return this.doGet('/currentuser/stars').then(res => res.featureIds);
     // TODO: catch((error) => { display message }
   }
 
   setStar(featureId, starred) {
-    return this.doPost(
-      '/currentuser/stars',
-      {featureId: featureId, starred: starred})
-      .then((res) => res);
+    return this.doPost('/currentuser/stars', {
+      featureId: featureId,
+      starred: starred,
+    }).then(res => res);
     // TODO: catch((error) => { display message }
   }
 
@@ -219,9 +216,9 @@ class ChromeStatusClient {
   }
 
   setVote(featureId, gateId, state) {
-    return this.doPost(
-        `/features/${featureId}/votes/${gateId}`,
-        {state: Number(state)});
+    return this.doPost(`/features/${featureId}/votes/${gateId}`, {
+      state: Number(state),
+    });
   }
 
   getGates(featureId) {
@@ -233,10 +230,7 @@ class ChromeStatusClient {
   }
 
   updateGate(featureId, gateId, assignees) {
-    return this.doPost(
-        `/features/${featureId}/gates/${gateId}`,
-        {assignees,
-        });
+    return this.doPost(`/features/${featureId}/gates/${gateId}`, {assignees});
   }
 
   getComments(featureId, gateId) {
@@ -250,49 +244,51 @@ class ChromeStatusClient {
   postComment(featureId, gateId, comment, postToThreadType) {
     if (gateId) {
       return this.doPost(
-          `/features/${featureId}/approvals/${gateId}/comments`,
-          {comment, postToThreadType});
+        `/features/${featureId}/approvals/${gateId}/comments`,
+        {comment, postToThreadType}
+      );
     } else {
-      return this.doPost(
-          `/features/${featureId}/approvals/comments`,
-          {comment, postToThreadType});
+      return this.doPost(`/features/${featureId}/approvals/comments`, {
+        comment,
+        postToThreadType,
+      });
     }
   }
 
   deleteComment(featureId, commentId) {
-    return this.doPatch(
-      `/features/${featureId}/approvals/comments`,
-      {commentId, isUndelete: false},
-    );
+    return this.doPatch(`/features/${featureId}/approvals/comments`, {
+      commentId,
+      isUndelete: false,
+    });
   }
 
   undeleteComment(featureId, commentId) {
-    return this.doPatch(
-      `/features/${featureId}/approvals/comments`,
-      {commentId, isUndelete: true},
-    );
+    return this.doPatch(`/features/${featureId}/approvals/comments`, {
+      commentId,
+      isUndelete: true,
+    });
   }
 
   // Features API
   async getFeature(featureId) {
-    return this.doGet(`/features/${featureId}`)
-      .catch((error) => {
-        // If not the ChromeStatusHttpError, continue throwing.
-        if (!(error instanceof ChromeStatusHttpError)) {
-          throw error;
-        }
-        // Else, do further validations
-        if (error.status === 404) {
-          throw new FeatureNotFoundError(featureId);
-        }
-        // No other special cases means, we can re throw the error.
+    return this.doGet(`/features/${featureId}`).catch(error => {
+      // If not the ChromeStatusHttpError, continue throwing.
+      if (!(error instanceof ChromeStatusHttpError)) {
         throw error;
-      });
+      }
+      // Else, do further validations
+      if (error.status === 404) {
+        throw new FeatureNotFoundError(featureId);
+      }
+      // No other special cases means, we can re throw the error.
+      throw error;
+    });
   }
 
   async getFeaturesInMilestone(milestone) {
     return this.doGet(`/features?milestone=${milestone}`).then(
-      (resp) => resp['features_by_type']);
+      resp => resp['features_by_type']
+    );
   }
 
   async getFeaturesForEnterpriseReleaseNotes(milestone) {
@@ -327,8 +323,10 @@ class ChromeStatusClient {
    * @param {number} featureId
    * @returns {Promise<{data: FeatureLink[], has_stale_links: boolean}>}
    */
-  async getFeatureLinks(featureId, updateStaleLinks=true) {
-    return this.doGet(`/feature_links?feature_id=${featureId}&update_stale_links=${updateStaleLinks}`);
+  async getFeatureLinks(featureId, updateStaleLinks = true) {
+    return this.doGet(
+      `/feature_links?feature_id=${featureId}&update_stale_links=${updateStaleLinks}`
+    );
   }
 
   async getFeatureLinksSummary() {
@@ -343,7 +341,9 @@ class ChromeStatusClient {
     if (isError !== undefined && isError !== null) {
       optionalParams += `&is_error=${isError}`;
     }
-    return this.doGet(`/feature_links_samples?domain=${domain}${optionalParams}`);
+    return this.doGet(
+      `/feature_links_samples?domain=${domain}${optionalParams}`
+    );
   }
 
   // Stages API
@@ -364,8 +364,7 @@ class ChromeStatusClient {
   }
 
   async addXfnGates(featureId, stageId) {
-    return this.doPost(
-        `/features/${featureId}/stages/${stageId}/addXfnGates`);
+    return this.doPost(`/features/${featureId}/stages/${stageId}/addXfnGates`);
   }
 
   // Origin trials API
@@ -404,8 +403,4 @@ class ChromeStatusClient {
   async getSpecifiedChannels(start, end) {
     return this.doGet(`/channels?start=${start}&end=${end}`);
   }
-};
-
-exports.ChromeStatusClient = ChromeStatusClient;
-exports.FeatureNotFoundError = FeatureNotFoundError;
-})(window);
+}

client-src/js-src/features-page.js

@@ -103,8 +103,8 @@ featureListEl.addEventListener('app-ready', () => {
 });
 
 // Helper function used by features.html
-/* eslint-disable no-unused-vars */
-const loadFeatureLegendViews = function (views) {
+
+export const loadFeatureLegendViews = function (views) {
   legendEl.views = views;
 };
 

client-src/js-src/metric.js

@@ -14,11 +14,7 @@
  * limitations under the License.
  */
 
-'use strict';
-
-// prettier-ignore
-(function(exports) {
-class Metric {
+export class Metric {
   static get supportsPerfNow() {
     return performance && performance.now;
   }
@@ -155,6 +151,3 @@ class Metric {
     return this;
   }
 }
-
-exports.Metric = Metric;
-})(window);

client-src/js-src/openapi-client.js

@@ -16,27 +16,26 @@
 
 import {DefaultApi as Api, Configuration} from 'chromestatus-openapi';
 
-// prettier-ignore
-(function(exports) {
-'use strict';
 /**
  * Creates a client.
  * @extends {import('chromestatus-openapi').DefaultApiInterface}
  */
-class ChromeStatusOpenApiClient extends Api {
+export class ChromeStatusOpenApiClient extends Api {
   constructor() {
-    super(new Configuration({
-      credentials: 'same-origin',
-      apiKey: 'placeholder-api-key',
-      middleware: [
-        {pre: ChromeStatusMiddlewares.xsrfMiddleware},
-        {post: ChromeStatusMiddlewares.xssiMiddleware},
-      ],
-    }));
+    super(
+      new Configuration({
+        credentials: 'same-origin',
+        apiKey: 'placeholder-api-key',
+        middleware: [
+          {pre: ChromeStatusMiddlewares.xsrfMiddleware},
+          {post: ChromeStatusMiddlewares.xssiMiddleware},
+        ],
+      })
+    );
   }
 }
 
-class ChromeStatusMiddlewares {
+export class ChromeStatusMiddlewares {
   /**
    * Refresh the XSRF Token, if needed. Add to headers.
    *
@@ -53,7 +52,6 @@ class ChromeStatusMiddlewares {
     return req;
   }
 
-
   /**
    * Server sends XSSI prefix. Remove it and allow the client to parse.
    *
@@ -62,23 +60,18 @@ class ChromeStatusMiddlewares {
    */
   static async xssiMiddleware(context) {
     const response = context.response;
-    return response.text().then((rawResponseText) => {
-      const XSSIPrefix = ')]}\'\n';
+    return response.text().then(rawResponseText => {
+      const XSSIPrefix = ")]}'\n";
       if (!rawResponseText.startsWith(XSSIPrefix)) {
         throw new Error(
-          `Response does not start with XSSI prefix: ${XSSIPrefix}`);
+          `Response does not start with XSSI prefix: ${XSSIPrefix}`
+        );
       }
-      return new Response(
-        rawResponseText.substring(XSSIPrefix.length),
-        {
-          status: response.status,
-          statusText: response.statusText,
-          headers: response.headers,
-        });
+      return new Response(rawResponseText.substring(XSSIPrefix.length), {
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers,
+      });
     });
   }
 }
-
-exports.ChromeStatusOpenApiClient = ChromeStatusOpenApiClient;
-exports.ChromeStatusMiddlewares = ChromeStatusMiddlewares;
-})(window);

client-src/js-src/openapi-client_test.js

@@ -1,7 +1,10 @@
 import {assert, expect} from '@open-wc/testing';
 import sinon from 'sinon';
-import './cs-client';
-import './openapi-client';
+import {ChromeStatusClient} from './cs-client';
+import {
+  ChromeStatusMiddlewares,
+  ChromeStatusOpenApiClient,
+} from './openapi-client';
 
 describe('openapi-client', () => {
   beforeEach(async () => {

developer-documentation.md

@@ -36,8 +36,8 @@ All the pages are rendered in a combination of Jinja2 template (`/templates`) an
    - The folder organization and template file names matches the router. (See `template_path=os.path.join(path + '.html')` in `server.py`)
    - lit-element components, css, js files are all imported/included in those templates.
    - We pass backend variables to js like this: `const variableInJs = {{variable_in_template|safe}}`.
-1. All Lit components are in `/client-src/elements`.
-1. All JavaScript files are in `/client-src/js-src/` and processed by gulp, then output to `/static/js/` and get included in templates.
+1. All Lit components are in `/client-src/elements`, and other Javascript files are in `/client-src/js-src/`.
+1. JavaScript is processed and code-split by Rollup, then output to `/static/dist/` and included in templates.
 2. All `*-css.js` files used in client-side components are in `/client-src/css/`.  The remaining css files still being included in templates are in `/static/css/`.
 
 ### Adding an icon

eslint.config.js

@@ -47,7 +47,6 @@ export default [
     ignores: [
       "**/node_modules/**",
       "static/dist/",
-      "**/*.min.js"
     ]
   }
 ];

gulpfile.babel.js

@@ -50,6 +50,9 @@ gulp.task('rollup', () => {
     input: [
       'build/components.js',
       'build/js-src/openapi-client.js',
+      'build/js-src/cs-client.js',
+      'build/js-src/features-page.js',
+      'build/js-src/shared.js',
     ],
     plugins: [
       rollupResolve(),
@@ -66,49 +69,10 @@ gulp.task('rollup', () => {
   });
 });
 
-gulp.task('rollup-cjs', () => {
-  return rollup({
-    input: [
-      'client-src/js-src/openapi-client.js',
-    ],
-    plugins: [
-      rollupResolve(),
-      rollupMinify({mangle: false, comments: false}),
-    ],
-    onwarn: rollupIgnoreUndefinedWarning,
-  }).then(bundle => {
-    return bundle.write({
-      dir: 'static/dist',
-      format: 'cjs',
-      sourcemap: true,
-      compact: true,
-    });
-  });
-});
-
-// Run scripts through babel.
-gulp.task('js', () => {
-  return gulp.src([
-    'client-src/js-src/**/*.js',
-    // openapi-client has imports and needs to use rollup.
-    // exclude it from the list.
-    // Else, the file will need to be treated as a module.
-    // Browsers defer loading <script type="module"> tags and this client is
-    // needed early on page load.
-    '!client-src/js-src/**/openapi-client*.js',
-  ])
-    .pipe(babel()) // Defaults are in .babelrc
-    .pipe(uglifyJS())
-    .pipe(addLicense()) // Add license to top.
-    .pipe(rename({suffix: '.min'}))
-    .pipe(gulp.dest('static/js'));
-});
-
 // Clean generated files
 gulp.task('clean', () => {
   return deleteAsync([
     'static/dist',
-    'static/js/',
   ], {dot: true});
 });
 
@@ -117,9 +81,7 @@ gulp.task('clean', () => {
 gulp.task('default', gulp.series(
   'clean',
   'css',
-  'js',
   'rollup',
-  'rollup-cjs',
 ));
 
 // Build production files, the default task

pages/testdata/featurelist_test/test_html_rendering.html

@@ -58,17 +58,12 @@ limitations under the License.
       alert('Please log in.');
     }
   </script>
-  <script nonce="fake nonce" src="/static/js/metric.min.js?v=Undeployed"></script>
-  <script nonce="fake nonce" src="/static/js/cs-client.min.js?v=Undeployed"></script>
-
-  
-  <script nonce="fake nonce">
+  <script type="module" nonce="fake nonce">
+    import {ChromeStatusClient} from "/static/dist/cs-client.js?v=Undeployed"
     window.csClient = new ChromeStatusClient(
         '', 0);
-  </script>
 
-  
-  <script type="module" nonce="fake nonce">
+    
     const drawer = document.querySelector('chromedash-drawer');
     const header = document.querySelector('chromedash-header');
     header.addEventListener('drawer-clicked', (e) => {
@@ -163,11 +158,11 @@ limitations under the License.
 
 
   
-  <script nonce="fake nonce" src="/static/js/features-page.min.js?v=Undeployed"></script>
-  <script nonce="fake nonce">
+  <script type="module" nonce="fake nonce">
+    import {loadFeatureLegendViews} from "/static/dist/features-page.js?v=Undeployed";
     (function() {
       'use strict';
-      // Get values from server. used in /static/js/features-page.js
+      // Get values from server. used in /static/dist/features-page.js
       const VIEWS = {
         vendors: [{"key": 1, "val": "Shipped/Shipping"}, {"key": 2, "val": "In development"}, {"key": 3, "val": "Positive"}, {"key": 5, "val": "No signal"}, {"key": 7, "val": "Negative"}, {"key": 8, "val": "Neutral"}, {"key": 9, "val": "N/A"}, {"key": 10, "val": "Under consideration"}, {"key": 11, "val": "Important"}, {"key": 12, "val": "Worth prototyping"}, {"key": 13, "val": "Non-harmful"}, {"key": 14, "val": "Defer"}, {"key": 15, "val": "Harmful"}],
         webdevs: [{"key": 1, "val": "Strongly positive"}, {"key": 2, "val": "Positive"}, {"key": 3, "val": "Mixed signals"}, {"key": 4, "val": "No signals"}, {"key": 5, "val": "Negative"}, {"key": 6, "val": "Strongly negative"}],
@@ -202,6 +197,6 @@ limitations under the License.
           async nonce="fake nonce"></script>
 
   
-  <script type="module" nonce="fake nonce" src="/static/js/shared.min.js?v=Undeployed"></script>
+  <script type="module" nonce="fake nonce" src="/static/dist/shared.js?v=Undeployed"></script>
 </body>
 </html>

pages/testdata/intentpreview_test/test_html_rendering.html

@@ -59,17 +59,12 @@ limitations under the License.
       alert('Please log in.');
     }
   </script>
-  <script nonce="fake nonce" src="/static/js/metric.min.js?v=Undeployed"></script>
-  <script nonce="fake nonce" src="/static/js/cs-client.min.js?v=Undeployed"></script>
-
-  
-  <script nonce="fake nonce">
+  <script type="module" nonce="fake nonce">
+    import {ChromeStatusClient} from "/static/dist/cs-client.js?v=Undeployed"
     window.csClient = new ChromeStatusClient(
         '', 0);
-  </script>
 
-  
-  <script type="module" nonce="fake nonce">
+    
     const drawer = document.querySelector('chromedash-drawer');
     const header = document.querySelector('chromedash-header');
     header.addEventListener('drawer-clicked', (e) => {
@@ -365,6 +360,6 @@ False
           async nonce="fake nonce"></script>
 
   
-  <script type="module" nonce="fake nonce" src="/static/js/shared.min.js?v=Undeployed"></script>
+  <script type="module" nonce="fake nonce" src="/static/dist/shared.js?v=Undeployed"></script>
 </body>
 </html>

pages/testdata/users_test/test_html_rendering.html

@@ -58,17 +58,12 @@ limitations under the License.
       alert('Please log in.');
     }
   </script>
-  <script nonce="fake nonce" src="/static/js/metric.min.js?v=Undeployed"></script>
-  <script nonce="fake nonce" src="/static/js/cs-client.min.js?v=Undeployed"></script>
-
-  
-  <script nonce="fake nonce">
+  <script type="module" nonce="fake nonce">
+    import {ChromeStatusClient} from "/static/dist/cs-client.js?v=Undeployed"
     window.csClient = new ChromeStatusClient(
         '', 0);
-  </script>
 
-  
-  <script type="module" nonce="fake nonce">
+    
     const drawer = document.querySelector('chromedash-drawer');
     const header = document.querySelector('chromedash-header');
     header.addEventListener('drawer-clicked', (e) => {
@@ -153,6 +148,6 @@ limitations under the License.
           async nonce="fake nonce"></script>
 
   
-  <script type="module" nonce="fake nonce" src="/static/js/shared.min.js?v=Undeployed"></script>
+  <script type="module" nonce="fake nonce" src="/static/dist/shared.js?v=Undeployed"></script>
 </body>
 </html>

templates/_base.html

@@ -56,17 +56,12 @@ limitations under the License.
       alert('Please log in.');
     }
   </script>
-  <script nonce="{{nonce}}" src="/static/js/metric.min.js?v={{app_version}}"></script>
-  <script nonce="{{nonce}}" src="/static/js/cs-client.min.js?v={{app_version}}"></script>
-
-  {# Loaded immediately because it is used by JS code on the page. #}
-  <script nonce="{{nonce}}">
+  <script type="module" nonce="{{nonce}}">
+    import {ChromeStatusClient} from "/static/dist/cs-client.js?v={{app_version}}"
     window.csClient = new ChromeStatusClient(
         '{{xsrf_token}}', {{xsrf_token_expires}});
-  </script>
 
-  {# Attach Eventlistener for the drawer menu. #}
-  <script type="module" nonce="{{nonce}}">
+    {# Attach Eventlistener for the drawer menu. #}
     const drawer = document.querySelector('chromedash-drawer');
     const header = document.querySelector('chromedash-header');
     header.addEventListener('drawer-clicked', (e) => {
@@ -135,9 +130,9 @@ limitations under the License.
 
   {#
   Note that the following script tag must include type="module" so that the form field event listeners
-  attached by shared.min.js will not be attached until after Shoelace event listeners are attached.
+  attached by shared.js will not be attached until after Shoelace event listeners are attached.
   See https://github.com/GoogleChrome/chromium-dashboard/issues/2014
   #}
-  <script type="module" nonce="{{nonce}}" src="/static/js/shared.min.js?v={{app_version}}"></script>
+  <script type="module" nonce="{{nonce}}" src="/static/dist/shared.js?v={{app_version}}"></script>
 </body>
 </html>

templates/features.html

@@ -44,11 +44,11 @@
 {% endblock %}
 
 {% block js %}
-  <script nonce="{{nonce}}" src="/static/js/features-page.min.js?v={{app_version}}"></script>
-  <script nonce="{{nonce}}">
+  <script type="module" nonce="{{nonce}}">
+    import {loadFeatureLegendViews} from "/static/dist/features-page.js?v={{app_version}}";
     (function() {
       'use strict';
-      // Get values from server. used in /static/js/features-page.js
+      // Get values from server. used in /static/dist/features-page.js
       const VIEWS = {
         vendors: {{VENDOR_VIEWS|safe}},
         webdevs: {{WEB_DEV_VIEWS|safe}},

templates/spa.html

@@ -56,11 +56,10 @@ limitations under the License.
       alert('Please log in.');
     }
   </script>
-  <script nonce="{{nonce}}" src="/static/js/metric.min.js?v={{app_version}}"></script>
-  <script nonce="{{nonce}}" src="/static/js/cs-client.min.js?v={{app_version}}"></script>
-  <script nonce="{{nonce}}" src="/static/dist/openapi-client.js?v={{app_version}}"></script>
-  {# Loaded immediately because it is used by JS code on the page. #}
-  <script nonce="{{nonce}}">
+  <script type="module" nonce="{{nonce}}">
+    import {ChromeStatusClient} from "/static/dist/cs-client.js?v={{app_version}}";
+    import {ChromeStatusOpenApiClient} from "/static/dist/openapi-client.js?v={{app_version}}";
+
     window.csClient = new ChromeStatusClient(
       '{{xsrf_token}}', {{ xsrf_token_expires }});
     window.csOpenApiClient = new ChromeStatusOpenApiClient();
@@ -82,10 +81,10 @@ limitations under the License.
 
   {#
   Note that the following script tag must include type="module" so that the form field event listeners
-  attached by shared.min.js will not be attached until after Shoelace event listeners are attached.
+  attached by shared.js will not be attached until after Shoelace event listeners are attached.
   See https://github.com/GoogleChrome/chromium-dashboard/issues/2014
   #}
-  <script type="module" nonce="{{nonce}}" src="/static/js/shared.min.js?v={{app_version}}"></script>
+  <script type="module" nonce="{{nonce}}" src="/static/dist/shared.js?v={{app_version}}"></script>
 </body>
 
 </html>