@lvce-editor/shared-process 0.32.0 → 0.32.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/shared-process",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "main": "index.js",
   "type": "module",
   "keywords": [
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@lvce-editor/assert": "^1.2.0",
-    "@lvce-editor/extension-host-helper-process": "0.32.0",
+    "@lvce-editor/extension-host-helper-process": "0.32.2",
     "@lvce-editor/ipc": "^9.4.0",
     "@lvce-editor/json-rpc": "^1.4.0",
     "@lvce-editor/jsonc-parser": "^1.4.0",

package/src/parts/ContentSecurityPolicyDocument/ContentSecurityPolicyDocument.js

@@ -1,5 +1,12 @@
 import * as GetContentSecurityPolicy from '../GetContentSecurityPolicy/GetContentSecurityPolicy.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;
+};
 export const value = GetContentSecurityPolicy.getContentSecurityPolicy([
     `default-src 'none'`,
     `font-src 'self'`,
@@ -7,6 +14,9 @@ export const value = GetContentSecurityPolicy.getContentSecurityPolicy([
     `media-src 'self'`,
     `script-src 'self'`,
     `style-src 'self'`,
-    `frame-src 'self' http://localhost:3001`,
+    `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'`]),
 ]);

package/src/parts/CreateWebViewServer/CreateWebViewServer.js

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,105 @@
+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/ExtensionManagement/ExtensionManagement.ipc.js

@@ -9,6 +9,7 @@ export const Commands = {
     'ExtensionHost.getIconThemeJson': ExtensionHostIconTheme.getIconTheme,
     'ExtensionHost.getLanguageConfiguration': ExtensionHostLanguages.getLanguageConfiguration,
     'ExtensionHost.getLanguages': ExtensionHostLanguages.getLanguages,
+    'ExtensionHost.getWebViews': ExtensionHostLanguages.getWebViews,
     'ExtensionHost.watchColorTheme': ExtensionHostColorTheme.watch,
     'ExtensionManagement.disable': ExtensionManagement.disable,
     'ExtensionManagement.enable': ExtensionManagement.enable,

package/src/parts/ExtensionManagement/ExtensionManagementLanguages.js

@@ -38,6 +38,25 @@ export const getLanguages = async () => {
     const languages = getLanguagesFromExtensions(extensions);
     return languages;
 };
+const getWebViewsFromExtensions = (extensions) => {
+    const webViews = [];
+    for (const extension of extensions) {
+        if (extension && extension.webViews) {
+            for (const webView of extension.webViews) {
+                webViews.push({
+                    id: webView.id,
+                    path: join(extension.path, webView.path),
+                });
+            }
+        }
+    }
+    return webViews;
+};
+export const getWebViews = async () => {
+    const extensions = await ExtensionManagement.getExtensions();
+    const webViews = getWebViewsFromExtensions(extensions);
+    return webViews;
+};
 const getLanguageConfigurationPathFromExtensions = (extensions, languageId) => {
     for (const extension of extensions) {
         if (extension.languages && extension.languages) {

package/src/parts/GetAppWindowOptions/GetAppWindowOptions.js

@@ -6,7 +6,7 @@ export const getAppWindowOptions = (preferences, screenWidth, screenHeight) => {
     const titleBarStyle = titleBarPreference === 'custom' ? 'hidden' : undefined;
     const zoomLevelPreference = preferences['window.zoomLevel'];
     const zoomLevel = zoomLevelPreference;
-    const windowControlsOverlayPreference = (Platform.isWindows || Platform.isMacOs) && preferences['window.controlsOverlay.enabled'];
+    const windowControlsOverlayPreference = (Platform.isWindows || Platform.isMacOs || Platform.isLinux) && preferences['window.controlsOverlay.enabled'];
     const titleBarOverlay = windowControlsOverlayPreference
         ? {
             color: '#1e2324',

package/src/parts/GetTestRequestResponse/GetTestRequestResponse.js

@@ -5,6 +5,7 @@ import * as CreateTestOverview from '../CreateTestOverview/CreateTestOverview.js
 import * as CrossOriginEmbedderPolicy from '../CrossOriginEmbedderPolicy/CrossOriginEmbedderPolicy.js';
 import * as CrossOriginOpenerPolicy from '../CrossOriginOpenerPolicy/CrossOriginOpenerPolicy.js';
 import * as CrossOriginResourcePolicy from '../CrossOriginResourcePolicy/CrossOriginResourcePolicy.js';
+import * as ContentSecurityPolicyDocument from '../ContentSecurityPolicyDocument/ContentSecurityPolicyDocument.js';
 import * as GetPathName from '../GetPathName/GetPathName.js';
 import * as GetTestPath from '../GetTestPath/GetTestPath.js';
 import * as HttpHeader from '../HttpHeader/HttpHeader.js';
@@ -21,6 +22,7 @@ export const getTestRequestResponse = async (request, indexHtmlPath) => {
                 headers: {
                     [HttpHeader.CrossOriginEmbedderPolicy]: CrossOriginEmbedderPolicy.value,
                     [HttpHeader.CrossOriginResourcePolicy]: CrossOriginResourcePolicy.value,
+                    [HttpHeader.ContentSecurityPolicy]: ContentSecurityPolicyDocument.value,
                 },
             },
         };

package/src/parts/IsGitpod/IsGitpod.js

@@ -0,0 +1,2 @@
+import * as Env from '../Env/Env.js';
+export const isGitpod = Boolean(Env.env.GITPOD_WORKSPACE_ID);

package/src/parts/Module/Module.js

@@ -129,6 +129,8 @@ export const load = (moduleId) => {
             return import('../HandleMessagePortForSearchProcess/HandleMessagePortForSearchProcess.ipc.js');
         case ModuleId.FileWatcher:
             return import('../FileWatcher/FileWatcher.ipc.js');
+        case ModuleId.WebViewServer:
+            return import('../WebViewServer/WebViewServer.ipc.js');
         default:
             throw new Error(`module ${moduleId} not found`);
     }

package/src/parts/ModuleId/ModuleId.js

@@ -67,3 +67,5 @@ export const HandleMessagePortForEmbedsProcess = 72;
 export const HandleMessagePortForProcessExplorer = 73;
 export const HandleMessagePortForSearchProcess = 74;
 export const FileWatcher = 75;
+export const WebViewServer = 76;
+export const Transferrable = 77;

package/src/parts/ModuleMap/ModuleMap.js

@@ -121,6 +121,7 @@ export const getModuleId = (commandId) => {
         case 'ExtensionHost.getIconThemeJson':
         case 'ExtensionHost.getLanguageConfiguration':
         case 'ExtensionHost.getLanguages':
+        case 'ExtensionHost.getWebViews':
         case 'ExtensionHost.watchColorTheme':
         case 'ExtensionManagement.disable':
         case 'ExtensionManagement.enable':
@@ -276,6 +277,11 @@ export const getModuleId = (commandId) => {
             return ModuleId.HandleMessagePortForSearchProcess;
         case 'FileWatcher.watch':
             return ModuleId.FileWatcher;
+        case 'Transferrable.transfer':
+            return ModuleId.Transferrable;
+        case 'WebViewServer.start':
+        case 'WebViewServer.setHandler':
+            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.32.0';
-export const commit = 'e432b14';
-export const date = '2024-08-15T19:40:42.000Z';
+export const version = '0.32.2';
+export const commit = '93e00a3';
+export const date = '2024-08-20T21:05:50.000Z';
 export const getVersion = () => {
     return version;
 };

package/src/parts/PlatformPaths/PlatformPaths.js

@@ -55,6 +55,9 @@ export const getExtensionHostHelperProcessPath = async () => {
     const { extensionHostHelperProcessPath } = await import('@lvce-editor/extension-host-helper-process');
     return extensionHostHelperProcessPath;
 };
+export const getWebViewRoot = (relativePath) => {
+    return Path.join(Root.root, relativePath);
+};
 export const getRecentlyOpenedPath = () => {
     return Path.join(cacheDir, 'recently-opened.json');
 };

package/src/parts/PreviewInjectedCode/PreviewInjectedCode.js

@@ -0,0 +1,74 @@
+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
+    }
+  }
+}
+`;

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

@@ -0,0 +1,6 @@
+import * as WebViewServer from '../WebViewServer/WebViewServer.js';
+export const name = 'WebViewServer';
+export const Commands = {
+    start: WebViewServer.start,
+    setHandler: WebViewServer.setHandler,
+};

package/src/parts/WebViewServer/WebViewServer.js

@@ -0,0 +1,21 @@
+import * as CreateWebViewServer from '../CreateWebViewServer/CreateWebViewServer.js';
+import * as CreateWebViewServerHandler from '../CreateWebViewServerHandler/CreateWebViewServerHandler.js';
+const state = {
+    /**
+     * @type {any }
+     */
+    promise: undefined,
+};
+// 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 setHandler = async (frameAncestors, webViewRoot) => {
+    const server = await state.promise;
+    const handler = CreateWebViewServerHandler.createHandler(frameAncestors, webViewRoot);
+    server.setHandler(handler);
+};