feature: inject preview script into html file (#26)

src/parts/CreateWebViewServerHandler/CreateWebViewServerHandler.ts

@@ -4,19 +4,12 @@ import * as GetPathName from '../GetPathName/GetPathName.ts'
 import * as GetResponse from '../GetResponse/GetResponse.ts'
 
 export const createHandler = (frameAncestors: string, webViewRoot: string) => {
-  const handleRequest = async (
-    request: IncomingMessage,
-    response: ServerResponse,
-  ): Promise<void> => {
+  const handleRequest = async (request: IncomingMessage, response: ServerResponse): Promise<void> => {
     let pathName = GetPathName.getPathName(request)
     if (pathName === '/') {
       pathName += 'index.html'
     }
-    const result = await GetResponse.getResponse(
-      pathName,
-      frameAncestors,
-      webViewRoot,
-    )
+    const result = await GetResponse.getResponse(pathName, frameAncestors, webViewRoot)
 
     if (!result?.body) {
       response.end('not found')

src/parts/GetResponse/GetResponse.ts

@@ -3,11 +3,7 @@ import * as HandleIndexHtml from '../HandleIndexHtml/HandleIndexHtml.ts'
 import * as HandleOther from '../HandleOther/HandleOther.ts'
 import * as HandlePreviewInjected from '../HandlePreviewInjected/HandlePreviewInjected.ts'
 
-export const getResponse = async (
-  pathName: string,
-  frameAncestors: string,
-  webViewRoot: string,
-): Promise<Response> => {
+export const getResponse = async (pathName: string, frameAncestors: string, webViewRoot: string): Promise<Response> => {
   const filePath = fileURLToPath(`file://${webViewRoot}${pathName}`)
   const isHtml = filePath.endsWith('index.html')
   if (isHtml) {

src/parts/HandleIndexHtml/HandleIndexHtml.ts

@@ -1,23 +1,9 @@
 import { readFile } from 'node:fs/promises'
 import * as GetContentSecurityPolicy from '../GetContentSecurityPolicy/GetContentSecurityPolicy.ts'
 import * as GetContentType from '../GetContentType/GetContentType.ts'
+import * as InjectPreviewScript from '../InjectPreviewScript/InjectPreviewScript.ts'
 
-const injectPreviewScript = (html: string) => {
-  const injectedCode =
-    '<script type="module" src="/preview-injected.js"></script>\n'
-  const titleEndIndex = html.indexOf('</title>')
-  const newHtml =
-    html.slice(0, titleEndIndex + '</title>'.length) +
-    '\n' +
-    injectedCode +
-    html.slice(titleEndIndex)
-  return newHtml
-}
-
-export const handleIndexHtml = async (
-  filePath: string,
-  frameAncestors: string,
-): Promise<Response> => {
+export const handleIndexHtml = async (filePath: string, frameAncestors: string): Promise<Response> => {
   try {
     const csp = GetContentSecurityPolicy.getContentSecurityPolicy([
       "default-src 'none'",
@@ -26,7 +12,7 @@ export const handleIndexHtml = async (
     ])
     const contentType = GetContentType.getContentType(filePath)
     const content = await readFile(filePath, 'utf8')
-    const newContent = injectPreviewScript(content)
+    const newContent = InjectPreviewScript.injectPreviewScript(content)
     return new Response(newContent, {
       headers: {
         'Cross-Origin-Resource-Policy': 'cross-origin',

src/parts/InjectPreviewScript/InjectPreviewScript.ts

@@ -0,0 +1,6 @@
+export const injectPreviewScript = (html: string) => {
+  const injectedCode = '<script type="module" src="/preview-injected.js"></script>\n'
+  const titleEndIndex = html.indexOf('</title>')
+  const newHtml = html.slice(0, titleEndIndex + '</title>'.length) + '\n' + injectedCode + html.slice(titleEndIndex)
+  return newHtml
+}

src/parts/WebViewProtocol/WebViewProtocol.ts

@@ -1,8 +1,11 @@
+import { readFile } from 'node:fs/promises'
 import * as FileSystem from '../FileSystem/FileSystem.ts'
 import * as GetElectronFileResponseAbsolutePath from '../GetElectronFileResponseAbsolutePath/GetElectronFileResponseAbsolutePath.ts'
 import * as GetHeaders from '../GetHeaders/GetHeaders.ts'
 import * as HttpMethod from '../HttpMethod/HttpMethod.ts'
 import * as HttpStatusCode from '../HttpStatusCode/HttpStatusCode.ts'
+import * as InjectPreviewScript from '../InjectPreviewScript/InjectPreviewScript.ts'
+import * as PreviewInjectedCode from '../PreviewInjectedCode/PreviewInjectedCode.ts'
 
 const defaultHeaders = {
   'Cross-Origin-Resource-Policy': 'cross-origin',
@@ -30,6 +33,29 @@ export const getResponse = async (method: string, url: string) => {
       },
     }
   }
+  if (absolutePath.endsWith('/index.html')) {
+    const content = await readFile(absolutePath, 'utf8')
+    const newContent = InjectPreviewScript.injectPreviewScript(content)
+    const headers = GetHeaders.getHeaders(absolutePath)
+    return {
+      body: newContent,
+      init: {
+        status: HttpStatusCode.Ok,
+        headers,
+      },
+    }
+  }
+  if (url.endsWith('preview-injected.js')) {
+    const { injectedCode } = PreviewInjectedCode
+    const headers = GetHeaders.getHeaders('/test/file.js')
+    return {
+      body: injectedCode,
+      init: {
+        status: HttpStatusCode.Ok,
+        headers,
+      },
+    }
+  }
   const content = await FileSystem.readFile(absolutePath)
   const headers = GetHeaders.getHeaders(absolutePath)
   return {

test/WebViewProtocol.test.ts

@@ -30,16 +30,16 @@ test('method not allowed - post', async () => {
   })
 })
 
-test('get', async () => {
+test('get - css file', async () => {
   const method = HttpMethod.Get
-  const url = 'lvce-webview://-/test/media/'
+  const url = 'lvce-webview://-/test/media/index.css'
   jest.spyOn(FileSystem, 'readFile').mockResolvedValue(Buffer.from('a'))
   expect(await WebViewProtocol.getResponse(method, url)).toEqual({
     body: Buffer.from('a'),
     init: {
       status: HttpStatusCode.Ok,
       headers: {
-        'Content-Type': 'text/html',
+        'Content-Type': 'text/css',
         'Cross-Origin-Resource-Policy': 'cross-origin',
         'Cross-Origin-Embedder-Policy': 'require-corp',
       },