Move setCspTrustedPolicy into TemplateResult class

Author: rzhade3

README.md

@@ -248,10 +248,10 @@ render(html`<div>${until(request, timeout, loading)}</div>`)
 
 ### CSP Trusted Types
 
-You can call `setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null)` from JavaScript to set a [CSP trusted types policy](https://web.dev/trusted-types/), which can perform (synchronous) filtering or rejection of the rendered template:
+You can call `TemplateResult.setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null)` from JavaScript to set a [CSP trusted types policy](https://web.dev/trusted-types/), which can perform (synchronous) filtering or rejection of the rendered template:
 
 ```ts
-import {setCspTrustedTypePolicy} from "@github/jtml";
+import {TemplateResult} from "@github/jtml";
 import DOMPurify from "dompurify"; // Using https://github.com/cure53/DOMPurify
 
 // This policy removes all HTML markup except links.
@@ -264,11 +264,11 @@ const policy = trustedTypes.createPolicy("links-only", {
     });
   },
 });
-setCSPTrustedTypesPolicy(policy);
+TemplateResult.setCSPTrustedTypesPolicy(policy);
 ```
 
 Note that:
 
 - Only a single policy can be set, shared by all `render` and `unsafeHTML` calls.
-- You should call `setCSPTrustedTypesPolicy()` ahead of any other call of `@github/jtml` in your code.
+- You should call `TemplateResult.setCSPTrustedTypesPolicy()` ahead of any other call of `@github/jtml` in your code.
 - Not all browsers [support the trusted types API in JavaScript](https://caniuse.com/mdn-api_trustedtypes). You may want to use the [recommended tinyfill](https://github.com/w3c/trusted-types#tinyfill) to construct a policy without causing issues in other browsers.

src/index.ts

@@ -5,4 +5,3 @@ export {html} from './html.js'
 export {isDirective, directive} from './directive.js'
 export {until} from './until.js'
 export {unsafeHTML} from './unsafe-html.js'
-export {setCSPTrustedTypesPolicy} from './trusted-types.js'

src/template-result.ts

@@ -1,26 +1,41 @@
 import {TemplateInstance, NodeTemplatePart} from '@github/template-parts'
 import type {TemplateTypeInit} from '@github/template-parts'
-import {getCSPTrustedTypesPolicy} from './trusted-types.js'
 
 const templates = new WeakMap<TemplateStringsArray, HTMLTemplateElement>()
 const renderedTemplates = new WeakMap<Node | NodeTemplatePart, HTMLTemplateElement>()
 const renderedTemplateInstances = new WeakMap<Node | NodeTemplatePart, TemplateInstance>()
 
+interface CSPTrustedHTMLToStringable {
+  toString: () => string
+}
+
+interface CSPTrustedTypesPolicy {
+  createHTML: (s: string) => CSPTrustedHTMLToStringable
+}
+
 export class TemplateResult {
   constructor(
     public readonly strings: TemplateStringsArray,
     public readonly values: unknown[],
     public processor: TemplateTypeInit
   ) {}
 
+  static cspTrustedTypesPolicy: CSPTrustedTypesPolicy | null = null
+
+  static setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | null) {
+    TemplateResult.cspTrustedTypesPolicy = policy
+  }
+
   get template(): HTMLTemplateElement {
     if (templates.has(this.strings)) {
       return templates.get(this.strings)!
     } else {
       const template = document.createElement('template')
       const end = this.strings.length - 1
       const html = this.strings.reduce((str, cur, i) => str + cur + (i < end ? `{{ ${i} }}` : ''), '')
-      const trustedHtml = getCSPTrustedTypesPolicy() ? (getCSPTrustedTypesPolicy()?.createHTML(html) as string) : html
+      const trustedHtml = TemplateResult.cspTrustedTypesPolicy
+        ? (TemplateResult.cspTrustedTypesPolicy.createHTML(html) as string)
+        : html
       template.innerHTML = trustedHtml
       templates.set(this.strings, template)
       return template

src/trusted-types.ts

@@ -1,17 +0,0 @@
-interface CSPTrustedHTMLToStringable {
-  toString: () => string
-}
-
-interface CSPTrustedTypesPolicy {
-  createHTML: (s: string) => CSPTrustedHTMLToStringable
-}
-
-let cspTrustedTypesPolicy: CSPTrustedTypesPolicy | null = null
-
-export function getCSPTrustedTypesPolicy() {
-  return cspTrustedTypesPolicy
-}
-
-export function setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | null) {
-  cspTrustedTypesPolicy = policy
-}

src/unsafe-html.ts

@@ -1,12 +1,14 @@
 import {directive} from './directive.js'
 import {NodeTemplatePart} from '@github/template-parts'
 import type {TemplatePart} from '@github/template-parts'
-import {getCSPTrustedTypesPolicy} from './trusted-types.js'
+import {TemplateResult} from './template-result.js'
 
 export const unsafeHTML = directive((value: string) => (part: TemplatePart) => {
   if (!(part instanceof NodeTemplatePart)) return
   const template = document.createElement('template')
-  const trustedValue = getCSPTrustedTypesPolicy() ? (getCSPTrustedTypesPolicy()?.createHTML(value) as string) : value
+  const trustedValue = TemplateResult.cspTrustedTypesPolicy
+    ? (TemplateResult.cspTrustedTypesPolicy.createHTML(value) as string)
+    : value
   template.innerHTML = trustedValue
   const fragment = document.importNode(template.content, true)
   part.replace(...fragment.childNodes)

test/render.ts

@@ -1,5 +1,5 @@
 import {expect} from 'chai'
-import {html, render, setCSPTrustedTypesPolicy} from '../lib/index.js'
+import {html, render, TemplateResult} from '../lib/index.js'
 import type {TemplateResult} from '../lib/index.js'
 
 describe('render', () => {
@@ -9,7 +9,7 @@ describe('render', () => {
   })
 
   afterEach(() => {
-    setCSPTrustedTypesPolicy(null)
+    TemplateResult.setCSPTrustedTypesPolicy(null)
   })
 
   it('memoizes by TemplateResult#template, updating old templates with new values', () => {
@@ -64,7 +64,7 @@ describe('render', () => {
     it('respects a Trusted Types Policy if it is set', () => {
       let policyCalled = false
       const rewrittenFragment = '<div id="bar"></div>'
-      setCSPTrustedTypesPolicy({
+      TemplateResult.setCSPTrustedTypesPolicy({
         createHTML: (_html: string) => {
           policyCalled = true
           return rewrittenFragment

test/trusted-types.ts

@@ -1,10 +1,9 @@
 import {expect} from 'chai'
-import {setCSPTrustedTypesPolicy} from '../lib/index.js'
-import {getCSPTrustedTypesPolicy} from '../lib/trusted-types.js'
+import {TemplateResult} from '../lib/index.js'
 
 describe('trusted types', () => {
   after(() => {
-    setCSPTrustedTypesPolicy(null)
+    TemplateResult.setCSPTrustedTypesPolicy(null)
   })
 
   it('can set a CSP Trusted Types policy', () => {
@@ -13,8 +12,8 @@ describe('trusted types', () => {
         return htmlText
       }
     }
-    expect(getCSPTrustedTypesPolicy()).to.equal(null)
-    setCSPTrustedTypesPolicy(dummyPolicy)
-    expect(getCSPTrustedTypesPolicy()).to.equal(dummyPolicy)
+    expect(TemplateResult.cspTrustedTypesPolicy).to.equal(null)
+    TemplateResult.setCSPTrustedTypesPolicy(dummyPolicy)
+    expect(TemplateResult.cspTrustedTypesPolicy).to.equal(dummyPolicy)
   })
 })

test/unsafe-html.ts

@@ -1,12 +1,12 @@
 import {expect} from 'chai'
-import {html, render, setCSPTrustedTypesPolicy, unsafeHTML} from '../lib/index.js'
+import {html, render, TemplateResult, unsafeHTML} from '../lib/index.js'
 
 describe('unsafeHTML', () => {
   beforeEach(() => {
-    setCSPTrustedTypesPolicy(null)
+    TemplateResult.setCSPTrustedTypesPolicy(null)
   })
   afterEach(() => {
-    setCSPTrustedTypesPolicy(null)
+    TemplateResult.setCSPTrustedTypesPolicy(null)
   })
   it('renders basic text', async () => {
     const surface = document.createElement('section')
@@ -40,7 +40,7 @@ describe('unsafeHTML', () => {
   it('respects trusted types', async () => {
     let policyCalled = false
     const rewrittenFragment = '<div id="bar">This has been rewritten by Trusted Types.</div>'
-    setCSPTrustedTypesPolicy({
+    TemplateResult.setCSPTrustedTypesPolicy({
       createHTML: (_html: string) => {
         policyCalled = true
         return rewrittenFragment