Merge pull request #5 from superKalo/config/es5-transpiler

[WIP] Config / ES5 Compiler and Browser Support Matix
superKalo · Sep 26, 2017 · cce70f9 · cce70f9
2 parents 52da8c8 + 9f7741b
commit cce70f9
Show file tree

Hide file tree

Showing 7 changed files with 717 additions and 5 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,41 @@
+# Created by https://www.gitignore.io/api/sublimetext
+
+### SublimeText ###
+# cache files for sublime text
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+
+# workspace files are user-specific
+*.sublime-workspace
+
+# project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using SublimeText
+# *.sublime-project
+
+# sftp configuration file
+sftp-config.json
+
+# Package control specific files
+Package Control.last-run
+Package Control.ca-list
+Package Control.ca-bundle
+Package Control.system-ca-bundle
+Package Control.cache/
+Package Control.ca-certs/
+Package Control.merged-ca-bundle
+Package Control.user-ca-bundle
+oscrypto-ca-bundle.crt
+bh_unicode_properties.cache
+
+# Sublime-github package stores a github token in this file
+# https://packagecontrol.io/packages/sublime-github
+GitHub.sublime-settings
+
+# End of https://www.gitignore.io/api/sublimetext
+
+
+# Project-specific
+src/
+bower.json
+examples/
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ This package can be installed with:
 - Static HTML:
 
     ```html
-    <script src="/node_modules/super-repo/src/index.js"></script>
+    <script src="node_modules/super-repo/lib/index.js"></script>
     ```
 
 - Using ES6 Imports:
@@ -312,6 +312,32 @@ WeatherRepository.destroySyncer();
 ```
 
 
+## :tv: Browser Support
+
+SuperRepo is compiled using [Babel](https://babeljs.io/) to enable support for [ES5 browsers](http://caniuse.com/#feat=es5).
+
+At present, we officially aim to support the last two versions of the following browsers:
+
+- Chrome
+- Firefox
+- Safari
+- Opera
+- Edge
+
+If you need to support Internet Explorer 11 or any older browser, you need to include a polyfill like [polyfill.io](https://polyfill.io/v2/docs/) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) that emulates a full ES2015+ environment. Make sure you import the polyfill upfront.
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
+<script src="/node_modules/super-repo/lib/index.js"></script>
+
+<script>
+    const WeatherRepository = new SuperRepo({ /* ... */ });
+</script>
+```
+
+Even though SuperRepo can be used in older browsers, please note that our focus will always be on the modern-ish browsers listed above.
+
+
 ## :+1: Contributing
 I'm open to ideas and suggestions! If you want to contribute or simply you've cought a bug - you can either open an issue or clone the repository, tweak the `src/index.js` file and fire a Pull Request. There are no *fancy* build steps.
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "super-repo",
   "description": "Repository-ish pattern for your data, that implements best practices for working with and storing data on the client-side.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "authors": [
     "Kaloyan Kosev"
   ],

diff --git a/examples/ie11.html b/examples/ie11.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>SuperRepo IE11 Example Usage</title>
+</head>
+
+<body>
+
+<p>Open the source code and check it out.</p>
+
+<button id="get" type="button">Get data</button>
+
+<button id="invalidate" type="button">Invalidate data</button>
+<button id="clear" type="button">Clear (delete) data</button>
+
+<button id="sync" type="button">Init Syncer</button>
+<button id="stopsync" type="button">Stop Syncer</button>
+
+<!-- Uncomment for the jQuery $.ajax() example -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
+
+<!-- Link to the SuperRepo library -->
+<script src="../lib/index.js"></script>
+
+
+<script>
+
+    /**
+     * Define a function responsible for getting data from the server.
+     * It doesn't matter how, as long as your function returns a Promise.
+     */
+    var requestWeatherData = function() { return $.ajax({url:'weather.json'}) };
+
+    var WeatherRepository = new SuperRepo({
+        storage: 'LOCAL_STORAGE', // 'LOCAL_STORAGE', 'BROWSER_STORAGE' or 'LOCAL_VARIABLE'
+        name: 'weather',
+        request: requestWeatherData,
+
+        // Optional
+        outOfDateAfter: 30 * 1000, // 30 sec
+
+        // Optional, but recommended
+        dataModel: {
+            temperature: 't',
+            windspeed: 'w',
+            pressure: 'p'
+        },
+
+        // Optional
+        mapData: function(data) {
+            // Convert to Fahrenheit
+            var temperature = (data.temperature * 1.8) + 32;
+
+            // These two sways the same
+            var windspeed = data.windspeed;
+            var pressure = data.pressure;
+
+            return {
+                temperature: temperature,
+                windspeed: windspeed,
+                pressure: pressure
+            };
+        }
+    });
+
+
+    document.getElementById('get').addEventListener('click', function() {
+        WeatherRepository.getData().then(
+            function(_r) { console.log('It is ' + _r.temperature + ' degrees Fahrenheit.') }
+        );
+    });
+
+    document.getElementById('invalidate').addEventListener('click', function() {
+        WeatherRepository.invalidateData().then( function(_response) {
+            console.log('Previous data', _response.prevData);
+            console.log('Next data', _response.nextData);
+        });
+    });
+    document.getElementById('clear').addEventListener('click', function() {
+        WeatherRepository.clearData().then( function(_prevData) {
+            console.log('Previous (just deleted data) data', _prevData);
+        });
+    });
+
+    document.getElementById('sync').addEventListener('click', function() {
+        WeatherRepository.initSyncer();
+    });
+    document.getElementById('stopsync').addEventListener('click', function() {
+        WeatherRepository.destroySyncer();
+    });
+
+</script>
+
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -18,7 +18,7 @@
 <button id="stopsync" type="button">Stop Syncer</button>
 
 <!-- Link to the SuperRepo library -->
-<script src="../src/index.js"></script>
+<script src="../lib/index.js"></script>
 
 <!-- Uncomment for the jQuery $.ajax() example -->
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->