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#2411d8006082d1d19b3f5e8d0a9cae28eeb1e7f8
     - 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
+    - node_modules/.bin/webpack
     - export CHROME_BIN=/opt/google/chrome/chrome
     - export DISPLAY=:99.0
     - sh -e /etc/init.d/xvfb start
@@ -109,6 +111,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:
@@ -124,13 +128,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
@@ -173,12 +170,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

@@ -77,9 +77,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 \
@@ -206,7 +208,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:
@@ -221,9 +223,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
 
@@ -547,39 +555,6 @@ 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 \
@@ -691,11 +666,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 $@)
@@ -726,16 +696,31 @@ 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/examples-hosted/%.html: \
+		.build/examples-hosted/%.min.js \
+		.build/examples-hosted/%.min.js.map \
+		.build/examples-hosted/%.css \
+		.build/examples-hosted/common.min.js \
+		.build/examples-hosted/common.min.js.map
+.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 $@

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 + '")' : ''));
@@ -53,7 +53,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

@@ -13,7 +13,7 @@ jscodeshift --transform=node_modules/googshift/transforms/goog_provide_to_goog_m
 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
 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,8 @@ const config = {
       'ngeo': path.resolve(__dirname, '../src'),
       'gmf': path.resolve(__dirname, '../contribs/gmf/src'),
       'goog/asserts': 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,33 @@
+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: ['ngeo', name],
+    }),
+  );
+}
+plugins.push(new webpack.optimize.CommonsChunkPlugin({
+  name: 'common',
+  chunks: Object.keys(entry),
+}));
+
+module.exports = {
+  output: {
+    filename: '[name].min.js',
+    path: path.resolve(__dirname, '../.build/examples-hosted/'),
+  },
+  entry: entry,
+  plugins: plugins,
+};

buildtools/webpack.prod.js

@@ -1,7 +1,5 @@
 const path = require('path');
 const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const commons = require('./webpack.commons.js');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 
@@ -44,7 +42,7 @@ const examplesRule = {
   use: babelUse,
 }
 
-module.exports = webpackMerge(commons.config, {
+module.exports = {
   output: {
     filename: '[name].[chunkhash:20].js'
   },
@@ -68,4 +66,4 @@ module.exports = webpackMerge(commons.config, {
       'goog/asserts': path.resolve(__dirname, '../src/goog.asserts.prod.js'),
     }
   },
-});
+};