Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] injected angularjs dependencies #969

Open
wants to merge 2 commits into
base: react-migration
Choose a base branch
from
Open

[WIP] injected angularjs dependencies #969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
079eef8
[WIP]Updated gulp file to run react code as well
gnehapk May 9, 2018
db6cd72
1) Injected angularjs dependencies
gnehapk May 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 95 additions & 60 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ var concat = require("gulp-concat");
var runSequence = require("run-sequence");
var rename = require("gulp-rename");

var babel = require("gulp-babel");
var sourcemaps = require("gulp-sourcemaps");
var browserify = require("gulp-browserify");

// Logger modules
var noop = require("gulp-noop");
var log = require("fancy-log");
Expand Down Expand Up @@ -49,7 +53,7 @@ var buildMode = process.argv[2] || "release";
var browsers = pluginOpts.targetBrowsers;

// System wide paths
var paths = (function () {
var paths = (function() {

var src = "./src/";

Expand All @@ -69,7 +73,7 @@ var paths = (function () {
})();

// File selection filters
var filters = (function () {
var filters = (function() {
return {
all: "**/*.*",
js: "**/*.{js,jst}",
Expand All @@ -88,55 +92,62 @@ del.sync([paths.dest]);

//Copy js file of the dependent libraries
gulp.task("jsLibraries", function() {
return gulp.src([
"node_modules/d3/d3.min.js",
"node_modules/c3/c3.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js", // For dropdown : temporary
"node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
"node_modules/angular/angular.js",
"node_modules/angular-ui-bootstrap/dist/ui-bootstrap.min.js",
"node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js",
"node_modules/angular-sanitize/angular-sanitize.min.js",
"node_modules/angular-animate/angular-animate.min.js",
"node_modules/angular-aria/angular-aria.min.js",
"node_modules/@uirouter/angularjs/release/angular-ui-router.min.js",
"node_modules/patternfly/dist/js/patternfly.js",
"node_modules/angular-patternfly/node_modules/lodash/lodash.min.js",
"node_modules/angular-patternfly/dist/angular-patternfly.js",
"node_modules/c3-angular/c3-angular.min.js",
"node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js",
"node_modules/angular-bootstrap-switch/dist/angular-bootstrap-switch.min.js",
"node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js",
"node_modules/datatables/media/js/jquery.dataTables.js",
"node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js"
])
.pipe(uglify())
.pipe(concat("libraries.js"))
.pipe(gulp.dest(paths.dest + paths.jsLibraries));
return gulp.src([
"node_modules/d3/d3.min.js",
"node_modules/c3/c3.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js", // For dropdown : temporary
"node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
"node_modules/angular/angular.js",
"node_modules/react/umd/react.production.min.js",
"node_modules/react-dom/umd/react-dom.production.min.js",
"node_modules/ngreact/ngReact.min.js",
"node_modules/angular-ui-bootstrap/dist/ui-bootstrap.min.js",
"node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js",
"node_modules/angular-sanitize/angular-sanitize.min.js",
"node_modules/angular-animate/angular-animate.min.js",
"node_modules/angular-aria/angular-aria.min.js",
"node_modules/@uirouter/angularjs/release/angular-ui-router.min.js",
"node_modules/patternfly/dist/js/patternfly.js",
"node_modules/angular-patternfly/node_modules/lodash/lodash.min.js",
"node_modules/angular-patternfly/dist/angular-patternfly.js",
"node_modules/c3-angular/c3-angular.min.js",
"node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js",
"node_modules/angular-bootstrap-switch/dist/angular-bootstrap-switch.min.js",
"node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js",
"node_modules/datatables/media/js/jquery.dataTables.js",
"node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js",
"node_modules/q/q.js",
"node_modules/moment/min/moment.min.js",
"node_modules/react-datepicker/dist/react-datepicker.min.js"
])
.pipe(uglify())
.pipe(concat("libraries.js"))
.pipe(gulp.dest(paths.dest + paths.jsLibraries));
});

//Copy css file of the dependent libraries
gulp.task("cssLibraries", function() {
return gulp.src([
"node_modules/patternfly/dist/css/patternfly.css",
"node_modules/patternfly/dist/css/patternfly-additions.css",
"node_modules/angular-patternfly/styles/angular-patternfly.css",
"node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"
])
.pipe(postCss([autoprefixer({ browsers: browsers })]))
.pipe(buildMode === "dev" ? noop() : minifyCSS())
.pipe(concat("libraries.css"))
.pipe(gulp.dest(paths.dest + paths.cssLibraries));
return gulp.src([
"node_modules/patternfly/dist/css/patternfly.css",
"node_modules/patternfly/dist/css/patternfly-additions.css",
"node_modules/angular-patternfly/styles/angular-patternfly.css",
"node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css",
"node_modules/react-datepicker/dist/react-datepicker.min.css"
])
.pipe(postCss([autoprefixer({ browsers: browsers })]))
.pipe(buildMode === "dev" ? noop() : minifyCSS())
.pipe(concat("libraries.css"))
.pipe(gulp.dest(paths.dest + paths.cssLibraries));
});

//Copy all the application files to dist except js and css
gulp.task("copy", function () {
gulp.task("copy", function() {
var filesToCopy;

filesToCopy = [filters.all, "!../package.json", "!" + filters.jscss];

paths.htmlFiles.forEach(function (htmlFile) {
paths.htmlFiles.forEach(function(htmlFile) {
//filesToCopy.push("!" + htmlFile);
});

Expand All @@ -145,15 +156,26 @@ gulp.task("copy", function () {
});

//Task to do eslint
gulp.task("eslint", function () {
gulp.task("eslint", function() {
return gulp.src([filters.js], { cwd: paths.src })
.pipe(eslint())
.pipe(eslint({
baseConfig: {
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
}
}
}))
.pipe(eslint.format("stylish"))
.pipe(buildMode === "dev" ? noop() : eslint.failAfterError());
});

//Copy the files needed to load before the bootstraping of application
gulp.task("preload", ["eslint"], function () {
gulp.task("preload", ["eslint"], function() {

return gulp.src(paths.preloads, { base: paths.src, cwd: paths.src })
.pipe(concat("preload.jst", { newLine: ";" }))
Expand All @@ -163,7 +185,7 @@ gulp.task("preload", ["eslint"], function () {
});

//Compile the scss files
gulp.task("sass", function () {
gulp.task("sass", function() {
return gulp.src([paths.cssMain], { base: paths.src, cwd: paths.src })
.pipe(sass())
.pipe(cssimport({
Expand All @@ -175,13 +197,13 @@ gulp.task("sass", function () {
});

//Copy the resources(fonts etc) to dist folder
gulp.task("resource", function (done) {
gulp.task("resource", function(done) {

var streams = merge(),
resources = Object.keys(paths.resources);

if (resources.length > 0) {
resources.forEach(function (resource) {
resources.forEach(function(resource) {
var stream = gulp.src(resource, { cwd: paths.src })
.pipe(gulp.dest(paths.dest + paths.resources[resource]));

Expand All @@ -195,13 +217,25 @@ gulp.task("resource", function (done) {

});

//bundle application js files in plugin-bundle.js and copy it to dist
gulp.task("jsbundle", ["eslint"], function () {
gulp.task("jsbundle", ["eslint"], function() {

return gulp.src(paths.jsFiles, { cwd: paths.src })
.pipe(concat("plugin-bundle.js"))
.pipe(babel({ presets: ["es2015", "react"] }))
.pipe(gulp.dest(paths.dest));
});

gulp.task("transform", ["jsbundle"], function() {
return gulp.src(paths.dest + 'plugin-bundle.js')
.pipe(browserify({
insertGlobals: true,
debug: true
}))
.pipe(concat("plugin-bundle.js"))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(buildMode === "dev" ? noop() : ngAnnotate())
.pipe(buildMode === "dev" ? noop() : uglify())
.pipe(sourcemaps.write(paths.dest + 'maps/'))
.pipe(gulp.dest(paths.dest));
});

Expand All @@ -212,25 +246,25 @@ gulp.task("watcher", ["browser-sync", "common"], function(done) {

filesToCopy = [filters.images, filters.html];

paths.htmlFiles.forEach(function (htmlPath) {
paths.htmlFiles.forEach(function(htmlPath) {
//filesToCopy.push("!" + htmlPath);
});

gulp.watch(filesToCopy, { cwd: paths.src }, function (event) {
gulp.watch(filesToCopy, { cwd: paths.src }, function(event) {
log("Modified:", colors.yellow(event.path));
runSequence("copy");
});

gulp.watch(paths.htmlFiles, { cwd: paths.src }, function (event) {
gulp.watch(paths.htmlFiles, { cwd: paths.src }, function(event) {
log("Modified:", colors.yellow(event.path));
});

gulp.watch(filters.js, { cwd: paths.src }, function (event) {
gulp.watch(filters.js, { cwd: paths.src }, function(event) {
log("Modified:", colors.yellow(event.path));
runSequence("preload", "jsbundle");
runSequence("preload", "jsbundle", "transform");
});

gulp.watch([filters.css, filters.scss], { cwd: paths.src }, function (event) {
gulp.watch([filters.css, filters.scss], { cwd: paths.src }, function(event) {
log("Modified:", colors.yellow(event.path));
runSequence("sass");
});
Expand All @@ -246,14 +280,14 @@ gulp.task("browser-sync", ["common"], function() {
middleware: [historyApiFallback()]

},
//proxy: "localhost:8080",
//proxy: "localhost:8080",
files: ["dist/**/*.*"],
reloadDebounce: 500
});
});

//Run the unit tests
gulp.task("ut", function (done) {
gulp.task("ut", function(done) {
var config = {
configFile: __dirname + "/karma.conf.js",
singleRun: true
Expand All @@ -262,16 +296,17 @@ gulp.task("ut", function (done) {
});

// Common task
gulp.task("common", ["eslint", "jsLibraries", "cssLibraries", "resource", "copy", "preload", "sass", "jsbundle"]);
gulp.task("common", ["eslint", "jsLibraries", "cssLibraries", "resource", "copy", "preload", "sass", "jsbundle", "transform"]);

// dev mode task
gulp.task("dev", ["common", "watcher"], function (done) {
gulp.task("dev", ["common", "watcher"], function(done) {
log(colors.bold(colors.yellow("Watchers Established. You can now start coding")));
});

// production mode task
gulp.task("release", ["common"], function (done) {
runSequence("ut", done);
gulp.task("release", ["common"], function(done) {
/* TODO: uncomment it once migrated the testing framework too */
//runSequence("ut", done);
});

//default task is common
Expand Down
23 changes: 20 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,35 @@
"font-awesome": "^4.7.0",
"idb-wrapper": "~1.7.1",
"jquery": "~3.1.1",
"moment": "^2.22.1",
"ngreact": "^0.5.1",
"numeral": "~1.5.3",
"patternfly": "~3.29.13"
"patternfly": "~3.29.13",
"patternfly-react": "^2.3.0",
"react": "^16.3.2",
"react-datepicker": "^1.5.0",
"react-dom": "^16.3.2",
"redux": "^4.0.0"
},
"devDependencies": {
"angular-mocks": "~1.5.8",
"ansi-colors": "^1.1.0",
"autoprefixer": "^7.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^8.0.0",
"browser-sync": "^2.18.13",
"browserify": "^16.2.0",
"chai": "^3.5.0",
"datatables": "^1.10.13",
"del": "*",
"fancy-log": "^1.3.2",
"glob": "~7.1.1",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1",
"gulp-browserify": "^0.5.1",
"gulp-clean-css": "^3.9.3",
"gulp-concat": "^2.6.0",
"gulp-cssimport": "^4.0.1",
Expand All @@ -52,9 +67,10 @@
"gulp-ng-annotate": "^2.0.0",
"gulp-noop": "^1.0.0",
"gulp-postcss": "^6.0.10",
"gulp-react": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "*",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^2.0.0",
"http-proxy": "^1.16.2",
"karma": "~1.3.0",
Expand All @@ -71,7 +87,8 @@
"mocha": "^3.1.2",
"request": "^2.78.0",
"run-sequence": "^1.2.2",
"sinon": "^1.17.6"
"sinon": "^1.17.6",
"vinyl-source-stream": "^2.0.0"
},
"TendrlProps": {
"preloads": [],
Expand Down
18 changes: 16 additions & 2 deletions src/commons/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
//# sourceURL=storage-management-plugin.js
(function() {

var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "gridshore.c3js.chart", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters"]);
(function() {
var storageModule = angular.module("TendrlModule", [
"ui.router",
"ui.bootstrap",
"frapontillo.bootstrap-switch",
"gridshore.c3js.chart",
"patternfly.charts",
"patternfly.card",
"patternfly.form",
"patternfly.notification",
"patternfly.table",
"patternfly.filters",
"react"
]);

/* Setting up provider for getting config data */
storageModule.provider("config", function() {
Expand Down Expand Up @@ -199,6 +211,8 @@
});
});



}, function(errorResponse) {
// Handle error case
});
Expand Down
21 changes: 21 additions & 0 deletions src/commons/js/ng-react-ng-deps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
//inject angularjs dependencies so that it can be used in react code.

export const ngDeps = {};

export function injectNgDeps(deps) {
Object.assign(ngDeps, deps);
window.ngDeps = ngDeps;
};

export default ngDeps;

var storageModule = angular.module("TendrlModule");

storageModule.run([
"$stateParams",
"utils",
"config",
($stateParams, utils, config) => {
injectNgDeps({ $stateParams, utils, config });
},
]);
Loading