Merge pull request #13 from github/feat-add-unsafe-html

feat: add unsafe-html directive

Author: keithamus

src/index.ts

@@ -1,3 +1,4 @@
 export {TemplateResult, html, render} from './html'
 export {isDirective, directive} from './directive'
 export {until} from './until'
+export {unsafeHTML} from './unsafe-html'

src/unsafe-html.ts

@@ -0,0 +1,11 @@
+import {directive} from './directive'
+import {NodeTemplatePart} from '@github/template-parts'
+import type {TemplatePart} from '@github/template-parts'
+
+export const unsafeHTML = directive((value: string) => (part: TemplatePart) => {
+  if (!(part instanceof NodeTemplatePart)) return
+  const template = document.createElement('template')
+  template.innerHTML = value
+  const fragment = document.importNode(template.content, true)
+  part.replace(...fragment.childNodes)
+})

test/unsafe-html.ts

@@ -0,0 +1,33 @@
+import {html, render, unsafeHTML} from '..'
+
+describe('unsafeHTML', () => {
+  it('renders basic text', async () => {
+    const surface = document.createElement('section')
+    render(html`<div>${unsafeHTML('Hello World')}</div>`, surface)
+    expect(surface.innerHTML).to.equal('<div>Hello World</div>')
+  })
+  it('disallows use inside of an attribute', () => {
+    const surface = document.createElement('section')
+    render(html`<div style="${unsafeHTML('Hello World')}"></div>`, surface)
+    expect(surface.innerHTML).to.equal('<div style=""></div>')
+  })
+  it('renders the given value as HTML', async () => {
+    const surface = document.createElement('section')
+    render(html`<div>${unsafeHTML('<span>Hello World</span>')}</div>`, surface)
+    expect(surface.innerHTML).to.equal('<div><span>Hello World</span></div>')
+  })
+  it('renders multiple children', async () => {
+    const surface = document.createElement('section')
+    render(html`<div>${unsafeHTML('<span>Hello</span><span>World</span>')}</div>`, surface)
+    expect(surface.innerHTML).to.equal('<div><span>Hello</span><span>World</span></div>')
+  })
+  it('updates correctly', async () => {
+    const surface = document.createElement('section')
+    const fn = name => html`<div>${unsafeHTML(`<span>Hello</span><span>${name}</span>`)}</div>`
+    render(fn('World'), surface)
+    expect(surface.innerHTML).to.equal('<div><span>Hello</span><span>World</span></div>')
+    render(fn('Universe'), surface)
+    render(fn('<a href="">Universe</a>'), surface)
+    expect(surface.innerHTML).to.equal('<div><span>Hello</span><span><a href="">Universe</a></span></div>')
+  })
+})