Integrate browser-sync

Tool to automatically reload used .css and .js files.
To make it work symlinks are created instead of a copy
if browsersync is enabled.

1. install:
npm install -g browser-sync

2. use configure option: --enable-browsersync

3. remove loleaflet/dist directory

4. run server:
LOOL_SERVE_FROM_FS=1 make run -j10

5. run browsersync:
browser-sync start --config browsersync-config.js

or

make sync-writer

Change-Id: Iebee1cc0b9a03bc866954ff33e3cb8a10b48e0af

Makefile.am

@@ -289,6 +289,15 @@ run: all @JAILS_PATH@
 			  --o:admin_console.username=admin --o:admin_console.password=admin \
 			  --o:logging.file[@enable]=true --o:logging.level=trace
 
+sync-writer:
+	browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file://$(abs_top_srcdir)/test/data/hello-world.odt"
+
+sync-calc:
+	browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file://$(abs_top_srcdir)/test/data/hello-world.ods"
+
+sync-impress:
+	browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file://$(abs_top_srcdir)/test/data/hello-world.odp"
+
 run-valgrind: all @JAILS_PATH@
 	@echo "Launching loolwsd under valgrind (but not forkit/loolkit, yet)"
 	@fc-cache "@LO_PATH@"/share/fonts/truetype

browsersync-config.js

@@ -0,0 +1,108 @@
+
+/*
+ |--------------------------------------------------------------------------
+ | Browser-sync config file
+ |--------------------------------------------------------------------------
+ |
+ | For up-to-date information about the options:
+ |   http://www.browsersync.io/docs/options/
+ |
+ | There are more options than you see here, these are just the ones that are
+ | set internally. See the website for more info.
+ |
+ |
+ */
+module.exports = {
+    "ui": {
+        "port": 3001
+    },
+    "files": ["loleaflet/dist/**/*.css", "loleaflet/dist/**/*.js"],
+    "watchEvents": [
+        "change"
+    ],
+    "watch": false,
+    "ignore": [],
+    "single": false,
+    "watchOptions": {
+        "ignoreInitial": true
+    },
+    "server": false,
+    "proxy": "http://localhost:9980/",
+    "port": 3000,
+    "middleware": false,
+    "serveStatic": [],
+    "ghostMode": {
+        "clicks": true,
+        "scroll": true,
+        "location": true,
+        "forms": {
+            "submit": true,
+            "inputs": true,
+            "toggles": true
+        }
+    },
+    "logLevel": "info",
+    "logPrefix": "Browsersync",
+    "logConnections": false,
+    "logFileChanges": true,
+    "logSnippet": true,
+    "rewriteRules": [],
+    "open": "local",
+    "browser": "default",
+    "cors": false,
+    "xip": false,
+    "hostnameSuffix": false,
+    "reloadOnRestart": false,
+    "notify": true,
+    "scrollProportionally": true,
+    "scrollThrottle": 0,
+    "scrollRestoreTechnique": "window.name",
+    "scrollElements": [],
+    "scrollElementMapping": [],
+    "reloadDelay": 0,
+    "reloadDebounce": 500,
+    "reloadThrottle": 0,
+    "plugins": [],
+    "injectChanges": true,
+    "startPath": "loleaflet/04597b4ec/loleaflet.html?file_path=./test/data/hello-world.odt",
+    "minify": true,
+    "host": null,
+    "localOnly": false,
+    "codeSync": true,
+    "timestamps": true,
+    "clientEvents": [
+        "scroll",
+        "scroll:element",
+        "input:text",
+        "input:toggles",
+        "form:submit",
+        "form:reset",
+        "click"
+    ],
+    "socket": {
+        "socketIoOptions": {
+            "log": false
+        },
+        "socketIoClientConfig": {
+            "reconnectionAttempts": 50
+        },
+        "path": "/browser-sync/socket.io",
+        "clientPath": "/browser-sync",
+        "namespace": "/browser-sync",
+        "clients": {
+            "heartbeatTimeout": 5000
+        }
+    },
+    "tagNames": {
+        "less": "link",
+        "scss": "link",
+        "css": "link",
+        "jpg": "img",
+        "jpeg": "img",
+        "png": "img",
+        "svg": "img",
+        "gif": "img",
+        "js": "script"
+    },
+    "injectNotification": false
+};

configure.ac

@@ -55,6 +55,10 @@ AC_ARG_ENABLE([debug],
               AS_HELP_STRING([--enable-debug],
                              [Enable debugging, link with debugging version of Poco libraries]))
 
+AC_ARG_ENABLE([browsersync],
+              AS_HELP_STRING([--enable-browsersync],
+                             [Don't copy files to the target directory but create the symlink to allow browsersync usage]))
+
 AC_ARG_ENABLE([anonymize-usernames],
               AS_HELP_STRING([--enable-anonymize-usernames],
                              [Enable anonymization/obfuscation of usernames in logs]))
@@ -207,6 +211,17 @@ AC_SUBST(LOOLWSD_LOGLEVEL)
 AC_SUBST(LOOLWSD_LOG_TO_FILE)
 AC_SUBST(LOLEAFLET_LOGGING)
 
+ENABLE_BROWSERSYNC=
+browsersync_msg="disabled: copy files to the target directory"
+if test "$enable_browsersync" = "yes"; then
+   AC_DEFINE([ENABLE_BROWSERSYNC],1,[Whether to create symlinks instead of copying files to the target dorectory to run browsersync])
+   ENABLE_BROWSERSYNC=true
+   browsersync_msg="enabled: create symlinks in the target directory"
+else
+    AC_DEFINE([ENABLE_BROWSERSYNC],0,[Whether to create symlinks instead of copying files to the target dorectory to run browsersync])
+fi
+AC_SUBST(ENABLE_BROWSERSYNC)
+
 if test -n "$with_logfile" ; then
    LOOLWSD_LOGFILE="$with_logfile"
 fi
@@ -487,6 +502,7 @@ AS_IF([test "$ENABLE_GTKAPP" = true],
       [PKG_CHECK_MODULES([WEBKIT],[webkit2gtk-4.0])])
 
 AM_CONDITIONAL([ENABLE_DEBUG], [test "$ENABLE_DEBUG" = "true"])
+AM_CONDITIONAL([ENABLE_BROWSERSYNC], [test "$ENABLE_BROWSERSYNC" = "true"])
 
 mobile_app=
 ENABLE_MOBILEAPP=
@@ -750,10 +766,12 @@ Configuration:
     Debug & low security    $debug_msg
     Anonymization           $anonym_msg
     Set capabilities        $setcap_msg
+    Browsersync             $browsersync_msg
 
     \$ make # to compile"
 if test -n "$with_lo_path"; then
 echo "    \$ make run # to start loolwsd
+    \$ make sync-writer|calc|impress # to start browsersync with specified app
 "
 fi
       ])

loleaflet/Makefile.am

@@ -55,7 +55,11 @@ LOLEAFLET_ADMIN_DST = $(patsubst $(srcdir)/admin/%,$(builddir)/dist/admin/%,$(LO
 
 define file_target
 $(1): $(2)
-	@cp $$< $$@
+	@if test -z '$(ENABLE_BROWSERSYNC)'; then \
+		`cp $$< $$@`; \
+	else \
+		`ln -sf ../$$< $$@`; \
+	fi
 
 endef
 
@@ -267,7 +271,11 @@ node_modules: npm-shrinkwrap.json
 
 $(builddir)/dist/plugins/%.js: $(srcdir)/plugins/%.js
 	@mkdir -p $(dir $@)
-	@cp $< $@
+	@if test -z '$(ENABLE_BROWSERSYNC)'; then \
+		`cp $< $@`; \
+	else \
+		`ln -sf $(abs_srcdir)/$< $@`; \
+	fi
 
 $(builddir)/dist/images/%: $(srcdir)/images/%
 	@mkdir -p $(dir $@)
@@ -279,11 +287,20 @@ $(builddir)/dist/%.html: $(srcdir)/html/%.html
 
 $(builddir)/dist/src/%.js: $(srcdir)/src/%.js
 	@mkdir -p $(dir $@)
-	@cp $< $@
+	@if test -z '$(ENABLE_BROWSERSYNC)'; then \
+		`cp $< $@`; \
+	else \
+		`echo $< $@`; \
+		`ln -sf $(abs_srcdir)/$< $@`; \
+	fi
 
 $(builddir)/dist/%.js: $(srcdir)/js/%.js
 	@mkdir -p $(dir $@)
-	@cp $< $@
+	@if test -z '$(ENABLE_BROWSERSYNC)'; then \
+		`cp $< $@`; \
+	else \
+		`ln -sf $(abs_srcdir)/$< $@`; \
+	fi
 
 $(builddir)/dist/node_modules/%.js: $(builddir)/node_modules/%.js
 	@mkdir -p $(dir $@)

loleaflet/README

@@ -91,6 +91,29 @@ with the --o:storage.filesystem[@allow]=true option of loolwsd. In case anything
 the debugging output. You might be asked to confirm the certificate if you are using self-signed certificate
 for loolwsd.
 
+Development
+-----------
+
+For faster development you might want to install browser-sync which can reload app in your browsers automatically
+after you edit and save the source code (so for .css only):
+
+npm install -g browser-sync
+
+Remember to add '--enable-browsersync' argument for './configure' script and delete `dist` directory.
+
+Run server and start browser-sync:
+
+LOOL_SERVE_FROM_FS=1 make run
+
+and in the second terminal:
+
+make sync-[writer|calc|impress]
+
+Your browser will open example document and now you can edit .css files and see the result without server restart.
+
+To run another document use:
+browser-sync start --config browsersync-config.js --startPath "loleaflet/96c23f663/loleaflet.html?file_path=file:///path/to/the/file.ods"
+
 Admin Panel
 -----------