@lvce-editor/static-server 0.42.3 → 0.43.0

package/static/{22c7835 → 788e923}/packages/iframe-worker/dist/iframeWorkerMain.js

@@ -54,27 +54,6 @@ class VError extends Error {
   }
 }
 
-const walkValue = (value, transferrables, isTransferrable) => {
-  if (!value) {
-    return;
-  }
-  if (isTransferrable(value)) {
-    transferrables.push(value);
-    return;
-  }
-  if (Array.isArray(value)) {
-    for (const item of value) {
-      walkValue(item, transferrables, isTransferrable);
-    }
-    return;
-  }
-  if (typeof value === 'object') {
-    for (const property of Object.values(value)) {
-      walkValue(property, transferrables, isTransferrable);
-    }
-    return;
-  }
-};
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
 };
@@ -99,6 +78,27 @@ const isTransferrable = value => {
   }
   return false;
 };
+const walkValue = (value, transferrables, isTransferrable) => {
+  if (!value) {
+    return;
+  }
+  if (isTransferrable(value)) {
+    transferrables.push(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walkValue(item, transferrables, isTransferrable);
+    }
+    return;
+  }
+  if (typeof value === 'object') {
+    for (const property of Object.values(value)) {
+      walkValue(property, transferrables, isTransferrable);
+    }
+    return;
+  }
+};
 const getTransferrables = value => {
   const transferrables = [];
   walkValue(value, transferrables, isTransferrable);
@@ -131,30 +131,35 @@ const NewLine$1 = '\n';
 const joinLines$1 = lines => {
   return lines.join(NewLine$1);
 };
-const splitLines$1 = lines => {
-  return lines.split(NewLine$1);
-};
-const isModuleNotFoundMessage = line => {
-  return line.includes('[ERR_MODULE_NOT_FOUND]');
+const RE_AT = /^\s+at/;
+const RE_AT_PROMISE_INDEX = /^\s*at async Promise.all \(index \d+\)$/;
+const isNormalStackLine = line => {
+  return RE_AT.test(line) && !RE_AT_PROMISE_INDEX.test(line);
 };
-const getModuleNotFoundError = stderr => {
-  const lines = splitLines$1(stderr);
-  const messageIndex = lines.findIndex(isModuleNotFoundMessage);
-  const message = lines[messageIndex];
+const getDetails = lines => {
+  const index = lines.findIndex(isNormalStackLine);
+  if (index === -1) {
+    return {
+      actualMessage: joinLines$1(lines),
+      rest: []
+    };
+  }
+  let lastIndex = index - 1;
+  while (++lastIndex < lines.length) {
+    if (!isNormalStackLine(lines[lastIndex])) {
+      break;
+    }
+  }
   return {
-    message,
-    code: ERR_MODULE_NOT_FOUND
+    actualMessage: lines[index - 1],
+    rest: lines.slice(index, lastIndex)
   };
 };
-const RE_NATIVE_MODULE_ERROR = /^innerError Error: Cannot find module '.*.node'/;
-const RE_NATIVE_MODULE_ERROR_2 = /was compiled against a different Node.js version/;
+const splitLines$1 = lines => {
+  return lines.split(NewLine$1);
+};
 const RE_MESSAGE_CODE_BLOCK_START = /^Error: The module '.*'$/;
 const RE_MESSAGE_CODE_BLOCK_END = /^\s* at/;
-const RE_AT = /^\s+at/;
-const RE_AT_PROMISE_INDEX = /^\s*at async Promise.all \(index \d+\)$/;
-const isUnhelpfulNativeModuleError = stderr => {
-  return RE_NATIVE_MODULE_ERROR.test(stderr) && RE_NATIVE_MODULE_ERROR_2.test(stderr);
-};
 const isMessageCodeBlockStartIndex = line => {
   return RE_MESSAGE_CODE_BLOCK_START.test(line);
 };
@@ -169,51 +174,46 @@ const getMessageCodeBlock = stderr => {
   const relevantMessage = relevantLines.join(' ').slice('Error: '.length);
   return relevantMessage;
 };
-const getNativeModuleErrorMessage = stderr => {
-  const message = getMessageCodeBlock(stderr);
+const isModuleNotFoundMessage = line => {
+  return line.includes('[ERR_MODULE_NOT_FOUND]');
+};
+const getModuleNotFoundError = stderr => {
+  const lines = splitLines$1(stderr);
+  const messageIndex = lines.findIndex(isModuleNotFoundMessage);
+  const message = lines[messageIndex];
   return {
-    message: `Incompatible native node module: ${message}`,
-    code: E_INCOMPATIBLE_NATIVE_MODULE
+    message,
+    code: ERR_MODULE_NOT_FOUND
   };
 };
-const isModulesSyntaxError = stderr => {
+const isModuleNotFoundError = stderr => {
   if (!stderr) {
     return false;
   }
-  return stderr.includes('SyntaxError: Cannot use import statement outside a module');
-};
-const getModuleSyntaxError = () => {
-  return {
-    message: `ES Modules are not supported in electron`,
-    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
-  };
+  return stderr.includes('ERR_MODULE_NOT_FOUND');
 };
-const isModuleNotFoundError = stderr => {
+const isModulesSyntaxError = stderr => {
   if (!stderr) {
     return false;
   }
-  return stderr.includes('ERR_MODULE_NOT_FOUND');
+  return stderr.includes('SyntaxError: Cannot use import statement outside a module');
 };
-const isNormalStackLine = line => {
-  return RE_AT.test(line) && !RE_AT_PROMISE_INDEX.test(line);
+const RE_NATIVE_MODULE_ERROR = /^innerError Error: Cannot find module '.*.node'/;
+const RE_NATIVE_MODULE_ERROR_2 = /was compiled against a different Node.js version/;
+const isUnhelpfulNativeModuleError = stderr => {
+  return RE_NATIVE_MODULE_ERROR.test(stderr) && RE_NATIVE_MODULE_ERROR_2.test(stderr);
 };
-const getDetails = lines => {
-  const index = lines.findIndex(isNormalStackLine);
-  if (index === -1) {
-    return {
-      actualMessage: joinLines$1(lines),
-      rest: []
-    };
-  }
-  let lastIndex = index - 1;
-  while (++lastIndex < lines.length) {
-    if (!isNormalStackLine(lines[lastIndex])) {
-      break;
-    }
-  }
+const getNativeModuleErrorMessage = stderr => {
+  const message = getMessageCodeBlock(stderr);
   return {
-    actualMessage: lines[index - 1],
-    rest: lines.slice(index, lastIndex)
+    message: `Incompatible native node module: ${message}`,
+    code: E_INCOMPATIBLE_NATIVE_MODULE
+  };
+};
+const getModuleSyntaxError = () => {
+  return {
+    message: `ES Modules are not supported in electron`,
+    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
   };
 };
 const getHelpfulChildProcessError = (stdout, stderr) => {
@@ -232,7 +232,7 @@ const getHelpfulChildProcessError = (stdout, stderr) => {
     rest
   } = getDetails(lines);
   return {
-    message: `${actualMessage}`,
+    message: actualMessage,
     code: '',
     stack: rest
   };
@@ -274,7 +274,7 @@ const listen$7 = () => {
   }
   return globalThis;
 };
-const signal$7 = global => {
+const signal$8 = global => {
   global.postMessage(readyMessage);
 };
 class IpcChildWithModuleWorker extends Ipc {
@@ -300,7 +300,7 @@ class IpcChildWithModuleWorker extends Ipc {
     this._rawIpc.addEventListener('message', callback);
   }
 }
-const wrap$e = global => {
+const wrap$f = global => {
   return new IpcChildWithModuleWorker(global);
 };
 const withResolvers = () => {
@@ -309,6 +309,7 @@ const withResolvers = () => {
     _resolve = resolve;
   });
   return {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     resolve: _resolve,
     promise
   };
@@ -327,8 +328,8 @@ const waitForFirstMessage = async port => {
 };
 const listen$6 = async () => {
   const parentIpcRaw = listen$7();
-  signal$7(parentIpcRaw);
-  const parentIpc = wrap$e(parentIpcRaw);
+  signal$8(parentIpcRaw);
+  const parentIpc = wrap$f(parentIpcRaw);
   const firstMessage = await waitForFirstMessage(parentIpc);
   if (firstMessage.method !== 'initialize') {
     throw new IpcError('unexpected first message');
@@ -347,9 +348,6 @@ const listen$6 = async () => {
   return globalThis;
 };
 class IpcChildWithModuleWorkerAndMessagePort extends Ipc {
-  constructor(port) {
-    super(port);
-  }
   getData(event) {
     return getData$2(event);
   }
@@ -373,13 +371,107 @@ class IpcChildWithModuleWorkerAndMessagePort extends Ipc {
     this._rawIpc.start();
   }
 }
-const wrap$d = port => {
+const wrap$e = port => {
   return new IpcChildWithModuleWorkerAndMessagePort(port);
 };
 const IpcChildWithModuleWorkerAndMessagePort$1 = {
   __proto__: null,
   listen: listen$6,
-  wrap: wrap$d
+  wrap: wrap$e
+};
+const addListener = (emitter, type, callback) => {
+  if ('addEventListener' in emitter) {
+    emitter.addEventListener(type, callback);
+  } else {
+    emitter.on(type, callback);
+  }
+};
+const removeListener = (emitter, type, callback) => {
+  if ('removeEventListener' in emitter) {
+    emitter.removeEventListener(type, callback);
+  } else {
+    emitter.off(type, callback);
+  }
+};
+const getFirstEvent = (eventEmitter, eventMap) => {
+  const {
+    resolve,
+    promise
+  } = withResolvers();
+  const listenerMap = Object.create(null);
+  const cleanup = value => {
+    for (const event of Object.keys(eventMap)) {
+      removeListener(eventEmitter, event, listenerMap[event]);
+    }
+    resolve(value);
+  };
+  for (const [event, type] of Object.entries(eventMap)) {
+    const listener = event => {
+      cleanup({
+        type,
+        event
+      });
+    };
+    addListener(eventEmitter, event, listener);
+    listenerMap[event] = listener;
+  }
+  return promise;
+};
+const Message$1 = 3;
+const create$5$1 = async ({
+  messagePort,
+  isMessagePortOpen
+}) => {
+  if (!isMessagePort(messagePort)) {
+    throw new IpcError('port must be of type MessagePort');
+  }
+  if (isMessagePortOpen) {
+    return messagePort;
+  }
+  const eventPromise = getFirstEvent(messagePort, {
+    message: Message$1
+  });
+  messagePort.start();
+  const {
+    type,
+    event
+  } = await eventPromise;
+  if (type !== Message$1) {
+    throw new IpcError('Failed to wait for ipc message');
+  }
+  if (event.data !== readyMessage) {
+    throw new IpcError('unexpected first message');
+  }
+  return messagePort;
+};
+const signal$1 = messagePort => {
+  messagePort.start();
+};
+class IpcParentWithMessagePort extends Ipc {
+  getData = getData$2;
+  send(message) {
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    this._rawIpc.close();
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+  onClose(callback) {}
+}
+const wrap$5 = messagePort => {
+  return new IpcParentWithMessagePort(messagePort);
+};
+const IpcParentWithMessagePort$1 = {
+  __proto__: null,
+  create: create$5$1,
+  signal: signal$1,
+  wrap: wrap$5
 };
 
 const Two = '2.0';
@@ -391,7 +483,7 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set = (id, fn) => {
+const set$1 = (id, fn) => {
   callbacks[id] = fn;
 };
 const get = id => {
@@ -410,7 +502,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set(id, resolve);
+  set$1(id, resolve);
   return {
     id,
     promise
@@ -619,7 +711,7 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(message, errorProperty);
 };
-const create$5 = (message, result) => {
+const create$6 = (message, result) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -628,7 +720,7 @@ const create$5 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$5(message, resultProperty);
+  return create$6(message, resultProperty);
 };
 const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
   try {
@@ -724,7 +816,7 @@ const send = (transport, method, ...params) => {
 const invoke$4 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
-const invokeAndTransfer$3 = (ipc, method, ...params) => {
+const invokeAndTransfer$4 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
@@ -745,6 +837,8 @@ const execute = (command, ...args) => {
 
 const createRpc = ipc => {
   const rpc = {
+    // @ts-ignore
+    ipc,
     /**
      * @deprecated
      */
@@ -755,7 +849,7 @@ const createRpc = ipc => {
       return invoke$4(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
-      return invokeAndTransfer$3(ipc, method, ...params);
+      return invokeAndTransfer$4(ipc, method, ...params);
     }
   };
   return rpc;
@@ -771,7 +865,8 @@ const logError = () => {
 };
 const handleMessage = event => {
   const actualRequiresSocket = event?.target?.requiresSocket || requiresSocket;
-  return handleJsonRpcMessage(event.target, event.data, execute, resolve, preparePrettyError, logError, actualRequiresSocket);
+  const actualExecute = event?.target?.execute || execute;
+  return handleJsonRpcMessage(event.target, event.data, actualExecute, resolve, preparePrettyError, logError, actualRequiresSocket);
 };
 const handleIpc = ipc => {
   if ('addEventListener' in ipc) {
@@ -789,6 +884,26 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
+const create$5 = async ({
+  commandMap,
+  messagePort,
+  isMessagePortOpen
+}) => {
+  // TODO create a commandMap per rpc instance
+  register$4(commandMap);
+  const rawIpc = await IpcParentWithMessagePort$1.create({
+    messagePort,
+    isMessagePortOpen
+  });
+  const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  return rpc;
+};
+const MessagePortRpcParent = {
+  __proto__: null,
+  create: create$5
+};
 const create$2 = async ({
   commandMap
 }) => {
@@ -850,7 +965,7 @@ const getAssetDir = () => {
   }
   return '';
 };
-const assetDir = "/22c7835";
+const assetDir = "/788e923";
 
 const state$1 = {
   rpc: undefined
@@ -859,7 +974,7 @@ const invoke$3 = (method, ...params) => {
   const rpc = state$1.rpc;
   return rpc.invoke(method, ...params);
 };
-const invokeAndTransfer$2 = (method, ...params) => {
+const invokeAndTransfer$3 = (method, ...params) => {
   const rpc = state$1.rpc;
   return rpc.invokeAndTransfer(method, ...params);
 };
@@ -870,8 +985,8 @@ const setRpc = 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 invokeAndTransfer$2 = async (method, ...params) => {
+  return invokeAndTransfer$3('WebView.compatExtensionHostWorkerInvokeAndTransfer', method, ...params);
 };
 
 const getCredentialLess = locationHost => {
@@ -886,13 +1001,30 @@ const createUrl = (protocol, host) => {
   return protocol + '//' + host;
 };
 
-const createLocalHostUrl = (locationProtocol, locationHost, isGitpod, webViewPort) => {
+const createLocalHostUrl = (locationProtocol, locationHost, isGitpod, webViewPort, webViewId, useNewWebViewHandler) => {
   if (isGitpod) {
     return createUrl(locationProtocol, locationHost.replace('3000', `${webViewPort}`));
   }
+  if (useNewWebViewHandler) {
+    return `http://localhost:${webViewPort}/${webViewId}`;
+  }
   return `http://localhost:${webViewPort}`;
 };
 
+const getIframeSrcRemoteBaseUrl = (webViewRoot, locationOrigin, platform, webViewId, useNewWebViewHandler, root) => {
+  if (webViewRoot && (webViewRoot.startsWith('http:') || webViewRoot.startsWith('https:'))) {
+    if (webViewRoot.startsWith(locationOrigin)) {
+      const baseUrl = webViewRoot.slice(locationOrigin.length);
+      return `/remote${root}${baseUrl}`;
+    }
+    return webViewRoot;
+  }
+  if (platform === Remote && useNewWebViewHandler && webViewId) {
+    return `/${webViewId}`;
+  }
+  return '';
+};
+
 const getWebView = (webViews, webViewId) => {
   for (const webView of webViews) {
     if (webView.id === webViewId) {
@@ -948,7 +1080,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, useNewWebViewHandler) => {
   const webView = getWebView(webViews, webViewId);
   const webViewUri = getWebViewUri(webViews, webViewId);
   if (!webViewUri) {
@@ -963,14 +1095,14 @@ const getIframeSrcRemote = (webViews, webViewPort, webViewId, locationProtocol,
     iframeSrc = `${webViewScheme}://${webViewId}`;
   } else if (platform$1 === Remote) {
     webViewRoot = webView.uri;
-    iframeSrc = createLocalHostUrl(locationProtocol, locationHost, isGitpod, webViewPort);
+    iframeSrc = createLocalHostUrl(locationProtocol, locationHost, isGitpod, webViewPort, webViewId, useNewWebViewHandler);
   }
-  const iframeContent = getWebViewHtml('', '', webView.elements, assetDir);
+  const baseUrl = getIframeSrcRemoteBaseUrl(webViewRoot, locationOrigin, platform$1, webViewId, useNewWebViewHandler, root);
+  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 +1151,6 @@ const getIframeSrc$1 = (webView, locationOrigin, assetDir) => {
   if (srcHtml) {
     const blobUrl = getBlobUrl(srcHtml, 'text/html');
     return {
-      srcDoc: '',
       iframeSrc: blobUrl,
       webViewRoot: '',
       iframeContent: ''
@@ -1028,13 +1159,13 @@ const getIframeSrc$1 = (webView, locationOrigin, assetDir) => {
   return undefined;
 };
 
-const getIframeSrc = (webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform, assetDir, webViewScheme) => {
+const getIframeSrc = (webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform, assetDir, webViewScheme, useNewWebViewHandler) => {
   try {
     const webView = getWebView(webViews, webViewId);
     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, useNewWebViewHandler);
   } catch (error) {
     throw new VError(error, `Failed to construct webview iframe src`);
   }
@@ -1067,6 +1198,9 @@ const getSavedWebViewState = async id => {
     if (item && item.key && item.key === id && item.value && item.value.state) {
       return item.value.state;
     }
+    if (item && item.key && item.key === id && item.value) {
+      return item.value;
+    }
   }
   return undefined;
 };
@@ -1159,21 +1293,24 @@ const getOrigin = () => {
 const getHost = () => {
   return location.host;
 };
-const getProtocol = () => {
+const getProtocol$1 = () => {
   return location.protocol;
 };
+const getPort = () => {
+  return location.port;
+};
 
 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 invokeAndTransfer$1 = async (method, ...params) => {
+  return invokeAndTransfer$3('WebView.compatRendererProcessInvokeAndTransfer', method, ...params);
 };
 
 const WebView = 'lvce-oss-webview';
 
 const setPort = async (uid, port, origin, portType) => {
-  await invokeAndTransfer('WebView.setPort', uid, port, origin, portType);
+  await invokeAndTransfer$1('WebView.setPort', uid, port, origin, portType);
 };
 
 const invoke = async (method, ...params) => {
@@ -1183,22 +1320,25 @@ const invoke = async (method, ...params) => {
 const registerProtocol = async () => {
   await invoke('WebViewServer.registerProtocol');
 };
-const create = async previewServerId => {
-  await invoke('WebViewServer.create', previewServerId);
+const create = async (previewServerId, useNewWebViewHandler) => {
+  await invoke('WebViewServer.create', previewServerId, useNewWebViewHandler);
 };
 const start = async (previewServerId, webViewPort) => {
   await invoke('WebViewServer.start', previewServerId, webViewPort);
 };
+const setInfo2 = async info => {
+  await invoke('WebViewServer.setInfo2', info);
+};
 const setInfo = async (previewServerId, webViewId, webViewRoot, contentSecurityPolicy, iframeContent) => {
   await invoke('WebViewServer.setInfo', previewServerId, webViewId, webViewRoot, contentSecurityPolicy, iframeContent);
 };
-const setHandler = async (previewServerId, frameAncestors, webViewRoot, contentSecurityPolicy, iframeContent) => {
+const setHandler = async (previewServerId, frameAncestors, webViewRoot, contentSecurityPolicy, iframeContent, remotePathPrefix) => {
   await invoke('WebViewServer.setHandler', previewServerId, frameAncestors, webViewRoot, contentSecurityPolicy, iframeContent);
 };
 
-const register$3 = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, webViewId) => {
+const register$3 = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, webViewId, remotePathPrefix, useNewWebViewHandler) => {
   await registerProtocol();
-  await create(previewServerId); // TODO move this up
+  await create(previewServerId, useNewWebViewHandler); // TODO move this up
 
   // TODO send info to electron which domain maps to which webview root.
   // for example, video-preview maps to domain lvce-oss-webview://video-preview
@@ -1209,14 +1349,24 @@ const register$3 = async (previewServerId, webViewPort, frameAncestors, webViewR
   await setInfo(previewServerId, webViewId, webViewRoot, csp, iframeContent);
 };
 
-const register$2 = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent) => {
+const register$2 = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, webViewId, remotePathPrefix, useNewWebViewHandler) => {
   // 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 create(previewServerId, useNewWebViewHandler); // TODO move this up
   await start(previewServerId, webViewPort); // TODO move this up
-  await setHandler(previewServerId, frameAncestors, webViewRoot, csp, iframeContent);
+  if (useNewWebViewHandler) {
+    await setInfo2({
+      webViewRoot,
+      webViewId,
+      contentSecurityPolicy: csp,
+      iframeContent,
+      remotePathPrefix
+    });
+  } else {
+    await setHandler(previewServerId, frameAncestors, webViewRoot, csp, iframeContent);
+  }
   // TODO make this work in gitpod also
 };
 
@@ -1236,9 +1386,9 @@ const getModule = platform => {
   }
 };
 
-const register = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, platform, webViewId) => {
+const register = async (previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, platform, webViewId, remotePathPrefix, useNewWebViewHandler) => {
   const fn = getModule(platform);
-  return fn(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, webViewId);
+  return fn(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, webViewId, remotePathPrefix, useNewWebViewHandler);
 };
 
 const create2 = async ({
@@ -1257,10 +1407,10 @@ const create2 = async ({
     root = await invoke('Platform.getRoot');
   }
   const webViews = await getWebViews();
-  const locationProtocol = getProtocol();
+  const locationProtocol = getProtocol$1();
   const locationHost = getHost();
   const locationOrigin = getOrigin();
-  const iframeResult = getIframeSrc(webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform, assetDir$1, webViewScheme);
+  const iframeResult = getIframeSrc(webViews, webViewId, webViewPort, root, isGitpod, locationProtocol, locationHost, locationOrigin, platform, assetDir$1, webViewScheme, false);
   if (!iframeResult) {
     return undefined;
   }
@@ -1270,7 +1420,6 @@ const create2 = async ({
   const {
     iframeSrc,
     webViewRoot,
-    srcDoc,
     iframeContent
   } = iframeResult;
   const frameAncestors = getWebViewFrameAncestors(locationProtocol, locationHost);
@@ -1293,7 +1442,8 @@ const create2 = async ({
     port2
   } = getPortTuple();
   const portId = create$1();
-  await register(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, platform, webViewId);
+  const remotePathPrefix = '/remote';
+  await register(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, platform, webViewId, remotePathPrefix);
   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
@@ -1303,11 +1453,10 @@ 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, webView);
+  await invokeAndTransfer$2('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,
@@ -1316,8 +1465,277 @@ const create2 = async ({
   };
 };
 
+const invokeAndTransfer = async (method, ...params) => {
+  return invokeAndTransfer$3('WebView.compatRendererWorkerInvokeAndTransfer', method, ...params);
+};
+
+const createSecondaryWebViewConnection = async (uid, origin, port) => {
+  const portType = 'application';
+  await invokeAndTransfer('WebView.setPort', uid, port, origin, portType);
+};
+
+const createWebViewConnection = async (uid, origin) => {
+  const {
+    port1,
+    port2
+  } = getPortTuple();
+  const rpcPromise = MessagePortRpcParent.create({
+    messagePort: port2,
+    isMessagePortOpen: false,
+    commandMap: {}
+  });
+  const portType = 'test';
+  await invokeAndTransfer('WebView.setPort', uid, port1, origin, portType);
+  // TODO dispose rpc to avoid memory leak
+  const rpc = await rpcPromise;
+  return rpc;
+};
+
+const RE_PROTOCOL = /^([a-z-]+):\/\//;
+const getProtocol = uri => {
+  const protocolMatch = uri.match(RE_PROTOCOL);
+  if (protocolMatch) {
+    return protocolMatch[1];
+  }
+  return '';
+};
+
+// TODO if webViewId is provided,
+// 1. read file as blob
+// 2. send blob to webview
+// 3. create objecturl in webview
+// 4. send back objecturl to extension host worker
+// 5. provide objectUrl to extension
+
+const getRemoteUrlForWebView = async options => {
+  throw new Error('not implemented');
+  // TODO webviews should be stored in iframe worker
+  // const webView = ExtensionHostWebViewState.getWebView(options.webViewId as string)
+  // if (!webView) {
+  //   throw new Error(`webview ${options.webViewId} not found`)
+  // }
+  // const [rpc, blob] = await Promise.all([CreateWebViewIpc.createWebViewIpc(webView), Rpc.invoke('FileSystem.getBlob', uri)])
+  // const objectUrl = await rpc.invoke('createObjectUrl', blob)
+  // return objectUrl
+};
+
+const getRemoteUrl = async options => {
+  const {
+    uri
+  } = options;
+  // TODO uri should always have protocol
+  // then ask file system provider for remote url, for example disk file system provider or html file system provider
+  const protocol = getProtocol(uri);
+  if (platform === Remote && !protocol) {
+    if (uri.startsWith('/')) {
+      return `/remote${uri}`;
+    }
+    return `/remote/${uri}`;
+  }
+  if (platform === Electron && !protocol) {
+    if (uri.startsWith('/')) {
+      return `/remote${uri}`;
+    }
+    return `/remote/${uri}`;
+  }
+  return getRemoteUrlForWebView();
+};
+
+const commandMap$1 = {
+  'WebView.getRemoteUrl': getRemoteUrl
+};
+
+const getWebViewWorkerRpc = async rpcInfo => {
+  const {
+    port1,
+    port2
+  } = getPortTuple();
+  const rpcPromise = MessagePortRpcParent.create({
+    commandMap: commandMap$1,
+    messagePort: port2,
+    isMessagePortOpen: true
+  });
+  await invokeAndTransfer$2('WebView.createWebViewWorkerRpc', rpcInfo, port1);
+  const rpc = await rpcPromise;
+  // TODO rpc module should start the port
+  port2.start();
+  return rpc;
+};
+
+const rpcs = Object.create(null);
+const set = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const getAll = () => {
+  return rpcs;
+};
+
+const createWebViewRpc = async (webView, savedState, uri, portId, webViewUid, origin) => {
+  if (!webView || !webView.rpc || typeof webView.rpc !== 'string') {
+    return;
+  }
+  const rpcInfo = await invoke$2('WebView.getRpcInfo', webView.rpc);
+  if (rpcInfo.type !== 'web-worker') {
+    throw new Error(`only web worker rpc is supported for webviews`);
+  }
+  const rpc = await getWebViewWorkerRpc(rpcInfo);
+  const webViewInfo = {
+    rpc,
+    webViewId: webView.id,
+    portId: portId
+  };
+  set(portId, webViewInfo);
+  await rpc.invoke('LoadFile.loadFile', rpcInfo.url);
+
+  // TODO this connection might not be needed
+  await createWebViewConnection(webViewUid, origin);
+  const {
+    port1,
+    port2
+  } = getPortTuple();
+  await createSecondaryWebViewConnection(webViewUid, origin, port1);
+  await rpc.invokeAndTransfer('_WebView.setPort', portId, port2);
+  await rpc.invoke('_WebView.create', {
+    id: portId,
+    savedState,
+    webViewId: webView.id,
+    uri
+  });
+};
+
+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,
+  useNewWebViewHandler
+}) => {
+  let root = '';
+  if (platform === Remote) {
+    root = await invoke('Platform.getRoot');
+  }
+  const webViews = await getWebViews();
+  const webViewId = getWebViewId(webViews, uri);
+  const locationProtocol = getProtocol$1();
+  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, useNewWebViewHandler || false);
+  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 portId = create$1();
+  const remotePathPrefix = '/remote';
+  await register(previewServerId, webViewPort, frameAncestors, webViewRoot, csp, iframeContent, platform, webViewId, remotePathPrefix, useNewWebViewHandler);
+  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 hasOldRpc = !webView || !webView.rpc || typeof webView.rpc !== 'string';
+  if (hasOldRpc) {
+    const {
+      port1,
+      port2
+    } = getPortTuple();
+    const portType = '';
+    await setPort(id, port1, origin, portType);
+    await invokeAndTransfer$2('ExtensionHostWebView.create', webViewId, port2, uri, id, origin, webView);
+  }
+  const savedState = await getSavedWebViewState(webViewId);
+  if (hasOldRpc) {
+    await invoke$2('ExtensionHostWebView.load', webViewId, savedState);
+  }
+  await createWebViewRpc(webView, savedState, uri, portId, id, origin);
+  return {
+    iframeSrc,
+    sandbox,
+    portId,
+    origin,
+    csp: iframeCsp
+  };
+};
+
+const saveState = async () => {
+  const all = getAll();
+  const serialized = [];
+  for (const value of Object.values(all)) {
+    try {
+      const savedState = await value.rpc.invoke('WebView.saveState', value.portId);
+      serialized.push({
+        key: value.webViewId,
+        value: savedState
+      });
+    } catch (error) {
+      console.log(error);
+      // TODO maybe log the error
+      // ignore
+    }
+  }
+  return serialized;
+};
+
 const commandMap = {
-  'WebView.create2': create2
+  'WebView.create2': create2,
+  'WebView.create3': create3,
+  'WebView.saveState': saveState
 };
 
 const listen = async () => {