[Libreoffice-commits] online.git: browsersync-config.js configure.ac loleaflet/Makefile.am loleaflet/README Makefile.am
Libreoffice Gerrit user
logerrit at kemper.freedesktop.org
Thu Feb 21 08:25:19 UTC 2019
Makefile.am | 9 ++++
browsersync-config.js | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++
configure.ac | 18 ++++++++
loleaflet/Makefile.am | 25 +++++++++--
loleaflet/README | 23 ++++++++++
5 files changed, 179 insertions(+), 4 deletions(-)
New commits:
commit 8a61a53027a0e3a1854c659de8b83dcb76737da6
Author: Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Feb 12 11:47:24 2019 +0100
Commit: Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Thu Feb 21 09:23:47 2019 +0100
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
diff --git a/Makefile.am b/Makefile.am
index 2a6a1ef5b..4fd349d76 100644
--- a/Makefile.am
+++ b/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
diff --git a/browsersync-config.js b/browsersync-config.js
new file mode 100644
index 000000000..c11f4d370
--- /dev/null
+++ b/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
+};
\ No newline at end of file
diff --git a/configure.ac b/configure.ac
index 2f05fd972..dc8560e67 100644
--- a/configure.ac
+++ b/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
])
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index d5b54001a..07f2dc886 100644
--- a/loleaflet/Makefile.am
+++ b/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 $@)
diff --git a/loleaflet/README b/loleaflet/README
index 3b9f53d21..8080605c0 100644
--- a/loleaflet/README
+++ b/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
-----------
More information about the Libreoffice-commits
mailing list