@lvce-editor/iframe-worker 2.1.0 → 2.3.0

package/dist/iframeWorkerMain.js

@@ -1,15 +1,15 @@
 const Two = '2.0';
-const state = {
+const state$2 = {
   callbacks: Object.create(null)
 };
 const set = (id, fn) => {
-  state.callbacks[id] = fn;
+  state$2.callbacks[id] = fn;
 };
 const get = id => {
-  return state.callbacks[id];
+  return state$2.callbacks[id];
 };
 const remove = id => {
-  delete state.callbacks[id];
+  delete state$2.callbacks[id];
 };
 let id = 0;
 const create$3 = () => {
@@ -217,7 +217,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1$1 = (message, error) => {
+const create$1$2 = (message, error) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -228,9 +228,9 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1$1(message, errorProperty);
+  return create$1$2(message, errorProperty);
 };
-const create = (message, result) => {
+const create$4 = (message, result) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -239,7 +239,7 @@ const create = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create(message, resultProperty);
+  return create$4(message, resultProperty);
 };
 const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
   try {
@@ -328,15 +328,15 @@ const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
   const responseMessage = await promise;
   return unwrapJsonRpcResult(responseMessage);
 };
-const invoke = (ipc, method, ...params) => {
+const invoke$4 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
-const invokeAndTransfer = (ipc, method, ...params) => {
+const invokeAndTransfer$3 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
 const commands = Object.create(null);
-const register = commandMap => {
+const register$4 = commandMap => {
   Object.assign(commands, commandMap);
 };
 const getCommand = key => {
@@ -736,10 +736,10 @@ const IpcChildWithModuleWorkerAndMessagePort$1 = {
 const createRpc = ipc => {
   const rpc = {
     invoke(method, ...params) {
-      return invoke(ipc, method, ...params);
+      return invoke$4(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
-      return invokeAndTransfer(ipc, method, ...params);
+      return invokeAndTransfer$3(ipc, method, ...params);
     }
   };
   return rpc;
@@ -767,11 +767,11 @@ const listen$1 = async () => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create$1 = async ({
+const create$1$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
-  register(commandMap);
+  register$4(commandMap);
   const ipc = await listen$1();
   handleIpc(ipc);
   const rpc = createRpc(ipc);
@@ -779,7 +779,31 @@ const create$1 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$1
+  create: create$1$1
+};
+
+const state$1 = {
+  rpc: undefined
+};
+const invoke$3 = (method, ...params) => {
+  const rpc = state$1.rpc;
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const invokeAndTransfer$2 = (method, ...params) => {
+  const rpc = state$1.rpc;
+  // @ts-ignore
+  return rpc.invokeAndTransfer(method, ...params);
+};
+const setRpc = rpc => {
+  state$1.rpc = rpc;
+};
+
+const invoke$2 = async (method, ...params) => {
+  return invoke$3('WebView.compatExtensionHostWorkerInvoke', method, ...params);
+};
+const invokeAndTransfer$1 = async (method, ...params) => {
+  return invokeAndTransfer$2('WebView.compatExtensionHostWorkerInvokeAndTransfer', method, ...params);
 };
 
 const createUrl = (protocol, host) => {
@@ -896,19 +920,23 @@ const getWebViewUri = (webViews, webViewId) => {
   }
   return webViewPath;
 };
-const getIframeSrcRemote = (webViews, webViewPort, webViewId, locationProtocol, locationHost, isGitpod, root) => {
+const getIframeSrcRemote = (webViews, webViewPort, webViewId, locationProtocol, locationHost, isGitpod, root, platform$1 = platform) => {
   const webView = getWebView$1(webViews, webViewId);
   const webViewUri = getWebViewUri(webViews, webViewId);
+  console.log({
+    webViews,
+    webViewId
+  });
   if (!webViewUri) {
     return undefined;
   }
   let iframeSrc = webViewUri;
   let webViewRoot = webViewUri;
-  if (platform === Electron) {
+  if (platform$1 === Electron) {
     const relativePath = new URL(webViewUri).pathname.replace('/index.html', '');
     iframeSrc = `${WebView}://-${relativePath}/`;
     // TODO
-  } else if (platform === Remote) {
+  } else if (platform$1 === Remote) {
     const relativePath = new URL(webViewUri).pathname.replace('/index.html', '');
     if (webViewUri.startsWith('file://')) {
       // ignore
@@ -1043,10 +1071,10 @@ class VError extends Error {
   }
 }
 
-const getIframeSrc = (webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin) => {
+const getIframeSrc = (webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform$1 = platform) => {
   try {
     const webView = getWebView(webViews, webViewId);
-    if (platform === Web) {
+    if (platform$1 === Web) {
       return getIframeSrc$1(webView, locationOrigin);
     }
     return getIframeSrcRemote(webViews, webViewPort, webViewId, locationProtocol, locationHost, isGitpod, root);
@@ -1055,6 +1083,40 @@ const getIframeSrc = (webViews, webViewId, webViewPort, root, isGitpod, location
   }
 };
 
+const getPortTuple = () => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  return {
+    port1,
+    port2
+  };
+};
+
+const getJson = async () => {};
+
+const getSavedState = async () => {
+  const value = await getJson();
+  return value;
+};
+
+const getSavedWebViewState = async id => {
+  const states = await getSavedState();
+  if (!states) {
+    return undefined;
+  }
+  if (!Array.isArray(states)) {
+    return undefined;
+  }
+  for (const item of states) {
+    if (item && item.key && item.key === id && item.value && item.value.state) {
+      return item.value.state;
+    }
+  }
+  return undefined;
+};
+
 const SemiColon = ';';
 const Space = ' ';
 
@@ -1092,6 +1154,10 @@ const getWebViewOrigin = webViewPort => {
   return origin;
 };
 
+const getWebViews = async () => {
+  return invoke$3('WebView.getWebViews');
+};
+
 const AllowScripts = 'allow-scripts';
 const AllowSameOrigin = 'allow-same-origin';
 
@@ -1106,6 +1172,13 @@ const getIframeSandbox = (webView, platform) => {
   return [AllowScripts, AllowSameOrigin, ...extensionSandbox];
 };
 
+const state = {
+  id: 0
+};
+const create$1 = () => {
+  return ++state.id;
+};
+
 const getOrigin = () => {
   return location.origin;
 };
@@ -1116,7 +1189,154 @@ const getProtocol = () => {
   return location.protocol;
 };
 
+const invoke$1 = async (method, ...params) => {
+  return invoke$3('WebView.compatRendererProcessInvoke', method, ...params);
+};
+const invokeAndTransfer = async (method, ...params) => {
+  return invokeAndTransfer$2('WebView.compatRendererProcessInvokeAndTransfer', method, ...params);
+};
+
+const setPort = async (uid, port, origin, portType) => {
+  await invokeAndTransfer('WebView.setPort', uid, port, origin, portType);
+};
+
+const invoke = async (method, ...params) => {
+  return invoke$3('WebView.compatSharedProcessInvoke', method, ...params);
+};
+
+const registerProtocol = async () => {
+  await invoke('WebViewServer.registerProtocol');
+};
+const create = async previewServerId => {
+  await invoke('WebViewServer.create', previewServerId);
+};
+const start = async (previewServerId, webViewPort) => {
+  await invoke('WebViewServer.start', previewServerId, webViewPort);
+};
+const setHandler = async (previewServerId, frameAncestors, webViewRoot, contentSecurityPolicy, iframeContent) => {
+  await invoke('WebViewServer.setHandler', previewServerId, frameAncestors, webViewRoot, contentSecurityPolicy, iframeContent);
+};
+
+const register$3 = async previewServerId => {
+  await registerProtocol();
+  await create(previewServerId); // TODO move this up
+};
+
+const WebViewProtocolElectron = {
+  __proto__: null,
+  register: register$3
+};
+
+const register$2 = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent) => {
+  // TODO apply something similar for electron
+  // TODO pass webview root, so that only these resources can be accessed
+  // TODO pass csp configuration to server
+  // TODO pass coop / coep configuration to server
+  await create(previewServerId); // TODO move this up
+  await start(previewServerId, webViewPort); // TODO move this up
+  await setHandler(previewServerId, frameAncestors, webViewRoot, csp, iframeContent);
+  // TODO make this work in gitpod also
+};
+
+const WebViewProtocolRemote = {
+  __proto__: null,
+  register: register$2
+};
+
+const register$1 = async () => {
+  // noop
+};
+
+const WebViewProtocolWeb = {
+  __proto__: null,
+  register: register$1
+};
+
+const getModule = platform => {
+  switch (platform) {
+    case Remote:
+      return WebViewProtocolRemote;
+    case Electron:
+      return WebViewProtocolElectron;
+    case Web:
+    default:
+      return WebViewProtocolWeb;
+  }
+};
+const register = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent) => {
+  const module = getModule(platform);
+  return module.register(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent);
+};
+
+const create2 = async ({
+  id,
+  webViewPort,
+  webViewId,
+  previewServerId,
+  uri,
+  platform,
+  isGitpod
+}) => {
+  let root = '';
+  if (platform === Remote) {
+    root = await invoke('Platform.getRoot');
+  }
+  const webViews = await getWebViews();
+  const locationProtocol = getProtocol();
+  const locationHost = getHost();
+  const locationOrigin = getOrigin();
+  const iframeResult = getIframeSrc(webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform);
+  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);
+
+  // 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 iframeCsp = platform === Web ? csp : '';
+  const credentialless = true;
+  await invoke$3('ExtensionHostManagement.activateByEvent', `onWebView:${webViewId}`);
+  const {
+    port1,
+    port2
+  } = getPortTuple();
+  const portId = create$1();
+  await register(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent);
+  await invoke$1('WebView.create', id, iframeSrc, sandbox, iframeCsp, credentialless);
+  await invoke$1('WebView.load', id);
+  const origin = getWebViewOrigin(webViewPort);
+  const portType = '';
+  await setPort(id, port1, origin, portType);
+  await invokeAndTransfer$1('ExtensionHostWebView.create', webViewId, port2, uri, id, origin);
+  const savedState = await getSavedWebViewState(webViewId);
+  await invoke$2('ExtensionHostWebView.load', webViewId, savedState);
+  return {
+    srcDoc,
+    iframeSrc,
+    sandbox,
+    portId,
+    origin,
+    csp: iframeCsp
+  };
+};
+
 const commandMap = {
+  // deprecated
   'Location.getHost': getHost,
   'Location.getOrigin': getOrigin,
   'Location.getProtocol': getProtocol,
@@ -1126,13 +1346,16 @@ const commandMap = {
   'WebView.getIframeSrc': getIframeSrc,
   'WebView.getOrigin': getWebViewOrigin,
   'WebView.getSandbox': getIframeSandbox,
-  'WebView.getWebViewCsp': getWebViewCsp
+  'WebView.getWebViewCsp': getWebViewCsp,
+  // new
+  'WebView.create2': create2
 };
 
 const listen = async () => {
-  await WebWorkerRpcClient.create({
+  const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
+  setRpc(rpc);
 };
 
 const main = async () => {

package/package.json

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