Meet Fountain

angular1.html

<div class="main-container">
  <fountain-header></fountain-header>
  <main class="main">
    <fountain-title></fountain-title>
    <fountain-techs></fountain-techs>
  </main>
  <fountain-footer></fountain-footer>
</div>

angular1.js

angular.module('techs').component({
  template: require('./template.html'),
  controller: MainController
});

class MainController {
  constructor() {
    console.log('Component Main Controller');
  }
}

angular2.ts

import {Component} from '@angular/core';

@Component({
  selector: 'fountain-app',
  template: `
    <div class="main-container">
      <fountain-header></fountain-header>
      <main class="main">
        <fountain-title></fountain-title>
        <fountain-techs></fountain-techs>
      </main>
      <fountain-footer></fountain-footer>
    </div>
  `
})
export class MainComponent {
  constructor() {
    console.log('Component Main Controller');
  }
}

bower.json

{
  "name": "fountain-inject",
  "version": "0.0.1",
  "dependencies": {
    "angular": "^1.5.0",
    "angular-ui-router": "1.0.0-beta.1"
  },
  "devDependencies": {
    "angular-mocks": "^1.5.0"
  }
}

comp-ng2.js

ng.core.Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
}).Class({
  constructor: function() {}
});

comp-ng2.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

package.json

{
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-router": "^2.4.0",
    "axios": "^0.9.1"
  },
  "devDependencies": {
    "react-addons-test-utils": "^15.0.1",
    "del": "^2.0.2",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-filter": "^4.0.0",
    /* ... */ /* ... */ /* ... */
    "gulp-util": "^3.0.7",
    "gulp-sass": "^2.1.1",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-junit-reporter": "^1.1.0",
    "jasmine": "^2.4.1",
    "es6-shim": "^0.35.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-phantomjs-shim": "^1.1.2",
    "phantomjs-prebuilt": "^2.1.6",
    "babel-plugin-istanbul": "^2.0.1",
    "karma-webpack": "^1.7.0",
    "webpack": "2.1.0-beta.25",
    "html-webpack-plugin": "^2.9.0",
    "style-loader": "^0.13.0",
    "css-loader": "^0.23.1",
    "postcss-loader": "^0.8.0",
    "autoprefixer": "^6.2.2",
    "json-loader": "^0.5.4",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.1.2",
    "node-sass": "^3.4.2",
    "eslint": "^3.2.2",
    "eslint-config-xo-space": "^0.12.0",
    "babel-preset-react": "^6.1.18",
    "eslint-config-xo-react": "^0.7.0",
    "eslint-plugin-react": "^5.0.1",
    "eslint-loader": "^1.3.0",
    "babel-loader": "^6.2.0",
    "babel-eslint": "^6.0.2",
    "eslint-plugin-babel": "^3.1.0",
    "babel-core": "^6.13.0",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.2.0"
  },
  "scripts": {
    "build": "gulp",
    "serve": "gulp serve",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "extends": [
      "xo-react/space",
      "xo-space/esnext"
    ]
  }
}

react.js

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _main = require('./app/main');

require('./index.scss');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(_main.Main, null), document.getElementById('root'));

react.jsx

import React, {Component} from 'react';
import {Header} from './header';
import {Title} from './title';
import {Techs} from './techs/techs';
import {Footer} from './footer';

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100%'
  },
  main: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column'
  }
};

export class Main extends Component {
  render() {
    return (
      <div style={styles.container}>
        <Header/>
        <main style={styles.main}>
          <Title/>
          <Techs/>
        </main>
        <Footer/>
      </div>
    );
  }
}

system.js

SystemJS.config({
  packageConfigPaths: [
    'npm:@*/*.json',
    'npm:*.json',
    'github:*/*.json'
  ],
  map: {
    '@angular/common': 'npm:@angular/[email protected]',
    '@angular/compiler': 'npm:@angular/[email protected]',
    '@angular/core': 'npm:@angular/[email protected]',
    '@angular/http': 'npm:@angular/[email protected]',
    /* ... */ /* ... */ /* ... */
    '@angular/platform-browser': 'npm:@angular/[email protected]',
    '@angular/platform-browser-dynamic': 'npm:@angular/[email protected]',
    '@angular/router': 'npm:@angular/[email protected]',
    'assert': 'github:jspm/[email protected]',
    'babel': 'npm:[email protected]',
    'buffer': 'github:jspm/[email protected]',
    'child_process': 'github:jspm/[email protected]',
    'constants': 'github:jspm/[email protected]',
    'core-js': 'npm:[email protected]',
    'crypto': 'github:jspm/[email protected]',
    'events': 'github:jspm/[email protected]',
    'fs': 'github:jspm/[email protected]',
    'http': 'github:jspm/[email protected]',
    'module': 'github:jspm/[email protected]',
    'os': 'github:jspm/[email protected]',
    'path': 'github:jspm/[email protected]',
    'process': 'github:jspm/[email protected]',
    'reflect-metadata': 'npm:[email protected]',
    'rxjs': 'npm:[email protected]',
    'stream': 'github:jspm/[email protected]',
    'string_decoder': 'github:jspm/[email protected]',
    'timers': 'github:jspm/[email protected]',
    'url': 'github:jspm/[email protected]',
    'util': 'github:jspm/[email protected]',
    'vm': 'github:jspm/[email protected]',
    'zone.js': 'npm:[email protected]'
  },
  packages: {
    'npm:[email protected]': {
      'map': {
        'babel-messages': 'npm:[email protected]',
        'babel-code-frame': 'npm:[email protected]',
        'babel-helpers': 'npm:[email protected]',
        'babel-generator': 'npm:[email protected]',
        'babel-template': 'npm:[email protected]',
        'babel-register': 'npm:[email protected]',
        'shebang-regex': 'npm:[email protected]',
        'slash': 'npm:[email protected]',
        'babel-traverse': 'npm:[email protected]',
        'path-exists': 'npm:[email protected]',
        'babel-types': 'npm:[email protected]',
        'path-is-absolute': 'npm:[email protected]',
        'babel-runtime': 'npm:[email protected]',
        'debug': 'npm:[email protected]',
        'minimatch': 'npm:[email protected]',
        'private': 'npm:[email protected]',
        'lodash': 'npm:[email protected]',
        'source-map': 'npm:[email protected]',
        'convert-source-map': 'npm:[email protected]',
        'babylon': 'npm:[email protected]',
        'json5': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'babel-template': 'npm:[email protected]',
        'babel-runtime': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'babel-messages': 'npm:[email protected]',
        'babel-types': 'npm:[email protected]',
        'babel-runtime': 'npm:[email protected]',
        'lodash': 'npm:[email protected]',
        'source-map': 'npm:[email protected]',
        'detect-indent': 'npm:[email protected]',
        'jsesc': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'core-js': 'npm:[email protected]',
        'babel-core': 'npm:[email protected]',
        'path-exists': 'npm:[email protected]',
        'babel-runtime': 'npm:[email protected]',
        'lodash': 'npm:[email protected]',
        'home-or-tmp': 'npm:[email protected]',
        'mkdirp': 'npm:[email protected]',
        'source-map-support': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'babel-traverse': 'npm:[email protected]',
        'babel-types': 'npm:[email protected]',
        'babel-runtime': 'npm:[email protected]',
        'lodash': 'npm:[email protected]',
        'babylon': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'babel-runtime': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'babel-messages': 'npm:[email protected]',
        'babel-code-frame': 'npm:[email protected]',
        'babel-runtime': 'npm:[email protected]',
        'babel-types': 'npm:[email protected]',
        'debug': 'npm:[email protected]',
        'lodash': 'npm:[email protected]',
        'babylon': 'npm:[email protected]',
        'invariant': 'npm:[email protected]',
        'globals': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'babel-runtime': 'npm:[email protected]',
        'lodash': 'npm:[email protected]',
        'esutils': 'npm:[email protected]',
        'to-fast-properties': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'core-js': 'npm:[email protected]',
        'regenerator-runtime': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'esutils': 'npm:[email protected]',
        'chalk': 'npm:[email protected]',
        'js-tokens': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'symbol-observable': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'ms': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'brace-expansion': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'source-map': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'escape-string-regexp': 'npm:[email protected]',
        'ansi-styles': 'npm:[email protected]',
        'has-ansi': 'npm:[email protected]',
        'strip-ansi': 'npm:[email protected]',
        'supports-color': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'os-tmpdir': 'npm:[email protected]',
        'user-home': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'loose-envify': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'concat-map': 'npm:[email protected]',
        'balanced-match': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'repeating': 'npm:[email protected]',
        'get-stdin': 'npm:[email protected]',
        'minimist': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'js-tokens': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'minimist': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'ansi-regex': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'ansi-regex': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'is-finite': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'number-is-nan': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'stream-browserify': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'buffer-browserify': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'readable-stream': 'npm:[email protected]',
        'inherits': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'isarray': 'npm:[email protected]',
        'buffer-shims': 'npm:[email protected]',
        'core-util-is': 'npm:[email protected]',
        'process-nextick-args': 'npm:[email protected]',
        'string_decoder': 'npm:[email protected]',
        'util-deprecate': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'ieee754': 'npm:[email protected]',
        'isarray': 'npm:[email protected]',
        'base64-js': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'http-browserify': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'readable-stream': 'npm:[email protected]',
        'builtin-status-codes': 'npm:[email protected]',
        'to-arraybuffer': 'npm:[email protected]',
        'xtend': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'timers-browserify': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'crypto-browserify': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'browserify-cipher': 'npm:[email protected]',
        'create-ecdh': 'npm:[email protected]',
        'browserify-sign': 'npm:[email protected]',
        'create-hash': 'npm:[email protected]',
        'create-hmac': 'npm:[email protected]',
        'diffie-hellman': 'npm:[email protected]',
        'public-encrypt': 'npm:[email protected]',
        'randombytes': 'npm:[email protected]',
        'pbkdf2': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'process': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'create-hash': 'npm:[email protected]',
        'inherits': 'npm:[email protected]',
        'create-hmac': 'npm:[email protected]',
        'bn.js': 'npm:[email protected]',
        'elliptic': 'npm:[email protected]',
        'browserify-rsa': 'npm:[email protected]',
        'parse-asn1': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'cipher-base': 'npm:[email protected]',
        'sha.js': 'npm:[email protected]',
        'ripemd160': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'create-hash': 'npm:[email protected]',
        'inherits': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'randombytes': 'npm:[email protected]',
        'bn.js': 'npm:[email protected]',
        'miller-rabin': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'create-hash': 'npm:[email protected]',
        'randombytes': 'npm:[email protected]',
        'bn.js': 'npm:[email protected]',
        'browserify-rsa': 'npm:[email protected]',
        'parse-asn1': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'create-hmac': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'bn.js': 'npm:[email protected]',
        'elliptic': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'browserify-des': 'npm:[email protected]',
        'evp_bytestokey': 'npm:[email protected]',
        'browserify-aes': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'os-browserify': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'bn.js': 'npm:[email protected]',
        'brorand': 'npm:[email protected]',
        'hash.js': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'cipher-base': 'npm:[email protected]',
        'des.js': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'create-hash': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'bn.js': 'npm:[email protected]',
        'randombytes': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'create-hash': 'npm:[email protected]',
        'browserify-aes': 'npm:[email protected]',
        'evp_bytestokey': 'npm:[email protected]',
        'pbkdf2': 'npm:[email protected]',
        'asn1.js': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'bn.js': 'npm:[email protected]',
        'brorand': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'cipher-base': 'npm:[email protected]',
        'create-hash': 'npm:[email protected]',
        'evp_bytestokey': 'npm:[email protected]',
        'inherits': 'npm:[email protected]',
        'buffer-xor': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'inherits': 'npm:[email protected]',
        'minimalistic-assert': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'bn.js': 'npm:[email protected]',
        'inherits': 'npm:[email protected]',
        'minimalistic-assert': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'url-browserify': 'npm:[email protected]'
      }
    },
    'github:jspm/[email protected]': {
      'map': {
        'string_decoder-browserify': 'npm:[email protected]'
      }
    },
    'npm:[email protected]': {
      'map': {
        'punycode': 'npm:[email protected]',
        'querystring': 'npm:[email protected]'
      }
    }
  }
});

ts.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", '@angular/core'], function (require, exports, core_1) {
    "use strict";
    var AppComponent = (function () {
        function AppComponent() {
        }
        AppComponent = __decorate([
            core_1.Component({
                selector: 'my-app',
                template: '<h1>My First Angular App</h1>'
            })
        ], AppComponent);
        return AppComponent;
    }());
    exports.AppComponent = AppComponent;
});

ts.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

vue.vue

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

webpack.js

module.exports = {
  entry: [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    `./${conf.path.src('index')}`
  ]
  devtool: 'source-map',
  module: {
    loaders: [
      {test: /.json$/, loaders: ['json']},
      {test: /.js$/, exclude: /node_modules/, loader: 'eslint', enforce: 'pre'},
      {test: /\.(css|scss)$/, loaders: ['style', 'css', 'sass', 'postcss']},
      {test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'babel']}
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer]
      },
      debug: true
    })
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
  }
};