Merge pull request #3379 from camptocamp/examples

Build all ngeo examples

.travis.yml

@@ -47,6 +47,7 @@ install:
 
 - if [ ${IS_HOME} = TRUE ]; then openssl aes-256-cbc -K $encrypted_66d875d20fac_key -iv $encrypted_66d875d20fac_iv -in secrets.tar.enc -out secrets.tar -d; fi
 - if [ ${IS_HOME} = TRUE ]; then tar xvf secrets.tar; fi
+- if [ ${IS_HOME} = TRUE ]; then rm secrets.tar; fi
 - if [ ${IS_HOME} = TRUE ]; then cp .transifexrc $HOME/.transifexrc; fi
 - if [ ${IS_HOME} = TRUE ]; then cp ngeo_deploy_key $HOME/.ssh/id_rsa; fi
 - if [ ${IS_HOME} = TRUE ]; then chmod 600 $HOME/.ssh/id_rsa; fi
@@ -68,6 +69,7 @@ jobs:
     - make lint
     - make check-ngeox
     - make git-attributes
+    - make check-examples-checker
     - if [ "`git grep @fileoverview src contribs`" != "" ]; then echo "Using @fileoverview breaks the documentation main page"; false; fi
     - if [ "`git grep @example src contribs`" != "" ]; then echo "We don't use @example to have the example in the description"; false; fi
 
@@ -83,14 +85,14 @@ jobs:
   - stage: Tests
     env:
     - JOB=webpack
-    install:
+    - TARGET=ngeo-examples
+    script:
     - npm install
+    - npm install github:openlayers/openlayers#2ee34b825c4b5d6edd3569e10b3f63510754e012
     - buildtools/webpack-migration
     - git add -A  # for git-attributes
-    script:
-#    - NODE_ENV=dev node_modules/.bin/webpack
-#    - rm -rf dist/*
-#    - NODE_ENV=prod node_modules/.bin/webpack
+#    - if [ "${TRAVIS_PULL_REQUEST}" == false ]; then export NODE_ENV=prod; else export NODE_ENV=dev; fi
+#    - travis_wait node_modules/.bin/webpack
     - export CHROME_BIN=/opt/google/chrome/chrome
     - export DISPLAY=:99.0
     - sh -e /etc/init.d/xvfb start
@@ -110,6 +112,8 @@ jobs:
 #    - node_modules/.bin/eslint contribs/gmf/examples || true
 #    - node_modules/.bin/eslint contribs/gmf/test
 #    - node_modules/.bin/eslint contribs/gmf/apps
+#    - make check-examples-webpack
+#    - if [ ${IS_HOME} = TRUE ]; then JOB=publish-examples-ngeo buildtools/deploy.sh; fi
 
   - stage: Build
     env:
@@ -125,13 +129,6 @@ jobs:
     script:
     - buildtools/test_examples.py 2/2
     if: type = pull_request
-  - stage: Build
-    env:
-    - JOB=build-examples-ngeo
-    - DEVELOPMENT=TRUE
-    script:
-    - make examples-hosted-ngeo
-    if: type = pull_request
   - stage: Build
     env:
     - JOB=build-examples-gmf
@@ -174,12 +171,6 @@ jobs:
     after_success:
     - if [ "${PACKAGE_VERSION}" = "${TRAVIS_TAG}" ]; then npm publish; fi
     if: tag IS present AND repo = camptocamp/ngeo
-  - stage: Build and publish
-    env:
-    - JOB=publish-examples-ngeo
-    script:
-    - buildtools/deploy.sh
-    if: type = push AND repo = camptocamp/ngeo AND branch IS present
   - stage: Build and publish
     env:
     - JOB=publish-examples-gmf

Makefile

@@ -81,9 +81,11 @@ GMF_APPS_LIBS_JS_FILES += \
 	utils/ios-overlap-fix.js
 endif
 
-BUILD_EXAMPLES_CHECK_TIMESTAMP_FILES := $(patsubst examples/%.html,.build/%.check.timestamp,$(EXAMPLES_HTML_FILES)) \
+CHECK_EXAMPLE_CHECKER := $(patsubst test/check-example/%.html,.build/test-check-example/%.check.timestamp,$(shell ls -1 test/check-example/*.html))
+BUILD_EXAMPLES_CHECK_TIMESTAMP_FILES := \
 	$(patsubst contribs/gmf/examples/%.html,.build/contribs/gmf/%.check.timestamp,$(GMF_EXAMPLES_HTML_FILES)) \
 	$(addprefix .build/contribs/gmf/apps/,$(addsuffix .check.timestamp,$(GMF_APPS)))
+BUILD_EXAMPLES_CHECK_TIMESTAMP_FILES_WEBPACK := $(patsubst examples/%.html,.build/%.check.timestamp,$(EXAMPLES_HTML_FILES))
 EXAMPLES_HOSTED_REQUIREMENTS = .build/examples-hosted/lib/ngeo.css \
 	.build/examples-hosted/lib/angular.min.js \
 	.build/examples-hosted/lib/angular-animate.min.js \
@@ -210,7 +212,7 @@ apidoc: .build/apidoc
 dist: dist/ngeo.js dist/gmf.js
 
 .PHONY: check
-check: lint check-googs check-examples test dist build-gmf-apps
+check: lint check-googs check-examples-checker check-examples test dist build-gmf-apps
 
 .PHONY: check-googs
 check-googs:
@@ -225,9 +227,15 @@ build-gmf-apps: $(foreach APP,$(GMF_APPS),$(addprefix contribs/gmf/build/$(APP),
 	$(addprefix contribs/gmf/build/gmf-,$(addsuffix .json, $(LANGUAGES))) \
 	$(ANGULAR_LOCALES_FILES)
 
+.PHONY: check-examples-checker
+check-example-checker: $(CHECK_EXAMPLE_CHECKER)
+
 .PHONY: check-examples
 check-examples: $(BUILD_EXAMPLES_CHECK_TIMESTAMP_FILES)
 
+.PHONY: check-examples-webpack
+check-examples-webpack: $(BUILD_EXAMPLES_CHECK_TIMESTAMP_FILES_WEBPACK)
+
 .PHONY: lint
 lint: .build/eslint.timestamp git-attributes eof-newline check-ngeox
 
@@ -551,42 +559,38 @@ dist/gmf.js.map: dist/gmf.js
 
 node_modules/angular/angular.min.js: .build/node_modules.timestamp
 
-.PRECIOUS: .build/examples-hosted/%.html
-.build/examples-hosted/%.html: examples/%.html \
-		.build/examples-hosted/%.js \
-		$(NGEO_EXAMPLES_HOSTED_REQUIREMENTS)
-	mkdir -p $(dir $@)
-	sed -e 's|\.\./node_modules/openlayers/css/ol.css|lib/ngeo.css|' \
-		-e 's|\.\./node_modules/bootstrap/dist/css/bootstrap.css|lib/bootstrap.min.css|' \
-		-e 's|\.\./node_modules/font-awesome/css/font-awesome.css|lib/font-awesome.min.css|' \
-		-e 's|\.\./node_modules/jquery/dist/jquery.js|lib/jquery.min.js|' \
-		-e 's|\.\./third-party/jquery-ui/jquery-ui.min\.js|lib/jquery-ui.min.js|' \
-		-e 's|\.\./node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js|lib/jquery.ui.touch-punch.min.js|' \
-		-e 's|\.\./third-party/jquery-ui/jquery-ui.min\.css|lib/jquery-ui.min.css|' \
-		-e 's|\.\./node_modules/bootstrap/dist/js/bootstrap.js|lib/bootstrap.min.js|' \
-		-e 's|\.\./node_modules/angular/angular.js|lib/angular.min.js|' \
-		-e 's|\.\./node_modules/angular-animate/angular-animate.js|lib/angular-animate.min.js|' \
-		-e 's|\.\./node_modules/angular-float-thead/angular-floatThead.js|lib/angular-floatThead.js|' \
-		-e 's|\.\./node_modules/floatthead/dist/jquery.floatThead.min.js|lib/jquery.floatThead.min.js|' \
-		-e 's|\.\./node_modules/angular-gettext/dist/angular-gettext.js|lib/angular-gettext.min.js|' \
-		-e 's|\.\./node_modules/angular-touch/angular-touch.js|lib/angular-touch.min.js|' \
-		-e 's|\.\./node_modules/angular-dynamic-locale/dist/tmhDynamicLocale.js|lib/tmhDynamicLocale.min.js|' \
-		-e 's|\.\./node_modules/angular-ui-date/dist/date.js|lib/date.min.js|' \
-		-e 's|\.\./node_modules/d3/build/d3.js|lib/d3.min.js|' \
-		-e 's|\.\./node_modules/file-saver/FileSaver.min.js|lib/FileSaver.min.js|' \
-		-e 's|\.\./node_modules/corejs-typeahead/dist/typeahead.bundle.js|lib/typeahead.bundle.min.js|' \
-		-e 's|\.\./node_modules/proj4/dist/proj4\.js|lib/proj4.js|' \
-		-e 's|\.\./node_modules/jsts/dist/jsts\.min\.js|lib/jsts.min.js|' \
-		-e 's|\.\./node_modules/moment/min/moment\.min\.js|lib/moment.min.js|' \
-		-e 's|\.\./node_modules/url-polyfill/url-polyfill.js|lib/url-polyfill/url-polyfill.min.js|' \
-		-e 's|/@?main=$*.js|lib/transpile.js|' \
-		-e 's|default\.js|$*.js|' \
-		-e 's|\.\./utils/watchwatchers.js|lib/watchwatchers.js|' \
-		-e '/<head>/a\$(SED_NEW_LINE)    <script src="https.js"></script>$(SED_NEW_LINE)' $< > $@
-
 .PRECIOUS: .build/examples-hosted/contribs/gmf/%.html
 .build/examples-hosted/contribs/gmf/%.html: contribs/gmf/examples/%.html \
 		.build/examples-hosted/contribs/gmf/%.js \
+		.build/examples-hosted/https.js \
+		.build/examples-hosted/lib/ngeo.css \
+		.build/examples-hosted/lib/bootstrap.min.css \
+		.build/examples-hosted/lib/jquery-ui.min.css \
+		.build/examples-hosted/lib/font-awesome.min.css \
+		.build/examples-hosted/lib/jquery.min.js \
+		.build/examples-hosted/lib/jquery-ui.min.js \
+		.build/examples-hosted/lib/angular.min.js \
+		.build/examples-hosted/lib/angular-animate.min.js \
+		.build/examples-hosted/lib/angular-sanitize.min.js \
+		.build/examples-hosted/lib/angular-touch.min.js \
+		.build/examples-hosted/lib/angular-gettext.min.js \
+		.build/examples-hosted/lib/date.min.js \
+		.build/examples-hosted/lib/angular-floatThead.js \
+		.build/examples-hosted/lib/jquery.floatThead.min.js \
+		.build/examples-hosted/lib/slider.min.js \
+		.build/examples-hosted/lib/tmhDynamicLocale.min.js \
+		.build/examples-hosted/lib/transpile.js \
+		.build/examples-hosted/lib/watchwatchers.js \
+		.build/examples-hosted/lib/bootstrap.min.js \
+		.build/examples-hosted/lib/proj4.js \
+		.build/examples-hosted/lib/moment.min.js \
+		.build/examples-hosted/lib/FileSaver.min.js \
+		.build/examples-hosted/lib/typeahead.bundle.min.js \
+		.build/examples-hosted/lib/jsts.min.js \
+		.build/examples-hosted/lib/d3.min.js \
+		.build/examples-hosted/fonts/fontawesome-webfont.woff \
+		.build/examples-hosted/fonts/fontawesome-webfont.ttf \
+		.build/examples-hosted/fonts/fontawesome-webfont.svg \
 		$(GMF_EXAMPLES_HOSTED_REQUIREMENTS)
 	mkdir -p $(dir $@)
 	sed -e 's|\.\./node_modules/openlayers/css/ol\.css|lib/ngeo.css|' \
@@ -695,11 +699,6 @@ node_modules/angular/angular.min.js: .build/node_modules.timestamp
 .build/examples-hosted/contribs/gmf/apps/mobile/image/background-layer-button.png:
 	# no background layer button for the mobile
 
-.PRECIOUS: .build/examples-hosted/%.js
-.build/examples-hosted/%.js: .build/examples/%.js
-	mkdir -p $(dir $@)
-	cp $< $@
-
 .PRECIOUS: .build/examples-hosted/contribs/gmf/%.js
 .build/examples-hosted/contribs/gmf/%.js: .build/contribs/gmf/examples/%.js
 	mkdir -p $(dir $@)
@@ -730,16 +729,25 @@ node_modules/angular/angular.min.js: .build/node_modules.timestamp
 		--app 'Object editing editor' apps/oeedit/index.html 'An example application for editing an object.' \
 		$< $(GMF_EXAMPLES_HTML_FILES) > $@
 
+.build/test-check-example/%.check.timestamp: test/check-example/%.html \
+		.build/node_modules.timestamp \
+		buildtools/check-example.js
+	mkdir -p $(dir $@)
+	if ./node_modules/.bin/phantomjs --local-to-remote-url-access=true buildtools/check-example.js $< ; then false; fi
+	touch $@
+
 .build/%.check.timestamp: .build/examples-hosted/%.html \
-		.build/examples-hosted/%.js \
-		.build/node_modules.timestamp
+		.build/node_modules.timestamp \
+		buildtools/check-example.js
 	mkdir -p $(dir $@)
 	./node_modules/.bin/phantomjs --local-to-remote-url-access=true buildtools/check-example.js $<
+	#[ `compare -metric RMSE $<.png example/$*-ref.png /$<-diff.png 2>&1 | sed 's/^.*(\(.*\))/\1/g'` \< 0.05 ]
 	touch $@
 
 .build/contribs/gmf/%.check.timestamp: .build/examples-hosted/contribs/gmf/%.html \
 		.build/examples-hosted/contribs/gmf/%.js \
-		.build/node_modules.timestamp
+		.build/node_modules.timestamp \
+		buildtools/check-example.js
 	mkdir -p $(dir $@)
 	./node_modules/.bin/phantomjs --local-to-remote-url-access=true buildtools/check-example.js $<
 	touch $@
@@ -752,7 +760,9 @@ node_modules/angular/angular.min.js: .build/node_modules.timestamp
 .build/node_modules.timestamp: package.json
 	@# re-installing the node packages, while 'make serve' is still running
 	@# might freeze the system. ask for confirmation in that case.
-	@if ps -a | grep node; then \
+	@if ps a | grep -v grep | grep 'node buildtools/serve.js'; then \
+		echo "Affected process:"; \
+		ps a | grep -v grep | grep 'node buildtools/serve.js'; \
 		read -r -p "'make serve' might be running, which may cause problems. Abort? [Yn]" ABORT; \
 		if [ "$$ABORT" != "n" ]; then \
 			exit 1; \

buildtools/check-example.js

@@ -4,7 +4,7 @@
 // without errors. This script is executed by the Makefile's
 // check-examples target.
 
-
+require('phantomjs-polyfill-string-includes');
 var args = require('system').args;
 if (args.length != 2) {
   phantom.exit(1);
@@ -18,7 +18,7 @@ page.onError = function(msg, trace) {
     msgStack.push('TRACE:');
     trace.forEach(function(t) {
       if (t.file.startsWith('https://maps.googleapis.com/maps/api/js')) {
-        // Ignore google referer error
+        // Ignore google referrer error
         return;
       }
       msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function + '")' : ''));
@@ -38,6 +38,8 @@ page.onAlert = function(msg) {
 page.onResourceError = function(resourceError) {
   if (resourceError.url.includes('tile.openstreetmap.org')) {
     console.warn('Ignoring ressource error from openstreetmap');
+  } else if (resourceError.url.includes('https://maps.googleapis.com/maps/api/js')) {
+    console.warn('Ignoring ressource error from google');
   } else {
     console.log('Resource error: ' + resourceError.errorCode + ', ' + resourceError.url);
     exitCode = 2;
@@ -53,7 +55,7 @@ page.open(examplePath, function(s) {
   }
 
   setTimeout(function() {
-//    page.render(examplePath + '.png')
+    //page.render(examplePath + '.png')
     var consoleControl = require('console-control-strings');
 
     var color = exitCode == 0 ? 'green' : 'red';

buildtools/test_examples.py

@@ -17,10 +17,9 @@ def main():
         split_current = split_current - 1
     else:
         split_current, split_number = (0, 1)
-    return_code_1, split_current = check("examples", ".html", "", split_current, split_number)
     return_code_2, split_current = check("contribs/gmf/examples", ".html", "contribs/gmf/", split_current, split_number)
     return_code_3, split_current = check("contribs/gmf/apps", "", "contribs/gmf/apps/", split_current, split_number)
-    exit(max(return_code_1, return_code_2, return_code_3))
+    exit(max(return_code_2, return_code_3))
 
 
 def check(folder, file_postfix, make_prefix, split_current, split_number):

buildtools/webpack-migration

@@ -9,11 +9,15 @@ function jscodeshift {
 node node_modules/googshift/filename-case-from-module.js src '*.js'
 node node_modules/googshift/filename-case-from-module.js contribs/gmf/src '*.js'
 node node_modules/googshift/filename-case-from-module.js contribs/gmf/apps '*.js'
-jscodeshift --transform=node_modules/googshift/transforms/goog_provide_to_goog_module.js src contribs/gmf/src examples contribs/gmf/examples test contribs/gmf/test contribs/gmf/apps
-jscodeshift --transform=node_modules/googshift/transforms/goog_module_to_es6_module.js --absolute-module=true src contribs/gmf/src examples contribs/gmf/examples test contribs/gmf/test
-jscodeshift --transform=node_modules/googshift/transforms/goog_module_to_es6_module.js contribs/gmf/apps
+JSCS_ARGS="--non-default-import=ol,ol/proj,ol/proj/proj4,ol/dom,ol/array,ol/math,ol/extent,ol/easing,ol/color,ol/obj,ol/uri,ol/functions,ol/Sphere --package=ngeo,ol"
+jscodeshift --transform=node_modules/googshift/transforms/goog_provide_to_goog_module.js $JSCS_ARGS src contribs/gmf/src examples contribs/gmf/examples test contribs/gmf/test contribs/gmf/apps
+jscodeshift --transform=node_modules/googshift/transforms/goog_module_to_es6_module.js $JSCS_ARGS --absolute-module=true src contribs/gmf/src examples contribs/gmf/examples test contribs/gmf/test
+jscodeshift --transform=node_modules/googshift/transforms/goog_module_to_es6_module.js $JSCS_ARGS contribs/gmf/apps
+sed -i '/^if/d' src/proj/somerc.js src/proj/lcc.js src/proj/utm.js
+sed -i '/^  ol/d' src/proj/somerc.js src/proj/lcc.js src/proj/utm.js
+sed -i '/^}$/d' src/proj/somerc.js src/proj/lcc.js src/proj/utm.js
 git add -A  # To be removed when we use the new OpenLayers version
-buildtools/git-grep-sed " from 'ol/" "s/ from 'ol\/\(.*\)';/ from \'ol\/\L\1\';/g"  # To be removed when we use the new OpenLayers version
+buildtools/git-grep-sed 'Sphere' 's|ol/Sphere|ol/sphere|g'
 buildtools/git-grep-sed 'ngInject' 's|\* @ngInject|*//* @ngInject|g'
 find -name node_modules -prune -or -name '*.js' -print | xargs sed -i 's|^// webpack: ||g'
 node_modules/.bin/eslint --fix src contribs/gmf/src examples contribs/gmf/examples test contribs/gmf/test contribs/gmf/apps || true

buildtools/webpack.commons.js

@@ -3,7 +3,6 @@ const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const LessPluginCleanCSS = require('less-plugin-clean-css');
 const LessPluginAutoprefix = require('less-plugin-autoprefix');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 
 // Make sure that Angular finds jQuery and does not fall back to jqLite
@@ -79,9 +78,6 @@ const iconRule = {
 const config = {
   context: path.resolve(__dirname, '../'),
   devtool: 'source-map',
-  entry: {
-    app: './examples/search.js',
-  },
   output: {
     path: path.resolve(__dirname, '../dist/')
   },
@@ -99,13 +95,7 @@ const config = {
     new webpack.optimize.ModuleConcatenationPlugin(),
     provideJQueryPlugin,
     new ExtractTextPlugin('[name].css'),
-    new ExtractTextPlugin('[name].less'),
-    new HtmlWebpackPlugin({
-      template: 'examples/search.html',
-      chunksSortMode: 'manual',
-      filename: 'search.html',
-      chunks: ['app'],
-    }),
+    new ExtractTextPlugin('[name].less')
   ],
   resolve: {
     modules: [
@@ -115,6 +105,9 @@ const config = {
       'ngeo': path.resolve(__dirname, '../src'),
       'gmf': path.resolve(__dirname, '../contribs/gmf/src'),
       'goog/asserts': path.resolve(__dirname, '../src/goog.asserts.js'),
+      'goog/asserts.js': path.resolve(__dirname, '../src/goog.asserts.js'),
+      'ol/ol.css': 'openlayers/css/ol.css',
+      'ol': 'openlayers/src/ol',
       'jquery-ui/datepicker' : 'jquery-ui/ui/widgets/datepicker',
       'proj4': 'proj4/lib',
     }

buildtools/webpack.dev.js

@@ -1,6 +1,4 @@
 const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const commons = require('./webpack.commons.js');
 
 
 const resourcesRule = {
@@ -18,7 +16,7 @@ const loaderOptionsPlugin = new webpack.LoaderOptionsPlugin({
 });
 
 
-module.exports = webpackMerge(commons.config, {
+module.exports = {
   output: {
     filename: '[name].js'
   },
@@ -27,4 +25,4 @@ module.exports = webpackMerge(commons.config, {
       resourcesRule,
     ]
   },
-});
+};

buildtools/webpack.ngeoexamples.js

@@ -0,0 +1,32 @@
+const path = require('path');
+const ls = require('ls');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const plugins = [];
+const entry = {};
+
+for (const filename of ls('examples/*.html')) {
+  const name = filename.name;
+  entry[name] = `./examples/${name}.js`;
+  plugins.push(
+    new HtmlWebpackPlugin({
+      template: `examples/${name}.html`,
+      chunksSortMode: 'manual',
+      filename: name + '.html',
+      chunks: ['common', name],
+    }),
+  );
+}
+plugins.push(new webpack.optimize.CommonsChunkPlugin({
+  name: 'common',
+  chunks: Object.keys(entry),
+}));
+
+module.exports = {
+  output: {
+    path: path.resolve(__dirname, '../.build/examples-hosted/'),
+  },
+  entry: entry,
+  plugins: plugins,
+};