@lvce-editor/iframe-worker 5.5.0 → 5.7.0

package/dist/iframeWorkerMain.js

@@ -1108,9 +1108,13 @@ const getWebViewOrigin = (webViewPort, platform, webViewScheme, webViewId) => {
   }
 };
 
+const CrossOriginIsolated = 'cross-origin-isolated';
 const getIframePermissionPolicy = webView => {
   const extensionAllow = webView.allow || [];
-  return ['cross-origin-isolated', ...extensionAllow];
+  if (extensionAllow.includes(CrossOriginIsolated)) {
+    return extensionAllow;
+  }
+  return [CrossOriginIsolated, ...extensionAllow];
 };
 
 const getWebViews = async () => {
@@ -1158,6 +1162,9 @@ const getHost = () => {
 const getProtocol = () => {
   return location.protocol;
 };
+const getPort = () => {
+  return location.port;
+};
 
 const invoke$1 = async (method, ...params) => {
   return invoke$3('WebView.compatRendererProcessInvoke', method, ...params);
@@ -1299,7 +1306,111 @@ const create2 = async ({
   const origin = getWebViewOrigin(webViewPort, platform, webViewScheme, webViewId);
   const portType = '';
   await setPort(id, port1, origin, portType);
-  await invokeAndTransfer$1('ExtensionHostWebView.create', webViewId, port2, uri, id, origin);
+  await invokeAndTransfer$1('ExtensionHostWebView.create', webViewId, port2, uri, id, origin, webView);
+  const savedState = await getSavedWebViewState(webViewId);
+  await invoke$2('ExtensionHostWebView.load', webViewId, savedState);
+  return {
+    srcDoc,
+    iframeSrc,
+    sandbox,
+    portId,
+    origin,
+    csp: iframeCsp
+  };
+};
+
+const getPreviewServerId = () => {
+  // TODO
+  return 1;
+};
+
+const getWebViewId = (webViews, uri) => {
+  if (uri.startsWith('webview://')) {
+    const webViewId = uri.slice('webview://'.length);
+    return webViewId;
+  }
+  for (const webView of webViews) {
+    for (const selector of webView.selector || []) {
+      if (uri.endsWith(selector)) {
+        return webView.id;
+      }
+    }
+  }
+  return '';
+};
+
+const getWebViewPort = (platform, locationPort) => {
+  if (platform === Web) {
+    return locationPort;
+  }
+  // TODO make port configurable
+  return '3002';
+};
+
+const create3 = async ({
+  id,
+  uri,
+  isGitpod,
+  platform,
+  assetDir,
+  webViewScheme
+}) => {
+  let root = '';
+  if (platform === Remote) {
+    root = await invoke('Platform.getRoot');
+  }
+  const webViews = await getWebViews();
+  const webViewId = getWebViewId(webViews, uri);
+  const locationProtocol = getProtocol();
+  const locationHost = getHost();
+  const locationOrigin = getOrigin();
+  const locationPort = getPort();
+  const webViewPort = getWebViewPort(platform, locationPort);
+  const previewServerId = getPreviewServerId();
+  const iframeResult = getIframeSrc(webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform, assetDir, webViewScheme);
+  if (!iframeResult) {
+    return undefined;
+  }
+  const webView = getWebView(webViews, webViewId);
+
+  // TODO move all of this to iframe worker
+  const {
+    iframeSrc,
+    webViewRoot,
+    srcDoc,
+    iframeContent
+  } = iframeResult;
+  const frameAncestors = getWebViewFrameAncestors(locationProtocol, locationHost);
+  const frameTitle = getWebViewTitle(webView);
+  // TODO figure out order for events, e.g.
+  // 1. activate extension, create webview and ports in parallel
+  // 2. wait for webview to load (?)
+  // 3. setup extension host worker rpc
+  // 4. create webview in extension host worker and load content
+
+  const csp = getWebViewCsp(webView);
+  const sandbox = getIframeSandbox(webView, platform);
+  const permissionPolicy = getIframePermissionPolicy(webView);
+  const permissionPolicyString = permissionPolicy.join('; ');
+  const iframeCsp = platform === Web ? csp : '';
+  const credentialless = getCredentialLess(locationHost);
+  await invoke$3('ExtensionHostManagement.activateByEvent', `onWebView:${webViewId}`);
+  const {
+    port1,
+    port2
+  } = getPortTuple();
+  const portId = create$1();
+  await register(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, platform, webViewId);
+  await invoke$1('WebView.create', id, iframeSrc, sandbox, iframeCsp, credentialless, permissionPolicyString, frameTitle);
+
+  // TODO maybe iframe waitForLoad is not needed. since it cannot be used detect errors anyway
+  // and causes flash of unstyled content, maybe a better way would be to just send the
+  // port and wait for the first port message
+  await invoke$1('WebView.load', id);
+  const origin = getWebViewOrigin(webViewPort, platform, webViewScheme, webViewId);
+  const portType = '';
+  await setPort(id, port1, origin, portType);
+  await invokeAndTransfer$1('ExtensionHostWebView.create', webViewId, port2, uri, id, origin, webView);
   const savedState = await getSavedWebViewState(webViewId);
   await invoke$2('ExtensionHostWebView.load', webViewId, savedState);
   return {
@@ -1313,7 +1424,8 @@ const create2 = async ({
 };
 
 const commandMap = {
-  'WebView.create2': create2
+  'WebView.create2': create2,
+  'WebView.create3': create3
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/iframe-worker",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "description": "Web Worker to manage creation and lifecycle of iframes in Lvce Editor",
   "main": "dist/iframeWorkerMain.js",
   "type": "module",