clean imports

responsively-org · Jul 20, 2020 · 9a9193f · 9a9193f
1 parent c7069fb
commit 9a9193f
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 26 deletions.
diff --git a/desktop-app/app/components/WebView/index.js b/desktop-app/app/components/WebView/index.js
@@ -43,7 +43,7 @@ import Maximize from '../icons/Maximize';
 import Minimize from '../icons/Minimize';
 import Focus from '../icons/Focus';
 import Unfocus from '../icons/Unfocus';
-import {BROWSER_SYNC_EMBED_SCRIPT} from '../../constants/browserSync';
+import {getBrowserSyncEmbedScriptURL} from '../../service/browserSync';
 
 const {BrowserWindow} = remote;
 
@@ -435,13 +435,18 @@ class WebView extends Component {
     pubsub.publish(DISABLE_INSPECTOR_ALL_DEVICES, [message]);
   };
 
-  initEventTriggers = webview => {
+  initBrowserSync = webview => {
     this.getWebContentForId(webview.getWebContentsId()).executeJavaScript(`
-
-      var bsScript= document.createElement('script');
-      bsScript.src = '${BROWSER_SYNC_EMBED_SCRIPT}';
+    var bsScript= document.createElement('script');
+      bsScript.src = '${getBrowserSyncEmbedScriptURL()}';
       bsScript.async = true;
       document.body.appendChild(bsScript);
+    `);
+  };
+
+  initEventTriggers = webview => {
+    this.initBrowserSync(webview);
+    this.getWebContentForId(webview.getWebContentsId()).executeJavaScript(`
     
       responsivelyApp.deviceId = '${this.props.device.id}';
       document.addEventListener('mouseleave', () => {

diff --git a/desktop-app/app/constants/browserSync.js b/desktop-app/app/constants/browserSync.js
@@ -1,5 +1 @@
-export const BROWSER_SYNC_PORT = 12719;
 export const BROWSER_SYNC_VERSION = '2.26.7';
-
-export const BROWSER_SYNC_HOST = `localhost:${BROWSER_SYNC_PORT}`;
-export const BROWSER_SYNC_EMBED_SCRIPT = `https://${BROWSER_SYNC_HOST}/browser-sync/browser-sync-client.js?v=${BROWSER_SYNC_VERSION}`;
diff --git a/desktop-app/app/main.dev.js b/desktop-app/app/main.dev.js
@@ -39,9 +39,13 @@ import {initMainShortcutManager} from './shortcut-manager/main-shortcut-manager'
 import {appUpdater} from './app-updater';
 import trimStart from 'lodash/trimStart';
 import isURL from 'validator/lib/isURL';
-import {initBrowserSync} from './utils/browserSync';
-import {BROWSER_SYNC_HOST} from './constants/browserSync';
+import {
+  initBrowserSync,
+  getBrowserSyncHost,
+  getBrowserSyncEmbedScriptURL,
+} from './utils/browserSync';
 import {getHostFromURL} from './utils/urlUtils';
+import browserSync from 'browser-sync';
 
 const path = require('path');
 const chokidar = require('chokidar');
@@ -126,7 +130,7 @@ app.on(
   'certificate-error',
   (event, webContents, url, error, certificate, callback) => {
     if (
-      getHostFromURL(url) === BROWSER_SYNC_HOST ||
+      getHostFromURL(url) === getBrowserSyncHost() ||
       (settings.get(USER_PREFERENCES) || {}).disableSSLValidation === true
     ) {
       event.preventDefault();
@@ -203,7 +207,6 @@ const openUrl = url => {
 const createWindow = async () => {
   hasActiveWindow = true;
 
-  initBrowserSync();
   if (process.env.NODE_ENV === 'development') {
     await installExtensions();
   }
@@ -245,6 +248,8 @@ const createWindow = async () => {
     }
   });
 
+  await initBrowserSync();
+
   initMainShortcutManager();
 
   const onResize = () => {
@@ -264,6 +269,13 @@ const createWindow = async () => {
     onResize();
   });
 
+  ipcMain.on('request-browser-sync', (event, data) => {
+    const browserSyncOptions = {
+      url: getBrowserSyncEmbedScriptURL(),
+    };
+    event.returnValue = browserSyncOptions;
+  });
+
   const watcher = new chokidar.FSWatcher();
   let watchedFileInfo = null;
   watcher.on('change', _ => {

diff --git a/desktop-app/app/service/browserSync.js b/desktop-app/app/service/browserSync.js
@@ -0,0 +1,15 @@
+import {ipcRenderer} from 'electron';
+import browserSync from 'browser-sync';
+
+let browserSyncOptions;
+
+if (!browserSyncOptions) {
+  browserSyncOptions = ipcRenderer.sendSync('request-browser-sync');
+  console.log(browserSyncOptions);
+}
+
+export function getBrowserSyncEmbedScriptURL() {
+  if (browserSyncOptions) {
+    return browserSyncOptions.url;
+  }
+}
diff --git a/desktop-app/app/utils/browserSync.js b/desktop-app/app/utils/browserSync.js
@@ -1,17 +1,35 @@
-const browserSync = require('browser-sync');
+const browserSync = require('browser-sync').create();
 
-import {
-  BROWSER_SYNC_PORT,
-  BROWSER_SYNC_VERSION,
-} from '../constants/browserSync';
+import {BROWSER_SYNC_VERSION} from '../constants/browserSync';
 
-export function initBrowserSync() {
-  browserSync.init({
-    port: BROWSER_SYNC_PORT,
-    open: false,
-    localOnly: true,
-    https: true,
-    notify: false,
-    ui: false,
+export async function initBrowserSync() {
+  if (!browserSync.active) {
+    await initInstance();
+  }
+}
+
+export function getBrowserSyncHost() {
+  return `localhost:${browserSync.getOption('port')}`;
+}
+
+export function getBrowserSyncEmbedScriptURL() {
+  return `https://${getBrowserSyncHost()}/browser-sync/browser-sync-client.js?v=${BROWSER_SYNC_VERSION}`;
+}
+
+async function initInstance(): Promise<> {
+  return new Promise((resolve, reject) => {
+    browserSync.init(
+      {
+        open: false,
+        localOnly: true,
+        https: true,
+        notify: false,
+        ui: false,
+      },
+      (err, bs) => {
+        resolve(bs);
+        reject(err);
+      }
+    );
   });
 }