diff --git a/.gitignore b/.gitignore index 60bd316..0ad2ac8 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,9 @@ # es5-ff-spa-loader git ignore rules # +# Ignore release files +dist + # Ignore npm files node_modules npm-debug.log diff --git a/README.md b/README.md index 49ede4e..deb775e 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,127 @@ es5-ff-spa-loader ========= -A javascript library providing server defined loading of resources for a single page application. +A javascript library providing server defined loading of assets for a single page application. ## Installation - npm --save install es5-ff-spa-loader (TODO) + npm --save install es5-ff-spa-loader Then use the es5-ff-spa-loader.js in header as script resource or inline in body. -## Usage Mobile +## Features - Single index.html + * Assets caching for offline use. + * Assets hashing for fast syncing. + * Assets types: js,css,cssData + * Caching backends: null,localStorage,webSqlDB,sqllite + * Server url question ui. + * Loader error ui. + * Build-in Cordova booting. + * Build-in AngularJS booting. + +## Usage + +### Usage Multi Server (Minimal) + + FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources'; + FFSpaLoader.start(); + +### Usage Single Server - FFSpaLoader.options.debug.enable = true; - FFSpaLoader.options.boot.angular.modules.push('exampleUI'); FFSpaLoader.options.server.url = 'http://myserver'; FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources'; FFSpaLoader.start(); +### Usage Angular -## Usage Web - - Single index.html - FFSpaLoader.options.debug.enable = true; FFSpaLoader.options.boot.angular.modules.push('exampleUI'); FFSpaLoader.options.server.url = 'http://myserver'; FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources'; FFSpaLoader.start(function() { console.log('FFExample.boot done'); - }); + }); -## Usage Multi Server +## Assets format + + { + "data": { + "resources": [ + { + "url": "/static/js/assets.js", + "type": "js", + "hash": ​-164319899 + }, + { + "url": "/static/css/assets.css", + "type": "css", + "hash": ​1391550981 + }, + { + "url": "/static/css/assets-data.css", + "type": "cssData", + "hash": ​1371811412 + }, + ] + } + + The hash key is required as only on hash change the resource will be downloaded again, so multiple small files makes updates faster. - Leave out the 'FFSpaLoader.options.server.url' option then the user will be promted to input - the server on first boot. ## Options - * options.debug.enable = Enable console debug output. - * TODO + * debug.enable = Enable debug output. (default: false) + * debug.handler = Prints/log debug message. (default: console.log) + * debug.prefix = Debug message prefix. (default: 'FFSpaLoader.') + * error.handler = The error handler. (default: internal error handler ui) + * error.title = The error title. (default: 'Loader Error'); + * error.style = The error ui css style. (default: red border box) + * boot.cordova.enable = Use deviceready event to boot when cordova is detected. (default: true) + * boot.cordova.timeout = Boot after timeout when deviceready event is not received. (default: 4096) + * boot.cordova.flag = The window flag which is set when cordova is booted. (default: 'FFCordovaDevice') + * boot.angular.enable = Auto bootstrap angular modules. (default: true) + * boot.angular.modules = The angular modules to boot. (default: empty) + * server.url = The server url like 'https://myhost', when null the user will get promted to input it. (default: null) + * server.assets = The server path to the assets resources definition file, is required (default: null) + * server.timeout = The timeout to download the server resources. + * server.flag = The window flag which is set when the server.url is know. (default: 'FFServerUrl') + * server.question.transport = The transport to prefix the server.url with. (default: 'http://') + * server.question.title = The question ui title. (default: 'Server') + * server.question.text = The question ui text. (default: 'Please provide the server name;') + * server.question.style = The question ui css style.(note: pending change) (default: green border box) + * cache.meta = The cache backend for the meta information, null is auto select. (default: null) + * cache.js = The cache backend for for js, null is auto select. (default: null) + * cache.css = The cache backend for for css, null is auto select. (default: null) + * cache.cssData = The cache backend for for cssData, null is auto select. (default: null) + +## Cache Config + + Per default all cache type as in auto select mode which detect and used the following; + + * sqlitePlugin + * openDatabase + * localStorage + * none + + More custom types are possible like; (todo: needs testing) + + FFSpaLoader.options.cache.meta = null; // use auto -> TODO: currently other cached need meta needs fixing. + FFSpaLoader.options.cache.js = false; + FFSpaLoader.options.cache.css = false; + FFSpaLoader.options.cache.cssData = false; + + if (FFSpaLoader.factory.detect.localStorage()) { + FFSpaLoader.options.cache.css = FFSpaLoader.factory.cache.localStorage; + FFSpaLoader.options.cache.cssData = FFSpaLoader.factory.cache.localStorage; + } + FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources'; + FFSpaLoader.start(); + ## Example Application - There is a fully working express example application in the example folder. + There is a fully working nodejs example application in the example folder. ## Tested Browsers @@ -55,7 +132,7 @@ A javascript library providing server defined loading of resources for a single ## Todo - * Auto cache cleanup code. + * Auto cache cleanup code. (!! required before production !!) * test in production * Server header set+check support * Redo css(?divs) of server question diff --git a/es5-ff-spa-loader.js b/es5-ff-spa-loader.js index 6cee125..7fc246e 100644 --- a/es5-ff-spa-loader.js +++ b/es5-ff-spa-loader.js @@ -27,16 +27,6 @@ * FFSpaLoader is an assets loader for single page applications. * Its build around the concept the there is only a single static index.html which * synces all its assets to local cache for offline and or fast page loads. - * - * Features: - * - Assets caching for offline use. - * - Assets hashing for fast syncing. - * - Assets types: js,css,cssData - * - Caching backends: null,localStorage,webSqlDB,sqllite - * - Server url question ui. - * - Loader error ui. - * - Build-in Cordova booting. - * - Build-in AngularJS booting. * * @module FFSpaLoader */ diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..304b305 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,54 @@ + +var gulp = require('gulp'); +var uglify = require('gulp-uglify'); +var rename = require('gulp-rename'); +var clean = require('gulp-clean'); +var srcmaps = require('gulp-sourcemaps'); +var mocha = require('gulp-mocha'); +var jsdoc = require('gulp-jsdoc3'); + +var srcPath = './'; +var srcFile = 'es5-ff-spa-loader.js'; +var distPath = 'dist/'; +var testSrc = 'test/*.js'; + +gulp.task('clean', function() { + return gulp.src(distPath).pipe(clean()); +}); + +gulp.task('buildScript', ['test'], function() { + gulp.src(srcFile, {cwd: srcPath}).pipe(gulp.dest(distPath)); +}); + +gulp.task('buildScriptMin', ['buildScript'], function() { + gulp.src(srcFile, {cwd: srcPath}) + .pipe(srcmaps.init()) + .pipe(uglify({/*preserveComments: 'license'*/})) + .pipe(rename({ extname: '.min.js' })) + .pipe(srcmaps.write('.')) + .pipe(gulp.dest(distPath)); +}); + +gulp.task('testMocha',['clean'], function() { + process.env.JUNIT_REPORT_PATH = 'test/data/report.xml'; + return gulp.src(testSrc, {read: false}).pipe(mocha({reporter: 'mocha-jenkins-reporter'})); +}); + +gulp.task('buildJSDoc', function (cb) { + var jsdocConfig = { + opts: { + destination: 'dist/jsdoc' + }, + templates: { + thema: 'cerulean', + navType: 'vertical', + linenums: true + } + }; + gulp.src(srcFile, {read: false}).pipe(jsdoc(jsdocConfig, cb)); +}); + +gulp.task('test', ['clean','testMocha']); +gulp.task('build', ['test','buildScript','buildScriptMin'/*,'buildJSDoc'*/]); + + diff --git a/package.json b/package.json index 68c321b..e426790 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,15 @@ "version": "0.0.1", "description": "Javascript Single Page Application Loader", "main": "es5-ff-spa-loader.js", - "scripts": { - "test": "export JUNIT_REPORT_PATH=test/data/report.xml;export JUNIT_REPORT_STACK=1;node_modules/mocha/bin/mocha --reporter mocha-jenkins-reporter" + "scripts": { + "prepublish": "gulp build", + "clean": "gulp clean", + "build": "gulp build", + "test": "gulp test" }, "author": "Willem (http://forwardfire.net/)", "keywords": [ + "offline", "website", "assets", "js", @@ -27,16 +31,20 @@ "url": "https://bitbucket.org/im_ik/es5-ff-spa-loader.git" }, "devDependencies": { - "jsdoc": "^3.4.0", - "mocha": "2.2.x", + "gulp": "^3.9.0", + "gulp-clean": "^0.3.1", + "gulp-jsdoc3": "^0.1.0", + "gulp-mocha": "^2.2.0", + "gulp-rename": "^1.2.2", + "gulp-sourcemaps": "^1.6.0", + "gulp-uglify": "^1.5.1", "mocha-jenkins-reporter": "0.1.x", "mocha-jshint": "2.2.x" }, - "dependencies": { - }, + "dependencies": {}, "files": [ - "README.md", - "es5-ff-spa-loader.js", - "example/" + "README.md", + "example/", + "dist/" ] }