Make setCSPTrustedTypesPolicy static function

Co-authored-by: Matt Langlois <[email protected]>
Co-authored-by: Lucas Garron <[email protected]>

Author: 3 people

src/index.ts

@@ -20,12 +20,13 @@ interface CSPTrustedHTMLToStringable {
   toString: () => string
 }
 let cspTrustedTypesPolicyPromise: Promise<CSPTrustedTypesPolicy> | null = null
-// Passing `null` clears the policy.
-export function setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | Promise<CSPTrustedTypesPolicy> | null): void {
-  cspTrustedTypesPolicyPromise = policy === null ? policy : Promise.resolve(policy)
-}
 
 export default class IncludeFragmentElement extends HTMLElement {
+  // Passing `null` clears the policy.
+  static setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | Promise<CSPTrustedTypesPolicy> | null): void {
+    cspTrustedTypesPolicyPromise = policy === null ? policy : Promise.resolve(policy)
+  }
+
   static get observedAttributes(): string[] {
     return ['src', 'loading']
   }
@@ -62,7 +63,8 @@ export default class IncludeFragmentElement extends HTMLElement {
     this.setAttribute('accept', val)
   }
 
-  // TODO: Should this return a TrustedHTML if available, or always a string?
+  // We will return string or error for API backwards compatibility. We can consider
+  // returning TrustedHTML in the future.
   get data(): Promise<string | Error> {
     return this.#getStringOrErrorData()
   }

test/test.js

@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import {setCSPTrustedTypesPolicy} from '../src/index.ts'
+import {default as IncludeFragmentElement} from '../src/index.ts'
 
 let count
 const responses = {
@@ -648,12 +648,12 @@ suite('include-fragment-element', function () {
 
   suite('CSP trusted types', () => {
     teardown(() => {
-      setCSPTrustedTypesPolicy(null)
+      IncludeFragmentElement.setCSPTrustedTypesPolicy(null)
     })
 
     test('can set a pass-through mock CSP trusted types policy', async function () {
       let policyCalled = false
-      setCSPTrustedTypesPolicy({
+      IncludeFragmentElement.setCSPTrustedTypesPolicy({
         createHTML: htmlText => {
           policyCalled = true
           return htmlText
@@ -670,7 +670,7 @@ suite('include-fragment-element', function () {
 
     test('can set and clear a mutating mock CSP trusted types policy', async function () {
       let policyCalled = false
-      setCSPTrustedTypesPolicy({
+      IncludeFragmentElement.setCSPTrustedTypesPolicy({
         createHTML: () => {
           policyCalled = true
           return '<b>replacement</b>'
@@ -683,7 +683,7 @@ suite('include-fragment-element', function () {
       assert.equal('<b>replacement</b>', data)
       assert.ok(policyCalled)
 
-      setCSPTrustedTypesPolicy(null)
+      IncludeFragmentElement.setCSPTrustedTypesPolicy(null)
       const el2 = document.createElement('include-fragment')
       el2.src = '/hello'
       const data2 = await el2.data
@@ -699,7 +699,7 @@ suite('include-fragment-element', function () {
           return htmlText
         }
       })
-      setCSPTrustedTypesPolicy(policy)
+      IncludeFragmentElement.setCSPTrustedTypesPolicy(policy)
 
       const el = document.createElement('include-fragment')
       el.src = '/hello'
@@ -709,7 +709,7 @@ suite('include-fragment-element', function () {
     })
 
     test('can reject data using a mock CSP trusted types policy', async function () {
-      setCSPTrustedTypesPolicy({
+      IncludeFragmentElement.setCSPTrustedTypesPolicy({
         createHTML: () => {
           throw new Error('Rejected data!')
         }
@@ -726,7 +726,7 @@ suite('include-fragment-element', function () {
     })
 
     test('can access headers using a mock CSP trusted types policy', async function () {
-      setCSPTrustedTypesPolicy({
+      IncludeFragmentElement.setCSPTrustedTypesPolicy({
         createHTML: (htmlText, response) => {
           if (response.headers.get('X-Server-Sanitized') !== 'sanitized=true') {
             // Note: this will reject the contents, but the error may be caught before it shows in the JS console.