Actually lazy load swagger ui (#7067)

* switch to dynamic imports so that bundling doesn't include swagger-ui-dist in its vendor file

* remove ember-ajax

* delete comment

* update comment about lazy loading in the engine index.js

ui/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  parser: 'babel-eslint',
   root: true,
   parserOptions: {
     ecmaVersion: 2018,

ui/lib/open-api-explorer/addon/components/swagger-ui.js

@@ -2,9 +2,7 @@ import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 import parseURL from 'core/utils/parse-url';
 import config from 'open-api-explorer/config/environment';
-import Swag from 'swagger-ui-dist';
 
-const { SwaggerUIBundle } = Swag;
 const { APP } = config;
 
 const SearchFilterPlugin = () => {
@@ -28,7 +26,7 @@ const SearchFilterPlugin = () => {
   };
 };
 
-const CONFIG = (componentInstance, initialFilter) => {
+const CONFIG = (SwaggerUIBundle, componentInstance, initialFilter) => {
   return {
     dom_id: `#${componentInstance.elementId}-swagger`,
     url: '/v1/sys/internal/specs/openapi',
@@ -76,11 +74,12 @@ export default Component.extend({
   onFilterChange() {},
   swaggerLoading: true,
 
-  didInsertElement() {
+  async didInsertElement() {
+    const { default: SwaggerUIBundle } = await import('swagger-ui-dist/swagger-ui-bundle.js');
     this._super(...arguments);
     // trim any initial slashes
     let initialFilter = this.initialFilter.replace(/^(\/)+/, '');
-    SwaggerUIBundle(CONFIG(this, initialFilter));
+    SwaggerUIBundle(CONFIG(SwaggerUIBundle, this, initialFilter));
   },
 
   actions: {

ui/lib/open-api-explorer/index.js

@@ -7,11 +7,16 @@ const EngineAddon = require('ember-engines/lib/engine-addon');
 module.exports = EngineAddon.extend({
   name: 'open-api-explorer',
 
+  babel: {
+    plugins: [require.resolve('ember-auto-import/babel-plugin')],
+  },
   included() {
     this._super.included && this._super.included.apply(this, arguments);
-    // we want to lazy load these deps, importing them here will result in them being added to the
+    // we want to lazy load the CSS deps, importing them here will result in them being added to the
-    // engine-vendor files that will be lazy loaded with the engine
+    // engine-vendor.css files that will be lazy loaded with the engine
-    this.import('node_modules/swagger-ui-dist/swagger-ui-bundle.js');
+    // We DON'T want to add the JS deps here because currently that leads to their inclusion in the vendor.js
+    // (this is likely a bug) - to get around that we lazy-load via dynamic `import()` in the swagger-ui.js
+    // component
     this.import('node_modules/swagger-ui-dist/swagger-ui.css');
   },
 

ui/package.json

@@ -44,6 +44,7 @@
     "@hashicorp/structure-icons": "^1.3.0",
     "Duration.js": "icholy/Duration.js#golang_compatible",
     "autosize": "^4.0.0",
+    "babel-eslint": "^10.0.2",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "base64-js": "1.2.1",
     "broccoli-asset-rev": "^2.7.0",
@@ -63,7 +64,6 @@
     "date-fns": "^1.29.0",
     "deepmerge": "^2.1.1",
     "doctoc": "^1.4.0",
-    "ember-ajax": "^3.1.0",
     "ember-api-actions": "^0.1.8",
     "ember-auto-import": "^1.2.3",
     "ember-basic-dropdown": "^1.0.0",

ui/yarn.lock

@@ -82,6 +82,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.0.tgz#f20e4b7a91750ee8b63656073d843d2a736dca4a"
+  integrity sha512-1TTVrt7J9rcG5PMjvO7VEG3FrEoEJNHxumRq66GemPmzboLWtIjjcJgk8rokuAS7IiRSpgVSu5Vb9lc99iJkOA==
+  dependencies:
+    "@babel/types" "^7.5.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -315,6 +326,11 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.0.0", "@babel/parser@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.0.tgz#3e0713dff89ad6ae37faec3b29dcfc5c979770b7"
+  integrity sha512-I5nW8AhGpOXGCCNYGc+p7ExQIBxRFnS2fd/d862bNOKvmoEPjYPcfIjsfdy0ujagYOIYPczKgD9l3FsgTkAzKA==
+
 "@babel/parser@^7.1.2", "@babel/parser@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.3.tgz#2c92469bac2b7fbff810b67fca07bd138b48af77"
@@ -1086,6 +1102,21 @@
     "@babel/parser" "^7.2.2"
     "@babel/types" "^7.2.2"
 
+"@babel/traverse@^7.0.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
+  integrity sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.5.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.5.0"
+    "@babel/types" "^7.5.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
 "@babel/traverse@^7.1.0":
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.4.tgz#f4f83b93d649b4b2c91121a9087fa2fa949ec2b4"
@@ -1158,6 +1189,15 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.0.tgz#e47d43840c2e7f9105bc4d3a2c371b4d0c7832ab"
+  integrity sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
 "@ember/optional-features@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@ember/optional-features/-/optional-features-0.7.0.tgz#f65a858007020ddfb8342f586112750c32abd2d9"
@@ -3020,6 +3060,18 @@ babel-core@^6.24.1, babel-core@^6.26.0, babel-core@^6.26.3:
     slash "^1.0.0"
     source-map "^0.5.7"
 
+babel-eslint@^10.0.2:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.2.tgz#182d5ac204579ff0881684b040560fdcc1558456"
+  integrity sha512-UdsurWPtgiPgpJ06ryUnuaSXC2s0WoSZnQmEpbAH65XZSdwowgN5MvyP7e88nW07FYXv72erVtpBkxyDVKhH1Q==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-scope "3.7.1"
+    eslint-visitor-keys "^1.0.0"
+
 babel-generator@^6.26.0:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
@@ -7152,14 +7204,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-ember-ajax@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/ember-ajax/-/ember-ajax-3.1.1.tgz#dcb55aaf1a9fe8b2ce04206863384709ebc2358b"
-  integrity sha512-jepaHuSuJCxiyKMKcyXrBLFmUoZV4UlkS6yfLpNC55pLJjCnJzomeAooe97qt2gGxIdSChpagpgwfTU9RclF2w==
-  dependencies:
-    ember-cli-babel "^6.16.0"
-    najax "^1.0.3"
-
 ember-api-actions@^0.1.8:
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/ember-api-actions/-/ember-api-actions-0.1.9.tgz#6a90af17bf79c42daa9b3b06b86a6f60bc098e7f"
@@ -8542,6 +8586,14 @@ eslint-plugin-prettier@^3.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-scope@3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  integrity sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-scope@^3.7.1:
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
@@ -11393,11 +11445,6 @@ jest-validate@^23.5.0:
     leven "^2.1.0"
     pretty-format "^23.6.0"
 
-jquery-deferred@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/jquery-deferred/-/jquery-deferred-0.3.1.tgz#596eca1caaff54f61b110962b23cafea74c35355"
-  integrity sha1-WW7KHKr/VPYbEQlisjyv6nTDU1U=
-
 jquery@^3.2.1, jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
@@ -13345,15 +13392,6 @@ mute-stream@0.0.7, mute-stream@~0.0.4:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-najax@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/najax/-/najax-1.0.4.tgz#63fd8dbf15d18f24dc895b3a16fec66c136b8084"
-  integrity sha512-wsSacA+RkgY1wxRxXCT3tdqzmamEv9PLeoV/ub9SlLf2RngbPMSqc3A7H35XJDfURC0twMmZsnPdsYPkuuFSVg==
-  dependencies:
-    jquery-deferred "^0.3.0"
-    lodash.defaultsdeep "^4.6.0"
-    qs "^6.2.0"
-
 nan@^2.10.0, nan@^2.9.2:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.0.tgz#574e360e4d954ab16966ec102c0c049fd961a099"
@@ -15114,7 +15152,7 @@ qs@6.5.1:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
   integrity sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==
 
-qs@6.5.2, qs@^6.2.0, qs@^6.4.0, qs@~6.5.2:
+qs@6.5.2, qs@^6.4.0, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==