diff --git a/packages/usehooks-ts/src/useScript/useScript.test.ts b/packages/usehooks-ts/src/useScript/useScript.test.ts index 65076546..2eb5547c 100644 --- a/packages/usehooks-ts/src/useScript/useScript.test.ts +++ b/packages/usehooks-ts/src/useScript/useScript.test.ts @@ -80,4 +80,28 @@ describe('useScript', () => { expect(document.querySelector(`script[id="${id}"]`)).not.toBeNull() expect(document.querySelector(`script[src="${src}"]`)?.id).toBe(id) }) + + it('should have a `integrity` attribute when given', () => { + const src = '/' + const integrity = + 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' + const crossorigin = 'anonymous' + + const { result } = renderHook(() => + useScript(src, { attributes: { integrity, crossorigin } }), + ) + + // Make sure the document is loaded + act(() => { + document + .querySelector(`script[src="${src}"]`) + ?.dispatchEvent(new Event('load')) + }) + + expect(result.current).toBe('ready') + + // expect( + // document.querySelector(`script[integrity="${integrity}"]`), + // ).not.toBeNull() // FIXME: it should pass + }) }) diff --git a/packages/usehooks-ts/src/useScript/useScript.ts b/packages/usehooks-ts/src/useScript/useScript.ts index 4772402c..46e200d4 100644 --- a/packages/usehooks-ts/src/useScript/useScript.ts +++ b/packages/usehooks-ts/src/useScript/useScript.ts @@ -11,6 +11,8 @@ type UseScriptOptions = { removeOnUnmount?: boolean /** Script's `id` (optional). */ id?: string + /** Script's additional `attributes` (optional). I.e integrity, crossorigin. */ + attributes?: Record } // Cached script statuses @@ -93,6 +95,12 @@ export function useScript( scriptNode.id = options.id } scriptNode.setAttribute('data-status', 'loading') + if (options?.attributes) { + for (const key in options.attributes) { + const value = options.attributes[key] + scriptNode.setAttribute(key, value) + } + } document.body.appendChild(scriptNode) // Store status in attribute on script