opendev/gerrit
Code Issues Proposed changes

Merge changes Ife0bef08,I3c3d5da1

Browse Source 
* changes:
  Convert some helper classes to TypeScript
  Rename files from js to ts to preserve history
This commit is contained in:
Ben Rohlfs
2020-08-03 19:21:17 +00:00
committed by Gerrit Code Review
parent 2d472412a1 cfe354dcfa
commit fdf18af2eb
10 changed files with 449 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
polygerrit-ui/app/elements/plugins/gr-attribute-helper/gr-attribute-helper.js
View File

@@ -1,99 +0,0 @@
/**
* @license
* Copyright (C) 2017 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.
*/
/** @constructor */
export function GrAttributeHelper(element) {
this.element = element;
this._promises = {};
}
GrAttributeHelper.prototype._getChangedEventName = function(name) {
return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() + '-changed';
};
/**
* Returns true if the property is defined on wrapped element.
*
* @param {string} name
* @return {boolean}
*/
GrAttributeHelper.prototype._elementHasProperty = function(name) {
return this.element[name] !== undefined;
};
GrAttributeHelper.prototype._reportValue = function(callback, value) {
try {
callback(value);
} catch (e) {
console.info(e);
}
};
/**
* Binds callback to property updates.
*
* @param {string} name Property name.
* @param {function(?)} callback
* @return {function()} Unbind function.
*/
GrAttributeHelper.prototype.bind = function(name, callback) {
const attributeChangedEventName = this._getChangedEventName(name);
const changedHandler = e => this._reportValue(callback, e.detail.value);
const unbind = () => this.element.removeEventListener(
attributeChangedEventName, changedHandler);
this.element.addEventListener(
attributeChangedEventName, changedHandler);
if (this._elementHasProperty(name)) {
this._reportValue(callback, this.element[name]);
}
return unbind;
};
/**
* Get value of the property from wrapped object. Waits for the property
* to be initialized if it isn't defined.
*
* @param {string} name Property name.
* @return {!Promise<?>}
*/
GrAttributeHelper.prototype.get = function(name) {
if (this._elementHasProperty(name)) {
return Promise.resolve(this.element[name]);
}
if (!this._promises[name]) {
let resolve;
const promise = new Promise(r => resolve = r);
const unbind = this.bind(name, value => {
resolve(value);
unbind();
});
this._promises[name] = promise;
}
return this._promises[name];
};
/**
* Sets value and dispatches event to force notify.
*
* @param {string} name Property name.
* @param {?} value
*/
GrAttributeHelper.prototype.set = function(name, value) {
this.element[name] = value;
this.element.dispatchEvent(
new CustomEvent(this._getChangedEventName(name), {detail: {value}}));
};

97
polygerrit-ui/app/elements/plugins/gr-attribute-helper/gr-attribute-helper.ts Normal file
View File

@@ -0,0 +1,97 @@
/**
* @license
* Copyright (C) 2017 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.
*/
export class GrAttributeHelper {
private readonly _promises = new Map<string, Promise<any>>();
constructor(public element: any) {}
_getChangedEventName(name: string): string {
return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() + '-changed';
}
/**
* Returns true if the property is defined on wrapped element.
*/
_elementHasProperty(name: string) {
return this.element[name] !== undefined;
}
_reportValue(callback: (value: any) => void, value: any) {
try {
callback(value);
} catch (e) {
console.info(e);
}
}
/**
* Binds callback to property updates.
*
* @param {string} name Property name.
* @param {function(?)} callback
* @return {function()} Unbind function.
*/
bind(name: string, callback: (value: any) => void) {
const attributeChangedEventName = this._getChangedEventName(name);
const changedHandler = (e: CustomEvent) =>
this._reportValue(callback, e.detail.value);
const unbind = () =>
this.element.removeEventListener(
attributeChangedEventName,
changedHandler
);
this.element.addEventListener(attributeChangedEventName, changedHandler);
if (this._elementHasProperty(name)) {
this._reportValue(callback, this.element[name]);
}
return unbind;
}
/**
* Get value of the property from wrapped object. Waits for the property
* to be initialized if it isn't defined.
*
* @param {string} name Property name.
* @return {!Promise<?>}
*/
get(name: string) {
if (this._elementHasProperty(name)) {
return Promise.resolve(this.element[name]);
}
if (!this._promises.has(name)) {
let resolve: (value: any) => void;
const promise = new Promise(r => (resolve = r));
const unbind = this.bind(name, value => {
resolve(value);
unbind();
});
this._promises.set(name, promise);
}
return this._promises.get(name);
}
/**
* Sets value and dispatches event to force notify.
*/
set(name: string, value: any) {
this.element[name] = value;
this.element.dispatchEvent(
new CustomEvent(this._getChangedEventName(name), {detail: {value}})
);
}
}

102
polygerrit-ui/app/elements/plugins/gr-event-helper/gr-event-helper.js
View File

@@ -1,102 +0,0 @@
/**
* @license
* Copyright (C) 2017 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.
*/
/** @constructor */
export function GrEventHelper(element) {
this.element = element;
this._unsubscribers = [];
}
/**
* Add a callback to arbitrary event.
* The callback may return false to prevent event bubbling.
*
* @param {string} event Event name
* @param {function(Event):boolean} callback
* @return {function()} Unsubscribe function.
*/
GrEventHelper.prototype.on = function(event, callback) {
return this._listen(this.element, callback, {event});
};
/**
* Alias of onClick
*
* @see onClick
*/
GrEventHelper.prototype.onTap = function(callback) {
return this._listen(this.element, callback);
};
/**
* Add a callback to element click or touch.
* The callback may return false to prevent event bubbling.
*
* @param {function(Event):boolean} callback
* @return {function()} Unsubscribe function.
*/
GrEventHelper.prototype.onClick = function(callback) {
return this._listen(this.element, callback);
};
/**
* Alias of captureClick
*
* @see captureClick
*/
GrEventHelper.prototype.captureTap = function(callback) {
return this._listen(this.element.parentElement, callback, {capture: true});
};
/**
* Add a callback to element click or touch ahead of normal flow.
* Callback is installed on parent during capture phase.
* https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
* The callback may return false to cancel regular event listeners.
*
* @param {function(Event):boolean} callback
* @return {function()} Unsubscribe function.
*/
GrEventHelper.prototype.captureClick = function(callback) {
return this._listen(this.element.parentElement, callback, {capture: true});
};
GrEventHelper.prototype._listen = function(container, callback, opt_options) {
const capture = opt_options && opt_options.capture;
const event = opt_options && opt_options.event || 'click';
const handler = e => {
if (e.path.indexOf(this.element) !== -1) {
let mayContinue = true;
try {
mayContinue = callback(e);
} catch (e) {
console.warn(`Plugin error handing event: ${e}`);
}
if (mayContinue === false) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
}
}
};
container.addEventListener(event, handler, capture);
const unsubscribe = () =>
container.removeEventListener(event, handler, capture);
this._unsubscribers.push(unsubscribe);
return unsubscribe;
};

99
polygerrit-ui/app/elements/plugins/gr-event-helper/gr-event-helper.ts Normal file
View File

@@ -0,0 +1,99 @@
/**
* @license
* Copyright (C) 2017 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.
*/
interface EventWithPath extends Event {
path?: HTMLElement[];
}
export interface ListenOptions {
event?: string;
capture?: boolean;
}
export class GrEventHelper {
constructor(readonly element: HTMLElement) {}
/**
* Add a callback to arbitrary event.
* The callback may return false to prevent event bubbling.
*/
on(event: string, callback: (event: Event) => boolean) {
return this._listen(this.element, callback, {event});
}
/**
* Alias for @see onClick
*/
onTap(callback: (event: Event) => boolean) {
return this.onClick(callback);
}
/**
* Add a callback to element click or touch.
* The callback may return false to prevent event bubbling.
*/
onClick(callback: (event: Event) => boolean) {
return this._listen(this.element, callback);
}
/**
* Alias for @see captureClick
*/
captureTap(callback: (event: Event) => boolean) {
this.captureClick(callback);
}
/**
* Add a callback to element click or touch ahead of normal flow.
* Callback is installed on parent during capture phase.
* https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
* The callback may return false to cancel regular event listeners.
*/
captureClick(callback: (event: Event) => boolean) {
const parent = this.element.parentElement!;
return this._listen(parent, callback, {capture: true});
}
_listen(
container: HTMLElement,
callback: (event: Event) => boolean,
opt_options?: ListenOptions | null
) {
const capture = opt_options?.capture;
const event = opt_options?.event || 'click';
const handler = (e: EventWithPath) => {
if (!e.path) return;
if (e.path.indexOf(this.element) !== -1) {
let mayContinue = true;
try {
mayContinue = callback(e);
} catch (exception) {
console.warn(`Plugin error handing event: ${exception}`);
}
if (mayContinue === false) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
}
}
};
container.addEventListener(event, handler, capture);
const unsubscribe = () =>
container.removeEventListener(event, handler, capture);
return unsubscribe;
}
}

228
polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-plugin-endpoints.js
View File

@@ -1,228 +0,0 @@
/**
* @license
* Copyright (C) 2017 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 {importHref} from '../../../scripts/import-href.js';
/** @constructor */
export class GrPluginEndpoints {
constructor() {
this._endpoints = {};
this._callbacks = {};
this._dynamicPlugins = {};
this._importedUrls = new Set();
this._pluginLoaded = false;
}
setPluginsReady() {
this._pluginLoaded = true;
}
onNewEndpoint(endpoint, callback) {
if (!this._callbacks[endpoint]) {
this._callbacks[endpoint] = [];
}
this._callbacks[endpoint].push(callback);
}
onDetachedEndpoint(endpoint, callback) {
if (this._callbacks[endpoint]) {
this._callbacks[endpoint] = this._callbacks[endpoint].filter(
cb => cb !== callback
);
}
}
_getOrCreateModuleInfo(plugin, opts) {
const {endpoint, slot, type, moduleName, domHook} = opts;
const existingModule = this._endpoints[endpoint].find(
info =>
info.plugin === plugin &&
info.moduleName === moduleName &&
info.domHook === domHook &&
info.slot === slot
);
if (existingModule) {
return existingModule;
} else {
const newModule = {
moduleName,
plugin,
pluginUrl: plugin._url,
type,
domHook,
slot,
};
this._endpoints[endpoint].push(newModule);
return newModule;
}
}
/**
* Register a plugin to an endpoint.
*
* Dynamic plugins are registered to a specific prefix, such as
* 'change-list-header'. These plugins are then fetched by prefix to determine
* which endpoints to dynamically add to the page.
*
* @param {Object} plugin
* @param {Object} opts
*/
registerModule(plugin, opts) {
const {endpoint, dynamicEndpoint} = opts;
if (dynamicEndpoint) {
if (!this._dynamicPlugins[dynamicEndpoint]) {
this._dynamicPlugins[dynamicEndpoint] = new Set();
}
this._dynamicPlugins[dynamicEndpoint].add(endpoint);
}
if (!this._endpoints[endpoint]) {
this._endpoints[endpoint] = [];
}
const moduleInfo = this._getOrCreateModuleInfo(plugin, opts);
// TODO: the logic below seems wrong when:
// multiple plugins register to the same endpoint
// one register before plugins ready
// the other done after, then only the later one will have the callbacks
// invoked.
if (this._pluginLoaded && this._callbacks[endpoint]) {
this._callbacks[endpoint].forEach(callback => callback(moduleInfo));
}
}
getDynamicEndpoints(dynamicEndpoint) {
const plugins = this._dynamicPlugins[dynamicEndpoint];
if (!plugins) return [];
return Array.from(plugins);
}
/**
* Get detailed information about modules registered with an extension
* endpoint.
*
* @param {string} name Endpoint name.
* @param {?{
* type: (string|undefined),
* moduleName: (string|undefined)
* }} opt_options
* @return {!Array<{
* moduleName: string,
* plugin: Plugin,
* pluginUrl: String,
* type: EndpointType,
* domHook: !Object
* }>}
*/
getDetails(name, opt_options) {
const type = opt_options && opt_options.type;
const moduleName = opt_options && opt_options.moduleName;
if (!this._endpoints[name]) {
return [];
}
return this._endpoints[name].filter(
item =>
(!type || item.type === type) &&
(!moduleName || moduleName == item.moduleName)
);
}
/**
* Get detailed module names for instantiating at the endpoint.
*
* @param {string} name Endpoint name.
* @param {?{
* type: (string|undefined),
* moduleName: (string|undefined)
* }} opt_options
* @return {!Array<string>}
*/
getModules(name, opt_options) {
const modulesData = this.getDetails(name, opt_options);
if (!modulesData.length) {
return [];
}
return modulesData.map(m => m.moduleName);
}
/**
* Get plugin URLs with element and module definitions.
*
* @param {string} name Endpoint name.
* @param {?{
* type: (string|undefined),
* moduleName: (string|undefined)
* }} opt_options
* @return {!Array<!URL>}
*/
getPlugins(name, opt_options) {
const modulesData = this.getDetails(name, opt_options);
if (!modulesData.length) {
return [];
}
return Array.from(new Set(modulesData.map(m => m.pluginUrl)));
}
importUrl(pluginUrl) {
let timerId;
return Promise
.race([
new Promise((resolve, reject) => {
this._importedUrls.add(pluginUrl.href);
importHref(pluginUrl, resolve, reject);
}),
// Timeout after 3s
new Promise(r => timerId = setTimeout(r, 3000)),
])
.finally(() => {
if (timerId) clearTimeout(timerId);
});
}
/**
* Get plugin URLs with element and module definitions.
*
* @param {string} name Endpoint name.
* @param {?{
* type: (string|undefined),
* moduleName: (string|undefined)
* }} opt_options
* @return {!Array<!Promise<void>>}
*/
getAndImportPlugins(name, opt_options) {
return Promise.all(
this.getPlugins(name, opt_options).map(pluginUrl => {
if (this._importedUrls.has(pluginUrl.href)) {
return Promise.resolve();
}
// TODO: we will deprecate html plugins entirely
// for now, keep the original behavior and import
// only for html ones
if (pluginUrl && pluginUrl.pathname.endsWith('.html')) {
return this.importUrl(pluginUrl);
} else {
return Promise.resolve();
}
})
);
}
}
// TODO(dmfilippov): Convert to service and add to appContext
export let pluginEndpoints = new GrPluginEndpoints();
export function _testOnly_resetEndpoints() {
pluginEndpoints = new GrPluginEndpoints();
}

223
polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-plugin-endpoints.ts Normal file
View File

@@ -0,0 +1,223 @@
/**
* @license
* Copyright (C) 2017 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 {importHref} from '../../../scripts/import-href';
type Callback = (value: any) => void;
interface ModuleInfo {
moduleName: string;
// TODO(TS): Convert type to GrPlugin.
plugin: any;
pluginUrl: URL;
type?: string;
// TODO(TS): Convert type to GrDomHook.
domHook: any;
slot?: string;
}
interface Options {
endpoint: string;
dynamicEndpoint?: string;
slot?: string;
type?: string;
moduleName?: string;
// TODO(TS): Convert type to GrDomHook.
domHook?: any;
}
export class GrPluginEndpoints {
private readonly _endpoints = new Map<string, ModuleInfo[]>();
private readonly _callbacks = new Map<string, ((value: any) => void)[]>();
private readonly _dynamicPlugins = new Map<string, Set<string>>();
private readonly _importedUrls = new Set<string>();
private _pluginLoaded = false;
setPluginsReady() {
this._pluginLoaded = true;
}
onNewEndpoint(endpoint: string, callback: Callback) {
if (!this._callbacks.has(endpoint)) {
this._callbacks.set(endpoint, []);
}
this._callbacks.get(endpoint)!.push(callback);
}
onDetachedEndpoint(endpoint: string, callback: Callback) {
if (this._callbacks.has(endpoint)) {
const filteredCallbacks = this._callbacks
.get(endpoint)!
.filter((cb: Callback) => cb !== callback);
this._callbacks.set(endpoint, filteredCallbacks);
}
}
_getOrCreateModuleInfo(plugin: any, opts: Options): ModuleInfo {
const {endpoint, slot, type, moduleName, domHook} = opts;
const existingModule = this._endpoints
.get(endpoint!)!
.find(
(info: ModuleInfo) =>
info.plugin === plugin &&
info.moduleName === moduleName &&
info.domHook === domHook &&
info.slot === slot
);
if (existingModule) {
return existingModule;
} else {
const newModule: ModuleInfo = {
moduleName: moduleName!,
plugin,
pluginUrl: plugin._url,
type,
domHook,
slot,
};
this._endpoints.get(endpoint!)!.push(newModule);
return newModule;
}
}
/**
* Register a plugin to an endpoint.
*
* Dynamic plugins are registered to a specific prefix, such as
* 'change-list-header'. These plugins are then fetched by prefix to determine
* which endpoints to dynamically add to the page.
*
* @param {Object} plugin
* @param {Object} opts
*/
registerModule(plugin: any, opts: Options) {
const endpoint = opts.endpoint!;
const dynamicEndpoint = opts.dynamicEndpoint;
if (dynamicEndpoint) {
if (!this._dynamicPlugins.has(dynamicEndpoint)) {
this._dynamicPlugins.set(dynamicEndpoint, new Set());
}
this._dynamicPlugins.get(dynamicEndpoint)!.add(endpoint);
}
if (!this._endpoints.has(endpoint)) {
this._endpoints.set(endpoint, []);
}
const moduleInfo = this._getOrCreateModuleInfo(plugin, opts);
// TODO: the logic below seems wrong when:
// multiple plugins register to the same endpoint
// one register before plugins ready
// the other done after, then only the later one will have the callbacks
// invoked.
if (this._pluginLoaded && this._callbacks.has(endpoint)) {
this._callbacks.get(endpoint)!.forEach(callback => callback(moduleInfo));
}
}
getDynamicEndpoints(dynamicEndpoint: string): string[] {
const plugins = this._dynamicPlugins.get(dynamicEndpoint);
if (!plugins) return [];
return Array.from(plugins);
}
/**
* Get detailed information about modules registered with an extension
* endpoint.
*/
getDetails(name: string, options?: Options): ModuleInfo[] {
const type = options && options.type;
const moduleName = options && options.moduleName;
if (!this._endpoints.has(name)) {
return [];
} else {
return this._endpoints
.get(name)!
.filter(
(item: ModuleInfo) =>
(!type || item.type === type) &&
(!moduleName || moduleName === item.moduleName)
);
}
}
/**
* Get detailed module names for instantiating at the endpoint.
*/
getModules(name: string, options?: Options): string[] {
const modulesData = this.getDetails(name, options);
if (!modulesData.length) {
return [];
}
return modulesData.map(m => m.moduleName);
}
/**
* Get plugin URLs with element and module definitions.
*/
getPlugins(name: string, options?: Options): URL[] {
const modulesData = this.getDetails(name, options);
if (!modulesData.length) {
return [];
}
return Array.from(new Set(modulesData.map(m => m.pluginUrl)));
}
importUrl(pluginUrl: URL) {
let timerId: any;
return Promise.race([
new Promise((resolve, reject) => {
this._importedUrls.add(pluginUrl.href);
importHref(pluginUrl.href, resolve, reject);
}),
// Timeout after 3s
new Promise(r => (timerId = setTimeout(r, 3000))),
]).finally(() => {
if (timerId) clearTimeout(timerId);
});
}
/**
* Get plugin URLs with element and module definitions.
*/
getAndImportPlugins(name: string, options?: Options) {
return Promise.all(
this.getPlugins(name, options).map(pluginUrl => {
if (this._importedUrls.has(pluginUrl.href)) {
return Promise.resolve();
}
// TODO: we will deprecate html plugins entirely
// for now, keep the original behavior and import
// only for html ones
if (pluginUrl && pluginUrl.pathname.endsWith('.html')) {
return this.importUrl(pluginUrl);
} else {
return Promise.resolve();
}
})
);
}
}
// TODO(dmfilippov): Convert to service and add to appContext
export let pluginEndpoints = new GrPluginEndpoints();
export function _testOnly_resetEndpoints() {
pluginEndpoints = new GrPluginEndpoints();
}

45
polygerrit-ui/app/scripts/import-href.js → polygerrit-ui/app/scripts/import-href.ts
View File

@@ -20,11 +20,16 @@
// file contains code inside <script>...</script> and can't be imported
// in es6 modules.
interface ImportHrefElement extends HTMLLinkElement {
__dynamicImportLoaded?: boolean;
}
// run a callback when HTMLImports are ready or immediately if
// this api is not available.
function whenImportsReady(cb) {
if (window.HTMLImports) {
HTMLImports.whenReady(cb);
function whenImportsReady(cb: () => void) {
const win = window as Window;
if (win.HTMLImports) {
win.HTMLImports.whenReady(cb);
} else {
cb();
}
@@ -39,37 +44,43 @@ function whenImportsReady(cb) {
* element will contain the imported document contents.
*
* @memberof Polymer
* @param {string} href URL to document to load.
* @param {?function(!Event):void=} onload Callback to notify when an import successfully
* @param href URL to document to load.
* @param onload Callback to notify when an import successfully
* loaded.
* @param {?function(!ErrorEvent):void=} onerror Callback to notify when an import
* @param onerror Callback to notify when an import
* unsuccessfully loaded.
* @param {boolean=} optAsync True if the import should be loaded `async`.
* @param async True if the import should be loaded `async`.
* Defaults to `false`.
* @return {!HTMLLinkElement} The link element for the URL to be loaded.
* @return The link element for the URL to be loaded.
*/
export function importHref(href, onload, onerror, optAsync) {
let link = /** @type {HTMLLinkElement} */
(document.head.querySelector('link[href="' + href + '"][import-href]'));
export function importHref(
href: string,
onload: (e: Event) => void,
onerror: (e: Event) => void,
async = false
): HTMLLinkElement {
let link = document.head.querySelector(
'link[href="' + href + '"][import-href]'
) as ImportHrefElement;
if (!link) {
link = /** @type {HTMLLinkElement} */ (document.createElement('link'));
link = document.createElement('link') as ImportHrefElement;
link.rel = 'import';
link.href = href;
link.setAttribute('import-href', '');
}
// always ensure link has `async` attribute if user specified one,
// even if it was previously not async. This is considered less confusing.
if (optAsync) {
if (async) {
link.setAttribute('async', '');
}
// NOTE: the link may now be in 3 states: (1) pending insertion,
// (2) inflight, (3) already loaded. In each case, we need to add
// event listeners to process callbacks.
const cleanup = function() {
const cleanup = function () {
link.removeEventListener('load', loadListener);
link.removeEventListener('error', errorListener);
};
const loadListener = function(event) {
const loadListener = function (event: Event) {
cleanup();
// In case of a successful load, cache the load event on the link so
// that it can be used to short-circuit this method in the future when
@@ -81,7 +92,7 @@ export function importHref(href, onload, onerror, optAsync) {
});
}
};
const errorListener = function(event) {
const errorListener = function (event: Event) {
cleanup();
// In case of an error, remove the link from the document so that it
// will be automatically created again the next time `importHref` is
@@ -97,7 +108,7 @@ export function importHref(href, onload, onerror, optAsync) {
};
link.addEventListener('load', loadListener);
link.addEventListener('error', errorListener);
if (link.parentNode == null) {
if (link.parentNode === null) {
document.head.appendChild(link);
// if the link already loaded, dispatch a fake load event
// so that listeners are called and get a proper event argument.

0
polygerrit-ui/app/services/gr-reporting/gr-reporting_mock.js → polygerrit-ui/app/services/gr-reporting/gr-reporting_mock.ts
View File

2
polygerrit-ui/app/test/test-app-context-init.js
View File

@@ -17,7 +17,7 @@
// Init app context before any other imports
import {initAppContext} from '../services/app-context-init.js';
import {grReportingMock} from '../services/gr-reporting/gr-reporting_mock';
import {grReportingMock} from '../services/gr-reporting/gr-reporting_mock.js';
import {appContext} from '../services/app-context.js';
initAppContext();

1
polygerrit-ui/app/types/globals.ts
View File

@@ -22,6 +22,7 @@ declare global {
ShadyCSS?: {
getComputedStyleValue(el: Element, name: string): string;
};
HTMLImports?: {whenReady: (cb: () => void) => void};
}
interface Performance {