2021-03-06 17:01:39 +00:00
|
|
|
import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
|
|
|
|
import { event, EventEmitter } from '../../internal/event';
|
2021-02-26 14:09:13 +00:00
|
|
|
import styles from 'sass:./include.scss';
|
2020-10-16 13:16:43 +00:00
|
|
|
import { requestInclude } from './request';
|
2020-10-16 12:57:02 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @since 2.0
|
2020-12-09 13:17:49 +00:00
|
|
|
* @status stable
|
2020-10-16 12:57:02 +00:00
|
|
|
*/
|
2021-03-06 17:01:39 +00:00
|
|
|
@customElement('sl-include')
|
|
|
|
export class SlInclude extends LitElement {
|
|
|
|
static styles = unsafeCSS(styles);
|
2020-10-16 12:57:02 +00:00
|
|
|
|
|
|
|
/** The location of the HTML file to include. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property() src: string;
|
2020-10-16 12:57:02 +00:00
|
|
|
|
|
|
|
/** The fetch mode to use. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property() mode: 'cors' | 'no-cors' | 'same-origin' = 'cors';
|
2020-10-16 12:57:02 +00:00
|
|
|
|
2020-12-08 14:18:29 +00:00
|
|
|
/**
|
|
|
|
* Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this
|
|
|
|
* option can lead to XSS vulnerabilities in your app!
|
|
|
|
*/
|
2021-03-06 17:01:39 +00:00
|
|
|
@property({ attribute: 'allow-scripts', type: Boolean }) allowScripts = false;
|
2020-10-16 12:57:02 +00:00
|
|
|
|
2021-03-06 17:01:39 +00:00
|
|
|
/** Emitted when the included file is loaded. */
|
|
|
|
@event('sl-load') slLoad: EventEmitter<void>;
|
|
|
|
|
|
|
|
/** Emitted when the included file fails to load due to an error. */
|
|
|
|
@event('sl-error') slError: EventEmitter<{ status: number }>;
|
|
|
|
|
|
|
|
connectedCallback() {
|
|
|
|
super.connectedCallback();
|
2020-10-16 12:57:02 +00:00
|
|
|
this.loadSource();
|
|
|
|
}
|
|
|
|
|
2021-03-06 17:01:39 +00:00
|
|
|
update(changedProps: Map<string, any>) {
|
|
|
|
super.update(changedProps);
|
|
|
|
|
|
|
|
if (changedProps.has('src')) {
|
|
|
|
this.loadSource();
|
|
|
|
}
|
2020-10-16 12:57:02 +00:00
|
|
|
}
|
|
|
|
|
2020-12-08 14:18:29 +00:00
|
|
|
executeScript(script: HTMLScriptElement) {
|
|
|
|
// Create a copy of the script and swap it out so the browser executes it
|
|
|
|
const newScript = document.createElement('script');
|
|
|
|
[...script.attributes].map(attr => newScript.setAttribute(attr.name, attr.value));
|
|
|
|
newScript.textContent = script.textContent;
|
2021-02-26 14:09:13 +00:00
|
|
|
script.parentNode!.replaceChild(newScript, script);
|
2020-12-08 14:18:29 +00:00
|
|
|
}
|
|
|
|
|
2020-10-16 12:57:02 +00:00
|
|
|
async loadSource() {
|
2020-10-16 13:29:07 +00:00
|
|
|
try {
|
|
|
|
const src = this.src;
|
|
|
|
const file = await requestInclude(src, this.mode);
|
2020-10-16 12:57:02 +00:00
|
|
|
|
2020-10-16 13:29:07 +00:00
|
|
|
// If the src changed since the request started do nothing, otherwise we risk overwriting a subsequent response
|
|
|
|
if (src !== this.src) {
|
|
|
|
return;
|
|
|
|
}
|
2020-10-16 12:57:02 +00:00
|
|
|
|
2021-02-26 14:09:13 +00:00
|
|
|
if (!file) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-10-16 13:29:07 +00:00
|
|
|
if (!file.ok) {
|
2021-03-06 17:01:39 +00:00
|
|
|
this.slError.emit({ detail: { status: file.status } });
|
2020-10-16 13:29:07 +00:00
|
|
|
return;
|
|
|
|
}
|
2020-10-16 12:57:02 +00:00
|
|
|
|
2021-02-26 14:09:13 +00:00
|
|
|
this.innerHTML = file.html;
|
2020-12-08 14:18:29 +00:00
|
|
|
|
|
|
|
if (this.allowScripts) {
|
2021-02-26 14:09:13 +00:00
|
|
|
[...this.querySelectorAll('script')].map(script => this.executeScript(script));
|
2020-12-08 14:18:29 +00:00
|
|
|
}
|
|
|
|
|
2021-03-06 17:01:39 +00:00
|
|
|
this.slLoad.emit();
|
2020-10-16 13:29:07 +00:00
|
|
|
} catch {
|
2021-03-06 17:01:39 +00:00
|
|
|
this.slError.emit({ detail: { status: -1 } });
|
2020-10-16 13:29:07 +00:00
|
|
|
}
|
2020-10-16 12:57:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2021-03-06 17:01:39 +00:00
|
|
|
return html`<slot></slot>`;
|
2020-10-16 12:57:02 +00:00
|
|
|
}
|
|
|
|
}
|