From a640411471c20dc16394c14df2ee66e880bef26b Mon Sep 17 00:00:00 2001 From: Matthew Irish Date: Fri, 5 Jul 2019 10:28:41 -0500 Subject: [PATCH] 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 + .../addon/components/swagger-ui.js | 9 +- ui/lib/open-api-explorer/index.js | 11 ++- ui/package.json | 2 +- ui/yarn.lock | 84 ++++++++++++++----- 5 files changed, 75 insertions(+), 32 deletions(-) diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js index 2220472b85..1875a4b62b 100644 --- a/ui/.eslintrc.js +++ b/ui/.eslintrc.js @@ -1,4 +1,5 @@ module.exports = { + parser: 'babel-eslint', root: true, parserOptions: { ecmaVersion: 2018, diff --git a/ui/lib/open-api-explorer/addon/components/swagger-ui.js b/ui/lib/open-api-explorer/addon/components/swagger-ui.js index e5ab142488..52fdc95aa2 100644 --- a/ui/lib/open-api-explorer/addon/components/swagger-ui.js +++ b/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: { diff --git a/ui/lib/open-api-explorer/index.js b/ui/lib/open-api-explorer/index.js index 01b80dae05..f0291c2863 100644 --- a/ui/lib/open-api-explorer/index.js +++ b/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 - // engine-vendor files that will be lazy loaded with the engine - this.import('node_modules/swagger-ui-dist/swagger-ui-bundle.js'); + // we want to lazy load the CSS deps, importing them here will result in them being added to the + // engine-vendor.css files that will be lazy loaded with the engine + // 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'); }, diff --git a/ui/package.json b/ui/package.json index 5b88a29847..8650fa923d 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/yarn.lock b/ui/yarn.lock index 720b3f43fb..16f19a05d6 100644 --- a/ui/yarn.lock +++ b/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==