rename to html

Author: Shane Osbourne

packages/special-pages/pages/duckplayer/src/js/index.js

@@ -36,7 +36,7 @@ import {
     MessagingContext, TestTransportConfig
 } from '../../../../../messaging/index.js'
 import { DuckPlayerPageMessages, UserValues } from './messages'
-import { escapeHTML } from '../../../../../../src/dom-utils'
+import { html } from '../../../../../../src/dom-utils'
 
 // for docs
 export { DuckPlayerPageMessages, UserValues }
@@ -108,7 +108,7 @@ const VideoPlayer = {
      * Show an error instead of the video player iframe
      */
     showVideoError: (errorMessage) => {
-        VideoPlayer.playerContainer().innerHTML = escapeHTML`<div class="player-error"><b>ERROR:</b> <span class="player-error-message"></span></div>`.toString()
+        VideoPlayer.playerContainer().innerHTML = html`<div class="player-error"><b>ERROR:</b> <span class="player-error-message"></span></div>`.toString()
 
         // @ts-expect-error - Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
         document.querySelector('.player-error-message').textContent = errorMessage

src/dom-utils.js

@@ -52,6 +52,6 @@ class Template {
     }
 }
 
-export function escapeHTML (strings, ...values) {
+export function html (strings, ...values) {
     return new Template(strings, values)
 }

src/features/duckplayer/components/ddg-video-overlay.js

@@ -3,7 +3,7 @@ import dax from '../assets/dax.svg'
 import { i18n } from '../text.js'
 import { appendImageAsBackground } from '../util.js'
 import { VideoOverlayManager } from '../video-overlay-manager.js'
-import { escapeHTML } from '../../../dom-utils.js'
+import { html } from '../../../dom-utils.js'
 
 /**
  * The custom element that we use to present our UI elements
@@ -55,8 +55,8 @@ export class DDGVideoOverlay extends HTMLElement {
     createOverlay () {
         const overlayElement = document.createElement('div')
         overlayElement.classList.add('ddg-video-player-overlay')
-        const svgIcon = escapeHTML([dax], [])
-        overlayElement.innerHTML = escapeHTML`
+        const svgIcon = html([dax], [])
+        overlayElement.innerHTML = html`
             <div class="ddg-vpo-bg"></div>
             <div class="ddg-vpo-content">
                 <div class="ddg-eyeball">${svgIcon}</div>

src/features/duckplayer/icon-overlay.js

@@ -2,7 +2,7 @@ import { addTrustedEventListener, appendElement, VideoParams } from './util'
 import dax from './assets/dax.svg'
 import { i18n } from './text.js'
 import { OpenInDuckPlayerMsg } from './overlay-messages.js'
-import { escapeHTML } from '../../dom-utils.js'
+import { html } from '../../dom-utils.js'
 
 export const IconOverlay = {
     /**
@@ -42,8 +42,8 @@ export const IconOverlay = {
 
         overlayElement.setAttribute('class', 'ddg-overlay' + (extraClass ? ' ' + extraClass : ''))
         overlayElement.setAttribute('data-size', size)
-        const svgIcon = escapeHTML([dax], [])
-        overlayElement.innerHTML = escapeHTML`
+        const svgIcon = html([dax], [])
+        overlayElement.innerHTML = html`
                 <a class="ddg-play-privately" href="#">
                     <div class="ddg-dax">
                     ${svgIcon}

unit-test/dom-utils.js

@@ -1,17 +1,17 @@
-import { escapeHTML } from '../src/dom-utils.js'
+import { html } from '../src/dom-utils.js'
 
 describe('dom-utils.js - escapedTemplate', () => {
     const tests = [
-        { title: 'single', input: () => escapeHTML`<p>Foo</p>`, expected: '<p>Foo</p>' },
-        { title: 'siblings', input: () => escapeHTML`<p>Foo</p><p>Bar</p>`, expected: '<p>Foo</p><p>Bar</p>' },
-        { title: 'nested', input: () => escapeHTML`<div>${escapeHTML`<p>${'Nested'}</p>`}</div>`, expected: '<div><p>Nested</p></div>' },
+        { title: 'single', input: () => html`<p>Foo</p>`, expected: '<p>Foo</p>' },
+        { title: 'siblings', input: () => html`<p>Foo</p><p>Bar</p>`, expected: '<p>Foo</p><p>Bar</p>' },
+        { title: 'nested', input: () => html`<div>${html`<p>${'Nested'}</p>`}</div>`, expected: '<div><p>Nested</p></div>' },
         {
             title: 'loop',
             input: () => {
                 const items = [{ value: 'foo' }, { value: 'bar' }]
-                return escapeHTML`<h1>Heading</h1>
+                return html`<h1>Heading</h1>
                     <ul>
-                        ${items.map(item => escapeHTML`<li>${item.value}</li>`)};
+                        ${items.map(item => html`<li>${item.value}</li>`)};
                     </ul>`
             },
             expected: `<h1>Heading</h1>