Merge changes Ife0bef08,I3c3d5da1

* 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
10 changed files with 449 additions and 447 deletions

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}}));
};

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}})
);
}
}

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;
};

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;
}
}

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();
}

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();
}

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.

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();

View File

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