Merge pull request #52 from tinesoft/feat-universal

feat(uinversal): add universal (server side rendering) support and up…

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,42 @@
+<!--
+IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION YOUR ISSUE MIGHT BE CLOSED WITHOUT INVESTIGATING
+-->
+### Bug Report or Feature Request (mark with an `x`)
+```
+- [ ] bug report -> please search issues before submitting
+- [ ] feature request
+```
+
+### OS and Version?
+<!--
+> Windows 7, 8 or 10. Linux (which distribution).macOS(Yosemite ? El Capitan? Sierra ?)
+-->
+
+### Versions.
+<!--
+Output from: `ng --version`, in case you are using Angular CLI.
+Otherwise, output from: `node --version` , `npm --version` and Angular version.
+-->
+
+
+### Repro steps.
+<!--
+Simple steps to reproduce this bug.
+Please include: commands run, packages added, related code changes.
+A link to a sample repo would help too.
+-->
+
+
+### The log given by the failure.
+<!-- Normally this include a stack trace and some more information. -->
+
+
+### Desired functionality.
+<!--
+What would like to see implemented?
+What is the usecase?
+-->
+
+
+### Mention any other details that might be useful.
+<!-- Please include a link to the repo if this is related to an OSS project. -->

.gitignore

@@ -6,30 +6,37 @@
 
 # dependencies
 /node_modules
-/bower_components
 
 # IDEs and editors
 /.idea
-/.vscode
 .project
 .classpath
+.c9/
 *.launch
 .settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage
 /libpeerconnection.log
 npm-debug.log
-yarn-error.log
 testem.log
 /typings
+/config/gulp-tasks/README.md
 
 # e2e
 /e2e/*.js
 /e2e/*.map
 
-#System Files
+# System Files
 .DS_Store
 Thumbs.db

.travis.yml

@@ -13,12 +13,6 @@ language: node_js
 node_js:
   - "6"
 
-before_install: 
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.21.3
-  - export PATH="$HOME/.yarn/bin:$PATH"
-  - yarn config set spin false
-  - yarn config set progress false
-
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

config/gulp-tasks/favicon.js

@@ -0,0 +1,96 @@
+const gulp = require('gulp');
+const runSequence = require('run-sequence');
+const gulpRealFavicon = require('gulp-real-favicon');
+
+
+const fs = require('fs');
+const helpers = require('../helpers');
+
+// File where the favicon markups are stored
+const FAVICON_DATA_FILE = 'faviconData.json';
+
+// Generate the icons. This task takes a few seconds to complete.
+// You should run it at least once to create the icons. Then,
+// you should run it whenever RealFaviconGenerator updates its
+// package (see the check-for-favicon-update task below).
+gulp.task('generate-favicon', cb => {
+  gulpRealFavicon.generateFavicon({
+    masterPicture: helpers.root('demo/src/assets/logo.png'),
+    dest: helpers.root('demo/src/'),
+    iconsPath: '/',
+    design: {
+      ios: {
+        pictureAspect: 'noChange',
+        assets: {
+          ios6AndPriorIcons: false,
+          ios7AndLaterIcons: false,
+          precomposedIcons: false,
+          declareOnlyDefaultIcon: true
+        }
+      },
+      desktopBrowser: {},
+      windows: {
+        pictureAspect: 'noChange',
+        backgroundColor: '#003399',
+        onConflict: 'override',
+        assets: {
+          windows80Ie10Tile: false,
+          windows10Ie11EdgeTiles: {
+            small: false,
+            medium: true,
+            big: false,
+            rectangle: false
+          }
+        }
+      },
+      androidChrome: {
+        pictureAspect: 'noChange',
+        themeColor: '#ffffff',
+        manifest: {
+          display: 'standalone',
+          orientation: 'notSet',
+          onConflict: 'override',
+          declared: true
+        },
+        assets: {
+          legacyIcon: false,
+          lowResolutionIcons: false
+        }
+      }
+    },
+    settings: {
+      scalingAlgorithm: 'Mitchell',
+      errorOnImageTooSmall: false
+    },
+    markupFile: FAVICON_DATA_FILE
+  }, () => {
+    cb();
+  });
+});
+
+// Inject the favicon markups in your HTML pages. You should run
+// this task whenever you modify a page. You can keep this task
+// as is or refactor your existing HTML pipeline.
+gulp.task('inject-favicon-markups', () => {
+  return gulp.src([helpers.root('demo/src/index.html')])
+    .pipe(gulpRealFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
+    .pipe(gulp.dest(helpers.root('demo/src/')));
+});
+
+// Check for updates on RealFaviconGenerator (think: Apple has just
+// released a new Touch icon along with the latest version of iOS).
+// Run this task from time to time. Ideally, make it part of your
+// continuous integration system.
+gulp.task('check-for-favicon-update', cb => {
+  let currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
+  gulpRealFavicon.checkForUpdates(currentVersion, function (err) {
+    if (err) {
+      throw err;
+    }
+  });
+});
+
+
+gulp.task('update-favicon', (cb) => {
+  runSequence('generate-favicon', 'inject-favicon-markups');
+});

config/gulp-tasks/faviconData.json

@@ -0,0 +1 @@
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/favicons.zip","files_urls":["https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/browserconfig.xml","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/favicon.ico","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/manifest.json","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/package_files/mstile-70x70.png"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/manifest.json\">\n<meta name=\"msapplication-TileColor\" content=\"#003399\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/5050533ac001e1a1ff4792016b204e3662d48589/favicon_preview.png","version":"0.15"}

config/gulp-tasks/markdown.js

@@ -0,0 +1,51 @@
+const gulp = require('gulp');
+const helpers = require('../helpers');
+
+const gulpRename = require('gulp-rename');
+const gulpReplace = require('gulp-replace');
+const gulpTap = require('gulp-tap');
+const Handlebars = require('handlebars');
+const Highlights = require('highlights');
+const MarkdownIt = require('markdown-it');
+
+
+const highligther = new Highlights();
+const markdowniter = new MarkdownIt({
+  highlight: function (code, lang) {
+    let highlighted =
+      highligther.highlightSync({
+        fileContents: code,
+        scopeName: 'source.js'
+      });
+    return highlighted;
+  }
+});
+
+//Demo Tasks
+gulp.task('markdown', () => {
+  return gulp.src(helpers.root('./demo/src/app/getting-started/getting-started.component.hbs'))
+    .pipe(gulpTap((file) => {
+      let template = Handlebars.compile(file.contents.toString());
+
+      return gulp.src(helpers.root('./README.md'))
+        .pipe(gulpTap((file) => {
+          // convert from markdown
+          let mdContents = file.contents.toString();
+          file.contents = new Buffer(markdowniter.render(mdContents), 'utf-8');
+        }))
+        .pipe(gulpTap((file) => {
+          // file is the converted HTML from the markdown
+          // set the contents to the contents property on data
+          let data = { README_md: file.contents.toString() };
+          // we will pass data to the Handlebars template to create the actual HTML to use
+          let html = template(data);
+          // replace the file contents with the new HTML created from the Handlebars template + data object that contains the HTML made from the markdown conversion
+          file.contents = new Buffer(html, "utf-8");
+        }))
+        .pipe(gulpReplace(/(<p>&lt;p align=&quot;center&quot;&gt;[^]+?)(<h2>Dependencies<\/h2>)/, '$2'))// strips everything between start & '<h2 id="installation">'
+        .pipe(gulpReplace('{', "{{ '{' }}")) // escapes '{' to comply with  angular parser
+        .pipe(gulpRename('getting-started.component.html'))
+        .pipe(gulp.dest(helpers.root('./demo/src/app/getting-started')));
+
+    }));
+});

config/helpers.js

@@ -1,7 +1,76 @@
-var path = require('path');
-var _root = path.resolve(__dirname, '..');
-function root(args) {
-    args = Array.prototype.slice.call(arguments, 0);
-    return path.join.apply(path, [_root].concat(args));
-}
-exports.root = root;
+const os = require('os');
+const path = require('path');
+const exec = require('child_process').exec;
+
+const _root = path.resolve(__dirname, '..');
+
+
+/**
+ * Plaform independant path to an executable cmd
+ * @param {string} path 
+ */
+platformPath = (path) => {
+    return /^win/.test(os.platform()) ? `${path}.cmd` : path;
+};
+
+/**
+ * 
+ * @param {string[]} args 
+ */
+rootDir = (...args) => { 
+    return path.join.apply(path, [_root].concat(...args));
+};
+
+/**
+ * 
+ * @param {string} cmd 
+ */
+binPath = (cmd) => {
+    return platformPath(`/node_modules/.bin/${cmd}`);
+};
+
+/**
+ * Promisified child_process.exec
+ *
+ * @param cmd
+ * @param opts See child_process.exec node docs
+ * @returns {Promise<number>}
+ */
+execp = (cmd, opts) => {
+    opts = Object.assign(opts || {},{    
+        stdout: process.stdout,
+        stderr: process.stderr
+    });
+    return new Promise((resolve, reject) => {
+        const child = exec(cmd, opts,
+			(err, stdout, stderr) => err ? reject(err.code) : resolve(0));
+
+        if (opts.stdout) {
+            child.stdout.pipe(opts.stdout);
+        }
+        if (opts.stderr) {
+            child.stderr.pipe(opts.stderr);
+        }
+    });
+};
+
+/**
+ * Install dependencies using yarn, if present, or npm otherwise.
+ * @param opts See child_process.exec node docs
+ * @returns {Promise<number>}
+ */
+installDependencies = (opts) => {
+    return execp('yarn -v') // first try to install deps using yarn
+        .then(exitCode=>
+            (exitCode === 0 ? execp('yarn install',opts) : execp('npm install',opts))
+            .then(exitCode => Promise.resolve(exitCode))
+        );
+};
+
+var exports = module.exports = {
+    root: rootDir,
+    execp: execp,
+    binPath: binPath,
+    platformPath: platformPath,
+    installDependencies: installDependencies
+};