| 27 | export type Props = ScriptProps |
| 28 | |
| 29 | const insertStylesheets = (stylesheets: string[]) => { |
| 30 | // Case 1: Styles for afterInteractive/lazyOnload with appDir injected via handleClientScriptLoad |
| 31 | // |
| 32 | // Using ReactDOM.preinit to feature detect appDir and inject styles |
| 33 | // Stylesheets might have already been loaded if initialized with Script component |
| 34 | // Re-inject styles here to handle scripts loaded via handleClientScriptLoad |
| 35 | // ReactDOM.preinit handles dedup and ensures the styles are loaded only once |
| 36 | if (ReactDOM.preinit) { |
| 37 | stylesheets.forEach((stylesheet: string) => { |
| 38 | ReactDOM.preinit(stylesheet, { as: 'style' }) |
| 39 | }) |
| 40 | |
| 41 | return |
| 42 | } |
| 43 | |
| 44 | // Case 2: Styles for afterInteractive/lazyOnload with pages injected via handleClientScriptLoad |
| 45 | // |
| 46 | // We use this function to load styles when appdir is not detected |
| 47 | // TODO: Use React float APIs to load styles once available for pages dir |
| 48 | if (typeof window !== 'undefined') { |
| 49 | let head = document.head |
| 50 | stylesheets.forEach((stylesheet: string) => { |
| 51 | let link = document.createElement('link') |
| 52 | |
| 53 | link.type = 'text/css' |
| 54 | link.rel = 'stylesheet' |
| 55 | link.href = stylesheet |
| 56 | |
| 57 | head.appendChild(link) |
| 58 | }) |
| 59 | } |
| 60 | } |
| 61 | |
| 62 | const loadScript = (props: ScriptProps): void => { |
| 63 | const { |