@lvce-editor/shared-process 0.33.3 → 0.33.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/shared-process",
-  "version": "0.33.3",
+  "version": "0.33.5",
   "main": "index.js",
   "type": "module",
   "keywords": [
@@ -17,9 +17,9 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@lvce-editor/assert": "^1.2.0",
-    "@lvce-editor/extension-host-helper-process": "0.33.3",
-    "@lvce-editor/ipc": "^10.0.4",
+    "@lvce-editor/assert": "^1.3.0",
+    "@lvce-editor/extension-host-helper-process": "0.33.5",
+    "@lvce-editor/ipc": "^10.2.1",
     "@lvce-editor/json-rpc": "^3.0.0",
     "@lvce-editor/jsonc-parser": "^1.4.0",
     "@lvce-editor/pretty-error": "^1.6.0",
@@ -35,6 +35,7 @@
     "@lvce-editor/typescript-compile-process": "^1.2.0",
     "@lvce-editor/pty-host": "^2.0.0",
     "@lvce-editor/embeds-process": "^1.5.0",
+    "@lvce-editor/preview-process": "^2.7.0",
     "open": "^10.1.0",
     "tail": "^2.2.6",
     "tmp-promise": "^3.0.3",

package/src/parts/ContentSecurityPolicyDocument/ContentSecurityPolicyDocument.js

@@ -1,22 +1,35 @@
 import * as GetContentSecurityPolicy from '../GetContentSecurityPolicy/GetContentSecurityPolicy.js';
+import * as GetGitpodPreviewUrl from '../GetGitpodPreviewUrl/GetGitpodPreviewUrl.js';
 import * as IsElectron from '../IsElectron/IsElectron.js';
 import * as IsGitpod from '../IsGitpod/IsGitpod.js';
-const getGitpodPreviewUrl = (port) => {
-    const workspaceId = process.env.GITPOD_WORKSPACE_ID;
-    const cluster = process.env.GITPOD_WORKSPACE_CLUSTER_HOST;
-    const url = `https://${port}-${workspaceId}.${cluster}`;
-    return url;
+import * as Scheme from '../Scheme/Scheme.js';
+const getFrameSrc = () => {
+    // TODO make ports configurable
+    if (IsGitpod.isGitpod) {
+        return [`frame-src 'self' ${GetGitpodPreviewUrl.getGitpodPreviewUrl(3001)} ${GetGitpodPreviewUrl.getGitpodPreviewUrl(3002)}`];
+    }
+    if (IsElectron.isElectron) {
+        return [`frame-src ${Scheme.WebView}:`];
+    }
+    return [`frame-src 'self' http://localhost:3001 http://localhost:3002`];
+};
+const getManifestSrc = () => {
+    if (IsElectron.isElectron) {
+        return [];
+    }
+    return [`manifest-src 'self'`];
+};
+const getFrameAncestors = () => {
+    return [`frame-ancestors 'none'`];
 };
 export const value = GetContentSecurityPolicy.getContentSecurityPolicy([
     `default-src 'none'`,
     `font-src 'self'`,
-    `img-src 'self' https: data:`,
+    `img-src 'self' https: data:`, // TODO maybe disallow https and data images
     `media-src 'self'`,
     `script-src 'self'`,
     `style-src 'self'`,
-    `frame-ancestors 'none' `,
-    IsGitpod.isGitpod
-        ? `frame-src 'self' ${getGitpodPreviewUrl(3001)} ${getGitpodPreviewUrl(3002)}`
-        : `frame-src 'self' http://localhost:3001 http://localhost:3002`,
-    ...(IsElectron.isElectron ? [] : [`manifest-src 'self'`]),
+    ...getFrameAncestors(),
+    ...getFrameSrc(),
+    ...getManifestSrc(),
 ]);

package/src/parts/GetElectronFileResponse/GetElectronFileResponse.js

@@ -1,4 +1,4 @@
-import { stat } from 'fs/promises';
+import { stat } from 'node:fs/promises';
 import * as GetElectronFileResponseAbsolutePath from '../GetElectronFileResponseAbsolutePath/GetElectronFileResponseAbsolutePath.js';
 import * as GetElectronFileResponseContent from '../GetElectronFileResponseContent/GetElectronFileResponseContent.js';
 import * as GetElectronFileResponseRelativePath from '../GetElectronFileResponseRelativePath/GetElectronFileResponseRelativePath.js';
@@ -7,27 +7,35 @@ import * as GetHeaders from '../GetHeaders/GetHeaders.js';
 import * as GetNotFoundResponse from '../GetNotFoundResponse/GetNotFoundResponse.js';
 import * as GetNotModifiedResponse from '../GetNotModifiedResponse/GetNotModifiedResponse.js';
 import * as GetServerErrorResponse from '../GetServerErrorResponse/GetServerErrorResponse.js';
+import * as HttpHeader from '../HttpHeader/HttpHeader.js';
 import * as HttpStatusCode from '../HttpStatusCode/HttpStatusCode.js';
 import * as IsEnoentError from '../IsEnoentError/IsEnoentError.js';
 import * as Logger from '../Logger/Logger.js';
+// TODO maybe handle app responses and webview responses separately
+// maybe send webview requests directly to preview process
 export const getElectronFileResponse = async (url, request) => {
     try {
         const pathName = GetElectronFileResponseRelativePath.getElectronFileResponseRelativePath(url);
-        const absolutePath = GetElectronFileResponseAbsolutePath.getElectronFileResponseAbsolutePath(pathName);
+        let absolutePath = GetElectronFileResponseAbsolutePath.getElectronFileResponseAbsolutePath(pathName);
         let etag;
+        // TODO when is there no request?
         if (request) {
-            const stats = await stat(absolutePath);
+            let stats = await stat(absolutePath);
+            if (stats.isDirectory()) {
+                absolutePath += '/index.html';
+                stats = await stat(absolutePath);
+            }
             etag = GetEtag.getEtag(stats);
-            if (request.headers['if-none-match'] === etag) {
+            if (request.headers[HttpHeader.IfNotMatch] === etag) {
                 const headers = GetHeaders.getHeaders(absolutePath, pathName);
                 return GetNotModifiedResponse.getNotModifiedResponse(headers);
             }
         }
         const content = await GetElectronFileResponseContent.getElectronFileResponseContent(request, absolutePath, url);
         const headers = GetHeaders.getHeaders(absolutePath, pathName);
-        headers['Cache-Control'] = 'public, max-age=0, must-revalidate';
+        headers[HttpHeader.CacheControl] = 'public, max-age=0, must-revalidate';
         if (etag) {
-            headers['Etag'] = etag;
+            headers[HttpHeader.Etag] = etag;
         }
         return {
             body: content,

package/src/parts/GetElectronFileResponseAbsolutePath/GetElectronFileResponseAbsolutePath.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'node:url';
 import * as Path from '../Path/Path.js';
 import * as Platform from '../Platform/Platform.js';
 import * as Root from '../Root/Root.js';
+// TODO clean up this code
 export const getElectronFileResponseAbsolutePath = (pathName) => {
     // TODO remove if/else in prod (use replacement)
     if (pathName === `/` || pathName.startsWith(`/?`)) {
@@ -30,5 +31,9 @@ export const getElectronFileResponseAbsolutePath = (pathName) => {
         const processExplorerThemeCss = join(tmpdir(), 'process-explorer-theme.css');
         return processExplorerThemeCss;
     }
+    // TODO move this to preview process
+    if (pathName.startsWith('/home')) {
+        return pathName;
+    }
     return Path.join(Root.root, 'static', pathName);
 };

package/src/parts/GetElectronFileResponseRelativePath/GetElectronFileResponseRelativePath.js

@@ -1,12 +1,30 @@
 import * as Platform from '../Platform/Platform.js';
+import * as Scheme from '../Scheme/Scheme.js';
 const { scheme } = Platform;
 const prefix = `${scheme}://-`;
 const prefixLength = prefix.length;
+const webViewPrefix = `${Scheme.WebView}://-`;
+const webViewPrefixLength = webViewPrefix.length;
 export const getElectronFileResponseRelativePath = (requestUrl) => {
+    if (requestUrl.startsWith(prefix)) {
+        // TODO only support reading from app root and extensions
+        // maybe add a separate protocol for extensions (e.g. lvce-remote)
+        const decoded = decodeURI(requestUrl);
+        const pathName = decoded.slice(prefixLength);
+        return pathName;
+    }
+    if (requestUrl.startsWith(webViewPrefix)) {
+        // TODO group this by extension so that
+        // extension-a can only access resources in extension-a folder and
+        // extension-b can only access resources in extension-b folder
+        const decoded = decodeURI(requestUrl);
+        const pathName = decoded.slice(webViewPrefixLength);
+        return pathName;
+    }
     if (requestUrl.startsWith('/')) {
+        // TODO this should not be supported anymore and could probably be removed
         return requestUrl;
     }
-    const decoded = decodeURI(requestUrl);
-    const pathName = decoded.slice(prefixLength);
-    return pathName;
+    console.log({ requestUrl });
+    return '';
 };

package/src/parts/GetGitpodPreviewUrl/GetGitpodPreviewUrl.js

@@ -0,0 +1,6 @@
+export const getGitpodPreviewUrl = (port) => {
+    const workspaceId = process.env.GITPOD_WORKSPACE_ID;
+    const cluster = process.env.GITPOD_WORKSPACE_CLUSTER_HOST;
+    const url = `https://${port}-${workspaceId}.${cluster}`;
+    return url;
+};

package/src/parts/LaunchPreviewProcess/LaunchPreviewProcess.js

@@ -0,0 +1,23 @@
+import * as HandleIpc from '../HandleIpc/HandleIpc.js';
+import * as IpcParent from '../IpcParent/IpcParent.js';
+import * as IpcParentType from '../IpcParentType/IpcParentType.js';
+import * as IsElectron from '../IsElectron/IsElectron.js';
+import * as PreviewProcessPath from '../PreviewProcessPath/PreviewProcessPath.js';
+const getMethod = (isElectron) => {
+    if (isElectron) {
+        return IpcParentType.ElectronUtilityProcess;
+    }
+    return IpcParentType.NodeForkedProcess;
+};
+export const launchPreviewProcess = async () => {
+    const method = getMethod(IsElectron.isElectron);
+    const previewProcess = await IpcParent.create({
+        method,
+        path: PreviewProcessPath.previewProcessPath,
+        argv: [],
+        stdio: 'inherit',
+        name: 'Preview Process',
+    });
+    HandleIpc.handleIpc(previewProcess);
+    return previewProcess;
+};

package/src/parts/ModuleMap/ModuleMap.js

@@ -279,8 +279,10 @@ export const getModuleId = (commandId) => {
             return ModuleId.FileWatcher;
         case 'Transferrable.transfer':
             return ModuleId.Transferrable;
+        case 'WebViewServer.create':
         case 'WebViewServer.start':
         case 'WebViewServer.setHandler':
+        case 'WebViewServer.registerProtocol':
             return ModuleId.WebViewServer;
         default:
             throw new CommandNotFoundError(commandId);

package/src/parts/Platform/Platform.js

@@ -41,9 +41,9 @@ export const getAppImageName = () => {
 export const getSetupName = () => {
     return 'Lvce-Setup';
 };
-export const version = '0.33.3';
-export const commit = '3581a11';
-export const date = '2024-08-26T21:23:31.000Z';
+export const version = '0.33.5';
+export const commit = 'aee872d';
+export const date = '2024-09-01T07:12:00.000Z';
 export const getVersion = () => {
     return version;
 };

package/src/parts/PreviewProcess/PreviewProcess.js

@@ -0,0 +1,22 @@
+import * as JsonRpc from '../JsonRpc/JsonRpc.js';
+import * as LaunchPreviewProcess from '../LaunchPreviewProcess/LaunchPreviewProcess.js';
+export const state = {
+    /**
+     * @type {any}
+     */
+    ipc: undefined,
+};
+export const getOrCreate = async () => {
+    if (!state.ipc) {
+        state.ipc = LaunchPreviewProcess.launchPreviewProcess();
+    }
+    return state.ipc;
+};
+export const invoke = async (method, ...params) => {
+    const ipc = await getOrCreate();
+    return JsonRpc.invoke(ipc, method, ...params);
+};
+export const invokeAndTransfer = async (method, ...params) => {
+    const ipc = await getOrCreate();
+    return JsonRpc.invokeAndTransfer(ipc, method, ...params);
+};

package/src/parts/PreviewProcessPath/PreviewProcessPath.js

@@ -0,0 +1,2 @@
+import * as ResolveBin from '../ResolveBin/ResolveBin.js';
+export const previewProcessPath = ResolveBin.resolveBin('@lvce-editor/preview-process');

package/src/parts/Scheme/Scheme.js

@@ -0,0 +1 @@
+export const WebView = 'lvce-oss-webview';

package/src/parts/WebViewServer/WebViewServer.ipc.js

@@ -2,5 +2,7 @@ import * as WebViewServer from '../WebViewServer/WebViewServer.js';
 export const name = 'WebViewServer';
 export const Commands = {
     start: WebViewServer.start,
+    create: WebViewServer.create,
     setHandler: WebViewServer.setHandler,
+    registerProtocol: WebViewServer.registerProtocol,
 };

package/src/parts/WebViewServer/WebViewServer.js

@@ -1,21 +1,26 @@
-import * as CreateWebViewServer from '../CreateWebViewServer/CreateWebViewServer.js';
-import * as CreateWebViewServerHandler from '../CreateWebViewServerHandler/CreateWebViewServerHandler.js';
-const state = {
-    /**
-     * @type {any }
-     */
-    promise: undefined,
+import * as PreviewProcess from '../PreviewProcess/PreviewProcess.js';
+import * as ParentIpc from '../ParentIpc/ParentIpc.js';
+import * as GetPortTuple from '../GetPortTuple/GetPortTuple.js';
+export const registerProtocol = async () => {
+    // TODO only do this once
+    // TODO send messageport to proview process
+    // TODO send other messageport to parent process
+    console.time('get-ports');
+    const { port1, port2 } = await GetPortTuple.getPortTuple();
+    console.timeEnd('get-ports');
+    console.time('register-protocol');
+    await ParentIpc.invokeAndTransfer('ElectronSession.registerWebviewProtocol', port1);
+    console.timeEnd('register-protocol');
+    console.time('handle-port');
+    await PreviewProcess.invokeAndTransfer('HandleElectronMessagePort.handleElectronMessagePort', port2);
+    console.timeEnd('handle-port');
 };
-// TODO move webview preview
-// server into separate process
-export const start = async (port) => {
-    if (!state.promise) {
-        state.promise = CreateWebViewServer.createWebViewServer(port);
-    }
-    return state.promise;
+export const create = async (previewId) => {
+    await PreviewProcess.invoke('WebViewServer.create', previewId);
 };
-export const setHandler = async (frameAncestors, webViewRoot) => {
-    const server = await state.promise;
-    const handler = CreateWebViewServerHandler.createHandler(frameAncestors, webViewRoot);
-    server.setHandler(handler);
+export const start = async (previewId, port) => {
+    await PreviewProcess.invoke('WebViewServer.start', previewId, port);
+};
+export const setHandler = async (previewId, frameAncestors, webViewRoot) => {
+    await PreviewProcess.invoke('WebViewServer.setHandler', previewId, frameAncestors, webViewRoot);
 };

package/src/parts/CreateWebViewServer/CreateWebViewServer.js

@@ -1,24 +0,0 @@
-import { VError } from '@lvce-editor/verror';
-import { createServer } from 'node:http';
-import * as Promises from '../Promises/Promises.js';
-export const createWebViewServer = async (port) => {
-    try {
-        const server = createServer();
-        const { resolve, promise } = Promises.withResolvers();
-        server.listen(port, resolve);
-        await promise;
-        return {
-            handler: undefined,
-            setHandler(handleRequest) {
-                if (this.handler) {
-                    return;
-                }
-                this.handler = this.handler;
-                server.on('request', handleRequest);
-            },
-        };
-    }
-    catch (error) {
-        throw new VError(error, `Failed to start webview server`);
-    }
-};

package/src/parts/CreateWebViewServerHandler/CreateWebViewServerHandler.js

@@ -1,105 +0,0 @@
-import { createReadStream } from 'node:fs';
-import { extname } from 'node:path';
-import { pipeline } from 'node:stream/promises';
-import { fileURLToPath } from 'node:url';
-import * as GetContentSecurityPolicy from '../GetContentSecurityPolicy/GetContentSecurityPolicy.js';
-import * as SetHeaders from '../SetHeaders/SetHeaders.js';
-import * as PreviewInjectedCode from '../PreviewInjectedCode/PreviewInjectedCode.js';
-import { readFile } from 'node:fs/promises';
-const getPathName = (request) => {
-    const { pathname } = new URL(request.url || '', `https://${request.headers.host}`);
-    return pathname;
-};
-const textMimeType = {
-    '.html': 'text/html',
-    '.js': 'text/javascript',
-    '.ts': 'text/javascript',
-    '.mjs': 'text/javascript',
-    '.json': 'application/json',
-    '.css': 'text/css',
-    '.svg': 'image/svg+xml',
-    '.avif': 'image/avif',
-    '.woff': 'application/font-woff',
-    '.ttf': 'font/ttf',
-    '.png': 'image/png',
-    '.jpe': 'image/jpg',
-    '.ico': 'image/x-icon',
-    '.jpeg': 'image/jpg',
-    '.jpg': 'image/jpg',
-    '.webp': 'image/webp',
-};
-const getContentType = (filePath) => {
-    return textMimeType[extname(filePath)] || 'text/plain';
-};
-const injectPreviewScript = (html) => {
-    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;
-};
-const handleIndexHtml = async (response, filePath, frameAncestors) => {
-    try {
-        const csp = GetContentSecurityPolicy.getContentSecurityPolicy([`default-src 'none'`, `script-src 'self'`, `frame-ancestors ${frameAncestors}`]);
-        const contentType = getContentType(filePath);
-        const content = await readFile(filePath, 'utf8');
-        SetHeaders.setHeaders(response, {
-            'Cross-Origin-Resource-Policy': 'cross-origin',
-            'Cross-Origin-Embedder-Policy': 'require-corp',
-            'Content-Security-Policy': csp,
-            'Content-Type': contentType,
-        });
-        const newContent = injectPreviewScript(content);
-        response.end(newContent);
-    }
-    catch (error) {
-        console.error(`[preview-server] ${error}`);
-    }
-};
-const handleOther = async (response, filePath) => {
-    try {
-        const contentType = getContentType(filePath);
-        // TODO figure out which of these headers are actually needed
-        SetHeaders.setHeaders(response, {
-            'Cross-Origin-Resource-Policy': 'cross-origin',
-            'Cross-Origin-Embedder-Policy': 'require-corp',
-            'Access-Control-Allow-Origin': '*',
-            'Content-Type': contentType,
-        });
-        await pipeline(createReadStream(filePath), response);
-    }
-    catch (error) {
-        console.error(error);
-        response.end(`[preview-server] ${error}`);
-    }
-};
-const handlePreviewInjected = (response) => {
-    try {
-        const injectedCode = PreviewInjectedCode.injectedCode;
-        const contentType = getContentType('/test/file.js');
-        SetHeaders.setHeaders(response, {
-            'Content-Type': contentType,
-        });
-        response.end(injectedCode);
-    }
-    catch (error) {
-        console.error(`[preview-server] ${error}`);
-    }
-};
-export const createHandler = (frameAncestors, webViewRoot) => {
-    const handleRequest = async (request, response) => {
-        let pathName = getPathName(request);
-        if (pathName === '/') {
-            pathName += 'index.html';
-        }
-        const filePath = fileURLToPath(`file://${webViewRoot}${pathName}`);
-        const isHtml = filePath.endsWith('index.html');
-        if (isHtml) {
-            return handleIndexHtml(response, filePath, frameAncestors);
-        }
-        if (filePath.endsWith('preview-injected.js')) {
-            return handlePreviewInjected(response);
-        }
-        return handleOther(response, filePath);
-    };
-    return handleRequest;
-};

package/src/parts/PreviewInjectedCode/PreviewInjectedCode.js

@@ -1,74 +0,0 @@
-export const injectedCode = `
-let commandMap = {}
-let port
-const callbacks = Object.create(null)
-
-
-const isJsonRpcResponse = message => {
-  return 'result' in message || 'error' in message
-}
-
-const handleMessage = async (event) => {
-  const message = event.data
-  if(isJsonRpcResponse(message)){
-    const fn = callbacks[message.id]
-    fn(message.result)
-    return
-  }
-  const { method, params } = message
-  const fn = commandMap[method]
-  if(!fn){
-    throw new Error("command not found \${method}")
-  }
-  const result = await fn(...params)
-}
-
-const handleFirstMessage = (event) => {
-  const message = event.data
-  port = message.params[0]
-  port.onmessage = handleMessage
-  port.postMessage('ready')
-}
-
-window.addEventListener('message', handleFirstMessage, {
-  once: true,
-})
-
-const withResolvers = () => {
-  let _resolve
-  const promise = new Promise(resolve => {
-    _resolve = resolve
-  })
-  return {
-    resolve: _resolve,
-    promise
-  }
-}
-
-const registerPromise = () => {
-  const id = 1
-  const {resolve, promise} = withResolvers()
-  callbacks[id] = { resolve }
-  return {
-    id, promise
-  }
-}
-
-globalThis.lvceRpc = (value) => {
-  commandMap = value
-  return {
-    async invoke(method, ...params){
-      const {id, promise } = registerPromise()
-      port.postMessage({
-        jsonrpc: '2.0',
-        id,
-        method,
-        params
-      })
-      const response = await promise
-      // TODO unwrap jsonrpc result
-      return response
-    }
-  }
-}
-`;