@lvce-editor/iframe-worker 5.6.0 → 5.8.0

package/dist/iframeWorkerMain.js

@@ -893,6 +893,16 @@ const createLocalHostUrl = (locationProtocol, locationHost, isGitpod, webViewPor
   return `http://localhost:${webViewPort}`;
 };
 
+const getIframeSrcRemoteBaseUrl = (webViewRoot, locationOrigin) => {
+  if (webViewRoot && (webViewRoot.startsWith('http:') || webViewRoot.startsWith('https:'))) {
+    if (webViewRoot.startsWith(locationOrigin)) {
+      return webViewRoot.slice(locationOrigin.length);
+    }
+    return webViewRoot;
+  }
+  return '';
+};
+
 const getWebView = (webViews, webViewId) => {
   for (const webView of webViews) {
     if (webView.id === webViewId) {
@@ -948,7 +958,7 @@ const getWebViewUri = (webViews, webViewId) => {
   return webViewPath;
 };
 
-const getIframeSrcRemote = (webViews, webViewPort, webViewId, locationProtocol, locationHost, isGitpod, root, platform$1 = platform, assetDir, webViewScheme) => {
+const getIframeSrcRemote = (webViews, webViewPort, webViewId, locationProtocol, locationOrigin, locationHost, isGitpod, root, platform$1 = platform, assetDir, webViewScheme) => {
   const webView = getWebView(webViews, webViewId);
   const webViewUri = getWebViewUri(webViews, webViewId);
   if (!webViewUri) {
@@ -965,12 +975,12 @@ const getIframeSrcRemote = (webViews, webViewPort, webViewId, locationProtocol,
     webViewRoot = webView.uri;
     iframeSrc = createLocalHostUrl(locationProtocol, locationHost, isGitpod, webViewPort);
   }
-  const iframeContent = getWebViewHtml('', '', webView.elements, assetDir);
+  const baseUrl = getIframeSrcRemoteBaseUrl(webViewRoot, locationOrigin);
+  const iframeContent = getWebViewHtml(baseUrl, '', webView.elements, assetDir);
   // TODO either
   // - load webviews the same as in web using blob urls
   // - load webviews from a pattern like /webviews/:id/:fileName
   return {
-    srcDoc: '',
     iframeSrc,
     webViewRoot,
     iframeContent
@@ -1019,7 +1029,6 @@ const getIframeSrc$1 = (webView, locationOrigin, assetDir) => {
   if (srcHtml) {
     const blobUrl = getBlobUrl(srcHtml, 'text/html');
     return {
-      srcDoc: '',
       iframeSrc: blobUrl,
       webViewRoot: '',
       iframeContent: ''
@@ -1034,7 +1043,7 @@ const getIframeSrc = (webViews, webViewId, webViewPort, root, isGitpod, location
     if (platform === Web) {
       return getIframeSrc$1(webView, locationOrigin, assetDir);
     }
-    return getIframeSrcRemote(webViews, webViewPort, webViewId, locationProtocol, locationHost, isGitpod, root, platform, assetDir, webViewScheme);
+    return getIframeSrcRemote(webViews, webViewPort, webViewId, locationProtocol, locationOrigin, locationHost, isGitpod, root, platform, assetDir, webViewScheme);
   } catch (error) {
     throw new VError(error, `Failed to construct webview iframe src`);
   }
@@ -1162,6 +1171,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);
@@ -1270,7 +1282,6 @@ const create2 = async ({
   const {
     iframeSrc,
     webViewRoot,
-    srcDoc,
     iframeContent
   } = iframeResult;
   const frameAncestors = getWebViewFrameAncestors(locationProtocol, locationHost);
@@ -1307,7 +1318,108 @@ const create2 = async ({
   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,
+    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 {
     iframeSrc,
     sandbox,
     portId,
@@ -1317,7 +1429,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.6.0",
+  "version": "5.8.0",
   "description": "Web Worker to manage creation and lifecycle of iframes in Lvce Editor",
   "main": "dist/iframeWorkerMain.js",
   "type": "module",