Convert GrLibLoader from Polymer element to class
Change-Id: I1d1d1aadec4c53ab3c2597bf4cf65cf79ba6fe70
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.ts b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.ts
index f85667c..04bb3d2 100644
--- a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.ts
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.ts
@@ -14,12 +14,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../shared/gr-lib-loader/gr-lib-loader';
import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
+import {html} from '@polymer/polymer/lib/utils/html-tag';
import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-syntax-layer_html';
import {FILE, GrDiffLine, GrDiffLineType} from '../gr-diff/gr-diff-line';
import {CancelablePromise, util} from '../../../scripts/util';
import {customElement, property} from '@polymer/decorators';
@@ -159,18 +158,12 @@
lastNotify: {left: number; right: number};
}
-export interface GrSyntaxLayer {
- $: {
- libLoader: GrLibLoader;
- };
-}
-
@customElement('gr-syntax-layer')
export class GrSyntaxLayer
extends GestureEventListeners(LegacyElementMixin(PolymerElement))
implements DiffLayer {
static get template() {
- return htmlTemplate;
+ return html``;
}
@property({type: Object, observer: '_diffChanged'})
@@ -203,6 +196,8 @@
@property({type: Object})
_hljs?: HighlightJS;
+ private readonly libLoader = new GrLibLoader();
+
addListener(listener: DiffLayerListener) {
this.push('_listeners', listener);
}
@@ -598,7 +593,7 @@
}
_loadHLJS() {
- return this.$.libLoader.getHLJS().then(hljs => {
+ return this.libLoader.getHLJS().then(hljs => {
this._hljs = hljs;
});
}
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.ts b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.ts
deleted file mode 100644
index ac59f4f..0000000
--- a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @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 {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <gr-lib-loader id="libLoader"></gr-lib-loader>
-`;
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_test.js b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_test.js
index 6a2bbca..20106d8 100644
--- a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_test.js
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_test.js
@@ -173,7 +173,7 @@
const mockHLJS = getMockHLJS();
const highlightSpy = sinon.spy(mockHLJS, 'highlight');
- sinon.stub(element.$.libLoader, 'getHLJS').callsFake(
+ sinon.stub(element.libLoader, 'getHLJS').callsFake(
() => Promise.resolve(mockHLJS));
const processNextSpy = sinon.spy(element, '_processNextLine');
const processPromise = element.process();
diff --git a/polygerrit-ui/app/elements/gr-app-element.ts b/polygerrit-ui/app/elements/gr-app-element.ts
index 830b7c3..72e24f7 100644
--- a/polygerrit-ui/app/elements/gr-app-element.ts
+++ b/polygerrit-ui/app/elements/gr-app-element.ts
@@ -37,7 +37,6 @@
import './settings/gr-cla-view/gr-cla-view';
import './settings/gr-registration-dialog/gr-registration-dialog';
import './settings/gr-settings-view/gr-settings-view';
-import './shared/gr-lib-loader/gr-lib-loader';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
diff --git a/polygerrit-ui/app/elements/gr-app-element_html.ts b/polygerrit-ui/app/elements/gr-app-element_html.ts
index 55dfe27..81a9988 100644
--- a/polygerrit-ui/app/elements/gr-app-element_html.ts
+++ b/polygerrit-ui/app/elements/gr-app-element_html.ts
@@ -230,7 +230,6 @@
></gr-error-manager>
<gr-router id="router"></gr-router>
<gr-plugin-host id="plugins" config="[[_serverConfig]]"> </gr-plugin-host>
- <gr-lib-loader id="libLoader"></gr-lib-loader>
<gr-external-style
id="externalStyleForAll"
name="app-theme"
diff --git a/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader.ts b/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader.ts
index ad97d02..ea0ad4e 100644
--- a/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader.ts
+++ b/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader.ts
@@ -15,14 +15,9 @@
* limitations under the License.
*/
import '../gr-js-api-interface/gr-js-api-interface';
-import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
-import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-lib-loader_html';
import {EventType} from '../../plugins/gr-plugin-types';
-import {customElement, property} from '@polymer/decorators';
-import {JsApiService} from '../gr-js-api-interface/gr-js-api-types';
import {HighlightJS} from '../../../types/types';
+import {GrJsApiInterface} from '../gr-js-api-interface/gr-js-api-interface-element';
// preloaded in PolyGerritIndexHtml.soy
const HLJS_PATH = 'bower_components/highlightjs/highlight.min.js';
@@ -35,21 +30,9 @@
callbacks: HljsCallback[];
}
-export interface GrLibLoader {
- $: {
- jsAPI: JsApiService & Element;
- };
-}
-@customElement('gr-lib-loader')
-export class GrLibLoader extends GestureEventListeners(
- LegacyElementMixin(PolymerElement)
-) {
- static get template() {
- return htmlTemplate;
- }
+export class GrLibLoader {
+ private readonly jsAPI = new GrJsApiInterface();
- // NOTE: intended singleton.
- @property({type: Object})
_hljsState: HljsState = {
configured: false,
loading: false,
@@ -87,7 +70,7 @@
_onHLJSLibLoaded() {
const lib = this._getHighlightLib();
this._hljsState.loading = false;
- this.$.jsAPI.handleEvent(EventType.HIGHLIGHTJS_LOADED, {
+ this.jsAPI.handleEvent(EventType.HIGHLIGHTJS_LOADED, {
hljs: lib,
});
for (const cb of this._hljsState.callbacks) {
@@ -152,9 +135,3 @@
return root + HLJS_PATH;
}
}
-
-declare global {
- interface HTMLElementTagNameMap {
- 'gr-lib-loader': GrLibLoader;
- }
-}
diff --git a/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_html.ts b/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_html.ts
deleted file mode 100644
index f34f99e..0000000
--- a/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_html.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @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 {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
-`;
diff --git a/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_test.js b/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_test.js
index 1ce175f..c89ff8e 100644
--- a/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_test.js
+++ b/polygerrit-ui/app/elements/shared/gr-lib-loader/gr-lib-loader_test.js
@@ -17,23 +17,22 @@
import '../../../test/common-test-setup-karma.js';
import './gr-lib-loader.js';
-
-const basicFixture = fixtureFromElement('gr-lib-loader');
+import {GrLibLoader} from './gr-lib-loader.js';
suite('gr-lib-loader tests', () => {
- let element;
+ let grLibLoader;
let resolveLoad;
let loadStub;
setup(() => {
- element = basicFixture.instantiate();
+ grLibLoader = new GrLibLoader();
- loadStub = sinon.stub(element, '_loadScript').callsFake(() =>
+ loadStub = sinon.stub(grLibLoader, '_loadScript').callsFake(() =>
new Promise(resolve => resolveLoad = resolve)
);
// Assert preconditions:
- assert.isFalse(element._hljsState.loading);
+ assert.isFalse(grLibLoader._hljsState.loading);
});
teardown(() => {
@@ -42,26 +41,26 @@
}
// Because the element state is a singleton, clean it up.
- element._hljsState.configured = false;
- element._hljsState.loading = false;
- element._hljsState.callbacks = [];
+ grLibLoader._hljsState.configured = false;
+ grLibLoader._hljsState.loading = false;
+ grLibLoader._hljsState.callbacks = [];
});
test('only load once', async () => {
- sinon.stub(element, '_getHLJSUrl').returns('');
+ sinon.stub(grLibLoader, '_getHLJSUrl').returns('');
const firstCallHandler = sinon.stub();
- element.getHLJS().then(firstCallHandler);
+ grLibLoader.getHLJS().then(firstCallHandler);
// It should now be in the loading state.
assert.isTrue(loadStub.called);
- assert.isTrue(element._hljsState.loading);
+ assert.isTrue(grLibLoader._hljsState.loading);
assert.isFalse(firstCallHandler.called);
const secondCallHandler = sinon.stub();
- element.getHLJS().then(secondCallHandler);
+ grLibLoader.getHLJS().then(secondCallHandler);
// No change in state.
- assert.isTrue(element._hljsState.loading);
+ assert.isTrue(grLibLoader._hljsState.loading);
assert.isFalse(firstCallHandler.called);
assert.isFalse(secondCallHandler.called);
@@ -69,7 +68,7 @@
resolveLoad();
await flush();
// The state should be loaded and both handlers called.
- assert.isFalse(element._hljsState.loading);
+ assert.isFalse(grLibLoader._hljsState.loading);
assert.isTrue(firstCallHandler.called);
assert.isTrue(secondCallHandler.called);
});
@@ -90,13 +89,13 @@
test('returns hljs', async () => {
const firstCallHandler = sinon.stub();
- element.getHLJS().then(firstCallHandler);
+ grLibLoader.getHLJS().then(firstCallHandler);
await flush();
assert.isTrue(firstCallHandler.called);
assert.isTrue(firstCallHandler.calledWith(hljsStub));
});
- test('configures hljs', () => element.getHLJS().then(() => {
+ test('configures hljs', () => grLibLoader.getHLJS().then(() => {
assert.isTrue(window.hljs.configure.calledOnce);
}));
});
@@ -106,16 +105,16 @@
let root;
setup(() => {
- sinon.stub(element, '_getLibRoot').callsFake(() => root);
+ sinon.stub(grLibLoader, '_getLibRoot').callsFake(() => root);
});
test('with no root', () => {
- assert.isNull(element._getHLJSUrl());
+ assert.isNull(grLibLoader._getHLJSUrl());
});
test('with root', () => {
root = 'test-root.com/';
- assert.equal(element._getHLJSUrl(),
+ assert.equal(grLibLoader._getHLJSUrl(),
'test-root.com/bower_components/highlightjs/highlight.min.js');
});
});
