How to use the @codesandbox/common/lib/utils/url-generator.protocolAndHost function in @codesandbox/common

sentBroadcastsForPath.shift();
  }
  sentBroadcastsForPath.push(data.$id);
  if (
    // @ts-ignore This check is for the subworker polyfill, if it has an id it's polyfilled by subworkers and indeed a worker
    target.id ||
    target.constructor.name === 'Worker' ||
    // @ts-ignore Unknown to TS
    (typeof DedicatedWorkerGlobalScope !== 'undefined' &&
      // @ts-ignore Unknown to TS
      target instanceof DedicatedWorkerGlobalScope)
  ) {
    // @ts-ignore
    target.postMessage(data);
  } else {
    (target as Window).postMessage(data, protocolAndHost());
  }

  sentBroadcasts.set(path, sentBroadcastsForPath);
}

super(props);

    // eslint-disable-next-line no-unused-vars
    const [_, code] = document.location.search.match(/\?code=(.*)/);

    if (code) {
      if (window.opener) {
        if (window.opener.location.origin === window.location.origin) {
          window.opener.postMessage(
            {
              type: 'signin',
              data: {
                code,
              },
            },
            protocolAndHost()
          );
        }
        return;
      }
      this.state = {
        redirect: '/',
      };
      return;
    }

    this.state = {
      error: 'no message received',
    };
  }

function getProtocolAndHostWithSSE() {
  if (process.env.CODESANDBOX_HOST) {
    return protocolAndHost();
  }

  if (document.location.host.endsWith('.stream')) {
    return 'https://codesandbox.stream';
  }

  return 'https://codesandbox.io';
}

super(props);

    if (props.match.params.jwt) {
      if (window.opener) {
        this.state = {
          jwt: props.match.params.jwt,
        };
        if (window.opener.location.origin === window.location.origin) {
          window.opener.postMessage(
            {
              type: 'signin',
              data: {
                jwt: props.match.params.jwt,
              },
            },
            protocolAndHost()
          );
        }
        return;
      }
      this.state = {
        redirect: '/',
      };
      return;
    }

    this.state = {
      error: 'no message received',
    };
  }

function sendTypes() {
  global.postMessage(
    {
      $broadcast: true,
      $type: 'typings-sync',
      $data: types,
    },
    protocolAndHost()
  );
}

write(buffer: Buffer) {
    if (this.destroyed) {
      return;
    }

    const message = {
      $type: SOCKET_IDENTIFIER,
      $channel: this.channel,
      data: JSON.stringify(buffer),
    };

    if (this.isWorker) {
      ((this.target as unknown) as Worker).postMessage(message);
    } else {
      (this.target as Window).postMessage(message, protocolAndHost());
    }
  }
}

private send(type: string, data: any, id?: string) {
    global.postMessage(
      {
        $broadcast: true,
        $fs_ids: typeof id === 'undefined' ? this.workerIds : [id],
        $type: type,
        $data: data,
      },
      protocolAndHost()
    );
  }

export const getEditorUrl = (sandbox, mainModule, state) =>
  protocolAndHost() +
  sandboxUrl(sandbox) +
  getOptionsUrl(sandbox, mainModule, state);